Move <template> tags to the end of the class definition

Author: Turbo87

app/components/color-scheme-menu.gjs

@@ -10,6 +10,19 @@ 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>
@@ -33,16 +46,4 @@ export default class Header extends Component {
       </dd.Menu>
     </Dropdown>
   </template>
-  /** @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;
-  }
 }

app/components/copy-button.gjs

@@ -6,11 +6,6 @@ import { restartableTask } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
 
 export default class CrateTomlCopy extends Component {
-  <template>
-    <button type='button' ...attributes {{on 'click' (perform this.copyTask)}}>
-      {{yield}}
-    </button>
-  </template>
   @service notifications;
 
   copyTask = restartableTask(async () => {
@@ -22,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/crate-header.gjs

@@ -14,6 +14,27 @@ 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'>
@@ -92,24 +113,4 @@ export default class CrateHeader extends Component {
       {{/if}}
     </NavTabs>
   </template>
-  @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) ?? [];
-  });
 }

app/components/crate-sidebar.gjs

@@ -26,6 +26,51 @@ import prettyBytes from 'crates-io/helpers/pretty-bytes';
 import { simplifyUrl } from './crate-sidebar/link';
 
 export default class CrateSidebar extends Component {
+  @service notifications;
+  @service playground;
+  @service sentry;
+
+  get showHomepage() {
+    let { repository, homepage } = this.args.crate;
+    return homepage && (!repository || simplifyUrl(repository) !== simplifyUrl(homepage));
+  }
+
+  get playgroundLink() {
+    let playgroundCrates = this.playground.crates;
+    if (!playgroundCrates) return;
+
+    let playgroundCrate = playgroundCrates.find(it => it.name === this.args.crate.name);
+    if (!playgroundCrate) return;
+
+    return `https://play.rust-lang.org/?edition=2021&code=use%20${playgroundCrate.id}%3B%0A%0Afn%20main()%20%7B%0A%20%20%20%20%2F%2F%20try%20using%20the%20%60${playgroundCrate.id}%60%20crate%20here%0A%7D`;
+  }
+
+  get canHover() {
+    return window?.matchMedia('(hover: hover)').matches;
+  }
+
+  constructor() {
+    super(...arguments);
+
+    // load Rust Playground crates list, if necessary
+    this.playground.loadCrates().catch(error => {
+      if (!(didCancel(error) || error.isServerError || error.isNetworkError)) {
+        // report unexpected errors to Sentry
+        this.sentry.captureException(error);
+      }
+    });
+  }
+
+  @action
+  async copyToClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.notifications.success('Copied to clipboard!');
+    } catch {
+      this.notifications.error('Copy to clipboard failed!');
+    }
+  }
+
   <template>
     <section aria-label='Crate metadata' ...attributes class='sidebar'>
       <div class='metadata'>
@@ -173,48 +218,4 @@ export default class CrateSidebar extends Component {
       </div>
     </section>
   </template>
-  @service notifications;
-  @service playground;
-  @service sentry;
-
-  get showHomepage() {
-    let { repository, homepage } = this.args.crate;
-    return homepage && (!repository || simplifyUrl(repository) !== simplifyUrl(homepage));
-  }
-
-  get playgroundLink() {
-    let playgroundCrates = this.playground.crates;
-    if (!playgroundCrates) return;
-
-    let playgroundCrate = playgroundCrates.find(it => it.name === this.args.crate.name);
-    if (!playgroundCrate) return;
-
-    return `https://play.rust-lang.org/?edition=2021&code=use%20${playgroundCrate.id}%3B%0A%0Afn%20main()%20%7B%0A%20%20%20%20%2F%2F%20try%20using%20the%20%60${playgroundCrate.id}%60%20crate%20here%0A%7D`;
-  }
-
-  get canHover() {
-    return window?.matchMedia('(hover: hover)').matches;
-  }
-
-  constructor() {
-    super(...arguments);
-
-    // load Rust Playground crates list, if necessary
-    this.playground.loadCrates().catch(error => {
-      if (!(didCancel(error) || error.isServerError || error.isNetworkError)) {
-        // report unexpected errors to Sentry
-        this.sentry.captureException(error);
-      }
-    });
-  }
-
-  @action
-  async copyToClipboard(text) {
-    try {
-      await navigator.clipboard.writeText(text);
-      this.notifications.success('Copied to clipboard!');
-    } catch {
-      this.notifications.error('Copy to clipboard failed!');
-    }
-  }
 }

app/components/crate-sidebar/install-instructions.gjs

@@ -11,6 +11,24 @@ import isClipboardSupported from 'crates-io/helpers/is-clipboard-supported';
 import sum from 'crates-io/helpers/sum';
 
 export default class InstallInstructions extends Component {
+  get cargoInstallCommand() {
+    return this.args.exactVersion
+      ? `cargo install ${this.args.crate}@${this.args.version}`
+      : `cargo install ${this.args.crate}`;
+  }
+
+  get cargoAddCommand() {
+    return this.args.exactVersion
+      ? `cargo add ${this.args.crate}@=${this.args.version}`
+      : `cargo add ${this.args.crate}`;
+  }
+
+  get tomlSnippet() {
+    let version = this.args.version.split('+')[0];
+    let exact = this.args.exactVersion ? '=' : '';
+    return `${this.args.crate} = "${exact}${version}"`;
+  }
+
   <template>
     {{#if @binNames}}
       {{#if (isClipboardSupported)}}
@@ -85,21 +103,4 @@ export default class InstallInstructions extends Component {
       {{/if}}
     {{/if}}
   </template>
-  get cargoInstallCommand() {
-    return this.args.exactVersion
-      ? `cargo install ${this.args.crate}@${this.args.version}`
-      : `cargo install ${this.args.crate}`;
-  }
-
-  get cargoAddCommand() {
-    return this.args.exactVersion
-      ? `cargo add ${this.args.crate}@=${this.args.version}`
-      : `cargo add ${this.args.crate}`;
-  }
-
-  get tomlSnippet() {
-    let version = this.args.version.split('+')[0];
-    let exact = this.args.exactVersion ? '=' : '';
-    return `${this.args.crate} = "${exact}${version}"`;
-  }
 }

app/components/crate-sidebar/link.gjs

@@ -4,6 +4,19 @@ import scopedClass from 'ember-scoped-css/helpers/scoped-class';
 import svgJar from 'ember-svg-jar/helpers/svg-jar';
 
 export default class CrateSidebarLink extends Component {
+  get text() {
+    let { url } = this.args;
+    return simplifyUrl(url);
+  }
+
+  get isDocsRs() {
+    return this.text.startsWith('docs.rs/');
+  }
+
+  get isGitHub() {
+    return this.text.startsWith('github.com/');
+  }
+
   <template>
     <div ...attributes>
       <h2 class='title' data-test-title>{{@title}}</h2>
@@ -22,18 +35,6 @@ export default class CrateSidebarLink extends Component {
       </div>
     </div>
   </template>
-  get text() {
-    let { url } = this.args;
-    return simplifyUrl(url);
-  }
-
-  get isDocsRs() {
-    return this.text.startsWith('docs.rs/');
-  }
-
-  get isGitHub() {
-    return this.text.startsWith('github.com/');
-  }
 }
 
 export function simplifyUrl(url) {

app/components/dependency-list/row.gjs

@@ -15,6 +15,44 @@ import Tooltip from 'crates-io/components/tooltip';
 import formatReq from 'crates-io/helpers/format-req';
 
 export default class VersionRow extends Component {
+  @service store;
+
+  @tracked focused = false;
+
+  @action setFocused(value) {
+    this.focused = value;
+  }
+
+  constructor() {
+    super(...arguments);
+
+    this.loadCrateTask.perform().catch(() => {
+      // ignore all errors and just don't display a description if the request fails
+    });
+  }
+
+  get description() {
+    return this.loadCrateTask.lastSuccessful?.value?.description;
+  }
+
+  get featuresDescription() {
+    let { default_features: defaultFeatures, features } = this.args.dependency;
+    let numFeatures = features.length;
+
+    if (numFeatures !== 0) {
+      return defaultFeatures
+        ? `${numFeatures} extra feature${numFeatures > 1 ? 's' : ''}`
+        : `only ${numFeatures} feature${numFeatures > 1 ? 's' : ''}`;
+    } else if (!defaultFeatures) {
+      return 'no default features';
+    }
+  }
+
+  loadCrateTask = task(async () => {
+    let { dependency } = this.args;
+    return await this.store.findRecord('crate', dependency.crate_id);
+  });
+
   <template>
     <div
       data-test-dependency={{@dependency.crate_id}}
@@ -82,41 +120,4 @@ export default class VersionRow extends Component {
       </div>
     </div>
   </template>
-  @service store;
-
-  @tracked focused = false;
-
-  @action setFocused(value) {
-    this.focused = value;
-  }
-
-  constructor() {
-    super(...arguments);
-
-    this.loadCrateTask.perform().catch(() => {
-      // ignore all errors and just don't display a description if the request fails
-    });
-  }
-
-  get description() {
-    return this.loadCrateTask.lastSuccessful?.value?.description;
-  }
-
-  get featuresDescription() {
-    let { default_features: defaultFeatures, features } = this.args.dependency;
-    let numFeatures = features.length;
-
-    if (numFeatures !== 0) {
-      return defaultFeatures
-        ? `${numFeatures} extra feature${numFeatures > 1 ? 's' : ''}`
-        : `only ${numFeatures} feature${numFeatures > 1 ? 's' : ''}`;
-    } else if (!defaultFeatures) {
-      return 'no default features';
-    }
-  }
-
-  loadCrateTask = task(async () => {
-    let { dependency } = this.args;
-    return await this.store.findRecord('crate', dependency.crate_id);
-  });
 }