Template tag codemod

.git-blame-ignore-revs

@@ -0,0 +1 @@
+5a494a97687a5b1e663d6a2eb82d80f1b6d0e62b

app/components/api-index-filter.js → app/components/api-index-filter.gjs

@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-computed-properties-in-native-classes */
+/* eslint-disable ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/require-tagless-components */
 import { classNames } from '@ember-decorators/component';
 import { computed } from '@ember/object';
 import Component from '@ember/component';
@@ -22,7 +22,8 @@ const filterDataComputedParams =
  * @extends Component<{ Args: Args, Blocks: Blocks }>
  */
 @classNames('api-index-filter')
-export default class ApiIndexFilter extends Component {
+export default class ApiIndexFilter extends Component {<template>{{yield this.filteredData}}
+</template>
   @computed('model.methods.[]', filterDataComputedParams)
   get filteredMethods() {
     return this.filterItems('methods');

app/components/api-index.js → app/components/api-index.gjs

@@ -20,7 +20,10 @@ import Component from '@glimmer/component';
 /**
  * @extends Component<{ Args: Args, Blocks: Blocks }>
  */
-export default class ApiIndex extends Component {
+import { hash } from "@ember/helper";
+export default class ApiIndex extends Component {<template><div>
+{{yield (hash sections=this.sections)}}
+</div></template>
   get sections() {
     return [
       {

app/components/class-field-description.gjs

@@ -0,0 +1,117 @@
+/* eslint-disable prettier/prettier */
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from "@ember/modifier";
+import { fn, array, concat } from "@ember/helper";
+import svgJar from "ember-svg-jar/helpers/svg-jar";
+import join from "ember-composable-helpers/helpers/join";
+import mapBy from "ember-composable-helpers/helpers/map-by";
+import { LinkTo } from "@ember/routing";
+import githubLink from "ember-api-docs/helpers/github-link";
+import and from "ember-truth-helpers/helpers/and";
+import eq from "ember-api-docs/helpers/eq";
+import ImportExample from "ember-api-docs/components/import-example";
+import MarkdownToHtml from "ember-cli-showdown/components/markdown-to-html";
+
+export default class ClassFieldDescription extends Component {<template><section class="{{@type}}">
+  {{!-- TODO: Fix this link for a11y --}}
+  <h3 class="class-field-description--link" data-anchor="{{@field.name}}" role="link" {{on "click" (fn this.updateAnchor @field.name)}}>
+    <a class="anchor" {{!-- template-lint-disable link-href-attributes --}}>
+      {{svgJar "fa-link" class="class-field-description--link-hover" width="20px" height="20px"}}
+    </a>
+    <span class="{{@type}}-name">{{@field.name}}</span>
+    {{#if @field.params}}
+      <span class="args">
+        ({{join ", " (mapBy "name" @field.params)}})
+      </span>
+    {{/if}}
+    {{#if @field.return}}
+      <span class="return-type">{{@field.return.type}}</span>
+    {{/if}}
+    {{#if @field.access}}
+      <span class="access">{{@field.access}}</span>
+    {{/if}}
+    {{#if @field.deprecated}}
+      <span class="access">deprecated</span>
+    {{/if}}
+  </h3>
+  {{#if @model.module}}
+    <div class="attributes">
+      <div class="attribute">
+        <span class="attribute-label">Module:</span>
+        <span class="attribute-value"><LinkTo @route="project-version.modules.module" @models={{array @model.projectVersion.compactVersion @model.module}}>{{@model.module}}</LinkTo></span>
+      </div>
+    </div>
+  {{/if}}
+  <p class="github-link" data-test-file={{@field.file}}>
+    {{#if @field.inherited}}
+      Inherited from
+      <a href="{{githubLink @model.project.id @model.projectVersion.version @field.file @field.line}}" target="_blank" rel="noopener noreferrer">
+        {{@field.inheritedFrom}} {{@field.file}}:{{@field.line}}
+      </a>
+    {{else}}
+      Defined in
+      <a href="{{githubLink @model.project.id @model.projectVersion.version @field.file @field.line}}" target="_blank" rel="noopener noreferrer">
+        {{@field.file}}:{{@field.line}}
+      </a>
+    {{/if}}
+  </p>
+  {{#if @field.since}}
+    <p class="field-since">
+      Available since v{{@field.since}}
+    </p>
+  {{/if}}
+  {{#if (and (eq @field.static 1) (eq @field.itemtype "method") this.hasImportExample)}}
+    <ImportExample @item={{concat "{ " @field.name " }"}} @package={{@field.class}} />
+  {{/if}}
+  <dl class="parameters">
+    {{#each @field.params as |param|}}
+      <div class="parameter">
+        <dt>{{param.name}}</dt>
+        <dd class="parameter-type">{{param.type}}</dd>
+        <dd><MarkdownToHtml @markdown={{param.description}} /></dd>
+        {{#if param.props}}
+          <dl class="parameters">
+            {{#each param.props as |prop|}}
+              <div class="prop">
+                <dt>{{prop.name}}</dt>
+                <dd class="parameter-type">{{prop.type}}</dd>
+                <dd><MarkdownToHtml @markdown={{prop.description}} /></dd>
+              </div>
+            {{/each}}
+          </dl>
+        {{/if}}
+      </div>
+    {{/each}}
+    {{#if @field.return}}
+      <div class="return">
+        <dt>returns</dt>
+        <dd class="return-type">{{@field.return.type}}</dd>
+        <dd><MarkdownToHtml @markdown={{@field.return.description}} /></dd>
+      </div>
+    {{/if}}
+  </dl>
+  <MarkdownToHtml @markdown={{@field.description}} />
+</section></template>
+  @service
+  legacyModuleMappings;
+
+  get hasImportExample() {
+    return this.legacyModuleMappings.hasFunctionMapping(
+      this.args.field.name,
+      this.args.field.class
+    );
+  }
+
+  /**
+   * Callback for updating the anchor with the field name that was clicked by a user.
+   *
+   * @method updateAnchor
+   * @method fieldName String The name representing the field that was clicked.
+   */
+  @action
+  updateAnchor(fieldName) {
+    this.args.updateAnchor?.(fieldName);
+  }
+}

app/components/ember-data-landing-page.hbs → app/components/ember-data-landing-page.gjs

@@ -1,4 +1,5 @@
-<article class="chapter">
+import { LinkTo } from "@ember/routing";
+<template><article class="chapter">
   <h1>
     Ember Data API Documentation
   </h1>
@@ -53,4 +54,4 @@
       </h5>
     </li>
   </ul>
-</article>
+</article></template>

app/components/ember-landing-page.gjs

@@ -0,0 +1,43 @@
+import { LinkTo } from "@ember/routing";
+import { array, hash } from "@ember/helper";
+<template><article class="chapter">
+  <h1>Ember API Documentation</h1>
+  <p>
+    To get started, choose a project (Ember or Ember Data) and a version
+    from the dropdown menu. Ember has core methods used in any app, while Ember Data has
+    documentation of the built-in library for making requests to a back end.
+    If you're looking for documentation of the command line tool used to generate files, build your
+    app, and more, visit <a href="https://cli.emberjs.com/">ember-cli</a>. The latest
+    testing API is available at
+    <a href="https://github.com/emberjs/ember-test-helpers/blob/master/API.md">ember-test-helpers</a>.
+  </p>
+  <h2>Commonly searched-for documentation</h2>
+  <ul class="spec-method-list">
+    {{!-- template-lint-disable no-potential-path-strings --}}
+    <li>Components - <LinkTo @route="project-version.classes.class" @model="Component">Classic</LinkTo> or <LinkTo @route="project-version.modules.module" @model="@glimmer/component">Glimmer</LinkTo>; a view that is completely isolated</li>
+    <li><LinkTo @route="project-version.functions.function" @models={{array "@glimmer/tracking" "tracked"}}>Tracked</LinkTo> - make your templates responsive to property updates</li>
+    <li><LinkTo @route="project-version.classes.class" @model="ComputedProperty">Computed Properties</LinkTo> - declare functions as properties</li>
+    {{!-- template-lint-disable no-potential-path-strings --}}
+    <li><LinkTo @route="project-version.classes.class" @model="@ember/object/computed">Computed Macros</LinkTo> - shorter ways of expressing certain types of computed properties</li>
+    <li><LinkTo @route="project-version.classes.class" @model="EmberArray">EmberArray</LinkTo> - contains methods like <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberArray" "forEach"}} @query={{hash anchor="forEach"}}>forEach</LinkTo> and <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberArray" "mapBy"}} @query={{hash anchor="mapBy"}}>mapBy</LinkTo> that help you iterate over Ember Objects</li>
+    <li><LinkTo @route="project-version.classes.class" @model="EmberObject">EmberObject</LinkTo> - the main base class for all Ember objects, including the <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberObject" "get"}} @query={{hash anchor="get"}}>get</LinkTo> and <LinkTo @route="project-version.classes.class.methods.method" @models={{array "EmberObject" "set"}} @query={{hash anchor="set"}}>set</LinkTo> methods</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Ember.Templates.helpers">Ember.Templates.helpers</LinkTo> - built-in functions that can be used in templates, such as the <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Ember.Templates.helpers" "each"}} @query={{hash anchor="each"}}>each</LinkTo>, <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Ember.Templates.helpers" "on"}} @query={{hash anchor="on"}}>on</LinkTo> and <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Ember.Templates.helpers" "fn"}} @query={{hash anchor="fn"}}>fn</LinkTo> helpers</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Helper">Helpers</LinkTo> - a way to define custom display functions that are used in templates</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Route">Route</LinkTo> - used to define individual routes, including the <LinkTo @route="project-version.classes.class.methods.method" @models={{array "Route" "model"}} @query={{hash anchor="model"}}>model</LinkTo> hook for loading data</li>
+    <li><LinkTo @route="project-version.classes.class" @model="Service">Service</LinkTo> - an Ember object that lives for the duration of the application, and can be made available in different parts of your application</li>
+  </ul>
+  <h2>Useful links</h2>
+  <ul>
+    <li>
+      <h5>
+        <a href="https://github.com/ember-learn/ember-api-docs">API Documentation Github Repository</a>
+      </h5>
+    </li>
+    <li>
+      <h5>
+        <a href="https://guides.emberjs.com/release/getting-started/core-concepts/">Ember Core Concepts</a>
+      </h5>
+    </li>
+  </ul>
+</article>
+</template>

app/components/import-example.gjs

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import MarkdownToHtml from "ember-cli-showdown/components/markdown-to-html";
+
+export default class ImportExample extends Component {<template><MarkdownToHtml @markdown={{this.markdown}} /></template>
+  get markdown() {
+    let md = `\`\`\`js
+import ${this.args.item} from '${this.args.package}';
+\`\`\``;
+    return md;
+  }
+}