ember-source 7.1.0-beta.1 → 7.1.0

package/dist/prod/packages/shared-chunks/{index-qDFz6Mfe.js → index-ClxHbCe9.js}

@@ -36,11 +36,11 @@ import { i as isHTMLSafe } from './index-D-xTBV4B.js';
 import { isArray } from '../@ember/array/index.js';
 import { g as getComponentTemplate } from './template-Dc_cBOoX.js';
 import { c as hasInternalComponentManager, j as setInternalHelperManager, g as getInternalComponentManager } from './api-zh_k31vb.js';
-import { h as hash, f as fn, a as array } from './hash-mcs3pEFO.js';
-import { g as get$1, c as concat } from './get-t0-itmA-.js';
-import { o as on } from './on-B5NVufs_.js';
+import { h as hash, f as fn, a as array } from './hash-Dkj3I4L4.js';
+import { g as get$1, c as concat } from './get-Dt5L0TcU.js';
+import { o as on } from './on-CWgOWNSL.js';
 import { T as TEMPLATE_ONLY_COMPONENT_MANAGER, t as templateOnlyComponent } from './template-only-BtLl0uH0.js';
-import { i as isClassicHelper, C as CLASSIC_HELPER_MANAGER } from './helper-DLjV2ZZW.js';
+import { i as isClassicHelper, C as CLASSIC_HELPER_MANAGER } from './helper-CN6UzshW.js';
 import { dasherize } from '../@ember/-internals/string/index.js';
 import { a as uniqueId } from './unique-id-CfHImDRV.js';
 import '../route-recognizer/index.js';
@@ -239,7 +239,7 @@ class RootComponentDefinition {
 */
 
 /**
-  The `{{#each}}` helper loops over elements in a collection. It is an extension
+  The `{{#each}}` keyword loops over elements in a collection. It is an extension
   of the base Handlebars `{{#each}}` helper.
 
   The default behavior of `{{#each}}` is to yield its inner block once for every
@@ -283,6 +283,8 @@ class RootComponentDefinition {
     {{/each}}
   </ul>
   ```
+    
+  `#each` is a keyword and does not need to be imported. 
 
   ### Specifying Keys
 
@@ -350,11 +352,11 @@ class RootComponentDefinition {
  */
 
 /**
-  The `{{each-in}}` helper loops over properties on an object.
+  The `{{#each-in}}` keyword loops over properties on an object.
 
   For example, given this component definition:
 
-  ```app/components/developer-details.js
+  ```app/components/developer-details.gjs
   import Component from '@glimmer/component';
   import { tracked } from '@glimmer/tracking';
 
@@ -363,21 +365,19 @@ class RootComponentDefinition {
       "name": "Shelly Sails",
       "age": 42
     };
+    
+    <template>
+      <ul>
+        {{#each-in this.developer as |key value|}}
+          <li>{{key}}: {{value}}</li>
+        {{/each-in}}
+      </ul>
+    </template>
   }
   ```
 
   This template would display all properties on the `developer`
-  object in a list:
-
-  ```app/components/developer-details.hbs
-  <ul>
-    {{#each-in this.developer as |key value|}}
-      <li>{{key}}: {{value}}</li>
-    {{/each-in}}
-  </ul>
-  ```
-
-  Outputting their name and age:
+  object in a list, outputting their name and age:
 
   ```html
   <ul>
@@ -385,6 +385,8 @@ class RootComponentDefinition {
     <li>age: 42</li>
   </ul>
   ```
+ 
+  `#each-in` is a keyword and does not need to be imported.
 
   @method each-in
   @for Ember.Templates.helpers
@@ -776,73 +778,42 @@ const trackArray = internalHelper(({
 */
 
 /**
-  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__.
-
-  To specify that a parameter is mutable, when invoking the child `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`. 
 
-  ```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
@@ -864,6 +835,10 @@ const mut = internalHelper(({
 /**
   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.
@@ -876,14 +851,6 @@ const mut = internalHelper(({
   }
   ```
 
-  ```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
@@ -1160,15 +1127,14 @@ class MountDefinition {
 
   For example, the following template mounts the `ember-chat` engine:
 
-  ```handlebars
-  {{! application.hbs }}
+  ```app/templates/application.gjs
   {{mount "ember-chat"}}
   ```
 
   Additionally, you can also pass in a `model` argument that will be
   set as the engines model. This can be an existing object:
 
-  ```
+  ```hbs
   <div>
     {{mount 'admin' model=userSettings}}
   </div>
@@ -1176,15 +1142,20 @@ class MountDefinition {
 
   Or an inline `hash`, and you can even pass components:
 
+  ```gjs
+  import SignInButton from '../components/sign-in-button';
+  <template>
+    <div>
+      <h1>Application template!</h1>
+      {{mount 'admin' model=(hash
+          title='Secret Admin'
+          signInButton=SignInButton
+      )}}
+    </div>
+  </template>
   ```
-  <div>
-    <h1>Application template!</h1>
-    {{mount 'admin' model=(hash
-        title='Secret Admin'
-        signInButton=(component 'sign-in-button')
-    )}}
-  </div>
-  ```
+ 
+ `mount` is built-in and does not need to be imported.
 
   @method mount
   @param {String} name Name of the engine to mount.
@@ -1316,23 +1287,30 @@ function makeRouteTemplate(owner, name, template) {
 /**
   The `{{outlet}}` helper lets you specify where a child route will render in
   your template. An important use of the `{{outlet}}` helper is in your
-  application's `application.hbs` file:
-
-  ```app/templates/application.hbs
-  <MyHeader />
-
-  <div class="my-dynamic-content">
-    <!-- this content will change based on the current route, which depends on the current URL -->
-    {{outlet}}
-  </div>
-
-  <MyFooter />
+  application's `application.gjs` file:
+
+  ```app/templates/application.gjs
+  import MyHeader from '../components/my-header';
+  import MyFooter from '../components/my-footer';
+    
+  <template>
+    <MyHeader />
+  
+    <div class="my-dynamic-content">
+      <!-- this content will change based on the current route, which depends on the current URL -->
+      {{outlet}}
+    </div>
+  
+    <MyFooter />
+  </template>
   ```
 
   See the [routing guide](https://guides.emberjs.com/release/routing/rendering-a-template/) for more
   information on how your `route` interacts with the `{{outlet}}` helper.
   Note: Your content __will not render__ if there isn't an `{{outlet}}` for it.
 
+  `outlet` is built-in and does not need to be imported. 
+ 
   @method outlet
   @for Ember.Templates.helpers
   @public

package/dist/prod/packages/shared-chunks/{on-B5NVufs_.js → on-CWgOWNSL.js}

@@ -114,11 +114,7 @@ function addEventListener(element, eventName, callback, options) {
   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';
 
@@ -127,6 +123,10 @@ function addEventListener(element, eventName, callback, options) {
       // someone likes your post!
       // better send a request off to your server...
     }
+    
+    <template>
+      <button {{on 'click' this.saveLike}}>Like this post!</button>
+    </template>
   }
   ```
 
@@ -174,7 +174,7 @@ function addEventListener(element, eventName, callback, options) {
   properly bound to the `items-list`, but let's explore what happens if we
   left out the arrow function:
 
-  ```app/components/like-post.js
+  ```app/components/like-post.gjs
   import Component from '@glimmer/component';
 
   export default class LikePostComponent extends Component {

package/dist/prod/packages/shared-chunks/{or-3AxY5TPj.js → or-Crsa2wci.js}

@@ -1,6 +1,6 @@
 import { toBool } from '../@glimmer/global-context/index.js';
 import { a as createComputeRef, v as valueForRef } from './reference-BshxG6wn.js';
-import { i as internalHelper } from './hash-mcs3pEFO.js';
+import { i as internalHelper } from './hash-Dkj3I4L4.js';
 
 const and = internalHelper(({
   positional

package/dist/prod/packages/shared-chunks/{setup-registry-C2KfZJWI.js → setup-registry-B3DhqtxX.js}

@@ -1,12 +1,12 @@
 import { privatize } from '../@ember/-internals/container/index.js';
 import { getOwner } from '../@ember/-internals/owner/index.js';
-import { I as Input, T as Textarea } from './textarea-CHqL0Rdh.js';
+import { I as Input, T as Textarea } from './textarea-Byj32raR.js';
 import { LinkTo } from '../@ember/routing/index.js';
 import './render-DkJJmoI4.js';
 import { c as clientBuilder } from './element-builder-CnlTPNyw.js';
 import { r as rehydrationBuilder } from './rehydrate-builder-DJ8k-6fg.js';
 import { s as serializeBuilder } from './serialize-builder-R3Ozg0sC.js';
-import { o as outletHelper, O as OutletView, R as Renderer } from './index-qDFz6Mfe.js';
+import { o as outletHelper, O as OutletView, R as Renderer } from './index-ClxHbCe9.js';
 import { t as templateFactory } from './index-Bj71BDDA.js';
 
 const OutletTemplate = templateFactory(

package/dist/prod/packages/shared-chunks/{textarea-CHqL0Rdh.js → textarea-Byj32raR.js}

@@ -226,8 +226,12 @@ if (hasDOM) {
 /**
   The `Input` component lets you create an HTML `<input>` element.
 
-  ```handlebars
-  <Input @value="987" />
+  ```gjs
+  import { Input } from '@ember/component';
+    
+  <template>
+    <Input @value="987" />
+  </template>
   ```
 
   creates an `<input>` element with `type="text"` and value set to 987.