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

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

@@ -17,26 +17,34 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
       using the block form to wrap the section of template you want to conditionally render.
       Like so:
 
-      ```app/templates/application.hbs
-      <Weather />
+      ```app/templates/application.gjs
+      import Weather from '../components/weather';
+        
+      <template>
+        <Weather />
+      </template>
       ```
 
-      ```app/components/weather.hbs
-      {{! will not render because greeting is undefined}}
-      {{#if @isRaining}}
-        Yes, grab an umbrella!
-      {{/if}}
+      ```app/components/weather.gjs
+      <template>
+        {{! will not render because greeting is undefined}}
+        {{#if @isRaining}}
+          Yes, grab an umbrella!
+        {{/if}}
+      </template>
       ```
 
       You can also define what to show if the property is falsey by using
       the `else` helper.
 
-      ```app/components/weather.hbs
-      {{#if @isRaining}}
-        Yes, grab an umbrella!
-      {{else}}
-        No, it's lovely outside!
-      {{/if}}
+      ```app/components/weather.gjs
+      <template>
+        {{#if @isRaining}}
+          Yes, grab an umbrella!
+        {{else}}
+          No, it's lovely outside!
+        {{/if}}
+      </template>
       ```
 
       You are also able to combine `else` and `if` helpers to create more complex
@@ -44,20 +52,26 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
 
       For the following template:
 
-       ```app/components/weather.hbs
-      {{#if @isRaining}}
-        Yes, grab an umbrella!
-      {{else if @isCold}}
-        Grab a coat, it's chilly!
-      {{else}}
-        No, it's lovely outside!
-      {{/if}}
+       ```app/components/weather.gjs
+      <template>
+        {{#if @isRaining}}
+          Yes, grab an umbrella!
+        {{else if @isCold}}
+          Grab a coat, it's chilly!
+        {{else}}
+          No, it's lovely outside!
+        {{/if}}
+      </template>
       ```
 
       If you call it by saying `isCold` is true:
 
-      ```app/templates/application.hbs
-      <Weather @isCold={{true}} />
+      ```app/templates/application.gjs
+      import Weather from '../components/weather';
+        
+      <template>
+        <Weather @isCold={{true}} />
+      </template>
       ```
 
       Then `Grab a coat, it's chilly!` will be rendered.
@@ -71,12 +85,18 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
 
       For example, if `useLongGreeting` is truthy, the following:
 
-      ```app/templates/application.hbs
-      <Greeting @useLongGreeting={{true}} />
+      ```app/templates/application.gjs
+      import Greeting from '../components/greeting';
+      
+      <template>
+        <Greeting @useLongGreeting={{true}} />
+      <template>
       ```
 
-      ```app/components/greeting.hbs
-      {{if @useLongGreeting "Hello" "Hi"}} Alex
+      ```app/components/greeting.gjs
+      <template>
+        {{if @useLongGreeting "Hello" "Hi"}} Alex
+      <template>
       ```
 
       Will render:
@@ -88,7 +108,9 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
       One detail to keep in mind is that both branches of the `if` helper will be evaluated,
       so if you have `{{if condition "foo" (expensive-operation "bar")`,
       `expensive-operation` will always calculate.
-
+     
+      `if` is built-in and does not need to be imported.
+     
       @method if
       @for Ember.Templates.helpers
       @public
@@ -107,12 +129,18 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
 
       For example, if you pass a falsey `useLongGreeting` to the `Greeting` component:
 
-      ```app/templates/application.hbs
-      <Greeting @useLongGreeting={{false}} />
+      ```app/templates/application.gjs
+      import Greeting from '../components/greeting';
+        
+      <template>
+        <Greeting @useLongGreeting={{false}} />
+      </template>
       ```
 
-      ```app/components/greeting.hbs
-      {{unless @useLongGreeting "Hi" "Hello"}} Ben
+      ```app/components/greeting.gjs
+      <template>
+        {{unless @useLongGreeting "Hi" "Hello"}} Ben
+      </template>
       ```
 
       Then it will display:
@@ -127,14 +155,20 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
 
       The following will not render anything:
 
-      ```app/templates/application.hbs
-      <Greeting />
+      ```app/templates/application.gjs
+      import Greeting from '../components/greeting';
+        
+      <template>
+        <Greeting />
+      </template>
       ```
 
-      ```app/components/greeting.hbs
-      {{#unless @greeting}}
-        No greeting was found. Why not set one?
-      {{/unless}}
+      ```app/components/greeting.gjs
+      <template>
+        {{#unless @greeting}}
+          No greeting was found. Why not set one?
+        {{/unless}}
+      </template>
       ```
 
       You can also use an `else` helper with the `unless` block. The
@@ -142,18 +176,24 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
 
       If you have the following component:
 
-      ```app/components/logged-in.hbs
-      {{#unless @userData}}
-        Please login.
-      {{else}}
-        Welcome back!
-      {{/unless}}
+      ```app/components/logged-in.gjs
+      <template>
+        {{#unless @userData}}
+          Please login.
+        {{else}}
+          Welcome back!
+        {{/unless}}
+      </template>
       ```
 
       Calling it with a truthy `userData`:
 
-      ```app/templates/application.hbs
-      <LoggedIn @userData={{hash username="Zoey"}} />
+      ```app/templates/application.gjs
+      import LoggedIn from '../components/logged-in';
+        
+      <template>
+        <LoggedIn @userData={{hash username="Zoey"}} />
+      </template>
       ```
 
       Will render:
@@ -164,8 +204,12 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
 
       and calling it with a falsey `userData`:
 
-      ```app/templates/application.hbs
-      <LoggedIn @userData={{false}} />
+      ```app/templates/application.gjs
+      import LoggedIn from '../components/logged-in';
+
+      <template>
+        <LoggedIn @userData={{false}} />
+      </template>
       ```
 
       Will render:
@@ -173,7 +217,9 @@ declare module '@ember/-internals/glimmer/lib/helpers/if-unless' {
       ```html
       Please login.
       ```
-
+     
+      `unless` is built-in and does not need to be imported.
+     
       @method unless
       @for Ember.Templates.helpers
       @public

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

@@ -1,72 +1,41 @@
 declare module '@ember/-internals/glimmer/lib/helpers/mut' {
     /**
-      The `mut` helper lets you __clearly specify__ that a child `Component` can update the
-      (mutable) value passed to it, which will __change the value of the parent component__.
+      The `mut` helper is a shortcut for updating for args.
+        
+      However, defining update functions on your backing class is preferable to using `mut`.
+        
+      More directly: Don't use `mut`.
 
-      To specify that a parameter is mutable, when invoking the child `Component`:
-
-      ```handlebars
-      <MyChild @childClickCount={{fn (mut totalClicks)}} />
-      ```
-
-       or
-
-      ```handlebars
-      {{my-child childClickCount=(mut totalClicks)}}
-      ```
-
-      The child `Component` can then modify the parent's value just by modifying its own
-      property:
-
-      ```javascript
-      // my-child.js
-      export default class MyChild extends Component {
-        click() {
-          this.incrementProperty('childClickCount');
-        }
-      }
-      ```
-
-      Note that for curly components (`{{my-component}}`) the bindings are already mutable,
-      making the `mut` unnecessary.
-
-      Additionally, the `mut` helper can be combined with the `fn` helper to
-      mutate a value. For example:
-
-      ```handlebars
-      <MyChild @childClickCount={{this.totalClicks}} @click-count-change={{fn (mut totalClicks))}} />
-      ```
-
-      or
+      The `mut` helper, when used with `fn`, will return a function that
+      sets the value passed to `mut` to its first argument. As an example, we can create a
+      button that increments a value passing the value directly to the `fn`:
 
       ```handlebars
-      {{my-child childClickCount=totalClicks click-count-change=(fn (mut totalClicks))}}
+      <MyChild @childClickCount={{this.totalClicks}} @clickCountChange={{fn (mut this.totalClicks)}} />
       ```
 
-      The child `Component` would invoke the function with the new click value:
+      The child `Component` would invoke the function with the new click count:
 
-      ```javascript
-      // my-child.js
+      ```app/components/my-child.gjs
+      import Component from '@glimmer/component';
+      import { action } from '@ember/object';
+        
       export default class MyChild extends Component {
-        click() {
-          this.get('click-count-change')(this.get('childClickCount') + 1);
+        @action
+        update() {
+          this.args.clickCountChange(this.args.childClickCount + 1);
         }
+        
+        <template>
+          <button {{on "click" this.update}}>
+            Click me!
+          </button>
+        </template>
       }
       ```
 
       The `mut` helper changes the `totalClicks` value to what was provided as the `fn` argument.
 
-      The `mut` helper, when used with `fn`, will return a function that
-      sets the value passed to `mut` to its first argument. As an example, we can create a
-      button that increments a value passing the value directly to the `fn`:
-
-      ```handlebars
-      {{! inc helper is not provided by Ember }}
-      <button onclick={{fn (mut count) (inc count)}}>
-        Increment count
-      </button>
-      ```
-
       @method mut
       @param {Object} [attr] the "two-way" attribute that can be modified.
       @for Ember.Templates.helpers

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

@@ -7,8 +7,12 @@ declare module '@ember/-internals/glimmer/lib/helpers/page-title' {
       append additional titles for each route. For complete documentation, see
       https://github.com/ember-cli/ember-page-title.
 
-      ```handlebars
-      {{page-title "My Page Title" }}
+      ```gjs
+      import pageTitle from 'ember-page-title/helpers/page-title';
+      
+      <template>
+        {{pageTitle "My Page Title" }}
+      </template>
       ```
 
       @method page-title

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

@@ -2,6 +2,10 @@ declare module '@ember/-internals/glimmer/lib/helpers/readonly' {
     /**
       The `readonly` helper let's you specify that a binding is one-way only,
       instead of two-way.
+      
+      This is a vestigial helper from the days of `@ember/component` and does not apply to
+      components extending from `@glimmer/component`.
+        
       When you pass a `readonly` binding from an outer context (e.g. parent component),
       to to an inner context (e.g. child component), you are saying that changing that
       property in the inner context does not change the value in the outer context.
@@ -14,14 +18,6 @@ declare module '@ember/-internals/glimmer/lib/helpers/readonly' {
       }
       ```
 
-      ```app/templates/components/my-parent.hbs
-      {{log totalClicks}} // -> 3
-      <MyChild @childClickCount={{readonly totalClicks}} />
-      ```
-      ```
-      {{my-child childClickCount=(readonly totalClicks)}}
-      ```
-
       Now, when you update `childClickCount`:
 
       ```app/components/my-child.js

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

@@ -10,20 +10,20 @@ declare module '@ember/-internals/glimmer/lib/modifiers/on' {
       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.hbs
-      <button {{on 'click' this.saveLike}}>Like this post!</button>
-      ```
-
-      ```app/components/like-post.js
+      ```app/components/like-post.gjs
       import Component from '@glimmer/component';
       import { action } from '@ember/object';
 
-      export default class LikePostComponent extends Component {
+      export default class LikePost extends Component {
         @action
         saveLike() {
           // someone likes your post!
           // better send a request off to your server...
         }
+        
+        <template>
+          <button {{on 'click' this.saveLike}}>Like this post!</button>
+        </template>
       }
       ```
 
@@ -58,7 +58,7 @@ declare module '@ember/-internals/glimmer/lib/modifiers/on' {
       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>
       ```
 
@@ -68,13 +68,13 @@ declare module '@ember/-internals/glimmer/lib/modifiers/on' {
       ### Function Context
 
       In the example above, we used `@action` to ensure that `likePost` is
-      properly bound to the `items-list`, but let's explore what happens if we
+      properly bound to the `LikePost` Component, but let's explore what happens if we
       left out `@action`:
 
-      ```app/components/like-post.js
+      ```app/components/like-post.gjs
       import Component from '@glimmer/component';
 
-      export default class LikePostComponent extends Component {
+      export default class LikePost extends Component {
         saveLike() {
           // ...snip...
         }

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

@@ -1,19 +1,19 @@
 declare module '@ember/-internals/glimmer/lib/renderer' {
     import type { InternalOwner } from "@ember/-internals/owner";
-    import type { Bounds, Cursor, DebugRenderTree, Environment, DynamicScope as GlimmerDynamicScope, RenderResult as GlimmerRenderResult, Template, TemplateFactory, EvaluationContext, TreeBuilder, ClassicResolver } from "@glimmer/interfaces";
+    import type { Bounds, DynamicScope as GlimmerDynamicScope, TemplateFactory, EvaluationContext } from "@glimmer/interfaces";
     import type { Nullable } from "@ember/-internals/utility-types";
     import type { Reference } from "@glimmer/reference/lib/reference";
     import type { CurriedValue } from "@glimmer/runtime/lib/curried-value";
     import { clientBuilder } from "@glimmer/runtime/lib/vm/element-builder";
     import type { SimpleDocument, SimpleElement, SimpleNode } from "@simple-dom/interface";
-    import RSVP from "rsvp";
-    import type Component from "@ember/-internals/glimmer/lib/component";
     import type ClassicComponent from "@ember/-internals/glimmer/lib/component";
     import { BOUNDS } from "@ember/-internals/glimmer/lib/component-managers/curly";
-    import ResolverImpl from "@ember/-internals/glimmer/lib/resolver";
+    import RouterResolver from "@ember/-internals/glimmer/lib/router-resolver";
     import type { OutletState } from "@ember/-internals/glimmer/lib/utils/outlet";
     import OutletView from "@ember/-internals/glimmer/lib/views/outlet";
-    export type IBuilder = (env: Environment, cursor: Cursor) => TreeBuilder;
+    import type { RendererRoot } from "@ember/-internals/glimmer/lib/base-renderer";
+    import { BaseRenderer } from "@ember/-internals/glimmer/lib/base-renderer";
+    export { type IBuilder, type RendererRoot, type RenderResult, BaseRenderer, ComponentRootState, errorLoopTransaction, renderComponent, renderSettled, _resetRenderers, } from "@ember/-internals/glimmer/lib/base-renderer";
     export interface View {
         parentView: Nullable<View>;
         renderer: Renderer;
@@ -31,157 +31,10 @@ declare module '@ember/-internals/glimmer/lib/renderer' {
         get(key: "outletState"): Reference<OutletState | undefined>;
         set(key: "outletState", value: Reference<OutletState | undefined>): Reference<OutletState | undefined>;
     }
-    type RootState = ClassicRootState | ComponentRootState;
-    class ComponentRootState {
-        #private;
-        readonly type = "component";
-        constructor(state: RendererState, definition: object, options: {
-            into: Cursor;
-            args?: Record<string, unknown>;
-        });
-        isFor(_component: ClassicComponent): boolean;
-        render(): void;
-        destroy(): void;
-        get destroyed(): boolean;
-        get result(): GlimmerRenderResult | undefined;
-    }
-    class ClassicRootState {
-        root: Component | OutletView;
-        readonly type = "classic";
-        id: string;
-        result: GlimmerRenderResult | undefined;
-        destroyed: boolean;
-        render: () => void;
-        readonly env: Environment;
-        constructor(root: Component | OutletView, context: EvaluationContext, owner: object, template: Template, self: Reference<unknown>, parentElement: SimpleElement, dynamicScope: DynamicScope, builder: IBuilder);
-        isFor(possibleRoot: unknown): boolean;
-        destroy(): void;
-    }
-    export function _resetRenderers(): void;
-    export function renderSettled(): RSVP.Promise<void>;
     interface ViewRegistry {
         [viewId: string]: unknown;
     }
-    type Resolver = ClassicResolver;
-    interface RendererData {
-        owner: object;
-        context: EvaluationContext;
-        builder: IBuilder;
-    }
-    class RendererState {
-        #private;
-        static create(data: RendererData, renderer: BaseRenderer): RendererState;
-        private constructor();
-        get debug(): {
-            roots: RootState[];
-            inRenderTransaction: boolean;
-            isInteractive: boolean;
-        };
-        get roots(): RootState[];
-        get owner(): object;
-        get builder(): IBuilder;
-        get context(): EvaluationContext;
-        get env(): Environment;
-        get isInteractive(): boolean;
-        renderRoot(root: RootState, renderer: BaseRenderer): RootState;
-        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;
-    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>;
-        }): RootState;
-        rerender(): void;
-    }
     export class Renderer extends BaseRenderer {
-        static strict(owner: object, document: SimpleDocument | Document, options: {
-            isInteractive: boolean;
-            hasDOM?: boolean;
-        }): BaseRenderer;
         private _rootTemplate;
         private _viewRegistry;
         static create(props: {
@@ -190,13 +43,13 @@ declare module '@ember/-internals/glimmer/lib/renderer' {
         constructor(owner: InternalOwner, document: SimpleDocument, env: {
             isInteractive: boolean;
             hasDOM: boolean;
-        }, rootTemplate: TemplateFactory, viewRegistry: ViewRegistry, builder?: typeof clientBuilder, resolver?: ResolverImpl);
+        }, rootTemplate: TemplateFactory, viewRegistry: ViewRegistry, builder?: typeof clientBuilder, resolver?: RouterResolver);
         appendOutletView(view: OutletView, target: SimpleElement): void;
         appendTo(view: ClassicComponent, target: SimpleElement): void;
         _appendDefinition(root: OutletView | ClassicComponent, definition: CurriedValue, target: SimpleElement): void;
         cleanupRootFor(component: ClassicComponent): void;
         remove(view: ClassicComponent): void;
-        get _roots(): RootState[];
+        get _roots(): RendererRoot[];
         get _inRenderTransaction(): boolean;
         get _isInteractive(): boolean;
         get _context(): EvaluationContext;
@@ -209,5 +62,4 @@ declare module '@ember/-internals/glimmer/lib/renderer' {
             lastNode: SimpleNode;
         };
     }
-    export {};
 }

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

@@ -0,0 +1,17 @@
+declare module '@ember/-internals/glimmer/lib/router-resolver' {
+    import type { HelperDefinitionState } from "@glimmer/interfaces";
+    import type { InternalOwner } from "@ember/-internals/owner";
+    import type { Nullable } from "@ember/-internals/utility-types";
+    import ResolverImpl from "@ember/-internals/glimmer/lib/resolver";
+    /**
+     * The resolver used by the classic application `Renderer`. It extends the
+     * shared `ResolverImpl` with the keywords that require the router and engine
+     * infrastructure (`{{outlet}}` and `{{mount}}`). Keeping these out of the
+     * base resolver means renderers that have no router (e.g. `renderComponent`)
+     * do not pull the outlet/engine machinery into the build.
+     */
+    export default class RouterResolver extends ResolverImpl {
+        lookupBuiltInHelper(name: string): Nullable<HelperDefinitionState>;
+        lookupHelper(name: string, owner: InternalOwner): Nullable<HelperDefinitionState>;
+    }
+}

package/types/stable/@ember/-internals/glimmer/lib/syntax/in-element.d.ts

@@ -39,6 +39,8 @@ declare module '@ember/-internals/glimmer/lib/syntax/in-element' {
          {{/in-element}}
          ```
 
+     `in-element` is built-in and does not need to be imported.
+     
      @method in-element
      @for Ember.Templates.helpers
      @public

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

@@ -32,21 +32,9 @@ declare module '@ember/-internals/glimmer/lib/syntax/let' {
           <MyPost @title={{title}} @content={{content}} @options={{options}} />
         {{/let}}
       ```
-     or
-      ```handlebars
-        {{#let
-            (concat post.title ' | The Ember.js Blog')
-            post.content
-            (hash
-              theme="high-contrast"
-              enableComments=true
-            )
-            as |title content options|
-        }}
-          {{my-post title=title content=content options=options}}
-        {{/let}}
-      ```
 
+     `let` is built-in and does not need to be imported.
+     
       @method let
       @for Ember.Templates.helpers
       @public