ember-source 7.1.0-beta.1 → 7.1.0

package/types/stable/@ember/routing/router-service.d.ts

@@ -17,7 +17,7 @@ declare module '@ember/routing/router-service' {
        In this example, the Router service is injected into a component to initiate a transition
        to a dedicated route:
 
-       ```app/components/example.js
+       ```app/components/example.gjs
        import Component from '@glimmer/component';
        import { action } from '@ember/object';
        import { service } from '@ember/service';
@@ -58,7 +58,7 @@ declare module '@ember/routing/router-service' {
            specific model from a Component in the first action, and in the second we trigger
            a query-params only transition.
       
-           ```app/components/example.js
+           ```app/components/example.gjs
            import Component from '@glimmer/component';
            import { action } from '@ember/object';
            import { service } from '@ember/service';
@@ -137,11 +137,15 @@ declare module '@ember/routing/router-service' {
           In this example, the URL for the `author.books` route for a given author
           is copied to the clipboard.
       
-          ```app/templates/application.hbs
-          <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+          ```app/templates/application.gjs
+          import CopyLink from '../components/copy-link';
+            
+          <template>
+            <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+          </template>
           ```
       
-          ```app/components/copy-link.js
+          ```app/components/copy-link.gjs
           import Component from '@glimmer/component';
           import { service } from '@ember/service';
           import { action } from '@ember/object';
@@ -164,11 +168,15 @@ declare module '@ember/routing/router-service' {
           Just like with `transitionTo` and `replaceWith`, `urlFor` can also handle
           query parameters.
       
-          ```app/templates/application.hbs
-          <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+          ```app/templates/application.gjs
+          import CopyLink from '../components/copy-link';
+      
+          <template>
+            <CopyLink @author={{hash id="tomster" name="Tomster"}} />
+          </template>
           ```
       
-          ```app/components/copy-link.js
+          ```app/components/copy-link.gjs
           import Component from '@glimmer/component';
           import { service } from '@ember/service';
           import { action } from '@ember/object';
@@ -206,7 +214,7 @@ declare module '@ember/routing/router-service' {
       
            In the following example, `isActive` will return `true` if the current route is `/posts`.
       
-           ```app/components/posts.js
+           ```app/components/posts.gjs
            import Component from '@glimmer/component';
            import { service } from '@ember/service';
       
@@ -222,7 +230,7 @@ declare module '@ember/routing/router-service' {
            The next example includes a dynamic segment, and will return `true` if the current route is `/posts/1`,
            assuming the post has an id of 1:
       
-           ```app/components/posts.js
+           ```app/components/posts.gjs
            import Component from '@glimmer/component';
            import { service } from '@ember/service';
       
@@ -257,7 +265,7 @@ declare module '@ember/routing/router-service' {
            In the following example `recognize` is used to verify if a path belongs to our
            application before transitioning to it.
       
-           ```
+           ```js
            import Component from '@ember/component';
            import { service } from '@ember/service';
       
@@ -568,7 +576,7 @@ declare module '@ember/routing/router-service' {
           and doesn't change the active route).
       
           Usage example:
-          ```app/components/header.js
+          ```app/components/header.gjs
             import Component from '@glimmer/component';
             import { service } from '@ember/service';
             import { notEmpty } from '@ember/object/computed';

package/types/stable/@glimmer/runtime/lib/helpers/array.d.ts

@@ -12,7 +12,7 @@ declare module '@glimmer/runtime/lib/helpers/array' {
        ```
         or
        ```handlebars
-       {{my-component people=(array
+       {{yield people=(array
          'Tom Dale'
          'Yehuda Katz'
          this.myOtherPerson)

package/types/stable/@glimmer/runtime/lib/helpers/concat.d.ts

@@ -4,10 +4,15 @@ declare module '@glimmer/runtime/lib/helpers/concat' {
 
       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.

package/types/stable/@glimmer/runtime/lib/helpers/fn.d.ts

@@ -9,13 +9,17 @@ declare module '@glimmer/runtime/lib/helpers/fn' {
       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';
 
@@ -26,7 +30,7 @@ declare module '@glimmer/runtime/lib/helpers/fn' {
       }
       ```
 
-      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.
@@ -43,7 +47,7 @@ declare module '@glimmer/runtime/lib/helpers/fn' {
       `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 {
@@ -60,6 +64,8 @@ declare module '@glimmer/runtime/lib/helpers/fn' {
 
       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
     */

package/types/stable/@glimmer/runtime/lib/helpers/get.d.ts

@@ -5,28 +5,31 @@ declare module '@glimmer/runtime/lib/helpers/get' {
 
       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
@@ -36,10 +39,11 @@ declare module '@glimmer/runtime/lib/helpers/get' {
       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",
@@ -51,28 +55,16 @@ declare module '@glimmer/runtime/lib/helpers/get' {
         showFact = (fact) => {
           this.currentFact = fact;
         }
-      }
-      ```
-
-      ```app/components/developer-detail.js
-      {{get this.developer this.currentFact}}
+        
+        <template>
+          {{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>
-      ```
-
-      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/types/stable/@glimmer/runtime/lib/helpers/hash.d.ts

@@ -1,7 +1,7 @@
 declare module '@glimmer/runtime/lib/helpers/hash' {
     /**
        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/types/stable/@glimmer/syntax/lib/get-template-locals.d.ts

@@ -4,7 +4,7 @@ declare module '@glimmer/syntax/lib/get-template-locals' {
         includeHtmlElements?: boolean;
     }
     /**
-     * Parses and traverses a given handlebars html template to extract all template locals
+     * Parses and traverses a given template to extract all template locals
      * referenced that could possible come from the parent scope. Can exclude known keywords
      * optionally.
      */

package/types/stable/@glimmer/tracking/index.d.ts

@@ -20,17 +20,7 @@ declare module '@glimmer/tracking' {
       property changes, any templates that used that property, directly or
       indirectly, will rerender. For instance, consider this component:
 
-      ```handlebars
-      <div>Count: {{this.count}}</div>
-      <div>Times Ten: {{this.timesTen}}</div>
-      <div>
-        <button {{on "click" this.plusOne}}>
-          Plus One
-        </button>
-      </div>
-      ```
-
-      ```javascript
+      ```gjs
       import Component from '@glimmer/component';
       import { tracked } from '@glimmer/tracking';
       import { action } from '@ember/object';
@@ -46,6 +36,16 @@ declare module '@glimmer/tracking' {
         plusOne() {
           this.count += 1;
         }
+        
+        <template>
+          <div>Count: {{this.count}}</div>
+          <div>Times Ten: {{this.timesTen}}</div>
+          <div>
+            <button {{on "click" this.plusOne}}>
+              Plus One
+            </button>
+          </div>
+        </template>
       }
       ```
 
@@ -55,7 +55,7 @@ declare module '@glimmer/tracking' {
       will cause a rerender when updated - this includes through method calls and
       other means:
 
-      ```javascript
+      ```gjs
       import Component from '@glimmer/component';
       import { tracked } from '@glimmer/tracking';