diff --git a/package.json b/package.json index d464f18..8d93b69 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,8 @@ "@lit-protocol/types": "^2.2.41", "@sveltejs/vite-plugin-svelte": "^2.4.2", "@wagmi/core": "^1.3.8", - "viem": "^1.3.0" + "@xstate/svelte": "^2.1.0", + "viem": "^1.3.0", + "xstate": "^4.38.2" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ce0171e..5179453 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,9 +31,15 @@ dependencies: '@wagmi/core': specifier: ^1.3.8 version: 1.3.8(react@18.2.0)(typescript@5.1.6)(viem@1.4.1)(zod@3.21.4) + '@xstate/svelte': + specifier: ^2.1.0 + version: 2.1.0(svelte@4.1.1)(xstate@4.38.2) viem: specifier: ^1.3.0 version: 1.4.1(typescript@5.1.6)(zod@3.21.4) + xstate: + specifier: ^4.38.2 + version: 4.38.2 devDependencies: '@iconify/svelte': @@ -3260,6 +3266,22 @@ packages: - react dev: false + /@xstate/svelte@2.1.0(svelte@4.1.1)(xstate@4.38.2): + resolution: {integrity: sha512-cot553w2v4MdmDLkRBLhEjGO5LlnlPcpZ9RT7jFqpn+h0rpmjtkva6zjIZddPrxEOM6DVHDwzYbpDe+BErElQg==} + peerDependencies: + '@xstate/fsm': ^2.1.0 + svelte: ^3.24.1 || ^4 + xstate: ^4.38.1 + peerDependenciesMeta: + '@xstate/fsm': + optional: true + xstate: + optional: true + dependencies: + svelte: 4.1.1 + xstate: 4.38.2 + dev: false + /JSONStream@1.3.5: resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==} hasBin: true @@ -7148,6 +7170,10 @@ packages: utf-8-validate: 5.0.10 dev: false + /xstate@4.38.2: + resolution: {integrity: sha512-Fba/DwEPDLneHT3tbJ9F3zafbQXszOlyCJyQqqdzmtlY/cwE2th462KK48yaANf98jHlP6lJvxfNtN0LFKXPQg==} + dev: false + /xstream@11.14.0: resolution: {integrity: sha512-1bLb+kKKtKPbgTK6i/BaoAn03g47PpFstlbe1BA+y3pNS/LfvcaghS5BFf9+EE1J+KwSQsEpfJvFN5GqFtiNmw==} dependencies: diff --git a/src/lib/components/examples/Recipies.svelte b/src/lib/components/examples/Recipies.svelte index 9efb393..ae73e44 100644 --- a/src/lib/components/examples/Recipies.svelte +++ b/src/lib/components/examples/Recipies.svelte @@ -1,105 +1,200 @@ - -
- - - Enter Name -
- - -
-
- - Enter Email -
- - -
-
- - Completed -

Recipe Completed

-

Your Name: {$recipeStore.context.name}

-

Your Email: {$recipeStore.context.email}

-
- - Restart -

Ready to start over?

- -
-
-
+
+ {#if $state.value === 'start'} + +
+

Step 1 - Start

+ +
+ {:else if $state.value === 'nameInput'} + +
+

Step 2 - Name Input

+
+
+ {#if $errors.name} + {$errors.name} + {:else} + + {/if} + + +
+ +
+
+ {:else if $state.value === 'emailInput'} +
+

Step 3 - Email Input

+
+
+ {#if $errors.email} + {$errors.email} + {:else} + + {/if} + + +
+ +
+
+ + + {:else if $state.value === 'summary'} +
+

Summary

+

Name: {$form.name}

+

Email: {$form.email}

+ +
+ {:else if $state.value === 'submitting'} +
+

Submitting...

+
+ {:else if $state.value === 'success'} +
+

User created successfully!

+ +
+ {:else if $state.value === 'failure'} +
+

Failed to create user. Please try again.

+ +
+ {/if} +
diff --git a/src/lib/components/examples/TreeForm.svelte b/src/lib/components/examples/TreeForm.svelte deleted file mode 100644 index 877841b..0000000 --- a/src/lib/components/examples/TreeForm.svelte +++ /dev/null @@ -1,68 +0,0 @@ - - -{#if $successMessage} - -{:else} -
- - -
- {#if $errors.age} - {$errors.age} - {:else} - - {/if} - - -
- - -
-{/if} diff --git a/src/lib/components/recipies/userService.ts b/src/lib/components/examples/userService.ts similarity index 100% rename from src/lib/components/recipies/userService.ts rename to src/lib/components/examples/userService.ts diff --git a/src/lib/components/recipies/recipeStore.ts b/src/lib/components/recipies/recipeStore.ts deleted file mode 100644 index 5c0c7bd..0000000 --- a/src/lib/components/recipies/recipeStore.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { writable } from 'svelte/store'; - -export const recipeStore = writable({ - id: 'createUser', - step: 0, - context: {}, - error: null -}); diff --git a/src/lib/types/TreeSchema.ts b/src/lib/types/TreeSchema.ts index c88cae6..d45bd92 100644 --- a/src/lib/types/TreeSchema.ts +++ b/src/lib/types/TreeSchema.ts @@ -1,18 +1,19 @@ import { z } from 'zod'; -// Define custom validation messages const validationMessages = { name: { minLength: 'Name must be at least 3 characters.', maxLength: 'Name must contain at most 50 characters.', }, - age: { - min: 'Age must be at least 0 years.', - max: 'Age must be at most 5000 years.' + email: { + invalid: 'Please provide a valid email address.', } }; export const TreeSchema = z.object({ - name: z.string().min(3, validationMessages.name.minLength).max(50, validationMessages.name.maxLength), - age: z.number().min(0, validationMessages.age.min).max(5000, validationMessages.age.max) + name: z.string() + .min(3, validationMessages.name.minLength) + .max(50, validationMessages.name.maxLength), + email: z.string() + .email(validationMessages.email.invalid) }); diff --git a/svelte.config.js b/svelte.config.js index c50b321..dce3364 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -5,6 +5,10 @@ const config = { kit: { adapter: adapter() }, + ssr: { + // Other SSR options... + dynamicImportShim: false + }, preprocess: vitePreprocess(), }; export default config; \ No newline at end of file