Svelte template (#4591)

* Add Svelte template * Update template deps * Optional options for Vue useActor * Changesets * Update READMEs
statelyai · Dec 15, 2023 · f8cc116 · f8cc116
1 parent 260f4fd
commit f8cc116
Show file tree

Hide file tree

Showing 28 changed files with 2,354 additions and 450 deletions.
diff --git a/.changeset/perfect-lobsters-share.md b/.changeset/perfect-lobsters-share.md
@@ -0,0 +1,5 @@
+---
+'@xstate/vue': patch
+---
+
+Actor `options` are now optional in `useActor`.
diff --git a/.changeset/violet-islands-thank.md b/.changeset/violet-islands-thank.md
@@ -0,0 +1,5 @@
+---
+'@xstate/svelte': patch
+---
+
+Marked `useMachine` as aliased, not deprecated.
diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@ Get started by forking one of these templates on CodeSandbox:
 <tr><th>Template</th><th></th></tr>
 </thead>
 <tbody>
+
 <tr>
 <td>
 
@@ -54,6 +55,7 @@ Get started by forking one of these templates on CodeSandbox:
 
 </td>
 </tr>
+
 <tr>
 <td>
 
@@ -70,6 +72,7 @@ Get started by forking one of these templates on CodeSandbox:
 
 </td>
 </tr>
+
 <tr>
 <td>
 
@@ -86,6 +89,24 @@ Get started by forking one of these templates on CodeSandbox:
 
 </td>
 </tr>
+
+<tr>
+<td>
+
+[🧡 XState + Svelte Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/svelte-ts)
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/svelte-ts?file=%2Fsrc%2FfeedbackMachine.ts)
+
+</td>
+<td>
+
+- [Svelte](https://svelte.dev/)
+- XState v5
+- TypeScript
+
+</td>
+</tr>
+
 </tbody>
 </table>
 
@@ -155,9 +176,6 @@ Read [📽 the slides](http://slides.com/davidkhourshid/finite-state-machines) (
 
 - [Statecharts - A Visual Formalism for Complex Systems](https://www.sciencedirect.com/science/article/pii/0167642387900359/pdf) by David Harel
 - [The World of Statecharts](https://statecharts.github.io/) by Erik Mogensen
-- [Pure UI](https://rauchg.com/2015/pure-ui) by Guillermo Rauch
-- [Pure UI Control](https://medium.com/@asolove/pure-ui-control-ac8d1be97a8d) by Adam Solove
-- [Spectrum - Statecharts Community](https://spectrum.chat/statecharts) (For XState specific questions, please use the [GitHub Discussions](https://github.com/statelyai/xstate/discussions))
 
 ## Packages
 

diff --git a/examples/readme.md b/examples/readme.md
@@ -3,13 +3,13 @@
 1. Start a [new Vite project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) from this `/examples` directory using the CLI:
 
 ```bash
-npm create vite@latest my-example-react --template react-ts
+pnpm create vite@latest my-example-react --template react-ts
 ```
 
 2. Install `xstate@beta` and the library-specific beta (e.g. `@xstate/react@beta`):
 
 ```bash
-npm i xstate@beta @xstate/react@beta
+pnpm i xstate@beta @xstate/react@beta
 ```
 
 3. Add your XState-powered demo code ✨

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -38,6 +38,7 @@ Get started by forking one of these templates on CodeSandbox:
 <tr><th>Template</th><th></th></tr>
 </thead>
 <tbody>
+
 <tr>
 <td>
 
@@ -54,6 +55,7 @@ Get started by forking one of these templates on CodeSandbox:
 
 </td>
 </tr>
+
 <tr>
 <td>
 
@@ -70,6 +72,7 @@ Get started by forking one of these templates on CodeSandbox:
 
 </td>
 </tr>
+
 <tr>
 <td>
 
@@ -86,6 +89,24 @@ Get started by forking one of these templates on CodeSandbox:
 
 </td>
 </tr>
+
+<tr>
+<td>
+
+[🧡 XState + Svelte Template (CodeSandbox)](https://codesandbox.io/p/devbox/github/statelyai/xstate/tree/main/templates/svelte-ts)
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/statelyai/xstate/tree/main/templates/svelte-ts?file=%2Fsrc%2FfeedbackMachine.ts)
+
+</td>
+<td>
+
+- [Svelte](https://svelte.dev/)
+- XState v5
+- TypeScript
+
+</td>
+</tr>
+
 </tbody>
 </table>
 

diff --git a/packages/xstate-svelte/src/useMachine.ts b/packages/xstate-svelte/src/useMachine.ts
@@ -12,7 +12,7 @@ type RestParams<TMachine extends AnyStateMachine> =
     ? [options: ActorOptions<TMachine>]
     : [options?: ActorOptions<TMachine>];
 
-/** @deprecated */
+/** @alias useActor */
 export function useMachine<TMachine extends AnyStateMachine>(
   machine: TMachine,
   ...[options = {}]: RestParams<TMachine>

diff --git a/packages/xstate-vue/src/useActor.ts b/packages/xstate-vue/src/useActor.ts
@@ -13,7 +13,7 @@ import { useSelector } from './useSelector.ts';
 
 export function useActor<TLogic extends AnyActorLogic>(
   actorLogic: TLogic,
-  options: ActorOptions<TLogic>
+  options?: ActorOptions<TLogic>
 ): {
   snapshot: Ref<SnapshotFrom<TLogic>>;
   send: (event: EventFrom<TLogic>) => void;

diff --git a/templates/react-ts/package.json b/templates/react-ts/package.json
@@ -9,10 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@xstate/react": "4.0.0",
+    "@xstate/react": "4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "xstate": "5.0.2"
+    "xstate": "5.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.39",