Auto merge of #2017 - Turbo87:angle-brackets, r=locks

Convert curly component to angle bracket component invocations see https://emberjs.github.io/rfcs/0311-angle-bracket-invocation.html the main advantage from this is that arguments and attributes are both first-class citizens now and components invoked with angle bracket syntax can use "modifiers" (see emberjs/rfcs#353)
rust-lang · Dec 21, 2019 · b8a31ad · b8a31ad
2 parents 7e562c6 + 6b5496e
commit b8a31ad
Show file tree

Hide file tree

Showing 35 changed files with 359 additions and 357 deletions.
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,19 +1,19 @@
-{{head-layout}}
+<HeadLayout />
 
 {{title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
-{{google-jsapi}}
+<GoogleJsapi />
 
 <nav id="header">
-  {{#link-to "index" tabindex="-1"}}
+  <LinkTo @route="index" @tabindex="-1">
     <img src="/assets/Cargo-Logo-Small.png" id="logo"
          height="100" width="100" alt="Cargo Logo">
-  {{/link-to}}
-  {{#link-to "index"}}
+  </LinkTo>
+  <LinkTo @route="index">
     <h1>
       crates.io
       <span class="subtitle">Rust Package Registry</span>
     </h1>
-  {{/link-to}}
+  </LinkTo>
 
   <form class='search' action='/search' {{ action "search" on="submit" }} data-test-search-form>
     <input type="text" class="search" name="q" id="cargo-desktop-search"
@@ -30,17 +30,17 @@
   </form>
 
   <div class='nav'>
-    {{#link-to "crates" (query-params letter=null page=1) data-test-all-crates-link}}
+    <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
       Browse All Crates
-    {{/link-to}}
+    </LinkTo>
     <span class="sep">|</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle class="dropdown"}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle class="dropdown">
         Docs
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" id="doc-links" class="dropdown"}}
+      <RlDropdown @tagName="ul" @id="doc-links" class="dropdown">
         <li><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></li>
@@ -53,52 +53,52 @@
         <li><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></li>
-        <li>{{#link-to 'policies'}}Policies{{/link-to}}</li>
-        <li>{{#link-to 'category-slugs'}}List of category slugs{{/link-to}}</li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+        <li><LinkTo @route="policies">Policies</LinkTo></li>
+        <li><LinkTo @route="category-slugs">List of category slugs</LinkTo></li>
+      </RlDropdown>
+    </RlDropdownContainer>
     <span class="sep">|</span>
     {{#if session.currentUser}}
-      {{#rl-dropdown-container class="dropdown-container"}}
-        {{#rl-dropdown-toggle class="dropdown"}}
-          {{user-avatar user=session.currentUser size='small'}}
+      <RlDropdownContainer class="dropdown-container">
+        <RlDropdownToggle class="dropdown">
+          <UserAvatar @user={{session.currentUser}} @size="small" />
           {{ session.currentUser.name }}
           <span class='arrow'></span>
-        {{/rl-dropdown-toggle}}
+        </RlDropdownToggle>
 
-        {{#rl-dropdown tagName="ul" class="dropdown current-user-links"}}
-          <li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
-          <li>{{#link-to 'me'}}Account Settings{{/link-to}}</li>
-          <li>{{#link-to 'me.pending-invites'}}Owner Invites{{/link-to}}</li>
-          <li class='last'>{{#link-to 'logout'}}Sign Out{{/link-to}}</li>
-        {{/rl-dropdown}}
-      {{/rl-dropdown-container}}
+        <RlDropdown @tagName="ul" class="dropdown current-user-links">
+          <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
+          <li><LinkTo @route="me">Account Settings</LinkTo></li>
+          <li><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></li>
+          <li class='last'><LinkTo @route="logout">Sign Out</LinkTo></li>
+        </RlDropdown>
+      </RlDropdownContainer>
     {{else}}
-      {{#link-to "login" data-test-login-link}}
+      <LinkTo @route="login" data-test-login-link>
         {{svg-jar "lock"}}
         Log in with GitHub
-      {{/link-to}}
+      </LinkTo>
     {{/if}}
   </div>
 
   <div class='menu'>
-    {{#rl-dropdown-container class='dropdown-container'}}
-      {{#rl-dropdown-toggle class='dropdown'}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle class="dropdown">
         Menu
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
-      {{#rl-dropdown tagName='ul' class='dropdown current-user-links'}}
-        <li>{{#link-to "crates"}}Browse All Crates{{/link-to}}</li>
+      </RlDropdownToggle>
+      <RlDropdown @tagName="ul" class="dropdown current-user-links">
+        <li><LinkTo @route="crates">Browse All Crates</LinkTo></li>
         {{#if session.currentUser}}
-          <li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
-          <li>{{#link-to 'me'}}Account Settings{{/link-to}}</li>
-          <li>{{#link-to 'me.pending-invites'}}Owner Invites{{/link-to}}</li>
-          <li class='last'>{{#link-to 'logout'}}Sign Out{{/link-to}}</li>
+          <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
+          <li><LinkTo @route="me">Account Settings</LinkTo></li>
+          <li><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></li>
+          <li class='last'><LinkTo @route="logout">Sign Out</LinkTo></li>
         {{else}}
-          <li>{{#link-to "login"}}Log in with GitHub{{/link-to}}</li>
+          <li><LinkTo @route="login">Log in with GitHub</LinkTo></li>
         {{/if}}
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 
   <div class='links'>
@@ -116,7 +116,7 @@
 </form>
 
 <main id="main" class='inner-content'>
-  {{flash-message}}
+  <FlashMessage />
 
   {{outlet}}
 </main>
@@ -134,7 +134,7 @@
   <span class="sep">|</span>
   <a href='https://www.rust-lang.org/policies/privacy'>Privacy notice</a>
   <span class="sep">|</span>
-  {{#link-to 'policies'}}Policies{{/link-to}}
+  <LinkTo @route="policies">Policies</LinkTo>
 </footer>
 
 <a href='https://github.com/rust-lang/crates.io' class='fork-me'>

diff --git a/app/templates/catch-all.hbs b/app/templates/catch-all.hbs
@@ -3,9 +3,12 @@
 <p id='p404'>
   Perhaps a search of the site may help?
 
-  {{input type="text" class="search"
-          placeholder="Search"
-          value=search
-          enter=(action "search")
-          required=true}}
+  <Input
+    @type="text"
+    class="search"
+    placeholder="Search"
+    @value={{search}}
+    @enter={{action "search"}}
+    required={{true}}
+  />
 </p>
diff --git a/app/templates/categories.hbs b/app/templates/categories.hbs
@@ -16,26 +16,26 @@
 
   <div class='sort' data-test-categories-sort>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="crates")}}
+          <LinkTo @query={{hash sort="crates"}}>
             # Crates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
@@ -44,7 +44,7 @@
     <div class='row' data-test-category={{category.slug}}>
       <div class='desc'>
         <div class='info'>
-          {{link-to category.category "category" category.slug}}
+          <LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo>
           <span class='small' data-test-crate-count>
             {{ pluralize (format-num category.crates_cnt) "crate" }}
           </span>
@@ -60,13 +60,13 @@
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/category/index.hbs b/app/templates/category/index.hbs
@@ -1,9 +1,9 @@
 {{ title category.category ' - Categories' }}
 
 <div id='crates-heading'>
-  {{#link-to "categories" (html-attributes aria-label="Categories")}}{{svg-jar "crate"}}{{/link-to}}
+  <LinkTo @route="categories" aria-label="Categories">{{svg-jar "crate"}}</LinkTo>
   <h1>
-    {{#each category.parent_categories as |parent|}}{{link-to parent.category "category" parent.slug}}::{{/each}}
+    {{#each category.parent_categories as |parent|}}<LinkTo @route="category" @model={{parent.slug}}>{{parent.category}}</LinkTo>::{{/each}}
     {{~ category.category }}
   </h1>
 </div>
@@ -20,7 +20,7 @@
         <div class='row'>
           <div class='desc'>
             <div class='info'>
-              {{link-to subcategory.category "category" subcategory.slug}}
+              <LinkTo @route="category" @model={{subcategory.slug}}>{{subcategory.category}}</LinkTo>
               <span class='small'>
                 {{ pluralize (format-num subcategory.crates_cnt) "crate" }}
               </span>
@@ -49,53 +49,53 @@
 
   <div class='sort' data-test-category-sort>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="downloads")}}
+          <LinkTo @query={{hash sort="downloads"}}>
             All-Time Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-downloads")}}
+          <LinkTo @query={{hash sort="recent-downloads"}}>
             Recent Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-updates")}}
+          <LinkTo @query={{hash sort="recent-updates"}}>
             Recent Updates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
 <div id='crates' class='white-rows'>
   {{#each model as |crate|}}
-    {{crate-row crate=crate}}
+    <CrateRow @crate={{crate}} />
   {{/each}}
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/components/api-token-row.hbs b/app/templates/components/api-token-row.hbs
@@ -1,15 +1,14 @@
 <div class={{if api_token.isNew "row create-token" "row"}}>
   <div class='name'>
     {{#if api_token.isNew}}
-      {{input
-          type="text"
-          placeholder="New token name"
-          disabled=api_token.isSaving
-          value=api_token.name
-          autofocus="autofocus"
-          enter="saveToken"
-          data-test-focused-input=true
-      }}
+      <Input
+        @type="text" placeholder="New token name"
+        @disabled={{api_token.isSaving}}
+        @value={{api_token.name}}
+        @autofocus="autofocus"
+        @enter="saveToken"
+        data-test-focused-input
+      />
     {{else}}
       {{ api_token.name }}
     {{/if}}

diff --git a/app/templates/components/category-list.hbs b/app/templates/components/category-list.hbs
@@ -1,12 +1,12 @@
 <ul>
   {{#each categories as |category|}}
     <li>
-      {{#link-to 'category' category.slug class='name'}}
+      <LinkTo @route="category" @model={{category.slug}} class="name">
         <span>{{ category.category }} ({{ format-num category.crates_cnt }})</span>
         <div class='arrow-in-list'>
           {{svg-jar "right-arrow"}}
         </div>
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ul>
diff --git a/app/templates/components/crate-downloads-list.hbs b/app/templates/components/crate-downloads-list.hbs
@@ -1,13 +1,13 @@
 <ul>
   {{#each crates as |crate|}}
     <li>
-      {{#link-to 'crate' crate.id class='name'}}
+      <LinkTo @route="crate" @model={{crate.id}} class="name">
         {{ crate.name }} ({{ crate.max_version }})
         <div class='right'>
           {{svg-jar "download-clear-back"}}
           {{ format-num crate.downloads }}
         </div>
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ul>
diff --git a/app/templates/components/crate-list.hbs b/app/templates/components/crate-list.hbs
@@ -1,12 +1,12 @@
 <ol>
   {{#each crates as |crate index|}}
     <li>
-      {{#link-to 'crate' crate.id class='name' data-test-crate-link=index}}
+      <LinkTo @route="crate" @model={{crate.id}} class="name" data-test-crate-link={{index}}>
         <span>{{ crate.name }} ({{ crate.max_version }})</span>
         <div class='arrow-in-list'>
           {{svg-jar "right-arrow"}}
         </div>
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ol>