ember-source 7.2.0-beta.1 → 7.2.0

package/dist/dev/packages/shared-chunks/{element-BYLB-q7a.js → element-Cgoi4ldD.js}

@@ -67,30 +67,6 @@ function getElementDefinition(tagName) {
 
 // ============ Element Helper ============
 
-/**
-  The `element` helper lets you dynamically set the tag name of an element.
-
-  ```handlebars
-  {{#let (element @tagName) as |Tag|}}
-    <Tag class="my-element">Hello</Tag>
-  {{/let}}
-  ```
-
-  When `@tagName` is `"h1"`, this renders `<h1 class="my-element">Hello</h1>`.
-
-  When `@tagName` is an empty string `""`, the block content is rendered without
-  a wrapping element.
-
-  Passing `null`, `undefined`, or non-string values will throw an assertion error.
-
-  Changing the tag name will tear down and recreate the element and its contents.
- 
-  The `element` helper is built-in and does not need to be imported.
-
-  @method element
-  @for Ember.Templates.helpers
-  @public
-*/
 const element = internalHelper(({
   positional,
   named

package/dist/dev/packages/shared-chunks/get-B4o_4OLA.js

@@ -0,0 +1,40 @@
+import { c as createComputeRef, U as UNDEFINED_REFERENCE, v as valueForRef } from './reference-BqOLhKFy.js';
+import { f as reifyPositional } from './arguments-CDkbOqTS.js';
+import { i as internalHelper } from './hash-Bg4r3CU4.js';
+import { setPath, getPath } from '../@glimmer/global-context/index.js';
+import { i as isDict } from './collections-DPkjqeA3.js';
+
+const isEmpty = value => {
+  return value === null || value === undefined || typeof value.toString !== 'function';
+};
+const normalizeTextValue = value => {
+  if (isEmpty(value)) {
+    return '';
+  }
+  return String(value);
+};
+const concat = internalHelper(({
+  positional
+}) => {
+  return createComputeRef(() => reifyPositional(positional).map(normalizeTextValue).join(''), null, 'concat');
+});
+
+const get = internalHelper(({
+  positional
+}) => {
+  let sourceRef = positional[0] ?? UNDEFINED_REFERENCE;
+  let pathRef = positional[1] ?? UNDEFINED_REFERENCE;
+  return createComputeRef(() => {
+    let source = valueForRef(sourceRef);
+    if (isDict(source)) {
+      return getPath(source, String(valueForRef(pathRef)));
+    }
+  }, value => {
+    let source = valueForRef(sourceRef);
+    if (isDict(source)) {
+      return setPath(source, String(valueForRef(pathRef)), value);
+    }
+  }, 'get');
+});
+
+export { concat as c, get as g };

package/dist/dev/packages/shared-chunks/hash-Bg4r3CU4.js

@@ -0,0 +1,57 @@
+import { c as createComputeRef, b as isInvokableRef, u as updateRef, v as valueForRef } from './reference-BqOLhKFy.js';
+import { f as reifyPositional, g as buildUntouchableThis, h as check, e as reifyNamed } from './arguments-CDkbOqTS.js';
+import { j as setInternalHelperManager } from './api-DuLOZMO_.js';
+
+function internalHelper(helper) {
+  return setInternalHelperManager(helper, {});
+}
+
+const array = internalHelper(({
+  positional
+}) => {
+  return createComputeRef(() => reifyPositional(positional), null, 'array');
+});
+
+const context = buildUntouchableThis('`fn` helper');
+const fn = internalHelper(({
+  positional
+}) => {
+  let callbackRef = check(positional[0]);
+  return createComputeRef(() => {
+    return (...invocationArgs) => {
+      let [fn, ...args] = reifyPositional(positional);
+      assertCallbackIsFn(callbackRef);
+      if (isInvokableRef(callbackRef)) {
+        let value = args.length > 0 ? args[0] : invocationArgs[0];
+        return void updateRef(callbackRef, value);
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return -- @fixme
+        return fn.call(context, ...args, ...invocationArgs);
+      }
+    };
+  }, null, 'fn');
+});
+function assertCallbackIsFn(callbackRef) {
+  if (!(callbackRef && (isInvokableRef(callbackRef) || typeof valueForRef(callbackRef) === 'function'))) {
+    throw new Error(`You must pass a function as the \`fn\` helper's first argument, you passed ${callbackRef ? valueForRef(callbackRef) : callbackRef}. While rendering:\n\n${callbackRef?.debugLabel}`);
+  }
+}
+
+const hash = internalHelper(({
+  named
+}) => {
+  let ref = createComputeRef(() => {
+    return reifyNamed(named);
+  }, null, 'hash');
+
+  // Setup the children so that templates can bypass getting the value of
+  // the reference and treat children lazily
+  let children = new Map();
+  for (let name in named) {
+    children.set(name, named[name]);
+  }
+  ref.children = children;
+  return ref;
+});
+
+export { array as a, fn as f, hash as h, internalHelper as i };

package/dist/dev/packages/shared-chunks/{helper-DIj85_-f.js → helper--ZiOCQkd.js}

@@ -29,7 +29,7 @@ const IS_CLASSIC_HELPER = Symbol('IS_CLASSIC_HELPER');
   Ember Helpers are functions that can compute values, and are used in templates.
   For example, this code calls a helper named `format-currency`:
 
-  ```app/templates/application.gjs
+  ```gjs {data-filename="app/templates/application.gjs"}
   import Cost from '../components/cost';
     
   <template>
@@ -37,7 +37,7 @@ const IS_CLASSIC_HELPER = Symbol('IS_CLASSIC_HELPER');
   </template>
   ```
 
-  ```app/components/cost.gjs
+  ```gjs {data-filename="app/components/cost.gjs"}
   import formatCurrency from '../helpers/format-currency';
     
   <template>

package/dist/dev/packages/shared-chunks/{index-B3pPx1fL.js → index-C5Q8WHUG.js}

@@ -36,13 +36,13 @@ import { i as isHTMLSafe } from './index-D-xTBV4B.js';
 import isArray from '../@ember/array/lib/is-array.js';
 import { g as getComponentTemplate } from './template-R_5UMHhb.js';
 import { c as hasInternalComponentManager, j as setInternalHelperManager, g as getInternalComponentManager } from './api-DuLOZMO_.js';
-import { h as hash, f as fn, a as array } from './hash-6NDs_5_f.js';
-import { g as get$1, c as concat } from './get-6I3sjd-I.js';
-import { o as on } from './on-DlF0Wy7P.js';
+import { h as hash, f as fn, a as array } from './hash-Bg4r3CU4.js';
+import { g as get$1, c as concat } from './get-B4o_4OLA.js';
+import { o as on } from './on-CQqC2-wL.js';
 import { T as TEMPLATE_ONLY_COMPONENT_MANAGER, t as templateOnlyComponent } from './template-only-Cu639ICT.js';
-import { i as isClassicHelper, C as CLASSIC_HELPER_MANAGER } from './helper-DIj85_-f.js';
+import { i as isClassicHelper, C as CLASSIC_HELPER_MANAGER } from './helper--ZiOCQkd.js';
 import { dasherize } from '../@ember/-internals/string/index.js';
-import { a as uniqueId } from './unique-id-DQOhouG1.js';
+import { a as uniqueId } from './unique-id-Csxuh1I7.js';
 import { generateControllerFactory } from '../@ember/routing/lib/generate_controller.js';
 import { E as EvaluationContextImpl } from './program-context-Dq8xN2HI.js';
 
@@ -238,7 +238,7 @@ class RootComponentDefinition {
 }
 
 /**
-@module ember
+@module @ember/helper
 */
 
 /**
@@ -248,46 +248,91 @@ class RootComponentDefinition {
   The default behavior of `{{#each}}` is to yield its inner block once for every
   item in an array passing the item as the first block parameter.
 
-  Assuming the `@developers` argument contains this array:
+  ```gjs {data-filename="app/components/developer-list.gjs"}
+  import Component from '@glimmer/component';
 
-  ```javascript
-  [{ name: 'Yehuda' },{ name: 'Tom' }, { name: 'Paul' }];
-  ```
+  export default class DeveloperList extends Component {
+    developers = [
+      { name: 'Yehuda' },
+      { name: 'Tom' },
+      { name: 'Paul' },
+    ];
 
-  ```handlebars
-  <ul>
-    {{#each @developers as |person|}}
-      <li>Hello, {{person.name}}!</li>
-    {{/each}}
-  </ul>
+    <template>
+      <ul>
+        {{#each this.developers as |person|}}
+          <li>Hello, {{person.name}}!</li>
+        {{/each}}
+      </ul>
+    </template>
+  }
   ```
 
-  The same rules apply to arrays of primitives.
+  The same rules apply to arrays of primitives:
+
+  ```app/components/developer-names.gjs
+  import Component from '@glimmer/component';
+
+  export default class DeveloperNames extends Component {
+    developerNames = ['Yehuda', 'Tom', 'Paul'];
 
-  ```javascript
-  ['Yehuda', 'Tom', 'Paul']
+    <template>
+      <ul>
+        {{#each this.developerNames as |name|}}
+          <li>Hello, {{name}}!</li>
+        {{/each}}
+      </ul>
+    </template>
+  }
   ```
 
-  ```handlebars
-  <ul>
-    {{#each @developerNames as |name|}}
-      <li>Hello, {{name}}!</li>
-    {{/each}}
-  </ul>
+  `{{#each}}` also supports native JavaScript [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+  values and other iterables:
+
+  ```gjs {data-filename="app/components/developer-set.gjs"}
+  import Component from '@glimmer/component';
+
+  export default class DeveloperSet extends Component {
+    developers = new Set([
+      { name: 'Yehuda' },
+      { name: 'Tom' },
+      { name: 'Paul' },
+    ]);
+
+    <template>
+      <ul>
+        {{#each this.developers as |person|}}
+          <li>Hello, {{person.name}}!</li>
+        {{/each}}
+      </ul>
+    </template>
+  }
   ```
 
-  During iteration, the index of each item in the array is provided as a second block
-  parameter.
+  During iteration, the index of each item in the array is provided as a second
+  block parameter:
 
-  ```handlebars
-  <ul>
-    {{#each @developers as |person index|}}
-      <li>Hello, {{person.name}}! You're number {{index}} in line</li>
-    {{/each}}
-  </ul>
+  ```app/components/developer-list-with-index.gjs
+  import Component from '@glimmer/component';
+
+  export default class DeveloperListWithIndex extends Component {
+    developers = [
+      { name: 'Yehuda' },
+      { name: 'Tom' },
+      { name: 'Paul' },
+    ];
+
+    <template>
+      <ul>
+        {{#each this.developers as |person index|}}
+          <li>Hello, {{person.name}}! You're number {{index}} in line</li>
+        {{/each}}
+      </ul>
+    </template>
+  }
   ```
-    
-  `#each` is a keyword and does not need to be imported. 
+
+  `#each` is a keyword and does not need to be imported.
 
   ### Specifying Keys
 
@@ -303,30 +348,38 @@ class RootComponentDefinition {
   needed. However, in some rare cases, the objects' identities may change even
   though they represent the same underlying data.
 
-  For example:
+  For example, mapping over `people` produces a new array of new objects on each
+  render. Use `key` so Ember can match items across those renders:
 
-  ```javascript
-  people.map(person => {
-    return { ...person, type: 'developer' };
-  });
-  ```
+  ```gjs {data-filename="app/components/mapped-developers.gjs"}
+  import Component from '@glimmer/component';
 
-  In this case, each time the `people` array is `map`-ed over, it will produce
-  an new array with completely different objects between renders. In these cases,
-  you can help Ember determine how these objects related to each other with the
-  `key` option:
+  export default class MappedDevelopers extends Component {
+    people = [
+      { name: 'Yehuda' },
+      { name: 'Tom' },
+      { name: 'Paul' },
+    ];
 
-  ```handlebars
-  <ul>
-    {{#each @developers key="name" as |person|}}
-      <li>Hello, {{person.name}}!</li>
-    {{/each}}
-  </ul>
+    get developers() {
+      return this.people.map((person) => {
+        return { ...person, type: 'developer' };
+      });
+    }
+
+    <template>
+      <ul>
+        {{#each this.developers key="name" as |person|}}
+          <li>Hello, {{person.name}}!</li>
+        {{/each}}
+      </ul>
+    </template>
+  }
   ```
 
   By doing so, Ember will use the value of the property specified (`person.name`
   in the example) to find a "match" from the previous render. That is, if Ember
-  has previously seen an object from the `@developers` array with a matching
+  has previously seen an object from the `developers` array with a matching
   name, its DOM elements will be re-used.
 
   There are two special values for `key`:
@@ -339,36 +392,47 @@ class RootComponentDefinition {
   `{{#each}}` can have a matching `{{else}}`. The contents of this block will render
   if the collection is empty.
 
-  ```handlebars
-  <ul>
-    {{#each @developers as |person|}}
-      <li>{{person.name}} is available!</li>
-    {{else}}
-      <li>Sorry, nobody is available for this task.</li>
-    {{/each}}
-  </ul>
+  ```gjs {data-filename="app/components/available-developers.gjs"}
+  import Component from '@glimmer/component';
+
+  export default class AvailableDevelopers extends Component {
+    developers = [];
+
+    <template>
+      <ul>
+        {{#each this.developers as |person|}}
+          <li>{{person.name}} is available!</li>
+        {{else}}
+          <li>Sorry, nobody is available for this task.</li>
+        {{/each}}
+      </ul>
+    </template>
+  }
   ```
 
   @method each
-  @for Ember.Templates.helpers
+  @for Keywords
+  @static
+  @noimport
   @public
  */
 
 /**
-  The `{{#each-in}}` keyword loops over properties on an object.
+  The `{{#each-in}}` keyword loops over properties on an object, or entries in a
+  native JavaScript [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map).
 
   For example, given this component definition:
 
-  ```app/components/developer-details.gjs
+  ```gjs {data-filename="app/components/developer-details.gjs"}
   import Component from '@glimmer/component';
   import { tracked } from '@glimmer/tracking';
 
-  export default class extends Component {
+  export default class DeveloperDetails extends Component {
     @tracked developer = {
-      "name": "Shelly Sails",
-      "age": 42
+      name: 'Shelly Sails',
+      age: 42,
     };
-    
+
     <template>
       <ul>
         {{#each-in this.developer as |key value|}}
@@ -388,11 +452,56 @@ class RootComponentDefinition {
     <li>age: 42</li>
   </ul>
   ```
- 
+
+  The same pattern works with a `Map`:
+
+  ```gjs {data-filename="app/components/developer-map.gjs"}
+  import Component from '@glimmer/component';
+
+  export default class DeveloperMap extends Component {
+    map = new Map([
+      ['name', 'Shelly Sails'],
+      ['age', 42],
+    ]);
+
+    <template>
+      <ul>
+        {{#each-in this.map as |key value|}}
+          <li>{{key}}: {{value}}</li>
+        {{/each-in}}
+      </ul>
+    </template>
+  }
+  ```
+
+  When a `Map` uses object keys, you can pass `key="@identity"` to explicitly
+  track entries across re-renders using the JavaScript identity of each key:
+
+  ```gjs {data-filename="app/components/object-keyed-map.gjs"}
+  import Component from '@glimmer/component';
+
+  export default class ObjectKeyedMap extends Component {
+    map = new Map([
+      [{ name: 'one' }, 'foo'],
+      [{ name: 'two' }, 'bar'],
+    ]);
+
+    <template>
+      <ul>
+        {{#each-in this.map key="@identity" as |key value|}}
+          <li>{{key.name}}: {{value}}</li>
+        {{/each-in}}
+      </ul>
+    </template>
+  }
+  ```
+
   `#each-in` is a keyword and does not need to be imported.
 
   @method each-in
-  @for Ember.Templates.helpers
+  @static
+  @noimport
+  @for Keywords
   @public
   @since 2.1.0
 */
@@ -855,7 +964,7 @@ const trackArray = internalHelper(({
 });
 
 /**
-@module ember
+@module @ember/helper
 */
 
 /**
@@ -875,7 +984,7 @@ const trackArray = internalHelper(({
 
   The child `Component` would invoke the function with the new click count:
 
-  ```app/components/my-child.gjs
+  ```gjs {data-filename="app/components/my-child.gjs"}
   import Component from '@glimmer/component';
   import { action } from '@ember/object';
     
@@ -897,7 +1006,8 @@ const trackArray = internalHelper(({
 
   @method mut
   @param {Object} [attr] the "two-way" attribute that can be modified.
-  @for Ember.Templates.helpers
+  @static
+  @for Keywords
   @public
 */
 
@@ -922,7 +1032,7 @@ const mut = internalHelper(({
 });
 
 /**
-@module ember
+@module @ember/helper
 */
 
 
@@ -1034,7 +1144,9 @@ const mut = internalHelper(({
 
   @method readonly
   @param {Object} [attr] the read-only attribute.
-  @for Ember.Templates.helpers
+  @for Keywords
+  @noimport
+  @static
   @private
 */
 const readonly = internalHelper(({
@@ -1046,7 +1158,7 @@ const readonly = internalHelper(({
 });
 
 /**
-@module ember
+@module @ember/helper
 */
 
 
@@ -1072,9 +1184,13 @@ const readonly = internalHelper(({
 
   The `unbound` helper only accepts a single argument, and it return an
   unbound value.
+ 
+ `unbound` is a template keyword and does not need to be imported.
 
   @method unbound
-  @for Ember.Templates.helpers
+  @static
+  @noimport
+  @for Keywords
   @public
 */
 
@@ -1217,7 +1333,7 @@ class MountDefinition {
 }
 
 /**
-@module ember
+@module @ember/helper
 */
 
 
@@ -1228,7 +1344,7 @@ class MountDefinition {
 
   For example, the following template mounts the `ember-chat` engine:
 
-  ```app/templates/application.gjs
+  ```gjs {data-filename="app/templates/application.gjs"}
   {{mount "ember-chat"}}
   ```
 
@@ -1262,7 +1378,9 @@ class MountDefinition {
   @param {String} name Name of the engine to mount.
   @param {Object} [model] Object that will be set as
                           the model of the engine.
-  @for Ember.Templates.helpers
+  @for Keywords
+  @static
+  @noimport
   @public
 */
 const mountHelper = internalHelper((args, owner) => {
@@ -1397,12 +1515,16 @@ function makeRouteTemplate(owner, name, template) {
   return curry(0, routeTemplate, owner, null, true);
 }
 
+/**
+ @module @ember/helper
+ */
+
 /**
   The `{{outlet}}` helper lets you specify where a child route will render in
   your template. An important use of the `{{outlet}}` helper is in your
   application's `application.gjs` file:
 
-  ```app/templates/application.gjs
+  ```gjs {data-filename="app/templates/application.gjs"}
   import MyHeader from '../components/my-header';
   import MyFooter from '../components/my-footer';
     
@@ -1425,7 +1547,9 @@ function makeRouteTemplate(owner, name, template) {
   `outlet` is built-in and does not need to be imported. 
  
   @method outlet
-  @for Ember.Templates.helpers
+  @for Keywords
+  @static
+  @noimport
   @public
 */
 const outletHelper = internalHelper((_args, owner, scope) => {

package/dist/dev/packages/shared-chunks/{not-DYh6AY9Z.js → not-JB6ln6bJ.js}

@@ -1,6 +1,6 @@
 import { toBool } from '../@glimmer/global-context/index.js';
 import { c as createComputeRef, v as valueForRef } from './reference-BqOLhKFy.js';
-import { i as internalHelper } from './hash-6NDs_5_f.js';
+import { i as internalHelper } from './hash-Bg4r3CU4.js';
 
 /**
  * Performs a strict equality comparison.

package/dist/dev/packages/shared-chunks/{on-DlF0Wy7P.js → on-CQqC2-wL.js}

@@ -131,6 +131,10 @@ function addEventListener(element, eventName, callback, options) {
   element.addEventListener(eventName, callback, options);
 }
 
+/**
+ @module @ember/helper
+ */
+
 /**
   The `{{on}}` modifier lets you easily add event listeners (it uses
   [EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
@@ -139,12 +143,13 @@ function addEventListener(element, eventName, callback, options) {
   For example, if you'd like to run a function on your component when a `<button>`
   in the components template is clicked you might do something like:
 
-  ```app/components/like-post.gjs
+  ```gjs {data-filename="app/components/like-post.gjs"}
   import Component from '@glimmer/component';
   import { action } from '@ember/object';
 
-  export default class LikePostComponent extends Component {
-    saveLike = () => {
+  export default class LikePost extends Component {
+    @action
+    saveLike() {
       // someone likes your post!
       // better send a request off to your server...
     }
@@ -186,7 +191,7 @@ function addEventListener(element, eventName, callback, options) {
   For example, in our example case above if you'd like to pass in the post that
   was being liked when the button is clicked you could do something like:
 
-  ```app/components/like-post.hbs
+  ```hbs
   <button {{on 'click' (fn this.saveLike @post)}}>Like this post!</button>
   ```
 
@@ -195,14 +200,14 @@ function addEventListener(element, eventName, callback, options) {
 
   ### Function Context
 
-  In the example above, we used an arrow function to ensure that `likePost` is
-  properly bound to the `items-list`, but let's explore what happens if we
-  left out the arrow function:
+  In the example above, we used `@action` to ensure that `likePost` is
+  properly bound to the `LikePost` Component, but let's explore what happens if we
+  left out `@action`:
 
-  ```app/components/like-post.gjs
+  ```gjs {data-filename="app/components/like-post.gjs"}
   import Component from '@glimmer/component';
 
-  export default class LikePostComponent extends Component {
+  export default class LikePost extends Component {
     saveLike() {
       // ...snip...
     }
@@ -212,10 +217,16 @@ function addEventListener(element, eventName, callback, options) {
   In this example, when the button is clicked `saveLike` will be invoked,
   it will **not** have access to the component instance. In other
   words, it will have no `this` context, so please make sure your functions
-  are bound (via an arrow function or other means) before passing into `on`!
+  are bound (via `@action` or other means) before passing into `on`!
+
+  The `on` modifier is a keyword and does not need to be imported.
 
   @method on
+  @static
+  @for Keywords
+  @noimport
   @public
+  @since 3.11.0
 */
 class OnModifierManager {
   getDebugName() {