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

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "ember-source",
-  "version": "7.2.0-alpha.4",
+  "version": "7.2.0-beta.1",
   "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,9 @@
     }
   },
   "packageManager": "pnpm@10.33.2",
-  "_originalVersion": "7.2.0-alpha.1",
+  "_originalVersion": "7.2.0-beta.1",
   "_versionPreviouslyCalculated": true,
   "publishConfig": {
-    "tag": "alpha"
+    "tag": "beta"
   }
 }

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
@@ -96,16 +113,24 @@ declare module '@ember/-internals/glimmer' {
       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/templates/application.gjs
+      import LabeledTextField from '../components/labeled-textfield';
+        
+      <template>
+        <LabeledTextField @value={{@model.name}}>
+          First name:
+        </LabeledTextField>
+      </template>
       ```
 
-      ```app/components/labeled-textfield.hbs
-      <label>
-        {{yield}} <Input @value={{@value}} />
-      </label>
+      ```app/components/labeled-textfield.gjs
+      import { Input } from '@ember/component';
+        
+      <template>
+        <label>
+          {{yield}} <Input @value={{@value}} />
+        </label>
+      </template>
       ```
 
       Result:
@@ -118,19 +143,34 @@ declare module '@ember/-internals/glimmer' {
 
       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/templates/application.gjs
+      import Component from '@glimmer/component';
+      import LabeledTextField from '../components/labeled-textfield';
+        
+      export default class Application extends Component {
+        firstNameValidator = (value) => {
+          // validates
+        }
+        
+        <template>
+          <LabeledTextField @value={{@model.validation}} @validator={{this.firstNameValidator}} as |validationError|>
+            {{#if validationError}}
+              <p class="error">{{validationError}}</p>
+            {{/if}}
+            First name:
+          </LabeledTextField>
+        </template>
+      }
       ```
 
-      ```app/components/labeled-textfield.hbs
-      <label>
-        {{yield this.validationError}} <Input @value={{@value}} />
-      </label>
+      ```app/components/labeled-textfield.gjs
+      import { Input } from '@ember/component';
+        
+      <template>
+        <label>
+          {{yield this.validationError}} <Input @value={{@value}} />
+        </label>
+      </template>
       ```
 
       Result:
@@ -144,17 +184,23 @@ declare module '@ember/-internals/glimmer' {
 
       `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/templates/application.gjs
+      import DateRanges from '../components/date-ranges';
+        
+      <template>
+        <DateRanges @value={{@model.date}} as |range|>
+          Start date: {{range.start}}
+          End date: {{range.end}}
+        </DateRanges>
+      </template>
       ```
 
-      ```app/components/date-ranges.hbs
-      <div>
-        {{yield (hash start=@value.start end=@value.end)}}
-      </div>
+      ```app/components/date-ranges.gjs
+      <template>
+        <div>
+          {{yield (hash start=@value.start end=@value.end)}}
+        </div>
+      </template>
       ```
 
       Result:
@@ -167,19 +213,25 @@ declare module '@ember/-internals/glimmer' {
       ```
 
       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>
+        
+      ```app/templates/application.gjs
+      import Banner from '../components/banner';
+        
+      <template>
+        <Banner @value={{@model}} as |title subtitle body|>
+          <h1>{{title}}</h1>
+          <h2>{{subtitle}}</h2>
+          {{body}}
+        </Banner>
+      </template>
+      ```
+
+      ```app/components/banner.gjs
+      <template>
+        <div>
+          {{yield "Hello title" "hello subtitle" "body text"}}
+        </div>
+      </template>
       ```
 
       Result:
@@ -196,15 +248,19 @@ declare module '@ember/-internals/glimmer' {
 
       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/templates/application.gjs
+      import Banner from '../components/banner';
+
+      <template>
+        <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>
+      </template>
       ```
 
-      ```app/components/banner.js
+      ```app/components/banner.gjs
       import Title from './banner/title';
       import Subtitle from './banner/subtitle';
       import Body from './banner/body';
@@ -213,19 +269,19 @@ declare module '@ember/-internals/glimmer' {
         Title = Title;
         Subtitle = Subtitle;
         Body = Body;
+        
+        <template>
+          <div>
+            {{yield (hash
+              Title=this.Title
+              Subtitle=this.Subtitle
+              Body=(component this.Body defaultArg="some value")
+            )}}
+          </div>
+        </template>
       }
       ```
 
-      ```app/components/banner.hbs
-      <div>
-        {{yield (hash
-          Title=this.Title
-          Subtitle=this.Subtitle
-          Body=(component this.Body defaultArg="some value")
-        )}}
-      </div>
-      ```
-
       Result:
 
       ```html
@@ -238,12 +294,16 @@ declare module '@ember/-internals/glimmer' {
 
       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>
+      ```app/templates/application.gjs
+      import Banner from '../components/banner';
+
+      <template>
+        <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>
+      </template>
       ```
 
       Result:
@@ -259,27 +319,33 @@ declare module '@ember/-internals/glimmer' {
       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/templates/application.gjs
+      import Banner from '../components/banner';
+
+      <template>
+        <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>
+      </template>
       ```
 
-      ```app/components/banner/subtitle.hbs
+      ```app/components/banner/subtitle.gjs
       {{!-- note the use of ..attributes --}}
       <h2 ...attributes>
         {{yield}}
       </h2>
       ```
 
-      ```app/components/banner/title.hbs
-      {{#if (eq @variant "loud")}}
+      ```app/components/banner/title.gjs
+      <template>
+        {{#if (eq @variant "loud")}}
           <h1 class="loud">{{yield}}</h1>
-      {{else}}
+        {{else}}
           <h1 class="quiet">{{yield}}</h1>
-      {{/if}}
+        {{/if}}
+      </template>
       ```
 
       Result:
@@ -304,36 +370,28 @@ declare module '@ember/-internals/glimmer' {
       This component is invoked with a block:
 
       ```handlebars
-      {{#my-component}}
+      <MyComponent>
         Hi Jen!
-      {{/my-component}}
+      </MyComponent>
       ```
 
       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}}
+      <MyComponent />
       ```
 
       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}}
+      ```app/components/my-component.gjs
+      <template>
+        {{#if (has-block)}}
+          Welcome {{yield}}, we are happy you're here!
+        {{else}}
+          Hey you! You're great!
+        {{/if}}
+      </template>
       ```
 
       @method has-block
@@ -346,26 +404,10 @@ declare module '@ember/-internals/glimmer' {
       `{{(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!
+      Hi Jen!
       </MyComponent>
       ```
 
@@ -373,21 +415,23 @@ declare module '@ember/-internals/glimmer' {
 
       ```handlebars
       <MyComponent>
-        Hi Jen!
+      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}}
+      ```app/components/my-component.gjs
+      <template>
+        {{#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}}
+      </template>
       ```
 
       @method has-block-params

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>
       ```

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}} />
+      ```app/templates/application.gjs
+      import Cost from '../components/cost';
+        
+      <template>
+        <Cost @cents={{230}} />
+      </template>
       ```
 
-      ```app/components/cost.hbs
-      <div>{{format-currency @cents currency="$"}}</div>
+      ```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:

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

@@ -15,7 +15,7 @@ declare module '@ember/-internals/glimmer/lib/helpers/array' {
        ```
         or
        ```handlebars
-       {{my-component people=(array
+       {{yield people=(array
          'Tom Dale'
          'Yehuda Katz'
          this.myOtherPerson)
@@ -29,6 +29,8 @@ declare module '@ember/-internals/glimmer/lib/helpers/array' {
        ```
 
        Where the 3rd item in the array is bound to updates of the `myOtherPerson` property.
+     
+       The `array` helper is built-in keyword and does not need to be imported as of v7.1.0.
 
        @method array
        @for @ember/helper