Build a tree of UI components based on your statechart
MIT License
Bot releases are visible (Hide)
Published by github-actions[bot] over 1 year ago
#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: []
}
]
Published by github-actions[bot] over 1 year ago
#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 invoke
s within the statechart are run.
Now whenever the ComponentTree
sees a new machine it hasn't walked is running, it will walk it.
Published by github-actions[bot] over 1 year ago
#111 a0ec633
Thanks @tivac! - Add .d.ts
files to releases and restructure exports.
import ComponentTree from "xstate-component-tree";
import componentHelper from "xstate-component-tree/component";
import { ComponentTree, componentHelper } from "xstate-component-tree";
#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.
Published by github-actions[bot] almost 2 years ago
#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.
Published by github-actions[bot] over 2 years ago
#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.
Published by github-actions[bot] over 2 years ago
#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.
Published by github-actions[bot] over 2 years ago
#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.
Published by github-actions[bot] over 2 years ago
Published by github-actions[bot] over 2 years ago
#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.
Published by github-actions[bot] over 2 years ago
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.Published by github-actions[bot] over 2 years ago
.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.