与 Stencil 一起使用

Stencil web components work very well with XState.

src/helpers/toggle-machine.ts

  1. import { createMachine } from "@xstate/fsm";
  3. export const toggleMachine = createMachine<
  4.   undefined,
  5.   { type: "toggle" },
  6.   { value: "active" | "inactive"; context: undefined }
  7. >({
  8.   id: "toggle",
  9.   initial: "active",
  10.   states: {
  11.     inactive: { on: { toggle: "active" } },
  12.     active: { on: { toggle: "inactive" } }
  13.   }
  14. });

src/components/toggle/toggle.tsx

Add a state property to your component, decorated with @State so that it triggers a re-render when changed.

On componentWillLoad, interpret the toggleMachine and listen for state transitions.

After a transition has occured, the state property is set to the machine’s new state, triggering a re-render.

  1. import { Component, h, State } from "@stencil/core";
  2. import { interpret } from "@xstate/fsm";
  3. import { toggleMachine } from "../helpers/toggle-machine";
  5. @Component({
  6.   tag: "my-toggle",
  7.   styleUrl: "toggle.css",
  8.   shadow: true
  9. })
  10. export class Toggle {
  11.   private _service = interpret(toggleMachine);
  13.   @State() state = toggleMachine.initialState;
  15.   componentWillLoad() {
  16.     this._service.subscribe(state => {
  17.       this.state = state;
  18.     });
  20.     this._service.start();
  21.   }
  23.   disconnectedCallback() {
  24.     this._service.stop();
  25.   }
  27.   render() {
  28.     const { send } = this._service;
  30.     return (
  31.       <button onClick={() => send("toggle")}>
  32.         {this.state.value === "inactive" ? "Off" : "On"}
  33.       </button>
  34.     );
  35.   }
  36. }

Your html page:

  1. <html>
  2.   <head>
  3.     <script type="module" src="/build/my-toggle.esm.js"></script>
  4.     <script nomodule src="/build/my-toggle.js"></script>
  5.   </head>
  6.   <body>
  7.     <my-toggle></my-toggle>
  8.   </body>
  9. </html>