ember-source 7.2.0-alpha.3 → 7.2.0-beta.1

package/dist/dev/packages/@ember/reactive/collections.js

@@ -1,4 +1,4 @@
-import { k as consumeTag, n as createUpdatableTag, D as DIRTY_TAG } from '../../shared-chunks/cache-B7dqAS38.js';
+import { c as consumeTag, b as createUpdatableTag, D as DIRTY_TAG } from '../../shared-chunks/cache-DGDPVCpC.js';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // Unfortunately, TypeScript's ability to do inference *or* type-checking in a
@@ -147,102 +147,6 @@ function trackedArray(data, options) {
   });
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Using a Proxy-based approach so that any new methods added to the Map
-// interface (like getOrInsert, getOrInsertComputed, etc.) are automatically
-// supported without needing to manually re-implement each one.
-
-function trackedMap(data, options) {
-  const equals = options?.equals ?? Object.is;
-  // TypeScript doesn't correctly resolve the overloads for calling the `Map`
-  // constructor for the no-value constructor. This resolves that.
-  const target = data instanceof Map ? new Map(data.entries()) : new Map(data ?? []);
-  const collection = createUpdatableTag();
-  const storages = new Map();
-  function storageFor(key) {
-    let storage = storages.get(key);
-    if (storage === undefined) {
-      storage = createUpdatableTag();
-      storages.set(key, storage);
-    }
-    return storage;
-  }
-  function dirtyStorageFor(key) {
-    const storage = storages.get(key);
-    if (storage) {
-      DIRTY_TAG(storage);
-    }
-  }
-  const proxy = new Proxy(target, {
-    get(target, prop, receiver) {
-      if (prop === 'set') {
-        return function (key, value) {
-          const hasExisting = target.has(key);
-          if (hasExisting) {
-            // TS doesn't know about the relationship between has and get
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const isUnchanged = equals(target.get(key), value);
-            if (isUnchanged) return proxy;
-          }
-          dirtyStorageFor(key);
-          DIRTY_TAG(collection);
-          target.set(key, value);
-          return proxy;
-        };
-      }
-      if (prop === 'delete') {
-        return function (key) {
-          if (!target.has(key)) return false;
-          dirtyStorageFor(key);
-          DIRTY_TAG(collection);
-          storages.delete(key);
-          return target.delete(key);
-        };
-      }
-      if (prop === 'clear') {
-        return function () {
-          if (target.size === 0) return;
-          storages.forEach(s => DIRTY_TAG(s));
-          storages.clear();
-          DIRTY_TAG(collection);
-          target.clear();
-        };
-      }
-      if (prop === 'get') {
-        return function (key) {
-          consumeTag(storageFor(key));
-          return target.get(key);
-        };
-      }
-      if (prop === 'has') {
-        return function (key) {
-          consumeTag(storageFor(key));
-          return target.has(key);
-        };
-      }
-      if (prop === 'size') {
-        consumeTag(collection);
-        return target.size;
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      const value = Reflect.get(target, prop, receiver);
-      if (typeof value === 'function') {
-        return function (...args) {
-          consumeTag(collection);
-
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-          return value.apply(target, args);
-        };
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      return value;
-    }
-  });
-  return proxy;
-}
-
 class TrackedObject {
   #options;
   #storages = new Map();
@@ -422,19 +326,108 @@ function trackedSet(data, options) {
   return proxy;
 }
 
-// Using a Proxy-based approach so that any new methods added to the WeakMap
+// Using a Proxy-based approach so that any new methods added to the WeakSet
+// interface are automatically supported without needing to manually
+// re-implement each one.
+
+/**
+ * NOTE: we cannot pass a WeakSet because WeakSets are not iterable
+ */
+/**
+ * Creates an instanceof WeakSet from an optional list of entries
+ *
+ */
+function trackedWeakSet(data, options) {
+  const equals = options?.equals ?? Object.is;
+  const target = new WeakSet(data ?? []);
+  const storages = new WeakMap();
+  function storageFor(key) {
+    let storage = storages.get(key);
+    if (storage === undefined) {
+      storage = createUpdatableTag();
+      storages.set(key, storage);
+    }
+    return storage;
+  }
+  function dirtyStorageFor(key) {
+    const storage = storages.get(key);
+    if (storage) {
+      DIRTY_TAG(storage);
+    }
+  }
+  const proxy = new Proxy(target, {
+    get(target, prop, receiver) {
+      if (prop === 'add') {
+        return function (value) {
+          /**
+           * In a WeakSet, there is no `.get()`, but if there was,
+           * we could assume it's the same value as what we passed.
+           *
+           * So for a WeakSet, if we try to add something that already exists
+           * we no-op.
+           *
+           * WeakSet already does this internally for us,
+           * but we want the ability for the reactive behavior to reflect the same behavior.
+           *
+           * i.e.: doing weakSet.add(value) should never dirty with the defaults
+           *       if the `value` is already in the weakSet
+           */
+          if (target.has(value)) {
+            /**
+             * This looks a little silly, where a always will === b,
+             * but see the note above.
+             */
+            const isUnchanged = equals(value, value);
+            if (isUnchanged) return proxy;
+          }
+
+          // Add to vals first to get better error message
+          target.add(value);
+          dirtyStorageFor(value);
+          return proxy;
+        };
+      }
+      if (prop === 'delete') {
+        return function (value) {
+          if (!target.has(value)) return false;
+          dirtyStorageFor(value);
+          storages.delete(value);
+          return target.delete(value);
+        };
+      }
+      if (prop === 'has') {
+        return function (value) {
+          consumeTag(storageFor(value));
+          return target.has(value);
+        };
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const value = Reflect.get(target, prop, receiver);
+      if (typeof value === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+        return value.bind(target);
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return value;
+    }
+  });
+  return proxy;
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Using a Proxy-based approach so that any new methods added to the Map
 // interface (like getOrInsert, getOrInsertComputed, etc.) are automatically
 // supported without needing to manually re-implement each one.
 
-function trackedWeakMap(data, options) {
+function trackedMap(data, options) {
   const equals = options?.equals ?? Object.is;
-  const existing = data ?? [];
-  /**
-   * SAFETY: note that when passing in an existing weak map, we can't
-   *         clone it as it is not iterable and not a supported type of structuredClone
-   */
-  const target = existing instanceof WeakMap ? existing : new WeakMap(existing);
-  const storages = new WeakMap();
+  // TypeScript doesn't correctly resolve the overloads for calling the `Map`
+  // constructor for the no-value constructor. This resolves that.
+  const target = data instanceof Map ? new Map(data.entries()) : new Map(data ?? []);
+  const collection = createUpdatableTag();
+  const storages = new Map();
   function storageFor(key) {
     let storage = storages.get(key);
     if (storage === undefined) {
@@ -455,10 +448,13 @@ function trackedWeakMap(data, options) {
         return function (key, value) {
           const hasExisting = target.has(key);
           if (hasExisting) {
+            // TS doesn't know about the relationship between has and get
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const isUnchanged = equals(target.get(key), value);
             if (isUnchanged) return proxy;
           }
           dirtyStorageFor(key);
+          DIRTY_TAG(collection);
           target.set(key, value);
           return proxy;
         };
@@ -467,10 +463,20 @@ function trackedWeakMap(data, options) {
         return function (key) {
           if (!target.has(key)) return false;
           dirtyStorageFor(key);
+          DIRTY_TAG(collection);
           storages.delete(key);
           return target.delete(key);
         };
       }
+      if (prop === 'clear') {
+        return function () {
+          if (target.size === 0) return;
+          storages.forEach(s => DIRTY_TAG(s));
+          storages.clear();
+          DIRTY_TAG(collection);
+          target.clear();
+        };
+      }
       if (prop === 'get') {
         return function (key) {
           consumeTag(storageFor(key));
@@ -483,12 +489,20 @@ function trackedWeakMap(data, options) {
           return target.has(key);
         };
       }
+      if (prop === 'size') {
+        consumeTag(collection);
+        return target.size;
+      }
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       const value = Reflect.get(target, prop, receiver);
       if (typeof value === 'function') {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-        return value.bind(target);
+        return function (...args) {
+          consumeTag(collection);
+
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+          return value.apply(target, args);
+        };
       }
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -498,20 +512,18 @@ function trackedWeakMap(data, options) {
   return proxy;
 }
 
-// Using a Proxy-based approach so that any new methods added to the WeakSet
-// interface are automatically supported without needing to manually
-// re-implement each one.
+// Using a Proxy-based approach so that any new methods added to the WeakMap
+// interface (like getOrInsert, getOrInsertComputed, etc.) are automatically
+// supported without needing to manually re-implement each one.
 
-/**
- * NOTE: we cannot pass a WeakSet because WeakSets are not iterable
- */
-/**
- * Creates an instanceof WeakSet from an optional list of entries
- *
- */
-function trackedWeakSet(data, options) {
+function trackedWeakMap(data, options) {
   const equals = options?.equals ?? Object.is;
-  const target = new WeakSet(data ?? []);
+  const existing = data ?? [];
+  /**
+   * SAFETY: note that when passing in an existing weak map, we can't
+   *         clone it as it is not iterable and not a supported type of structuredClone
+   */
+  const target = existing instanceof WeakMap ? existing : new WeakMap(existing);
   const storages = new WeakMap();
   function storageFor(key) {
     let storage = storages.get(key);
@@ -529,48 +541,36 @@ function trackedWeakSet(data, options) {
   }
   const proxy = new Proxy(target, {
     get(target, prop, receiver) {
-      if (prop === 'add') {
-        return function (value) {
-          /**
-           * In a WeakSet, there is no `.get()`, but if there was,
-           * we could assume it's the same value as what we passed.
-           *
-           * So for a WeakSet, if we try to add something that already exists
-           * we no-op.
-           *
-           * WeakSet already does this internally for us,
-           * but we want the ability for the reactive behavior to reflect the same behavior.
-           *
-           * i.e.: doing weakSet.add(value) should never dirty with the defaults
-           *       if the `value` is already in the weakSet
-           */
-          if (target.has(value)) {
-            /**
-             * This looks a little silly, where a always will === b,
-             * but see the note above.
-             */
-            const isUnchanged = equals(value, value);
+      if (prop === 'set') {
+        return function (key, value) {
+          const hasExisting = target.has(key);
+          if (hasExisting) {
+            const isUnchanged = equals(target.get(key), value);
             if (isUnchanged) return proxy;
           }
-
-          // Add to vals first to get better error message
-          target.add(value);
-          dirtyStorageFor(value);
+          dirtyStorageFor(key);
+          target.set(key, value);
           return proxy;
         };
       }
       if (prop === 'delete') {
-        return function (value) {
-          if (!target.has(value)) return false;
-          dirtyStorageFor(value);
-          storages.delete(value);
-          return target.delete(value);
+        return function (key) {
+          if (!target.has(key)) return false;
+          dirtyStorageFor(key);
+          storages.delete(key);
+          return target.delete(key);
+        };
+      }
+      if (prop === 'get') {
+        return function (key) {
+          consumeTag(storageFor(key));
+          return target.get(key);
         };
       }
       if (prop === 'has') {
-        return function (value) {
-          consumeTag(storageFor(value));
-          return target.has(value);
+        return function (key) {
+          consumeTag(storageFor(key));
+          return target.has(key);
         };
       }
 

package/dist/dev/packages/@ember/renderer/index.js

@@ -1 +1 @@
-export { a as renderComponent, r as renderSettled } from '../../shared-chunks/index-CwnQYqK5.js';
+export { r as renderComponent, a as renderSettled } from '../../shared-chunks/index-B3pPx1fL.js';

package/dist/dev/packages/@ember/routing/-internals.js

@@ -5,9 +5,9 @@ export { default as generateController, generateControllerFactory } from './lib/
 export { default as BucketCache } from './lib/cache.js';
 export { default as DSL } from './lib/dsl.js';
 export { default as controllerFor } from './lib/controller_for.js';
-import '../../shared-chunks/property_get-CIBS9umw.js';
+import '../../shared-chunks/property_get-CRP7MFz_.js';
 import '../debug/index.js';
 import '../engine/instance.js';
 import '../../route-recognizer/index.js';
-import '../../shared-chunks/rsvp-CnCSY930.js';
-import '../../shared-chunks/unrecognized-url-error-B3wUTorp.js';
+import '../../shared-chunks/rsvp.es-DR7yS7qg.js';
+import '../../shared-chunks/unrecognized-url-error-BJHjL30Q.js';

package/dist/dev/packages/@ember/routing/index.js

@@ -5,11 +5,11 @@ import { getEngineParent } from '../engine/lib/engine-parent.js';
 import { flaggedInstrument } from '../instrumentation/index.js';
 import { action } from '../object/index.js';
 import { service } from '../service/index.js';
-import { k as consumeTag, l as createCache, r as getValue, x as untrack } from '../../shared-chunks/cache-B7dqAS38.js';
-import { t as tagFor } from '../../shared-chunks/meta-BmRXesrk.js';
+import { c as consumeTag, g as createCache, h as getValue, u as untrack } from '../../shared-chunks/cache-DGDPVCpC.js';
+import { t as tagFor } from '../../shared-chunks/meta-BqC7f9Ia.js';
 import { on } from '../modifier/on.js';
-import { t as templateFactory } from '../../shared-chunks/index-CyZiGiEI.js';
-import { I as InternalComponent, o as opaquify } from '../../shared-chunks/internal-CAL-jHZt.js';
+import { t as templateFactory } from '../../shared-chunks/index-DaFzpTIE.js';
+import { I as InternalComponent, o as opaquify } from '../../shared-chunks/internal-DTOXyEGM.js';
 import { d as decorateFieldV2, i as initializeDeferredDecorator, a as decorateMethodV2 } from '../../shared-chunks/runtime-CYyqkz5q-BOdRhmsS.js';
 import { assert } from '../debug/lib/assert.js';
 
@@ -63,10 +63,14 @@ function isQueryParams(value) {
   supplied model to the route as its `model` context of the route. The block for `LinkTo`
   becomes the contents of the rendered element:
 
-  ```handlebars
-  <LinkTo @route='photoGallery'>
-    Great Hamster Photos
-  </LinkTo>
+  ```gjs
+  import { LinkTo } from '@ember/routing';
+    
+  <template>
+    <LinkTo @route='photoGallery'>
+      Great Hamster Photos
+    </LinkTo>
+  </template>
   ```
 
   This will result in:

package/dist/dev/packages/@ember/routing/lib/generate_controller.js

@@ -1,5 +1,4 @@
-import { g as get } from '../../../shared-chunks/property_get-CIBS9umw.js';
-import Controller from '../../controller/index.js';
+import { g as get } from '../../../shared-chunks/property_get-CRP7MFz_.js';
 import { info } from '../../debug/index.js';
 import { assert } from '../../debug/lib/assert.js';
 
@@ -54,7 +53,7 @@ function generateController(owner, controllerName) {
   generateControllerFactory(owner, controllerName);
   let fullName = `controller:${controllerName}`;
   let instance = owner.lookup(fullName);
-  (!(instance instanceof Controller) && assert('Expected an instance of controller', instance instanceof Controller));
+  (!(instance != null && instance.isController === true) && assert('Expected an instance of controller', instance != null && instance.isController === true));
   {
     if (get(instance, 'namespace.LOG_ACTIVE_GENERATION')) {
       info(`generated -> ${fullName}`, {

package/dist/dev/packages/@ember/routing/lib/routing-service.js

@@ -3,12 +3,12 @@ import '../../debug/index.js';
 import '../../-internals/meta/lib/meta.js';
 import { assert } from '../../debug/lib/assert.js';
 import '../../../@glimmer/destroyable/index.js';
-import '../../../shared-chunks/cache-B7dqAS38.js';
+import '../../../shared-chunks/cache-DGDPVCpC.js';
 import '../../../shared-chunks/mandatory-setter-BpbAMTzV.js';
-import '../../../shared-chunks/reference-BoPB2LfI.js';
+import '../../../shared-chunks/reference-BqOLhKFy.js';
 import '../../../shared-chunks/decorator-B5Uh5NFI.js';
-import '../../../shared-chunks/observers-C2DurkLG.js';
-import '../../../shared-chunks/property_get-CIBS9umw.js';
+import '../../../shared-chunks/observers-DMlX2nCi.js';
+import '../../../shared-chunks/property_get-CRP7MFz_.js';
 import { readOnly } from '../../object/lib/computed/computed_macros.js';
 import '../../object/core.js';
 import '../../-internals/runtime/lib/mixins/comparable.js';

package/dist/dev/packages/@ember/routing/lib/utils.js

@@ -1,10 +1,10 @@
-import { g as get } from '../../../shared-chunks/property_get-CIBS9umw.js';
+import { g as get } from '../../../shared-chunks/property_get-CRP7MFz_.js';
 import { getOwner } from '../../-internals/owner/index.js';
 import '../../debug/index.js';
 import EngineInstance from '../../engine/instance.js';
 import '../../../route-recognizer/index.js';
-import '../../../shared-chunks/rsvp-CnCSY930.js';
-import { S as STATE_SYMBOL } from '../../../shared-chunks/unrecognized-url-error-B3wUTorp.js';
+import '../../../shared-chunks/rsvp.es-DR7yS7qg.js';
+import { S as STATE_SYMBOL } from '../../../shared-chunks/unrecognized-url-error-BJHjL30Q.js';
 import { assert } from '../../debug/lib/assert.js';
 
 const ALL_PERIODS_REGEX = /\./g;

package/dist/dev/packages/@ember/routing/route.js

@@ -1,12 +1,12 @@
 import { privatize } from '../-internals/container/index.js';
-import { f as flushAsyncObservers, b as addObserver } from '../../shared-chunks/observers-C2DurkLG.js';
-import { d as defineProperty, c as computed } from '../../shared-chunks/computed-CJnghmXC.js';
+import { f as flushAsyncObservers, b as addObserver } from '../../shared-chunks/observers-DMlX2nCi.js';
+import { c as computed, d as defineProperty } from '../../shared-chunks/computed-BPCtuOxQ.js';
 import { d as descriptorForProperty } from '../../shared-chunks/decorator-B5Uh5NFI.js';
 import { getOwner } from '../-internals/owner/index.js';
-import { g as get } from '../../shared-chunks/property_get-CIBS9umw.js';
-import { s as set } from '../../shared-chunks/property_set-D3PKyisF.js';
-import { g as getProperties } from '../../shared-chunks/get_properties-CIm8IAtP.js';
-import { s as setProperties } from '../../shared-chunks/set_properties-BghuuGJx.js';
+import { g as get } from '../../shared-chunks/property_get-CRP7MFz_.js';
+import { s as set } from '../../shared-chunks/property_set-qCUylPEK.js';
+import { g as getProperties } from '../../shared-chunks/get_properties-Cm2sWt5f.js';
+import { s as setProperties } from '../../shared-chunks/set_properties-C4TSebH6.js';
 import EmberObject from '../object/index.js';
 import Evented from '../object/evented.js';
 import { A } from '../array/index.js';
@@ -20,10 +20,10 @@ import { info } from '../debug/index.js';
 import EngineInstance from '../engine/instance.js';
 import { dependentKeyCompat } from '../object/compat.js';
 import { once } from '../runloop/index.js';
-import { c as hasInternalComponentManager } from '../../shared-chunks/api-BawZUDYD.js';
+import { c as hasInternalComponentManager } from '../../shared-chunks/api-DuLOZMO_.js';
 import '../../route-recognizer/index.js';
-import '../../shared-chunks/rsvp-CnCSY930.js';
-import { S as STATE_SYMBOL, P as PARAMS_SYMBOL } from '../../shared-chunks/unrecognized-url-error-B3wUTorp.js';
+import '../../shared-chunks/rsvp.es-DR7yS7qg.js';
+import { S as STATE_SYMBOL, P as PARAMS_SYMBOL } from '../../shared-chunks/unrecognized-url-error-BJHjL30Q.js';
 import generateController from './lib/generate_controller.js';
 import { prefixRouteNameArg, stashParamNames, calculateCacheKey, normalizeControllerQueryParams } from './lib/utils.js';
 import { a as decorateMethodV2 } from '../../shared-chunks/runtime-CYyqkz5q-BOdRhmsS.js';
@@ -769,7 +769,7 @@ class Route extends EmberObject.extend(ActionHandler, Evented) {
     ```
      Note that for routes with dynamic segments, this hook is not always
     executed. If the route is entered through a transition (e.g. when
-    using the `link-to` Handlebars helper or the `transitionTo` method
+    using the `link-to` helper or the `transitionTo` method
     of routes), and a model context is already provided this hook
     is not called.
      A model context does not include a primitive string or number,
@@ -897,7 +897,7 @@ class Route extends EmberObject.extend(ActionHandler, Evented) {
      If you have defined a file for the post controller,
     the framework will use it.
     If it is not defined, a basic `Controller` instance would be used.
-     @example Behavior of a basic Controller
+     Example Behavior of a basic Controller
      ```app/routes/post.js
     import Route from '@ember/routing/route';
      export default class PostRoute extends Route {

package/dist/dev/packages/@ember/routing/router-service.js

@@ -4,13 +4,13 @@ import '../debug/index.js';
 import '../-internals/meta/lib/meta.js';
 import { assert } from '../debug/lib/assert.js';
 import '../../@glimmer/destroyable/index.js';
-import { k as consumeTag } from '../../shared-chunks/cache-B7dqAS38.js';
-import { t as tagFor } from '../../shared-chunks/meta-BmRXesrk.js';
+import { c as consumeTag } from '../../shared-chunks/cache-DGDPVCpC.js';
+import { t as tagFor } from '../../shared-chunks/meta-BqC7f9Ia.js';
 import '../../shared-chunks/mandatory-setter-BpbAMTzV.js';
-import '../../shared-chunks/reference-BoPB2LfI.js';
+import '../../shared-chunks/reference-BqOLhKFy.js';
 import '../../shared-chunks/decorator-B5Uh5NFI.js';
-import '../../shared-chunks/observers-C2DurkLG.js';
-import '../../shared-chunks/property_get-CIBS9umw.js';
+import '../../shared-chunks/observers-DMlX2nCi.js';
+import '../../shared-chunks/property_get-CRP7MFz_.js';
 import { readOnly } from '../object/lib/computed/computed_macros.js';
 import '../object/core.js';
 import '../-internals/runtime/lib/mixins/comparable.js';
@@ -41,7 +41,7 @@ function cleanURL(url, rootURL) {
    In this example, the Router service is injected into a component to initiate a transition
    to a dedicated route:
 
-   ```app/components/example.js
+   ```app/components/example.gjs
    import Component from '@glimmer/component';
    import { action } from '@ember/object';
    import { service } from '@ember/service';
@@ -90,7 +90,7 @@ class RouterService extends Service.extend(Evented) {
       In the following example we use the Router service to navigate to a route with a
      specific model from a Component in the first action, and in the second we trigger
      a query-params only transition.
-      ```app/components/example.js
+      ```app/components/example.gjs
      import Component from '@glimmer/component';
      import { action } from '@ember/object';
      import { service } from '@ember/service';
@@ -175,10 +175,14 @@ class RouterService extends Service.extend(Evented) {
     URL is returned as a string that can be used for any purpose.
      In this example, the URL for the `author.books` route for a given author
     is copied to the clipboard.
-     ```app/templates/application.hbs
-    <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+     ```app/templates/application.gjs
+    import CopyLink from '../components/copy-link';
+      
+    <template>
+      <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+    </template>
     ```
-     ```app/components/copy-link.js
+     ```app/components/copy-link.gjs
     import Component from '@glimmer/component';
     import { service } from '@ember/service';
     import { action } from '@ember/object';
@@ -197,10 +201,13 @@ class RouterService extends Service.extend(Evented) {
     ```
      Just like with `transitionTo` and `replaceWith`, `urlFor` can also handle
     query parameters.
-     ```app/templates/application.hbs
-    <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+     ```app/templates/application.gjs
+    import CopyLink from '../components/copy-link';
+     <template>
+      <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+    </template>
     ```
-     ```app/components/copy-link.js
+     ```app/components/copy-link.gjs
     import Component from '@glimmer/component';
     import { service } from '@ember/service';
     import { action } from '@ember/object';
@@ -237,7 +244,7 @@ class RouterService extends Service.extend(Evented) {
      See [model](api/ember/release/classes/Route/methods/model?anchor=model) and
      [queryParams](/api/ember/3.7/classes/Route/properties/queryParams?anchor=queryParams) for more information about these arguments.
       In the following example, `isActive` will return `true` if the current route is `/posts`.
-      ```app/components/posts.js
+      ```app/components/posts.gjs
      import Component from '@glimmer/component';
      import { service } from '@ember/service';
       export default class extends Component {
@@ -249,7 +256,7 @@ class RouterService extends Service.extend(Evented) {
      ```
       The next example includes a dynamic segment, and will return `true` if the current route is `/posts/1`,
      assuming the post has an id of 1:
-      ```app/components/posts.js
+      ```app/components/posts.gjs
      import Component from '@glimmer/component';
      import { service } from '@ember/service';
       export default class extends Component {
@@ -323,7 +330,7 @@ class RouterService extends Service.extend(Evented) {
       See [RouteInfo](/ember/release/classes/RouteInfo) for more info.
       In the following example `recognize` is used to verify if a path belongs to our
      application before transitioning to it.
-      ```
+      ```js
      import Component from '@ember/component';
      import { service } from '@ember/service';
       export default class extends Component {
@@ -626,7 +633,7 @@ class RouterService extends Service.extend(Evented) {
     happens (even when that transition only changes parameters
     and doesn't change the active route).
      Usage example:
-    ```app/components/header.js
+    ```app/components/header.gjs
       import Component from '@glimmer/component';
       import { service } from '@ember/service';
       import { notEmpty } from '@ember/object/computed';