Auto merge of #2994 - Turbo87:ember-link, r=locks

bors · bors · commit 08384702103f · 2020-11-02T17:41:22.000Z
Use `ember-link` for links in lists Using `LinkTo` can be "bad" for performance when used in loops since it still uses `Ember.Component` underneath. This PR switches two components to use https://github.com/buschtoens/ember-link instead, which should slightly improve the rendering times. It also significantly simplifies the API of the `FrontPageList::Item` component.
diff --git a/app/components/crate-row.hbs b/app/components/crate-row.hbs
@@ -1,14 +1,11 @@
 <div local-class="crate-row" data-test-crate-row ...attributes>
   <div local-class="description-box">
     <div>
-      <LinkTo
-        @route="crate"
-        @model={{@crate.id}}
-        local-class="name"
-        data-test-crate-link
-      >
-        {{ @crate.name }}
-      </LinkTo>
+      {{#let (link "crate" @crate.id) as |l|}}
+        <a href={{l.url}} local-class="name" data-test-crate-link {{on "click" l.transitionTo}}>
+          {{@crate.name}}
+        </a>
+      {{/let}}
       <span local-class="version" data-test-version>v{{@crate.max_version}}</span>
       <CopyButton
         @copyText='{{@crate.name}} = "{{@crate.max_version}}"'
diff --git a/app/components/front-page-list/item.hbs b/app/components/front-page-list/item.hbs
@@ -1,7 +1,7 @@
-<LinkTo @route={{@route}} @model={{@model}} local-class="link" ...attributes>
+<a href={{@link.url}} local-class="link" ...attributes {{on "click" @link.transitionTo}}>
   <div local-class="left">
     <div local-class="title">{{@title}}</div>
     {{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
   </div>
   {{svg-jar "chevron-right" local-class="right"}}
-</LinkTo>
+</a>
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -73,8 +73,7 @@
           {{#each this.model.new_crates as |crate index|}}
             <li>
               <FrontPageList::Item
-                @route="crate"
-                @model={{crate.id}}
+                @link={{link "crate" crate.id}}
                 @title={{crate.name}}
                 @subtitle="v{{crate.newest_version}}"
                 data-test-crate-link={{index}}
@@ -98,8 +97,7 @@
           {{#each this.model.most_downloaded as |crate index|}}
             <li>
               <FrontPageList::Item
-                @route="crate"
-                @model={{crate.id}}
+                @link={{link "crate" crate.id}}
                 @title={{crate.name}}
                 data-test-crate-link={{index}}
               />
@@ -122,8 +120,7 @@
           {{#each this.model.just_updated as |crate index|}}
             <li>
               <FrontPageList::Item
-                @route="crate"
-                @model={{crate.id}}
+                @link={{link "crate" crate.id}}
                 @title={{crate.name}}
                 @subtitle="v{{crate.newest_version}}"
                 data-test-crate-link={{index}}
@@ -147,8 +144,7 @@
           {{#each this.model.most_recently_downloaded as |crate index|}}
             <li>
               <FrontPageList::Item
-                @route="crate"
-                @model={{crate.id}}
+                @link={{link "crate" crate.id}}
                 @title={{crate.name}}
                 data-test-crate-link={{index}}
               />
@@ -171,8 +167,7 @@
           {{#each this.model.popular_keywords as |keyword|}}
             <li>
               <FrontPageList::Item
-                @route="keyword"
-                @model={{keyword}}
+                @link={{link "keyword" keyword}}
                 @title={{keyword.id}}
                 @subtitle="{{format-num keyword.crates_cnt}} crates"
               />
@@ -195,8 +190,7 @@
           {{#each this.model.popular_categories as |category|}}
             <li>
               <FrontPageList::Item
-                @route="category"
-                @model={{category.slug}}
+                @link={{link "category" category.slug}}
                 @title={{category.category}}
                 @subtitle="{{format-num category.crates_cnt}} crates"
               />
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "ember-export-application-global": "2.0.1",
     "ember-fetch": "8.0.2",
     "ember-keyboard": "6.0.2",
+    "ember-link": "^1.1.1",
     "ember-load-initializers": "2.1.1",
     "ember-maybe-import-regenerator": "0.1.6",
     "ember-modifier": "2.1.1",
diff --git a/yarn.lock b/yarn.lock
@@ -1389,7 +1389,7 @@
     "@handlebars/parser" "^1.1.0"
     simple-html-tokenizer "^0.5.9"
 
-"@glimmer/tracking@1.0.2":
+"@glimmer/tracking@1.0.2", "@glimmer/tracking@~1.0.1":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@glimmer/tracking/-/tracking-1.0.2.tgz#4fe9ca89e3f4a2ae8e37c8bd8e4ea0d886d9abbf"
   integrity sha512-9Vp04TM2IDTShGFdxccfvnmcaj4NwqLrwbOXm4iju5KL/WkeB8mqoCSLtO3kUg+80DqU0pKE8tR460lQP8CutA==
@@ -5971,7 +5971,7 @@ ember-assign-polyfill@^2.5.0, ember-assign-polyfill@^2.6.0:
     ember-cli-babel "^7.20.5"
     ember-cli-version-checker "^2.0.0"
 
-ember-auto-import@1.7.0, ember-auto-import@^1.2.19:
+ember-auto-import@1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/ember-auto-import/-/ember-auto-import-1.7.0.tgz#dd809fbe3d40647f2af443072405094d0e77ecf5"
   integrity sha512-onp7XZKwiit3BgkOPV/obi3fvLJmDNKTTjRsVtYz63yWeyT3ahiM8BIvJYzHGL4cxlGLvwpTJy2HYBDs6ZtvoQ==
@@ -6005,6 +6005,40 @@ ember-auto-import@1.7.0, ember-auto-import@^1.2.19:
     walk-sync "^0.3.3"
     webpack "^4.43.0"
 
+ember-auto-import@^1.2.19, ember-auto-import@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ember-auto-import/-/ember-auto-import-1.6.0.tgz#00a498172b04f7084a5d2a327f76f577038ed403"
+  integrity sha512-BRBrmbDXRuXG/WYbn/2DXM7bFNyQuT80du1scUrrX0+xFVkDOU08s46ZPCvzYprzSg2htgrztQ/nVdnfbIBV+Q==
+  dependencies:
+    "@babel/core" "^7.1.6"
+    "@babel/preset-env" "^7.10.2"
+    "@babel/traverse" "^7.1.6"
+    "@babel/types" "^7.1.6"
+    "@embroider/core" "^0.4.3"
+    babel-core "^6.26.3"
+    babel-loader "^8.0.6"
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    babel-template "^6.26.0"
+    babylon "^6.18.0"
+    broccoli-debug "^0.6.4"
+    broccoli-plugin "^1.3.0"
+    debug "^3.1.0"
+    ember-cli-babel "^6.6.0"
+    enhanced-resolve "^4.0.0"
+    fs-extra "^6.0.1"
+    fs-tree-diff "^1.0.0"
+    handlebars "^4.3.1"
+    js-string-escape "^1.0.1"
+    lodash "^4.17.10"
+    mkdirp "^0.5.1"
+    pkg-up "^2.0.0"
+    resolve "^1.7.1"
+    rimraf "^2.6.2"
+    symlink-or-copy "^1.2.0"
+    typescript-memoize "^1.0.0-alpha.3"
+    walk-sync "^0.3.3"
+    webpack "~4.28"
+
 ember-cli-app-version@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/ember-cli-app-version/-/ember-cli-app-version-4.0.0.tgz#033057ec5fe4d3ecdf5ac5380d442e2dc9f7526a"
@@ -6802,6 +6836,18 @@ ember-keyboard@6.0.2:
     ember-compatibility-helpers "^1.2.1"
     ember-modifier "^2.1.0"
 
+ember-link@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ember-link/-/ember-link-1.2.0.tgz#8145da3ac25a7c84110bb611ccd0d7eea13103d1"
+  integrity sha512-UYfljC5rGcKTqWneR6z2Ap8HaySfhs0U2gxC3fSEyXcR0GTdZGlouQAxy8QRLLdqYgU7tymfJGRS+c1VUsesgQ==
+  dependencies:
+    "@glimmer/tracking" "~1.0.1"
+    ember-auto-import "^1.6.0"
+    ember-cli-babel "^7.22.1"
+    ember-cli-htmlbars "^5.2.0"
+    ember-cli-typescript "^3.1.4"
+    fast-json-stable-stringify "^2.1.0"
+
 ember-load-initializers@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.1.tgz#d1a8bead00bc44222b0ab181840869992beb30f5"
@@ -7750,7 +7796,7 @@ fast-glob@^3.0.3, fast-glob@^3.1.1:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
-fast-json-stable-stringify@^2.0.0:
+fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
