Comments (3)
After thinking about this on the weekend I think the solution is actually fairly simple. The only important splitting-up factor is being able to have the machine and view in separate files. Actions/selectors just don't get big enough that it matters where they end up.
But splitting out the view is hard because it needs types from the machine to be able to generate the props. The machine however is already totally independent. Which means it makes sense to instead only require the machine can be in a separate file, and the view/selectors/actions to be defined together, with the ability to omit the selector/action/slots if they aren't required.
So I propose something like
// machine file
// slots need to be defined with the machine as that is where they are used
export const someSlot = singleSlot("whatever");
const machine = createMachine();
// xstate-tree-machine file
import { machine, someSlot } from "./machine";
// name needs some bike shedding
export const SomeMachine = createXstateTreeMachine(machine, {
slots: [someSlot],
// selectors could be omitted, in which case they would default to the machines context, ie equivalent to
// selectors: ({context}) => context,
selectors: ({context, inState, canHandleEvent}) => ({ something: context.something + context.someOtherThing }),
// actions is omitted so it resolves to an empty object, equivalent to
// actions: () => ({}),
view: ({ selectors }) => <p>{selectors.something}</p>
})
Then to enable access to the selector/action/view functions there can be a set of utility functions like retrieveView(machine)
, retrieveSelectors(machine)
so you can pull them out for use in stories/tests etc. And they could also provide some utilities for generating things like the inState
prop that requires specific types.
from xstate-tree.
🎉 This issue has been resolved in version 4.1.0-beta.1 🎉
The release is available on:
Your semantic-release bot 📦🚀
from xstate-tree.
🎉 This issue has been resolved in version 4.1.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
from xstate-tree.
Related Issues (20)
- Refactor build* xstate typings HOT 1
- User provided shared meta additions
- Add example app and use it to improve test suite
- ESM support HOT 2
- Release issues
- broadcast 2.0 HOT 1
- API docs
- Improve debug logging
- Sync external data into machines HOT 1
- Support tags
- Readme example leaves out most important part: slots HOT 4
- Deprecate `inState` prop of view components HOT 1
- Replace canHandleEvent implementation with `state.can` HOT 1
- Add hook to enable determining if a route is active HOT 1
- Routing machine HOT 5
- View to machine utility
- Upgrade History to v5
- xstate v5 support HOT 5
- Allow passing callbacks to slot views/root components to allow communication with React from xstate machines
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xstate-tree.