ember-source 7.2.0-alpha.4 → 7.2.0

package/types/stable/@ember/helper/index.d.ts

@@ -52,11 +52,12 @@ declare module '@ember/helper' {
       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
     */
     export const capabilities: typeof helperCapabilities;
@@ -250,6 +251,7 @@ declare module '@ember/helper' {
       @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
     */
     export const setHelperManager: typeof glimmerSetHelperManager;
@@ -260,8 +262,7 @@ declare module '@ember/helper' {
       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';
@@ -284,9 +285,10 @@ declare module '@ember/helper' {
           return getValue(this.plusOne);
         }
       }
-      ```
-      ```js
-      {{this.value}}
+      
+      <template>
+        {{this.value}}
+      </template>
       ```
 
       It receives three arguments:
@@ -314,6 +316,7 @@ declare module '@ember/helper' {
       @param {object} definition The helper definition
       @param {Function} computeArgs An optional function that produces args
       @returns
+      @since 3.23.0
       @public
     */
     export const invokeHelper: typeof glimmerInvokeHelper;
@@ -321,9 +324,7 @@ declare module '@ember/helper' {
      * 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>
@@ -331,9 +332,27 @@ declare module '@ember/helper' {
      * </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
      */
     export const hash: HashHelper;
     export interface HashHelper extends Opaque<"helper:hash"> {
@@ -342,9 +361,7 @@ declare module '@ember/helper' {
      * 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|}}
@@ -352,36 +369,49 @@ declare module '@ember/helper' {
      *   {{/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
      */
     export const array: ArrayHelper;
     export interface ArrayHelper extends Opaque<"helper:array"> {
     }
     /**
-     * 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.
-     *
-     * For example:
+     * The `{{concat}}` helper Concatenates the given arguments into a string.
      *
-     * ```js
-     * import { concat } from '@ember/helper';
+     * Example:
      *
-     * <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
      */
     export const concat: ConcatHelper;
     export interface ConcatHelper extends Opaque<"helper:concat"> {
@@ -393,7 +423,7 @@ declare module '@ember/helper' {
      *
      * To access a property on an object with a string key:
      *
-     * ```js
+     * ```gjs
      * import { get } from '@ember/helper';
      *
      * <template>
@@ -403,7 +433,7 @@ declare module '@ember/helper' {
      *
      * To access the first element in an array:
      *
-     * ```js
+     * ```gjs
      * import { get } from '@ember/helper';
      *
      * <template>
@@ -413,7 +443,7 @@ declare module '@ember/helper' {
      *
      * To access a property on an object with a dynamic key:
      *
-     * ```js
+     * ```gjs
      * import { get } from '@ember/helper';
      *
      * <template>
@@ -424,9 +454,12 @@ declare module '@ember/helper' {
      * 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
      */
     export const get: GetHelper;
     export interface GetHelper extends Opaque<"helper:get"> {
@@ -436,9 +469,7 @@ declare module '@ember/helper' {
      * 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}'`);
      * }
@@ -449,6 +480,55 @@ declare module '@ember/helper' {
      *   </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
      */
     export const fn: FnHelper;
     export interface FnHelper extends Opaque<"helper:fn"> {
@@ -457,21 +537,23 @@ declare module '@ember/helper' {
      * 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
      */
     export const gt: GtHelper;
     export interface GtHelper extends Opaque<"helper:gt"> {
@@ -480,21 +562,23 @@ declare module '@ember/helper' {
      * 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
      */
     export const gte: GteHelper;
     export interface GteHelper extends Opaque<"helper:gte"> {
@@ -503,21 +587,23 @@ declare module '@ember/helper' {
      * 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
      */
     export const lt: LtHelper;
     export interface LtHelper extends Opaque<"helper:lt"> {
@@ -526,21 +612,23 @@ declare module '@ember/helper' {
      * 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
      */
     export const lte: LteHelper;
     export interface LteHelper extends Opaque<"helper:lte"> {
@@ -548,9 +636,7 @@ declare module '@ember/helper' {
     /**
      * 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>
@@ -562,8 +648,15 @@ declare module '@ember/helper' {
      * 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
      */
     export const element: ElementHelper;
     export interface ElementHelper extends Opaque<"helper:element"> {
@@ -575,7 +668,7 @@ declare module '@ember/helper' {
      * 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>
@@ -585,6 +678,13 @@ declare module '@ember/helper' {
      *   {{/let}}
      * </template>
      * ```
+     *
+     * @method uniqueId
+     * @for @ember/helper
+     * @public
+     * @static
+     * @exampleimport import { uniqueId } from '@ember/helper';
+     * @since 4.4.0
      */
     export const uniqueId: typeof glimmerUniqueId;
     export type UniqueIdHelper = typeof uniqueId;
@@ -592,21 +692,23 @@ declare module '@ember/helper' {
      * 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
      */
     export const eq: EqHelper;
     export interface EqHelper extends Opaque<"helper:eq"> {
@@ -615,21 +717,23 @@ declare module '@ember/helper' {
      * 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
      */
     export const neq: NeqHelper;
     export interface NeqHelper extends Opaque<"helper:neq"> {
@@ -639,20 +743,22 @@ declare module '@ember/helper' {
      * 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
      */
     export const and: AndHelper;
     export interface AndHelper extends Opaque<"helper:and"> {
@@ -662,9 +768,7 @@ declare module '@ember/helper' {
      * 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>
@@ -676,6 +780,11 @@ declare module '@ember/helper' {
      * @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
      */
     export const or: OrHelper;
     export interface OrHelper extends Opaque<"helper:or"> {
@@ -684,9 +793,7 @@ declare module '@ember/helper' {
      * 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>
@@ -698,8 +805,922 @@ declare module '@ember/helper' {
      * @method not
      * @param {unknown} value The value to negate
      * @return {boolean}
+     * @for Keywords
+     * @noimport
+     * @static
+     * @since 7.1.0
+     * @public
      */
     export const not: NotHelper;
     export interface NotHelper extends Opaque<"helper:not"> {
     }
+    /**
+      `{{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
+     */
 }