Merge pull request #503 from NullVoxPopuli/fix-matches

Fix .matches alias method

Author: NullVoxPopuli

ember-statechart-component/src/-private/statechart-manager.js

@@ -13,6 +13,21 @@ const STOP = Symbol.for('__ESM__STOP__');
 const START = Symbol.for('__ESM__START__');
 const HANDLE_UPDATE = Symbol.for('__ESM__HANDLE_UPDATE__');
 
+/**
+ * https://stately.ai/docs/migration#the-statetostrings-method-has-been-removed
+ */
+function getStateValueStrings(stateValue) {
+  if (typeof stateValue === 'string') {
+    return [stateValue];
+  }
+
+  const valueKeys = Object.keys(stateValue);
+
+  return valueKeys.concat(
+    ...valueKeys.map((key) => getStateValueStrings(stateValue[key]).map((s) => key + '.' + s))
+  );
+}
+
 class ReactiveActor {
   /**
    * @private
@@ -39,10 +54,11 @@ class ReactiveActor {
   /**
    * @type {import('xstate').Snapshot['matches']}
    */
-  matches = (...args) => this.actor.matches(...args);
+  matches = (...args) => this.snapshot.matches(...args);
 
   /**
-   * The dot-separated name of the current state
+   * The dot-separated name of the current state.
+   * If multiple states are active, those well be comma-separated
    */
   get statePath() {
     let x = this.value;
@@ -54,8 +70,7 @@ class ReactiveActor {
     if (typeof x === 'object') {
       if (!x) return '';
 
-      if ('toStrings' in x) return x.toStrings();
-      if ('toString' in x) return x.toString();
+      return getStateValueStrings(x).join(',');
     }
 
     return `${x}`;

ember-statechart-component/src/public-types.d.ts

@@ -160,6 +160,12 @@ interface Signature<
          */
         send: typeof send;
 
+        /**
+         * Alias for snapshot.matches,
+         * returns true of the passed state path is active.
+         */
+        matches: (statePath: string) => boolean;
+
         /**
          * The Machine's Snapshot
          */

test-app/tests/integration/usage-test.gts

@@ -143,6 +143,40 @@ module('Usage', function (hooks) {
     assert.dom().containsText('The active state');
   });
 
+  test(`it can use the wrapped matches function`, async function (assert) {
+    const Toggle = createMachine({
+      initial: 'inactive',
+      states: {
+        inactive: { on: { TOGGLE: 'active' } },
+        active: { on: { TOGGLE: 'inactive' } },
+      },
+    });
+
+    await render(
+      <template>
+        <Toggle as |toggler|>
+          {{#if (call toggler toggler.matches "inactive")}}
+            The inactive state
+          {{else if (call toggler toggler.matches "active")}}
+            The active state
+          {{else}}
+            Unknown state
+          {{/if}}
+
+          <button type="button" {{on "click" (fn toggler.send "TOGGLE")}}>
+            Toggle
+          </button>
+        </Toggle>
+      </template>
+    );
+
+    assert.dom().containsText('The inactive state');
+
+    await click('button');
+
+    assert.dom().containsText('The active state');
+  });
+
   test('multiple invocations have their own state', async function (assert) {
     const Toggle = createMachine({
       initial: 'inactive',