ember-source 6.1.0-alpha.4 → 6.1.0-alpha.5

package/build-metadata.json

@@ -1,6 +1,6 @@
 {
-  "version": "6.1.0-alpha.4",
+  "version": "6.1.0-alpha.5",
   "buildType": "tag",
-  "SHA": "13d4340cd7596f95e42241ad5ec833dd8870f433",
-  "assetPath": "/tag/shas/13d4340cd7596f95e42241ad5ec833dd8870f433.tgz"
+  "SHA": "d228f82771b448d5b0359b731579d3ab083db135",
+  "assetPath": "/tag/shas/d228f82771b448d5b0359b731579d3ab083db135.tgz"
 }

package/dist/ember-template-compiler.js

@@ -5,7 +5,7 @@
  *            Portions Copyright 2008-2011 Apple Inc. All rights reserved.
  * @license   Licensed under MIT license
  *            See https://raw.github.com/emberjs/ember.js/master/LICENSE
- * @version   6.1.0-alpha.4
+ * @version   6.1.0-alpha.5
  */
 /* eslint-disable no-var */
 /* globals global globalThis self */
@@ -15651,7 +15651,7 @@ var define, require;
           }, Symbol.toStringTag, { value: 'Module' });
 
           // this file gets replaced with the real value during the build
-          const version = '6.1.0-alpha.4';
+          const version = '6.1.0-alpha.5';
 
           const emberVersion = /*#__PURE__*/Object.defineProperty({
                     __proto__: null,

package/dist/ember-testing.js

@@ -5,7 +5,7 @@
  *            Portions Copyright 2008-2011 Apple Inc. All rights reserved.
  * @license   Licensed under MIT license
  *            See https://raw.github.com/emberjs/ember.js/master/LICENSE
- * @version   6.1.0-alpha.4
+ * @version   6.1.0-alpha.5
  */
 /* eslint-disable no-var */
 /* globals global globalThis self */

package/dist/ember.debug.js

@@ -5,7 +5,7 @@
  *            Portions Copyright 2008-2011 Apple Inc. All rights reserved.
  * @license   Licensed under MIT license
  *            See https://raw.github.com/emberjs/ember.js/master/LICENSE
- * @version   6.1.0-alpha.4
+ * @version   6.1.0-alpha.5
  */
 /* eslint-disable no-var */
 /* globals global globalThis self */
@@ -3379,7 +3379,7 @@ var define, require;
           }, Symbol.toStringTag, { value: 'Module' });
 
           // this file gets replaced with the real value during the build
-          const Version = '6.1.0-alpha.4';
+          const Version = '6.1.0-alpha.5';
 
           const emberVersion = /*#__PURE__*/Object.defineProperty({
                     __proto__: null,

package/dist/ember.prod.js

@@ -5,7 +5,7 @@
  *            Portions Copyright 2008-2011 Apple Inc. All rights reserved.
  * @license   Licensed under MIT license
  *            See https://raw.github.com/emberjs/ember.js/master/LICENSE
- * @version   6.1.0-alpha.4
+ * @version   6.1.0-alpha.5
  */
 /* eslint-disable no-var */
 /* globals global globalThis self */
@@ -2620,7 +2620,7 @@ var define, require;
           }, Symbol.toStringTag, { value: 'Module' });
 
           // this file gets replaced with the real value during the build
-          const Version = '6.1.0-alpha.4';
+          const Version = '6.1.0-alpha.5';
 
           const emberVersion = /*#__PURE__*/Object.defineProperty({
                     __proto__: null,

package/dist/packages/ember/version.js

@@ -1,4 +1,4 @@
 // this file gets replaced with the real value during the build
-const Version = '6.1.0-alpha.4';
+const Version = '6.1.0-alpha.5';
 
 export { Version as default };

package/docs/data.json

@@ -3,7 +3,7 @@
     "name": "The Ember API",
     "description": "The Ember API: a framework for building ambitious web applications",
     "url": "https://emberjs.com/",
-    "version": "6.1.0-alpha.4"
+    "version": "6.1.0-alpha.5"
   },
   "files": {
     "node_modules/rsvp/lib/rsvp/promise/all.js": {
@@ -520,15 +520,6 @@
       "fors": {},
       "namespaces": {}
     },
-    "packages/@ember/-internals/glimmer/lib/glimmer-component-docs.ts": {
-      "name": "packages/@ember/-internals/glimmer/lib/glimmer-component-docs.ts",
-      "modules": {
-        "@glimmer/component": 1
-      },
-      "classes": {},
-      "fors": {},
-      "namespaces": {}
-    },
     "packages/@ember/-internals/glimmer/lib/glimmer-tracking-docs.ts": {
       "name": "packages/@ember/-internals/glimmer/lib/glimmer-tracking-docs.ts",
       "modules": {
@@ -1904,20 +1895,6 @@
       "file": "packages/@ember/-internals/glimmer/lib/utils/string.ts",
       "line": 7
     },
-    "@glimmer/component": {
-      "name": "@glimmer/component",
-      "submodules": {},
-      "elements": {},
-      "classes": {},
-      "fors": {},
-      "namespaces": {},
-      "tag": "module",
-      "file": "packages/@ember/-internals/glimmer/lib/glimmer-component-docs.ts",
-      "line": 1,
-      "description": "A component is a reusable UI element that consists of a `.hbs` template and an\noptional JavaScript class that defines its behavior. For example, someone\nmight make a `button` in the template and handle the click behavior in the\nJavaScript file that shares the same name as the template.\n\nComponents are broken down into two categories:\n\n- Components _without_ JavaScript, that are based only on a template. These\n  are called Template-only or TO components.\n- Components _with_ JavaScript, which consist of a template and a backing\n  class.\n\nEmber ships with two types of JavaScript classes for components:\n\n1. Glimmer components, imported from `@glimmer/component`, which are the\n   default components for Ember Octane (3.15) and more recent editions.\n2. Classic components, imported from `@ember/component`, which were the\n   default for older editions of Ember (pre 3.15).\n\nBelow is the documentation for Template-only and Glimmer components. If you\nare looking for the API documentation for Classic components, it is\n[available here](/ember/release/classes/Component). The source code for\nGlimmer components can be found in [`@glimmer/component`](https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/component).\n\n## Defining a Template-only Component\n\nThe simplest way to create a component is to create a template file in\n`app/templates/components`. For example, if you name a template\n`app/templates/components/person-profile.hbs`:\n\n```app/templates/components/person-profile.hbs\n<h1>{{@person.name}}</h1>\n<img src={{@person.avatar}}>\n<p class='signature'>{{@person.signature}}</p>\n```\n\nYou will be able to use `<PersonProfile />` to invoke this component elsewhere\nin your application:\n\n```app/templates/application.hbs\n<PersonProfile @person={{this.currentUser}} />\n```\n\nNote that component names are capitalized here in order to distinguish them\nfrom regular HTML elements, but they are dasherized in the file system.\n\nWhile the angle bracket invocation form is generally preferred, it is also\npossible to invoke the same component with the `{{person-profile}}` syntax:\n\n```app/templates/application.hbs\n{{person-profile person=this.currentUser}}\n```\n\nNote that with this syntax, you use dashes in the component name and\narguments are passed without the `@` sign.\n\nIn both cases, Ember will render the content of the component template we\ncreated above. The end result will be something like this:\n\n```html\n<h1>Tomster</h1>\n<img src=\"https://emberjs.com/tomster.jpg\">\n<p class='signature'>Out of office this week</p>\n```\n\n## File System Nesting\n\nComponents can be nested inside sub-folders for logical groupping. For\nexample, if we placed our template in\n`app/templates/components/person/short-profile.hbs`, we can invoke it as\n`<Person::ShortProfile />`:\n\n```app/templates/application.hbs\n<Person::ShortProfile @person={{this.currentUser}} />\n```\n\nOr equivalently, `{{person/short-profile}}`:\n\n```app/templates/application.hbs\n{{person/short-profile person=this.currentUser}}\n```\n\n## Using Blocks\n\nYou can use `yield` inside a template to include the **contents** of any block\nattached to the component. For instance, if we added a `{{yield}}` to our\ncomponent like so:\n\n```app/templates/components/person-profile.hbs\n<h1>{{@person.name}}</h1>\n{{yield}}\n```\n\nWe could then invoke it like this:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}}>\n  <p>Admin mode</p>\n</PersonProfile>\n```\n\nor with curly syntax like this:\n\n```handlebars\n{{#person-profile person=this.currentUser}}\n  <p>Admin mode</p>\n{{/person-profile}}\n```\n\nAnd the content passed in between the brackets of the component would be\nrendered in the same place as the `{{yield}}` within it, replacing it.\n\nBlocks are executed in their original context, meaning they have access to the\nscope and any in-scope variables where they were defined.\n\n### Passing parameters to blocks\n\nYou can also pass positional parameters to `{{yield}}`, which are then made\navailable in the block:\n\n```app/templates/components/person-profile.hbs\n<h1>{{@person.name}}</h1>\n{{yield @person.signature}}\n```\n\nWe can then use this value in the block like so:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}} as |signature|>\n  {{signature}}\n</PersonProfile>\n```\n\n### Passing multiple blocks\n\nYou can pass multiple blocks to a component by giving them names, and\nspecifying which block you are yielding to with `{{yield}}`. For instance, if\nwe wanted to add a way for users to customize the title of our\n`<PersonProfile>` component, we could add a named block inside of the header:\n\n```app/templates/components/person-profile.hbs\n<h1>{{yield to=\"title\"}}</h1>\n{{yield}}\n```\n\nThis component could then be invoked like so:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}}>\n  <:title>{{this.currentUser.name}}</:title>\n  <:default>{{this.currentUser.signature}}</:default>\n</PersonProfile>\n```\n\nWhen passing named blocks, you must name every block, including the `default`\nblock, which is the block that is defined if you do not pass a `to` parameter\nto `{{yield}}`. Whenever you invoke a component without passing explicitly\nnamed blocks, the passed block is considered the `default` block.\n\n### Passing parameters to named blocks\n\nYou can also pass parameters to named blocks:\n\n```app/templates/components/person-profile.hbs\n<h1>{{yield @person.name to=\"title\"}}</h1>\n{{yield @person.signature}}\n```\n\nThese parameters can then be used like so:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}}>\n  <:title as |name|>{{name}}</:title>\n  <:default as |signature|>{{signature}}</:default>\n</PersonProfile>\n```\n\n### Checking to see if a block exists\n\nYou can also check to see if a block exists using the `(has-block)` keyword,\nand conditionally use it, or provide a default template instead.\n\n```app/templates/components/person-profile.hbs\n<h1>\n  {{#if (has-block \"title\")}}\n    {{yield @person.name to=\"title\"}}\n  {{else}}\n    {{@person.name}}\n  {{/if}}\n</h1>\n\n{{#if (has-block)}}\n  {{yield @person.signature}}\n{{else}}\n  {{@person.signature}}\n{{/if}}\n```\n\nWith this template, we can then optionally pass in one block, both blocks, or\nnone at all:\n\n```handlebars\n{{! passing both blocks }}\n<PersonProfile @person={{this.currentUser}}>\n  <:title as |name|>{{name}}</:title>\n  <:default as |signature|>{{signature}}</:default>\n</PersonProfile>\n\n{{! passing just the title block }}\n<PersonProfile @person={{this.currentUser}}>\n  <:title as |name|>{{name}}</:title>\n</PersonProfile>\n\n{{! passing just the default block }}\n<PersonProfile @person={{this.currentUser}} as |signature|>\n  {{signature}}\n</PersonProfile>\n\n{{! not passing any blocks }}\n<PersonProfile @person={{this.currentUser}}/>\n```\n\n### Checking to see if a block has parameters\n\nWe can also check if a block receives parameters using the `(has-block-params)`\nkeyword, and conditionally yield different values if so.\n\n```app/templates/components/person-profile.hbs\n{{#if (has-block-params)}}\n  {{yield @person.signature}}\n{{else}}\n  {{yield}}\n{{/if}}\n```\n\n## Customizing Components With JavaScript\n\nTo add JavaScript to a component, create a JavaScript file in the same\nlocation as the template file, with the same name, and export a subclass\nof `Component` as the default value. For example, to add Javascript to the\n`PersonProfile` component which we defined above, we would create\n`app/components/person-profile.js` and export our class as the default, like\nso:\n\n```app/components/person-profile.js\nimport Component from '@glimmer/component';\n\nexport default class PersonProfileComponent extends Component {\n  get displayName() {\n    let { title, firstName, lastName } = this.args.person;\n\n    if (title) {\n      return `${title} ${lastName}`;\n    } else {\n      return `${firstName} ${lastName}`;\n    }\n  })\n}\n```\n\nYou can add your own properties, methods, and lifecycle hooks to this\nsubclass to customize its behavior, and you can reference the instance of the\nclass in your template using `{{this}}`. For instance, we could access the\n`displayName` property of our `PersonProfile` component instance in the\ntemplate like this:\n\n```app/templates/components/person-profile.hbs\n<h1>{{this.displayName}}</h1>\n{{yield}}\n```\n\n## `constructor`\n\nparams: `owner` object and `args` object\n\nConstructs a new component and assigns itself the passed properties. The\nconstructor is run whenever a new instance of the component is created, and\ncan be used to setup the initial state of the component.\n\n```javascript\nimport Component from '@glimmer/component';\n\nexport default class SomeComponent extends Component {\n  constructor(owner, args) {\n    super(owner, args);\n\n    if (this.args.displayMode === 'list') {\n      this.items = [];\n    }\n  }\n}\n```\n\nService injections and arguments are available in the constructor.\n\n```javascript\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class SomeComponent extends Component {\n  @service myAnimations;\n\n  constructor(owner, args) {\n    super(owner, args);\n\n    if (this.args.fadeIn === true) {\n      this.myAnimations.register(this, 'fade-in');\n    }\n  }\n}\n```\n\n## `willDestroy`\n\n`willDestroy` is called after the component has been removed from the DOM, but\nbefore the component is fully destroyed. This lifecycle hook can be used to\ncleanup the component and any related state.\n\n```javascript\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class SomeComponent extends Component {\n  @service myAnimations;\n\n  willDestroy() {\n    super.willDestroy(...arguments);\n\n    this.myAnimations.unregister(this);\n  }\n}\n```\n\n## `args`\n\nThe `args` property of Glimmer components is an object that contains the\n_arguments_ that are passed to the component. For instance, the\nfollowing component usage:\n\n```handlebars\n<SomeComponent @fadeIn={{true}} />\n```\n\nWould result in the following `args` object to be passed to the component:\n\n```javascript\n{ fadeIn: true }\n```\n\n`args` can be accessed at any point in the component lifecycle, including\n`constructor` and `willDestroy`. They are also automatically marked as tracked\nproperties, and they can be depended on as computed property dependencies:\n\n```javascript\nimport Component from '@glimmer/component';\nimport { computed } from '@ember/object';\n\nexport default class SomeComponent extends Component {\n\n  @computed('args.someValue')\n  get computedGetter() {\n    // updates whenever args.someValue updates\n    return this.args.someValue;\n  }\n\n  get standardGetter() {\n    // updates whenever args.anotherValue updates (Ember 3.13+)\n    return this.args.anotherValue;\n  }\n}\n```\n\n## `isDestroying`\n\nA boolean flag to tell if the component is in the process of destroying. This is set to\ntrue before `willDestroy` is called.\n\n## `isDestroyed`\nA boolean to tell if the component has been fully destroyed. This is set to true\nafter `willDestroy` is called.",
-      "access": "public",
-      "tagname": ""
-    },
     "@glimmer/tracking": {
       "name": "@glimmer/tracking",
       "submodules": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-source",
-  "version": "6.1.0-alpha.4",
+  "version": "6.1.0-alpha.5",
   "description": "A JavaScript framework for creating ambitious web applications",
   "keywords": [
     "ember-addon"
@@ -111,7 +111,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/types": "^7.22.5",
     "@embroider/shared-internals": "^2.5.0",
-    "@glimmer/component": "^1.1.2",
+    "@glimmer/component": "workspace:^",
     "@rollup/plugin-babel": "^6.0.4",
     "@simple-dom/document": "^1.4.0",
     "@swc-node/register": "^1.6.8",
@@ -173,7 +173,7 @@
     }
   },
   "peerDependencies": {
-    "@glimmer/component": "^1.1.2"
+    "@glimmer/component": ">= 1.1.2"
   },
   "engines": {
     "node": ">= 18.*"
@@ -372,7 +372,7 @@
     "node": "16.20.0",
     "pnpm": "8.10.0"
   },
-  "_originalVersion": "6.1.0-alpha.4",
+  "_originalVersion": "6.1.0-alpha.5",
   "_versionPreviouslyCalculated": true,
   "publishConfig": {
     "tag": "alpha"

package/types/publish.mjs

@@ -116,8 +116,7 @@ async function main() {
 
   // The majority of those items should be excluded entirely, but in some cases
   // we still need to post-process them.
-  let excludes = remappedLocationExcludes
-    .concat(sideEffectExcludes);
+  let excludes = remappedLocationExcludes.concat(sideEffectExcludes);
 
   // This is rooted in the `TYPES_DIR` so that the result is just the names of
   // the modules, as generated directly from the tsconfig above. These must
@@ -147,6 +146,17 @@ async function main() {
   // Make the generated types easier to read!
   spawnSync('prettier', ['--write', 'types/stable/**/*.ts']);
 
+  // @glimmer/component publishes as a separate package. We need to build its
+  // types after building the ember-source types.
+  doOrDie(() => {
+    let result = spawnSync('pnpm', ['tsc'], { cwd: 'packages/@glimmer/component' });
+    if (result.status !== 0) {
+      console.log(`@glimmer/component types build failed:`);
+      console.error(result.output.toString());
+      process.exit(1);
+    }
+  });
+
   process.exit(status === 'success' ? 0 : 1);
 }
 

package/types/stable/index.d.ts

@@ -66,7 +66,6 @@
 /// <reference path="./@ember/-internals/glimmer/lib/components/textarea.d.ts" />
 /// <reference path="./@ember/-internals/glimmer/lib/dom.d.ts" />
 /// <reference path="./@ember/-internals/glimmer/lib/environment.d.ts" />
-/// <reference path="./@ember/-internals/glimmer/lib/glimmer-component-docs.d.ts" />
 /// <reference path="./@ember/-internals/glimmer/lib/glimmer-tracking-docs.d.ts" />
 /// <reference path="./@ember/-internals/glimmer/lib/helper.d.ts" />
 /// <reference path="./@ember/-internals/glimmer/lib/helpers/-disallow-dynamic-resolution.d.ts" />

package/types/stable/@ember/-internals/glimmer/lib/glimmer-component-docs.d.ts

@@ -1,388 +0,0 @@
-declare module '@ember/-internals/glimmer/lib/glimmer-component-docs' {
-  /**
-      A component is a reusable UI element that consists of a `.hbs` template and an
-      optional JavaScript class that defines its behavior. For example, someone
-      might make a `button` in the template and handle the click behavior in the
-      JavaScript file that shares the same name as the template.
-
-      Components are broken down into two categories:
-
-      - Components _without_ JavaScript, that are based only on a template. These
-        are called Template-only or TO components.
-      - Components _with_ JavaScript, which consist of a template and a backing
-        class.
-
-      Ember ships with two types of JavaScript classes for components:
-
-      1. Glimmer components, imported from `@glimmer/component`, which are the
-         default components for Ember Octane (3.15) and more recent editions.
-      2. Classic components, imported from `@ember/component`, which were the
-         default for older editions of Ember (pre 3.15).
-
-      Below is the documentation for Template-only and Glimmer components. If you
-      are looking for the API documentation for Classic components, it is
-      [available here](/ember/release/classes/Component). The source code for
-      Glimmer components can be found in [`@glimmer/component`](https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/component).
-
-      ## Defining a Template-only Component
-
-      The simplest way to create a component is to create a template file in
-      `app/templates/components`. For example, if you name a template
-      `app/templates/components/person-profile.hbs`:
-
-      ```app/templates/components/person-profile.hbs
-      <h1>{{@person.name}}</h1>
-      <img src={{@person.avatar}}>
-      <p class='signature'>{{@person.signature}}</p>
-      ```
-
-      You will be able to use `<PersonProfile />` to invoke this component elsewhere
-      in your application:
-
-      ```app/templates/application.hbs
-      <PersonProfile @person={{this.currentUser}} />
-      ```
-
-      Note that component names are capitalized here in order to distinguish them
-      from regular HTML elements, but they are dasherized in the file system.
-
-      While the angle bracket invocation form is generally preferred, it is also
-      possible to invoke the same component with the `{{person-profile}}` syntax:
-
-      ```app/templates/application.hbs
-      {{person-profile person=this.currentUser}}
-      ```
-
-      Note that with this syntax, you use dashes in the component name and
-      arguments are passed without the `@` sign.
-
-      In both cases, Ember will render the content of the component template we
-      created above. The end result will be something like this:
-
-      ```html
-      <h1>Tomster</h1>
-      <img src="https://emberjs.com/tomster.jpg">
-      <p class='signature'>Out of office this week</p>
-      ```
-
-      ## File System Nesting
-
-      Components can be nested inside sub-folders for logical groupping. For
-      example, if we placed our template in
-      `app/templates/components/person/short-profile.hbs`, we can invoke it as
-      `<Person::ShortProfile />`:
-
-      ```app/templates/application.hbs
-      <Person::ShortProfile @person={{this.currentUser}} />
-      ```
-
-      Or equivalently, `{{person/short-profile}}`:
-
-      ```app/templates/application.hbs
-      {{person/short-profile person=this.currentUser}}
-      ```
-
-      ## Using Blocks
-
-      You can use `yield` inside a template to include the **contents** of any block
-      attached to the component. For instance, if we added a `{{yield}}` to our
-      component like so:
-
-      ```app/templates/components/person-profile.hbs
-      <h1>{{@person.name}}</h1>
-      {{yield}}
-      ```
-
-      We could then invoke it like this:
-
-      ```handlebars
-      <PersonProfile @person={{this.currentUser}}>
-        <p>Admin mode</p>
-      </PersonProfile>
-      ```
-
-      or with curly syntax like this:
-
-      ```handlebars
-      {{#person-profile person=this.currentUser}}
-        <p>Admin mode</p>
-      {{/person-profile}}
-      ```
-
-      And the content passed in between the brackets of the component would be
-      rendered in the same place as the `{{yield}}` within it, replacing it.
-
-      Blocks are executed in their original context, meaning they have access to the
-      scope and any in-scope variables where they were defined.
-
-      ### Passing parameters to blocks
-
-      You can also pass positional parameters to `{{yield}}`, which are then made
-      available in the block:
-
-      ```app/templates/components/person-profile.hbs
-      <h1>{{@person.name}}</h1>
-      {{yield @person.signature}}
-      ```
-
-      We can then use this value in the block like so:
-
-      ```handlebars
-      <PersonProfile @person={{this.currentUser}} as |signature|>
-        {{signature}}
-      </PersonProfile>
-      ```
-
-      ### Passing multiple blocks
-
-      You can pass multiple blocks to a component by giving them names, and
-      specifying which block you are yielding to with `{{yield}}`. For instance, if
-      we wanted to add a way for users to customize the title of our
-      `<PersonProfile>` component, we could add a named block inside of the header:
-
-      ```app/templates/components/person-profile.hbs
-      <h1>{{yield to="title"}}</h1>
-      {{yield}}
-      ```
-
-      This component could then be invoked like so:
-
-      ```handlebars
-      <PersonProfile @person={{this.currentUser}}>
-        <:title>{{this.currentUser.name}}</:title>
-        <:default>{{this.currentUser.signature}}</:default>
-      </PersonProfile>
-      ```
-
-      When passing named blocks, you must name every block, including the `default`
-      block, which is the block that is defined if you do not pass a `to` parameter
-      to `{{yield}}`. Whenever you invoke a component without passing explicitly
-      named blocks, the passed block is considered the `default` block.
-
-      ### Passing parameters to named blocks
-
-      You can also pass parameters to named blocks:
-
-      ```app/templates/components/person-profile.hbs
-      <h1>{{yield @person.name to="title"}}</h1>
-      {{yield @person.signature}}
-      ```
-
-      These parameters can then be used like so:
-
-      ```handlebars
-      <PersonProfile @person={{this.currentUser}}>
-        <:title as |name|>{{name}}</:title>
-        <:default as |signature|>{{signature}}</:default>
-      </PersonProfile>
-      ```
-
-      ### Checking to see if a block exists
-
-      You can also check to see if a block exists using the `(has-block)` keyword,
-      and conditionally use it, or provide a default template instead.
-
-      ```app/templates/components/person-profile.hbs
-      <h1>
-        {{#if (has-block "title")}}
-          {{yield @person.name to="title"}}
-        {{else}}
-          {{@person.name}}
-        {{/if}}
-      </h1>
-
-      {{#if (has-block)}}
-        {{yield @person.signature}}
-      {{else}}
-        {{@person.signature}}
-      {{/if}}
-      ```
-
-      With this template, we can then optionally pass in one block, both blocks, or
-      none at all:
-
-      ```handlebars
-      {{! passing both blocks }}
-      <PersonProfile @person={{this.currentUser}}>
-        <:title as |name|>{{name}}</:title>
-        <:default as |signature|>{{signature}}</:default>
-      </PersonProfile>
-
-      {{! passing just the title block }}
-      <PersonProfile @person={{this.currentUser}}>
-        <:title as |name|>{{name}}</:title>
-      </PersonProfile>
-
-      {{! passing just the default block }}
-      <PersonProfile @person={{this.currentUser}} as |signature|>
-        {{signature}}
-      </PersonProfile>
-
-      {{! not passing any blocks }}
-      <PersonProfile @person={{this.currentUser}}/>
-      ```
-
-      ### Checking to see if a block has parameters
-
-      We can also check if a block receives parameters using the `(has-block-params)`
-      keyword, and conditionally yield different values if so.
-
-      ```app/templates/components/person-profile.hbs
-      {{#if (has-block-params)}}
-        {{yield @person.signature}}
-      {{else}}
-        {{yield}}
-      {{/if}}
-      ```
-
-      ## Customizing Components With JavaScript
-
-      To add JavaScript to a component, create a JavaScript file in the same
-      location as the template file, with the same name, and export a subclass
-      of `Component` as the default value. For example, to add Javascript to the
-      `PersonProfile` component which we defined above, we would create
-      `app/components/person-profile.js` and export our class as the default, like
-      so:
-
-      ```app/components/person-profile.js
-      import Component from '@glimmer/component';
-
-      export default class PersonProfileComponent extends Component {
-        get displayName() {
-          let { title, firstName, lastName } = this.args.person;
-
-          if (title) {
-            return `${title} ${lastName}`;
-          } else {
-            return `${firstName} ${lastName}`;
-          }
-        })
-      }
-      ```
-
-      You can add your own properties, methods, and lifecycle hooks to this
-      subclass to customize its behavior, and you can reference the instance of the
-      class in your template using `{{this}}`. For instance, we could access the
-      `displayName` property of our `PersonProfile` component instance in the
-      template like this:
-
-      ```app/templates/components/person-profile.hbs
-      <h1>{{this.displayName}}</h1>
-      {{yield}}
-      ```
-
-      ## `constructor`
-
-      params: `owner` object and `args` object
-
-      Constructs a new component and assigns itself the passed properties. The
-      constructor is run whenever a new instance of the component is created, and
-      can be used to setup the initial state of the component.
-
-      ```javascript
-      import Component from '@glimmer/component';
-
-      export default class SomeComponent extends Component {
-        constructor(owner, args) {
-          super(owner, args);
-
-          if (this.args.displayMode === 'list') {
-            this.items = [];
-          }
-        }
-      }
-      ```
-
-      Service injections and arguments are available in the constructor.
-
-      ```javascript
-      import Component from '@glimmer/component';
-      import { service } from '@ember/service';
-
-      export default class SomeComponent extends Component {
-        @service myAnimations;
-
-        constructor(owner, args) {
-          super(owner, args);
-
-          if (this.args.fadeIn === true) {
-            this.myAnimations.register(this, 'fade-in');
-          }
-        }
-      }
-      ```
-
-      ## `willDestroy`
-
-      `willDestroy` is called after the component has been removed from the DOM, but
-      before the component is fully destroyed. This lifecycle hook can be used to
-      cleanup the component and any related state.
-
-      ```javascript
-      import Component from '@glimmer/component';
-      import { service } from '@ember/service';
-
-      export default class SomeComponent extends Component {
-        @service myAnimations;
-
-        willDestroy() {
-          super.willDestroy(...arguments);
-
-          this.myAnimations.unregister(this);
-        }
-      }
-      ```
-
-      ## `args`
-
-      The `args` property of Glimmer components is an object that contains the
-      _arguments_ that are passed to the component. For instance, the
-      following component usage:
-
-      ```handlebars
-      <SomeComponent @fadeIn={{true}} />
-      ```
-
-      Would result in the following `args` object to be passed to the component:
-
-      ```javascript
-      { fadeIn: true }
-      ```
-
-      `args` can be accessed at any point in the component lifecycle, including
-      `constructor` and `willDestroy`. They are also automatically marked as tracked
-      properties, and they can be depended on as computed property dependencies:
-
-      ```javascript
-      import Component from '@glimmer/component';
-      import { computed } from '@ember/object';
-
-      export default class SomeComponent extends Component {
-
-        @computed('args.someValue')
-        get computedGetter() {
-          // updates whenever args.someValue updates
-          return this.args.someValue;
-        }
-
-        get standardGetter() {
-          // updates whenever args.anotherValue updates (Ember 3.13+)
-          return this.args.anotherValue;
-        }
-      }
-      ```
-
-      ## `isDestroying`
-
-      A boolean flag to tell if the component is in the process of destroying. This is set to
-      true before `willDestroy` is called.
-
-      ## `isDestroyed`
-      A boolean to tell if the component has been fully destroyed. This is set to true
-      after `willDestroy` is called.
-
-      @module @glimmer/component
-      @public
-    */
-  export {};
-}