create-feathersdev 0.11.0 → 0.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/esm/flows/with-application.js +1 -1
  3. package/esm/index.js +2 -2
  4. package/examples/frontend/react/index.html +16 -11
  5. package/examples/frontend/react/package.json +5 -3
  6. package/examples/frontend/react/src/App.css +29 -41
  7. package/examples/frontend/react/src/App.tsx +23 -27
  8. package/examples/frontend/react/src/Counter.tsx +29 -0
  9. package/examples/frontend/react/src/assets/feathers.svg +24 -0
  10. package/examples/frontend/react/src/automerge.ts +14 -3
  11. package/examples/frontend/react/src/main.tsx +0 -1
  12. package/examples/frontend/react/vite.config.ts +2 -1
  13. package/examples/frontend/svelte/index.html +16 -11
  14. package/examples/frontend/svelte/package.json +4 -3
  15. package/examples/frontend/svelte/src/App.svelte +22 -22
  16. package/examples/frontend/svelte/src/Counter.svelte +33 -0
  17. package/examples/frontend/svelte/src/app.css +28 -77
  18. package/examples/frontend/svelte/src/assets/feathers.svg +24 -0
  19. package/examples/frontend/svelte/src/auth.ts +11 -5
  20. package/examples/frontend/svelte/src/automerge.ts +27 -0
  21. package/examples/frontend/vanilla/index.html +19 -11
  22. package/examples/frontend/vanilla/package.json +10 -6
  23. package/examples/frontend/vanilla/public/feathers.svg +24 -0
  24. package/examples/frontend/vanilla/src/automerge.ts +14 -3
  25. package/examples/frontend/vanilla/src/main.ts +25 -13
  26. package/examples/frontend/vanilla/src/style.css +28 -94
  27. package/examples/frontend/vue/index.html +16 -11
  28. package/examples/frontend/vue/package.json +4 -4
  29. package/examples/frontend/vue/src/App.vue +25 -21
  30. package/examples/frontend/vue/src/Counter.vue +37 -0
  31. package/examples/frontend/vue/src/assets/base.css +28 -84
  32. package/examples/frontend/vue/src/assets/feathers.svg +24 -0
  33. package/examples/frontend/vue/src/assets/main.css +0 -34
  34. package/examples/frontend/vue/src/auth.ts +1 -1
  35. package/examples/frontend/vue/src/automerge.ts +14 -3
  36. package/package.json +2 -2
  37. package/examples/frontend/react/src/assets/react.svg +0 -1
  38. package/examples/frontend/react/src/index.css +0 -68
  39. package/examples/frontend/svelte/src/assets/svelte.svg +0 -1
  40. package/examples/frontend/vanilla/public/vite.svg +0 -1
  41. package/examples/frontend/vue/src/assets/logo.svg +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.11.2](https://github.com/feathersdev/cloud/compare/v0.11.1...v0.11.2) (2025-05-26)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * Change create-feathersdev to republish examples ([37b2092](https://github.com/feathersdev/cloud/commit/37b209233b6645e9536b58c1c205d25a32c3605a))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.11.1](https://github.com/feathersdev/cloud/compare/v0.11.0...v0.11.1) (2025-05-25)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * Update default development port ([#280](https://github.com/feathersdev/cloud/issues/280)) ([bfcbefa](https://github.com/feathersdev/cloud/commit/bfcbefaffe32bb7b1054540699519fc0d5f8dd33))
23
+
24
+
25
+
26
+
27
+
6
28
  # [0.11.0](https://github.com/feathersdev/cloud/compare/v0.10.1...v0.11.0) (2025-05-25)
7
29
 
8
30
 
@@ -14,7 +14,7 @@ export async function createApplication(init) {
14
14
  type: 'input',
15
15
  message: 'What are the allowed referers?',
16
16
  suffix: chalk.white(' A comma separated list of URLs where your frontend is running'),
17
- default: 'http://localhost:3030',
17
+ default: 'http://localhost:4040',
18
18
  },
19
19
  })))
20
20
  .then(async (ctx) => {
package/esm/index.js CHANGED
@@ -10,10 +10,10 @@ import { server } from './actions/server.js';
10
10
  import { getBaseContext, packageJson } from './base.js';
11
11
  const __dirname = new URL('.', import.meta.url).pathname;
12
12
  const apiUrl = 'https://api.feathers.dev';
13
- const referer = 'https://app.feathers.dev';
14
- const appId = 'did:key:z6MkheUYC6euEMuZjL84CixXgRmPfciuYXhz51D85WT3fC5T';
15
13
  // const apiUrl = 'http://localhost:8787'
14
+ const referer = 'https://app.feathers.dev';
16
15
  // const referer = 'http://localhost:3000'
16
+ const appId = 'did:key:z6MkheUYC6euEMuZjL84CixXgRmPfciuYXhz51D85WT3fC5T';
17
17
  // const appId = ''
18
18
  const store = createFileStore(fs, path.join(__dirname, '..', '.auth.json'));
19
19
  export const options = {
@@ -1,13 +1,18 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Vite + React + TS</title>
8
- </head>
9
- <body>
10
- <div id="root"></div>
11
- <script type="module" src="/src/main.tsx"></script>
12
- </body>
13
- </html>
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
9
+ <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
10
+ <title>feathers.dev React App</title>
11
+ </head>
12
+
13
+ <body>
14
+ <div id="root"></div>
15
+ <script type="module" src="/src/main.tsx"></script>
16
+ </body>
17
+
18
+ </html>
@@ -1,20 +1,22 @@
1
1
  {
2
- "name": "react-frontend",
2
+ "name": "feathersdev-react",
3
3
  "type": "module",
4
4
  "version": "0.0.0",
5
5
  "private": true,
6
6
  "scripts": {
7
- "dev": "vite --port 3000",
7
+ "dev": "vite --port 4040",
8
8
  "build": "tsc -b && vite build",
9
9
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10
10
  "preview": "vite preview"
11
11
  },
12
12
  "dependencies": {
13
- "@feathersdev/auth": "^0.6.5",
13
+ "@feathersdev/auth": "^0.11.2",
14
+ "@feathersdev/automerge": "^0.11.2",
14
15
  "react": "^18.3.1",
15
16
  "react-dom": "^18.3.1"
16
17
  },
17
18
  "devDependencies": {
19
+ "vite-plugin-wasm": "^3.4.1",
18
20
  "@types/react": "^18.3.12",
19
21
  "@types/react-dom": "^18.3.1",
20
22
  "@typescript-eslint/eslint-plugin": "^8.14.0",
@@ -1,42 +1,30 @@
1
- #root {
2
- max-width: 1280px;
3
- margin: 0 auto;
4
- padding: 2rem;
5
- text-align: center;
6
- }
7
-
8
- .logo {
9
- height: 6em;
10
- padding: 1.5em;
11
- will-change: filter;
12
- transition: filter 300ms;
13
- }
14
- .logo:hover {
15
- filter: drop-shadow(0 0 2em #646cffaa);
16
- }
17
- .logo.react:hover {
18
- filter: drop-shadow(0 0 2em #61dafbaa);
19
- }
20
-
21
- @keyframes logo-spin {
22
- from {
23
- transform: rotate(0deg);
24
- }
25
- to {
26
- transform: rotate(360deg);
27
- }
28
- }
29
-
30
- @media (prefers-reduced-motion: no-preference) {
31
- a:nth-of-type(2) .logo {
32
- animation: logo-spin infinite 20s linear;
33
- }
34
- }
35
-
36
- .card {
37
- padding: 2em;
38
- }
39
-
40
- .read-the-docs {
41
- color: #888;
1
+ :root {
2
+ --color-base-100: oklch(3.6% 0.01 270);
3
+ --color-base-200: oklch(15% 19% 307);
4
+ --color-base-300: oklch(35% 44% 287);
5
+ --color-base-300-old: oklch(17.6% 0.04 270);
6
+ --color-base-content: oklch(93.3% 0.01 260);
7
+ --color-primary: oklch(48% 39% 348);
8
+ --color-primary-content: oklch(100% 0 0);
9
+ --color-secondary: oklch(91.9% 0.13 99.9);
10
+ --color-secondary`-content: oklch(0% 0 0);
11
+ --color-accent: oklch(34.1% 0.13 297.4);
12
+ --color-accent-content: oklch(100% 0 0);
13
+ --color-neutral: oklch(20.1% 0.05 260.7);
14
+ --color-neutral-content: oklch(100% 0 0);
15
+ --color-info: oklch(56.8% 0.14 255.1);
16
+ --color-info-content: oklch(94.5% 0.01 230);
17
+ --color-success: oklch(77.1% 0.13 149.9);
18
+ --color-warning-content: oklch(94.5% 0.01 230);
19
+ --color-error: oklch(64.1% 0.21 29.3);
20
+ --color-error-content: oklch(94.5% 0.01 230);
21
+ --radius-selector: 1rem;
22
+ --radius-field: 1rem;
23
+ --radius-box: 0.5rem;
24
+ --size-selector: 0.25rem;
25
+ --size-field: 0.25rem;
26
+ --border: 1px;
27
+ --depth: 1;
28
+ --noise: 0;
29
+ --invert-logo: 0;
42
30
  }
@@ -1,37 +1,33 @@
1
1
  import { useEffect, useState } from 'react'
2
2
 
3
3
  import './App.css'
4
- import { authFetch } from './auth'
5
-
6
- async function loadMessage() {
7
- // Get data with authentication from your server
8
- const response = await authFetch('http://localhost:3030/message', {
9
- method: 'GET'
10
- });
11
-
12
- if (response.status >= 400) {
13
- throw new Error(`Failed to load message: ${response.statusText}`);
14
- }
15
-
16
- return response.json();
17
- }
4
+ import { auth } from './auth'
5
+ import { loadAppDocument, AppDocumentHandle } from './automerge'
6
+ import { FeathersAuthUser } from '@feathersdev/auth'
7
+ import Counter from './Counter'
8
+ import feathersLogo from './assets/feathers.svg'
18
9
 
19
10
  function App() {
20
- const [message, setMessage] = useState('')
11
+ const [handle, setHandle] = useState<AppDocumentHandle>()
12
+ const [user, setUser] = useState<FeathersAuthUser | null>(null)
21
13
 
22
14
  useEffect(() => {
23
- loadMessage().then(({ message }) => setMessage(message))
24
- }, [message])
25
-
26
- return (
27
- <>
28
- <h1>Feathers Auth React Demo</h1>
29
- <div className="card">
30
- <p>The message from the server is:</p>
31
- </div>
32
- <h2>{message}</h2>
33
- </>
34
- )
15
+ // Get the application document
16
+ loadAppDocument().then(async handle => {
17
+ setHandle(handle)
18
+ // Once the app document is available we also know
19
+ // we are logged in and can set the user
20
+ setUser(await auth.getUser())
21
+ })
22
+ }, [])
23
+
24
+ return (<div className="w-96 mx-auto flex flex-col gap-4 text-center pt-10">
25
+ <img src={feathersLogo} alt="Feathers Logo" />
26
+ {handle ? <>
27
+ <h2 className="text-2xl">Hello <strong>{user?.email}</strong>!</h2>
28
+ <Counter handle={handle} />
29
+ </> : <div>Loading...</div>}
30
+ </div>)
35
31
  }
36
32
 
37
33
  export default App
@@ -0,0 +1,29 @@
1
+ import { useEffect, useState } from "react";
2
+ import { AppDocumentHandle } from "./automerge";
3
+
4
+ export default function Counter({ handle }: { handle: AppDocumentHandle }) {
5
+ const [counter, setCounter] = useState(0)
6
+
7
+ useEffect(() => {
8
+ handle.on("change", ({ doc }) => {
9
+ setCounter(doc.counter || 0)
10
+ })
11
+ }, [handle])
12
+
13
+ const incrementCounter = () => {
14
+ handle.change((doc) => {
15
+ doc.counter = (doc.counter || 0) + 1
16
+ })
17
+ }
18
+
19
+ return <div className="card bg-base-300 mx-auto rounded-4xl">
20
+ <div className="card-body">
21
+ <h2 className="text-2xl">Community Counter</h2>
22
+ <p className="text-sm">Number of times clicked by everybody</p>
23
+ <strong className="text-3xl pt-2 pb-3">{counter}</strong>
24
+ <button className="btn btn-primary" onClick={incrementCounter}>
25
+ Increment
26
+ </button>
27
+ </div>
28
+ </div>
29
+ }
@@ -0,0 +1,24 @@
1
+ <svg width="607" height="99" viewBox="0 0 607 99" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_3_192)">
3
+ <path d="M63.3 0C59.1 0 55 1.7 52 4.7L50.9 5.8C50.4 13.8 47.7 21.1 43.5 27.8C45 21.4 45.7 15.7 44.6 12.1L35.2 21.5C34.7 29.5 32 36.7 27.8 43.3C29.5 36.9 30 31.7 29.3 27.3L19.5 37.1C15.9 40.6 13.9 45.5 13.9 50.5V79.1L3.9 88.9C1.4 91.2 0 94.5 0 97.9V98.7L73.4 25.9C80.3 19.1 84.1 9.8 84.2 0.1H63.4L63.3 0Z" fill="white"/>
4
+ <path d="M57.6 61.4L77.8 41.3C81.8 37.4 84 32 84 26.4V14.2C83.3 16.9 82.4 19.4 81 21.4C78.3 25.1 75.4 28.5 72.1 31.8L37.4 66.3L50.8 64.7C53.3 64.4 55.7 63.3 57.4 61.5L57.6 61.4Z" fill="white"/>
5
+ <path d="M33.7 70L17.4 86.2L26.6 86.4C30.3 86.4 33.8 85 36.4 82.5L52.1 66.9C51 67.6 50.1 67.9 49 68.2L33.7 70Z" fill="white"/>
6
+ <path d="M189.7 64.6H153.8C154 67.8 155.1 70.3 156.9 72C158.7 73.7 161 74.5 163.6 74.5C167.6 74.5 170.3 72.8 171.8 69.5H188.7C187.8 72.9 186.3 76 184 78.7C181.7 81.4 178.9 83.5 175.5 85.1C172.1 86.6 168.3 87.4 164.1 87.4C159.9 87.4 154.5 86.3 150.6 84.2C146.6 82 143.6 79 141.3 74.9C139.1 70.9 138 66.2 138 60.8C138 55.4 139.1 50.7 141.3 46.7C143.5 42.7 146.6 39.6 150.5 37.4C154.5 35.2 159 34.2 164.1 34.2C169.2 34.2 173.6 35.3 177.4 37.4C181.3 39.5 184.3 42.5 186.5 46.4C188.7 50.3 189.8 54.8 189.8 60C189.8 65.2 189.8 63 189.5 64.6H189.7ZM173.8 55.8C173.8 53.1 172.9 50.9 171 49.3C169.1 47.7 166.8 46.9 164.1 46.9C161.4 46.9 159.2 47.7 157.4 49.2C155.6 50.7 154.4 52.9 154 55.8H173.8Z" fill="white"/>
7
+ <path d="M198.2 46.7C200.2 42.7 202.9 39.6 206.4 37.4C209.9 35.2 213.7 34.2 218 34.2C222.3 34.2 224.8 34.9 227.6 36.4C230.3 37.9 232.5 39.8 233.9 42.2V34.9H249.7V86.6H233.9V79.3C232.4 81.7 230.2 83.7 227.5 85.1C224.8 86.6 221.6 87.3 217.9 87.3C214.2 87.3 209.9 86.2 206.4 84C202.9 81.8 200.2 78.7 198.2 74.6C196.2 70.6 195.2 65.9 195.2 60.6C195.2 55.3 196.2 50.6 198.2 46.6V46.7ZM230.6 51.4C228.4 49.1 225.7 48 222.6 48C219.5 48 216.8 49.1 214.6 51.4C212.4 53.7 211.3 56.8 211.3 60.7C211.3 64.6 212.4 67.8 214.6 70.1C216.8 72.4 219.5 73.6 222.6 73.6C225.7 73.6 228.4 72.5 230.6 70.2C232.8 67.9 233.9 64.8 233.9 60.8C233.9 56.8 232.8 53.7 230.6 51.4Z" fill="white"/>
8
+ <path d="M290.1 73.2V86.6H282C276.3 86.6 271.8 85.2 268.6 82.4C265.4 79.6 263.8 75 263.8 68.6V48H257.5V34.8H263.8V22.2H279.6V34.8H290V48H279.6V68.8C279.6 70.3 280 71.5 280.7 72.1C281.4 72.8 282.7 73.1 284.4 73.1H290.1V73.2Z" fill="white"/>
9
+ <path d="M409.8 64.6H373.9C374.1 67.8 375.2 70.3 377 72C378.8 73.7 381.1 74.5 383.7 74.5C387.7 74.5 390.4 72.8 391.9 69.5H408.8C407.9 72.9 406.4 76 404.1 78.7C401.8 81.4 399 83.5 395.6 85.1C392.2 86.6 388.4 87.4 384.2 87.4C380 87.4 374.6 86.3 370.7 84.2C366.7 82 363.7 79 361.4 74.9C359.2 70.9 358.1 66.2 358.1 60.8C358.1 55.4 359.2 50.7 361.4 46.7C363.6 42.7 366.7 39.6 370.6 37.4C374.6 35.2 379.1 34.2 384.2 34.2C389.3 34.2 393.7 35.3 397.5 37.4C401.4 39.5 404.4 42.5 406.6 46.4C408.8 50.3 409.9 54.8 409.9 60C409.9 65.2 409.9 63 409.6 64.6H409.8ZM393.8 55.8C393.8 53.1 392.9 50.9 391 49.3C389.1 47.7 386.8 46.9 384.1 46.9C381.4 46.9 379.2 47.7 377.4 49.2C375.6 50.7 374.4 52.9 374 55.8H393.8Z" fill="white"/>
10
+ <path d="M467 85C463.5 83.5 460.7 81.3 458.7 78.7C456.7 76 455.5 73 455.3 69.7H471C471.2 71.5 472 72.9 473.5 74.1C475 75.2 476.8 75.8 479 75.8C481.2 75.8 482.5 75.4 483.6 74.6C484.7 73.8 485.2 72.8 485.2 71.6C485.2 70.4 484.4 69 482.9 68.3C481.4 67.6 478.9 66.8 475.4 65.9C471.7 65 468.6 64.1 466.1 63.2C463.6 62.2 461.5 60.7 459.7 58.7C457.9 56.6 457 53.8 457 50.3C457 46.8 457.8 44.6 459.5 42.2C461.1 39.8 463.5 37.8 466.7 36.4C469.9 35 473.7 34.3 478 34.3C484.5 34.3 489.6 35.9 493.3 39.1C497 42.3 499.2 46.6 499.7 51.9H485.1C484.9 50.1 484.1 48.7 482.7 47.6C481.4 46.6 479.6 46 477.5 46C475.4 46 474.2 46.4 473.2 47.1C472.2 47.8 471.7 48.8 471.7 50C471.7 51.2 472.5 52.6 474.1 53.3C475.7 54 478.1 54.8 481.5 55.5C485.3 56.5 488.4 57.5 490.9 58.4C493.3 59.4 495.4 60.9 497.2 63C499 65.1 500 68 500 71.6C500 74.6 499.2 77.3 497.5 79.7C495.8 82.1 493.4 83.9 490.2 85.3C487 86.7 483.3 87.3 479.1 87.3C474.9 87.3 470.6 86.5 467.1 85H467Z" fill="white"/>
11
+ <path d="M344.9 40.3C341.3 36.4 336.6 34.4 330.6 34.4C324.6 34.4 324 35.1 321.2 36.4C318.4 37.8 316.2 39.6 314.6 41.9V18.1H298.8V86.7H314.6V65.5C314.6 65.5 314.6 56.7 315 55.1C315.4 53.5 315.3 54.1 315.5 53.6C315.9 52.5 316.5 51.5 317.3 50.7C319.1 48.8 321.5 47.8 324.5 47.8C327.5 47.8 329.9 48.8 331.7 50.7C333.5 52.6 334.4 55.3 334.4 58.8V86.9H350.2V56.7C350.2 49.8 348.4 44.5 344.8 40.5L344.9 40.3Z" fill="white"/>
12
+ <path d="M113 75.8C118.7 72.3 125.1 66.9 125.3 60C125.3 58 125.3 55.8 125.3 53.5V48.2H133.8V35H125.3V34.5C125.3 31.8 125.9 29.9 127.2 28.8C128.4 27.8 130.6 27.3 133.6 27.5V14.1C133 14.1 132.2 14.1 131 14.1C124 14.1 118.6 15.8 115 19.1C111.4 22.4 109.5 27.2 109.5 33.6V35.1H103.8V48.3H109.5V86.8H125.3V74.5C121.1 76.2 116.7 76.9 113 75.9V75.8Z" fill="white"/>
13
+ <path d="M441.2 36.8C438.4 38.4 436.1 40.7 434.3 43.5V34.9H418.5V39.2C419.4 46.1 426.9 52.8 431.7 57.1C427.8 57.5 423 56.2 418.5 53.9V86.6H434.3V62.6C434.3 58.3 435.3 55.4 437.3 53.7C439.3 52 442.2 51.2 446.2 51.2H450.6V34.4C447.2 34.4 444.1 35.2 441.3 36.9L441.2 36.8Z" fill="white"/>
14
+ <path d="M509.4 84.2C508.8 83.6 508.4 82.8 508.4 81.8C508.4 80.8 508.7 80.1 509.4 79.4C510.1 78.7 510.8 78.4 511.8 78.4C512.8 78.4 513.5 78.7 514.1 79.4C514.7 80 515.1 80.8 515.1 81.8C515.1 82.8 514.8 83.5 514.1 84.2C513.5 84.8 512.7 85.2 511.8 85.2C510.9 85.2 510.1 84.9 509.4 84.2Z" fill="white"/>
15
+ <path d="M522 65.3C523.1 63.3 524.5 61.8 526.3 60.7C528.1 59.6 530.2 59.1 532.4 59.1C534.6 59.1 535.7 59.5 537.3 60.2C538.9 60.9 540.2 61.9 541.1 63.1V50.9H546.4V84.9H541.1V81.1C540.2 82.3 539.1 83.3 537.5 84.1C535.9 84.9 534.2 85.3 532.3 85.3C530.4 85.3 528.1 84.7 526.3 83.6C524.5 82.5 523 80.9 522 78.9C520.9 76.9 520.4 74.6 520.4 72.1C520.4 69.6 520.9 67.3 522 65.3ZM540 67.6C539.3 66.3 538.3 65.3 537.2 64.7C536 64 534.8 63.7 533.4 63.7C532 63.7 530.8 64 529.6 64.7C528.4 65.4 527.5 66.3 526.8 67.6C526.1 68.9 525.7 70.4 525.7 72.1C525.7 73.8 526.1 75.4 526.8 76.7C527.5 78 528.5 79 529.7 79.7C530.9 80.4 532.1 80.7 533.4 80.7C534.7 80.7 536 80.4 537.2 79.7C538.4 79 539.3 78 540 76.7C540.7 75.4 541.1 73.9 541.1 72.1C541.1 70.3 540.7 68.8 540 67.5V67.6Z" fill="white"/>
16
+ <path d="M577.7 74.1H558.3C558.5 76.1 559.2 77.7 560.6 79C561.9 80.2 563.6 80.8 565.6 80.8C568.4 80.8 570.4 79.6 571.6 77.3H577.3C576.5 79.6 575.1 81.5 573.1 83C571.1 84.5 568.6 85.2 565.6 85.2C562.6 85.2 561 84.7 559.1 83.6C557.2 82.5 555.7 81 554.6 79C553.5 77 553 74.7 553 72.1C553 69.5 553.5 67.2 554.6 65.2C555.7 63.2 557.1 61.7 559.1 60.6C561 59.5 563.2 59 565.7 59C568.2 59 570.2 59.5 572.1 60.6C574 61.6 575.4 63.1 576.5 65C577.5 66.9 578.1 69.1 578.1 71.5C578.1 73.9 578.1 73.3 577.9 74.1H577.7ZM572.4 69.9C572.4 68 571.7 66.4 570.3 65.3C568.9 64.1 567.3 63.6 565.3 63.6C563.3 63.6 561.9 64.2 560.7 65.3C559.4 66.5 558.6 68 558.4 70H572.4V69.9Z" fill="white"/>
17
+ <path d="M594.2 80.2L601.4 59.5H607L597.3 84.8H591L581.4 59.5H587L594.2 80.2Z" fill="white"/>
18
+ </g>
19
+ <defs>
20
+ <clipPath id="clip0_3_192">
21
+ <rect width="607" height="98.7" fill="white"/>
22
+ </clipPath>
23
+ </defs>
24
+ </svg>
@@ -1,4 +1,4 @@
1
- import { createAutomerge } from '@feathersdev/automerge'
1
+ import { createAutomerge, DocHandle } from '@feathersdev/automerge'
2
2
  import { auth } from './auth.js'
3
3
 
4
4
  /**
@@ -7,10 +7,21 @@ import { auth } from './auth.js'
7
7
  */
8
8
  export const automerge = createAutomerge(auth)
9
9
 
10
- interface AppData {
10
+ /**
11
+ * Add types for any data you want to store for your application
12
+ */
13
+ export interface AppData {
11
14
  counter: number
12
15
  }
13
16
 
14
- export async function getHandle() {
17
+ /**
18
+ * The document handle type for the application
19
+ */
20
+ export type AppDocumentHandle = DocHandle<AppData>
21
+
22
+ /**
23
+ * Load the document for the application
24
+ */
25
+ export async function loadAppDocument(): Promise<AppDocumentHandle> {
15
26
  return automerge.find<AppData>()
16
27
  }
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
  import ReactDOM from 'react-dom/client'
3
3
  import App from './App.tsx'
4
- import './index.css'
5
4
 
6
5
  ReactDOM.createRoot(document.getElementById('root')!).render(
7
6
  <React.StrictMode>
@@ -1,7 +1,8 @@
1
1
  import react from '@vitejs/plugin-react'
2
2
  import { defineConfig } from 'vite'
3
+ import wasm from 'vite-plugin-wasm'
3
4
 
4
5
  // https://vitejs.dev/config/
5
6
  export default defineConfig({
6
- plugins: [react()],
7
+ plugins: [wasm(), react()],
7
8
  })
@@ -1,13 +1,18 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Vite + Svelte + TS</title>
8
- </head>
9
- <body>
10
- <div id="app"></div>
11
- <script type="module" src="/src/main.ts"></script>
12
- </body>
13
- </html>
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
+ <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
9
+ <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
10
+ <title>feathers.dev Svelte App</title>
11
+ </head>
12
+
13
+ <body>
14
+ <div id="app"></div>
15
+ <script type="module" src="/src/main.ts"></script>
16
+ </body>
17
+
18
+ </html>
@@ -1,16 +1,17 @@
1
1
  {
2
- "name": "svelte-frontend",
2
+ "name": "feathersdev-svelte",
3
3
  "type": "module",
4
4
  "version": "0.0.0",
5
5
  "private": true,
6
6
  "scripts": {
7
- "dev": "vite --port 3000",
7
+ "dev": "vite --port 4040",
8
8
  "build": "vite build",
9
9
  "preview": "vite preview",
10
10
  "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
11
11
  },
12
12
  "dependencies": {
13
- "@feathersdev/auth": "^0.6.5"
13
+ "@feathersdev/auth": "^0.11.0",
14
+ "@feathersdev/automerge": "^0.11.0"
14
15
  },
15
16
  "devDependencies": {
16
17
  "@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -1,30 +1,30 @@
1
1
  <script lang="ts">
2
- import { authFetch } from './auth';
2
+ import type { FeathersAuthUser } from '@feathersdev/auth';
3
+ import { loadAppDocument, type AppDocumentHandle } from './automerge.js';
4
+ import Counter from './Counter.svelte';
5
+ import { auth } from './auth';
6
+ import feathersLogo from './assets/feathers.svg';
3
7
 
4
- let message = '';
8
+ let handle: AppDocumentHandle;
9
+ let user: FeathersAuthUser | null = null;
5
10
 
6
- async function loadMessage() {
7
- // Get data with authentication from your server
8
- const response = await authFetch('http://localhost:3030/message', {
9
- method: 'GET'
10
- });
11
-
12
- if (response.status >= 400) {
13
- throw new Error(`Failed to load message: ${response.statusText}`);
14
- }
15
-
16
- const body = await response.json();
17
-
18
- message = body.message;
11
+ async function init() {
12
+ // Get a handle to our app data document
13
+ handle = await loadAppDocument();
14
+ // Once the handle is available we are
15
+ // logged in and can get the current user
16
+ user = await auth.getUser();
19
17
  }
20
18
 
21
- loadMessage().catch((error: any) =>
22
- alert(`There was an error: ${error.message}`)
23
- );
19
+ init();
24
20
  </script>
25
21
 
26
- <main>
27
- <h1>Feathers Auth Svelte Demo</h1>
28
- <p>The message from the server is:</p>
29
- <h2>{message}</h2>
22
+ <main class="w-96 mx-auto flex flex-col gap-4 text-center pt-10">
23
+ <img src={feathersLogo} alt="feathers.dev Logo" />
24
+ {#if handle}
25
+ <h2 class="text-2xl">Hello <strong>{user?.email}</strong></h2>
26
+ <Counter {handle} />
27
+ {:else}
28
+ <p>Loading...</p>
29
+ {/if}
30
30
  </main>
@@ -0,0 +1,33 @@
1
+ <script lang="ts">
2
+ import type { AppDocumentHandle } from './automerge.js';
3
+
4
+ type CounterProps = {
5
+ handle: AppDocumentHandle;
6
+ };
7
+ let { handle }: CounterProps = $props();
8
+
9
+ let counter = $state(0);
10
+
11
+ $effect(() => {
12
+ handle.on('change', ({ doc }) => {
13
+ counter = doc.counter || 0;
14
+ });
15
+ });
16
+
17
+ function incrementCounter() {
18
+ handle.change((doc) => {
19
+ doc.counter = (doc.counter || 0) + 1;
20
+ });
21
+ }
22
+ </script>
23
+
24
+ <div class="card bg-base-300 mx-auto rounded-4xl">
25
+ <div class="card-body">
26
+ <h2 class="text-2xl">Community Counter</h2>
27
+ <p class="text-sm">Number of times clicked by everybody</p>
28
+ <strong class="text-3xl pt-2 pb-3">{counter}</strong>
29
+ <button class="btn btn-primary" onclick={incrementCounter}>
30
+ Increment
31
+ </button>
32
+ </div>
33
+ </div>
@@ -1,79 +1,30 @@
1
1
  :root {
2
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
- line-height: 1.5;
4
- font-weight: 400;
5
-
6
- color-scheme: light dark;
7
- color: rgba(255, 255, 255, 0.87);
8
- background-color: #242424;
9
-
10
- font-synthesis: none;
11
- text-rendering: optimizeLegibility;
12
- -webkit-font-smoothing: antialiased;
13
- -moz-osx-font-smoothing: grayscale;
14
- }
15
-
16
- a {
17
- font-weight: 500;
18
- color: #646cff;
19
- text-decoration: inherit;
20
- }
21
- a:hover {
22
- color: #535bf2;
23
- }
24
-
25
- body {
26
- margin: 0;
27
- display: flex;
28
- place-items: center;
29
- min-width: 320px;
30
- min-height: 100vh;
31
- }
32
-
33
- h1 {
34
- font-size: 3.2em;
35
- line-height: 1.1;
36
- }
37
-
38
- .card {
39
- padding: 2em;
40
- }
41
-
42
- #app {
43
- max-width: 1280px;
44
- margin: 0 auto;
45
- padding: 2rem;
46
- text-align: center;
47
- }
48
-
49
- button {
50
- border-radius: 8px;
51
- border: 1px solid transparent;
52
- padding: 0.6em 1.2em;
53
- font-size: 1em;
54
- font-weight: 500;
55
- font-family: inherit;
56
- background-color: #1a1a1a;
57
- cursor: pointer;
58
- transition: border-color 0.25s;
59
- }
60
- button:hover {
61
- border-color: #646cff;
62
- }
63
- button:focus,
64
- button:focus-visible {
65
- outline: 4px auto -webkit-focus-ring-color;
66
- }
67
-
68
- @media (prefers-color-scheme: light) {
69
- :root {
70
- color: #213547;
71
- background-color: #ffffff;
72
- }
73
- a:hover {
74
- color: #747bff;
75
- }
76
- button {
77
- background-color: #f9f9f9;
78
- }
2
+ --color-base-100: oklch(3.6% 0.01 270);
3
+ --color-base-200: oklch(15% 19% 307);
4
+ --color-base-300: oklch(35% 44% 287);
5
+ --color-base-300-old: oklch(17.6% 0.04 270);
6
+ --color-base-content: oklch(93.3% 0.01 260);
7
+ --color-primary: oklch(48% 39% 348);
8
+ --color-primary-content: oklch(100% 0 0);
9
+ --color-secondary: oklch(91.9% 0.13 99.9);
10
+ --color-secondary-content: oklch(0% 0 0);
11
+ --color-accent: oklch(34.1% 0.13 297.4);
12
+ --color-accent-content: oklch(100% 0 0);
13
+ --color-neutral: oklch(20.1% 0.05 260.7);
14
+ --color-neutral-content: oklch(100% 0 0);
15
+ --color-info: oklch(56.8% 0.14 255.1);
16
+ --color-info-content: oklch(94.5% 0.01 230);
17
+ --color-success: oklch(77.1% 0.13 149.9);
18
+ --color-warning-content: oklch(94.5% 0.01 230);
19
+ --color-error: oklch(64.1% 0.21 29.3);
20
+ --color-error-content: oklch(94.5% 0.01 230);
21
+ --radius-selector: 1rem;
22
+ --radius-field: 1rem;
23
+ --radius-box: 0.5rem;
24
+ --size-selector: 0.25rem;
25
+ --size-field: 0.25rem;
26
+ --border: 1px;
27
+ --depth: 1;
28
+ --noise: 0;
29
+ --invert-logo: 0;
79
30
  }
@@ -0,0 +1,24 @@
1
+ <svg width="607" height="99" viewBox="0 0 607 99" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_3_192)">
3
+ <path d="M63.3 0C59.1 0 55 1.7 52 4.7L50.9 5.8C50.4 13.8 47.7 21.1 43.5 27.8C45 21.4 45.7 15.7 44.6 12.1L35.2 21.5C34.7 29.5 32 36.7 27.8 43.3C29.5 36.9 30 31.7 29.3 27.3L19.5 37.1C15.9 40.6 13.9 45.5 13.9 50.5V79.1L3.9 88.9C1.4 91.2 0 94.5 0 97.9V98.7L73.4 25.9C80.3 19.1 84.1 9.8 84.2 0.1H63.4L63.3 0Z" fill="white"/>
4
+ <path d="M57.6 61.4L77.8 41.3C81.8 37.4 84 32 84 26.4V14.2C83.3 16.9 82.4 19.4 81 21.4C78.3 25.1 75.4 28.5 72.1 31.8L37.4 66.3L50.8 64.7C53.3 64.4 55.7 63.3 57.4 61.5L57.6 61.4Z" fill="white"/>
5
+ <path d="M33.7 70L17.4 86.2L26.6 86.4C30.3 86.4 33.8 85 36.4 82.5L52.1 66.9C51 67.6 50.1 67.9 49 68.2L33.7 70Z" fill="white"/>
6
+ <path d="M189.7 64.6H153.8C154 67.8 155.1 70.3 156.9 72C158.7 73.7 161 74.5 163.6 74.5C167.6 74.5 170.3 72.8 171.8 69.5H188.7C187.8 72.9 186.3 76 184 78.7C181.7 81.4 178.9 83.5 175.5 85.1C172.1 86.6 168.3 87.4 164.1 87.4C159.9 87.4 154.5 86.3 150.6 84.2C146.6 82 143.6 79 141.3 74.9C139.1 70.9 138 66.2 138 60.8C138 55.4 139.1 50.7 141.3 46.7C143.5 42.7 146.6 39.6 150.5 37.4C154.5 35.2 159 34.2 164.1 34.2C169.2 34.2 173.6 35.3 177.4 37.4C181.3 39.5 184.3 42.5 186.5 46.4C188.7 50.3 189.8 54.8 189.8 60C189.8 65.2 189.8 63 189.5 64.6H189.7ZM173.8 55.8C173.8 53.1 172.9 50.9 171 49.3C169.1 47.7 166.8 46.9 164.1 46.9C161.4 46.9 159.2 47.7 157.4 49.2C155.6 50.7 154.4 52.9 154 55.8H173.8Z" fill="white"/>
7
+ <path d="M198.2 46.7C200.2 42.7 202.9 39.6 206.4 37.4C209.9 35.2 213.7 34.2 218 34.2C222.3 34.2 224.8 34.9 227.6 36.4C230.3 37.9 232.5 39.8 233.9 42.2V34.9H249.7V86.6H233.9V79.3C232.4 81.7 230.2 83.7 227.5 85.1C224.8 86.6 221.6 87.3 217.9 87.3C214.2 87.3 209.9 86.2 206.4 84C202.9 81.8 200.2 78.7 198.2 74.6C196.2 70.6 195.2 65.9 195.2 60.6C195.2 55.3 196.2 50.6 198.2 46.6V46.7ZM230.6 51.4C228.4 49.1 225.7 48 222.6 48C219.5 48 216.8 49.1 214.6 51.4C212.4 53.7 211.3 56.8 211.3 60.7C211.3 64.6 212.4 67.8 214.6 70.1C216.8 72.4 219.5 73.6 222.6 73.6C225.7 73.6 228.4 72.5 230.6 70.2C232.8 67.9 233.9 64.8 233.9 60.8C233.9 56.8 232.8 53.7 230.6 51.4Z" fill="white"/>
8
+ <path d="M290.1 73.2V86.6H282C276.3 86.6 271.8 85.2 268.6 82.4C265.4 79.6 263.8 75 263.8 68.6V48H257.5V34.8H263.8V22.2H279.6V34.8H290V48H279.6V68.8C279.6 70.3 280 71.5 280.7 72.1C281.4 72.8 282.7 73.1 284.4 73.1H290.1V73.2Z" fill="white"/>
9
+ <path d="M409.8 64.6H373.9C374.1 67.8 375.2 70.3 377 72C378.8 73.7 381.1 74.5 383.7 74.5C387.7 74.5 390.4 72.8 391.9 69.5H408.8C407.9 72.9 406.4 76 404.1 78.7C401.8 81.4 399 83.5 395.6 85.1C392.2 86.6 388.4 87.4 384.2 87.4C380 87.4 374.6 86.3 370.7 84.2C366.7 82 363.7 79 361.4 74.9C359.2 70.9 358.1 66.2 358.1 60.8C358.1 55.4 359.2 50.7 361.4 46.7C363.6 42.7 366.7 39.6 370.6 37.4C374.6 35.2 379.1 34.2 384.2 34.2C389.3 34.2 393.7 35.3 397.5 37.4C401.4 39.5 404.4 42.5 406.6 46.4C408.8 50.3 409.9 54.8 409.9 60C409.9 65.2 409.9 63 409.6 64.6H409.8ZM393.8 55.8C393.8 53.1 392.9 50.9 391 49.3C389.1 47.7 386.8 46.9 384.1 46.9C381.4 46.9 379.2 47.7 377.4 49.2C375.6 50.7 374.4 52.9 374 55.8H393.8Z" fill="white"/>
10
+ <path d="M467 85C463.5 83.5 460.7 81.3 458.7 78.7C456.7 76 455.5 73 455.3 69.7H471C471.2 71.5 472 72.9 473.5 74.1C475 75.2 476.8 75.8 479 75.8C481.2 75.8 482.5 75.4 483.6 74.6C484.7 73.8 485.2 72.8 485.2 71.6C485.2 70.4 484.4 69 482.9 68.3C481.4 67.6 478.9 66.8 475.4 65.9C471.7 65 468.6 64.1 466.1 63.2C463.6 62.2 461.5 60.7 459.7 58.7C457.9 56.6 457 53.8 457 50.3C457 46.8 457.8 44.6 459.5 42.2C461.1 39.8 463.5 37.8 466.7 36.4C469.9 35 473.7 34.3 478 34.3C484.5 34.3 489.6 35.9 493.3 39.1C497 42.3 499.2 46.6 499.7 51.9H485.1C484.9 50.1 484.1 48.7 482.7 47.6C481.4 46.6 479.6 46 477.5 46C475.4 46 474.2 46.4 473.2 47.1C472.2 47.8 471.7 48.8 471.7 50C471.7 51.2 472.5 52.6 474.1 53.3C475.7 54 478.1 54.8 481.5 55.5C485.3 56.5 488.4 57.5 490.9 58.4C493.3 59.4 495.4 60.9 497.2 63C499 65.1 500 68 500 71.6C500 74.6 499.2 77.3 497.5 79.7C495.8 82.1 493.4 83.9 490.2 85.3C487 86.7 483.3 87.3 479.1 87.3C474.9 87.3 470.6 86.5 467.1 85H467Z" fill="white"/>
11
+ <path d="M344.9 40.3C341.3 36.4 336.6 34.4 330.6 34.4C324.6 34.4 324 35.1 321.2 36.4C318.4 37.8 316.2 39.6 314.6 41.9V18.1H298.8V86.7H314.6V65.5C314.6 65.5 314.6 56.7 315 55.1C315.4 53.5 315.3 54.1 315.5 53.6C315.9 52.5 316.5 51.5 317.3 50.7C319.1 48.8 321.5 47.8 324.5 47.8C327.5 47.8 329.9 48.8 331.7 50.7C333.5 52.6 334.4 55.3 334.4 58.8V86.9H350.2V56.7C350.2 49.8 348.4 44.5 344.8 40.5L344.9 40.3Z" fill="white"/>
12
+ <path d="M113 75.8C118.7 72.3 125.1 66.9 125.3 60C125.3 58 125.3 55.8 125.3 53.5V48.2H133.8V35H125.3V34.5C125.3 31.8 125.9 29.9 127.2 28.8C128.4 27.8 130.6 27.3 133.6 27.5V14.1C133 14.1 132.2 14.1 131 14.1C124 14.1 118.6 15.8 115 19.1C111.4 22.4 109.5 27.2 109.5 33.6V35.1H103.8V48.3H109.5V86.8H125.3V74.5C121.1 76.2 116.7 76.9 113 75.9V75.8Z" fill="white"/>
13
+ <path d="M441.2 36.8C438.4 38.4 436.1 40.7 434.3 43.5V34.9H418.5V39.2C419.4 46.1 426.9 52.8 431.7 57.1C427.8 57.5 423 56.2 418.5 53.9V86.6H434.3V62.6C434.3 58.3 435.3 55.4 437.3 53.7C439.3 52 442.2 51.2 446.2 51.2H450.6V34.4C447.2 34.4 444.1 35.2 441.3 36.9L441.2 36.8Z" fill="white"/>
14
+ <path d="M509.4 84.2C508.8 83.6 508.4 82.8 508.4 81.8C508.4 80.8 508.7 80.1 509.4 79.4C510.1 78.7 510.8 78.4 511.8 78.4C512.8 78.4 513.5 78.7 514.1 79.4C514.7 80 515.1 80.8 515.1 81.8C515.1 82.8 514.8 83.5 514.1 84.2C513.5 84.8 512.7 85.2 511.8 85.2C510.9 85.2 510.1 84.9 509.4 84.2Z" fill="white"/>
15
+ <path d="M522 65.3C523.1 63.3 524.5 61.8 526.3 60.7C528.1 59.6 530.2 59.1 532.4 59.1C534.6 59.1 535.7 59.5 537.3 60.2C538.9 60.9 540.2 61.9 541.1 63.1V50.9H546.4V84.9H541.1V81.1C540.2 82.3 539.1 83.3 537.5 84.1C535.9 84.9 534.2 85.3 532.3 85.3C530.4 85.3 528.1 84.7 526.3 83.6C524.5 82.5 523 80.9 522 78.9C520.9 76.9 520.4 74.6 520.4 72.1C520.4 69.6 520.9 67.3 522 65.3ZM540 67.6C539.3 66.3 538.3 65.3 537.2 64.7C536 64 534.8 63.7 533.4 63.7C532 63.7 530.8 64 529.6 64.7C528.4 65.4 527.5 66.3 526.8 67.6C526.1 68.9 525.7 70.4 525.7 72.1C525.7 73.8 526.1 75.4 526.8 76.7C527.5 78 528.5 79 529.7 79.7C530.9 80.4 532.1 80.7 533.4 80.7C534.7 80.7 536 80.4 537.2 79.7C538.4 79 539.3 78 540 76.7C540.7 75.4 541.1 73.9 541.1 72.1C541.1 70.3 540.7 68.8 540 67.5V67.6Z" fill="white"/>
16
+ <path d="M577.7 74.1H558.3C558.5 76.1 559.2 77.7 560.6 79C561.9 80.2 563.6 80.8 565.6 80.8C568.4 80.8 570.4 79.6 571.6 77.3H577.3C576.5 79.6 575.1 81.5 573.1 83C571.1 84.5 568.6 85.2 565.6 85.2C562.6 85.2 561 84.7 559.1 83.6C557.2 82.5 555.7 81 554.6 79C553.5 77 553 74.7 553 72.1C553 69.5 553.5 67.2 554.6 65.2C555.7 63.2 557.1 61.7 559.1 60.6C561 59.5 563.2 59 565.7 59C568.2 59 570.2 59.5 572.1 60.6C574 61.6 575.4 63.1 576.5 65C577.5 66.9 578.1 69.1 578.1 71.5C578.1 73.9 578.1 73.3 577.9 74.1H577.7ZM572.4 69.9C572.4 68 571.7 66.4 570.3 65.3C568.9 64.1 567.3 63.6 565.3 63.6C563.3 63.6 561.9 64.2 560.7 65.3C559.4 66.5 558.6 68 558.4 70H572.4V69.9Z" fill="white"/>
17
+ <path d="M594.2 80.2L601.4 59.5H607L597.3 84.8H591L581.4 59.5H587L594.2 80.2Z" fill="white"/>
18
+ </g>
19
+ <defs>
20
+ <clipPath id="clip0_3_192">
21
+ <rect width="607" height="98.7" fill="white"/>
22
+ </clipPath>
23
+ </defs>
24
+ </svg>