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

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "ember-source",
-  "version": "7.2.0-alpha.4",
+  "version": "7.3.0-alpha.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",
@@ -91,7 +92,7 @@
     "@embroider/vite": "^1.7.2",
     "@eslint/js": "^9.21.0",
     "@glimmer/component": "workspace:*",
-    "@octokit/rest": "^20.1.2",
+    "@octokit/rest": "^22.0.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@simple-dom/document": "^1.4.0",
     "@swc-node/register": "^1.6.8",
@@ -122,8 +123,8 @@
     "expect-type": "^0.15.0",
     "fs-extra": "^11.1.1",
     "git-repo-info": "^2.1.1",
-    "glob": "^8.0.3",
-    "globals": "^16.0.0",
+    "glob": "^13.0.0",
+    "globals": "^17.0.0",
     "kill-port-process": "^3.2.1",
     "mitata": "^1.0.34",
     "mocha": "^11.0.0",
@@ -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,7 +367,7 @@
     }
   },
   "packageManager": "pnpm@10.33.2",
-  "_originalVersion": "7.2.0-alpha.1",
+  "_originalVersion": "7.3.0-alpha.1",
   "_versionPreviouslyCalculated": true,
   "publishConfig": {
     "tag": "alpha"

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

@@ -21,6 +21,12 @@ declare module '@ember/-internals/deprecations' {
             isEnabled: boolean;
             isRemoved: boolean;
         };
+        DEPRECATE_COMPARABLE_MIXIN: {
+            options: DeprecationOptions;
+            test: boolean;
+            isEnabled: boolean;
+            isRemoved: boolean;
+        };
     };
     export function deprecateUntil(message: string, deprecation: DeprecationObject): void;
     export {};

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/base-renderer.d.ts

@@ -0,0 +1,150 @@
+declare module '@ember/-internals/glimmer/lib/base-renderer' {
+    import type { Cursor, DebugRenderTree, Environment, RenderResult as GlimmerRenderResult, EvaluationContext, TreeBuilder, ClassicResolver } from "@glimmer/interfaces";
+    import type { SimpleDocument, SimpleElement } from "@simple-dom/interface";
+    export type IBuilder = (env: Environment, cursor: Cursor) => TreeBuilder;
+    export function errorLoopTransaction(fn: () => void): () => void;
+    /**
+     * The interface the `RendererState` needs from a render root. The base
+     * renderer only ever creates `ComponentRootState`s; the classic renderer
+     * (`./renderer`) adds `ClassicRootState` for outlet/classic-component roots.
+     */
+    export interface RendererRoot {
+        readonly type: string;
+        readonly result: GlimmerRenderResult | undefined;
+        readonly destroyed: boolean;
+        render(): void;
+        destroy(): void;
+        isFor(possibleRoot: unknown): boolean;
+    }
+    export class ComponentRootState implements RendererRoot {
+        #private;
+        readonly type = "component";
+        constructor(state: RendererState, definition: object, options: {
+            into: Cursor;
+            args?: Record<string, unknown>;
+        });
+        isFor(_possibleRoot: unknown): boolean;
+        render(): void;
+        destroy(): void;
+        get destroyed(): boolean;
+        get result(): GlimmerRenderResult | undefined;
+    }
+    export function _resetRenderers(): void;
+    export function renderSettled(): Promise<void>;
+    type Resolver = ClassicResolver;
+    interface RendererData {
+        owner: object;
+        context: EvaluationContext;
+        builder: IBuilder;
+    }
+    export class RendererState {
+        #private;
+        static create(data: RendererData, renderer: BaseRenderer): RendererState;
+        private constructor();
+        get debug(): {
+            roots: RendererRoot[];
+            inRenderTransaction: boolean;
+            isInteractive: boolean;
+        };
+        get roots(): RendererRoot[];
+        get owner(): object;
+        get builder(): IBuilder;
+        get context(): EvaluationContext;
+        get env(): Environment;
+        get isInteractive(): boolean;
+        renderRoot(root: RendererRoot, renderer: BaseRenderer): RendererRoot;
+        renderRoots(renderer: BaseRenderer): void;
+        scheduleRevalidate(renderer: BaseRenderer): void;
+        isValid(): boolean;
+        revalidate(renderer: BaseRenderer): void;
+        clearAllRoots(renderer: BaseRenderer): void;
+    }
+    type IntoTarget = Cursor | Element | SimpleElement;
+    /**
+     * The returned object from `renderComponent`
+     * @public
+     * @module @ember/renderer
+     */
+    export interface RenderResult {
+        /**
+         * Destroys the render tree and removes all rendered content from the element rendered into
+         */
+        destroy(): void;
+    }
+    /**
+     * Render a component into a DOM element.
+     *
+     * @method renderComponent
+     * @static
+     * @for @ember/renderer
+     * @param {Object} component The component to render.
+     * @param {Object} options
+     * @param {Element} options.into Where to render the component in to.
+     * @param {Object} [options.owner] Optionally specify the owner to use. This will be used for injections, and overall cleanup.
+     * @param {Object} [options.env] Optional renderer configuration
+     * @param {Object} [options.args] Optionally pass args in to the component. These may be reactive as long as it is an object or object-like
+     * @public
+     */
+    export function renderComponent(
+        /**
+         * The component definition to render.
+         *
+         * Any component that has had its manager registered is valid.
+         * For the component-types that ship with ember, manager registration
+         * does not need to be worried about.
+         */
+        component: object,
+        { owner, env, into, args, }: {
+            /**
+             * The element to render the component in to.
+             */
+            into: IntoTarget;
+            /**
+             * Optional owner. Defaults to `{}`, can be any object, but will need to implement the [Owner](https://api.emberjs.com/ember/release/classes/Owner) API for components within this render tree to access services.
+             */
+            owner?: object;
+            /**
+             * Optionally configure the rendering environment
+             */
+            env?: {
+                /**
+                 * When false, modifiers will not run.
+                 */
+                isInteractive?: boolean;
+                /**
+                 * All other options are forwarded to the underlying renderer.
+                 * (its API is currently private and out of scope for this RFC,
+                 *  so passing additional things here is also considered private API)
+                 */
+                [rendererOption: string]: unknown;
+            };
+            /**
+             * These args get passed to the rendered component
+             *
+             * If your args are reactive, re-rendering will happen automatically.
+             *
+             */
+            args?: Record<string, unknown>;
+        }
+    ): RenderResult;
+    export class BaseRenderer {
+        static strict(owner: object, document: SimpleDocument | Document, options: {
+            isInteractive: boolean;
+            hasDOM?: boolean;
+        }): BaseRenderer;
+        readonly state: RendererState;
+        constructor(owner: object, envOptions: {
+            isInteractive: boolean;
+            hasDOM: boolean;
+        }, document: SimpleDocument, resolver: Resolver, builder: IBuilder);
+        get debugRenderTree(): DebugRenderTree;
+        isValid(): boolean;
+        destroy(): void;
+        render(component: object, options: {
+            into: IntoTarget;
+            args?: Record<string, unknown>;
+        }): RendererRoot;
+        rerender(): void;
+    }
+    export {};
+}

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

@@ -0,0 +1,10 @@
+declare module '@ember/-internals/glimmer/lib/component-managers/curly-brand' {
+    /**
+     * The brand for the curly component manager lives in its own module so that
+     * code which only needs to *detect* the curly manager (e.g. the resolver)
+     * does not have to import the manager itself (and with it the classic
+     * component machinery).
+     */
+    export const CURLY_MANAGER_BRAND: unique symbol;
+    export function isCurlyManager(manager: object): boolean;
+}

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

@@ -7,6 +7,7 @@ declare module '@ember/-internals/glimmer/lib/component-managers/curly' {
     import type { DynamicScope } from "@ember/-internals/glimmer/lib/renderer";
     import type RuntimeResolver from "@ember/-internals/glimmer/lib/resolver";
     import ComponentStateBucket from "@ember/-internals/glimmer/lib/utils/curly-component-state-bucket";
+    import { CURLY_MANAGER_BRAND } from "@ember/-internals/glimmer/lib/component-managers/curly-brand";
     export function getComponentCapturedArgs(component: object): CapturedArguments["named"] | undefined;
     export const DIRTY_TAG: unique symbol;
     export const IS_DISPATCHING_ATTRS: unique symbol;
@@ -20,6 +21,7 @@ declare module '@ember/-internals/glimmer/lib/component-managers/curly' {
         positionalParams: string | string[] | undefined | null;
     };
     export default class CurlyComponentManager implements WithCreateInstance<ComponentStateBucket>, WithDynamicLayout<ComponentStateBucket, RuntimeResolver>, WithDynamicTagName<ComponentStateBucket> {
+        readonly [CURLY_MANAGER_BRAND] = true;
         protected templateFor(component: Component): CompilableProgram | null;
         getDynamicLayout(bucket: ComponentStateBucket): CompilableProgram | null;
         getTagName(state: ComponentStateBucket): Nullable<string>;
@@ -39,6 +41,5 @@ declare module '@ember/-internals/glimmer/lib/component-managers/curly' {
     export function processComponentInitializationAssertions(component: Component, props: any): void;
     export function initialRenderInstrumentDetails(component: any): any;
     export const CURLY_COMPONENT_MANAGER: CurlyComponentManager;
-    export function isCurlyManager(manager: object): boolean;
-    export {};
+    export { isCurlyManager } from "@ember/-internals/glimmer/lib/component-managers/curly-brand";
 }

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";