Statecharts

Hi David, Thanks for your reply, there is my small experimental repo, please take a look. https://github.com/LuPeter/quick-xstate-example

I am not sure how to integrate with PostMessage and OnMessage and make them communicate with each other in a better way?

thanks

Hey, I am just wondering in which cases current.history is undefined. have the issue in user logs but I am unable to reproduce locally.

The initial state will have current.history as undefined.

thanks

@davidkpiano

that makes sense

Hi, I just wonder is there any good way to get computed/derived value based on context value?

Just like you normally would get a derived value any other way, but I might be making a built-in solution for XState

What I mean is, if you get e.g., Date.now() as a context value, you would "compute" that to be formatDate(dateTime) in whichever ad-hoc way you would normally do. It's not XState-specific (right now)

HI all, I'm trying to get xstate-viz to run locally. cloned the master branch, followed the readme. However npm start gives ```Compiling...

<--- Last few GCs --->

[6550:0x3c172b0] 248953 ms: Mark-sweep 1828.0 (2066.9) -> 1814.2 (2065.2) MB, 2859.9 / 0.4 ms (average mu = 0.196, current mu = 0.147) allocation failure scavenge might not succeed [6550:0x3c172b0] 249067 ms: Scavenge 1827.7 (2065.2) -> 1816.5 (2066.4) MB, 19.8 / 0.1 ms (average mu = 0.196, current mu = 0.147) allocation failure [6550:0x3c172b0] 249138 ms: Scavenge 1829.9 (2066.4) -> 1818.8 (2068.4) MB, 17.9 / 0.1 ms (average mu = 0.196, current mu = 0.147) allocation failure

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 0x13cce79]
1: StubFrame [pc: 0x13cdd4d]

Security context: 0x2c893fc808d1 <JSObject> 2: resolve [0x2da894802831] [path.js:~973] [pc=0x3d31ee066616](this=0x1848f3300471 <Object map = 0x249d12db0779>) 3: arguments adaptor frame: 2->0 4: gotResolvedLink(aka gotResolvedLink) [0x2aeed5e79471] [fs.js:1789] [bytecode=0x225801ca6dc1 offset=38](this=0x3ddedd7404b1 <undefined>,0x1a212396b399 <String[44]: /home/p...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 0xa0bb60 node::Abort() [node] 2: 0xa0bf6c node::OnFatalError(char const, char const) [node] 3: 0xb820fe v8::Utils::ReportOOMFailure(v8::internal::Isolate, char const, bool) [node] 4: 0xb82479 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate, char const, bool) [node] 5: 0xd2ee35 [node] 6: 0xd2f4c6 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node] 7: 0xd3bd45 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node] 8: 0xd3cbf5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node] 9: 0xd3f6ac v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node] 10: 0xd0615b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node] 11: 0x1047d9e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long, v8::internal::Isolate) [node] 12: 0x13cce79 [node] npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.``` Any ideas? specific npm version required? I'd really like to use xsate, and the possibility to visualize would be great.

sorry for the bad formating

@alexpx

There is no documentation for

@xstate

/viz, which is a work-in-progress, and I am developing it in the open. If you want to use it, it is up to you to figure out how to make it work right now.

Oh Nos…! Error: API rate limit exceeded for 163.116.146.114. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.) 😬

Quick question: is there a way to set the initial state that depends on a value in the context? I have a child that will have a child-specific context from the start of the "lifecycle" of the child.

Start with some deciding state, that will automatically transition based on the context (using an eventless transition: always: [{ target: 'here', cond: 'something' }, { target: 'there' }]

Thank you. Really nice work by the way. I've had this library on my radar for about a year now. I'm amazed at how few people inherently get that a UI is all about a state-machine.

Conceptually, I do wonder if the '': [ {target:.., cond:...}] configuration prop could be used to set the value of the machines initial value. One is describing a machine, the other a state... so different levels of abstraction, but perhaps something that can be used in both?

Does always have special meaning for the interpreter?

It's exactly the same thing, just clearer and less awkward to write.

I completely agree. always is more descriptive.

@davidkpiano

I'm in the process of figuring out how to send an event that is augmented with the context. I noticed in the docs how the grammar may create a bit of confusion regarding the subject of what you are describing:

I believe "it" is referring to "all of the action creators". That would mean "they are pure functions...". I think that will help understand the important distinction you are making.

If send is not in fact a command, should I model it as a "makeAction"?

If I understand correctly, send augments an event object -> action object.

send(event) -returns-> action: {type, exec:(context, event, actionMeta) => void)}

What is the idiomatic approach to specifying the exec function prop? How might that compare to how the send(event) gets augmented when specified as a value for entry for instance?

I'd appreciate a PR re: grammatical errors.

You shouldn't need to specify exec.

Can do... and Thank you. - E

I'm working with a machine that spawns children machines. In the "todos" example, the parent is configured to respond to messages the like of CHILD.EDIT. The corresponding actions uses the payload in the event to map through the children, and update accordingly when the right child id is found.

Instead, I would like to send messages "to" specific children using the ref handle I set for each child during the spawning process.

My initial attempts to parentService.send('EDIT', { to: child-id } seems to be falling on "deaf ears" :). It makes me wonder if spawn also calls start() for that child. Does it? What might I be missing here?

Thank you to anyone with a pointer.

The { to: ... } option only works with send action creators, not with service.send(...) (sorry for the confusion). So your send('EDIT', { to: (ctx, e) => ... }) needs to be as an action, not via service.send(...).

Ah, so that means given the service references the parent, then I must specify how to "pass down" messages from the parent to the child. To specify which child use the id spec used with the spawn command. Yes?

Given the following where the parent service has a context.children prop, is there a way to send messages directly to a specific child?

    loading: {
      entry: [
        assign({
          children: (ctx, e) => {
            return ctx.children.map((child) => ({  // e.g., ctx.children = [1,2,3]
              ...child,
              ref: spawn(
                // child machine
                childMachine.withContext(
                  {
                    ...initialContext(mockGetView), // mock generating fn
                    id: child,
                  },
                  // handle to child machine
                  `childForm-${child}`,
                ),
              ),
            }));
          },
        }),
        log('...spawning child machines'),
        log(
          `sample child context: ${JSON.stringify(
            initialContext(mockGetView),
          )}`,
        ),
      ],
      always: { target: 'editing' },
    },