Merge pull request #11734 from mansona/template-tag-codemod

Migrate to `<template>` tag components

Author: Turbo87

.ember-cli

@@ -5,5 +5,17 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": false,
+
+  /**
+    Setting `componentAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS files for the component and the component rendering test. "loose" is the default.
+  */
+  "componentAuthoringFormat": "strict",
+
+  /**
+    Setting `routeAuthoringFormat` to "strict" will force the blueprint generators to generate GJS
+    or GTS templates for routes. "loose" is the default
+  */
+  "routeAuthoringFormat": "strict"
 }

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+a0efcd29f514b404d568478423ca2c7074287a56
+da9ad2f8964594b6cbd75504fc43ae43e141081c

app/components/color-scheme-menu.gjs

@@ -0,0 +1,49 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import scopedClass from 'ember-scoped-css/helpers/scoped-class';
+import svgJar from 'ember-svg-jar/helpers/svg-jar';
+import eq from 'ember-truth-helpers/helpers/eq';
+
+import Dropdown from 'crates-io/components/dropdown';
+
+export default class Header extends Component {
+  /** @type {import("../services/dark-mode").default} */
+  @service colorScheme;
+
+  colorSchemes = [
+    { mode: 'light', svg: 'sun' },
+    { mode: 'dark', svg: 'moon' },
+    { mode: 'system', svg: 'color-mode' },
+  ];
+
+  get icon() {
+    return this.colorSchemes.find(({ mode }) => mode === this.colorScheme.scheme)?.svg;
+  }
+
+  <template>
+    <Dropdown data-test-dark-mode-menu ...attributes class='dropdown' as |dd|>
+      <dd.Trigger @hideArrow={{true}} class='trigger' data-test-dark-mode-toggle>
+        {{svgJar this.icon class=(scopedClass 'icon')}}
+        <span class='sr-only'>Change color scheme</span>
+      </dd.Trigger>
+
+      <dd.Menu class='menu' as |menu|>
+        {{#each this.colorSchemes as |colorScheme|}}
+          <menu.Item>
+            <button
+              class='menu-button button-reset {{if (eq colorScheme.mode this.colorScheme.scheme) "selected"}}'
+              type='button'
+              {{on 'click' (fn this.colorScheme.set colorScheme.mode)}}
+            >
+              {{svgJar colorScheme.svg class=(scopedClass 'icon')}}
+              {{colorScheme.mode}}
+            </button>
+          </menu.Item>
+        {{/each}}
+      </dd.Menu>
+    </Dropdown>
+  </template>
+}

app/components/color-scheme-menu.hbs

@@ -1,7 +1,9 @@
+import { on } from '@ember/modifier';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 
 import { restartableTask } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
 
 export default class CrateTomlCopy extends Component {
   @service notifications;
@@ -15,4 +17,10 @@ export default class CrateTomlCopy extends Component {
       this.notifications.error('Copy to clipboard failed!');
     }
   });
+
+  <template>
+    <button type='button' ...attributes {{on 'click' (perform this.copyTask)}}>
+      {{yield}}
+    </button>
+  </template>
 }

app/components/color-scheme-menu.js

@@ -0,0 +1,21 @@
+import { LinkTo } from '@ember/routing';
+
+import scopedClass from 'ember-scoped-css/helpers/scoped-class';
+import svgJar from 'ember-svg-jar/helpers/svg-jar';
+
+import formatNum from 'crates-io/helpers/format-num';
+
+<template>
+  <ul class='list'>
+    {{#each @crates as |crate|}}
+      <li>
+        <LinkTo @route='crate' @model={{crate.id}} class='link'>
+          {{crate.name}}
+          ({{crate.max_version}})
+          {{svgJar 'download-arrow' class=(scopedClass 'download-icon')}}
+          {{formatNum crate.downloads}}
+        </LinkTo>
+      </li>
+    {{/each}}
+  </ul>
+</template>

app/components/copy-button.js renamed to app/components/copy-button.gjs

@@ -0,0 +1,116 @@
+import { LinkTo } from '@ember/routing';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { task } from 'ember-concurrency';
+import pluralize from 'ember-inflector/helpers/pluralize';
+import link_ from 'ember-link/helpers/link';
+import svgJar from 'ember-svg-jar/helpers/svg-jar';
+import { alias } from 'macro-decorators';
+
+import FollowButton from 'crates-io/components/follow-button';
+import NavTabs from 'crates-io/components/nav-tabs';
+import PageHeader from 'crates-io/components/page-header';
+import Tooltip from 'crates-io/components/tooltip';
+
+export default class CrateHeader extends Component {
+  @service session;
+
+  @alias('loadKeywordsTask.last.value') keywords;
+
+  constructor() {
+    super(...arguments);
+
+    this.loadKeywordsTask.perform().catch(() => {
+      // ignore all errors and just don't display keywords if the request fails
+    });
+  }
+
+  get isOwner() {
+    let userId = this.session.currentUser?.id;
+    return this.args.crate?.hasOwnerUser(userId) ?? false;
+  }
+
+  loadKeywordsTask = task(async () => {
+    return (await this.args.crate?.keywords) ?? [];
+  });
+
+  <template>
+    <PageHeader class='header' data-test-heading>
+      <h1 class='heading'>
+        <span data-test-crate-name>{{@crate.name}}</span>
+        {{#if @version}}
+          <small data-test-crate-version>v{{@version.num}}</small>
+
+          {{#if @version.yanked}}
+            <span class='yanked-badge' data-test-yanked>
+              {{svgJar 'trash'}}
+              Yanked
+
+              <Tooltip>
+                This crate has been yanked, but it is still available for download for other crates that may be
+                depending on it.
+              </Tooltip>
+            </span>
+          {{/if}}
+        {{/if}}
+      </h1>
+
+      {{#if @crate.description}}
+        <div class='description'>
+          {{@crate.description}}
+        </div>
+      {{/if}}
+
+      {{#if this.keywords}}
+        <ul class='keywords'>
+          {{#each this.keywords as |keyword|}}
+            <li>
+              <LinkTo @route='keyword' @model={{keyword.id}} data-test-keyword={{keyword.id}}>
+                <span class='hash'>#</span>{{keyword.id}}
+              </LinkTo>
+            </li>
+          {{/each}}
+        </ul>
+      {{/if}}
+
+      {{#if this.session.currentUser}}
+        <FollowButton @crate={{@crate}} class='follow-button' />
+      {{/if}}
+    </PageHeader>
+
+    <NavTabs aria-label='{{@crate.name}} crate subpages' class='nav' as |nav|>
+      <nav.Tab
+        @link={{if @versionNum (link_ 'crate.version' @crate @versionNum) (link_ 'crate.index' @crate)}}
+        data-test-readme-tab
+      >
+        Readme
+      </nav.Tab>
+
+      <nav.Tab @link={{link_ 'crate.versions' @crate}} data-test-versions-tab>
+        {{pluralize @crate.num_versions 'Version'}}
+      </nav.Tab>
+
+      <nav.Tab
+        @link={{if
+          @versionNum
+          (link_ 'crate.version-dependencies' @crate @versionNum)
+          (link_ 'crate.dependencies' @crate)
+        }}
+        data-test-deps-tab
+      >
+        Dependencies
+      </nav.Tab>
+
+      <nav.Tab @link={{link_ 'crate.reverse-dependencies' @crate}} data-test-rev-deps-tab>
+        Dependents
+      </nav.Tab>
+
+      {{#if this.isOwner}}
+        <nav.Tab @link={{link_ 'crate.settings' @crate}} data-test-settings-tab>
+          Settings
+        </nav.Tab>
+      {{/if}}
+    </NavTabs>
+  </template>
+}