[v5] Recursive persistence

.changeset/fast-rockets-share.md

@@ -0,0 +1,24 @@
+---
+'xstate': major
+---
+
+Restoring persisted state is now done by passing the state into the `state: ...` property of the `interpret` options argument:
+
+```diff
+-interpret(machine).start(state);
++interpret(machine, { state }).start();
+```
+
+The persisted state is obtained from an actor by calling `actor.getPersistedState()`:
+
+```ts
+const actor = interpret(machine).start();
+
+const persistedState = actor.getPersistedState();
+
+// ...
+
+const restoredActor = interpret(machine, {
+  state: persistedState
+}).start();
+```

.changeset/heavy-ties-search.md

@@ -0,0 +1,10 @@
+---
+'xstate': major
+---
+
+Invoked actors can now be deeply persisted and restored. When the persisted state of an actor is obtained via `actor.getPersistedState()`, the states of all invoked actors are also persisted, if possible. This state can be restored by passing the persisted state into the `state: ...` property of the `interpret` options argument:
+
+```diff
+-interpret(machine).start(state);
++interpret(machine, { state }).start();
+```

.changeset/shy-cobras-ring.md

@@ -0,0 +1,2 @@
+---
+---

README.md

@@ -218,8 +218,9 @@ const lightMachine = createMachine({
 
 const currentState = 'green';
 
-const nextState = lightMachine.transition(currentState, { type: 'TIMER' })
-  .value;
+const nextState = lightMachine.transition(currentState, {
+  type: 'TIMER'
+}).value;
 
 // => 'yellow'
 ```
@@ -278,8 +279,9 @@ const lightMachine = createMachine({
 
 const currentState = 'yellow';
 
-const nextState = lightMachine.transition(currentState, { type: 'TIMER' })
-  .value;
+const nextState = lightMachine.transition(currentState, {
+  type: 'TIMER'
+}).value;
 // => {
 //   red: 'walk'
 // }
@@ -374,8 +376,9 @@ const wordMachine = createMachine({
   }
 });
 
-const boldState = wordMachine.transition('bold.off', { type: 'TOGGLE_BOLD' })
-  .value;
+const boldState = wordMachine.transition('bold.off', {
+  type: 'TOGGLE_BOLD'
+}).value;
 
 // {
 //   bold: 'on',

docs/fr/guides/communication.md

@@ -131,23 +131,24 @@ The resolved data is placed into a `'done.invoke.<id>'` event, under the `data`
 If a Promise rejects, the `onError` transition will be taken with a `{ type: 'error.platform' }` event. The error data is available on the event's `data` property:
 
 ```js
-const search = (context, event) => new Promise((resolve, reject) => {
-  if (!event.query.length) {
-    return reject('No query specified');
-    // or:
-    // throw new Error('No query specified');
-  }
+const search = (context, event) =>
+  new Promise((resolve, reject) => {
+    if (!event.query.length) {
+      return reject('No query specified');
+      // or:
+      // throw new Error('No query specified');
+    }
 
-  return resolve(getSearchResults(event.query));
-});
+    return resolve(getSearchResults(event.query));
+  });
 
 // ...
 const searchMachine = createMachine({
   id: 'search',
   initial: 'idle',
   context: {
     results: undefined,
-    errorMessage: undefined,
+    errorMessage: undefined
   },
   states: {
     idle: {

docs/zh/guides/communication.md

@@ -131,23 +131,24 @@ const userMachine = createMachine({
 如果 Promise 拒绝，则将使用 `{ type: 'error.platform' }` 事件进行 `onError` 转换。 错误数据在事件的 `data` 属性中可用：
 
 ```js
-const search = (context, event) => new Promise((resolve, reject) => {
-  if (!event.query.length) {
-    return reject('No query specified');
-    // or:
-    // throw new Error('No query specified');
-  }
+const search = (context, event) =>
+  new Promise((resolve, reject) => {
+    if (!event.query.length) {
+      return reject('No query specified');
+      // or:
+      // throw new Error('No query specified');
+    }
 
-  return resolve(getSearchResults(event.query));
-});
+    return resolve(getSearchResults(event.query));
+  });
 
 // ...
 const searchMachine = createMachine({
   id: 'search',
   initial: 'idle',
   context: {
     results: undefined,
-    errorMessage: undefined,
+    errorMessage: undefined
   },
   states: {
     idle: {

packages/core/src/State.ts

@@ -16,6 +16,7 @@ import type {
   EventObject,
   HistoryValue,
   MachineContext,
+  PersistedMachineState,
   Prop,
   SCXML,
   StateConfig,
@@ -124,7 +125,7 @@ export class State<
       return stateValue;
     }
 
-    const _event = initEvent as SCXML.Event<TEvent>;
+    const _event = initEvent as SCXML.Event<TEvent>; // TODO: fix
 
     const configuration = getConfiguration(
       getStateNodes(machine.root, stateValue)
@@ -167,7 +168,7 @@ export class State<
     this.configuration =
       config.configuration ??
       Array.from(getConfiguration(getStateNodes(machine.root, config.value)));
-    this.transitions = config.transitions;
+    this.transitions = config.transitions as any;
     this.children = config.children;
 
     this.value = getStateValue(machine.root, this.configuration);
@@ -287,3 +288,24 @@ export function cloneState<TState extends AnyState>(
     state.machine
   ) as TState;
 }
+
+export function getPersistedState<TState extends AnyState>(
+  state: TState
+): PersistedMachineState<TState> {
+  const { configuration, transitions, tags, machine, children, ...jsonValues } =
+    state;
+
+  const childrenJson: Partial<PersistedMachineState<any>['children']> = {};
+
+  for (const id in children) {
+    childrenJson[id] = {
+      state: children[id].getPersistedState?.(),
+      src: children[id].src
+    };
+  }
+
+  return {
+    ...jsonValues,
+    children: childrenJson
+  } as PersistedMachineState<TState>;
+}