मैं एक राज्य मशीन का उपयोग करना चाहता हूं जहां वर्तमान स्थिति को वर्तमान स्क्रीन पर मैप किया जाता है। मैं svelte का उपयोग xstate.
प्रकार के रूप में स्ट्रिंग के साथ उदाहरण:
App.svelte

<script>
    import { interpret } from "xstate";
    import { toggleMachine } from "./machine";

    const toggleService = interpret(toggleMachine).start();
</script>

<button on:click={() => toggleService.send("TOGGLE")}>
    <p>{$toggleService.value}</p>
</button>

मशीन.जेएस

import { createMachine } from 'xstate';

// This machine is completely decoupled from Svelte
export const toggleMachine = createMachine({
    id: 'toggle',
    initial: 'LOGIN',
    states: {
        LOBBY: {
            on: { TOGGLE: 'LOGIN' }
        },
        LOGIN: {
            on: { TOGGLE: 'LOBBY' }
        }
    }
});

एक स्ट्रिंग के बजाय एक व्यापक घटक के साथ ऐसा कैसे करें?
<p>{$toggleService.value}</p> के बजाय ऐसा कुछ <$toggleService.value />

संपादित करें: मैंने क्या प्रयास किया:

  • लॉबी बनाएं और बड़े पैमाने पर लॉगिन करें लॉग इन करें
<script lang="ts">
</script>

<main>
    <h1>Login</h1>
</main>

<style>
</style>

लॉबी.svelte

<script lang="ts">
</script>

<main>
    <h1>Lobby</h1>
</main>

<style>
</style>

  • Machine.js . में उनका उपयोग करें
import { createMachine } from 'xstate';
import Login from './Login.svelte'
import Lobby from './Lobby.svelte'
// This machine is completely decoupled from Svelte
export const toggleMachine = createMachine({
    id: 'toggle',
    initial: Login,
    states: {
        Login: {
            on: { TOGGLE: Lobby }
        },
        Lobby: {
            on: { TOGGLE: Login }
        }
    }
});
  • App.svelte App.svelte . में स्टेट मशीन का उपयोग करें
<script>
    import { interpret } from "xstate";
    import { toggleMachine } from "./machine";

    const toggleService = interpret(toggleMachine).start();
</script>

<button on:click={() => toggleService.send("TOGGLE")}>
    <$toggleService.value />
</button>

मुझे त्रुटि मिलती है:

[!] (plugin svelte) ParseError: Expected valid tag name
src/App.svelte
 7: 
 8: <button on:click={() => toggleService.send("TOGGLE")}>
 9:   <$toggleService.value />
       ^
10: </button>
ParseError: Expected valid tag name
    at error (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/utils/error.ts:25:16)
    at Parser$1.error (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/index.ts:101:3)
    at read_tag_name (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/state/tag.ts:267:10)
    at tag (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/state/tag.ts:77:15)
    at new Parser$1 (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/index.ts:53:12)
    at parse (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/parse/index.ts:218:17)
    at compile (/home/walde/projects/svelte/xstate/node_modules/svelte/src/compiler/compile/index.ts:93:14)
    at Object.transform (/home/walde/projects/svelte/xstate/node_modules/rollup-plugin-svelte/index.js:111:21)
    at /home/walde/projects/svelte/xstate/node_modules/rollup/dist/shared/rollup.js:20218:25
0
Koronis Neilos 3 सितंबर 2021, 15:13

2 जवाब

सबसे बढ़िया उत्तर

मैं xstate-part के लिए बात नहीं कर सकता, लेकिन अंतिम स्निपेट निश्चित रूप से काम नहीं कर रहा है। आप इस तरह से एक टैग को गतिशील रूप से घोषित नहीं कर सकते। लेकिन आप इसके लिए विशेष <svelte:component> तत्व का उपयोग कर सकते हैं:

<script>
    import { interpret } from "xstate";
    import { toggleMachine } from "./machine";

    const toggleService = interpret(toggleMachine).start();
</script>

<button on:click={() => toggleService.send("TOGGLE")}>
    Toggle me
</button>
<svelte:component this={$toggleService.value} />

दस्तावेज़: https://svelte.dev/docs#svelte_component

1
dummdidumm 3 सितंबर 2021, 13:34

Dummdidumm के लिए धन्यवाद जिन्होंने व्यापक भाग के समाधान में मदद की।

एक सशर्त बयान लिखे बिना समस्या का पूर्ण समाधान कैसे एक साथ svelte और xstate का उपयोग करें:

  • घटक को राज्य मशीन के संदर्भ में बांधें
<svelte:component this=svelte{$toggleService.context.component} />
  • एक नए राज्य में प्रवेश करने पर राज्य मशीन के संदर्भ को बदलें ताकि यह वर्तमान स्थिति से मेल खाए।
        Login: {
            on: { TOGGLE: "Lobby" },
            entry: assign({ component: (ctx) => ctx.component = Login }),
        }

पूर्ण कार्य उदाहरण:
App.svelte

<script>
    import { interpret } from "xstate";
    import { toggleMachine } from "./machine";
    const toggleService = interpret(toggleMachine).start();
</script>

<button on:click={() => toggleService.send("TOGGLE")}>
    {$toggleService.value}
</button>
<svelte:component this={$toggleService.context.component} />

लॉबी.svelte

<script lang="ts">
</script>
<main>
    <h1>SVELTE Lobby</h1>
</main>
<style>
</style>

लॉगिन.svelte

<script lang="ts">
</script>
<main>
    <h1>SVELTE Login</h1>
</main>
<style>
</style>

मशीन.जेएस

import { createMachine, assign } from 'xstate';
import Login from './Login.svelte'
import Lobby from './Lobby.svelte'
export const toggleMachine = createMachine({
    id: 'toggle',
    initial: "Login",
    context: {
        component: Lobby
    },
    states: {
        Login: {
            on: { TOGGLE: "Lobby" },
            entry: assign({ component: (ctx) => ctx.component = Login }),
        },
        Lobby: {
            on: { TOGGLE: "Login" },
            entry: assign({ component: (ctx) => ctx.component = Lobby }),
        }
    }
});
0
Koronis Neilos 4 सितंबर 2021, 11:59