hadars 0.2.0 → 0.2.2-rc.0
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.
- package/README.md +247 -15
- package/cli-lib.ts +184 -15
- package/dist/chunk-H72BZXOA.js +332 -0
- package/dist/cli.js +596 -23
- package/dist/cloudflare.cjs +1394 -0
- package/dist/cloudflare.d.cts +64 -0
- package/dist/cloudflare.d.ts +64 -0
- package/dist/cloudflare.js +68 -0
- package/dist/{hadars-Bh-V5YXg.d.cts → hadars-mKu5txjW.d.cts} +93 -37
- package/dist/{hadars-Bh-V5YXg.d.ts → hadars-mKu5txjW.d.ts} +93 -37
- package/dist/index.cjs +140 -164
- package/dist/index.d.cts +5 -11
- package/dist/index.d.ts +5 -11
- package/dist/index.js +140 -163
- package/dist/lambda.cjs +6 -2
- package/dist/lambda.d.cts +1 -2
- package/dist/lambda.d.ts +1 -2
- package/dist/lambda.js +10 -317
- package/dist/ssr-render-worker.js +3 -2
- package/dist/utils/Head.tsx +149 -195
- package/dist/utils/clientScript.tsx +9 -0
- package/index.ts +3 -0
- package/package.json +7 -2
- package/src/build.ts +29 -0
- package/src/cloudflare.ts +139 -0
- package/src/index.tsx +3 -3
- package/src/source/context.ts +113 -0
- package/src/source/graphiql.ts +96 -0
- package/src/source/inference.ts +188 -0
- package/src/source/runner.ts +114 -0
- package/src/source/store.ts +48 -0
- package/src/ssr-render-worker.ts +4 -1
- package/src/static.ts +106 -0
- package/src/types/hadars.ts +91 -2
- package/src/utils/Head.tsx +149 -195
- package/src/utils/clientScript.tsx +9 -0
- package/src/utils/response.tsx +10 -3
package/dist/utils/Head.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { AppHead, AppUnsuspend, LinkProps, MetaProps, ScriptProps, StyleProps } from '../types/hadars'
|
|
3
3
|
|
|
4
4
|
interface InnerContext {
|
|
5
5
|
setTitle: (title: string) => void;
|
|
@@ -41,142 +41,95 @@ function deriveKey(tag: string, props: Record<string, any>): string {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const { head } = context;
|
|
69
|
-
|
|
70
|
-
// mutate seoData
|
|
71
|
-
const setTitle = React.useCallback((title: string) => {
|
|
72
|
-
head.title = title;
|
|
73
|
-
}, [head]);
|
|
74
|
-
const addMeta = React.useCallback((props: MetaProps) => {
|
|
75
|
-
head.meta[deriveKey('meta', props as any)] = props;
|
|
76
|
-
}, [head]);
|
|
77
|
-
const addLink = React.useCallback((props: LinkProps) => {
|
|
78
|
-
head.link[deriveKey('link', props as any)] = props;
|
|
79
|
-
}, [head]);
|
|
80
|
-
const addStyle = React.useCallback((props: StyleProps) => {
|
|
81
|
-
head.style[deriveKey('style', props as any)] = props;
|
|
82
|
-
}, [head]);
|
|
83
|
-
const addScript = React.useCallback((props: ScriptProps) => {
|
|
84
|
-
head.script[deriveKey('script', props as any)] = props;
|
|
85
|
-
}, [head]);
|
|
86
|
-
|
|
87
|
-
const setStatus = React.useCallback((status: number) => {
|
|
88
|
-
head.status = status;
|
|
89
|
-
}, [head]);
|
|
90
|
-
|
|
91
|
-
const contextValue: InnerContext = React.useMemo(() => ({
|
|
92
|
-
setTitle,
|
|
93
|
-
addMeta,
|
|
94
|
-
addLink,
|
|
95
|
-
addStyle,
|
|
96
|
-
addScript,
|
|
97
|
-
setStatus,
|
|
98
|
-
}), [ setTitle, addMeta, addLink, addStyle, addScript, setStatus]);
|
|
99
|
-
return (
|
|
100
|
-
<AppContext.Provider value={contextValue}>
|
|
101
|
-
{children}
|
|
102
|
-
</AppContext.Provider>
|
|
103
|
-
);
|
|
104
|
-
} );
|
|
44
|
+
// ── Head context resolution ──────────────────────────────────────────────────
|
|
45
|
+
//
|
|
46
|
+
// On the server, HadarsHead reads from globalThis.__hadarsContext.head which
|
|
47
|
+
// the SSR render worker populates before every renderToString call.
|
|
48
|
+
// On the client, HadarsHead directly manipulates the DOM.
|
|
49
|
+
// This approach means users do NOT need to wrap their App with HadarsContext.
|
|
50
|
+
|
|
51
|
+
const LINK_ATTR: Record<string, string> = {
|
|
52
|
+
crossOrigin: 'crossorigin',
|
|
53
|
+
referrerPolicy: 'referrerpolicy',
|
|
54
|
+
fetchPriority: 'fetchpriority',
|
|
55
|
+
hrefLang: 'hreflang',
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
function makeServerCtx(head: AppHead): InnerContext {
|
|
59
|
+
return {
|
|
60
|
+
setTitle: (t) => { head.title = t; },
|
|
61
|
+
addMeta: (p) => { head.meta[deriveKey('meta', p as any)] = p; },
|
|
62
|
+
addLink: (p) => { head.link[deriveKey('link', p as any)] = p; },
|
|
63
|
+
addStyle: (p) => { head.style[deriveKey('style', p as any)] = p; },
|
|
64
|
+
addScript: (p) => { head.script[deriveKey('script', p as any)] = p; },
|
|
65
|
+
setStatus: (s) => { head.status = s; },
|
|
66
|
+
};
|
|
67
|
+
}
|
|
105
68
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}, []);
|
|
162
|
-
|
|
163
|
-
const contextValue: InnerContext = React.useMemo(() => ({
|
|
164
|
-
setTitle,
|
|
165
|
-
addMeta,
|
|
166
|
-
addLink,
|
|
167
|
-
addStyle,
|
|
168
|
-
addScript,
|
|
169
|
-
setStatus: () => { },
|
|
170
|
-
}), [setTitle, addMeta, addLink, addStyle, addScript]);
|
|
171
|
-
|
|
172
|
-
return (
|
|
173
|
-
<AppContext.Provider value={contextValue}>
|
|
174
|
-
{children}
|
|
175
|
-
</AppContext.Provider>
|
|
176
|
-
);
|
|
177
|
-
} );
|
|
69
|
+
// Lazy singleton for the client-side DOM context.
|
|
70
|
+
let _cliCtx: InnerContext | null = null;
|
|
71
|
+
|
|
72
|
+
function makeClientCtx(): InnerContext {
|
|
73
|
+
if (_cliCtx) return _cliCtx;
|
|
74
|
+
_cliCtx = {
|
|
75
|
+
setTitle: (title) => { document.title = title; },
|
|
76
|
+
setStatus: () => { /* no-op on client */ },
|
|
77
|
+
addMeta: (props) => {
|
|
78
|
+
const p = props as Record<string, any>;
|
|
79
|
+
let meta: HTMLMetaElement | null = null;
|
|
80
|
+
if (p.name) meta = document.querySelector(`meta[name="${CSS.escape(p.name)}"]`);
|
|
81
|
+
else if (p.property) meta = document.querySelector(`meta[property="${CSS.escape(p.property)}"]`);
|
|
82
|
+
else if (p.httpEquiv ?? p['http-equiv']) meta = document.querySelector(`meta[http-equiv="${CSS.escape(p.httpEquiv ?? p['http-equiv'])}"]`);
|
|
83
|
+
else if ('charSet' in p || 'charset' in p) meta = document.querySelector('meta[charset]');
|
|
84
|
+
if (!meta) { meta = document.createElement('meta'); document.head.appendChild(meta); }
|
|
85
|
+
for (const [k, v] of Object.entries(p)) {
|
|
86
|
+
if (v != null && v !== false) meta.setAttribute(k === 'charSet' ? 'charset' : k === 'httpEquiv' ? 'http-equiv' : k, String(v));
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
addLink: (props) => {
|
|
90
|
+
const p = props as Record<string, any>;
|
|
91
|
+
let link: HTMLLinkElement | null = null;
|
|
92
|
+
const asSel = p.as ? `[as="${CSS.escape(p.as)}"]` : '';
|
|
93
|
+
if (p.rel && p.href) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"][href="${CSS.escape(p.href)}"]${asSel}`);
|
|
94
|
+
else if (p.rel) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"]${asSel}`);
|
|
95
|
+
if (!link) { link = document.createElement('link'); document.head.appendChild(link); }
|
|
96
|
+
for (const [k, v] of Object.entries(p)) {
|
|
97
|
+
if (v != null && v !== false) link.setAttribute(LINK_ATTR[k] ?? k, String(v));
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
addStyle: (props) => {
|
|
101
|
+
const p = props as Record<string, any>;
|
|
102
|
+
let style: HTMLStyleElement | null = null;
|
|
103
|
+
if (p['data-id']) style = document.querySelector(`style[data-id="${CSS.escape(p['data-id'])}"]`);
|
|
104
|
+
if (!style) { style = document.createElement('style'); document.head.appendChild(style); }
|
|
105
|
+
for (const [k, v] of Object.entries(p)) {
|
|
106
|
+
if (k === 'dangerouslySetInnerHTML') { style.innerHTML = (v as any).__html ?? ''; continue; }
|
|
107
|
+
if (v != null && v !== false) style.setAttribute(k, String(v));
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
addScript: (props) => {
|
|
111
|
+
const p = props as Record<string, any>;
|
|
112
|
+
let script: HTMLScriptElement | null = null;
|
|
113
|
+
if (p.src) script = document.querySelector(`script[src="${CSS.escape(p.src)}"]`);
|
|
114
|
+
else if (p['data-id']) script = document.querySelector(`script[data-id="${CSS.escape(p['data-id'])}"]`);
|
|
115
|
+
if (!script) { script = document.createElement('script'); document.body.appendChild(script); }
|
|
116
|
+
for (const [k, v] of Object.entries(p)) {
|
|
117
|
+
if (k === 'dangerouslySetInnerHTML') { script.innerHTML = (v as any).__html ?? ''; continue; }
|
|
118
|
+
if (v != null && v !== false) script.setAttribute(k, String(v));
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
return _cliCtx;
|
|
123
|
+
}
|
|
178
124
|
|
|
179
|
-
|
|
125
|
+
function getCtx(): InnerContext | null {
|
|
126
|
+
if (typeof window === 'undefined') {
|
|
127
|
+
const head: AppHead | undefined = (globalThis as any).__hadarsContext?.head;
|
|
128
|
+
if (!head) return null;
|
|
129
|
+
return makeServerCtx(head);
|
|
130
|
+
}
|
|
131
|
+
return makeClientCtx();
|
|
132
|
+
}
|
|
180
133
|
|
|
181
134
|
// ── useServerData ─────────────────────────────────────────────────────────────
|
|
182
135
|
//
|
|
@@ -293,14 +246,23 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
|
|
|
293
246
|
// render is registered against the same deferred before the fetch starts.
|
|
294
247
|
queueMicrotask(async () => {
|
|
295
248
|
try {
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
249
|
+
let json: { serverData: Record<string, unknown> } | null = null;
|
|
250
|
+
|
|
251
|
+
if ((globalThis as any).__hadarsStatic) {
|
|
252
|
+
// Static export: the __hadarsStatic flag was embedded in the
|
|
253
|
+
// page by `hadars export static`. Fetch the pre-generated
|
|
254
|
+
// index.json sidecar directly — no live SSR server exists.
|
|
255
|
+
const sidecarUrl = pathKey.replace(/\/$/, '') + '/index.json';
|
|
256
|
+
const res = await fetch(sidecarUrl).catch(() => null);
|
|
257
|
+
if (res?.ok) json = await res.json().catch(() => null);
|
|
258
|
+
} else {
|
|
259
|
+
// Live server: request the current URL with Accept: application/json.
|
|
260
|
+
const res = await fetch(pathKey, { headers: { 'Accept': 'application/json' } });
|
|
261
|
+
if (res.ok) json = await res.json();
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
for (const [k, v] of Object.entries(json?.serverData ?? {})) {
|
|
265
|
+
clientServerDataCache.set(k, v);
|
|
304
266
|
}
|
|
305
267
|
} finally {
|
|
306
268
|
fetchedPaths.add(pathKey);
|
|
@@ -319,54 +281,23 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
|
|
|
319
281
|
const unsuspend: AppUnsuspend | undefined = (globalThis as any).__hadarsUnsuspend;
|
|
320
282
|
if (!unsuspend) return undefined;
|
|
321
283
|
|
|
322
|
-
// ──
|
|
323
|
-
//
|
|
324
|
-
//
|
|
325
|
-
//
|
|
326
|
-
//
|
|
327
|
-
// A key is unstable when a key that WAS seen in the previous pass is now
|
|
328
|
-
// absent from the current pass while a new key appears instead. This means
|
|
329
|
-
// a component produced a different key string between passes (e.g. Date.now()
|
|
330
|
-
// in the key). We fire immediately — there is no need to wait for other
|
|
331
|
-
// entries to settle first, because a legitimately-new component always extends
|
|
332
|
-
// seenLastPass (all previous keys remain present in seenThisPass).
|
|
284
|
+
// ── unstable-key detection ───────────────────────────────────────────────
|
|
285
|
+
// Track the last key thrown as a pending promise and whether it was accessed
|
|
286
|
+
// as a cache hit in the current pass. If a new pending entry appears while
|
|
287
|
+
// the previous pending key resolved but was never requested, the key is
|
|
288
|
+
// changing between passes (e.g. Date.now() or Math.random() in the key).
|
|
333
289
|
const _u = unsuspend as any;
|
|
334
|
-
if (!_u.
|
|
335
|
-
if (!_u.seenLastPass) _u.seenLastPass = new Set<string>();
|
|
336
|
-
|
|
337
|
-
if (_u.newPassStarting) {
|
|
338
|
-
// This is the first useServerData call after a thrown promise — rotate.
|
|
339
|
-
_u.seenLastPass = new Set(_u.seenThisPass);
|
|
340
|
-
_u.seenThisPass.clear();
|
|
341
|
-
_u.newPassStarting = false;
|
|
342
|
-
}
|
|
343
|
-
_u.seenThisPass.add(cacheKey);
|
|
290
|
+
if (!_u.pendingCreated) _u.pendingCreated = 0;
|
|
344
291
|
// ────────────────────────────────────────────────────────────────────────
|
|
345
292
|
|
|
346
293
|
const existing = unsuspend.cache.get(cacheKey);
|
|
347
294
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
//
|
|
353
|
-
// We intentionally do NOT fire when seenLastPass is empty (first pass
|
|
354
|
-
// ever) or when all previous keys are still present (legitimate
|
|
355
|
-
// "new component reached for the first time" scenario).
|
|
356
|
-
if (_u.seenLastPass.size > 0) {
|
|
357
|
-
const hasVanishedKey = [..._u.seenLastPass as Set<string>].some(
|
|
358
|
-
(k: string) => !(_u.seenThisPass as Set<string>).has(k),
|
|
359
|
-
);
|
|
360
|
-
if (hasVanishedKey) {
|
|
361
|
-
throw new Error(
|
|
362
|
-
`[hadars] useServerData: key ${JSON.stringify(cacheKey)} appeared in this pass ` +
|
|
363
|
-
`but a key that was present in the previous pass is now missing. This means ` +
|
|
364
|
-
`the key is not stable across render passes (e.g. it contains Date.now(), ` +
|
|
365
|
-
`Math.random(), or a value that changes on every render). Keys must be deterministic.`,
|
|
366
|
-
);
|
|
367
|
-
}
|
|
368
|
-
}
|
|
295
|
+
// Mark the previous pending key as accessed when it appears as a cache hit.
|
|
296
|
+
if (existing?.status === 'fulfilled' && _u.lastPendingKey === cacheKey) {
|
|
297
|
+
_u.lastPendingKeyAccessed = true;
|
|
298
|
+
}
|
|
369
299
|
|
|
300
|
+
if (!existing) {
|
|
370
301
|
// First encounter — call fn(), which may:
|
|
371
302
|
// (a) return a Promise<T> — async usage (serialised for the client)
|
|
372
303
|
// (b) return T synchronously — e.g. a sync data source
|
|
@@ -382,16 +313,43 @@ export function useServerData<T>(key: string | string[], fn: () => Promise<T> |
|
|
|
382
313
|
}
|
|
383
314
|
|
|
384
315
|
// (a) Async Promise — standard useServerData usage.
|
|
316
|
+
|
|
317
|
+
// Unstable-key detection: the previous pending key resolved but was never
|
|
318
|
+
// requested in the current pass — a new key replaced it, which means the
|
|
319
|
+
// key is not stable between render passes.
|
|
320
|
+
if (_u.lastPendingKey != null && !_u.lastPendingKeyAccessed) {
|
|
321
|
+
const prev = unsuspend.cache.get(_u.lastPendingKey);
|
|
322
|
+
if (prev?.status === 'fulfilled') {
|
|
323
|
+
throw new Error(
|
|
324
|
+
`[hadars] useServerData: key ${JSON.stringify(cacheKey)} is not stable between render passes. ` +
|
|
325
|
+
`The previous pass resolved ${JSON.stringify(_u.lastPendingKey)} but it was not ` +
|
|
326
|
+
`requested in this pass — the key is changing between renders. ` +
|
|
327
|
+
`Avoid dynamic values in keys (e.g. Date.now() or Math.random()); ` +
|
|
328
|
+
`use stable, deterministic identifiers instead.`,
|
|
329
|
+
);
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
_u.pendingCreated++;
|
|
334
|
+
if (_u.pendingCreated > 100) {
|
|
335
|
+
throw new Error(
|
|
336
|
+
`[hadars] useServerData: more than 100 async keys created in a single render. ` +
|
|
337
|
+
`This usually means a key is not stable between renders (e.g. it contains ` +
|
|
338
|
+
`Date.now() or Math.random()). Currently offending key: ${JSON.stringify(cacheKey)}.`,
|
|
339
|
+
);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
_u.lastPendingKey = cacheKey;
|
|
343
|
+
_u.lastPendingKeyAccessed = false;
|
|
344
|
+
|
|
385
345
|
const promise = (result as Promise<T>).then(
|
|
386
346
|
value => { unsuspend.cache.set(cacheKey, { status: 'fulfilled', value }); },
|
|
387
347
|
reason => { unsuspend.cache.set(cacheKey, { status: 'rejected', reason }); },
|
|
388
348
|
);
|
|
389
349
|
unsuspend.cache.set(cacheKey, { status: 'pending', promise });
|
|
390
|
-
_u.newPassStarting = true; // next useServerData call opens a new pass
|
|
391
350
|
throw promise; // slim-react will await and retry
|
|
392
351
|
}
|
|
393
352
|
if (existing.status === 'pending') {
|
|
394
|
-
_u.newPassStarting = true;
|
|
395
353
|
throw existing.promise; // slim-react will await and retry
|
|
396
354
|
}
|
|
397
355
|
if (existing.status === 'rejected') throw existing.reason;
|
|
@@ -404,14 +362,10 @@ export const Head: React.FC<{
|
|
|
404
362
|
status?: number;
|
|
405
363
|
}> = React.memo( ({ children, status }) => {
|
|
406
364
|
|
|
407
|
-
const
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
addLink,
|
|
412
|
-
addStyle,
|
|
413
|
-
addScript,
|
|
414
|
-
} = useApp();
|
|
365
|
+
const ctx = getCtx();
|
|
366
|
+
if (!ctx) return null;
|
|
367
|
+
|
|
368
|
+
const { setStatus, setTitle, addMeta, addLink, addStyle, addScript } = ctx;
|
|
415
369
|
|
|
416
370
|
if ( status ) {
|
|
417
371
|
setStatus(status);
|
|
@@ -22,6 +22,15 @@ const getProps = () => {
|
|
|
22
22
|
const main = async () => {
|
|
23
23
|
let props = getProps();
|
|
24
24
|
|
|
25
|
+
// Extract the static-export flag before it reaches user code. When set,
|
|
26
|
+
// useServerData fetches index.json sidecars directly on client navigation
|
|
27
|
+
// instead of requesting the live SSR server with Accept: application/json.
|
|
28
|
+
if ((props as any).__hadarsStatic) {
|
|
29
|
+
(globalThis as any).__hadarsStatic = true;
|
|
30
|
+
const { __hadarsStatic: _, ...rest } = props as any;
|
|
31
|
+
props = rest;
|
|
32
|
+
}
|
|
33
|
+
|
|
25
34
|
// Seed the useServerData client cache from server-resolved values before
|
|
26
35
|
// hydration so that hooks return the same data on the first render.
|
|
27
36
|
if (props.__serverData && typeof props.__serverData === 'object') {
|
package/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hadars",
|
|
3
|
-
"version": "0.2.0",
|
|
3
|
+
"version": "0.2.2-rc.0",
|
|
4
4
|
"description": "Minimal SSR framework for React — rspack, HMR, TypeScript, Bun/Node/Deno",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -31,10 +31,15 @@
|
|
|
31
31
|
"types": "./dist/lambda.d.ts",
|
|
32
32
|
"import": "./dist/lambda.js",
|
|
33
33
|
"require": "./dist/lambda.cjs"
|
|
34
|
+
},
|
|
35
|
+
"./cloudflare": {
|
|
36
|
+
"types": "./dist/cloudflare.d.ts",
|
|
37
|
+
"import": "./dist/cloudflare.js",
|
|
38
|
+
"require": "./dist/cloudflare.cjs"
|
|
34
39
|
}
|
|
35
40
|
},
|
|
36
41
|
"scripts": {
|
|
37
|
-
"build:lib": "tsup src/index.tsx src/lambda.ts src/slim-react/index.ts src/slim-react/jsx-runtime.ts --format esm,cjs --dts --out-dir dist --clean --external '@rspack/*' --external '@rspack/binding'",
|
|
42
|
+
"build:lib": "tsup src/index.tsx src/lambda.ts src/cloudflare.ts src/slim-react/index.ts src/slim-react/jsx-runtime.ts --format esm,cjs --dts --out-dir dist --clean --external '@rspack/*' --external '@rspack/binding'",
|
|
38
43
|
"build:cli": "node build-scripts/build-cli.mjs",
|
|
39
44
|
"build:all": "npm run build:lib && npm run build:cli",
|
|
40
45
|
"test": "bun test test/render-compare.test.tsx && bun test test/ssr.test.ts",
|
package/src/build.ts
CHANGED
|
@@ -20,6 +20,9 @@ import {
|
|
|
20
20
|
buildSsrResponse, makePrecontentHtmlGetter,
|
|
21
21
|
type CacheFetchHandler, createRenderCache,
|
|
22
22
|
} from './utils/ssrHandler';
|
|
23
|
+
import { runSources } from './source/runner';
|
|
24
|
+
import { buildSchemaExecutor } from './source/inference';
|
|
25
|
+
import { createGraphiqlHandler, GRAPHQL_PATH } from './source/graphiql';
|
|
23
26
|
|
|
24
27
|
/**
|
|
25
28
|
* Reads an HTML template, processes any `<style>` blocks through PostCSS
|
|
@@ -295,6 +298,26 @@ export const dev = async (options: HadarsRuntimeOptions) => {
|
|
|
295
298
|
const handleWS = upgradeHandler(options);
|
|
296
299
|
const handler = options.fetch;
|
|
297
300
|
|
|
301
|
+
// Run source plugins and set up GraphiQL if config.sources is present.
|
|
302
|
+
let handleGraphiql: ((req: Request) => Promise<Response | undefined>) | null = null;
|
|
303
|
+
let devStaticCtx: { graphql: import('./types/hadars').GraphQLExecutor } | undefined;
|
|
304
|
+
if (options.sources && options.sources.length > 0) {
|
|
305
|
+
console.log(`[hadars] Running ${options.sources.length} source plugin(s)…`);
|
|
306
|
+
try {
|
|
307
|
+
const store = await runSources(options.sources);
|
|
308
|
+
const executor = await buildSchemaExecutor(store);
|
|
309
|
+
if (executor) {
|
|
310
|
+
devStaticCtx = { graphql: executor };
|
|
311
|
+
handleGraphiql = createGraphiqlHandler(executor);
|
|
312
|
+
console.log(`[hadars] GraphiQL available at http://localhost:${port}${GRAPHQL_PATH}`);
|
|
313
|
+
} else {
|
|
314
|
+
console.warn('[hadars] `graphql` package not found — GraphiQL disabled. Run: npm install graphql');
|
|
315
|
+
}
|
|
316
|
+
} catch (err) {
|
|
317
|
+
console.error('[hadars] Source plugin error:', err);
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
|
|
298
321
|
const entry = pathMod.resolve(__dirname, options.entry);
|
|
299
322
|
const hmrPort = options.hmrPort ?? port + 1;
|
|
300
323
|
|
|
@@ -491,6 +514,11 @@ export const dev = async (options: HadarsRuntimeOptions) => {
|
|
|
491
514
|
}
|
|
492
515
|
if (handleWS && handleWS(request, ctx)) return undefined;
|
|
493
516
|
|
|
517
|
+
if (handleGraphiql) {
|
|
518
|
+
const graphiqlRes = await handleGraphiql(req);
|
|
519
|
+
if (graphiqlRes) return graphiqlRes;
|
|
520
|
+
}
|
|
521
|
+
|
|
494
522
|
const proxied = await handleProxy(request);
|
|
495
523
|
if (proxied) return proxied;
|
|
496
524
|
|
|
@@ -525,6 +553,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
|
|
|
525
553
|
getInitProps,
|
|
526
554
|
getFinalProps,
|
|
527
555
|
},
|
|
556
|
+
staticCtx: devStaticCtx,
|
|
528
557
|
});
|
|
529
558
|
|
|
530
559
|
// Content negotiation: if the client only accepts JSON (client-side
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cloudflare Workers adapter for hadars.
|
|
3
|
+
*
|
|
4
|
+
* After running `hadars build`, bundle your app with:
|
|
5
|
+
*
|
|
6
|
+
* hadars export cloudflare
|
|
7
|
+
*
|
|
8
|
+
* This produces a self-contained `cloudflare.mjs` that you deploy with:
|
|
9
|
+
*
|
|
10
|
+
* wrangler deploy
|
|
11
|
+
*
|
|
12
|
+
* Static assets (JS, CSS, fonts) under `.hadars/static/` must be served from
|
|
13
|
+
* R2 or another CDN — the Worker only handles HTML rendering. Route requests
|
|
14
|
+
* for static file extensions to R2 and everything else to the Worker.
|
|
15
|
+
*
|
|
16
|
+
* @example wrangler.toml
|
|
17
|
+
* name = "my-app"
|
|
18
|
+
* main = "cloudflare.mjs"
|
|
19
|
+
* compatibility_date = "2024-09-23"
|
|
20
|
+
* compatibility_flags = ["nodejs_compat"]
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
import React from 'react';
|
|
24
|
+
import { parseRequest } from './utils/request';
|
|
25
|
+
import { createProxyHandler } from './utils/proxyHandler';
|
|
26
|
+
import { getReactResponse, buildHeadHtml } from './utils/response';
|
|
27
|
+
import { buildSsrHtml, makePrecontentHtmlGetter, createRenderCache } from './utils/ssrHandler';
|
|
28
|
+
import type { HadarsOptions, HadarsEntryModule, HadarsProps } from './types/hadars';
|
|
29
|
+
|
|
30
|
+
// ── Public types ──────────────────────────────────────────────────────────────
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Pre-loaded SSR module and HTML template for single-file Cloudflare bundles
|
|
34
|
+
* produced by `hadars export cloudflare`. All I/O is eliminated at runtime —
|
|
35
|
+
* the Worker is fully self-contained.
|
|
36
|
+
*/
|
|
37
|
+
export interface CloudflareBundled {
|
|
38
|
+
/** The compiled SSR module — import it statically in your entry shim. */
|
|
39
|
+
ssrModule: HadarsEntryModule<any>;
|
|
40
|
+
/**
|
|
41
|
+
* The contents of `.hadars/static/out.html` — esbuild inlines this as a
|
|
42
|
+
* string when `hadars export cloudflare` runs.
|
|
43
|
+
*/
|
|
44
|
+
outHtml: string;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* The shape of a Cloudflare Workers export object.
|
|
49
|
+
* Return this as the default export of your Worker entry file.
|
|
50
|
+
*/
|
|
51
|
+
export interface CloudflareHandler {
|
|
52
|
+
fetch(request: Request, env: unknown, ctx: unknown): Promise<Response>;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// ── Handler factory ───────────────────────────────────────────────────────────
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Creates a Cloudflare Workers handler from a hadars config and a pre-bundled
|
|
59
|
+
* SSR module. Use this as the default export of your Worker entry.
|
|
60
|
+
*
|
|
61
|
+
* Unlike the Lambda adapter, Cloudflare Workers receive a standard Web
|
|
62
|
+
* `Request` and return a standard `Response` — no event format conversion is
|
|
63
|
+
* required. Static assets must be routed to R2/CDN via wrangler rules; this
|
|
64
|
+
* Worker handles only HTML rendering and API routes.
|
|
65
|
+
*
|
|
66
|
+
* @example — generated entry shim (created by `hadars export cloudflare`)
|
|
67
|
+
* import * as ssrModule from './.hadars/index.ssr.js';
|
|
68
|
+
* import outHtml from './.hadars/static/out.html';
|
|
69
|
+
* import { createCloudflareHandler } from 'hadars/cloudflare';
|
|
70
|
+
* import config from './hadars.config';
|
|
71
|
+
* export default createCloudflareHandler(config, { ssrModule, outHtml });
|
|
72
|
+
*/
|
|
73
|
+
export function createCloudflareHandler(
|
|
74
|
+
options: HadarsOptions,
|
|
75
|
+
bundled: CloudflareBundled,
|
|
76
|
+
): CloudflareHandler {
|
|
77
|
+
const fetchHandler = options.fetch;
|
|
78
|
+
const handleProxy = createProxyHandler(options);
|
|
79
|
+
const getPrecontentHtml = makePrecontentHtmlGetter(Promise.resolve(bundled.outHtml));
|
|
80
|
+
const { ssrModule } = bundled;
|
|
81
|
+
|
|
82
|
+
const runHandler = async (req: Request): Promise<Response> => {
|
|
83
|
+
const request = parseRequest(req);
|
|
84
|
+
|
|
85
|
+
if (fetchHandler) {
|
|
86
|
+
const res = await fetchHandler(request);
|
|
87
|
+
if (res) return res;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const proxied = await handleProxy(request);
|
|
91
|
+
if (proxied) return proxied;
|
|
92
|
+
|
|
93
|
+
try {
|
|
94
|
+
const { default: Component, getInitProps, getFinalProps } = ssrModule;
|
|
95
|
+
|
|
96
|
+
const { head, status, getAppBody, finalize } = await getReactResponse(request, {
|
|
97
|
+
document: {
|
|
98
|
+
body: Component as React.FC<HadarsProps<object>>,
|
|
99
|
+
lang: 'en',
|
|
100
|
+
getInitProps,
|
|
101
|
+
getFinalProps,
|
|
102
|
+
},
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
// Data-only requests from client-side navigation.
|
|
106
|
+
if (request.headers.get('Accept') === 'application/json') {
|
|
107
|
+
const { clientProps } = await finalize();
|
|
108
|
+
const serverData = (clientProps as any).__serverData ?? {};
|
|
109
|
+
return new Response(JSON.stringify({ serverData }), {
|
|
110
|
+
status,
|
|
111
|
+
headers: { 'Content-Type': 'application/json; charset=utf-8' },
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const bodyHtml = await getAppBody();
|
|
116
|
+
const { clientProps } = await finalize();
|
|
117
|
+
const headHtml = buildHeadHtml(head);
|
|
118
|
+
const html = await buildSsrHtml(bodyHtml, clientProps, headHtml, getPrecontentHtml);
|
|
119
|
+
|
|
120
|
+
return new Response(html, {
|
|
121
|
+
status,
|
|
122
|
+
headers: { 'Content-Type': 'text/html; charset=utf-8' },
|
|
123
|
+
});
|
|
124
|
+
} catch (err: any) {
|
|
125
|
+
console.error('[hadars] SSR render error:', err);
|
|
126
|
+
return new Response('Internal Server Error', { status: 500 });
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
const finalFetch = options.cache
|
|
131
|
+
? createRenderCache(options.cache, (req) => runHandler(req))
|
|
132
|
+
: (req: Request) => runHandler(req);
|
|
133
|
+
|
|
134
|
+
return {
|
|
135
|
+
fetch: async (request: Request, _env: unknown, ctx: unknown): Promise<Response> => {
|
|
136
|
+
return (await finalFetch(request, ctx)) ?? new Response('Not Found', { status: 404 });
|
|
137
|
+
},
|
|
138
|
+
};
|
|
139
|
+
}
|