feat: basic reactivity implemented

BREAKING CHANGE: first release

.eslintrc.js

@@ -1,54 +1,5 @@
 'use strict';
 
-module.exports = {
-  root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
-    },
-  },
-  plugins: ['ember'],
-  extends: [
-    'eslint:recommended',
-    'plugin:ember/recommended',
-    'plugin:prettier/recommended',
-  ],
-  env: {
-    browser: true,
-  },
-  rules: {},
-  overrides: [
-    // node files
-    {
-      files: [
-        '.eslintrc.js',
-        '.prettierrc.js',
-        '.template-lintrc.js',
-        'ember-cli-build.js',
-        'index.js',
-        'testem.js',
-        'blueprints/*/index.js',
-        'config/**/*.js',
-        'tests/dummy/config/**/*.js',
-      ],
-      excludedFiles: [
-        'addon/**',
-        'addon-test-support/**',
-        'app/**',
-        'tests/dummy/app/**',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-      env: {
-        browser: false,
-        node: true,
-      },
-      plugins: ['node'],
-      extends: ['plugin:node/recommended'],
-    },
-  ],
-};
+const { configs } = require('@nullvoxpopuli/eslint-configs');
+
+module.exports = configs.ember();

README.md

@@ -7,9 +7,8 @@ ember-statechart-component
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.16 or above
-* Ember CLI v2.13 or above
-* Node.js v10 or above
+* Ember.js v3.25 or above
+* Node.js v12 or above
 
 
 Installation

addon/-private/proxy.ts

@@ -0,0 +1,38 @@
+import { assert } from '@ember/debug';
+import { get as consumeTag, notifyPropertyChange as dirtyKey } from '@ember/object';
+
+import { tracked, TrackedWeakMap } from 'tracked-built-ins';
+
+import type { Interpreter } from 'xstate';
+
+const CACHE = new TrackedWeakMap<Interpreter<unknown>, Record<string, unknown>>();
+
+export function reactiveInterpreter(interpreter: Interpreter<unknown>) {
+  CACHE.set(interpreter, tracked({}));
+
+  interpreter.onTransition(() => {
+    dirtyState(interpreter);
+  });
+
+  return new Proxy(interpreter, {
+    get(target, key, receiver) {
+      if (key === '_state') {
+        let tracking = CACHE.get(target);
+
+        assert(`Tracking context lost!`, tracking);
+
+        consumeTag(tracking, key);
+      }
+
+      return Reflect.get(target, key, receiver);
+    },
+  });
+}
+
+function dirtyState(interpreter: Interpreter<unknown>) {
+  let tracking = CACHE.get(interpreter);
+
+  assert(`Tracking context lost!`, tracking);
+
+  dirtyKey(tracking, '_state');
+}

addon/-private/statechart-manager.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// TODO: remove all the any types -- xstate requires too many generics
+import { DEBUG } from '@glimmer/env';
+import { getOwner, setOwner } from '@ember/application';
+import { capabilities } from '@ember/component';
+import { destroy, isDestroying } from '@ember/destroyable';
+import { cancel, later } from '@ember/runloop';
+
+import { interpret } from 'xstate';
+
+import { dirtyState, reactiveInterpreter } from './proxy';
+
+import type { Interpreter, StateNode } from 'xstate';
+
+export interface Args {
+  named: Record<string, unknown>;
+  positional: unknown[];
+}
+
+export default class ComponentManager {
+  capabilities = capabilities('3.13', {
+    destructor: true,
+    updateHook: true,
+  });
+
+  static create(attrs: unknown) {
+    let owner = getOwner(attrs);
+    let manager = new ComponentManager();
+
+    setOwner(manager, owner);
+
+    return manager;
+  }
+
+  createComponent(machine: StateNode, args: Args) {
+    let { named } = args;
+
+    if ('config' in named) {
+      machine = machine.withConfig(named.config as any);
+    }
+
+    if ('context' in named) {
+      machine = machine.withContext(named.context);
+    }
+
+    let interpreter = interpret(machine, {
+      devTools: DEBUG,
+      clock: {
+        setTimeout(fn, ms) {
+          return later.call(null, fn, ms);
+        },
+        clearTimeout(timer) {
+          return cancel.call(null, timer);
+        },
+      },
+    });
+
+    let withReactivity = reactiveInterpreter(interpreter);
+
+    withReactivity.start();
+
+    return withReactivity;
+  }
+
+  updateComponent(interpreter: Interpreter<any>, args: Args) {
+    interpreter.send('ARGS_UPDATE', args.named);
+  }
+
+  destroyComponent(interpreter: Interpreter<any>) {
+    if (isDestroying(interpreter)) {
+      return;
+    }
+
+    interpreter.stop();
+
+    destroy(interpreter);
+  }
+
+  getContext(interpreter: Interpreter<any>) {
+    return interpreter;
+  }
+}

addon/instance-initializers/ember-statechart-component-setup.ts

@@ -0,0 +1,19 @@
+import { setComponentManager } from '@ember/component';
+
+import ComponentManager from 'ember-statechart-component/-private/statechart-manager';
+import { StateNode } from 'xstate';
+
+import type ApplicationInstance from '@ember/application/instance';
+
+export function initialize(): void {
+  setComponentManager(
+    (owner: ApplicationInstance) => {
+      return ComponentManager.create(owner);
+    } /* hmm, it seems XState creates a totally new object here, so we have no prototype or superclass to checkt */,
+    StateNode.prototype
+  );
+}
+
+export default {
+  initialize,
+};

app/instance-initializers/ember-statechart-component-setup.js

@@ -0,0 +1,4 @@
+export {
+  default,
+  initialize,
+} from 'ember-statechart-component/instance-initializers/ember-statechart-component-setup';