GJS

.git-blame-ignore-revs

@@ -0,0 +1 @@
+4538a1a4fc2ee7f96cc5e06764b14d0bd5432559

app/components/cli-update-commands.gjs

@@ -0,0 +1,23 @@
+<template>
+  <code data-test-command="Ember CLI Update">
+    ember-cli-update --to
+    {{@toVersion}}
+  </code>
+  <h2>To run codemods:</h2>
+  <p>
+    (This should be run after running the normal update shown above, and after
+    you've resolved any conflicts.)
+  </p>
+  <code data-test-command="Run Codemods">
+    ember-cli-update --run-codemods
+  </code>
+
+  <p>
+    For more details, refer this documentation from
+    <a
+      href="https://github.com/ember-cli/ember-cli-update#examples"
+      rel="noopener noreferrer"
+      target="_blank"
+    >ember-cli-update</a>.
+  </p>
+</template>

app/components/ember-versions-form.gjs

@@ -0,0 +1,129 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { VERSIONS } from 'upgrade-guide/utils/ember-versions';
+import { compare } from 'compare-versions';
+import { on } from '@ember/modifier';
+import { concat } from '@ember/helper';
+import eq from 'ember-truth-helpers/helpers/equal';
+import EsButton from 'ember-styleguide/components/es-button';
+import '../styles/ember-versions-form.css';
+
+// Group the versions by major so we can display option groups.
+const GROUPED_VERSIONS = VERSIONS.reduce((acc, version) => {
+  const major = version.split('.')[0];
+  let group = acc.find((g) => g.major === major);
+  if (!group) {
+    group = { major, versions: [] };
+    acc.push(group);
+  }
+  group.versions.push(version);
+  return acc;
+}, []);
+
+export default class EmberVersionsFormComponent extends Component {
+  versions = VERSIONS;
+  groupedVersions = GROUPED_VERSIONS;
+  @tracked fromVersion = '3.15';
+  @tracked toVersion = VERSIONS[VERSIONS.length - 1];
+
+  @action submitForm(event) {
+    event.preventDefault();
+
+    const { onSubmit } = this.args;
+
+    if (onSubmit) {
+      onSubmit({
+        fromVersion: this.fromVersion,
+        toVersion: this.toVersion,
+      });
+    }
+  }
+
+  get areVersionsValid() {
+    const { fromVersion, toVersion } = this;
+
+    if (!fromVersion || !toVersion) {
+      return true;
+    }
+
+    return compare(fromVersion, toVersion, '<');
+  }
+
+  @action updateFromVersion(event) {
+    this.fromVersion = event.target.value;
+  }
+
+  @action updateToVersion(event) {
+    this.toVersion = event.target.value;
+  }
+  <template>
+    <form
+      class="ember-versions-form"
+      data-test-form="Ember Versions"
+      {{on "submit" this.submitForm}}
+    >
+      <div class="mb-3">
+        <label for="from-version">From version</label>
+
+        <select
+          data-test-select="From Version"
+          id="from-version"
+          {{on "input" this.updateFromVersion}}
+        >
+          {{#each this.groupedVersions as |versionGroup|}}
+            <optgroup label={{concat "v" versionGroup.major ".x"}}>
+              <legend>{{versionGroup.major}}.x Versions</legend>
+              {{#each versionGroup.versions as |version|}}
+                <option
+                  selected={{eq version this.fromVersion}}
+                  value={{version}}
+                >
+                  {{version}}
+                </option>
+              {{/each}}
+            </optgroup>
+          {{/each}}
+        </select>
+      </div>
+
+      <div>
+        <label for="to-version">To version</label>
+
+        <select
+          data-test-select="To Version"
+          id="to-version"
+          {{on "input" this.updateToVersion}}
+        >
+          {{#each this.groupedVersions as |versionGroup|}}
+            <optgroup label={{concat "v" versionGroup.major ".x"}}>
+              <legend>{{versionGroup.major}}.x Versions</legend>
+              {{#each versionGroup.versions as |version|}}
+                <option
+                  selected={{eq version this.toVersion}}
+                  value={{version}}
+                >
+                  {{version}}
+                </option>
+              {{/each}}
+            </optgroup>
+          {{/each}}
+        </select>
+      </div>
+
+      <EsButton
+        @type="submit"
+        data-test-button="Find Changes"
+        disabled={{unless this.areVersionsValid true}}
+        @label="Find Changes"
+        class="mt-2"
+      />
+
+      <div role="alert">
+        {{#unless this.areVersionsValid}}
+          <p class="mt-2">To version should be higher than From version</p>
+        {{/unless}}
+      </div>
+    </form>
+  </template>
+}

app/components/list-features-deprecations.gjs

@@ -0,0 +1,94 @@
+import Component from '@glimmer/component';
+import { createCache, getValue } from '@glimmer/tracking/primitives/cache';
+import { compare } from 'compare-versions';
+
+export default class ListFeaturesDeprecationsComponent extends Component {
+  #relevantChangeLogs = createCache(() => {
+    const allChangeLogs = this.args.allChangeLogs ?? [];
+
+    return allChangeLogs.filter((changeLog) => {
+      return (
+        compare(this.args.toVersion, changeLog.version, '>=') &&
+        compare(this.args.fromVersion, changeLog.version, '<')
+      );
+    });
+  });
+
+  get relevantChangeLogs() {
+    return getValue(this.#relevantChangeLogs);
+  }
+
+  #flattenedChangeLogs = createCache(() => {
+    return this.relevantChangeLogs.flatMap((changeLog) => {
+      const changes = changeLog.changes ?? [];
+
+      return changes.map((change) => {
+        return {
+          version: changeLog.version,
+          ...change,
+        };
+      });
+    });
+  });
+
+  get flattenedChangeLogs() {
+    return getValue(this.#flattenedChangeLogs);
+  }
+
+  get deprecations() {
+    return this.flattenedChangeLogs.filter(({ deprecation }) => deprecation);
+  }
+
+  get features() {
+    return this.flattenedChangeLogs.filter(({ feature }) => feature);
+  }
+  <template>
+    <h3>New features</h3>
+    <h4 class="mb-1">Count: {{this.features.length}}</h4>
+
+    {{#if this.features}}
+      <ul>
+        {{#each this.features as |feature|}}
+          <li data-test-feature>
+            <span data-test-field="Title">{{feature.title}}</span>
+            <a
+              data-test-field="Version"
+              href={{feature.link}}
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Check version {{feature.version}} link for more info"
+            >
+              ({{feature.version}})
+            </a>
+          </li>
+        {{/each}}
+      </ul>
+    {{else}}
+      <p>No new features</p>
+    {{/if}}
+
+    <h3>Deprecations</h3>
+    <h4 class="mb-1">Count: {{this.deprecations.length}}</h4>
+
+    {{#if this.deprecations}}
+      <ul>
+        {{#each this.deprecations as |deprecation|}}
+          <li data-test-deprecation>
+            <span data-test-field="Title">{{deprecation.title}}</span>
+            <a
+              data-test-field="Version"
+              href={{deprecation.link}}
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Check version {{deprecation.version}} link for more info"
+            >
+              ({{deprecation.version}})
+            </a>
+          </li>
+        {{/each}}
+      </ul>
+    {{else}}
+      <p>No new deprecations</p>
+    {{/if}}
+  </template>
+}