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.
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { AppContext as HadarsAppContext, AppUnsuspend, LinkProps, MetaProps, ScriptProps, StyleProps } from '../types/hadars'
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
- const AppContext = React.createContext<InnerContext>({
45
- setTitle: () => {
46
- console.warn('AppContext: setTitle called outside of provider');
47
- },
48
- addMeta: () => {
49
- console.warn('AppContext: addMeta called outside of provider');
50
- },
51
- addLink: () => {
52
- console.warn('AppContext: addLink called outside of provider');
53
- },
54
- addStyle: () => {
55
- console.warn('AppContext: addStyle called outside of provider');
56
- },
57
- addScript: () => {
58
- console.warn('AppContext: addScript called outside of provider');
59
- },
60
- setStatus: () => { },
61
- });
62
-
63
- export const AppProviderSSR: React.FC<{
64
- children: React.ReactNode,
65
- context: HadarsAppContext,
66
- }> = React.memo( ({ children, context }) => {
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
- export const AppProviderCSR: React.FC<{
107
- children: React.ReactNode
108
- }> = React.memo( ({ children }) => {
109
-
110
- const setTitle = React.useCallback((title: string) => {
111
- document.title = title;
112
- }, []);
113
-
114
- const addMeta = React.useCallback((props: MetaProps) => {
115
- const p = props as Record<string, any>;
116
- let meta: HTMLMetaElement | null = null;
117
- if (p.name) meta = document.querySelector(`meta[name="${CSS.escape(p.name)}"]`);
118
- else if (p.property) meta = document.querySelector(`meta[property="${CSS.escape(p.property)}"]`);
119
- else if (p.httpEquiv ?? p['http-equiv']) meta = document.querySelector(`meta[http-equiv="${CSS.escape(p.httpEquiv ?? p['http-equiv'])}"]`);
120
- else if ('charSet' in p || 'charset' in p) meta = document.querySelector('meta[charset]');
121
- if (!meta) { meta = document.createElement('meta'); document.head.appendChild(meta); }
122
- for (const [k, v] of Object.entries(p)) {
123
- if (v != null && v !== false) meta.setAttribute(k === 'charSet' ? 'charset' : k === 'httpEquiv' ? 'http-equiv' : k, String(v));
124
- }
125
- }, []);
126
-
127
- const addLink = React.useCallback((props: LinkProps) => {
128
- const p = props as Record<string, any>;
129
- let link: HTMLLinkElement | null = null;
130
- const asSel = p.as ? `[as="${CSS.escape(p.as)}"]` : '';
131
- if (p.rel && p.href) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"][href="${CSS.escape(p.href)}"]${asSel}`);
132
- else if (p.rel) link = document.querySelector(`link[rel="${CSS.escape(p.rel)}"]${asSel}`);
133
- if (!link) { link = document.createElement('link'); document.head.appendChild(link); }
134
- const LINK_ATTR: Record<string, string> = { crossOrigin: 'crossorigin', referrerPolicy: 'referrerpolicy', fetchPriority: 'fetchpriority', hrefLang: 'hreflang' };
135
- for (const [k, v] of Object.entries(p)) {
136
- if (v != null && v !== false) link.setAttribute(LINK_ATTR[k] ?? k, String(v));
137
- }
138
- }, []);
139
-
140
- const addStyle = React.useCallback((props: StyleProps) => {
141
- const p = props as Record<string, any>;
142
- let style: HTMLStyleElement | null = null;
143
- if (p['data-id']) style = document.querySelector(`style[data-id="${CSS.escape(p['data-id'])}"]`);
144
- if (!style) { style = document.createElement('style'); document.head.appendChild(style); }
145
- for (const [k, v] of Object.entries(p)) {
146
- if (k === 'dangerouslySetInnerHTML') { style.innerHTML = (v as any).__html ?? ''; continue; }
147
- if (v != null && v !== false) style.setAttribute(k, String(v));
148
- }
149
- }, []);
150
-
151
- const addScript = React.useCallback((props: ScriptProps) => {
152
- const p = props as Record<string, any>;
153
- let script: HTMLScriptElement | null = null;
154
- if (p.src) script = document.querySelector(`script[src="${CSS.escape(p.src)}"]`);
155
- else if (p['data-id']) script = document.querySelector(`script[data-id="${CSS.escape(p['data-id'])}"]`);
156
- if (!script) { script = document.createElement('script'); document.body.appendChild(script); }
157
- for (const [k, v] of Object.entries(p)) {
158
- if (k === 'dangerouslySetInnerHTML') { script.innerHTML = (v as any).__html ?? ''; continue; }
159
- if (v != null && v !== false) script.setAttribute(k, String(v));
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
- export const useApp = () => React.useContext(AppContext);
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
- const res = await fetch(pathKey, {
297
- headers: { 'Accept': 'application/json' },
298
- });
299
- if (res.ok) {
300
- const json = await res.json() as { serverData: Record<string, unknown> };
301
- for (const [k, v] of Object.entries(json.serverData ?? {})) {
302
- clientServerDataCache.set(k, v);
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
- // ── per-pass key tracking ────────────────────────────────────────────────
323
- // We keep two sets: keys seen in the current pass and keys seen in the
324
- // previous pass. When a pass throws a promise, the *next* call to
325
- // useServerData marks the start of a new pass and rotates the sets.
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.seenThisPass) _u.seenThisPass = new Set<string>();
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
- if (!existing) {
349
- // Detect an unstable key: a key that was called in the previous pass is
350
- // now absent while a new key has appeared. This means a component
351
- // generated a different key between passes — it will loop forever.
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
- setStatus,
409
- setTitle,
410
- addMeta,
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
@@ -10,5 +10,8 @@ export type {
10
10
  HadarsGetClientProps,
11
11
  HadarsEntryModule,
12
12
  HadarsApp,
13
+ HadarsStaticContext,
14
+ GraphQLExecutor,
15
+ HadarsSourceEntry,
13
16
  } from "./src/types/hadars";
14
17
  export { HadarsHead, HadarsContext, loadModule } from "./src/index";
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
+ }