ember-source 7.2.0-alpha.4 → 7.2.0

package/dist/dev/packages/@ember/helper/index.js

@@ -1,11 +1,11 @@
-import { b as setHelperManager$1 } from '../../shared-chunks/api-BT9M3UaD.js';
-import { i as helperCapabilities } from '../../shared-chunks/api-DG5kRT-o.js';
-import { i as invokeHelper$1 } from '../../shared-chunks/invoke-Ds0KEfP_.js';
-import { a as array$1, f as fn$1, h as hash$1 } from '../../shared-chunks/hash-2-93qikL.js';
-import { c as concat$1, g as get$1 } from '../../shared-chunks/get-CO3EIWsm.js';
-import { a as and$1, e as eq$1, g as gt$1, b as gte$1, l as lt$1, c as lte$1, n as neq$1, d as not$1, o as or$1 } from '../../shared-chunks/or-Bg6rCMF8.js';
-import { e as element$1 } from '../../shared-chunks/element-bBwMD8cw.js';
-import { u as uniqueId$1 } from '../../shared-chunks/unique-id-Hd96VZlE.js';
+import { b as setHelperManager$1 } from '../../shared-chunks/api-BlZDPg1n.js';
+import { i as helperCapabilities } from '../../shared-chunks/api-DuLOZMO_.js';
+import { i as invokeHelper$1 } from '../../shared-chunks/invoke-d9sqa50M.js';
+import { a as array$1, f as fn$1, h as hash$1 } from '../../shared-chunks/hash-Bg4r3CU4.js';
+import { c as concat$1, g as get$1 } from '../../shared-chunks/get-B4o_4OLA.js';
+import { a as and$1, e as eq$1, g as gt$1, b as gte$1, l as lt$1, c as lte$1, n as neq$1, d as not$1, o as or$1 } from '../../shared-chunks/not-JB6ln6bJ.js';
+import { e as element$1 } from '../../shared-chunks/element-Cgoi4ldD.js';
+import { u as uniqueId$1 } from '../../shared-chunks/unique-id-Csxuh1I7.js';
 
 /**
 @module @ember/helper
@@ -56,11 +56,12 @@ import { u as uniqueId$1 } from '../../shared-chunks/unique-id-Hd96VZlE.js';
   capability is enabled.
 
   @method capabilities
-  @for @ember/helper
   @static
+  @for @ember/helper
   @param {String} managerApiVersion The version of capabilities that are being used
   @param options The capabilities values
   @return {Capabilities} The capabilities object instance
+  @since 3.23.0
   @public
 */
 const capabilities = helperCapabilities;
@@ -255,6 +256,7 @@ const capabilities = helperCapabilities;
   @param {Function} factory A factory function which receives an optional owner, and returns a helper manager
   @param {object} definition The definition to associate the manager factory with
   @return {object} The definition passed into setHelperManager
+  @since 3.23.0
   @public
 */
 const setHelperManager = setHelperManager$1;
@@ -266,8 +268,7 @@ const setHelperManager = setHelperManager$1;
   To access a helper's value you have to use `getValue` from
   `@glimmer/tracking/primitives/cache`.
 
-  ```js
-  // app/components/data-loader.js
+  ```gjs {data-filename="app/components/data-loader.js"}
   import Component from '@glimmer/component';
   import { getValue } from '@glimmer/tracking/primitives/cache';
   import Helper from '@ember/component/helper';
@@ -290,9 +291,10 @@ const setHelperManager = setHelperManager$1;
       return getValue(this.plusOne);
     }
   }
-  ```
-  ```js
-  {{this.value}}
+  
+  <template>
+    {{this.value}}
+  </template>
   ```
 
   It receives three arguments:
@@ -320,6 +322,7 @@ const setHelperManager = setHelperManager$1;
   @param {object} definition The helper definition
   @param {Function} computeArgs An optional function that produces args
   @returns
+  @since 3.23.0
   @public
 */
 const invokeHelper = invokeHelper$1;
@@ -335,9 +338,7 @@ const invokeHelper = invokeHelper$1;
  * Using the `{{hash}}` helper, you can pass objects directly from the template
  * as an argument to your components.
  *
- * ```
- * import { hash } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{#each-in (hash givenName='Jen' familyName='Weber') as |key value|}}
  *     <p>{{key}}: {{value}}</p>
@@ -345,18 +346,34 @@ const invokeHelper = invokeHelper$1;
  * </template>
  * ```
  *
- * **NOTE:** this example uses the experimental `<template>` feature, which is
- * the only place you need to import `hash` to use it (it is a built-in when
- * writing standalone `.hbs` files).
+ *
+ * Note that the hash is an empty object with no prototype chain, therefore
+ * common methods like `toString` are not available in the resulting hash.
+ * If you need to use such a method, you can use the `call` or `apply`
+ * approach:
+ *
+ * ```js
+ * function toString(obj) {
+ *   return Object.prototype.toString.apply(obj);
+ * }
+ * ```
+ * The `hash` helper is available as a keyword and does not need to be imported.
+ *
+ * @method hash
+ * @public
+ * @static
+ * @for Keywords
+ * @noimport
+ * @param {Object} options
+ * @return {Object} Hash
+ * @since 2.3.0
  */
 const hash = hash$1;
 /**
  * Using the `{{array}}` helper, you can pass arrays directly from the template
  * as an argument to your components.
  *
- * ```js
- * import { array } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   <ul>
  *   {{#each (array 'Tom Dale' 'Yehuda Katz' @anotherPerson) as |person|}}
@@ -364,34 +381,47 @@ const hash = hash$1;
  *   {{/each}}
  *   </ul>
  * </template>
- *
- * **NOTE:** this example uses the experimental `<template>` feature, which is
- * the only place you need to import `array` to use it (it is a built-in when
- * writing standalone `.hbs` files).
  * ```
+ *
+ * The `array` helper is available as a keyword and does not need to be imported.
+ *
+ * @method array
+ * @public
+ * @static
+ * @for Keywords
+ * @noimport
+ * @param {Array} options
+ * @return {Array} Array
+ * @since 3.8.0
  */
 const array = array$1;
 /**
- * The `{{concat}}` helper makes it easy to dynamically send a number of
- * parameters to a component or helper as a single parameter in the format of a
- * concatenated string.
+ * The `{{concat}}` helper Concatenates the given arguments into a string.
  *
- * For example:
+ * Example:
  *
- * ```js
- * import { concat } from '@ember/helper';
- *
- * <template>
- *   {{get @foo (concat "item" @index)}}
- * </template>
- * ```
- *
- * This will display the result of `@foo.item1` when `index` is `1`, and
- * `this.foo.item2` when `index` is `2`, etc.
+ ```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:
+
+  ```handlebars
+  <SomeComponent @name="{{firstName}} {{lastName}}" />
+  ```
  *
- * **NOTE:** this example uses the experimental `<template>` feature, which is
- * the only place you need to import `concat` to use it (it is a built-in when
- * writing standalone `.hbs` files).
+ * @method concat
+ * @for @ember/helper
+ * @exampleimport import { concat } from '@ember/helper';
+ * @public
+ * @static
+ * @since 1.13.0
  */
 const concat = concat$1;
 /**
@@ -401,7 +431,7 @@ const concat = concat$1;
  *
  * To access a property on an object with a string key:
  *
- * ```js
+ * ```gjs
  * import { get } from '@ember/helper';
  *
  * <template>
@@ -411,7 +441,7 @@ const concat = concat$1;
  *
  * To access the first element in an array:
  *
- * ```js
+ * ```gjs
  * import { get } from '@ember/helper';
  *
  * <template>
@@ -421,7 +451,7 @@ const concat = concat$1;
  *
  * To access a property on an object with a dynamic key:
  *
- * ```js
+ * ```gjs
  * import { get } from '@ember/helper';
  *
  * <template>
@@ -432,9 +462,12 @@ const concat = concat$1;
  * This will display the result of `@foo.item1` when `index` is `1`, and
  * `this.foo.item2` when `index` is `2`, etc.
  *
- * **NOTE:** this example uses the experimental `<template>` feature, which is
- * the only place you need to import `concat` to use it (it is a built-in when
- * writing standalone `.hbs` files).
+ * @method get
+ * @for @ember/helper
+ * @since 2.1.0
+ * @exampleimport import { get } from '@ember/helper';
+ * @public
+ * @static
  */
 const get = get$1;
 /**
@@ -442,9 +475,7 @@ const get = get$1;
  * a new function that combines. This allows you to pass parameters along to
  * functions in your templates:
  *
- * ```js
- * import { fn } from '@ember/helper';
- *
+ * ```gjs
  * function showAlert(message) {
  *   alert(`The message is: '${message}'`);
  * }
@@ -455,98 +486,153 @@ const get = get$1;
  *   </button>
  * </template>
  * ```
+ *
+ * For example, if you have an `each` helper looping over a number of items, you
+ * may need to pass a function that expects to receive the item as an argument
+ * 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:
+ *
+ * ```gjs {data-filename="app/components/items-listing.gjs"}
+ * <template>
+ *   {{#each @items as |item|}}
+ *     <DisplayItem @item=item @select={{fn this.handleSelected item}} />
+ *   {{/each}}
+ * </template>
+ * ```
+ *
+ * ```gjs {data-filename="app/components/items-list.gjs"}
+ * import Component from '@glimmer/component';
+ * import { action } from '@ember/object';
+ *
+ * export default class ItemsList extends Component {
+ *   @action
+ *   handleSelected(item) {
+ *     // ...snip...
+ *   }
+ * }
+ * ```
+ *
+ * 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.
+ *
+ * Let's take a look at what that means in a couple circumstances:
+ *
+ * - When invoked as `this.args.select()` the `handleSelected` function will
+ * receive the `item` from the loop as its first and only argument.
+ * - When invoked as `this.args.select('foo')` the `handleSelected` function
+ * will receive the `item` from the loop as its first argument and the
+ * string `'foo'` as its second argument.
+ *
+ * See also [partial application](https://en.wikipedia.org/wiki/Partial_application).
+ *
+ * The `fn` helper is available as a keyword and does not need to be imported.
+ *
+ * @method fn
+ * @for Keywords
+ * @noimport
+ * @public
+ * @since 3.11.0
+ * @static
  */
 const fn = fn$1;
 /**
  * The `{{gt}}` helper returns `true` if the first argument is greater than
  * the second argument.
  *
- * ```js
- * import { gt } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (gt @score 100) "High score!" "Keep trying"}}
  * </template>
  * ```
  *
- * In strict-mode (gjs/gts) templates, `gt` is available as a keyword and
- * does not need to be imported.
+ * The `gt` helper is available as a keyword and does not need to be imported.
  *
  * @method gt
  * @param {number} left
  * @param {number} right
  * @return {boolean}
+ * @noimport
+ * @for Keywords
+ * @since 7.1.0
+ * @static
+ * @public
  */
 const gt = gt$1;
 /**
  * The `{{gte}}` helper returns `true` if the first argument is greater than
  * or equal to the second argument.
  *
- * ```js
- * import { gte } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (gte @age 18) "Adult" "Minor"}}
  * </template>
  * ```
  *
- * In strict-mode (gjs/gts) templates, `gte` is available as a keyword and
- * does not need to be imported.
+ * The `gte` helper is available as a keyword and does not need to be imported.
  *
  * @method gte
  * @param {number} left
  * @param {number} right
  * @return {boolean}
+ * @noimport
+ * @for Keywords
+ * @since 7.1.0
+ * @static
+ * @public
  */
 const gte = gte$1;
 /**
  * The `{{lt}}` helper returns `true` if the first argument is less than
  * the second argument.
  *
- * ```js
- * import { lt } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (lt @temperature 0) "Freezing" "Above zero"}}
  * </template>
  * ```
  *
- * In strict-mode (gjs/gts) templates, `lt` is available as a keyword and
- * does not need to be imported.
+ * The `lt` helper is available as a keyword and does not need to be imported.
  *
  * @method lt
  * @param {number} left
  * @param {number} right
  * @return {boolean}
+ * @noimport
+ * @for Keywords
+ * @since 7.1.0
+ * @static
+ * @public
  */
 const lt = lt$1;
 /**
  * The `{{lte}}` helper returns `true` if the first argument is less than
  * or equal to the second argument.
  *
- * ```js
- * import { lte } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (lte @count 0) "Empty" "Has items"}}
  * </template>
  * ```
  *
- * In strict-mode (gjs/gts) templates, `lte` is available as a keyword and
- * does not need to be imported.
+ * The `lte` helper is available as a keyword and does not need to be imported.
  *
  * @method lte
  * @param {number} left
  * @param {number} right
  * @return {boolean}
+ * @noimport
+ * @for Keywords
+ * @since 7.1.0
+ * @static
+ * @public
  */
 const lte = lte$1;
 /**
  * The `element` helper lets you dynamically set the tag name of an element.
  *
- * ```js
- * import { element } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{#let (element @tagName) as |Tag|}}
  *     <Tag class="my-element">Hello</Tag>
@@ -558,8 +644,15 @@ const lte = lte$1;
  * When `@tagName` is an empty string, the block content is rendered without a
  * wrapping element. When `@tagName` is `null` or `undefined`, nothing is rendered.
  *
+ * The `element` helper is available as a keyword and does not need to be imported.
+ *
  * @method element
  * @param {string} tagName
+ * @noimport
+ * @for Keywords
+ * @since 7.1.0
+ * @static
+ * @public
  */
 const element = element$1;
 /**
@@ -569,7 +662,7 @@ const element = element$1;
  * Each invocation of {{uniqueId}} will return a new, unique ID string.
  * You can use the `let` helper to create an ID that can be reused within a template.
  *
- * ```js
+ * ```gjs
  * import { uniqueId } from '@ember/helper';
  *
  * <template>
@@ -579,48 +672,59 @@ const element = element$1;
  *   {{/let}}
  * </template>
  * ```
+ *
+ * @method uniqueId
+ * @for @ember/helper
+ * @public
+ * @static
+ * @exampleimport import { uniqueId } from '@ember/helper';
+ * @since 4.4.0
  */
 const uniqueId = uniqueId$1;
 /**
  * The `{{eq}}` helper returns `true` if its two arguments are strictly equal
  * (`===`). Takes exactly two arguments.
  *
- * ```js
- * import { eq } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (eq @status "active") "Active" "Inactive"}}
  * </template>
  * ```
  *
- * In strict-mode (gjs/gts) templates, `eq` is available as a keyword and
- * does not need to be imported.
+ * The `eq` helper is available as a keyword and does not need to be imported.
  *
  * @method eq
  * @param {unknown} left
  * @param {unknown} right
  * @return {boolean}
+ * @noimport
+ * @for Keywords
+ * @static
+ * @since 7.1.0
+ * @public
  */
 const eq = eq$1;
 /**
  * The `{{neq}}` helper returns `true` if its two arguments are strictly
  * not equal (`!==`). Takes exactly two arguments.
  *
- * ```js
- * import { neq } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (neq @status "active") "Not active" "Active"}}
  * </template>
  * ```
  *
- * In strict-mode (gjs/gts) templates, `neq` is available as a keyword and
- * does not need to be imported.
+ * The `neq` helper is available as a keyword and does not need to be imported.
  *
  * @method neq
  * @param {unknown} left
  * @param {unknown} right
  * @return {boolean}
+ * @for Keywords
+ * @noimport
+ * @static
+ * @since 7.1.0
+ * @public
  */
 const neq = neq$1;
 /**
@@ -628,20 +732,22 @@ const neq = neq$1;
  * falsy value (using Handlebars truthiness) or the right-most value if all
  * are truthy. Requires at least two arguments.
  *
- * ```js
- * import { and } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (and @isAdmin @isLoggedIn) "Welcome, admin!" "Access denied"}}
  * </template>
  * ```
  *
- * In strict-mode (gjs/gts) templates, `and` is available as a keyword and
- * does not need to be imported.
+ * The `and` helper is available as a keyword and does not need to be imported.
  *
  * @method and
  * @param {unknown} args Two or more values to evaluate
  * @return {unknown} The first falsy value or the last value
+ * @noimport
+ * @for Keywords
+ * @static
+ * @since 7.1.0
+ * @public
  */
 const and = and$1;
 /**
@@ -649,9 +755,7 @@ const and = and$1;
  * truthy value (using Handlebars truthiness) or the right-most value if all
  * are falsy. Requires at least two arguments.
  *
- * ```js
- * import { or } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (or @hasAccess @isAdmin) "Welcome!" "No access"}}
  * </template>
@@ -663,15 +767,18 @@ const and = and$1;
  * @method or
  * @param {unknown} args Two or more values to evaluate
  * @return {unknown} The first truthy value or the last value
+ * @noimport
+ * @for Keywords
+ * @static
+ * @since 7.1.0
+ * @public
  */
 const or = or$1;
 /**
  * The `{{not}}` helper returns the logical negation of its argument using
  * Handlebars truthiness. Takes exactly one argument.
  *
- * ```js
- * import { not } from '@ember/helper';
- *
+ * ```gjs
  * <template>
  *   {{if (not @isDisabled) "Enabled" "Disabled"}}
  * </template>
@@ -683,9 +790,936 @@ const or = or$1;
  * @method not
  * @param {unknown} value The value to negate
  * @return {boolean}
+ * @for Keywords
+ * @noimport
+ * @static
+ * @since 7.1.0
+ * @public
  */
 const not = not$1;
 
+/**
+  `{{yield}}` denotes an area of a template that will be rendered inside
+  of another template.
+
+  ### Use with `Component`
+
+  When designing components, `{{yield}}` is used to denote where, inside the component's
+  template, an optional block passed to the component should render:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import LabeledTextField from '../components/labeled-textfield';
+    
+  <template>
+    <LabeledTextField @value={{@model.name}}>
+      First name:
+    </LabeledTextField>
+  </template>
+  ```
+
+  ```gjs {data-filename="app/components/labeled-textfield.gjs"}
+  import { Input } from '@ember/component';
+    
+  <template>
+    <label>
+      {{yield}} <Input @value={{@value}} />
+    </label>
+  </template>
+  ```
+
+  Result:
+
+  ```html
+  <label>
+    First name: <input type="text" />
+  </label>
+  ```
+
+  Additionally, you can `yield` properties into the context for use by the consumer:
+
+  ```gjs {data-filename="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>
+  }
+  ```
+
+  ```gjs {data-filename="app/components/labeled-textfield.gjs"}
+  import { Input } from '@ember/component';
+    
+  <template>
+    <label>
+      {{yield this.validationError}} <Input @value={{@value}} />
+    </label>
+  </template>
+  ```
+
+  Result:
+
+  ```html
+  <label>
+    <p class="error">First Name must be at least 3 characters long.</p>
+    First name: <input type="text" />
+  </label>
+  ```
+
+  `yield` can also be used with the `hash` helper:
+
+  ```gjs {data-filename="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>
+  ```
+
+  ```gjs {data-filename="app/components/date-ranges.gjs"}
+  <template>
+    <div>
+      {{yield (hash start=@value.start end=@value.end)}}
+    </div>
+  </template>
+  ```
+
+  Result:
+
+  ```html
+  <div>
+    Start date: July 1st
+    End date: July 30th
+  </div>
+  ```
+
+  Multiple values can be yielded as block params:
+    
+  ```gjs {data-filename="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>
+  ```
+
+  ```gjs {data-filename="app/components/banner.gjs"}
+  <template>
+    <div>
+      {{yield "Hello title" "hello subtitle" "body text"}}
+    </div>
+  </template>
+  ```
+
+  Result:
+
+  ```html
+  <div>
+    <h1>Hello title</h1>
+    <h2>hello subtitle</h2>
+    body text
+  </div>
+  ```
+
+  However, it is preferred to use the hash helper, as this can prevent breaking changes to your component and also simplify the api for the component.
+
+  Multiple components can be yielded with the `hash` and `component` helper:
+
+  ```gjs {data-filename="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>
+  ```
+
+  ```gjs {data-filename="app/components/banner.gjs"}
+  import Title from './banner/title';
+  import Subtitle from './banner/subtitle';
+  import Body from './banner/body';
+
+  export default class Banner extends Component {
+    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>
+  }
+  ```
+
+  Result:
+
+  ```html
+  <div>
+    <h1>Banner title</h1>
+    <h2>Banner subtitle</h2>
+    A load of body text
+  </div>
+  ```
+
+  A benefit of using this pattern is that the user of the component can change the order the components are displayed.
+
+  ```gjs {data-filename="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:
+
+  ```html
+  <div>
+    <h2>Banner subtitle</h2>
+    <h1>Banner title</h1>
+    A load of body text
+  </div>
+  ```
+
+  Another benefit to using `yield` with the `hash` and `component` helper
+  is you can pass attributes and arguments to these components:
+
+  ```gjs {data-filename="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>
+  ```
+
+  ```gjs {data-filename="app/components/banner/subtitle.gjs"}
+  {{!-- note the use of ..attributes --}}
+  <h2 ...attributes>
+    {{yield}}
+  </h2>
+  ```
+
+  ```gjs {data-filename="app/components/banner/title.gjs"}
+  <template>
+    {{#if (eq @variant "loud")}}
+      <h1 class="loud">{{yield}}</h1>
+    {{else}}
+      <h1 class="quiet">{{yield}}</h1>
+    {{/if}}
+  </template>
+  ```
+
+  Result:
+
+  ```html
+  <div>
+    <h2 class="mb-1">Banner subtitle</h2>
+    <h1 class="loud">Banner title</h1>
+    A load of body text
+  </div>
+  ```
+
+  `yield` is available as a keyword and does not need to be imported.
+
+  @method yield
+  @param {Hash} options
+  @return {String} HTML string
+  @static
+  @for Keywords
+  @noimport
+  @public
+ */
+
+/**
+  `{{(has-block)}}` indicates if the component was invoked with a block.
+
+  This component is invoked with a block:
+
+  ```handlebars
+  <MyComponent>
+    Hi Jen!
+  </MyComponent>
+  ```
+
+  This component is invoked without a block:
+
+  ```handlebars
+  <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.
+
+  ```gjs {data-filename="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>
+  ```
+
+  `has-block` is available as a keyword and does not need to be imported.
+
+  @method has-block
+  @param {String} blockName the name of the block. The name is either "main" or "inverse" (though only curly components support inverse) or the name given to a named block.
+  @return {Boolean} `true` if the component was invoked with a block
+  @static
+  @for Keywords
+  @noimport
+  @public
+ */
+
+/**
+  `{{(has-block-params)}}` indicates if the component was invoked with block params.
+
+  This component is invoked with block params:
+    
+  ```handlebars
+  <MyComponent as |favoriteFlavor|>
+    Hi Jen!
+  </MyComponent>
+  ```
+
+  And without block params:
+
+  ```handlebars
+  <MyComponent>
+    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.
+
+  ```gjs {data-filename="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
+  @static
+  @for Keywords
+  @noimport
+  @param {String} blockName the name of the block. The name is either "main" or "inverse" (though only curly components support inverse) or the name given to a named block.
+  @return {Boolean} `true` if the component was invoked with block params
+  @public
+ */
+
+/**
+  Execute the `debugger` statement in the current template's context.
+
+  ```handlebars
+  {{debugger}}
+  ```
+
+  When using the debugger helper you will have access to a `get` function. This
+  function retrieves values available in the context of the template.
+  For example, if you're wondering why a value `{{foo}}` isn't rendering as
+  expected within a template, you could place a `{{debugger}}` statement and,
+  when the `debugger;` breakpoint is hit, you can attempt to retrieve this value:
+
+  ```
+  > get('foo')
+  ```
+
+  `get` is also aware of keywords. So in this situation
+
+  ```handlebars
+  {{#each this.items as |item|}}
+    {{debugger}}
+  {{/each}}
+  ```
+
+  You'll be able to get values from the current item:
+
+  ```
+  > get('item.name')
+  ```
+
+  You can also access the context of the view to make sure it is the object that
+  you expect:
+
+  ```
+  > context
+  ```
+
+  @method debugger
+  @static
+  @for Keywords
+  @noimport
+  @public
+ */
+
+/**
+  The `component` helper is used to package a Component with initial arguments.
+  The included arguments can then be merged during the final invocation.
+
+  See [Component](/ember/release/modules/@glimmer%2Fcomponent/) for
+  additional information on how a `Component` functions.
+
+  This is similar to the concept of Partial Application.
+    
+  For example, given a `FullName` component:
+  
+  ```gjs {data-filename="app/components/full-name.gjs"}
+  import MyInputComponent from './my-input-component';
+  
+  <template>
+    {{yield (component MyInputComponent value=@model.name placeholder="Username")}}
+  </template>
+  ```
+  
+  The yielded component can be invoked by the calling component.
+  See the following snippet:
+  
+  ```gjs {data-filename="app/components/person-form.gjs"}
+  import FullName from './full-name';
+    
+  <template>
+    <FullName @model={{@model}} as |Field|>
+      <Field />
+    </FullName>
+  </template>
+  ```
+  
+  Which will output an input whose value is already bound to `@model.name` and `placeholder`
+  is "Username".
+    
+  Any arguments passed at the invocation site of the component will override those applied via
+  the `component` helper. For example, if the invocation site of the component is:
+
+  ```gjs {data-filename="app/components/person-form.gjs"}
+  import FullName from './full-name';
+
+  <template>
+    <FullName @model={{@model}} as |Field|>
+      <Field @placeholder="Your name" />
+    </FullName>
+  </template>
+  ```
+
+  The output will be an input whose value is bound to `@model.name` and `placeholder`
+  is "Your name".
+    
+  The `component` helper is built-in and does not need to be imported. 
+    
+  Prior to Strict Mode aka "Template Tag" or gjs, the component helper was also used to invoke
+  components dynamically. This is no longer necessary, and they can be directly invoked, as above.
+
+  ### Dynamic Component Invocation
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import Component from '@glimmer/component';
+  import { tracked } from '@glimmer/tracking';
+  import { component } from '@ember/helper';
+  import LiveUpdatingChart from '../components/live-updating-chart';
+  import MarketCloseSummary from '../components/market-close-summary';
+
+  export default class Application extends Component {
+    @tracked isMarketOpen = false;
+
+    get infographicComponent() {
+      return this.isMarketOpen ? LiveUpdatingChart : MarketCloseSummary;
+    }
+
+    <template>
+      {{!-- The component can be invoked directly --}}
+      <this.infographicComponent />
+    
+      {{!-- The component helper here is no longer necessary --}}
+      {{component this.infographicComponentName}}
+    </template>
+  }
+  ```
+
+  @method component
+  @since 1.11.0
+  @static
+  @for Keywords
+  @noimport
+  @public
+*/
+
+/**
+ Use the `{{helper}}` helper to create contextual helper so
+ that it can be passed around as first-class values in templates.
+
+ ```handlebars
+ {{#let (helper "join-words" "foo" "bar" separator=" ") as |foo-bar|}}
+
+   {{!-- this is equivalent to invoking `{{join-words "foo" "bar" separator=" "}}` --}}
+   {{foo-bar}}
+
+   {{!-- this will pass the helper itself into the component, instead of invoking it now --}}
+   <MyComponent @helper={{helper foo-bar "baz"}} />
+
+   {{!-- this will yield the helper itself ("contextual helper"), instead of invoking it now --}}
+   {{yield foo-bar}}
+ {{/let}}
+ ```
+
+ ### Arguments
+
+ The `{{helper}}` helper works similarly to the [`{{component}}`](./component?anchor=component) and
+ [`{{modifier}}`](./modifier?anchor=modifier) helper:
+
+ * When passed a string (e.g. `(helper "foo")`) as the first argument,
+   it will produce an opaque, internal "helper definition" object
+   that can be passed around and invoked elsewhere.
+
+ * Any additional positional and/or named arguments (a.k.a. params and hash)
+   will be stored ("curried") inside the definition object, such that, when invoked,
+   these arguments will be passed along to the referenced helper.
+
+
+ @method helper
+ @static
+ @for Keywords
+ @noimport
+ @public
+ @since 3.27.0
+ */
+
+/**
+  The `if` helper allows you to conditionally render one of two branches,
+  depending on the "truthiness" of a property.
+  For example the following values are all falsey: `false`, `undefined`, `null`, `""`, `0`, `NaN` or an empty array.
+
+  This helper has two forms, block and inline.
+
+  ## Block form
+
+  You can use the block form of `if` to conditionally render a section of the template.
+
+  To use it, pass the conditional value to the `if` helper,
+  using the block form to wrap the section of template you want to conditionally render.
+  Like so:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import Weather from '../components/weather';
+    
+  <template>
+    <Weather />
+  </template>
+  ```
+
+  ```gjs {data-filename="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.
+
+  ```gjs {data-filename="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
+  conditional logic.
+
+  For the following template:
+
+   ```gjs {data-filename="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:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import Weather from '../components/weather';
+    
+  <template>
+    <Weather @isCold={{true}} />
+  </template>
+  ```
+
+  Then `Grab a coat, it's chilly!` will be rendered.
+
+  ## Inline form
+
+  The inline `if` helper conditionally renders a single property or string.
+
+  In this form, the `if` helper receives three arguments, the conditional value,
+  the value to render when truthy, and the value to render when falsey.
+
+  For example, if `useLongGreeting` is truthy, the following:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import Greeting from '../components/greeting';
+  
+  <template>
+    <Greeting @useLongGreeting={{true}} />
+  <template>
+  ```
+
+  ```gjs {data-filename="app/components/greeting.gjs"}
+  <template>
+    {{if @useLongGreeting "Hello" "Hi"}} Alex
+  <template>
+  ```
+
+  Will render:
+
+  ```html
+  Hello Alex
+  ```
+
+  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
+  @static
+  @for Keywords
+  @noimport
+  @public
+*/
+
+/**
+  The `unless` helper is the inverse of the `if` helper. It displays if a value
+  is falsey ("not true" or "is false"). Example values that will display with
+  `unless`: `false`, `undefined`, `null`, `""`, `0`, `NaN` or an empty array.
+
+  ## Inline form
+
+  The inline `unless` helper conditionally renders a single property or string.
+  This helper acts like a ternary operator. If the first property is falsy,
+  the second argument will be displayed, otherwise, the third argument will be
+  displayed
+
+  For example, if you pass a falsey `useLongGreeting` to the `Greeting` component:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import Greeting from '../components/greeting';
+    
+  <template>
+    <Greeting @useLongGreeting={{false}} />
+  </template>
+  ```
+
+  ```gjs {data-filename="app/components/greeting.gjs"}
+  <template>
+    {{unless @useLongGreeting "Hi" "Hello"}} Ben
+  </template>
+  ```
+
+  Then it will display:
+
+  ```html
+  Hi Ben
+  ```
+
+  ## Block form
+
+  Like the `if` helper, the `unless` helper also has a block form.
+
+  The following will not render anything:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import Greeting from '../components/greeting';
+    
+  <template>
+    <Greeting />
+  </template>
+  ```
+
+  ```gjs {data-filename="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
+  `else` will display if the value is truthy.
+
+  If you have the following component:
+
+  ```gjs {data-filename="app/components/logged-in.gjs"}
+  <template>
+    {{#unless @userData}}
+      Please login.
+    {{else}}
+      Welcome back!
+    {{/unless}}
+  </template>
+  ```
+
+  Calling it with a truthy `userData`:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import LoggedIn from '../components/logged-in';
+    
+  <template>
+    <LoggedIn @userData={{hash username="Zoey"}} />
+  </template>
+  ```
+
+  Will render:
+
+  ```html
+  Welcome back!
+  ```
+
+  and calling it with a falsey `userData`:
+
+  ```gjs {data-filename="app/templates/application.gjs"}
+  import LoggedIn from '../components/logged-in';
+
+  <template>
+    <LoggedIn @userData={{false}} />
+  </template>
+  ```
+
+  Will render:
+
+  ```html
+  Please login.
+  ```
+ 
+  `unless` is built-in and does not need to be imported.
+ 
+  @method unless
+  @for Keywords
+  @noimport
+  @static
+  @public
+*/
+
+/**
+  `log` allows you to output the value of variables in the current rendering
+  context. `log` also accepts primitive types such as strings or numbers.
+
+  ```handlebars
+  {{log "myVariable:" myVariable }}
+  ```
+ 
+  `log` is built-in as a template keyword and does not need to be imported.
+
+  @method log
+  @for Keywords
+  @noimport
+  @static
+  @param {Array} params
+  @public
+*/
+
+/**
+ Use the `{{modifier}}` helper to create contextual modifier so
+ that it can be passed around as first-class values in templates.
+
+ ```handlebars
+ {{#let (modifier "click-outside" click=this.submit) as |on-click-outside|}}
+
+   {{!-- this is equivalent to `<MyComponent {{click-outside click=this.submit}} />` --}}
+   <MyComponent {{on-click-outside}} />
+
+   {{!-- this will pass the modifier itself into the component, instead of invoking it now --}}
+   <MyComponent @modifier={{modifier on-click-outside "extra" "args"}} />
+
+   {{!-- this will yield the modifier itself ("contextual modifier"), instead of invoking it now --}}
+   {{yield on-click-outside}}
+ {{/let}}
+ ```
+
+ ### Arguments
+
+ The `{{modifier}}` helper works similarly to the [`{{component}}`](./component?anchor=component) and
+ [`{{helper}}`](./helper?anchor=helper) helper:
+
+ * When passed a string (e.g. `(modifier "foo")`) as the first argument,
+   it will produce an opaque, internal "modifier definition" object
+   that can be passed around and invoked elsewhere.
+
+ * Any additional positional and/or named arguments (a.k.a. params and hash)
+   will be stored ("curried") inside the definition object, such that, when invoked,
+   these arguments will be passed along to the referenced modifier.
+
+ `modifier` is built-in as a template keyword and does not need to be imported.
+ 
+ @method modifier
+ @for Keywords
+ @static
+ @public
+ @since 3.27.0
+ */
+
+/**
+  `pageTitle` allows you to set the title of any page in your application and
+  append additional titles for each route. For complete documentation, see
+  https://github.com/ember-cli/ember-page-title.
+
+  ```gjs
+  import { pageTitle } from 'ember-page-title';
+    
+  <template>
+    {{pageTitle "My Page Title" }}
+  </template>
+  ```
+
+  @method pageTitle
+  @for External
+  @param {String} param
+  @static
+  @public
+*/
+
+/**
+    The `let` helper receives one or more positional arguments and yields
+    them out as block params.
+
+    This allows the developer to introduce shorter names for certain computations
+    in the template.
+
+    This is especially useful if you are passing properties to a component
+    that receives a lot of options and you want to clean up the invocation.
+
+    For the following example, the template receives a `post` object with
+    `content` and `title` properties.
+
+    We are going to call the `my-post` component, passing a title which is
+    the title of the post suffixed with the name of the blog, the content
+    of the post, and a series of options defined in-place.
+
+    ```handlebars
+    {{#let
+        (concat post.title ' | The Ember.js Blog')
+        post.content
+        (hash
+          theme="high-contrast"
+          enableComments=true
+        )
+        as |title content options|
+    }}
+      <MyPost @title={{title}} @content={{content}} @options={{options}} />
+    {{/let}}
+  ```
+
+ `let` is built-in and does not need to be imported.
+ 
+  @method let
+  @static
+  @noimport
+  @for Keywords
+  @public
+*/
+
+/**
+ The `in-element` helper renders its block content outside of the regular flow,
+ into a DOM element given by its `destinationElement` positional argument.
+
+ Common use cases - often referred to as "portals" or "wormholes" - are rendering
+ dropdowns, modals or tooltips close to the root of the page to bypass CSS overflow
+ rules, or to render content to parts of the page that are outside of the control
+ of the Ember app itself (e.g. embedded into a static or server rendered HTML page).
+
+ ```handlebars
+ {{#in-element this.destinationElement}}
+   <div>Some content</div>
+ {{/in-element}}
+ ```
+
+ ### Arguments
+
+ `{{in-element}}` requires a single positional argument:
+
+ - `destinationElement` -- the DOM element to render into. It must exist at the time
+ of rendering.
+
+ It also supports an optional named argument:
+
+ - `insertBefore` -- by default the DOM element's content is replaced when used as
+ `destinationElement`. Passing `null` to `insertBefore` changes the behaviour to
+ append the block content to the end of any existing content. Any other value than
+ `null` is currently not supported.
+
+     For example:
+
+     ```handlebars
+     {{#in-element this.destinationElement insertBefore=null}}
+       <div>Some content</div>
+     {{/in-element}}
+     ```
+
+ `in-element` is built-in and does not need to be imported.
+ 
+ @method in-element
+ @for Keywords
+ @param {Element} destinationElement the DOM element to render into. It must exist at the time
+  of rendering.
+ @param {Boolean} insertBefore named argument, by default the DOM element's content is replaced when used as
+  `destinationElement`. Passing `null` to `insertBefore` changes the behaviour to
+  append the block content to the end of any existing content. Any other value than
+  `null` is currently not supported.
+ @static
+ @noimport
+ @public
+ */
+
 /* eslint-enable @typescript-eslint/no-empty-object-type */
 
 export { and, array, capabilities, concat, element, eq, fn, get, gt, gte, hash, invokeHelper, lt, lte, neq, not, or, setHelperManager, uniqueId };