toiljs 0.0.15 → 0.0.16

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 (217) hide show
  1. package/.babelrc +13 -13
  2. package/.gitattributes +2 -2
  3. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -38
  4. package/.github/ISSUE_TEMPLATE/bug_report.yml +90 -90
  5. package/.github/ISSUE_TEMPLATE/config.yml +8 -8
  6. package/.github/ISSUE_TEMPLATE/feature_request.md +20 -20
  7. package/.github/PULL_REQUEST_TEMPLATE.md +43 -43
  8. package/.github/changelog-config.json +45 -45
  9. package/.github/dependabot.yml +27 -27
  10. package/.github/workflows/ci.yml +191 -191
  11. package/.prettierrc.json +11 -11
  12. package/.vscode/settings.json +9 -9
  13. package/CHANGELOG.md +5 -5
  14. package/LICENSE +187 -187
  15. package/README.md +339 -315
  16. package/as-pect.asconfig.json +34 -34
  17. package/as-pect.config.js +65 -65
  18. package/assets/logo.svg +36 -36
  19. package/build/backend/.tsbuildinfo +1 -1
  20. package/build/cli/.tsbuildinfo +1 -1
  21. package/build/cli/index.js +0 -0
  22. package/build/client/.tsbuildinfo +1 -1
  23. package/build/client/dev/devtools.d.ts +6 -0
  24. package/build/client/dev/devtools.js +442 -0
  25. package/build/client/dev/error-overlay.d.ts +9 -0
  26. package/build/client/dev/error-overlay.js +19 -4
  27. package/build/client/navigation/prefetch.d.ts +1 -0
  28. package/build/client/navigation/prefetch.js +35 -0
  29. package/build/client/routing/Router.js +1 -1
  30. package/build/client/routing/hooks.js +6 -2
  31. package/build/client/routing/loader.d.ts +23 -0
  32. package/build/client/routing/loader.js +53 -7
  33. package/build/client/routing/mount.js +4 -3
  34. package/build/compiler/.tsbuildinfo +1 -1
  35. package/build/compiler/config.d.ts +16 -0
  36. package/build/compiler/config.js +7 -0
  37. package/build/compiler/docs.js +16 -16
  38. package/build/compiler/index.d.ts +2 -2
  39. package/build/compiler/index.js +1 -1
  40. package/build/compiler/plugin.js +156 -0
  41. package/build/compiler/prerender.d.ts +1 -0
  42. package/build/compiler/prerender.js +1 -1
  43. package/build/compiler/seo.d.ts +1 -1
  44. package/build/compiler/seo.js +5 -4
  45. package/build/compiler/ssg.js +32 -1
  46. package/build/io/.tsbuildinfo +1 -1
  47. package/build/logger/.tsbuildinfo +1 -1
  48. package/build/shared/.tsbuildinfo +1 -1
  49. package/eslint.config.js +48 -48
  50. package/examples/basic/client/404.tsx +11 -11
  51. package/examples/basic/client/components/.gitkeep +1 -1
  52. package/examples/basic/client/global-error.tsx +13 -13
  53. package/examples/basic/client/layout.tsx +25 -25
  54. package/examples/basic/client/public/images/.gitkeep +1 -1
  55. package/examples/basic/client/public/images/logo.svg +36 -36
  56. package/examples/basic/client/public/robots.txt +2 -2
  57. package/examples/basic/client/routes/docs/[...slug].tsx +12 -12
  58. package/examples/basic/client/routes/features/error/error.tsx +16 -16
  59. package/examples/basic/client/routes/features/template/b.tsx +14 -14
  60. package/examples/basic/client/routes/files/[[...slug]].tsx +21 -21
  61. package/examples/basic/client/routes/gallery/layout.tsx +13 -13
  62. package/examples/basic/client/routes/io.tsx +24 -24
  63. package/examples/basic/client/routes/loader-demo/loading.tsx +13 -13
  64. package/examples/basic/client/routes/search.tsx +61 -61
  65. package/examples/basic/client/toil.tsx +5 -5
  66. package/package.json +155 -148
  67. package/presets/eslint.js +88 -88
  68. package/presets/no-uint8array-tostring.js +200 -200
  69. package/presets/prettier.json +18 -18
  70. package/presets/tsconfig.json +37 -37
  71. package/src/backend/index.ts +160 -160
  72. package/src/cli/proc.ts +50 -50
  73. package/src/cli/updates.ts +69 -69
  74. package/src/cli/validate.ts +31 -31
  75. package/src/client/channel/channel.ts +146 -146
  76. package/src/client/components/Form.tsx +65 -65
  77. package/src/client/components/Script.tsx +113 -113
  78. package/src/client/components/Slot.tsx +21 -21
  79. package/src/client/dev/devtools.tsx +973 -0
  80. package/src/client/dev/error-overlay.tsx +30 -4
  81. package/src/client/head/head.ts +167 -167
  82. package/src/client/head/metadata.ts +112 -112
  83. package/src/client/index.ts +89 -89
  84. package/src/client/navigation/NavLink.tsx +86 -86
  85. package/src/client/navigation/navigation.ts +235 -235
  86. package/src/client/navigation/prefetch.ts +169 -130
  87. package/src/client/navigation/scroll.ts +53 -53
  88. package/src/client/routing/Router.tsx +8 -2
  89. package/src/client/routing/action.ts +122 -122
  90. package/src/client/routing/error-boundary.tsx +43 -43
  91. package/src/client/routing/hooks.ts +21 -6
  92. package/src/client/routing/loader.ts +325 -235
  93. package/src/client/routing/match.ts +47 -47
  94. package/src/client/routing/mount.tsx +54 -52
  95. package/src/client/routing/params-context.ts +10 -10
  96. package/src/client/routing/slot-context.ts +7 -7
  97. package/src/client/search/search.ts +189 -189
  98. package/src/client/search/use-page-search.ts +73 -73
  99. package/src/client/types.ts +73 -73
  100. package/src/compiler/config.ts +219 -182
  101. package/src/compiler/docs.ts +228 -228
  102. package/src/compiler/generate.ts +394 -394
  103. package/src/compiler/index.ts +64 -57
  104. package/src/compiler/pages.ts +70 -70
  105. package/src/compiler/plugin.ts +170 -2
  106. package/src/compiler/prerender.ts +156 -156
  107. package/src/compiler/seo.ts +397 -390
  108. package/src/compiler/ssg.ts +162 -126
  109. package/src/io/BinaryReader.ts +340 -340
  110. package/src/io/BinaryWriter.ts +385 -385
  111. package/src/io/FastMap.ts +127 -127
  112. package/src/io/index.ts +11 -11
  113. package/src/io/lengths.ts +14 -14
  114. package/src/io/types.ts +18 -18
  115. package/src/logger/index.ts +22 -22
  116. package/src/server/index.ts +10 -10
  117. package/src/server/main.ts +13 -13
  118. package/src/server/tsconfig.json +4 -4
  119. package/src/shared/index.ts +10 -10
  120. package/std/client/index.d.ts +15 -15
  121. package/std/client/package.json +3 -3
  122. package/test/assembly/example.spec.ts +7 -7
  123. package/test/channel.test.ts +21 -21
  124. package/test/dom/Link.test.tsx +47 -47
  125. package/test/dom/NavLink.test.tsx +37 -37
  126. package/test/dom/error-overlay.test.tsx +44 -44
  127. package/test/dom/loader.test.tsx +121 -121
  128. package/test/dom/navigation.test.ts +59 -59
  129. package/test/dom/revalidate.test.tsx +38 -38
  130. package/test/dom/route-head.test.tsx +78 -78
  131. package/test/dom/router-loading.test.tsx +44 -44
  132. package/test/dom/scroll.test.ts +56 -56
  133. package/test/dom/use-metadata.test.tsx +58 -58
  134. package/test/io.test.ts +93 -93
  135. package/test/navlink.test.ts +28 -28
  136. package/test/placeholder.test.ts +9 -9
  137. package/test/routes.test.ts +76 -76
  138. package/test/seo.test.ts +175 -164
  139. package/test/slot-layouts.test.ts +69 -69
  140. package/test/ssg.test.ts +36 -36
  141. package/test/update.test.ts +44 -44
  142. package/test/validate.test.ts +42 -42
  143. package/toil-routes.d.ts +7 -0
  144. package/toilconfig.json +30 -30
  145. package/tsconfig.backend.json +13 -13
  146. package/tsconfig.base.json +35 -35
  147. package/tsconfig.cli.json +13 -13
  148. package/tsconfig.client.json +14 -14
  149. package/tsconfig.compiler.json +13 -13
  150. package/tsconfig.io.json +12 -12
  151. package/tsconfig.json +22 -22
  152. package/tsconfig.logger.json +12 -12
  153. package/tsconfig.server.json +10 -10
  154. package/tsconfig.shared.json +12 -12
  155. package/vitest.config.ts +26 -26
  156. package/.idea/codeStyles/Project.xml +0 -54
  157. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  158. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  159. package/.idea/modules.xml +0 -8
  160. package/.idea/prettier.xml +0 -7
  161. package/.idea/toiljs.iml +0 -8
  162. package/.idea/vcs.xml +0 -6
  163. package/.toil/entry.tsx +0 -9
  164. package/.toil/index.html +0 -12
  165. package/.toil/routes.ts +0 -9
  166. package/build/cli/configure.d.ts +0 -16
  167. package/build/cli/configure.js +0 -272
  168. package/build/cli/create.d.ts +0 -16
  169. package/build/cli/create.js +0 -420
  170. package/build/cli/diagnostics.d.ts +0 -55
  171. package/build/cli/diagnostics.js +0 -333
  172. package/build/cli/doctor.d.ts +0 -6
  173. package/build/cli/doctor.js +0 -249
  174. package/build/cli/features.d.ts +0 -25
  175. package/build/cli/features.js +0 -107
  176. package/build/cli/index.d.ts +0 -2
  177. package/build/cli/proc.d.ts +0 -6
  178. package/build/cli/proc.js +0 -31
  179. package/build/cli/ui.d.ts +0 -9
  180. package/build/cli/ui.js +0 -75
  181. package/build/cli/update.d.ts +0 -7
  182. package/build/cli/update.js +0 -117
  183. package/build/cli/updates.d.ts +0 -10
  184. package/build/cli/updates.js +0 -45
  185. package/build/cli/validate.d.ts +0 -4
  186. package/build/cli/validate.js +0 -19
  187. package/build/client/Link.d.ts +0 -8
  188. package/build/client/Link.js +0 -44
  189. package/build/client/NavLink.d.ts +0 -14
  190. package/build/client/NavLink.js +0 -37
  191. package/build/client/Router.d.ts +0 -7
  192. package/build/client/Router.js +0 -55
  193. package/build/client/channel.d.ts +0 -23
  194. package/build/client/channel.js +0 -94
  195. package/build/client/error-boundary.d.ts +0 -16
  196. package/build/client/error-boundary.js +0 -19
  197. package/build/client/head.d.ts +0 -26
  198. package/build/client/head.js +0 -87
  199. package/build/client/hooks.d.ts +0 -17
  200. package/build/client/hooks.js +0 -48
  201. package/build/client/lazy.d.ts +0 -16
  202. package/build/client/lazy.js +0 -53
  203. package/build/client/match.d.ts +0 -2
  204. package/build/client/match.js +0 -32
  205. package/build/client/mount.d.ts +0 -2
  206. package/build/client/mount.js +0 -13
  207. package/build/client/navigation.d.ts +0 -13
  208. package/build/client/navigation.js +0 -97
  209. package/build/client/params-context.d.ts +0 -2
  210. package/build/client/params-context.js +0 -2
  211. package/build/client/prefetch.d.ts +0 -11
  212. package/build/client/prefetch.js +0 -100
  213. package/build/client/runtime.d.ts +0 -31
  214. package/build/client/runtime.js +0 -112
  215. package/build/client/scroll.d.ts +0 -8
  216. package/build/client/scroll.js +0 -36
  217. package/toil-env.d.ts +0 -16
@@ -1,31 +1,31 @@
1
- /**
2
- * Pure input validation for `toiljs create`, kept dependency-light (only node:path) so it can be
3
- * unit-tested without pulling in the rest of the CLI.
4
- */
5
- import path from 'node:path';
6
-
7
- /** Package managers the scaffolder may invoke. Allowlisted so a hostile `--pm` can't inject a shell command. */
8
- export const PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'];
9
-
10
- /** Validates a project name's characters. Returns `true`, or an error message. */
11
- export function isValidName(name: string): true | string {
12
- if (!name.trim()) return 'Please enter a project name.';
13
- if (!/^[a-z0-9._@/-]+$/i.test(name)) return 'Use letters, numbers, dashes, dots or slashes.';
14
- return true;
15
- }
16
-
17
- /**
18
- * Resolves `name` to an absolute directory under `cwd`, refusing to escape it (a name like
19
- * `../x` or an absolute path). Returns the resolved dir, or `null` if it would escape `cwd`.
20
- */
21
- export function resolveProjectDir(cwd: string, name: string): string | null {
22
- const target = path.resolve(cwd, name);
23
- const rel = path.relative(cwd, target);
24
- if (rel.startsWith('..') || path.isAbsolute(rel)) return null;
25
- return target;
26
- }
27
-
28
- /** Whether `pm` is a supported package manager (guards shell use of `--pm`). */
29
- export function isPackageManager(pm: string): boolean {
30
- return PACKAGE_MANAGERS.includes(pm);
31
- }
1
+ /**
2
+ * Pure input validation for `toiljs create`, kept dependency-light (only node:path) so it can be
3
+ * unit-tested without pulling in the rest of the CLI.
4
+ */
5
+ import path from 'node:path';
6
+
7
+ /** Package managers the scaffolder may invoke. Allowlisted so a hostile `--pm` can't inject a shell command. */
8
+ export const PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'];
9
+
10
+ /** Validates a project name's characters. Returns `true`, or an error message. */
11
+ export function isValidName(name: string): true | string {
12
+ if (!name.trim()) return 'Please enter a project name.';
13
+ if (!/^[a-z0-9._@/-]+$/i.test(name)) return 'Use letters, numbers, dashes, dots or slashes.';
14
+ return true;
15
+ }
16
+
17
+ /**
18
+ * Resolves `name` to an absolute directory under `cwd`, refusing to escape it (a name like
19
+ * `../x` or an absolute path). Returns the resolved dir, or `null` if it would escape `cwd`.
20
+ */
21
+ export function resolveProjectDir(cwd: string, name: string): string | null {
22
+ const target = path.resolve(cwd, name);
23
+ const rel = path.relative(cwd, target);
24
+ if (rel.startsWith('..') || path.isAbsolute(rel)) return null;
25
+ return target;
26
+ }
27
+
28
+ /** Whether `pm` is a supported package manager (guards shell use of `--pm`). */
29
+ export function isPackageManager(pm: string): boolean {
30
+ return PACKAGE_MANAGERS.includes(pm);
31
+ }
@@ -1,146 +1,146 @@
1
- /**
2
- * Client for the toil backend's WebSocket channel (served by the hyper-express/uWS backend at
3
- * `/_toil`). Supports text and binary (`ArrayBuffer`) frames, auto-reconnect, and a React hook.
4
- */
5
- import { useCallback, useEffect, useRef, useState } from 'react';
6
-
7
- /** A frame received from / sent to the channel. */
8
- export type ChannelData = string | ArrayBuffer;
9
-
10
- /** Whatever `WebSocket.send` accepts (string / BufferSource / Blob), per the DOM lib. */
11
- export type SendData = Parameters<WebSocket['send']>[0];
12
-
13
- export interface ChannelOptions {
14
- /** Channel path on the toil backend. Default `/_toil`. */
15
- readonly path?: string;
16
- /** Full `ws(s)://` URL override (takes precedence over `path`). */
17
- readonly url?: string;
18
- /** Auto-reconnect after an unexpected close. Default `true`. */
19
- readonly reconnect?: boolean;
20
- /** Reconnect delay in ms. Default `1000`. */
21
- readonly reconnectDelay?: number;
22
- }
23
-
24
- export interface Channel {
25
- /** Sends a text or binary frame (no-op until the socket is open). */
26
- send(data: SendData): void;
27
- /** Closes the channel and stops reconnecting. */
28
- close(): void;
29
- }
30
-
31
- /** Derives the channel's `ws(s)://` URL from the current page location. */
32
- export function resolveChannelUrl(
33
- path: string = '/_toil',
34
- location: { protocol: string; host: string } = window.location,
35
- ): string {
36
- const scheme = location.protocol === 'https:' ? 'wss:' : 'ws:';
37
- const normalized = path.startsWith('/') ? path : `/${path}`;
38
- return `${scheme}//${location.host}${normalized}`;
39
- }
40
-
41
- /**
42
- * Opens a channel to the backend, invoking `onMessage` for each frame. Reconnects on unexpected
43
- * close unless disabled. Returns a handle to `send()` and `close()`.
44
- */
45
- export function connectChannel(
46
- onMessage: (data: ChannelData) => void,
47
- options: ChannelOptions = {},
48
- ): Channel {
49
- const url = options.url ?? resolveChannelUrl(options.path);
50
- const reconnect = options.reconnect ?? true;
51
- const delay = options.reconnectDelay ?? 1000;
52
-
53
- let socket: WebSocket | null = null;
54
- let stopped = false;
55
- let timer: ReturnType<typeof setTimeout> | undefined;
56
-
57
- const open = (): void => {
58
- const ws = new WebSocket(url);
59
- ws.binaryType = 'arraybuffer';
60
- socket = ws;
61
- ws.addEventListener('message', (event: MessageEvent) => {
62
- if (typeof event.data === 'string') onMessage(event.data);
63
- else if (event.data instanceof ArrayBuffer) onMessage(event.data);
64
- });
65
- ws.addEventListener('close', () => {
66
- if (!stopped && reconnect) timer = setTimeout(open, delay);
67
- });
68
- };
69
- open();
70
-
71
- return {
72
- send: (data: SendData): void => {
73
- if (socket && socket.readyState === WebSocket.OPEN) socket.send(data);
74
- },
75
- close: (): void => {
76
- stopped = true;
77
- if (timer !== undefined) clearTimeout(timer);
78
- socket?.close();
79
- },
80
- };
81
- }
82
-
83
- export interface ChannelHook {
84
- /** Whether the socket is currently open. */
85
- readonly connected: boolean;
86
- /** Frames received so far, in order. */
87
- readonly messages: ChannelData[];
88
- /** Sends a text or binary frame. */
89
- send: (data: SendData) => void;
90
- }
91
-
92
- /**
93
- * React hook wrapping {@link connectChannel}: connects on mount, tracks `connected` state and the
94
- * received `messages`, and cleans up on unmount.
95
- */
96
- export function useChannel(options: ChannelOptions = {}): ChannelHook {
97
- const { path, url, reconnect, reconnectDelay } = options;
98
- const [connected, setConnected] = useState<boolean>(false);
99
- const [messages, setMessages] = useState<ChannelData[]>([]);
100
- const socketRef = useRef<WebSocket | null>(null);
101
-
102
- useEffect(() => {
103
- const target = url ?? resolveChannelUrl(path);
104
- const shouldReconnect = reconnect ?? true;
105
- const delay = reconnectDelay ?? 1000;
106
- let stopped = false;
107
- let timer: ReturnType<typeof setTimeout> | undefined;
108
-
109
- const open = (): void => {
110
- const ws = new WebSocket(target);
111
- ws.binaryType = 'arraybuffer';
112
- socketRef.current = ws;
113
- ws.addEventListener('open', () => {
114
- if (!stopped) setConnected(true);
115
- });
116
- ws.addEventListener('message', (event: MessageEvent) => {
117
- if (typeof event.data === 'string') {
118
- const data = event.data;
119
- setMessages((prev) => [...prev, data]);
120
- } else if (event.data instanceof ArrayBuffer) {
121
- const data = event.data;
122
- setMessages((prev) => [...prev, data]);
123
- }
124
- });
125
- ws.addEventListener('close', () => {
126
- if (stopped) return;
127
- setConnected(false);
128
- if (shouldReconnect) timer = setTimeout(open, delay);
129
- });
130
- };
131
- open();
132
-
133
- return () => {
134
- stopped = true;
135
- if (timer !== undefined) clearTimeout(timer);
136
- socketRef.current?.close();
137
- };
138
- }, [path, url, reconnect, reconnectDelay]);
139
-
140
- const send = useCallback((data: SendData): void => {
141
- const socket = socketRef.current;
142
- if (socket && socket.readyState === WebSocket.OPEN) socket.send(data);
143
- }, []);
144
-
145
- return { connected, messages, send };
146
- }
1
+ /**
2
+ * Client for the toil backend's WebSocket channel (served by the hyper-express/uWS backend at
3
+ * `/_toil`). Supports text and binary (`ArrayBuffer`) frames, auto-reconnect, and a React hook.
4
+ */
5
+ import { useCallback, useEffect, useRef, useState } from 'react';
6
+
7
+ /** A frame received from / sent to the channel. */
8
+ export type ChannelData = string | ArrayBuffer;
9
+
10
+ /** Whatever `WebSocket.send` accepts (string / BufferSource / Blob), per the DOM lib. */
11
+ export type SendData = Parameters<WebSocket['send']>[0];
12
+
13
+ export interface ChannelOptions {
14
+ /** Channel path on the toil backend. Default `/_toil`. */
15
+ readonly path?: string;
16
+ /** Full `ws(s)://` URL override (takes precedence over `path`). */
17
+ readonly url?: string;
18
+ /** Auto-reconnect after an unexpected close. Default `true`. */
19
+ readonly reconnect?: boolean;
20
+ /** Reconnect delay in ms. Default `1000`. */
21
+ readonly reconnectDelay?: number;
22
+ }
23
+
24
+ export interface Channel {
25
+ /** Sends a text or binary frame (no-op until the socket is open). */
26
+ send(data: SendData): void;
27
+ /** Closes the channel and stops reconnecting. */
28
+ close(): void;
29
+ }
30
+
31
+ /** Derives the channel's `ws(s)://` URL from the current page location. */
32
+ export function resolveChannelUrl(
33
+ path: string = '/_toil',
34
+ location: { protocol: string; host: string } = window.location,
35
+ ): string {
36
+ const scheme = location.protocol === 'https:' ? 'wss:' : 'ws:';
37
+ const normalized = path.startsWith('/') ? path : `/${path}`;
38
+ return `${scheme}//${location.host}${normalized}`;
39
+ }
40
+
41
+ /**
42
+ * Opens a channel to the backend, invoking `onMessage` for each frame. Reconnects on unexpected
43
+ * close unless disabled. Returns a handle to `send()` and `close()`.
44
+ */
45
+ export function connectChannel(
46
+ onMessage: (data: ChannelData) => void,
47
+ options: ChannelOptions = {},
48
+ ): Channel {
49
+ const url = options.url ?? resolveChannelUrl(options.path);
50
+ const reconnect = options.reconnect ?? true;
51
+ const delay = options.reconnectDelay ?? 1000;
52
+
53
+ let socket: WebSocket | null = null;
54
+ let stopped = false;
55
+ let timer: ReturnType<typeof setTimeout> | undefined;
56
+
57
+ const open = (): void => {
58
+ const ws = new WebSocket(url);
59
+ ws.binaryType = 'arraybuffer';
60
+ socket = ws;
61
+ ws.addEventListener('message', (event: MessageEvent) => {
62
+ if (typeof event.data === 'string') onMessage(event.data);
63
+ else if (event.data instanceof ArrayBuffer) onMessage(event.data);
64
+ });
65
+ ws.addEventListener('close', () => {
66
+ if (!stopped && reconnect) timer = setTimeout(open, delay);
67
+ });
68
+ };
69
+ open();
70
+
71
+ return {
72
+ send: (data: SendData): void => {
73
+ if (socket && socket.readyState === WebSocket.OPEN) socket.send(data);
74
+ },
75
+ close: (): void => {
76
+ stopped = true;
77
+ if (timer !== undefined) clearTimeout(timer);
78
+ socket?.close();
79
+ },
80
+ };
81
+ }
82
+
83
+ export interface ChannelHook {
84
+ /** Whether the socket is currently open. */
85
+ readonly connected: boolean;
86
+ /** Frames received so far, in order. */
87
+ readonly messages: ChannelData[];
88
+ /** Sends a text or binary frame. */
89
+ send: (data: SendData) => void;
90
+ }
91
+
92
+ /**
93
+ * React hook wrapping {@link connectChannel}: connects on mount, tracks `connected` state and the
94
+ * received `messages`, and cleans up on unmount.
95
+ */
96
+ export function useChannel(options: ChannelOptions = {}): ChannelHook {
97
+ const { path, url, reconnect, reconnectDelay } = options;
98
+ const [connected, setConnected] = useState<boolean>(false);
99
+ const [messages, setMessages] = useState<ChannelData[]>([]);
100
+ const socketRef = useRef<WebSocket | null>(null);
101
+
102
+ useEffect(() => {
103
+ const target = url ?? resolveChannelUrl(path);
104
+ const shouldReconnect = reconnect ?? true;
105
+ const delay = reconnectDelay ?? 1000;
106
+ let stopped = false;
107
+ let timer: ReturnType<typeof setTimeout> | undefined;
108
+
109
+ const open = (): void => {
110
+ const ws = new WebSocket(target);
111
+ ws.binaryType = 'arraybuffer';
112
+ socketRef.current = ws;
113
+ ws.addEventListener('open', () => {
114
+ if (!stopped) setConnected(true);
115
+ });
116
+ ws.addEventListener('message', (event: MessageEvent) => {
117
+ if (typeof event.data === 'string') {
118
+ const data = event.data;
119
+ setMessages((prev) => [...prev, data]);
120
+ } else if (event.data instanceof ArrayBuffer) {
121
+ const data = event.data;
122
+ setMessages((prev) => [...prev, data]);
123
+ }
124
+ });
125
+ ws.addEventListener('close', () => {
126
+ if (stopped) return;
127
+ setConnected(false);
128
+ if (shouldReconnect) timer = setTimeout(open, delay);
129
+ });
130
+ };
131
+ open();
132
+
133
+ return () => {
134
+ stopped = true;
135
+ if (timer !== undefined) clearTimeout(timer);
136
+ socketRef.current?.close();
137
+ };
138
+ }, [path, url, reconnect, reconnectDelay]);
139
+
140
+ const send = useCallback((data: SendData): void => {
141
+ const socket = socketRef.current;
142
+ if (socket && socket.readyState === WebSocket.OPEN) socket.send(data);
143
+ }, []);
144
+
145
+ return { connected, messages, send };
146
+ }
@@ -1,65 +1,65 @@
1
- import { useRef, type ReactNode, type SyntheticEvent } from 'react';
2
-
3
- import { useAction, type ActionState, type RevalidateTarget } from '../routing/action.js';
4
-
5
- /** Props for {@link Form}. */
6
- export interface FormProps {
7
- /** Handles the submission, receiving the form's `FormData`. May be async. */
8
- action: (data: FormData) => void | Promise<void>;
9
- /** Loader data to revalidate after a successful submit. Default `true` (the current route). */
10
- revalidate?: RevalidateTarget;
11
- /** Called after a successful submit. */
12
- onSuccess?: () => void;
13
- /** Called when the action throws. */
14
- onError?: (error: unknown) => void;
15
- /** Reset the form fields after a successful submit. Default `false`. */
16
- resetOnSuccess?: boolean;
17
- className?: string;
18
- /**
19
- * Form contents. Pass a render function to receive live submit state, e.g. to disable the
20
- * button while pending: `{({ pending }) => <button disabled={pending}>Save</button>}`.
21
- */
22
- children?: ReactNode | ((state: ActionState<void>) => ReactNode);
23
- }
24
-
25
- /**
26
- * A `<form>` that runs an {@link useAction} on submit (no page reload) and revalidates loader data
27
- * on success, the write half of the loader/action data loop. Tracks pending/error state, which a
28
- * render-function child can read.
29
- */
30
- export function Form({
31
- action,
32
- revalidate,
33
- onSuccess,
34
- onError,
35
- resetOnSuccess = false,
36
- className,
37
- children,
38
- }: FormProps): ReactNode {
39
- const formRef = useRef<HTMLFormElement | null>(null);
40
- const handle = useAction((data: FormData) => action(data), {
41
- revalidate,
42
- onError,
43
- onSuccess: () => {
44
- if (resetOnSuccess) formRef.current?.reset();
45
- onSuccess?.();
46
- },
47
- });
48
-
49
- const onSubmit = (event: SyntheticEvent<HTMLFormElement>): void => {
50
- event.preventDefault();
51
- formRef.current = event.currentTarget;
52
- void handle.run(new FormData(event.currentTarget));
53
- };
54
-
55
- return (
56
- <form
57
- ref={formRef}
58
- className={className}
59
- onSubmit={onSubmit}>
60
- {typeof children === 'function'
61
- ? children({ pending: handle.pending, error: handle.error, data: handle.data })
62
- : children}
63
- </form>
64
- );
65
- }
1
+ import { useRef, type ReactNode, type SyntheticEvent } from 'react';
2
+
3
+ import { useAction, type ActionState, type RevalidateTarget } from '../routing/action.js';
4
+
5
+ /** Props for {@link Form}. */
6
+ export interface FormProps {
7
+ /** Handles the submission, receiving the form's `FormData`. May be async. */
8
+ action: (data: FormData) => void | Promise<void>;
9
+ /** Loader data to revalidate after a successful submit. Default `true` (the current route). */
10
+ revalidate?: RevalidateTarget;
11
+ /** Called after a successful submit. */
12
+ onSuccess?: () => void;
13
+ /** Called when the action throws. */
14
+ onError?: (error: unknown) => void;
15
+ /** Reset the form fields after a successful submit. Default `false`. */
16
+ resetOnSuccess?: boolean;
17
+ className?: string;
18
+ /**
19
+ * Form contents. Pass a render function to receive live submit state, e.g. to disable the
20
+ * button while pending: `{({ pending }) => <button disabled={pending}>Save</button>}`.
21
+ */
22
+ children?: ReactNode | ((state: ActionState<void>) => ReactNode);
23
+ }
24
+
25
+ /**
26
+ * A `<form>` that runs an {@link useAction} on submit (no page reload) and revalidates loader data
27
+ * on success, the write half of the loader/action data loop. Tracks pending/error state, which a
28
+ * render-function child can read.
29
+ */
30
+ export function Form({
31
+ action,
32
+ revalidate,
33
+ onSuccess,
34
+ onError,
35
+ resetOnSuccess = false,
36
+ className,
37
+ children,
38
+ }: FormProps): ReactNode {
39
+ const formRef = useRef<HTMLFormElement | null>(null);
40
+ const handle = useAction((data: FormData) => action(data), {
41
+ revalidate,
42
+ onError,
43
+ onSuccess: () => {
44
+ if (resetOnSuccess) formRef.current?.reset();
45
+ onSuccess?.();
46
+ },
47
+ });
48
+
49
+ const onSubmit = (event: SyntheticEvent<HTMLFormElement>): void => {
50
+ event.preventDefault();
51
+ formRef.current = event.currentTarget;
52
+ void handle.run(new FormData(event.currentTarget));
53
+ };
54
+
55
+ return (
56
+ <form
57
+ ref={formRef}
58
+ className={className}
59
+ onSubmit={onSubmit}>
60
+ {typeof children === 'function'
61
+ ? children({ pending: handle.pending, error: handle.error, data: handle.data })
62
+ : children}
63
+ </form>
64
+ );
65
+ }