Patch Changes

• #119 743433d Thanks @tivac! - Support multiple invoked items per state

  Previously it would only use the last invocation at each state.

Minor Changes

• #117 0cec0db Thanks @tivac! - Add machine info to each result

  Otherwise root components of parallel sibling child machines can end up not being actually comparable.

  [
      [Object: null prototype] {
  +       machine: "(machine).child-one",
          path: false,
          component: [Function: child],
          props: false,
          children: []
      },
      [Object: null prototype] {
  +       machine: "(machine).child-two",
          path: false,
          component: [Function: child],
          props: false,
          children: []
      }
  ]
  

Patch Changes

• #115 51cfe5e Thanks @tivac! - Fix an issue where in specific situations child trees would not be built.

  If a child machine has an invoke that immediately triggers a no-op event, the ComponentTree instance wouldn't actually walk that child machine for components to render. This was due to an interesting interaction between the xstate .changed property and when invokes within the statechart are run.

  Now whenever the ComponentTree sees a new machine it hasn't walked is running, it will walk it.

Patch Changes

• 048060a Thanks @tivac! - Fix exports config

Major Changes

• #111 a0ec633 Thanks @tivac! - Add .d.ts files to releases and restructure exports.

  Previously

  import ComponentTree from "xstate-component-tree";
  import componentHelper from "xstate-component-tree/component";
  

  Now

  import { ComponentTree, componentHelper } from "xstate-component-tree";
  

Minor Changes

• #113 88d1dba Thanks @tivac! - Component helper preserves .meta fields

  Previous using the helper like this:

  helper(Component, {
    meta: {
      fooga: "wooga",
    },
  });
  

  would return an object with no meta.fooga property. Now those keys are properly preserved if they exist.

  meta.load will still be overwritten if it exists, because it is required for the helper to function. A warning if it exists may be introduced in a future release.

Minor Changes

• #98 e7cd20d Thanks @tivac! - Support for components at the root of machines

  createMachine({
    initial: "foo",
  
    meta: {
      component: RootComponent,
    },
  
    states: {
      foo: {
        meta: {
          component: FooComponent,
        },
      },
    },
  });
  

  Previously RootComponent would be ignored, now it will be the first component in the tree and FooComponent will be placed as a child of it.

Minor Changes

• #74 951cea7 Thanks @tivac! - Adding .can() API from XState

  The .can() API is a simple passthrough to the interpreter for the root statechart being managed by xstate-component-tree, and is intended as a convenience function to make it easier to interact with a ComponentTree instance instead of a direct XState Interpreter reference.

  From the XState docs on .can():

  Determines whether sending the event will cause a non-forbidden transition to be selected, even if the transitions have no actions nor change the state value.

Patch Changes

• #71 00dcf48 Thanks @tivac! - Fix .hasTag & .matches before interpreter is running

Major Changes

• #69 b6c9fc8 Thanks @tivac! - Always provide a valid initial value to subscribers

  Previously if you called the .subscribe() method on a ComponentTree instance before the statechart had been processed the return value would be false. This meant that subscribers would have to add checks to do anything against the returned value, since they couldn't depend on the .matches/.hasTag/.broadcast APIs existing.

  This change fixes that, and ensures that even if the statechart hasn't been walked yet the initial value stored has all the expected APIs, along with a reasonable value for the tree property of []. There isn't a great fallback value for .state at this time though.

Minor Changes

• #67 a8aa4ac Thanks @tivac! - Added .send() API

  The .send() API is a simple passthrough to the interpreter for the root statechart being managed by xstate-component-tree, and is intended as a convenience function to make it easier to interact with a ComponentTree instance instead of a direct XState Interpreter reference.

  XState Docs on .send()

Patch Changes

• #65 1f93bbc Thanks @tivac! - Fix for handling the case where a child machine has already been destroyed but xstate-component-tree hasn't gotten that notice yet.

  Mostly comes up when you have { type : "final" } states in the child machine and an invoke.onDone transition in the parent.

Minor Changes

• #63 d9d3820 Thanks @tivac! - Added observable API

  Available on the ComponentTree instance as .subscribe(callback), calls the callback function immediately with the most recent result and then will re-call it each time a build completes.

  Follows the svelte store contract which isn't strictly compliant with any official observable APIs but is extremely simple and usable.

  The callback passed to .subscribe(...) will immediately be called with the most recent result of building the component tree (or false if it hasn't finished yet), and then for each complete tree building run after that the callback will be called with a single argument. The arg is an Object with a null prototype and the following properties:

  • tree, nested component structures. This is the same as the first argument to the older new ComponentTree(service, callback) API.
  • state, an XState State instance representing the most recent state of the root statechart.
  • matches(<state>), state.matches() but for every statechart instance including any invoked statecharts.
  • hasTag(<tag>), state.hasTag() but for every statechart instance including any invoked statecharts.
  • broadcast(<event>), service.send() but for every statechart instance including any invoked statecharts. Prefer using this instead of setting invoke.autoForward because it'll reduce the amount of junk events sent to invoked children.

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

4.0.0 (2022-03-16)

⚠ BREAKING CHANGES

• previously the second arg to the callback function had a single data property on it representing the last State object seen by the top-level machine. Now it has state (same as data was previously), and some bound APIs for interacting with the statechart: .hasTag(), .broadcast(), and .matches(). These are the same APIs available on the ComponentTree instance but made available through the callback args for convenience.

Features

• make second callback arg useful (#42) (0db0340)

3.5.0 (2022-03-15)

Features

• add .hasTag(), .matches(), and .broadcast() APIs (#41) (108ec3e)

Feature Explanations

• .broadcast(), to send an event to all of the machines, allowing you to not use autoforward
• .hasTag() calls the built-in xstate .hasTag() API against all the cached state objects (stopping at the first successful one)
• .matches() calls the built-in xstate .matches() API against all the cached state objects (stopping at the first successful one)

NOTE: Not a breaking change because the public API didn't meaningfully shift, but the internals of xstate-component-tree have been significantly changed in this release. Instead of invoking a new ComponentTree class for every child machine it now tracks them all without any need for recursion or new class instances. Should be a bit lighter at run-time as a result.

3.4.2 (2022-02-20)

Bug Fixes

• Use ./components instead of /components for package.json subpath export. (#34) (99b0e68)

3.4.0 (2021-11-24)

Features

• Add component helper to xstate-component-tree package (#29) (6e28384)

3.4.1 (2021-11-24)

3.3.1 (2020-10-03)

Bug Fixes

• clear dist when building (068f209)

3.3.0 (2020-10-03)

Bug Fixes

• prevent zombie children running (#16) (6f49b85)

3.2.0 (2020-08-07)

Features

• add stable option (#14) (e37e1db)