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

package/dist/dev/packages/shared-chunks/{get-D5b5QlqE.js → get-6I3sjd-I.js}

@@ -1,6 +1,6 @@
-import { a as createComputeRef, U as UNDEFINED_REFERENCE, v as valueForRef } from './reference-BoPB2LfI.js';
-import { f as reifyPositional } from './untouchable-this-B3DVwpHS.js';
-import { i as internalHelper } from './hash-BRRFQJ99.js';
+import { c as createComputeRef, U as UNDEFINED_REFERENCE, v as valueForRef } from './reference-BqOLhKFy.js';
+import { f as reifyPositional } from './arguments-CDkbOqTS.js';
+import { i as internalHelper } from './hash-6NDs_5_f.js';
 import { setPath, getPath } from '../@glimmer/global-context/index.js';
 import { i as isDict } from './collections-DPkjqeA3.js';
 
@@ -19,10 +19,15 @@ const normalizeTextValue = value => {
 
   Example:
 
-  ```handlebars
-  {{some-component name=(concat firstName " " lastName)}}
 
-  {{! would pass name="<first name value> <last name value>" to the component}}
+  ```gjs
+  import { concat } from '@ember/helper';
+
+  <template>
+  {{yield (concat firstName " " lastName)}}
+
+  {{! would yield name="<first name value> <last name value>" to the component}}
+  </template>
   ```
 
   or for angle bracket invocation, you actually don't need concat at all.
@@ -46,28 +51,31 @@ const concat = internalHelper(({
 
   For example, these two usages are equivalent:
 
-  ```app/components/developer-detail.js
+  ```app/components/developer-detail.gjs
   import Component from '@glimmer/component';
   import { tracked } from '@glimmer/tracking';
+  import { get } from '@ember/object';
 
   export default class extends Component {
     @tracked developer = {
       name: "Sandi Metz",
       language: "Ruby"
     }
+    
+    <template>
+      {{this.developer.name}}
+      {{get this.developer "name"}}
+    </template>
   }
   ```
 
-  ```handlebars
-  {{this.developer.name}}
-  {{get this.developer "name"}}
-  ```
-
   If there were several facts about a person, the `{{get}}` helper can dynamically
   pick one:
 
-  ```app/templates/application.hbs
-  <DeveloperDetail @factName="language" />
+  ```app/templates/application.gjs
+  <template>
+    <DeveloperDetail @factName="language" />
+  </template>
   ```
 
   ```handlebars
@@ -77,10 +85,11 @@ const concat = internalHelper(({
   For a more complex example, this template would allow the user to switch
   between showing the user's height and weight with a click:
 
-  ```app/components/developer-detail.js
+  ```app/components/developer-detail.gjs
   import Component from '@glimmer/component';
   import { tracked } from '@glimmer/tracking';
-
+  import { get } from '@ember/object';
+    
   export default class extends Component {
     @tracked developer = {
       name: "Sandi Metz",
@@ -92,28 +101,16 @@ const concat = internalHelper(({
     showFact = (fact) => {
       this.currentFact = fact;
     }
-  }
-  ```
-
-  ```app/components/developer-detail.js
-  {{get this.developer this.currentFact}}
-
-  <button {{on 'click' (fn this.showFact "name")}}>Show name</button>
-  <button {{on 'click' (fn this.showFact "language")}}>Show language</button>
-  ```
+    
+    <template>
+      {{get this.developer this.currentFact}}
 
-  The `{{get}}` helper can also respect mutable values itself. For example:
-
-  ```app/components/developer-detail.js
-  <Input @value={{mut (get this.person this.currentFact)}} />
-
-  <button {{on 'click' (fn this.showFact "name")}}>Show name</button>
-  <button {{on 'click' (fn this.showFact "language")}}>Show language</button>
+      <button {{on 'click' (fn this.showFact "name")}}>Show name</button>
+      <button {{on 'click' (fn this.showFact "language")}}>Show language</button>
+    </template>
+  }
   ```
 
-  Would allow the user to swap what fact is being displayed, and also edit
-  that fact via a two-way mutable binding.
-
   @public
   @method get
  */

package/dist/{prod/packages/shared-chunks/get_properties-Nn08mLAH.js → dev/packages/shared-chunks/get_properties-Cm2sWt5f.js}

@@ -1,4 +1,4 @@
-import { g as get } from './property_get-CAFdpRyu.js';
+import { g as get } from './property_get-CRP7MFz_.js';
 
 /**
  @module @ember/object

package/dist/dev/packages/shared-chunks/{hash-BRRFQJ99.js → hash-6NDs_5_f.js}

@@ -1,6 +1,6 @@
-import { a as createComputeRef, b as isInvokableRef, u as updateRef, v as valueForRef } from './reference-BoPB2LfI.js';
-import { f as reifyPositional, g as buildUntouchableThis, h as check, e as reifyNamed } from './untouchable-this-B3DVwpHS.js';
-import { j as setInternalHelperManager } from './api-BawZUDYD.js';
+import { c as createComputeRef, b as isInvokableRef, u as updateRef, v as valueForRef } from './reference-BqOLhKFy.js';
+import { f as reifyPositional, g as buildUntouchableThis, h as check, e as reifyNamed } from './arguments-CDkbOqTS.js';
+import { j as setInternalHelperManager } from './api-DuLOZMO_.js';
 
 function internalHelper(helper) {
   return setInternalHelperManager(helper, {});
@@ -19,7 +19,7 @@ function internalHelper(helper) {
    ```
     or
    ```handlebars
-   {{my-component people=(array
+   {{yield people=(array
      'Tom Dale'
      'Yehuda Katz'
      this.myOtherPerson)
@@ -58,13 +58,17 @@ const context = buildUntouchableThis('`fn` helper');
   to a component invoked within the loop. Here's how you could use the `fn`
   helper to pass both the function and its arguments together:
 
-    ```app/templates/components/items-listing.hbs
-  {{#each @items as |item|}}
-    <DisplayItem @item=item @select={{fn this.handleSelected item}} />
-  {{/each}}
+  ```app/components/items-listing.gjs
+  import DisplayItem from './display-item';
+    
+  <template>
+    {{#each @items as |item|}}
+      <DisplayItem @item=item @select={{fn this.handleSelected item}} />
+    {{/each}}
+  </template>
   ```
 
-  ```app/components/items-list.js
+  ```app/components/items-list.gjs
   import Component from '@glimmer/component';
   import { action } from '@ember/object';
 
@@ -75,7 +79,7 @@ const context = buildUntouchableThis('`fn` helper');
   }
   ```
 
-  In this case the `display-item` component will receive a normal function
+  In this case the `DisplayItem` component will receive a normal function
   that it can invoke. When it invokes the function, the `handleSelected`
   function will receive the `item` and any arguments passed, thanks to the
   `fn` helper.
@@ -92,7 +96,7 @@ const context = buildUntouchableThis('`fn` helper');
   `handleSelected` is properly bound to the `items-list`, but let's explore what
   happens if we left out the arrow function:
 
-  ```app/components/items-list.js
+  ```app/components/items-list.gjs
   import Component from '@glimmer/component';
 
   export default class ItemsList extends Component {
@@ -109,6 +113,8 @@ const context = buildUntouchableThis('`fn` helper');
 
   See also [partial application](https://en.wikipedia.org/wiki/Partial_application).
 
+  `fn` is built-in and does not require any additional imports.
+ 
   @method fn
   @public
 */
@@ -138,7 +144,7 @@ function assertCallbackIsFn(callbackRef) {
 
 /**
    Use the `{{hash}}` helper to create a hash to pass as an option to your
-   components. This is specially useful for contextual components where you can
+   components. This is especially useful for contextual components where you can
    just yield a hash:
 
    ```handlebars

package/dist/dev/packages/shared-chunks/{helper-Do7NCZHI.js → helper-DIj85_-f.js}

@@ -3,9 +3,9 @@ import { FrameworkObject } from '../@ember/object/-internals.js';
 import { g as getDebugName } from './get-debug-name-CSniHBsn.js';
 import '../@ember/debug/index.js';
 import { join } from '../@ember/runloop/index.js';
-import { a as getInternalHelperManager, i as helperCapabilities } from './api-BawZUDYD.js';
-import { b as setHelperManager } from './api-BAmlf_CN.js';
-import { m as createTag, D as DIRTY_TAG, k as consumeTag } from './cache-B7dqAS38.js';
+import { a as getInternalHelperManager, i as helperCapabilities } from './api-DuLOZMO_.js';
+import { b as setHelperManager } from './api-BlZDPg1n.js';
+import { r as createTag, D as DIRTY_TAG, c as consumeTag } from './cache-DGDPVCpC.js';
 import { assert } from '../@ember/debug/lib/assert.js';
 
 /**
@@ -29,20 +29,32 @@ const IS_CLASSIC_HELPER = Symbol('IS_CLASSIC_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/dist/dev/packages/shared-chunks/{index-CwnQYqK5.js → index-B3pPx1fL.js}

@@ -7,49 +7,44 @@ import { deprecate, warn } from '../@ember/debug/index.js';
 import { schedule, _backburner, _getCurrentRunLoop } from '../@ember/runloop/index.js';
 import { associateDestroyableChild, isDestroyed, destroy, registerDestructor, isDestroying } from '../@glimmer/destroyable/index.js';
 import { artifacts } from '../@glimmer/program/index.js';
-import { R as RuntimeOpImpl } from './program-DzAfcWFj.js';
-import { v as valueForRef, U as UNDEFINED_REFERENCE, a as createComputeRef, i as isConstRef, c as createConstRef, d as isUpdatableRef, j as createInvokableRef, k as createReadOnlyRef, l as createUnboundRef, h as createDebugAliasRef, g as childRefFromParts, u as updateRef } from './reference-BoPB2LfI.js';
-import { c as clientBuilder } from './element-builder--iTIJyCB.js';
-import { E as EMPTY_ARGS, c as createCapturedArgs, b as EMPTY_POSITIONAL, d as curry } from './untouchable-this-B3DVwpHS.js';
-import { g as runtimeOptions, i as inTransaction, r as renderComponent$1, d as renderMain } from './render-CpKaO-BO.js';
+import { R as RuntimeOpImpl } from './program-DlgjqLa6.js';
+import { v as valueForRef, U as UNDEFINED_REFERENCE, c as createComputeRef, i as isConstRef, a as createConstRef, d as isUpdatableRef, j as createInvokableRef, k as createReadOnlyRef, l as createUnboundRef, h as createDebugAliasRef, g as childRefFromParts, u as updateRef } from './reference-BqOLhKFy.js';
+import { c as clientBuilder } from './api-C0PAtEgQ.js';
+import { E as EMPTY_ARGS, c as createCapturedArgs, b as EMPTY_POSITIONAL, d as curry } from './arguments-CDkbOqTS.js';
+import { g as runtimeOptions, i as inTransaction, r as renderComponent$1, d as renderMain } from './render-87_sKZ_k.js';
 import { d as dict } from './collections-DPkjqeA3.js';
-import { u as unwrapTemplate, a as CurlyComponentManager, i as initialRenderInstrumentDetails, p as processComponentInitializationAssertions, b as ComponentStateBucket, D as DIRTY_TAG, c as isCurlyManager, B as BOUNDS } from './curly-BBzF_bI8.js';
-import { b as CONSTANT_TAG, k as consumeTag, u as isTracking, o as debug, D as DIRTY_TAG$1, m as createTag, z as valueForTag, c as CURRENT_TAG, y as validateTag } from './cache-B7dqAS38.js';
-import { a as RSVP } from './rsvp-CnCSY930.js';
+import { u as unwrapTemplate, a as CurlyComponentManager, i as initialRenderInstrumentDetails, p as processComponentInitializationAssertions, b as ComponentStateBucket, D as DIRTY_TAG, c as isCurlyManager, B as BOUNDS } from './curly-Ei5G8jhk.js';
+import { C as CONSTANT_TAG, c as consumeTag, z as isTracking, e as debug, D as DIRTY_TAG$1, r as createTag, a as valueForTag, k as CURRENT_TAG, v as validateTag } from './cache-DGDPVCpC.js';
 import { h as hasDOM } from './index-BGP1rw3B.js';
-import EngineInstance from '../@ember/engine/instance.js';
 import { _instrumentStart } from '../@ember/instrumentation/index.js';
-import { c as capabilityFlagsFrom } from './capabilities-CZkuOqqC.js';
-import { t as templateFactory } from './index-CyZiGiEI.js';
+import { c as capabilityFlagsFrom } from './capabilities-CajW4QjE.js';
+import { t as templateFactory } from './index-DaFzpTIE.js';
 import { assert } from '../@ember/debug/lib/assert.js';
 import { g as getFactoryFor } from './container-BzzHmCNj.js';
-import { g as get, b as _getProp } from './property_get-CIBS9umw.js';
-import { _ as _setProp, s as set } from './property_set-D3PKyisF.js';
+import { g as get, b as _getProp } from './property_get-CRP7MFz_.js';
+import { _ as _setProp, s as set } from './property_set-qCUylPEK.js';
 import { g as getDebugName } from './get-debug-name-CSniHBsn.js';
 import setGlobalContext from '../@glimmer/global-context/index.js';
-import { t as tagForObject, o as objectAt, a as tagForProperty } from './chain-tags-D6tuFUj_.js';
+import { t as tagForObject, o as objectAt, a as tagForProperty } from './chain-tags-uWSImHzB.js';
 import { isEmberArray } from '../@ember/array/-internals.js';
 import { i as isObject } from './spec-BXl1reqK.js';
-import { t as tagFor } from './meta-BmRXesrk.js';
+import { t as tagFor } from './meta-BqC7f9Ia.js';
 import { contentFor } from '../@ember/-internals/runtime/lib/mixins/-proxy.js';
 import { i as isProxy } from './is_proxy-Bzg0d4m4.js';
-import { i as internalHelper } from './internal-helper-Ez7zbEIa.js';
+import { i as internalHelper } from './internal-helper-CKrni0b_.js';
 import { i as isHTMLSafe } from './index-D-xTBV4B.js';
-import { isArray } from '../@ember/array/index.js';
+import isArray from '../@ember/array/lib/is-array.js';
 import { g as getComponentTemplate } from './template-R_5UMHhb.js';
-import { c as hasInternalComponentManager, j as setInternalHelperManager, g as getInternalComponentManager } from './api-BawZUDYD.js';
-import { h as hash, f as fn, a as array } from './hash-BRRFQJ99.js';
-import { g as get$1, c as concat } from './get-D5b5QlqE.js';
-import { o as on } from './on-BueSMv9L.js';
-import { T as TEMPLATE_ONLY_COMPONENT_MANAGER, t as templateOnlyComponent } from './template-only-BqOt8bDl.js';
-import { i as isClassicHelper, C as CLASSIC_HELPER_MANAGER } from './helper-Do7NCZHI.js';
+import { c as hasInternalComponentManager, j as setInternalHelperManager, g as getInternalComponentManager } from './api-DuLOZMO_.js';
+import { h as hash, f as fn, a as array } from './hash-6NDs_5_f.js';
+import { g as get$1, c as concat } from './get-6I3sjd-I.js';
+import { o as on } from './on-DlF0Wy7P.js';
+import { T as TEMPLATE_ONLY_COMPONENT_MANAGER, t as templateOnlyComponent } from './template-only-Cu639ICT.js';
+import { i as isClassicHelper, C as CLASSIC_HELPER_MANAGER } from './helper-DIj85_-f.js';
 import { dasherize } from '../@ember/-internals/string/index.js';
-import { a as uniqueId } from './unique-id-CgmHQiwi.js';
-import '../route-recognizer/index.js';
-import './unrecognized-url-error-B3wUTorp.js';
-import '../@ember/routing/lib/routing-service.js';
+import { a as uniqueId } from './unique-id-DQOhouG1.js';
 import { generateControllerFactory } from '../@ember/routing/lib/generate_controller.js';
-import { E as EvaluationContextImpl } from './program-context-CadjldRr.js';
+import { E as EvaluationContextImpl } from './program-context-Dq8xN2HI.js';
 
 function instrumentationPayload$1(def) {
   // "main" used to be the outlet name, keeping it around for compatibility
@@ -92,14 +87,15 @@ class OutletComponentManager {
       let currentState = valueForRef(currentStateRef);
       let currentOwner = currentState?.render?.owner;
       if (parentOwner && parentOwner !== currentOwner) {
-        (!(currentOwner instanceof EngineInstance) && assert('Expected currentOwner to be an EngineInstance', currentOwner instanceof EngineInstance));
+        (!(currentOwner != null && 'buildChildEngineInstance' in currentOwner) && assert('Expected currentOwner to be an EngineInstance', currentOwner != null && 'buildChildEngineInstance' in currentOwner));
+        let engineInstance = currentOwner;
         let {
           mountPoint
-        } = currentOwner;
+        } = engineInstance;
         if (mountPoint) {
           state.engine = {
             mountPoint,
-            instance: currentOwner
+            instance: engineInstance
           };
         }
       }
@@ -246,7 +242,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
@@ -290,6 +286,8 @@ class RootComponentDefinition {
     {{/each}}
   </ul>
   ```
+    
+  `#each` is a keyword and does not need to be imported. 
 
   ### Specifying Keys
 
@@ -357,11 +355,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';
 
@@ -370,21 +368,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>
@@ -392,6 +388,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
@@ -861,73 +859,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
@@ -962,6 +929,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.
@@ -974,14 +945,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
@@ -1156,7 +1119,7 @@ class MountManager {
     // mount is a runtime helper, this shouldn't use dynamic layout
     // we should resolve the engine app template in the helper
     // it also should use the owner that looked up the mount helper.
-    (!(owner instanceof EngineInstance) && assert('Expected owner to be an EngineInstance', owner instanceof EngineInstance));
+    (!('buildChildEngineInstance' in owner) && assert('Expected owner to be an EngineInstance', 'buildChildEngineInstance' in owner));
     let engine = owner.buildChildEngineInstance(name);
     engine.boot();
     let applicationFactory = engine.factoryFor(`controller:application`);
@@ -1265,15 +1228,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>
@@ -1281,15 +1243,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.
@@ -1433,23 +1400,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
@@ -2001,7 +1975,12 @@ let renderSettledDeferred = null;
 */
 function renderSettled() {
   if (renderSettledDeferred === null) {
-    renderSettledDeferred = RSVP.defer();
+    let resolve;
+    let promise = new Promise(r => resolve = r);
+    renderSettledDeferred = {
+      promise,
+      resolve
+    };
     // if there is no current runloop, the promise created above will not have
     // a chance to resolve (because its resolved in backburner's "end" event)
     if (!_getCurrentRunLoop()) {
@@ -2497,4 +2476,4 @@ class Renderer extends BaseRenderer {
   }
 }
 
-export { OutletView as O, Renderer as R, _resetRenderers as _, renderComponent as a, outletHelper as o, renderSettled as r };
+export { OutletView as O, Renderer as R, _resetRenderers as _, renderSettled as a, outletHelper as o, renderComponent as r };