krasimir / stent Goto Github PK

Hello.

I'm working on an electrón app that manage folders.

I want that, when the user drops some folders into the app, let's say five, a message shows indicating which folder is being processed.

The way I'm doing it is by not changing the state at all but just sending the same array of folders (these are just objects) with the difference that the current folder has a prop named current set to true, and it gets toggled to every folder being processed.

So, the problem is that, only by passing to the machine a slightly different array, it doesn't re-render the component, and it only do that if I change the state and change it back.

Any hint in how to solve this?

I read the article, the git documentation...but I don't know how to implement the state machine (stent( in my project. Any basic project example (more explanatory than the TODO example?)
_

I think would be very nice to have somewhere to share thoughts and meet other people experimenting stent in their project.

@krasimir could you create it for us?

Note:
I just would like to add that I think your project is just awesome and underestimated. I am loving to use it in my project

I find it useful to format state names as URL paths — I can make client-side routing libraries like Reach Router treat the state machine as the location source.

I've noticed that stent does not transform the underscore character when it generates the machine methods, e.g.,

'/initializing/stage_one' --> machine.isInitializingStage_one

Would you consider adopting Lodash approach to camel casing?

_.camelCase('is /initializing/stage_one')
<-- "isInitializingStageOne"

Hi,

First of all thanks for your work. I wanted to know if there's a way to know if a transaction can be applied? Something like transactionCanBeApplied() ?

Hi,

In the handleGenerator function, the function result of the call helper is evaluated without catching the errors it may throw. Therefore, if it throws an error, the handleGenerator's function execution will stop.

Please have a look at my PR: #46

I have the issue when try to use saga effects:
Error: The state should be an object and it should always have at least "name" property. You passed {
"@@redux-saga/IO": true,
"SELECT": {
"args": []
}
}

First, thanks for creating stent, really intersting pattern.

Did you try / is it possible to use Stent to manage complex component internal state ? I collaborate with Neos CMS (neos.io), and we have some really complex components (image editor, ...) that can gain a lots to have state machine to manage their internal state.

I successfully build a prototype, but as the machine need to be named, all compoment get the same machine, by default.

In this article,
it demonstrates a SM table in the login form.

But in real cases, it's hard to define the SM table. For instance, I have a user form cantaining 4 inputs
(name, age, company, salary):

<formItem>
    <input name="salary" onBlur={checkSalary}>
    <Hint>{salaryErrHint}</Hint>
</formItem


checkSalary(e) {
    ...
    if (...)
        this.setState({
            salaryErrHint: 'salary is required'
        })
    else if (...)
        this.setState({
            salaryErrHint: 'salary must be a number'
        })
    else if (...)
        this.setState({
            salaryErrHint: 'salary must be less than 10000000'
        })
    else
        this.setState({
            salaryErrHint: ''
        })
}

In above demo I will define 4 errHint states in pure react code.
I want to optimize the code with SM, but I wonder if the below SM chart is appropriate?

UserForm   -->   input.wrong.name     -->  UserForm with nameErrHint
UserForm   -->   input.wrong.age      -->  UserForm with ageErrHint
UserForm   -->   input.wrong.company  -->  UserForm with companyErrHint
UserForm   -->   input.wrong.salary   -->  UserForm with saralyErrHint

I can't see the advantage from the SM table. Thank you in advance.

Hi,

Stent generator actions allow us to call other generators. However, if an async error is thrown in one of these nested generators, it will not reach the top-level generator and it won't be caught there.

I added a pull request for it: #55

First of all, thanks for creating this library @krasimir, it seems to be a very powerful and expressive solution.

When looking at action handlers I've noticed they are bound to a context. Would you consider making them pure functions, i.e. passing the whole machine as the first argument? (this was mentioned previously in a comment)

So instead of

transitions[state.name][action].apply(machine, [ machine.state, ...payload ])

pass everything as an argument, something like this?

transitions[state.name][action](machine, payload)

The benefit would be having pure functions as handlers, so they would be really easy to unit tests and maybe even a bit more consistent since now parts of the machine are passed as argument (state) and some parts as context (under this).

Handlers would then be able to pick up the relevant bits as in const handler = ({state}) => ({...})

I understand this would be an API breaking change, but maybe something to think about for the future?

Hi, thank you for your work and your good choice: mealy-machine!

I've a little question, I've create new Machine thats work inside Vue.js!
Now I want to get additional parameter parentAction = new inside the state.

var stent = Machine.create('actions', {
  state: { name: 'start', parentAction: 'new' },
  transitions: {
    'start': {
      'take note': 'note',
      'create ordine': 'order',
      'take party': 'party'
    },
    'note': {
      'take another note': 'note',
      'create order': 'order',
      'take party': 'party'
    },
    'party': {
      'add participant': { name: 'participant', parentAction: 'new' }
    },
    'participant': {
      'create ordine'': 'order',
      'add participant': 'participant',
    },
...

The first state start has stent.state.parentAction = 'new', correct,
but when I change the state to note the stent.state.parentAction is always new.
There is a way to get undefined, null, empty variable for states that haven't stent.state.parentAction defined?

Is it possible to remove .babelrc from npm? It's not possible to build application using react native.
If I remove .babelrc from node_modules it works fine.
Thanks!

Hi,

One question, is it possible to execute code before entering to specific state.

I have a state machine which every state has a transition like next that execute some code (a http request) and then transition to the next state. However I want to check the state before actually reaching that state, let's say to check if the state has X prop.

Is that possible without creating a transition like "checkingState"? Somehow like a specific callback? I saw that I can use middleware but I'm not sure if I can really achieve that like this.

Thank you 👍

Hi. I get warning when using "stent/lib/react":
componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount.

I think we can safely replace componentWillMount with componentDidMount.

The library is not doing server side rendering at moment,
Looks like we are avoiding render the component until it's connected, here:
https://github.com/krasimir/stent/blob/master/src/react/connect.js#L33

Please let me know if this is intentional and if we can just render the component immediately, before it's connected.

Would you consider adding a Prettier config to the project to ensure consistent formatting?

Curious if this could be supported.

Would be awesome to have Typescript definitions.

I get unhelpful errors from Node that slip past the try/catch block if the state action generator function invokes call() helper with an argument that is not a function (see screenshot).

Please take a look at my pull request with a failing test that illustrates the behavior.

I think the call() helper should throw if the argument is not a function before returning the __call object.

P.S. I enjoy working with your library. Thank you for open-sourcing it.

While attempting to name a transition startProcess, I found that the connect mappings did not produce a handler for this transition. After renaming it to "start process", the startProcess() handler was mapped as expected.

Are state names not allowed in camel case?

After reading the docs, I was expecting the behavior to be:

• if spaces exist in transition name -> transform to camel case
• if dashes exist in transition name -> transform to camel case
• else -> leave as is

There are many state machines where you need to execute an action on entry into that state. This is especially important for more complex state machines where there may be multiple transitions (from different states) that go into a particular target state. In those cases, you would end up having to write the same code in multiple transitions, which makes maintenance more difficult. Instead, an _entry (or other reserved) action would allow the actions to be consolidated to one place. This also applies for when exiting a state.

I've been able to implement it quite easily (not sure if it is completely correct, since I am bypassing the middleware layer).

What are your thoughts?

You showed an example with generators:

const machine = Machine.create('todo-app', {
  state: { name: 'idle', todos: [] },
  transitions: {
    'idle': {
      'fetch todos': function * () {
        yield { name: 'fetching' };

        try {
          const todos = yield call(getTodos, '/api/todos');
        } catch (error) {
          return { name: 'error', error };
        }

        return { name: 'done', todos };
      }
    }
  }
});

If I would perform machine.fetchTodos() twice while the async call is still ongoing, the second one is simply discarded.

• How to model a machine that cancels the first one and fetches again?
• How to debounce such executions?

The React connect helper connects the component to the machine only once at the time when the HoC is created.

The HoC disconnects from the machine(s) when it unmounts, but does not reconnect if we mount the same component again.

I'm not sure whether I'm doing something wrong here or misunderstood a concept, so please correct me if I'm on the wrong path here.

I have a machine with an idle state which has a couple of transitions:
handle password, handle email -> they all just update the idle states current data (so that username etc. are updated).
Then there's a "handle username" transition which is a generator function which checks whether the username is available or not.

Now - if i trigger e.g. "handle password" and update the states password value, and I do this while the handle username function is still awaiting a response from the network request - as soon as the network request is done, i yield a state like

{...state, errors: { ...state.errors, username: error } }

Now, even though the state changed in between, this will set the password value back to the value it used to have before the handle username action was called.

If I use machine.state however it works well. Maybe adding a "getState()" function would be a viable addition for actions (if I didn't miss anything else here :))

Thanks in advance for your help - I really enjoy using stent with React!