feat: new default template

The default template for all createMachine components is now `{{yield this.state this.send}}` to remove common boilerplate
NullVoxPopuli · Apr 23, 2021 · e3be573 · e3be573
1 parent a7439eb
commit e3be573
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -31,10 +31,6 @@ export default createMachine({
   },
 });
 ```
-```hbs
-{{!-- app/components/toggle.hbs --}}
-{{yield this.state this.send}}
-```
 
 Usage of this "toggle" component:
 
@@ -48,6 +44,13 @@ Usage of this "toggle" component:
 </Toggle>
 ```
 
+The default template for every `createMachine(..)` is
+```hbs
+{{yield this.state this.send}}
+```
+but that can be overriden to suit your needs by defining your own template.
+the `this` is an instance of the [XState Interpreter](https://xstate.js.org/api/classes/interpreter.html)
+
 ### API
 
 #### `@config`

diff --git a/addon/instance-initializers/ember-statechart-component-setup.ts b/addon/instance-initializers/ember-statechart-component-setup.ts
@@ -1,12 +1,16 @@
-import { setComponentManager } from '@ember/component';
+import { setComponentManager, setComponentTemplate } from '@ember/component';
+import { hbs } from 'ember-cli-htmlbars';
 
 import ComponentManager from 'ember-statechart-component/-private/statechart-manager';
 import { StateNode } from 'xstate';
 
 // Managers are managed globally, and not per app instance
 setComponentManager((owner) => ComponentManager.create(owner), StateNode.prototype);
+setComponentTemplate(hbs`{{yield this.state this.send}}`, StateNode.prototype);
 
-export function initialize(): void {}
+export function initialize(): void {
+  /* intentionally empty */
+}
 
 export default {
   initialize,

diff --git a/tests/integration/usage-test.ts b/tests/integration/usage-test.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { setComponentTemplate } from '@ember/component';
 import { clearRender, render } from '@ember/test-helpers';
 import click from '@ember/test-helpers/dom/click';
 import { hbs } from 'ember-cli-htmlbars';
@@ -15,18 +14,13 @@ module('Usage', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it works', async function (assert) {
-    let toggle = setComponentTemplate(
-      hbs`
-        {{yield this.state this.send}}
-      `,
-      createMachine({
-        initial: 'inactive',
-        states: {
-          inactive: { on: { TOGGLE: 'active' } },
-          active: { on: { TOGGLE: 'inactive' } },
-        },
-      })
-    );
+    let toggle = createMachine({
+      initial: 'inactive',
+      states: {
+        inactive: { on: { TOGGLE: 'active' } },
+        active: { on: { TOGGLE: 'inactive' } },
+      },
+    });
 
     this.owner.register('component:toggle-machine', toggle);
 
@@ -49,18 +43,13 @@ module('Usage', function (hooks) {
   });
 
   test('can pass config', async function (assert) {
-    let toggle = setComponentTemplate(
-      hbs`
-        {{yield this.state this.send}}
-      `,
-      createMachine({
-        initial: 'inactive',
-        states: {
-          inactive: { entry: 'increment', on: { TOGGLE: 'active' } },
-          active: { entry: 'increment', on: { TOGGLE: 'inactive' } },
-        },
-      })
-    );
+    let toggle = createMachine({
+      initial: 'inactive',
+      states: {
+        inactive: { entry: 'increment', on: { TOGGLE: 'active' } },
+        active: { entry: 'increment', on: { TOGGLE: 'inactive' } },
+      },
+    });
 
     this.owner.register('component:toggle-machine', toggle);
 
@@ -92,31 +81,26 @@ module('Usage', function (hooks) {
   });
 
   test('can pass context', async function (assert) {
-    let toggle = setComponentTemplate(
-      hbs`
-        {{yield this.state this.send}}
-      `,
-      createMachine({
-        initial: 'inactive',
-        context: {
-          numCalled: 0,
+    let toggle = createMachine({
+      initial: 'inactive',
+      context: {
+        numCalled: 0,
+      },
+      states: {
+        inactive: {
+          entry: assign({
+            numCalled: (ctx: any) => ctx.numCalled + 1,
+          }),
+          on: { TOGGLE: 'active' },
         },
-        states: {
-          inactive: {
-            entry: assign({
-              numCalled: (ctx: any) => ctx.numCalled + 1,
-            }),
-            on: { TOGGLE: 'active' },
-          },
-          active: {
-            entry: assign({
-              numCalled: (ctx: any) => ctx.numCalled + 1,
-            }),
-            on: { TOGGLE: 'inactive' },
-          },
+        active: {
+          entry: assign({
+            numCalled: (ctx: any) => ctx.numCalled + 1,
+          }),
+          on: { TOGGLE: 'inactive' },
         },
-      })
-    );
+      },
+    });
 
     this.owner.register('component:toggle-machine', toggle);
 
@@ -150,18 +134,13 @@ module('Usage', function (hooks) {
   });
 
   test('can pass initial state', async function (assert) {
-    let toggle = setComponentTemplate(
-      hbs`
-        {{yield this.state this.send}}
-      `,
-      createMachine({
-        initial: 'inactive',
-        states: {
-          inactive: { on: { TOGGLE: 'active' } },
-          active: { on: { TOGGLE: 'inactive' } },
-        },
-      })
-    );
+    let toggle = createMachine({
+      initial: 'inactive',
+      states: {
+        inactive: { on: { TOGGLE: 'active' } },
+        active: { on: { TOGGLE: 'inactive' } },
+      },
+    });
 
     let previousState: State<unknown> | null = null;