[Beta-release] `useMachine` #241

LevelbossMike · 2020-05-04T19:55:47Z

Fixes #235

Todos:

add a test for useMachine(this.args.machine) and figure out how to handle this - right now use would resetup the interpreter which probably isn't something useful
same as ^ but for local attributes passed to withConfig or withContext
add a test that makes sure service is cleaned up properly when parent gets destroyed

Releases on npm to try this out:

0.10.0-beta.0

NullVoxPopuli · 2020-05-05T00:07:47Z

Tryin' it out: NullVoxPopuli/emberclear#803

NullVoxPopuli · 2020-05-05T22:18:47Z

addon/usables/use-machine.js

+  createUsable(context, { machine }) {
+    const owner = getOwner(context);
+
+    const interpreter = new InterpreterService(machine);


we should check if this is a Machine or MachineConfig and create a Machine, if machine is a MachineConfig (to eliminate the need for side-effecting code in module-space -- as the XState docs have by default (cause it's easier to teach that way))

NullVoxPopuli · 2020-05-05T22:20:00Z

addon/usables/use-machine.js

+
+  setup() {
+    this.service = interpret(this.machine, {
+      clock: {


why is this clock here? / what's it for?

https://xstate.js.org/api/classes/interpreter.html#clock

The clock that is responsible for setting and clearing timeouts, such as delayed events and transitions.

We are making sure that we use the ember runloop when the xstate-interpreter schedules delays, transitions et al. This is important when we are testing etc.

NullVoxPopuli · 2020-05-05T22:20:18Z

addon/usables/use-machine.js

+  get state() {
+    return {
+      currentState: this.currentState,
+      send: this.service.send,


what about transition?

this.service refers to an interpreted machine - i.e. a xstate-Interpreter. In contrast to a Machine an Interpreter has no transition-method only a send-method. You just send events to an interpreter and the interpreter then figures out if it needs to transition into a new state.

I think I had just gotten confused with remembering my own code. I have a transition component action that just calls send

LevelbossMike · 2020-05-15T15:16:03Z

Can you add this to the type def, too?

will try - not entirely sure how to type this yet but I'll do my best

pangratz · 2020-05-15T17:42:10Z

Overall looks awesome, I'll give this a try on the weekend 🚀

pangratz · 2020-05-17T12:44:48Z

package.json

  },
  "devDependencies": {
    "@ember/optional-features": "^1.3.0",
    "@ember/render-modifiers": "^1.0.2",
    "@glimmer/component": "^1.0.0",
-    "@glimmer/tracking": "^1.0.0",


Is moving this to dependencies intended?

As long as we're good with dropping support for pre 3.15, I'd assume so ;)

I think I moved it because we use it in the usable. 🤔 will recheck

CHANGELOG.md

pangratz · 2020-05-17T14:59:21Z

addon/usables/use-machine.js

+
+  get state() {
+    return {
+      currentState: this.currentState,


If we name this state it's aligned to xstate/react and xstate/vue

maybe just.. current? since the getter is already state? we have the mental context that we're already getting the "state", but current would just mean the current version of it?

If we name this state it's aligned to xstate/react and
xstate/vue

I was thinking the same as I saw that 👍

ah, ignore me. I thought this was used in a different way. I'm 👍 on state

NullVoxPopuli · 2020-05-17T15:31:11Z

addon/index.js

+  return function () {
+    return {
+      get() {
+        return xstateMatchesState(state, this[statechartPropertyName].currentState.value);


this is still the only thing that doesn't sit right with me -- mostly because it's relying on an implicit property name.

I wonder if it makes sense to do something like:

class Foo { @use myInterpreter = useMachine(machineStuff); @matches(this.myInterpreter, 'someState'); isSomeState; }

idk.

This is how this works already.

class Foo { @use myInterpreter = useMachine(myMachine); @matchesState('busy', 'myInterpreter') isBusy; }

If you leave out the default property it checks the statechart-property. I think best is to make this this default property name configurable via a setting.

I think if possible to pass a 'this' property to a decorator, that would make the most sense intuitively, but I don't know if the decorators are evaluated before instantiation.

My gut on this is that matchesState is for a very imperitive style of consuming statecharts, and I think we should survey some people outside of the xstate community for feedback :/

I don't follow what you mean by imperative style for consuming. matchesState is reactive getter for matching against state patterns - it's just a decorator that makes it more ergonomical (arguably) to match against the current-state of the interpreter.

You could also do this when you wanted to react to state changes but @matchesState saves you some typing.

// @matchesState is literally doing the same thing get isBusy() { return matchesState('busy', this.statechart.state.value); }

I don't follow what you mean by imperative style for consuming.

Just that there is a magic, undeclared relationship with the property name of the useMachine value.

You could also do this when you wanted to react to state changes but @matchesState saves you some typing.

I think that's more inline with modern JS. Though, I'd switch the args:

get isBusy() { return matchesState(this.statechart.state.value, 'busy'); }

or even:

get isBusy() { return this.statechart.state.match('busy'); }

LevelbossMike · 2020-05-17T19:00:41Z

@NullVoxPopuli @pangratz updated PR with tests for assign-usage and reactivity. I also renamed currentState to state for better alignment with react and vue wrappers.

NullVoxPopuli · 2020-05-17T21:17:54Z

index.d.ts

+type Send<Context, Schema, Events extends EventObject> = Interpreter<Context, Schema, Events>['send'];
+
+type InterpretedUsable<Context, Schema, Events extends EventObject> = {
+  currentState: State<Context, Events>;


this needs to be updated as well

NullVoxPopuli · 2020-05-24T18:24:50Z

Just tried with embroider, and am currently getting this error:

Build Error (WaitForTrees)

unable to resolve package ember-resource from /tmp/.../ember-statecharts

ERROR Summary:

  - broccoliBuilderErrorStack: Error: unable to resolve package ember-resource from /tmp/embroider/dc7fab/node_modules/ember-statecharts
    at MovedPackageCache.resolve (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/package-cache.js:30:21)
    at /home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/package.js:164:38
    at Array.map (<anonymous>:null:null)
    at Package.get dependencies (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/package.js:157:22)
    at Package.<anonymous> (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/typescript-memoize/dist/memoize-decorator.js:67:52)
    at CompatAddons.linkNonCopiedDeps (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/compat/src/compat-addons.js:186:29)
    at /home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/compat/src/compat-addons.js:106:22
    at Array.forEach (<anonymous>:null:null)
    at CompatAddons.build (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/compat/src/compat-addons.js:70:48)
    at WaitForTrees.build (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/wait-for-trees.js:60:21)
    at TransformNodeWrapper.build (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/node_modules/broccoli/dist/wrappers/transform-node.js:67:39)
    at /home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/node_modules/broccoli/dist/builder.js:118:30
    at runMicrotasks (<anonymous>:null:null)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at Builder.build (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/node_modules/broccoli/dist/builder.js:137:13)
    at Builder.build (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/lib/models/builder.js:197:11)

  - code: [undefined]
  - codeFrame: unable to resolve package ember-resource from /tmp/embroider/dc7fab/node_modules/ember-statecharts
  - errorMessage: unable to resolve package ember-resource from /tmp/embroider/dc7fab/node_modules/ember-statecharts
        at WaitForTrees (@embroider/compat/addons)
-~- created here: -~-
    at new Plugin (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/node_modules/broccoli-plugin/dist/index.js:45:31)
    at new WaitForTrees (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/wait-for-trees.js:30:9)
    at CompatAddons.get tree [as tree] (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/compat/src/compat-addons.js:47:16)
    at CompatApp.augment (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/build-stage.js:57:64)
    at CompatApp.get tree (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/build-stage.js:26:50)
    at CompatApp.<anonymous> (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/typescript-memoize/dist/memoize-decorator.js:67:52)
    at new PackagerRunner (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/core/src/to-broccoli-plugin.js:10:26)
    at defaultPipeline (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/@embroider/compat/src/default-pipeline.js:35:12)
    at module.exports (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/ember-cli-build.js:125:12)
    at Builder.readBuildFile (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/lib/models/builder.js:49:14)
    at Builder.setupBroccoliBuilder (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/lib/models/builder.js:63:22)
    at new Builder (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/lib/models/builder.js:29:10)
    at ServeTask.run (/home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/lib/tasks/serve.js:49:7)
    at /home/preston/Development/NullVoxpopuli/emberclear/packages/frontend/node_modules/ember-cli/lib/models/command.js:238:24
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Still investigating, but want to document here as it may be relevant for someone in the future.

instead of in the Interpreter Service

…er things if desired (except the clock)

Co-authored-by: Clemens M�ller <[email protected]>

We want to be as aligned with other xstate framework wrappers as possible thus we from now on will use the same naming scheme as `xstate/react` and `xstate/vue`.

* rename currentState to state * expose this.service in types

LevelbossMike · 2020-06-05T15:35:34Z

@pangratz @NullVoxPopuli can you please recheck the PR? - getting ready to release useMachine 🎉

pangratz

BEAUTIFUL 🚢 🇮🇹

LevelbossMike · 2020-06-10T12:16:53Z

@NullVoxPopuli @pangratz This is now in and released as 0.10.0. Thanks for participating and all the help from both of you 👏

pangratz · 2020-06-10T13:29:22Z

YAPADAPADUUUUUU

LevelbossMike requested a review from pangratz May 4, 2020 19:55

NullVoxPopuli reviewed May 5, 2020

View reviewed changes

pangratz reviewed May 17, 2020

View reviewed changes

pangratz approved these changes May 17, 2020

View reviewed changes

pangratz reviewed May 17, 2020

View reviewed changes

NullVoxPopuli reviewed May 17, 2020

View reviewed changes

LevelbossMike force-pushed the use-machine branch from c351208 to b07eb81 Compare May 17, 2020 19:05

NullVoxPopuli reviewed May 17, 2020

View reviewed changes

This was referenced May 24, 2020

configure embroider to be on by default NullVoxPopuli/emberclear#784

Open

Unable to resolve [sub]package X from /tmp/.../direct-dependency embroider-build/embroider#459

Closed

API Design adopted-ember-addons/ember-keyboard#135

Merged

LevelbossMike and others added 12 commits June 4, 2020 17:46

feat: implement useMachine

b4b2155

chore: release 0.10.0-beta.0

223fe9a

feat: support machine configs

c9c471c

feat: Add type definitions

15569b7

fix: handle machine creation in useMachine function

96769be

instead of in the Interpreter Service

fix: allow interpreter options to be passed to override devTool / oth…

0fa019a

…er things if desired (except the clock)

fix: check for passed in machine

2cf1c0f

test: custom interpreterOptions can be passed

33396bc

feat: expose interpreted machine service

6c63289

test: teardown of @used interpreted machine service

6251c8f

test: interpreted machine service not resetup on args change

5e65846

test: createMachine works with useMachine

7089452

LevelbossMike and others added 9 commits June 4, 2020 17:46

test: args passed useMachine don't resetup service on changes

92da7fe

feat: warn about usable-updates on args/state changes

85cd021

fix: Update CHANGELOG.md v0.10.0-beta.0

84cb5b0

Co-authored-by: Clemens M�ller <[email protected]>

chore: rename currentState to state

abdccd4

We want to be as aligned with other xstate framework wrappers as possible thus we from now on will use the same naming scheme as `xstate/react` and `xstate/vue`.

test: useMachine works with xstate.actions#assign

dbaa2e0

test: reactivity based on useMachine-context

75317dd

chore: update types for latest changes

d0c3f34

* rename currentState to state * expose this.service in types

chore: remove unused send-method InterpreterService

2d5a159

chore: change ember-resource to ember-usable

479b42b

LevelbossMike force-pushed the use-machine branch from 2d0e112 to 479b42b Compare June 4, 2020 15:47

LevelbossMike added 7 commits June 4, 2020 17:55

chore: add release-it

d7f4a52

chore: release v0.10.0-beta.1

9f2f237

chore: update tutorial to use useMachine

ed64e24

chore: update statecharts to use useMachine

1f3e3f0

fix: or not working with new matchesState

118e163

chore: clarify matchesState default second param

a77d741

chore: add hint to legacy computed-macro - docs

330e626

LevelbossMike requested a review from pangratz June 5, 2020 15:34

LevelbossMike changed the title ~~[WIP][Beta-release] useMachine~~ [Beta-release] useMachine Jun 5, 2020

pangratz approved these changes Jun 9, 2020

View reviewed changes

LevelbossMike added 3 commits June 9, 2020 18:09

chore: update README.md with useMachine example

f0f51a2

chore: use yarn for installing packages on CI

d2ef48d

chore: release v0.10.0

cead4da

LevelbossMike merged commit 3aa997d into master Jun 10, 2020

LevelbossMike deleted the use-machine branch June 10, 2020 12:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Beta-release] `useMachine` #241

[Beta-release] `useMachine` #241

LevelbossMike commented May 4, 2020 •

edited

Loading

NullVoxPopuli commented May 5, 2020

NullVoxPopuli May 5, 2020

NullVoxPopuli May 5, 2020

LevelbossMike May 7, 2020 •

edited

Loading

NullVoxPopuli May 5, 2020

LevelbossMike May 7, 2020

NullVoxPopuli May 7, 2020 •

edited

Loading

LevelbossMike commented May 15, 2020

pangratz commented May 15, 2020

pangratz May 17, 2020 •

edited

Loading

NullVoxPopuli May 17, 2020

LevelbossMike May 17, 2020

pangratz May 17, 2020

NullVoxPopuli May 17, 2020

LevelbossMike May 17, 2020

NullVoxPopuli May 17, 2020

NullVoxPopuli May 17, 2020

LevelbossMike May 17, 2020 •

edited

Loading

NullVoxPopuli May 17, 2020

LevelbossMike May 17, 2020 •

edited

Loading

NullVoxPopuli May 17, 2020

LevelbossMike commented May 17, 2020

NullVoxPopuli May 17, 2020

NullVoxPopuli commented May 24, 2020 •

edited

Loading

LevelbossMike commented Jun 5, 2020 •

edited

Loading

pangratz left a comment

LevelbossMike commented Jun 10, 2020

pangratz commented Jun 10, 2020

[Beta-release] useMachine #241

[Beta-release] useMachine #241

Conversation

LevelbossMike commented May 4, 2020 • edited Loading

Todos:

NullVoxPopuli commented May 5, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LevelbossMike May 7, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NullVoxPopuli May 7, 2020 • edited Loading

Choose a reason for hiding this comment

LevelbossMike commented May 15, 2020

pangratz commented May 15, 2020

pangratz May 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LevelbossMike May 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LevelbossMike May 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LevelbossMike commented May 17, 2020

Choose a reason for hiding this comment

NullVoxPopuli commented May 24, 2020 • edited Loading

LevelbossMike commented Jun 5, 2020 • edited Loading

pangratz left a comment

Choose a reason for hiding this comment

LevelbossMike commented Jun 10, 2020

pangratz commented Jun 10, 2020

[Beta-release] `useMachine` #241

[Beta-release] `useMachine` #241

LevelbossMike commented May 4, 2020 •

edited

Loading

LevelbossMike May 7, 2020 •

edited

Loading

NullVoxPopuli May 7, 2020 •

edited

Loading

pangratz May 17, 2020 •

edited

Loading

LevelbossMike May 17, 2020 •

edited

Loading

LevelbossMike May 17, 2020 •

edited

Loading

NullVoxPopuli commented May 24, 2020 •

edited

Loading

LevelbossMike commented Jun 5, 2020 •

edited

Loading