hadars 0.1.17 → 0.1.19

package/src/utils/rspack.ts

@@ -216,26 +216,27 @@ const buildCompilerConfig = (
         (opts.output && typeof opts.output === 'object' && (opts.output.library || String(opts.output.filename || '').includes('ssr')))
     );
 
+    // slim-react: the SSR-only React-compatible renderer bundled with hadars.
+    // On server builds we replace the real React with slim-react so that hooks
+    // get safe SSR stubs, context works, and renderToStream / Suspense are
+    // natively supported.  The client build is untouched and uses real React.
+    const slimReactIndex = pathMod.resolve(packageDir, 'slim-react', 'index.js');
+    const slimReactJsx   = pathMod.resolve(packageDir, 'slim-react', 'jsx-runtime.js');
+
     const resolveAliases: Record<string, string> | undefined = isServerBuild ? {
-        // force all react imports to resolve to this project's react
-        react: path.resolve(process.cwd(), 'node_modules', 'react'),
-        'react-dom': path.resolve(process.cwd(), 'node_modules', 'react-dom'),
-        // also map react/jsx-runtime to avoid duplicates when automatic runtime is used
-        'react/jsx-runtime': path.resolve(process.cwd(), 'node_modules', 'react', 'jsx-runtime.js'),
-        'react/jsx-dev-runtime': path.resolve(process.cwd(), 'node_modules', 'react', 'jsx-dev-runtime.js'),
-        // ensure emotion packages resolve to the project's node_modules so we don't pick up a browser-specific entry
-        '@emotion/react': path.resolve(process.cwd(), 'node_modules', '@emotion', 'react'),
+        // Route all React imports to slim-react for SSR.
+        react:                slimReactIndex,
+        'react/jsx-runtime':  slimReactJsx,
+        'react/jsx-dev-runtime': slimReactJsx,
+        // Keep emotion on the project's node_modules (server-safe entry).
+        '@emotion/react':  path.resolve(process.cwd(), 'node_modules', '@emotion', 'react'),
         '@emotion/server': path.resolve(process.cwd(), 'node_modules', '@emotion', 'server'),
-        '@emotion/cache': path.resolve(process.cwd(), 'node_modules', '@emotion', 'cache'),
+        '@emotion/cache':  path.resolve(process.cwd(), 'node_modules', '@emotion', 'cache'),
         '@emotion/styled': path.resolve(process.cwd(), 'node_modules', '@emotion', 'styled'),
     } : undefined;
 
     const externals = isServerBuild ? [
-        'react',
-        'react-dom',
-        // keep common aliases external as well
-        'react/jsx-runtime',
-        'react/jsx-dev-runtime',
+        // react / react-dom are replaced by slim-react via alias above — not external.
         // emotion should be external on server builds to avoid client/browser code
         '@emotion/react',
         '@emotion/server',
@@ -301,8 +302,34 @@ const buildCompilerConfig = (
                     : clientScriptPath,
                 scriptLoading: 'module',
                 filename: 'out.html',
-                inject: 'body',
+                inject: 'head',
+                minify: opts.mode === 'production',
             }),
+            // Add `async` to the emitted module script so DOMContentLoaded fires
+            // as soon as HTML is parsed — without waiting for the bundle to execute.
+            // `<script type="module" async>` is valid: it downloads in parallel and
+            // executes without blocking DOMContentLoaded, while retaining module
+            // semantics (strict mode, ES imports, etc.).
+            {
+                apply(compiler: any) {
+                    compiler.hooks.emit.tapAsync('HadarsAsyncModuleScript', (compilation: any, cb: () => void) => {
+                        const asset = compilation.assets['out.html'];
+                        if (asset) {
+                            const html: string = asset.source();
+                            const updated = html.replace(
+                                /(<script\b[^>]*\btype="module"[^>]*)(>)/g,
+                                (match, before: string, end: string) =>
+                                    before.includes('async') ? match : `${before} async${end}`,
+                            );
+                            compilation.assets['out.html'] = {
+                                source: () => updated,
+                                size:   () => Buffer.byteLength(updated),
+                            };
+                        }
+                        cb();
+                    });
+                },
+            },
             isDev && new ReactRefreshPlugin(),
             includeHotPlugin && isDev && new rspack.HotModuleReplacementPlugin(),
             ...extraPlugins,

package/src/utils/segmentCache.ts

@@ -0,0 +1,87 @@
+/**
+ * Server-side segment cache for CacheSegment.
+ *
+ * The store lives on globalThis so all module instances (framework source,
+ * compiled dist, user SSR bundle) share the exact same Map regardless of
+ * how `hadars` was resolved by Node's module loader.
+ */
+
+interface SegmentEntry {
+    html: string;
+    expiresAt: number | null;
+}
+
+function getStore(): Map<string, SegmentEntry> {
+    const g = globalThis as any;
+    if (!g.__hadarsSegmentStore) {
+        g.__hadarsSegmentStore = new Map<string, SegmentEntry>();
+    }
+    return g.__hadarsSegmentStore;
+}
+
+export function getSegment(key: string): string | null {
+    const entry = getStore().get(key);
+    if (!entry) return null;
+    if (entry.expiresAt !== null && Date.now() >= entry.expiresAt) {
+        getStore().delete(key);
+        return null;
+    }
+    return entry.html;
+}
+
+export function setSegment(key: string, html: string, ttl?: number): void {
+    getStore().set(key, {
+        html,
+        expiresAt: ttl != null ? Date.now() + ttl : null,
+    });
+}
+
+export function deleteSegment(key: string): void {
+    getStore().delete(key);
+}
+
+export function clearSegments(): void {
+    getStore().clear();
+}
+
+/**
+ * Custom element name used as a boundary marker in the rendered HTML.
+ * Must contain a hyphen (valid custom element). Stripped by processSegmentCache
+ * before the response is sent — the browser never sees this tag.
+ */
+export const CACHE_TAG = 'hadars-c';
+
+/**
+ * Post-processes the HTML string produced by renderToString:
+ *
+ * - **Cache miss** markers (`data-cache="miss"`): extract inner HTML, store it
+ *   in the segment cache, strip the wrapper tag.
+ * - **Cache hit** markers (`data-cache="hit"`): strip the wrapper tag (the
+ *   cached HTML is already the element content via dangerouslySetInnerHTML).
+ *
+ * Nested `CacheSegment` components are handled correctly because the
+ * non-greedy regex naturally matches the innermost tag first, and we iterate
+ * until the string stabilises.
+ */
+export function processSegmentCache(html: string): string {
+    let prev: string;
+    do {
+        prev = html;
+        html = html.replace(
+            /<hadars-c([^>]*)>([\s\S]*?)<\/hadars-c>/g,
+            (match, attrs: string, content: string) => {
+                const cacheM = /data-cache="([^"]+)"/.exec(attrs);
+                const keyM   = /data-key="([^"]+)"/.exec(attrs);
+                const ttlM   = /data-ttl="(\d+)"/.exec(attrs);
+                if (!cacheM || !keyM) return match;
+                if (cacheM[1] === 'miss') {
+                    setSegment(keyM[1]!, content, ttlM ? Number(ttlM[1]) : undefined);
+                    return content;
+                }
+                if (cacheM[1] === 'hit') return content;
+                return match;
+            },
+        );
+    } while (html !== prev);
+    return html;
+}