hadars 0.1.14 → 0.1.16

package/dist/cli.js

@@ -512,7 +512,7 @@ var buildCompilerConfig = (entry, opts, includeHotPlugin) => {
     plugins: [
       new rspack.HtmlRspackPlugin({
         publicPath: base || "/",
-        template: clientScriptPath,
+        template: opts.htmlTemplate ? pathMod2.resolve(process.cwd(), opts.htmlTemplate) : clientScriptPath,
         scriptLoading: "module",
         filename: "out.html",
         inject: "body"
@@ -784,6 +784,37 @@ import os from "node:os";
 import { spawn } from "node:child_process";
 import cluster from "node:cluster";
 var encoder = new TextEncoder();
+async function processHtmlTemplate(templatePath) {
+  const html = await fs.readFile(templatePath, "utf-8");
+  const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/gi;
+  const matches = [];
+  let m;
+  while ((m = styleRegex.exec(html)) !== null) {
+    matches.push({ full: m[0], attrs: m[1] ?? "", css: m[2] ?? "" });
+  }
+  if (matches.length === 0)
+    return templatePath;
+  const { default: postcss } = await import("postcss");
+  let plugins = [];
+  try {
+    const { default: loadConfig2 } = await import("postcss-load-config");
+    const config = await loadConfig2({}, process.cwd());
+    plugins = config.plugins ?? [];
+  } catch {
+  }
+  let processedHtml = html;
+  for (const { full, attrs, css } of matches) {
+    try {
+      const result = await postcss(plugins).process(css, { from: templatePath });
+      processedHtml = processedHtml.replace(full, `<style${attrs}>${result.css}</style>`);
+    } catch (err) {
+      console.warn("[hadars] PostCSS error processing <style> block in HTML template:", err);
+    }
+  }
+  const tmpPath = pathMod3.join(os.tmpdir(), `hadars-template-${Date.now()}.html`);
+  await fs.writeFile(tmpPath, processedHtml);
+  return tmpPath;
+}
 var HEAD_MARKER = '<meta name="HADARS_HEAD">';
 var BODY_MARKER = '<meta name="HADARS_BODY">';
 var _renderToString = null;
@@ -1099,6 +1130,7 @@ var dev = async (options) => {
   const tmpFilePath = pathMod3.join(os.tmpdir(), `hadars-client-${Date.now()}.tsx`);
   await fs.writeFile(tmpFilePath, clientScript);
   let ssrBuildId = crypto.randomBytes(4).toString("hex");
+  const resolvedHtmlTemplate = options.htmlTemplate ? await processHtmlTemplate(pathMod3.resolve(__dirname2, options.htmlTemplate)) : void 0;
   const clientCompiler = createClientCompiler(tmpFilePath, {
     target: "web",
     output: {
@@ -1108,7 +1140,8 @@ var dev = async (options) => {
     base: baseURL,
     mode: "development",
     swcPlugins: options.swcPlugins,
-    define: options.define
+    define: options.define,
+    htmlTemplate: resolvedHtmlTemplate
   });
   const devServer = new RspackDevServer({
     port: hmrPort,
@@ -1260,11 +1293,6 @@ var dev = async (options) => {
     if (staticRes)
       return staticRes;
     const projectStaticPath = pathMod3.resolve(process.cwd(), "static");
-    if (path2 === "/" || path2 === "") {
-      const indexRes = await tryServeFile(pathMod3.join(projectStaticPath, "index.html"));
-      if (indexRes)
-        return indexRes;
-    }
     const projectRes = await tryServeFile(pathMod3.join(projectStaticPath, path2));
     if (projectRes)
       return projectRes;
@@ -1312,6 +1340,7 @@ var build = async (options) => {
   }
   const tmpFilePath = pathMod3.join(os.tmpdir(), `hadars-client-${Date.now()}.tsx`);
   await fs.writeFile(tmpFilePath, clientScript);
+  const resolvedHtmlTemplate = options.htmlTemplate ? await processHtmlTemplate(pathMod3.resolve(__dirname2, options.htmlTemplate)) : void 0;
   console.log("Building client and server bundles in parallel...");
   await Promise.all([
     compileEntry(tmpFilePath, {
@@ -1325,7 +1354,8 @@ var build = async (options) => {
       mode: "production",
       swcPlugins: options.swcPlugins,
       define: options.define,
-      optimization: options.optimization
+      optimization: options.optimization,
+      htmlTemplate: resolvedHtmlTemplate
     }),
     compileEntry(pathMod3.resolve(__dirname2, options.entry), {
       output: {
@@ -1395,11 +1425,6 @@ var run = async (options) => {
     const staticRes = await tryServeFile(pathMod3.join(__dirname2, StaticPath, path2));
     if (staticRes)
       return staticRes;
-    if (path2 === "/" || path2 === "") {
-      const indexRes = await tryServeFile(pathMod3.join(__dirname2, StaticPath, "index.html"));
-      if (indexRes)
-        return indexRes;
-    }
     const projectStaticPath = pathMod3.resolve(process.cwd(), "static");
     const projectRes = await tryServeFile(pathMod3.join(projectStaticPath, path2));
     if (projectRes)

package/dist/index.d.ts

@@ -92,6 +92,24 @@ interface HadarsOptions {
      * Has no effect on the SSR bundle or dev mode.
      */
     optimization?: Record<string, unknown>;
+    /**
+     * Path to a custom HTML template file (relative to the project root).
+     * Replaces the built-in minimal template used to generate the HTML shell.
+     *
+     * The file must include two marker elements so hadars can inject the
+     * per-request head tags and the server-rendered body:
+     *
+     * ```html
+     * <meta name="HADARS_HEAD">   <!-- replaced with <title>, <meta>, <link>, <style> tags -->
+     * <meta name="HADARS_BODY">   <!-- replaced with the SSR-rendered React tree -->
+     * ```
+     *
+     * Any `<style>` blocks in the template are automatically processed through
+     * PostCSS (using the project's `postcss.config.js`) at build/dev startup time,
+     * so `@import "tailwindcss"` and other PostCSS directives work as expected.
+     * Note: inline styles are processed once at startup and are not live-reloaded.
+     */
+    htmlTemplate?: string;
     /**
      * SSR response cache for `run()` mode. Has no effect in `dev()` mode.
      *

package/dist/ssr-watch.js

@@ -238,7 +238,7 @@ var buildCompilerConfig = (entry2, opts, includeHotPlugin) => {
     plugins: [
       new rspack.HtmlRspackPlugin({
         publicPath: base2 || "/",
-        template: clientScriptPath,
+        template: opts.htmlTemplate ? pathMod.resolve(process.cwd(), opts.htmlTemplate) : clientScriptPath,
         scriptLoading: "module",
         filename: "out.html",
         inject: "body"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hadars",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Minimal SSR framework for React — rspack, HMR, TypeScript, Bun/Node/Deno",
   "module": "./dist/index.js",
   "type": "module",
@@ -80,6 +80,7 @@
     "@mdx-js/loader": "^3.1.1",
     "@svgr/webpack": "^8.1.0",
     "postcss": "^8.5.8",
+    "postcss-load-config": "^6.0.1",
     "postcss-loader": "^8.2.1"
   },
   "license": "MIT",

package/src/build.ts

@@ -19,6 +19,48 @@ import cluster from 'node:cluster';
 import type { HadarsEntryModule, HadarsOptions, HadarsProps } from "./types/hadars";
 const encoder = new TextEncoder();
 
+/**
+ * Reads an HTML template, processes any `<style>` blocks through PostCSS
+ * (using the project's postcss.config.js), writes the result to a temp file,
+ * and returns the temp file path. If there are no `<style>` blocks the
+ * original path is returned unchanged.
+ */
+async function processHtmlTemplate(templatePath: string): Promise<string> {
+    const html = await fs.readFile(templatePath, 'utf-8');
+
+    const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/gi;
+    const matches: Array<{ full: string; attrs: string; css: string }> = [];
+    let m: RegExpExecArray | null;
+    while ((m = styleRegex.exec(html)) !== null) {
+        matches.push({ full: m[0]!, attrs: m[1] ?? '', css: m[2] ?? '' });
+    }
+    if (matches.length === 0) return templatePath;
+
+    const { default: postcss } = await import('postcss');
+    let plugins: any[] = [];
+    try {
+        const { default: loadConfig } = await import('postcss-load-config' as any);
+        const config = await loadConfig({}, process.cwd());
+        plugins = (config as any).plugins ?? [];
+    } catch {
+        // No postcss config found — process without plugins (passthrough)
+    }
+
+    let processedHtml = html;
+    for (const { full, attrs, css } of matches) {
+        try {
+            const result = await postcss(plugins).process(css, { from: templatePath });
+            processedHtml = processedHtml.replace(full, `<style${attrs}>${result.css}</style>`);
+        } catch (err) {
+            console.warn('[hadars] PostCSS error processing <style> block in HTML template:', err);
+        }
+    }
+
+    const tmpPath = pathMod.join(os.tmpdir(), `hadars-template-${Date.now()}.html`);
+    await fs.writeFile(tmpPath, processedHtml);
+    return tmpPath;
+}
+
 const HEAD_MARKER = '<meta name="HADARS_HEAD">';
 const BODY_MARKER = '<meta name="HADARS_BODY">';
 
@@ -445,6 +487,11 @@ export const dev = async (options: HadarsRuntimeOptions) => {
     // SSR live-reload id to force re-import
     let ssrBuildId = crypto.randomBytes(4).toString('hex');
 
+    // Pre-process the HTML template's <style> blocks through PostCSS (e.g. Tailwind).
+    const resolvedHtmlTemplate = options.htmlTemplate
+        ? await processHtmlTemplate(pathMod.resolve(__dirname, options.htmlTemplate))
+        : undefined;
+
     // Start rspack-dev-server for the client bundle. It provides true React
     // Fast Refresh HMR: the browser's HMR runtime connects directly to the
     // dev server's WebSocket on hmrPort and receives module-level patches
@@ -460,6 +507,7 @@ export const dev = async (options: HadarsRuntimeOptions) => {
         mode: 'development',
         swcPlugins: options.swcPlugins,
         define: options.define,
+        htmlTemplate: resolvedHtmlTemplate,
     });
 
     const devServer = new RspackDevServer({
@@ -609,12 +657,8 @@ export const dev = async (options: HadarsRuntimeOptions) => {
         const staticRes = await tryServeFile(pathMod.join(__dirname, StaticPath, path));
         if (staticRes) return staticRes;
 
-        // project-level static/ directory
+        // project-level static/ directory (explicit paths only — never intercept root)
         const projectStaticPath = pathMod.resolve(process.cwd(), 'static');
-        if (path === '/' || path === '') {
-            const indexRes = await tryServeFile(pathMod.join(projectStaticPath, 'index.html'));
-            if (indexRes) return indexRes;
-        }
         const projectRes = await tryServeFile(pathMod.join(projectStaticPath, path));
         if (projectRes) return projectRes;
 
@@ -675,6 +719,11 @@ export const build = async (options: HadarsRuntimeOptions) => {
     const tmpFilePath = pathMod.join(os.tmpdir(), `hadars-client-${Date.now()}.tsx`);
     await fs.writeFile(tmpFilePath, clientScript);
 
+    // Pre-process the HTML template's <style> blocks through PostCSS (e.g. Tailwind).
+    const resolvedHtmlTemplate = options.htmlTemplate
+        ? await processHtmlTemplate(pathMod.resolve(__dirname, options.htmlTemplate))
+        : undefined;
+
     // Compile client and SSR bundles in parallel — they write to different
     // output directories and use different entry files, so they are fully
     // independent and safe to run concurrently.
@@ -692,6 +741,7 @@ export const build = async (options: HadarsRuntimeOptions) => {
             swcPlugins: options.swcPlugins,
             define: options.define,
             optimization: options.optimization,
+            htmlTemplate: resolvedHtmlTemplate,
         }),
         compileEntry(pathMod.resolve(__dirname, options.entry), {
             output: {
@@ -775,12 +825,7 @@ export const run = async (options: HadarsRuntimeOptions) => {
         const staticRes = await tryServeFile(pathMod.join(__dirname, StaticPath, path));
         if (staticRes) return staticRes;
 
-        if (path === '/' || path === '') {
-            const indexRes = await tryServeFile(pathMod.join(__dirname, StaticPath, 'index.html'));
-            if (indexRes) return indexRes;
-        }
-
-        // project-level static/ directory
+        // project-level static/ directory (explicit paths only — never intercept root)
         const projectStaticPath = pathMod.resolve(process.cwd(), 'static');
         const projectRes = await tryServeFile(pathMod.join(projectStaticPath, path));
         if (projectRes) return projectRes;

package/src/types/hadars.ts

@@ -93,6 +93,24 @@ export interface HadarsOptions {
      * Has no effect on the SSR bundle or dev mode.
      */
     optimization?: Record<string, unknown>;
+    /**
+     * Path to a custom HTML template file (relative to the project root).
+     * Replaces the built-in minimal template used to generate the HTML shell.
+     *
+     * The file must include two marker elements so hadars can inject the
+     * per-request head tags and the server-rendered body:
+     *
+     * ```html
+     * <meta name="HADARS_HEAD">   <!-- replaced with <title>, <meta>, <link>, <style> tags -->
+     * <meta name="HADARS_BODY">   <!-- replaced with the SSR-rendered React tree -->
+     * ```
+     *
+     * Any `<style>` blocks in the template are automatically processed through
+     * PostCSS (using the project's `postcss.config.js`) at build/dev startup time,
+     * so `@import "tailwindcss"` and other PostCSS directives work as expected.
+     * Note: inline styles are processed once at startup and are not live-reloaded.
+     */
+    htmlTemplate?: string;
     /**
      * SSR response cache for `run()` mode. Has no effect in `dev()` mode.
      *

package/src/utils/rspack.ts

@@ -135,6 +135,8 @@ interface EntryOptions {
     mode: "development" | "production",
     // optional swc plugins to pass to swc-loader
     swcPlugins?: SwcPluginList,
+    // optional path to a custom HTML template (resolved relative to cwd)
+    htmlTemplate?: string,
     // optional compile-time defines (e.g. { 'process.env.NODE_ENV': '"development"' })
     define?: Record<string, string>;
     base?: string;
@@ -291,7 +293,9 @@ const buildCompilerConfig = (
         plugins: [
             new rspack.HtmlRspackPlugin({
                 publicPath: base || '/',
-                template: clientScriptPath,
+                template: opts.htmlTemplate
+                    ? pathMod.resolve(process.cwd(), opts.htmlTemplate)
+                    : clientScriptPath,
                 scriptLoading: 'module',
                 filename: 'out.html',
                 inject: 'body',