hadars 0.1.1

package/src/utils/response.tsx

@@ -0,0 +1,198 @@
+import type React from "react";
+import { createRequire } from "node:module";
+import pathMod from "node:path";
+import { pathToFileURL } from "node:url";
+import type { AppHead, AppUnsuspend, HadarsRequest, HadarsEntryBase, HadarsEntryModule, HadarsProps, AppContext } from "../types/ninety";
+
+// Resolve react-dom/server from the *project's* node_modules (process.cwd()) so
+// the same React instance is used here as in the SSR bundle. Without this,
+// when hadars is installed as a file: symlink the renderer ends up on a
+// different React than the component, breaking hook calls.
+let _renderToStaticMarkup: ((element: any) => string) | null = null;
+async function getStaticMarkupRenderer(): Promise<(element: any) => string> {
+    if (!_renderToStaticMarkup) {
+        const req = createRequire(pathMod.resolve(process.cwd(), '__hadars_fake__.js'));
+        const resolved = req.resolve('react-dom/server');
+        const mod = await import(pathToFileURL(resolved).href);
+        _renderToStaticMarkup = mod.renderToStaticMarkup;
+    }
+    return _renderToStaticMarkup!;
+}
+
+interface ReactResponseOptions {
+    document: {
+        body: React.FC<HadarsProps<object>>;
+        head?: () => Promise<React.ReactNode>;
+        lang?: string;
+        getInitProps: HadarsEntryModule<HadarsEntryBase>['getInitProps'];
+        getAfterRenderProps: HadarsEntryModule<HadarsEntryBase>['getAfterRenderProps'];
+        getFinalProps: HadarsEntryModule<HadarsEntryBase>['getFinalProps'];
+    }
+}
+
+const getHeadHtml = (seoData: AppHead, renderToStaticMarkup: (el: any) => string): string => {
+    const metaEntries = Object.entries(seoData.meta)
+    const linkEntries = Object.entries(seoData.link)
+    const styleEntries = Object.entries(seoData.style)
+    const scriptEntries = Object.entries(seoData.script)
+
+    return renderToStaticMarkup(
+        <>
+            <title>{seoData.title}</title>
+            {
+            metaEntries.map( ([id, options]) => (
+                <meta
+                    key={id}
+                    id={ id }
+                    { ...options }
+                />
+            ) )
+            }
+            {linkEntries.map( ([id, options]) => (
+                <link
+                    key={id}
+                    id={ id }
+                    { ...options }
+                />
+            ))}
+            {styleEntries.map( ([id, options]) => (
+                <style
+                    key={id}
+                    id={id}
+                    { ...options }
+                />
+            ))}
+            {scriptEntries.map( ([id, options]) => (
+                <script
+                    key={id}
+                    id={id}
+                    { ...options }
+                />
+            ))}
+        </>
+    )
+}
+
+
+export const getReactResponse = async (
+    req: HadarsRequest,
+    opts: ReactResponseOptions,
+): Promise<{
+    ReactPage: React.ReactElement,
+    status: number,
+    headHtml: string,
+    renderPayload: {
+        appProps: Record<string, unknown>;
+        clientProps: Record<string, unknown>;
+    };
+}> => {
+    const App = opts.document.body
+    const { getInitProps, getAfterRenderProps, getFinalProps } = opts.document;
+
+    const renderToStaticMarkup = await getStaticMarkupRenderer();
+
+    // Per-request unsuspend context — populated by useServerData() hooks during render.
+    // Lifecycle passes always run on the main thread so the cache is directly accessible.
+    // Kept as a plain AppUnsuspend (no methods) so it is serializable via structuredClone
+    // for postMessage to worker threads.
+    const unsuspend: AppUnsuspend = {
+        cache: new Map(),
+        hasPending: false,
+    };
+    const processUnsuspend = async () => {
+        const pending = [...unsuspend.cache.values()]
+            .filter((e): e is { status: 'pending'; promise: Promise<unknown> } => e.status === 'pending')
+            .map(e => e.promise);
+        await Promise.all(pending);
+    };
+
+    const context: AppContext = {
+        head: {
+            title: "Hadars App",
+            meta: {},
+            link: {},
+            style: {},
+            script: {},
+            status: 200,
+        },
+        _unsuspend: unsuspend,
+    }
+
+    let props: HadarsEntryBase = {
+        ...(getInitProps ? await getInitProps(req) : {}),
+        location: req.location,
+        context,
+    } as HadarsEntryBase
+
+    // ── First lifecycle pass: useServerData render loop ───────────────────────
+    // Render the component repeatedly until all useServerData() promises have
+    // resolved. Each iteration discovers new pending promises; awaiting them
+    // before the next pass ensures every hook returns its value by the final
+    // iteration. Capped at 25 iterations as a safety guard against infinite loops.
+    let html = '';
+    let iters = 0;
+    do {
+        unsuspend.hasPending = false;
+        try {
+            (globalThis as any).__hadarsUnsuspend = unsuspend;
+            html = renderToStaticMarkup(<App {...(props as any)} />);
+        } finally {
+            (globalThis as any).__hadarsUnsuspend = null;
+        }
+        if (unsuspend.hasPending) await processUnsuspend();
+    } while (unsuspend.hasPending && ++iters < 25);
+
+    props = getAfterRenderProps ? await getAfterRenderProps(props, html) : props;
+    // Re-render to capture any head changes introduced by getAfterRenderProps.
+    try {
+        (globalThis as any).__hadarsUnsuspend = unsuspend;
+        renderToStaticMarkup(
+            <App {...({
+                ...props,
+                location: req.location,
+                context,
+            })} />
+        );
+    } finally {
+        (globalThis as any).__hadarsUnsuspend = null;
+    }
+
+    // Serialize resolved useServerData() values for client hydration.
+    // The client bootstrap reads __serverData and pre-populates the hook cache
+    // before hydrateRoot so that useServerData() returns the same values CSR.
+    const serverData: Record<string, unknown> = {};
+    for (const [k, v] of unsuspend.cache) {
+        if (v.status === 'fulfilled') serverData[k] = v.value;
+    }
+
+    const { context: _, ...restProps } = getFinalProps ? await getFinalProps(props) : props;
+    const clientProps = {
+        ...restProps,
+        location: req.location,
+        ...(Object.keys(serverData).length > 0 ? { __serverData: serverData } : {}),
+    }
+
+    const ReactPage = (
+        <>
+            <div id="app">
+                <App {...({
+                    ...props,
+                    location: req.location,
+                    context,
+                })} />
+            </div>
+            <script id="hadars" type="application/json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ hadars: { props: clientProps } }) }}></script>
+        </>
+    )
+
+    return {
+        ReactPage,
+        status: context.head.status,
+        headHtml: getHeadHtml(context.head, renderToStaticMarkup),
+        renderPayload: {
+            appProps: { ...props, location: req.location, context } as Record<string, unknown>,
+            clientProps: clientProps as Record<string, unknown>,
+        },
+    }
+
+}

package/src/utils/rspack.ts

@@ -0,0 +1,359 @@
+import rspack from "@rspack/core";
+import type { Configuration, RuleSetLoaderWithOptions, RuleSetRule } from "@rspack/core";
+import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
+import path from 'node:path';
+import type { SwcPluginList } from '../types/ninety';
+import { fileURLToPath } from "node:url";
+import pathMod from "node:path";
+import { existsSync } from "node:fs";
+
+const __dirname = process.cwd();
+const packageDir = pathMod.dirname(fileURLToPath(import.meta.url));
+const clientScriptPath = pathMod.resolve(packageDir, 'template.html');
+
+// When running from compiled dist/cli.js the loader is pre-built as loader.cjs.
+// The .cjs extension forces CommonJS regardless of the package "type": "module".
+// When running from source (bun/tsx) it falls back to loader.ts.
+const loaderPath = existsSync(pathMod.resolve(packageDir, 'loader.cjs'))
+    ? pathMod.resolve(packageDir, 'loader.cjs')
+    : pathMod.resolve(packageDir, 'loader.ts');
+
+const getConfigBase = (mode: "development" | "production"): Omit<Configuration, "entry" | "output" | "plugins"> => {
+    const isDev = mode === 'development';
+    return {
+        experiments: {
+            css: true,
+            outputModule: true,
+        },
+        resolve: {
+            modules: [
+                path.resolve(__dirname, 'node_modules'),
+                // 'node_modules' (relative) enables the standard upward-traversal
+                // resolution so rspack can find transitive deps (e.g. webpack-dev-server)
+                // that live in a parent node_modules when running from a sub-project.
+                'node_modules',
+            ],
+            tsConfig: path.resolve(__dirname, 'tsconfig.json'),
+            extensions: ['.tsx', '.ts', '.js', '.jsx'],
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.mdx?$/,
+                    use: [
+                    {
+                        loader: '@mdx-js/loader',
+                        options: {
+                        },
+                    },
+                    ],
+                },
+                {
+                    test: /\.css$/,
+                    use: ["postcss-loader"],
+                    type: "css",
+                },
+                {
+                    test: /\.svg$/i,
+                    issuer: /\.[jt]sx?$/,
+                    use: ['@svgr/webpack'],
+                },
+                {
+                    test: /\.m?jsx?$/,
+                    resolve: {
+                        fullySpecified: false,
+                    },
+                    exclude: [loaderPath],
+                    use: [
+                        // Transforms loadModule('./path') based on build target.
+                        // Runs before swc-loader (loaders execute right-to-left).
+                        {
+                            loader: loaderPath,
+                        },
+                        {
+                            loader: 'builtin:swc-loader',
+                            options: {
+                                jsc: {
+                                    parser: {
+                                        syntax: 'ecmascript',
+                                        jsx: true,
+                                    },
+                                    transform: {
+                                        react: {
+                                            runtime: "automatic",
+                                            development: isDev,
+                                            refresh: isDev,
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                    type: 'javascript/auto',
+                },
+                {
+                    test: /\.tsx?$/,
+                    resolve: {
+                        fullySpecified: false,
+                    },
+                    exclude: [loaderPath],
+                    use: [
+                        {
+                            loader: loaderPath,
+                        },
+                        {
+                            loader: 'builtin:swc-loader',
+                            options: {
+                                jsc: {
+                                    parser: {
+                                        syntax: 'typescript',
+                                        tsx: true,
+                                    },
+                                    transform: {
+                                        react: {
+                                            runtime: "automatic",
+                                            development: isDev,
+                                            refresh: isDev,
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                    type: 'javascript/auto',
+                },
+            ],
+        },
+    }
+}
+
+type EntryOutput = Configuration["output"];
+
+interface EntryOptions {
+    target: Configuration["target"],
+    output: EntryOutput,
+    mode: "development" | "production",
+    // optional swc plugins to pass to swc-loader
+    swcPlugins?: SwcPluginList,
+    // optional compile-time defines (e.g. { 'process.env.NODE_ENV': '"development"' })
+    define?: Record<string, string>;
+    base?: string;
+}
+
+const buildCompilerConfig = (
+    entry: string,
+    opts: EntryOptions,
+    includeHotPlugin: boolean,
+): Configuration => {
+    const Config = getConfigBase(opts.mode);
+    const { base } = opts;
+    const isDev = opts.mode === 'development';
+
+    // shallow-clone base config to avoid mutating shared Config while preserving RegExp and plugin instances
+    const localConfig: any = {
+        ...Config,
+        module: {
+            ...Config.module,
+            rules: (Config.module && Array.isArray(Config.module.rules) ? Config.module.rules : []).map((r: any) => {
+                // shallow copy each rule and its 'use' array/entries so we can mutate safely
+                const nr: any = { ...r };
+                if (r && Array.isArray(r.use)) {
+                    nr.use = r.use.map((u: any) => ({ ...(typeof u === 'object' ? u : { loader: u }) }));
+                }
+                return nr;
+            }),
+        },
+    };
+
+    // if swc plugins are provided, inject them into swc-loader options for js/jsx and ts/tsx rules
+    if (opts.swcPlugins && Array.isArray(opts.swcPlugins) && opts.swcPlugins.length > 0) {
+        const rules = localConfig.module && localConfig.module.rules;
+        if (Array.isArray(rules)) {
+            for (const rule of rules) {
+                const ruleUse = rule as RuleSetRule;
+                if (ruleUse.use && Array.isArray(ruleUse.use)) {
+                    for (const entry of ruleUse.use ) {
+                        const useEntry = entry as RuleSetLoaderWithOptions;
+                        if (useEntry && useEntry.loader && typeof useEntry.loader === 'string' && useEntry.loader.includes('swc-loader')) {
+                            const options = ( useEntry.options || {} ) as  Record<string, any>;
+                            useEntry.options = options;
+                            useEntry.options.jsc = useEntry.options.jsc || {};
+                            useEntry.options.jsc.experimental = useEntry.options.jsc.experimental || {};
+                            // ensure plugins run before other transforms (important for Relay plugin)
+                            useEntry.options.jsc.experimental.runPluginFirst = true;
+                            // existing plugins may be present under jsc.experimental.plugins; merge them with provided ones
+                            const existingPlugins = Array.isArray(useEntry.options.jsc.experimental.plugins) ? useEntry.options.jsc.experimental.plugins : [];
+                            const incomingPlugins = Array.isArray(opts.swcPlugins) ? opts.swcPlugins : [];
+                            // simple dedupe by plugin name (first element of tuple) to avoid duplicates
+                            const seen = new Set<string>();
+                            const merged: any[] = [];
+                            for (const p of existingPlugins.concat(incomingPlugins)) {
+                                // plugin can be [name, options] or string; normalize
+                                const name = Array.isArray(p) && p.length > 0 ? String(p[0]) : String(p);
+                                if (!seen.has(name)) {
+                                    seen.add(name);
+                                    merged.push(p);
+                                }
+                            }
+                            useEntry.options.jsc.experimental.plugins = merged;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // For server (SSR) builds we should avoid bundling react/react-dom so
+    // the runtime uses the same React instance as the host. If the output
+    // is a library/module (i.e. `opts.output.library` present or filename
+    // contains "ssr"), treat it as a server build and mark react/react-dom
+    // as externals and alias React imports to the project's node_modules.
+    const isServerBuild = Boolean(
+        (opts.output && typeof opts.output === 'object' && (opts.output.library || String(opts.output.filename || '').includes('ssr')))
+    );
+
+    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'),
+        '@emotion/server': path.resolve(process.cwd(), 'node_modules', '@emotion', 'server'),
+        '@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',
+        // emotion should be external on server builds to avoid client/browser code
+        '@emotion/react',
+        '@emotion/server',
+        '@emotion/cache',
+        '@emotion/styled',
+    ] : undefined;
+
+    const extraPlugins: any[] = [];
+    if (opts.define && typeof opts.define === 'object') {
+        // rspack's DefinePlugin shape mirrors webpack's DefinePlugin
+        const DefinePlugin = (rspack as any).DefinePlugin || (rspack as any).plugins?.DefinePlugin;
+        if (DefinePlugin) {
+            extraPlugins.push(new DefinePlugin(opts.define));
+        } else {
+            // fallback: try to inject via plugin API name
+            extraPlugins.push({ name: 'DefinePlugin', value: opts.define });
+        }
+    }
+
+    const resolveConfig: any = {
+        extensions: ['.tsx', '.ts', '.js', '.jsx'],
+        alias: resolveAliases,
+        // for server builds prefer the package "main"/"module" fields and avoid "browser" so we don't pick browser-specific entrypoints
+        mainFields: isServerBuild ? ['main', 'module'] : ['browser', 'module', 'main'],
+    };
+
+    return {
+        entry,
+        resolve: resolveConfig,
+        output: {
+            ...opts.output,
+            clean: false,
+        },
+        mode: opts.mode,
+        externals,
+        plugins: [
+            new rspack.HtmlRspackPlugin({
+                publicPath: base || '/',
+                template: clientScriptPath,
+                scriptLoading: 'module',
+                filename: 'out.html',
+                inject: 'body',
+            }),
+            isDev && new ReactRefreshPlugin(),
+            includeHotPlugin && isDev && new rspack.HotModuleReplacementPlugin(),
+            ...extraPlugins,
+        ],
+        ...localConfig,
+        // HMR is not implemented for module chunk format, so disable outputModule
+        // for client builds. SSR builds still need it for dynamic import() of exports.
+        experiments: {
+            ...(localConfig.experiments || {}),
+            outputModule: isServerBuild,
+        },
+    };
+};
+
+/**
+ * Creates a configured rspack compiler for the client bundle without running it.
+ * Intended for use with RspackDevServer for proper HMR support.
+ * HotModuleReplacementPlugin is intentionally omitted — RspackDevServer adds it automatically.
+ */
+export const createClientCompiler = (entry: string, opts: EntryOptions) => {
+    return rspack(buildCompilerConfig(entry, opts, false));
+};
+
+export const compileEntry = async (entry: string, opts: EntryOptions & { watch?: boolean, onChange?: (stats:any)=>void }) => {
+    const compiler = rspack(buildCompilerConfig(entry, opts, true));
+
+    // If watch mode is requested, start watching and invoke onChange for each rebuild.
+    // The returned promise resolves once the first build completes so callers can
+    // await initial build completion before starting their own server.
+    if (opts.watch) {
+        await new Promise((resolve, reject) => {
+            let first = true;
+            compiler.watch({}, (err: any, stats: any) => {
+                if (err) {
+                    if (first) { first = false; reject(err); }
+                    else { console.error('rspack watch error', err); }
+                    return;
+                }
+
+                console.log(stats?.toString({
+                    colors: true,
+                    modules: true,
+                    children: true,
+                    chunks: true,
+                    chunkModules: true,
+                }));
+
+                if (first) {
+                    first = false;
+                    resolve(stats);
+                } else {
+                    try {
+                        opts.onChange && opts.onChange(stats);
+                    } catch (e) {
+                        console.error('onChange handler error', e);
+                    }
+                }
+            });
+        });
+        return;
+    }
+
+    // non-watch: do a single run and resolve when complete
+    await new Promise((resolve, reject) => {
+        compiler.run((err: any, stats: any) => {
+            if (err) {
+                reject(err);
+                return;
+            }
+
+            console.log(stats?.toString({
+                colors: true,
+                modules: true,
+                children: true,
+                chunks: true,
+                chunkModules: true,
+            }));
+
+            resolve(stats);
+        });
+    });
+}

package/src/utils/runtime.ts

@@ -0,0 +1,19 @@
+/** True when running inside Bun. */
+export const isBun = typeof (globalThis as any).Bun !== 'undefined';
+
+/** True when running inside Deno. */
+export const isDeno = typeof (globalThis as any).Deno !== 'undefined';
+
+/** True when running inside Node.js (not Bun, not Deno). */
+export const isNode = !isBun && !isDeno;
+
+/** Returns a human-readable runtime identifier. */
+export const getRuntimeName = (): 'bun' | 'deno' | 'node' =>
+    isBun ? 'bun' : isDeno ? 'deno' : 'node';
+
+/** Returns a version string for the current runtime, e.g. "Bun 1.1.0". */
+export const getRuntimeVersion = (): string => {
+    if (isBun) return `Bun ${(globalThis as any).Bun.version}`;
+    if (isDeno) return `Deno ${(globalThis as any).Deno.version.deno}`;
+    return `Node.js ${process.version}`;
+};