ember-source 7.1.0-alpha.5 → 7.1.0

package/lib/index.js

@@ -47,7 +47,6 @@ const shim = addonV1Shim(path.join(__dirname, '..'), {
           './dist/dev/packages/@ember/-internals/utils/index.js',
           './dist/dev/packages/@ember/-internals/views/index.js',
           './dist/dev/packages/@ember/-internals/views/lib/compat/attrs.js',
-          './dist/dev/packages/@ember/-internals/views/lib/component_lookup.js',
           './dist/dev/packages/@ember/-internals/views/lib/mixins/action_support.js',
           './dist/dev/packages/@ember/-internals/views/lib/system/utils.js',
           './dist/dev/packages/@ember/-internals/views/lib/views/core_view.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-source",
-  "version": "7.1.0-alpha.5",
+  "version": "7.1.0",
   "description": "A JavaScript framework for creating ambitious web applications",
   "keywords": [
     "ember-addon"
@@ -53,6 +53,7 @@
     "test": "testem ci -f testem.js --host 127.0.0.1 --port 13141",
     "test:blueprints": "mocha node-tests/blueprints/**/*-test.js",
     "test:node": "qunit tests/node/**/*-test.js",
+    "test:node:vitest": "pnpm --filter ember-test-node-vitest test:node",
     "test:browserstack": "node bin/run-browserstack-tests.js",
     "test:wip": "vite build --mode development --minify false && testem ci",
     "type-check:internals": "tsc --noEmit",
@@ -98,23 +99,24 @@
     "@tsconfig/ember": "3.0.8",
     "@types/qunit": "^2.19.4",
     "@types/rsvp": "^4.0.4",
+    "@typescript-eslint/typescript-estree": "^8.59.2",
     "ast-types": "^0.14.2",
     "auto-dist-tag": "^2.1.1",
-    "babel-plugin-debug-macros": "1.0.0",
+    "babel-plugin-debug-macros": "1.0.2",
     "babel-plugin-ember-template-compilation": "^4.0.0",
     "dag-map": "^2.0.2",
-    "decorator-transforms": "2.0.0",
+    "decorator-transforms": "2.3.2",
     "ember-cli": "^6.11.1",
     "ember-cli-blueprint-test-helpers": "^0.19.2",
-    "ember-cli-browserstack": "^2.0.1",
+    "ember-cli-browserstack": "^4.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-yuidoc": "^0.9.1",
     "eslint": "^9.21.0",
-    "eslint-import-resolver-node": "^0.3.7",
+    "eslint-import-resolver-node": "^0.3.10",
     "eslint-plugin-disable-features": "^0.1.3",
     "eslint-plugin-ember-internal": "^3.0.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^17.16.2",
+    "eslint-plugin-n": "^18.0.1",
     "eslint-plugin-qunit": "^8.1.2",
     "execa": "^9.0.0",
     "expect-type": "^0.15.0",
@@ -138,7 +140,7 @@
     "testem-failure-only-reporter": "^1.0.0",
     "tracerbench": "^8.0.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.26.0",
+    "typescript-eslint": "^8.59.2",
     "vite": "^7.0.0"
   },
   "resolutions": {
@@ -157,7 +159,8 @@
       "esbuild"
     ],
     "patchedDependencies": {
-      "@tracerbench/core@8.0.1": "patches/@tracerbench__core@8.0.1.patch"
+      "@tracerbench/core@8.0.1": "patches/@tracerbench__core@8.0.1.patch",
+      "agadoo": "patches/agadoo.patch"
     }
   },
   "peerDependencies": {
@@ -196,7 +199,6 @@
       "@ember/-internals/views/index.js": "ember-source/@ember/-internals/views/index.js",
       "@ember/-internals/views/lib/compat/attrs.js": "ember-source/@ember/-internals/views/lib/compat/attrs.js",
       "@ember/-internals/views/lib/compat/fallback-view-registry.js": "ember-source/@ember/-internals/views/lib/compat/fallback-view-registry.js",
-      "@ember/-internals/views/lib/component_lookup.js": "ember-source/@ember/-internals/views/lib/component_lookup.js",
       "@ember/-internals/views/lib/mixins/action_support.js": "ember-source/@ember/-internals/views/lib/mixins/action_support.js",
       "@ember/-internals/views/lib/system/event_dispatcher.js": "ember-source/@ember/-internals/views/lib/system/event_dispatcher.js",
       "@ember/-internals/views/lib/system/utils.js": "ember-source/@ember/-internals/views/lib/system/utils.js",
@@ -360,10 +362,7 @@
       ]
     }
   },
-  "packageManager": "pnpm@10.30.3",
-  "_originalVersion": "7.1.0-alpha.1",
-  "_versionPreviouslyCalculated": true,
-  "publishConfig": {
-    "tag": "alpha"
-  }
+  "packageManager": "pnpm@10.33.2",
+  "_originalVersion": "7.1.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
@@ -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.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