ember-source 7.2.0-alpha.4 → 7.2.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "ember-source",
-  "version": "7.2.0-alpha.4",
+  "version": "7.2.0",
   "description": "A JavaScript framework for creating ambitious web applications",
+  "type": "module",
   "keywords": [
     "ember-addon"
   ],
@@ -51,7 +52,7 @@
     "lint:format": "prettier --check .",
     "lint:format:fix": "prettier --write .",
     "test": "testem ci -f testem.cjs --host 127.0.0.1 --port 13141",
-    "test:blueprints": "mocha node-tests/blueprints/**/*-test.js",
+    "test:blueprints": "pnpm --filter ember-test-node-blueprints test:node",
     "test:node": "qunit tests/node/**/*-test.cjs",
     "test:node:vitest": "pnpm --filter ember-test-node-vitest test:node",
     "test:browserstack": "node bin/run-browserstack-tests.cjs",
@@ -210,6 +211,7 @@
       "@ember/application/namespace.js": "ember-source/@ember/application/namespace.js",
       "@ember/array/-internals.js": "ember-source/@ember/array/-internals.js",
       "@ember/array/index.js": "ember-source/@ember/array/index.js",
+      "@ember/array/lib/is-array.js": "ember-source/@ember/array/lib/is-array.js",
       "@ember/array/lib/make-array.js": "ember-source/@ember/array/lib/make-array.js",
       "@ember/array/make.js": "ember-source/@ember/array/make.js",
       "@ember/array/mutable.js": "ember-source/@ember/array/mutable.js",
@@ -365,9 +367,6 @@
     }
   },
   "packageManager": "pnpm@10.33.2",
-  "_originalVersion": "7.2.0-alpha.1",
-  "_versionPreviouslyCalculated": true,
-  "publishConfig": {
-    "tag": "alpha"
-  }
+  "_originalVersion": "7.2.0",
+  "_versionPreviouslyCalculated": true
 }

package/types/stable/@ember/-internals/glimmer/index.d.ts

@@ -2,6 +2,23 @@ declare module '@ember/-internals/glimmer' {
     /**
       [Glimmer](https://github.com/tildeio/glimmer) is a templating engine used by Ember.js that is compatible with a subset of the [Handlebars](http://handlebarsjs.com/) syntax.
 
+      Ember ships with two types of JavaScript classes for components:
+
+      1. Glimmer components, imported from `@glimmer/component`, which are the
+      default component's for Ember Octane (3.15) and more recent editions.
+      2. Classic components, imported from `@ember/component`, which were the
+      default for older editions of Ember (pre 3.15) but are still supported.
+
+      Below is the documentation for Classic components. If you are looking for the
+      API documentation for Template-only or Glimmer components, it is [available
+      here](/ember/release/modules/@glimmer%2Fcomponent).
+
+      Note: Prior to Ember 6.8, by default, components were authored in paired `.hbs` and `.js`
+      files. This is still supported, but the default authoring format is now `.gjs` or "template tag".
+      The documentation for `@ember/component` still refers to the older authoring format. To read about
+      the new authoring format, see the
+      [Glimmer Component API documentation](/ember/release/modules/@glimmer%2Fcomponent).
+        
       ### Showing a property
 
       Templates manage the flow of an application's UI, and display state (through
@@ -65,8 +82,8 @@ declare module '@ember/-internals/glimmer' {
       )}}></span>
       ```
 
-      Ember's built-in helpers are described under the [Ember.Templates.helpers](/ember/release/classes/Ember.Templates.helpers)
-      namespace. Documentation on creating custom helpers can be found under
+      Ember's built-in and importable helpers are described under the [@ember/helper](../modules/@ember%2Fhelper).
+      module. Documentation on creating custom helpers can be found under
       [helper](/ember/release/functions/@ember%2Fcomponent%2Fhelper/helper) (or
       under [Helper](/ember/release/classes/Helper) if a helper requires access to
       dependency injection).
@@ -84,360 +101,14 @@ declare module '@ember/-internals/glimmer' {
      @module ember
      */
     /**
+
+     ## Looking for template keywords and helpers?
+       
+     See [@ember/helper](../modules/@ember%2Fhelper).
+     
      @class Ember.Templates.helpers
      @public
      */
-    /**
-      `{{yield}}` denotes an area of a template that will be rendered inside
-      of another template.
-
-      ### Use with `Component`
-
-      When designing components `{{yield}}` is used to denote where, inside the component's
-      template, an optional block passed to the component should render:
-
-      ```app/templates/application.hbs
-      <LabeledTextfield @value={{@model.name}}>
-        First name:
-      </LabeledTextfield>
-      ```
-
-      ```app/components/labeled-textfield.hbs
-      <label>
-        {{yield}} <Input @value={{@value}} />
-      </label>
-      ```
-
-      Result:
-
-      ```html
-      <label>
-        First name: <input type="text" />
-      </label>
-      ```
-
-      Additionally you can `yield` properties into the context for use by the consumer:
-
-      ```app/templates/application.hbs
-      <LabeledTextfield @value={{@model.validation}} @validator={{this.firstNameValidator}} as |validationError|>
-        {{#if validationError}}
-          <p class="error">{{validationError}}</p>
-        {{/if}}
-        First name:
-      </LabeledTextfield>
-      ```
-
-      ```app/components/labeled-textfield.hbs
-      <label>
-        {{yield this.validationError}} <Input @value={{@value}} />
-      </label>
-      ```
-
-      Result:
-
-      ```html
-      <label>
-        <p class="error">First Name must be at least 3 characters long.</p>
-        First name: <input type="text" />
-      </label>
-      ```
-
-      `yield` can also be used with the `hash` helper:
-
-      ```app/templates/application.hbs
-      <DateRanges @value={{@model.date}} as |range|>
-        Start date: {{range.start}}
-        End date: {{range.end}}
-      </DateRanges>
-      ```
-
-      ```app/components/date-ranges.hbs
-      <div>
-        {{yield (hash start=@value.start end=@value.end)}}
-      </div>
-      ```
-
-      Result:
-
-      ```html
-      <div>
-        Start date: July 1st
-        End date: July 30th
-      </div>
-      ```
-
-      Multiple values can be yielded as block params:
-
-      ```app/templates/application.hbs
-      <Banner @value={{@model}} as |title subtitle body|>
-        <h1>{{title}}</h1>
-        <h2>{{subtitle}}</h2>
-        {{body}}
-      </Banner>
-      ```
-
-      ```app/components/banner.hbs
-      <div>
-        {{yield "Hello title" "hello subtitle" "body text"}}
-      </div>
-      ```
-
-      Result:
-
-      ```html
-      <div>
-        <h1>Hello title</h1>
-        <h2>hello subtitle</h2>
-        body text
-      </div>
-      ```
-
-      However, it is preferred to use the hash helper, as this can prevent breaking changes to your component and also simplify the api for the component.
-
-      Multiple components can be yielded with the `hash` and `component` helper:
-
-      ```app/templates/application.hbs
-      <Banner @value={{@model}} as |banner|>
-        <banner.Title>Banner title</banner.Title>
-        <banner.Subtitle>Banner subtitle</banner.Subtitle>
-        <banner.Body>A load of body text</banner.Body>
-      </Banner>
-      ```
-
-      ```app/components/banner.js
-      import Title from './banner/title';
-      import Subtitle from './banner/subtitle';
-      import Body from './banner/body';
-
-      export default class Banner extends Component {
-        Title = Title;
-        Subtitle = Subtitle;
-        Body = Body;
-      }
-      ```
-
-      ```app/components/banner.hbs
-      <div>
-        {{yield (hash
-          Title=this.Title
-          Subtitle=this.Subtitle
-          Body=(component this.Body defaultArg="some value")
-        )}}
-      </div>
-      ```
-
-      Result:
-
-      ```html
-      <div>
-        <h1>Banner title</h1>
-        <h2>Banner subtitle</h2>
-        A load of body text
-      </div>
-      ```
-
-      A benefit of using this pattern is that the user of the component can change the order the components are displayed.
-
-      ```app/templates/application.hbs
-      <Banner @value={{@model}} as |banner|>
-        <banner.Subtitle>Banner subtitle</banner.Subtitle>
-        <banner.Title>Banner title</banner.Title>
-        <banner.Body>A load of body text</banner.Body>
-      </Banner>
-      ```
-
-      Result:
-
-      ```html
-      <div>
-        <h2>Banner subtitle</h2>
-        <h1>Banner title</h1>
-        A load of body text
-      </div>
-      ```
-
-      Another benefit to using `yield` with the `hash` and `component` helper
-      is you can pass attributes and arguments to these components:
-
-      ```app/templates/application.hbs
-      <Banner @value={{@model}} as |banner|>
-        <banner.Subtitle class="mb-1">Banner subtitle</banner.Subtitle>
-        <banner.Title @variant="loud">Banner title</banner.Title>
-        <banner.Body>A load of body text</banner.Body>
-      </Banner>
-      ```
-
-      ```app/components/banner/subtitle.hbs
-      {{!-- note the use of ..attributes --}}
-      <h2 ...attributes>
-        {{yield}}
-      </h2>
-      ```
-
-      ```app/components/banner/title.hbs
-      {{#if (eq @variant "loud")}}
-          <h1 class="loud">{{yield}}</h1>
-      {{else}}
-          <h1 class="quiet">{{yield}}</h1>
-      {{/if}}
-      ```
-
-      Result:
-
-      ```html
-      <div>
-        <h2 class="mb-1">Banner subtitle</h2>
-        <h1 class="loud">Banner title</h1>
-        A load of body text
-      </div>
-      ```
-
-      @method yield
-      @for Ember.Templates.helpers
-      @param {Hash} options
-      @return {String} HTML string
-      @public
-     */
-    /**
-      `{{(has-block)}}` indicates if the component was invoked with a block.
-
-      This component is invoked with a block:
-
-      ```handlebars
-      {{#my-component}}
-        Hi Jen!
-      {{/my-component}}
-      ```
-
-      This component is invoked without a block:
-
-      ```handlebars
-      {{my-component}}
-      ```
-
-      Using angle bracket invocation, this looks like:
-
-      ```html
-      <MyComponent>Hi Jen!</MyComponent> {{! with a block}}
-      ```
-
-      ```html
-      <MyComponent/> {{! without a block}}
-      ```
-
-      This is useful when you want to create a component that can optionally take a block
-      and then render a default template when it is not invoked with a block.
-
-      ```app/templates/components/my-component.hbs
-      {{#if (has-block)}}
-        Welcome {{yield}}, we are happy you're here!
-      {{else}}
-        Hey you! You're great!
-      {{/if}}
-      ```
-
-      @method has-block
-      @for Ember.Templates.helpers
-      @param {String} the name of the block. The name (at the moment) is either "main" or "inverse" (though only curly components support inverse)
-      @return {Boolean} `true` if the component was invoked with a block
-      @public
-     */
-    /**
-      `{{(has-block-params)}}` indicates if the component was invoked with block params.
-
-      This component is invoked with block params:
-
-      ```handlebars
-      {{#my-component as |favoriteFlavor|}}
-        Hi Jen!
-      {{/my-component}}
-      ```
-
-      This component is invoked without block params:
-
-      ```handlebars
-      {{#my-component}}
-        Hi Jenn!
-      {{/my-component}}
-      ```
-
-      With angle bracket syntax, block params look like this:
-
-        ```handlebars
-      <MyComponent as |favoriteFlavor|>
-        Hi Jen!
-      </MyComponent>
-      ```
-
-      And without block params:
-
-      ```handlebars
-      <MyComponent>
-        Hi Jen!
-      </MyComponent>
-      ```
-
-      This is useful when you want to create a component that can render itself
-      differently when it is not invoked with block params.
-
-      ```app/templates/components/my-component.hbs
-      {{#if (has-block-params)}}
-        Welcome {{yield this.favoriteFlavor}}, we're happy you're here and hope you
-        enjoy your favorite ice cream flavor.
-      {{else}}
-        Welcome {{yield}}, we're happy you're here, but we're unsure what
-        flavor ice cream you would enjoy.
-      {{/if}}
-      ```
-
-      @method has-block-params
-      @for Ember.Templates.helpers
-      @param {String} the name of the block. The name (at the moment) is either "main" or "inverse" (though only curly components support inverse)
-      @return {Boolean} `true` if the component was invoked with block params
-      @public
-     */
-    /**
-      Execute the `debugger` statement in the current template's context.
-
-      ```handlebars
-      {{debugger}}
-      ```
-
-      When using the debugger helper you will have access to a `get` function. This
-      function retrieves values available in the context of the template.
-      For example, if you're wondering why a value `{{foo}}` isn't rendering as
-      expected within a template, you could place a `{{debugger}}` statement and,
-      when the `debugger;` breakpoint is hit, you can attempt to retrieve this value:
-
-      ```
-      > get('foo')
-      ```
-
-      `get` is also aware of keywords. So in this situation
-
-      ```handlebars
-      {{#each this.items as |item|}}
-        {{debugger}}
-      {{/each}}
-      ```
-
-      You'll be able to get values from the current item:
-
-      ```
-      > get('item.name')
-      ```
-
-      You can also access the context of the view to make sure it is the object that
-      you expect:
-
-      ```
-      > context
-      ```
-
-      @method debugger
-      @for Ember.Templates.helpers
-      @public
-     */
     export { default as template, templateCacheCounters } from "@glimmer/opcode-compiler/lib/template";
     export { default as RootTemplate } from "@ember/-internals/glimmer/lib/templates/root";
     export { default as Input } from "@ember/-internals/glimmer/lib/components/input";

package/types/stable/@ember/-internals/glimmer/lib/component-managers/mount.d.ts

@@ -1,6 +1,6 @@
 declare module '@ember/-internals/glimmer/lib/component-managers/mount' {
     import type { InternalOwner } from "@ember/-internals/owner";
-    import EngineInstance from "@ember/engine/instance";
+    import type EngineInstance from "@ember/engine/instance";
     import type { CapturedArguments, ComponentDefinition, CustomRenderNode, Destroyable, Environment, InternalComponentCapabilities, VMArguments, WithCreateInstance, WithCustomDebugRenderTree, WithDynamicLayout, WithSubOwner } from "@glimmer/interfaces";
     import type { Nullable } from "@ember/-internals/utility-types";
     import type { Reference } from "@glimmer/reference/lib/reference";

package/types/stable/@ember/-internals/glimmer/lib/component-managers/outlet.d.ts

@@ -1,7 +1,7 @@
 declare module '@ember/-internals/glimmer/lib/component-managers/outlet' {
     import type { InternalOwner } from "@ember/-internals/owner";
     import type { Nullable } from "@ember/-internals/utility-types";
-    import EngineInstance from "@ember/engine/instance";
+    import type EngineInstance from "@ember/engine/instance";
     import type { CompilableProgram, ComponentDefinition, CustomRenderNode, Destroyable, Environment, InternalComponentCapabilities, VMArguments, WithCreateInstance, WithCustomDebugRenderTree } from "@glimmer/interfaces";
     import type { Reference } from "@glimmer/reference/lib/reference";
     import type { DynamicScope } from "@ember/-internals/glimmer/lib/renderer";

package/types/stable/@ember/-internals/glimmer/lib/component.d.ts

@@ -168,6 +168,12 @@ declare module '@ember/-internals/glimmer/lib/component' {
       API documentation for Template-only or Glimmer components, it is [available
       here](/ember/release/modules/@glimmer%2Fcomponent).
 
+      Note: Prior to Ember 6.8, by default, components were authored in paired `.hbs` and `.js`
+      files. This is still supported, but the default authoring format is now `.gjs` or "template tag".
+      The documentation for `@ember/component` still refers to the older authoring format. To read about
+      the new authoring format, see the
+      [Glimmer Component API documentation](/ember/release/modules/@glimmer%2Fcomponent).
+        
       ## Defining a Classic Component
 
       If you want to customize the component in order to handle events, transform
@@ -194,7 +200,7 @@ declare module '@ember/-internals/glimmer/lib/component' {
 
       And then use it in the component's template:
 
-      ```app/templates/components/person-profile.hbs
+      ```app/components/person-profile.hbs
       <h1>{{this.displayName}}</h1>
       {{yield}}
       ```
@@ -582,7 +588,7 @@ declare module '@ember/-internals/glimmer/lib/component' {
       The `layout` property should be set to the default export of a template
       module, which is the name of a template file without the `.hbs` extension.
 
-      ```app/templates/components/person-profile.hbs
+      ```app/components/person-profile.hbs
       <h1>Person's Title</h1>
       <div class='details'>{{yield}}</div>
       ```
@@ -651,7 +657,7 @@ declare module '@ember/-internals/glimmer/lib/component' {
 
       See the [Guide on Component event
       handlers](https://guides.emberjs.com/release/components/component-state-and-actions/#toc_html-modifiers-and-actions)
-      and the [API docs for `on`](../Ember.Templates.helpers/methods/on?anchor=on)
+      and the [API docs for `on`](../functions/Keywords/on)
       for more details.
 
       ### Event Handler Methods

package/types/stable/@ember/-internals/glimmer/lib/glimmer-tracking-docs.d.ts

@@ -26,17 +26,7 @@ declare module '@ember/-internals/glimmer/lib/glimmer-tracking-docs' {
       property changes, any templates that used that property, directly or
       indirectly, will rerender. For instance, consider this component:
 
-      ```handlebars
-      <div>Count: {{this.count}}</div>
-      <div>Times Ten: {{this.timesTen}}</div>
-      <div>
-        <button {{on "click" this.plusOne}}>
-          Plus One
-        </button>
-      </div>
-      ```
-
-      ```javascript
+      ```gjs
       import Component from '@glimmer/component';
       import { tracked } from '@glimmer/tracking';
       import { action } from '@ember/object';
@@ -52,6 +42,16 @@ declare module '@ember/-internals/glimmer/lib/glimmer-tracking-docs' {
         plusOne() {
           this.count += 1;
         }
+        
+        <template>
+          <div>Count: {{this.count}}</div>
+          <div>Times Ten: {{this.timesTen}}</div>
+          <div>
+            <button {{on "click" this.plusOne}}>
+              Plus One
+            </button>
+          </div>
+        </template>
       }
       ```
 
@@ -61,7 +61,7 @@ declare module '@ember/-internals/glimmer/lib/glimmer-tracking-docs' {
       will cause a rerender when updated - this includes through method calls and
       other means:
 
-      ```javascript
+      ```gjs
       import Component from '@glimmer/component';
       import { tracked } from '@glimmer/tracking';
 

package/types/stable/@ember/-internals/glimmer/lib/helper.d.ts

@@ -29,20 +29,32 @@ declare module '@ember/-internals/glimmer/lib/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.hbs
-      <Cost @cents={{230}} />
+      ```gjs {data-filename="app/templates/application.gjs"}
+      import Cost from '../components/cost';
+        
+      <template>
+        <Cost @cents={{230}} />
+      </template>
       ```
 
-      ```app/components/cost.hbs
-      <div>{{format-currency @cents currency="$"}}</div>
+      ```gjs {data-filename="app/components/cost.gjs"}
+      import formatCurrency from '../helpers/format-currency';
+        
+      <template>
+        <div>{{formatCurrency @cents currency="$"}}</div>
+      </template>
       ```
 
       Additionally a helper can be called as a nested helper.
       In this example, we show the formatted currency value if the `showMoney`
       named argument is truthy.
 
-      ```handlebars
-      {{if @showMoney (format-currency @cents currency="$")}}
+      ```gjs
+      import formatCurrency from '../helpers/format-currency';
+
+      <template>
+        {{if @showMoney (formatCurrency @cents currency="$")}}
+      </template>
       ```
 
       Helpers defined using a class must provide a `compute` function. For example: