Load the definition of the state machine from database

[daab]

I am trying to store the definition of the state machine in the couchdb-pouchdb database in an application with the svelte-sapper-webpack framework. But it throws an error when I try to instantiate it:
xMachine = createMachine (machine)
const {state, send} = useMachine (xMachine, {devTools: true});

But it throws me the following error: TypeError: Cannot use 'in' operator to search for 'parallel' in

{
    id: 'lamps',
    type: 'parallel',
    context: {
        message: "",
        svg: [],
    },
    states: {
        lamp1: {
            initial: 'off',
            states: {
                off: {
                    on: {
                        LAMP1: {
                            target: "on",
                            actions: "lampara1on",
                        }
                    },
                },
                switched on: {
                    on: {
                        LAMP1: {
                            target: "off",
                            actions: "lampara1off",
                        }
                    },
                },
            },
        },
        lamp2: {
            initial: 'off',
            states: {
                off: {
                    on: {
                        LAMP2: {
                            target: "on",
                            actions: "lampara2on",
                        }
                    },
                },
                switched on: {
                    on: {
                        LAMP2: {
                            target: "off",
                            actions: "lampara2off",
                        }
                    },
                },
            },
        },
    },
},
    {
        actions: {
            lamp1on: assign ({
                message: (context, event) => event.data.control.message,
                svg: [
                    {tag: "display", elm: "lampara1off", val: "none"},
                    {tag: "display", elm: "lampara1on", val: "inline"}],
            }),
            lamp1off: assign ({
                message: (context, event) => event.data.control.message,
                svg: [
                    {tag: "display", elm: "lampara1on", val: "none"},
                    {tag: "display", elm: "lampara1off", val: "inline"}],
            }),
            lamp2on: assign ({
                message: (context, event) => event.data.control.message,
                svg: [
                    {tag: "display", elm: "lampara2off", val: "none"},
                    {tag: "display", elm: "lampara2on", val: "inline"}],
            }),
            lamp2off: assign ({
                message: (context, event) => event.data.control.message,
                svg: [
                    {tag: "display", elm: "lampara2on", val: "none"},
                    {tag: "display", elm: "lampara2off", val: "inline"}],
            })
        }
    }

at new StateNode (StateNode.js: 84)
at createMachine (Machine.js: 14)
at Caja.svelte: 153

How do I correct the error?

[davidkpiano]

Can you please reformat your code? Use fenced code blocks:

```js
// like this
```

[daab]

The definition of the State Machine is stored as an attachment in the database.

[davidkpiano]

A parallel state cannot be the root state node of the machine. Try refactoring it so that it's nested in a compound state node instead:

{
  states: {
    something: {
      type: 'parallel',
      states: { ... }
    }
  }
}

[daab]

This is the test and it didn't work:

{
    id: 'lamps',
    context: {
      message: "",
      svg: [],
    },
    states: {
      lamps: {
        type: 'parallel',
        states: {
          lamp1: {
            initial: 'off',
            states: {
              off: {
                on: {
                  LAMP1: {
                    target: "on",
                    actions: "lampara1on",
                  }
                },
              },
              switched on: {
                on: {
                  LAMP1: {
                    target: "off",
                    actions: "lampara1off",
                  }
                },
              },
            },
          },
          lamp2: {
            initial: 'off',
            states: {
              off: {
                on: {
                  LAMP2: {
                    target: "on",
                    actions: "lampara2on",
                  }
                },
              },
              switched on: {
                on: {
                  LAMP2: {
                    target: "off",
                    actions: "lampara2off",
                  }
                },
              },
            },
          },
        },
      },
    },
  }

Cannot retrieve initial state from simple state 'lamps'.
at StateNode.get [as initialState] (StateNode.js: 1139)
at interpreter.js: 188
at interpreter.js: 28
at Interpreter.get [as initialState] (interpreter.js: 187)
at useMachine (useMachine.js: 11)
at instance (Box.svelte: 55)
at init (index.mjs: 1372)
at new Box (Box.svelte: 65)
at createComponent (svelte-hooks.js: 119)
at Box.targetCmp. $ replace (svelte-hooks.js: 167)

I take the structure of the example of the guide on Parallel State Nodes and it is exactly the same as the one I showed initially, this is not a compound state node.
Importing the file works, but not from the database. Why?

[davidkpiano]

There were a few problems with your machine when I copy-pasted it. Please see this CodeSandbox for the fixed machine and compare. Notably, you were missing an initial state.

https://codesandbox.io/s/laughing-edison-xwstm

const machine = Machine({
  id: "lamps",
  context: {
    message: "",
    svg: []
  },
  initial: "lamps",
  states: {
    lamps: {
      type: "parallel",
      states: {
        lamp1: {
          initial: "off",
          states: {
            off: {
              on: {
                LAMP1: {
                  target: "switched on",
                  actions: "lampara1on"
                }
              }
            },
            "switched on": {
              on: {
                LAMP1: {
                  target: "off",
                  actions: "lampara1off"
                }
              }
            }
          }
        },
        lamp2: {
          initial: "off",
          states: {
            off: {
              on: {
                LAMP2: {
                  target: "switched on",
                  actions: "lampara2on"
                }
              }
            },
            "switched on": {
              on: {
                LAMP2: {
                  target: "off",
                  actions: "lampara2off"
                }
              }
            }
          }
        }
      }
    }
  }
});

[davidkpiano]

Answer here: #1517 (reply in thread)

[daab]

When I import the definition of the state machine (import {lampsMachine} from "../machines/lamparasMachine"), it works without problems, but when I extract it from the database it throws me errors. example:
StateNode.js: 84 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'parallel' in

 {
    id: 'lamps',
    context: {
        message: "",
        svg: []
    },
    initial: "lamps",
    states: {
        lamps: {
            type: "parallel",
            states: {
                lamp1: {
                    initial: 'off',
                    states: {
                        off: {
                            on: {
                                LAMP1: {
                                    target: "on",
                                    actions: "lampara1on",
                                }
                            },
                        },
                        switched on: {
                            on: {
                                LAMP1: {
                                    target: "off",
                                    actions: "lampara1off",
                                }
                            },
                        },
                    },
                },
                lamp2: {
                    initial: 'off',
                    states: {
                        off: {
                            on: {
                                LAMP2: {
                                    target: "on",
                                    actions: "lampara2on",
                                }
                            },
                        },
                        switched on: {
                            on: {
                                LAMP2: {
                                    target: "off",
                                    actions: "lampara2off",
                                }
                            },
                        },
                    },
                },
            },
        },
    },
}

at new StateNode (StateNode.js: 84)
at createMachine (Machine.js: 14)

code in svelte / sapper:

async function getStateData (xId, xMaq) {
const mne = await db.rel.getAttachment ("component", xId, xMaq);
mne.text (). then (function (result) {
const xMachine = createMachine (result)
const {state, send} = useMachine (xMachine, {devTools: true}, false);
}). catch ((err) => console.log (err));
}

I need help so that the state machine is available and can be modified from the database and used dynamically.

[davidkpiano]

Please see the answer above. The machine you provided here is still improperly formatted.

[daab]

Has anyone managed to load the definition of the state machine from database? I have tried with the examples in the docs and none works. The definition can be loaded from a database or just by importing. This project has state machines as the means of programming IoT. Authorized clients have access to the creation of new state machines or to modify the existing one and incorporate them, for the control of devices, sensors and actuators.

example:
StateNode.js:84 Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'parallel' in

{ id: 'toggle', initial: 'inactive', states: { inactive: { on: { TOGGLE: 'active' } }, active: { on: { TOGGLE: 'inactive' } } } } 

at new StateNode (StateNode.js:84)
at createMachine (Machine.js:14)
at instance (Caja.svelte:38)
at init (index.mjs:1372)
at new Caja (Caja.svelte:59)
at createProxiedComponent (svelte-hooks.js:229)
at new ProxyComponent (proxy.js:196)
at new Proxy<Caja> (proxy.js:255)
at create_each_block ([slug].svelte:166)
at Array.create_else_block ([slug].svelte:166)

[davidkpiano]

Can you provide a minimal example of this error (loading a machine from a JSON config) in CodeSandbox (XState template)?

In general, the implementation should just be this:

const machineConfig = JSON.parse(someStringMachineConfig);

const machine = createMachine(machineConfig);

There is a good chance that this is not a problem with XState, and rather a problem with how you're defining/loading in the machine definition. Also make sure you're using the latest version of XState.

[daab]

If you are right David, this is not a problem with XState, it was my fault, JSON.parse (someStringMachineConfig) was not needed, because the database already provides you with the object when you do result = await db.rel.find (" machine ", id). You just do createMachine (result.machineConfig) and voila.
Now I need you to tell me how I can store and retrieve the configuration options in the database. As I store the code that I expose below with JSON without throwing an error.

    {
        actions: {
            lampara1on: assign({
                mensaje: (context, event) => event.data.control.mensaje,
                svg: [
                    { tag: "display", elm: "lampara1off", val: "none" },
                    { tag: "display", elm: "lampara1on", val: "inline" }],
            }),
            lampara1off: assign({
                mensaje: (context, event) => event.data.control.mensaje,
                svg: [
                    { tag: "display", elm: "lampara1on", val: "none" },
                    { tag: "display", elm: "lampara1off", val: "inline" }],
            }),
            lampara2on: assign({
                mensaje: (context, event) => event.data.control.mensaje,
                svg: [
                    { tag: "display", elm: "lampara2off", val: "none" },
                    { tag: "display", elm: "lampara2on", val: "inline" }],
            }),
            lampara2off: assign({
                mensaje: (context, event) => event.data.control.mensaje,
                svg: [
                    { tag: "display", elm: "lampara2on", val: "none" },
                    { tag: "display", elm: "lampara2off", val: "inline" }],
            })
        }
    }

Thanking you in advance for your great support.

[davidkpiano]

That might be difficult, because it's not easy/safe to stringify/parse raw JavaScript, which is what you're trying to do.

The implementation details (what you've shown here) should instead be part of the code, and not persisted to the database.

[daab]

How to properly 'should instead be part of the code' with user access to add, modify or delete defining/loading of state machines? Svelte shifts that work into a compile step that happens when you build your app. If the code is not in the resulting bundle, it does not exist. Someone could give me the key to get out of this crossroads. Thanks in advance.

[davidkpiano]

If you want to parse raw JavaScript and accept the potential security risks of that, go ahead and do that. That'll be the simplest solution.

You would call .toString() on the function, and then eval(...) or use new Function(...) to parse it.

Again, this is not safe but that would be the simplest way to accomplish what you want to do.

[daab]

Okay. To avoid evils,

const xMachine = createMachine(machine, sanitize(validate(configure(config))));

Thanks for your support David.

[rrajakaec]

Hi Daab,
I have the same requirement where I need to save the xstate state machine definition into database and load it dynamically.
May I know how you have handle the config part like actors, actions, guard function and what type of sanitize, validate and configure rules you have written. Do you have any sample.

Regards,
Rintu