Comments (6)
We export a bunch of helper types that can be used to help out with this - StateFrom
, ContexFrom
, etc
from xstate-tools.
Typegen generator only takes into consideration the static shape of the config argument - basically, we require it to be JSON-like, fully serializable, and self-contained. We don't look up any external AST nodes - so this won't work for the time being (and I'm not sure if we'll be working on supporting this in the future).
I'm also unsure if enums would work with the type machinery that consumes typegen metadata and that is implemented in XState itself.
from xstate-tools.
Fair enough, I always used enum based schemas to work around the lack of good TypeScript support. I guess that's not required anymore ❤️
I'm just wondering if some edge cases would require some kind of code duplication.
E.g.:
Properly type a prop/argument which would receive a state/event/service/action. It's quite straightforward with enums, but without them, that would require to create another type/enum, which would need maintenance over time, etc.
Using the typegen file is not really an option, as it is meant to be a local devtool rather than a proper source code appendix, isn't it?
I don't know if it's relevant, just wondering. But thanks for your feedback anyway 👌
from xstate-tools.
Properly type a prop/argument which would receive a state/event/service/action. It's quite straightforward with enums, but without them, that would require to create another type/enum, which would need maintenance over time, etc.
Could you give me an example of what do you mean?
from xstate-tools.
Let's say, you have a component which interprets a machine, and would like to give its children its state
, in order for them to be able to use state.matches()
. How would you type the state
prop?
E.g.:
const TheParent: React.FC = () => {
const [state] = useMachine(theMachine, {/* ... */});
return (
<TheChild state={state} />
)
};
const TheChild: React.FC<{ state: ? }> = ({ state }) => {
const showSomething = state.matches('something');
/* ... */
};
It's an obviously over simplified example, but you've got the point.
And using React Context in conjunction with useInterpret
and useActor
to avoid having to type the prop doesn't help, because TheChild
will eventually also need to know the type of the whole service injected in the Context, including the state
, etc.
from xstate-tools.
That's great, thanks. Didn't know their existence 👌
from xstate-tools.
Related Issues (20)
- [Feature Request] Add mermaid export to VSCode Extension HOT 1
- [Bug] VScode extension does not work if the machine is a property in a class HOT 5
- XState to md – how to generate documentation from xstate? HOT 1
- Bug: VSCode plugin error "<action> is never used in the machine definition" HOT 3
- xstate-cli typegen doesn't respect file casing after rename.
- Bug: typegen causes type error when a `service` is a function returning a StateMachine which has Context
- XState VSCode extension - Visual Editor shows unexpected errors when using multiple guarded transitions HOT 1
- @xstate/cli typegen regression from 0.5.2 HOT 2
- "Learn more" link button in vscode popup 404s HOT 1
- Running typegen command on machine with two invokes with one onDone fails
- (Feature Request) Use existing layout engine for autolayout HOT 1
- vs-code extension delete machine when defined as a createMachine parameter
- export to scxml file HOT 4
- VSCode Editor shows error on transitions when using "guard" (V5) instead "cond" (v4) HOT 2
- Bug: Typescript 'something is never used in the machine definition' when it is used HOT 2
- XState VSCode extension shows `__@@INLINE_IMPLEMENTATION@@__` string for all `onDone, onError` handlers in visualization
- Build instructions for vscode extension?
- Editor fails to save the changes on windows HOT 2
- "Jump to definition" doesn't work with v5's `setup(...)` API HOT 3
- Bug: VSCode visualizer doesn't resolve imported variables HOT 1
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-tools.