Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Max Stephan
    @GeospatialMax

    Just trying out @xstate/inspect - always get a weird error:

    TypeScript error in /Users/********/repos/realyse-platform/node_modules/@xstate/inspect/lib/browser.d.ts(3,13):
    '=' expected.  TS1005
    
        1 | import { Interpreter, EventObject } from 'xstate';
        2 | import { XStateDevInterface } from 'xstate/lib/devTools';
      > 3 | import type { Inspector, InspectorOptions, InspectReceiver, WebSocketReceiverOptions, WindowReceiverOptions } from './types';
          |             ^
        4 | export declare const serviceMap: Map<string, Interpreter<any, any, EventObject, {
        5 |     value: any;
        6 |     context: any;

    Have updated to latest xstate version to exclude this being the reason. Any idea what could be happening?

    I have lifted the inspect call to the highest level in the code, as per the instructions.
    hqproto
    @hqproto
    @GeospatialMax not sure how types/typescript work, but it looks like a syntax error on the import statement
    Max Stephan
    @GeospatialMax
    @hqproto yep, but this is coming straight from the node module, i.e. not my code. So if it was an issue I would expect quite a few more issues that people experience :-)
    maybe need to update my typescript version or so? Probably some sort of new fancy Typescript syntax. Let me try that :-)
    Max Stephan
    @GeospatialMax

    Yep, that was it:

    Update to the latest typescript@4.1.3 fixed the issue

    on closer inspection the import type syntax was added with 3.8 (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html)
    hqproto
    @hqproto
    d'oh! bad assumption on my part, glad to hear you were able to get it resolved!
    Max Stephan
    @GeospatialMax
    @hqproto well, you led me down the right path of rethinking why it could see this as a syntax error in my environment, but generally doesn't seem to cause an issue. So thanks for that 🙂
    hqproto
    @hqproto
    @davidkpiano excellent talk! appreciate the way you relate actors to observables
    https://www.youtube.com/watch?v=lnmDFEriZ7Q&feature=youtu.be
    hqproto
    @hqproto
    surprised you didn't bring up concurrency as a reason behind the conception of the actor model
    David Khourshid
    @davidkpiano
    Thanks! Yeah I should have talked about concurrency more, it's not as relevant in JS though
    Rather, most JS devs wouldn't know what I was talking about if I said "it allows for concurrency without the need for multithreading, locks, mutexes, etc"
    Matt Ruby
    @mattruby
    I'm having a hard time understanding how to use resolveState with a running machine in React.
    I'm trying to setup a relatively simple flow with browser back button support. I was planning to store all the states on transition in a map and pushState with a hash for each transition.
    I have the history stored and I think I understand how to use resolveState to hydrate a new machine. Any suggestions on how best to apply a state to a machine that's interpreted using useMachine?
    Here's a small codesandbox example: https://codesandbox.io/s/dry-frog-u3prr?file=/src/App.js
    Thanks for any suggestions!
    David Khourshid
    @davidkpiano
    Rehydrating to a state would be:
    useMachine(someMachine, { state: someRestoredState })
    Matt Ruby
    @mattruby
    So I should call useMachine again?
    I was hoping to be able to use something like this from the docs:
    // Use machine.resolveState() to resolve the state definition to a new State instance relative to the machine
    const resolvedState = myMachine.resolveState(previousState);
    Matt Ruby
    @mattruby

    OK, I feel like I'm very close. I've updated my example: https://codesandbox.io/s/dry-frog-u3prr?file=/src/App.js
    Now I'm attempting to restart the service with the history state.

    useHashChange(() => {
        const hash = window.location.hash.slice(2);
        const stateFromHistory = stateHistory.get(hash);
        service.stop();
        service.start(simpleMachine.resolveState(stateFromHistory));
      });

    It seems to be working, however, React is not reacting to this restart :-)
    Any suggestions on how best to let React know that the service has changed?

    hqproto
    @hqproto
    @mattruby not a react guy but I think it has something to do with the fact that you're bypassing the useMachine helper that David suggested. Again, not familiar, but I would assume it just wraps the xstate functions in a react-friendly way. ¯_(ツ)_/¯
    Matt Ruby
    @mattruby
    @hqproto Thanks for the suggestion. I need to think about that a little more. I'm having a hard time figuring out where to put that additional call to useMachine.
    hqproto
    @hqproto
    @mattruby What purpose does useHashChange() serve? Perhaps it should send a message to the machine instance rather than stop and start? Just pondering your snippet here in gitter.
    Matt Ruby
    @mattruby
    Check the codesandbox. That should make much more sense.
    I've built a simple router.
    I wanted to time travel back to whatever the state was when I was on a given step.
    hqproto
    @hqproto

    "These guys knew what they were doing. And boy, when you look at this, I think 'why did the internet turn out so well, and why can't we do regular software that way?' Because you could imagine taking the internet as a model for doing software modules. Why don't people do it?"
    --Alan Kay

    Actor model :D

    hqproto
    @hqproto
    @davidkpiano sent an intro to your gmail, is that a good address?
    hqproto
    @hqproto
    @mattruby have you considered implementing your router behavior independently of react? working on something similar and will follow up with an example.
    I don't understand react idioms but think I understand what you're getting at
    Matt Ruby
    @mattruby
    That's kind of what xstate was for in my example case :-)
    hqproto
    @hqproto
    then why is there useEffect and all this stuff I don't understand sprinkled everywhere outside of the machine definition :(
    keep in mind react is against my religion, so I'm a useful test case :-)
    Matt Ruby
    @mattruby
    xstate is driving the step to show. The router is simply reacting to has changes and attempting to put xstate back to where it was when that hash was set.
    So react is just showing off a derivation of the state data.
    hqproto
    @hqproto
    Yeah, so my point is maybe your machine should be responsible for listening to and reacting to hash changes
    Sorry, I just learned Norwegian is discontinuing their long-haul flights and it's upsetting. Separation of concerns has been breached.
    In a machine, the state should probably be controlled by the machine in response to events.
    Matt Ruby
    @mattruby
    That's what's happening.
    hqproto
    @hqproto
    Yes but encapsulation
    Matt Ruby
    @mattruby
    If you're interested in modifying my codesandbox example with what you're thinking, I'm all ears.
    hqproto
    @hqproto
    If the machine is responsible for routing, then it should probably be the entity concerned with events that may update its extended state (aka context in XState).
    Whether you forward those events or set up a special mechanism for updating state is up to you, but I think the most important point is that machine has to get a message that its state needs to update because something (event) has happened.
    I have to talk to some old people, brb
    Matt Ruby
    @mattruby
    I've decided to move away from using xstate on this project. So no worries with this one. I hope to revisit it in the future.
    hqproto
    @hqproto
    Ok, just keep in mind that XState is reinforcing proven patterns that have nothing to do with React etc. It would be to your benefit as a developer to consider patterns like that. There's a curve involved with getting to that point, but I highly recommend pursuing it.
    I say as a guy with some slight brain damage after banging my head into the desk for a few years...
    David Khourshid
    @davidkpiano
    Hey, XState machinists - for live chat, we're moving to Discord! https://discord.gg/hEqXaBAY
    Nikhil Shrivastav
    @nikhilshrv
    @davidkpiano The discord invite has expired. Can you send a new one?
    David Khourshid
    @davidkpiano
    Nikhil Shrivastav
    @nikhilshrv
    Thanks