progress

Author: NullVoxPopuli

addon/usables/use-machine.ts

@@ -20,12 +20,11 @@ import { tracked } from '@glimmer/tracking';
 import { DEBUG } from '@glimmer/env';
 import { later, cancel } from '@ember/runloop';
 import { getOwner, setOwner } from '@ember/application';
-import { warn } from '@ember/debug';
+import { assert, warn } from '@ember/debug';
 import { action } from '@ember/object';
 
 import { use, Resource } from 'ember-could-get-used-to-this';
 
-
 export const ARGS_STATE_CHANGE_WARNING =
   'A change to passed `args` or a local state change triggered an update to a `useMachine`-usable. You can send a dedicated event to the machine or restart it so this is handled. This is done via the `.update`-hook of the `useMachine`-usable.';
 
@@ -58,25 +57,40 @@ export type UsableStatechart<
   | MachineConfig<TContext, TStateSchema, TEvent>
   | StateMachine<TContext, TStateSchema, TEvent, TTypestate>;
 
+type Args<
+  TContext,
+  TStateSchema,
+  TEvent extends EventObject,
+  TTypestate extends Typestate<TContext>
+> = {
+  machine: UsableStatechart<TContext, TStateSchema, TEvent, TTypestate>;
+  interpreterOptions: Partial<InterpreterOptions>;
+  onTransition?: StateListener<TContext, TEvent, TStateSchema, TTypestate>;
+};
+
 export class Statechart<
   TContext,
   TStateSchema extends StateSchema,
   TEvent extends EventObject,
   TTypestate extends Typestate<TContext>
-> extends Resource {
-  @tracked service!: Interpreter<TContext, TStateSchema, TEvent, TTypestate>;
-  @tracked _state!: State<TContext, TEvent, TStateSchema, TTypestate>;
+> extends Resource<Args<TContext, TStateSchema, TEvent, TTypestate>> {
+  @tracked service?: Interpreter<TContext, TStateSchema, TEvent, TTypestate> = undefined;
+  // current state of the machine,
+  // set onTransition, which is configured during setup
+  @tracked _state?: State<TContext, TEvent, TStateSchema, TTypestate> = undefined;
 
   machine: StateMachine<TContext, TStateSchema, TEvent, TTypestate>;
   interpreterOptions: Partial<InterpreterOptions>;
-  _onTransition: StateListener<TContext, TEvent, TStateSchema, TTypestate> | undefined = undefined;
 
-  constructor(
-    machine: UsableStatechart<TContext, TStateSchema, TEvent, TTypestate>,
-    interpreterOptions: Partial<InterpreterOptions>,
-    onTransition?: StateListener<TContext, TEvent, TStateSchema, TTypestate>
-  ) {
-    super(...arguments);
+  declare _onTransition: StateListener<TContext, TEvent, TStateSchema, TTypestate> | undefined;
+  declare _config: Partial<MachineOptions<TContext, TEvent>>;
+  declare _context: TContext;
+
+  constructor(owner: unknown, args: Args<TContext, TStateSchema, TEvent, TTypestate>) {
+    super(owner, args);
+
+    let { machine } = args;
+    const { interpreterOptions, onTransition } = args;
 
     machine = machine instanceof StateNode ? machine : createMachine(machine);
 
@@ -85,26 +99,28 @@ export class Statechart<
     this._onTransition = onTransition;
   }
 
-  get state(): {
-    state: State<TContext, TEvent, TStateSchema, TTypestate>;
-    send: Send<TContext, TStateSchema, TEvent, TTypestate>;
-    service: Interpreter<TContext, TStateSchema, TEvent, TTypestate>;
-  } {
+  get state() {
+    if (!this.service) {
+      this.setup();
+    }
+
+    assert(`Machine setup failed`, this.service);
+
     return {
       state: this._state,
       send: this.service.send,
       service: this.service,
     };
   }
 
+  // used when this Resource is used as a helper
   get value() {
-    // TODO: lazily call setup, as we don't know if the call site has .withContext or .withConfig
-    return "foo";
+    return this.state;
   }
 
   @action
-  send() {
-    this.service.send(...arguments);
+  send(...args: Parameters<Interpreter<TContext, TStateSchema, TEvent, TTypestate>['send']>) {
+    this.state.service.send(...args);
   }
 
   @action
@@ -113,7 +129,6 @@ export class Statechart<
     return this;
   }
 
-
   @action
   withContext(context: TContext) {
     this._context = context;
@@ -128,7 +143,6 @@ export class Statechart<
     return this;
   }
 
-
   setup(
     setupOptions: {
       initialState?: State<TContext, TEvent, TStateSchema, TTypestate> | StateValue;
@@ -159,6 +173,8 @@ export class Statechart<
   }
 
   teardown(): void {
+    if (!this.service) return;
+
     this.service.stop();
   }
 }

package.json

@@ -27,23 +27,23 @@
     "postpublish": "ember ts:clean"
   },
   "dependencies": {
-    "@glimmer/tracking": "^1.0.2",
-    "ember-auto-import": "^1.8.0",
+    "@glimmer/tracking": "^1.0.3",
+    "ember-auto-import": "^1.9.0",
     "ember-cli-babel": "^7.23.0",
     "ember-cli-htmlbars": "^5.3.1",
-    "ember-cli-typescript": "^3.1.4",
+    "ember-cli-typescript": "^4.0.0",
     "ember-could-get-used-to-this": "^1.0.1",
     "xstate": "^4.12.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^1.0.2",
-    "@glimmer/component": "^1.0.2",
+    "@glimmer/component": "^1.0.3",
     "@release-it/conventional-changelog": "^1.1.4",
-    "@types/ember": "^3.16.0",
-    "@types/ember-qunit": "^3.4.9",
-    "@types/ember__test-helpers": "^1.7.2",
-    "@types/qunit": "^2.9.1",
+    "@types/ember": "^3.16.2",
+    "@types/ember-qunit": "^3.4.13",
+    "@types/ember__test-helpers": "^1.7.3",
+    "@types/qunit": "^2.11.1",
     "@types/rsvp": "^4.0.3",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
@@ -89,7 +89,7 @@
     "prettier": "^2.0.2",
     "qunit-dom": "^1.5.0",
     "release-it": "^13.6.2",
-    "typescript": "^4.0.2"
+    "typescript": "^4.1.3"
   },
   "engines": {
     "node": "10.* || >= 12"

types/ember-could-get-used-to-this.d.ts

@@ -0,0 +1,5 @@
+export function use(prototypeOrThis: unknown, keyOrDef: string): void;
+
+export class Resource<T> {
+  constructor(owner: unknown, args: T);
+}