npm - @broxium/compiler - Versions diffs - 1.5.0 → 1.5.2 - Mend

@broxium/compiler 1.5.0 → 1.5.2

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.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -13,12 +13,17 @@ interface CompileInput {
 interface CompileOutput {
     serverJsPath: string;
     clientJsPath: string;
+    /** Browser (canvas) bundle — uses window.__brodox_react globals, safe to load via Blob URL. */
+    browserJsPath: string;
     /** Compiled CSS bundle path, or null if no CSS files were imported. */
     cssPath: string | null;
     serverJsName: string;
     clientJsName: string;
+    browserJsName: string;
     /** CSS bundle filename, or null if no CSS files were imported. */
     cssName: string | null;
+    /** 6-char base36 FNV-1a scope ID used to prefix CSS selectors ([data-bc=ID]). */
+    scopeId: string;
     compiledAt: Date;
 }
@@ -26,4 +31,67 @@ declare class BrodoxCompiler {
     compile(input: CompileInput): Promise<CompileOutput>;
 }
-export { BrodoxCompiler, type CompileInput, type CompileOutput };
+declare function computeScopeId(slug: string, version: string): string;
+declare function scopeCss(css: string, scopeId: string): string;
+declare function minifyScopedCss(css: string, scopeId: string): Promise<string>;
+/**
+ * Brodox Page-Level CSS Strategy Engine
+ *
+ * Decides how the merged CSS for an entire page is delivered to the browser.
+ * CSS is scoped per-component by the compiler ([data-bc=XXXXXX] selectors).
+ * After publish, all component CSS files are merged and this function chooses
+ * the optimal delivery strategy for the combined result.
+ *
+ *   'none'     → no CSS at all                       → nothing emitted
+ *   'inline'   → total ≤ INLINE_MAX_BYTES             → single <style> in <head>
+ *   'separate' → INLINE_MAX < total ≤ CHUNK_MIN       → one external <link> file
+ *   'chunks'   → total > CHUNK_MIN_BYTES              → N × CHUNK_SIZE_BYTES <link> files
+ *                  e.g. 95 KB → 3 × 25 KB + 1 × 20 KB
+ *
+ * Rationale for thresholds
+ * ─────────────────────────
+ *   INLINE_MAX_BYTES   4 096   HTTP request overhead ≈ 100–300 ms RTT. Inlining
+ *                              4 KB of CSS costs < 4 ms parse time — always faster
+ *                              than an extra round-trip for a small external file.
+ *
+ *   CHUNK_MIN_BYTES   51 200   A single 50 KB external file is acceptable for one
+ *                              HTTP/2 request. Above 50 KB, splitting into parallel
+ *                              25 KB chunks can start rendering sooner.
+ *
+ *   CHUNK_SIZE_BYTES  25 600   25 KB per chunk — stays within HTTP/2's default
+ *                              initial window size and transfers in 1–2 TCP segments
+ *                              on most connections.
+ */
+declare const PAGE_CSS_THRESHOLDS: {
+    /** Embed as <style> when total page CSS ≤ this value (bytes). */
+    readonly INLINE_MAX_BYTES: 4096;
+    /** Switch to multi-chunk delivery when total page CSS > this value (bytes). */
+    readonly CHUNK_MIN_BYTES: 51200;
+    /** Maximum bytes per CSS chunk file. */
+    readonly CHUNK_SIZE_BYTES: 25600;
+};
+type PageCssStrategy = 'none' | 'inline' | 'separate' | 'chunks';
+interface PageCssDecision {
+    strategy: PageCssStrategy;
+    /** 'inline': the full merged CSS to embed as <style>. */
+    inlineCss?: string;
+    /**
+     * 'separate': one-element array with the full merged CSS.
+     * 'chunks':   N-element array, each ≤ CHUNK_SIZE_BYTES, split at rule boundaries.
+     * Undefined for 'none' and 'inline'.
+     */
+    cssChunks?: string[];
+}
+/**
+ * Choose the optimal CSS delivery strategy for the merged page CSS.
+ * Call this with the concatenation of all scoped component CSS for the page.
+ */
+declare function decidePageCssStrategy(mergedCss: string): PageCssDecision;
+/**
+ * Split a CSS string into chunks of at most chunkSize bytes each.
+ * Splits are always made at the nearest `}` boundary so no rule is cut mid-way.
+ */
+declare function splitCssIntoChunks(css: string, chunkSize: number): string[];
+export { BrodoxCompiler, type CompileInput, type CompileOutput, PAGE_CSS_THRESHOLDS, type PageCssDecision, type PageCssStrategy, computeScopeId, decidePageCssStrategy, minifyScopedCss, scopeCss, splitCssIntoChunks };

package/dist/index.d.ts CHANGED Viewed

@@ -13,12 +13,17 @@ interface CompileInput {
 interface CompileOutput {
     serverJsPath: string;
     clientJsPath: string;
+    /** Browser (canvas) bundle — uses window.__brodox_react globals, safe to load via Blob URL. */
+    browserJsPath: string;
     /** Compiled CSS bundle path, or null if no CSS files were imported. */
     cssPath: string | null;
     serverJsName: string;
     clientJsName: string;
+    browserJsName: string;
     /** CSS bundle filename, or null if no CSS files were imported. */
     cssName: string | null;
+    /** 6-char base36 FNV-1a scope ID used to prefix CSS selectors ([data-bc=ID]). */
+    scopeId: string;
     compiledAt: Date;
 }
@@ -26,4 +31,67 @@ declare class BrodoxCompiler {
     compile(input: CompileInput): Promise<CompileOutput>;
 }
-export { BrodoxCompiler, type CompileInput, type CompileOutput };
+declare function computeScopeId(slug: string, version: string): string;
+declare function scopeCss(css: string, scopeId: string): string;
+declare function minifyScopedCss(css: string, scopeId: string): Promise<string>;
+/**
+ * Brodox Page-Level CSS Strategy Engine
+ *
+ * Decides how the merged CSS for an entire page is delivered to the browser.
+ * CSS is scoped per-component by the compiler ([data-bc=XXXXXX] selectors).
+ * After publish, all component CSS files are merged and this function chooses
+ * the optimal delivery strategy for the combined result.
+ *
+ *   'none'     → no CSS at all                       → nothing emitted
+ *   'inline'   → total ≤ INLINE_MAX_BYTES             → single <style> in <head>
+ *   'separate' → INLINE_MAX < total ≤ CHUNK_MIN       → one external <link> file
+ *   'chunks'   → total > CHUNK_MIN_BYTES              → N × CHUNK_SIZE_BYTES <link> files
+ *                  e.g. 95 KB → 3 × 25 KB + 1 × 20 KB
+ *
+ * Rationale for thresholds
+ * ─────────────────────────
+ *   INLINE_MAX_BYTES   4 096   HTTP request overhead ≈ 100–300 ms RTT. Inlining
+ *                              4 KB of CSS costs < 4 ms parse time — always faster
+ *                              than an extra round-trip for a small external file.
+ *
+ *   CHUNK_MIN_BYTES   51 200   A single 50 KB external file is acceptable for one
+ *                              HTTP/2 request. Above 50 KB, splitting into parallel
+ *                              25 KB chunks can start rendering sooner.
+ *
+ *   CHUNK_SIZE_BYTES  25 600   25 KB per chunk — stays within HTTP/2's default
+ *                              initial window size and transfers in 1–2 TCP segments
+ *                              on most connections.
+ */
+declare const PAGE_CSS_THRESHOLDS: {
+    /** Embed as <style> when total page CSS ≤ this value (bytes). */
+    readonly INLINE_MAX_BYTES: 4096;
+    /** Switch to multi-chunk delivery when total page CSS > this value (bytes). */
+    readonly CHUNK_MIN_BYTES: 51200;
+    /** Maximum bytes per CSS chunk file. */
+    readonly CHUNK_SIZE_BYTES: 25600;
+};
+type PageCssStrategy = 'none' | 'inline' | 'separate' | 'chunks';
+interface PageCssDecision {
+    strategy: PageCssStrategy;
+    /** 'inline': the full merged CSS to embed as <style>. */
+    inlineCss?: string;
+    /**
+     * 'separate': one-element array with the full merged CSS.
+     * 'chunks':   N-element array, each ≤ CHUNK_SIZE_BYTES, split at rule boundaries.
+     * Undefined for 'none' and 'inline'.
+     */
+    cssChunks?: string[];
+}
+/**
+ * Choose the optimal CSS delivery strategy for the merged page CSS.
+ * Call this with the concatenation of all scoped component CSS for the page.
+ */
+declare function decidePageCssStrategy(mergedCss: string): PageCssDecision;
+/**
+ * Split a CSS string into chunks of at most chunkSize bytes each.
+ * Splits are always made at the nearest `}` boundary so no rule is cut mid-way.
+ */
+declare function splitCssIntoChunks(css: string, chunkSize: number): string[];
+export { BrodoxCompiler, type CompileInput, type CompileOutput, PAGE_CSS_THRESHOLDS, type PageCssDecision, type PageCssStrategy, computeScopeId, decidePageCssStrategy, minifyScopedCss, scopeCss, splitCssIntoChunks };

package/dist/index.js CHANGED Viewed

@@ -30,12 +30,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BrodoxCompiler: () => BrodoxCompiler
+  BrodoxCompiler: () => BrodoxCompiler,
+  PAGE_CSS_THRESHOLDS: () => PAGE_CSS_THRESHOLDS,
+  computeScopeId: () => computeScopeId,
+  decidePageCssStrategy: () => decidePageCssStrategy,
+  minifyScopedCss: () => minifyScopedCss,
+  scopeCss: () => scopeCss,
+  splitCssIntoChunks: () => splitCssIntoChunks
 });
 module.exports = __toCommonJS(index_exports);
 // src/compiler.ts
-var esbuild = __toESM(require("esbuild"));
+var esbuild2 = __toESM(require("esbuild"));
 var import_promises3 = __toESM(require("fs/promises"));
 var import_node_path3 = __toESM(require("path"));
 var import_node_os = __toESM(require("os"));
@@ -154,11 +160,13 @@ export function useRouter() {
 export function useParams() { return {}; }
-export function BrodoxHead({ title, description }) {
+export function BrodoxHead({ title, description, cssContent }) {
   if (title && typeof globalThis.__brodoxCollectHead === 'function')
     globalThis.__brodoxCollectHead({ type: 'title', props: { content: title } });
   if (description && typeof globalThis.__brodoxCollectHead === 'function')
     globalThis.__brodoxCollectHead({ type: 'meta', props: { name: 'description', content: description } });
+  if (cssContent && typeof globalThis.__brodoxCollectHead === 'function')
+    globalThis.__brodoxCollectHead({ type: 'style', props: { content: cssContent } });
   return null;
 }
@@ -234,6 +242,311 @@ export var ClientRender = Client;
   };
 }
+// src/plugins/canvasBuildPlugin.ts
+function canvasReactPlugin() {
+  return {
+    name: "brodox-canvas-react",
+    setup(build2) {
+      build2.onResolve({ filter: /^react\/jsx-runtime$/ }, () => ({
+        path: "react/jsx-runtime",
+        namespace: "brodox-canvas-jsx"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-jsx" }, () => ({
+        loader: "js",
+        // Use window.__brodox_jsx (ReactJSXRuntime) — the real jsx/jsxs functions
+        // behave differently from createElement for children handling.
+        contents: `
+var _jx = window.__brodox_jsx;
+export var jsx      = _jx.jsx;
+export var jsxs     = _jx.jsxs;
+export var Fragment = _jx.Fragment;
+`.trim()
+      }));
+      build2.onResolve({ filter: /^react\/jsx-dev-runtime$/ }, () => ({
+        path: "react/jsx-dev-runtime",
+        namespace: "brodox-canvas-jsx-dev"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-jsx-dev" }, () => ({
+        loader: "js",
+        contents: `
+var _jx = window.__brodox_jsx;
+export var jsxDEV   = _jx.jsx || _jx.jsxDEV;
+export var Fragment = _jx.Fragment;
+`.trim()
+      }));
+      build2.onResolve({ filter: /^react$/ }, () => ({
+        path: "react",
+        namespace: "brodox-canvas-react"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-react" }, () => ({
+        loader: "js",
+        contents: `
+var _r = window.__brodox_react;
+export default _r;
+export var Children            = _r.Children;
+export var createElement       = _r.createElement;
+export var cloneElement        = _r.cloneElement;
+export var createContext       = _r.createContext;
+export var createRef           = _r.createRef;
+export var forwardRef          = _r.forwardRef;
+export var Fragment            = _r.Fragment;
+export var isValidElement      = _r.isValidElement;
+export var lazy                = _r.lazy;
+export var memo                = _r.memo;
+export var Suspense            = _r.Suspense;
+export var useCallback         = _r.useCallback;
+export var useContext          = _r.useContext;
+export var useDebugValue       = _r.useDebugValue;
+export var useEffect           = _r.useEffect;
+export var useId               = _r.useId;
+export var useImperativeHandle = _r.useImperativeHandle;
+export var useLayoutEffect     = _r.useLayoutEffect;
+export var useMemo             = _r.useMemo;
+export var useReducer          = _r.useReducer;
+export var useRef              = _r.useRef;
+export var useState            = _r.useState;
+export var useSyncExternalStore= _r.useSyncExternalStore;
+export var useTransition       = _r.useTransition;
+export var startTransition     = _r.startTransition;
+`.trim()
+      }));
+      build2.onResolve({ filter: /^react-dom(\/.*)?$/ }, () => ({
+        path: "react-dom",
+        namespace: "brodox-canvas-react-dom"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-react-dom" }, () => ({
+        loader: "js",
+        contents: `
+var _rd = window.__brodox_react_dom;
+export default _rd;
+export var createPortal = _rd && _rd.createPortal;
+export var flushSync    = _rd && _rd.flushSync;
+`.trim()
+      }));
+    }
+  };
+}
+function canvasRuntimePlugin() {
+  return {
+    name: "brodox-runtime-canvas-stub",
+    setup(build2) {
+      build2.onResolve({ filter: /^@broxium\/runtime$/ }, () => ({
+        path: "@broxium/runtime",
+        namespace: "brodox-runtime-canvas"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-runtime-canvas" }, () => ({
+        loader: "js",
+        contents: `
+// brodox-runtime-canvas:@broxium/runtime
+var React = window.__brodox_react;
+var h = React.createElement;
+var F = React.Fragment;
+export function BrodoxHead() { return null; }
+export function BrodoxFont() { return null; }
+export function BrodoxLink({ href, children, className, style, target }) {
+  return h('a', { href, className, style, target }, children);
+}
+export function BrodoxImage({ src, alt, width, height, fill, className, style }) {
+  var imgStyle = fill
+    ? Object.assign({ width: '100%', height: '100%', objectFit: 'cover' }, style || {})
+    : (style || {});
+  return h('img', { src: src, alt: alt || '', width: fill ? undefined : width, height: fill ? undefined : height, className: className, style: imgStyle });
+}
+export function BrodoxRouter({ children }) { return h(F, null, children); }
+export function useRouter() {
+  return { pathname: '/', params: {}, navigate: function() {}, back: function() {}, forward: function() {}, prefetch: function() {} };
+}
+export function useParams() { return {}; }
+// In the canvas, Client and Server are both transparent: render children as-is.
+export function Client({ children }) { return h(F, null, children); }
+export function Server({ children }) { return h(F, null, children); }
+export var ClientRender = Client;
+`.trim()
+      }));
+    }
+  };
+}
+// src/utils/scopeCss.ts
+var esbuild = __toESM(require("esbuild"));
+function computeScopeId(slug, version) {
+  let hash = 2166136261;
+  const input = `${slug}@${version}`;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  return hash.toString(36).slice(0, 6).padStart(6, "0");
+}
+function scopeSelectors(selectorText, scope) {
+  return selectorText.split(",").map((s) => {
+    const t = s.trim();
+    if (!t) return t;
+    if (t === ":root") return scope;
+    if (t === "html" || t === "body") return t;
+    return `${scope} ${t}`;
+  }).join(",\n");
+}
+function scopeCss(css, scopeId) {
+  const scope = `[data-bc=${scopeId}]`;
+  return scopeBlock(css, scope);
+}
+function scopeBlock(css, scope) {
+  let i = 0;
+  let out = "";
+  const len = css.length;
+  while (i < len) {
+    const wsStart = i;
+    while (i < len && /\s/.test(css[i])) i++;
+    out += css.slice(wsStart, i);
+    if (i >= len) break;
+    if (css[i] === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      if (end === -1) {
+        out += css.slice(i);
+        break;
+      }
+      out += css.slice(i, end + 2);
+      i = end + 2;
+      continue;
+    }
+    if (css[i] === "@") {
+      let j = i + 1;
+      while (j < len && /[a-zA-Z-]/.test(css[j])) j++;
+      const atName = css.slice(i + 1, j).toLowerCase();
+      if (atName === "charset" || atName === "import") {
+        const semi = css.indexOf(";", j);
+        if (semi === -1) {
+          out += css.slice(i);
+          i = len;
+        } else {
+          out += css.slice(i, semi + 1);
+          i = semi + 1;
+        }
+        continue;
+      }
+      if (atName === "keyframes" || atName === "-webkit-keyframes" || atName === "-moz-keyframes" || atName === "font-face") {
+        while (j < len && css[j] !== "{") j++;
+        if (j >= len) {
+          out += css.slice(i);
+          i = len;
+          continue;
+        }
+        const { block, end: blockEnd } = readBlock(css, j);
+        out += css.slice(i, j) + block;
+        i = blockEnd;
+        continue;
+      }
+      if (atName === "media" || atName === "supports" || atName === "layer" || atName === "container") {
+        while (j < len && css[j] !== "{") j++;
+        if (j >= len) {
+          out += css.slice(i);
+          i = len;
+          continue;
+        }
+        const condition = css.slice(i, j);
+        const { body, end: blockEnd } = readBlockBody(css, j);
+        const scopedBody = scopeBlock(body, scope);
+        out += `${condition}{
+${scopedBody}}
+`;
+        i = blockEnd;
+        continue;
+      }
+      while (j < len && css[j] !== "{" && css[j] !== ";") j++;
+      if (j >= len) {
+        out += css.slice(i);
+        i = len;
+        continue;
+      }
+      if (css[j] === ";") {
+        out += css.slice(i, j + 1);
+        i = j + 1;
+        continue;
+      }
+      const { block: unknownBlock, end: unknownEnd } = readBlock(css, j);
+      out += css.slice(i, j) + unknownBlock;
+      i = unknownEnd;
+      continue;
+    }
+    let selectorEnd = i;
+    while (selectorEnd < len) {
+      if (css[selectorEnd] === "{") break;
+      if (css[selectorEnd] === "/" && css[selectorEnd + 1] === "*") {
+        const end = css.indexOf("*/", selectorEnd + 2);
+        selectorEnd = end === -1 ? len : end + 2;
+        continue;
+      }
+      selectorEnd++;
+    }
+    if (selectorEnd >= len) {
+      out += css.slice(i);
+      break;
+    }
+    const rawSelector = css.slice(i, selectorEnd);
+    const trimmedSelector = rawSelector.trim();
+    if (!trimmedSelector) {
+      i = selectorEnd;
+      continue;
+    }
+    const cleanSelector = trimmedSelector.replace(/\/\*.*?\*\//gs, "").trim();
+    const scoped = scopeSelectors(cleanSelector, scope);
+    const { body: declBody, end: declEnd } = readBlockBody(css, selectorEnd);
+    out += `${scoped} {
+${declBody}}
+`;
+    i = declEnd;
+  }
+  return out;
+}
+function readBlock(css, openBrace) {
+  let depth = 0;
+  let i = openBrace;
+  const len = css.length;
+  while (i < len) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) {
+        return { block: css.slice(openBrace, i + 1), end: i + 1 };
+      }
+    } else if (css[i] === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      if (end === -1) {
+        i = len;
+        break;
+      }
+      i = end + 1;
+    }
+    i++;
+  }
+  return { block: css.slice(openBrace), end: len };
+}
+function readBlockBody(css, openBrace) {
+  const { block, end } = readBlock(css, openBrace);
+  const body = block.slice(1, -1);
+  return { body, end };
+}
+async function minifyScopedCss(css, scopeId) {
+  const scoped = scopeCss(css, scopeId);
+  try {
+    const result = await esbuild.transform(scoped, {
+      loader: "css",
+      minify: true
+    });
+    return result.code;
+  } catch {
+    return scoped;
+  }
+}
 // src/compiler.ts
 var ENTRY_PRIORITY = [
   "App.tsx",
@@ -280,6 +593,21 @@ function findReactNodeModules() {
   }
   return [];
 }
+function cssTextPlugin(scopeId) {
+  return {
+    name: "brodox-css-text",
+    setup(build2) {
+      build2.onLoad({ filter: /\.css$/ }, async (args) => {
+        const content = await import_promises3.default.readFile(args.path, "utf8");
+        const minified = await minifyScopedCss(content, scopeId);
+        return {
+          contents: `module.exports = ${JSON.stringify(minified)};`,
+          loader: "js"
+        };
+      });
+    }
+  };
+}
 var BrodoxCompiler = class {
   async compile(input) {
     const tmpDir = import_node_path3.default.join(import_node_os.default.tmpdir(), `brodox-compile-${input.slug}-${(0, import_node_crypto.randomUUID)()}`);
@@ -302,14 +630,17 @@ var BrodoxCompiler = class {
     if (!entryPoint) {
       throw new Error(`No entry file found in component files for ${input.slug}`);
     }
+    const scopeId = computeScopeId(input.slug, input.version);
     const safeName = `${input.slug}-v${input.version}`;
     const serverJsName = `${safeName}.server.esm.js`;
     const clientJsName = `${safeName}.client.esm.js`;
+    const browserJsName = `${safeName}.browser.js`;
     const serverJsPath = import_node_path3.default.join(input.outputDir, serverJsName);
     const clientJsPath = import_node_path3.default.join(input.outputDir, clientJsName);
+    const browserJsPath = import_node_path3.default.join(input.outputDir, browserJsName);
     await import_promises3.default.mkdir(input.outputDir, { recursive: true });
     const serverNodePaths = [...input.nodePaths ?? [], ...findReactNodeModules()];
-    await esbuild.build({
+    await esbuild2.build({
       entryPoints: [entryPoint],
       bundle: true,
       format: "esm",
@@ -319,13 +650,11 @@ var BrodoxCompiler = class {
       nodePaths: serverNodePaths,
       external: [],
       // no externals — fully self-contained
-      plugins: [clientStubPlugin(), runtimeServerStubPlugin(serverNodePaths)],
+      plugins: [clientStubPlugin(), runtimeServerStubPlugin(serverNodePaths), cssTextPlugin(scopeId)],
       outfile: serverJsPath,
       minify: false,
       sourcemap: false,
-      define: { "process.env.NODE_ENV": '"production"' },
-      loader: { ".css": "text" }
-      // CSS imports return empty string in server bundle
+      define: { "process.env.NODE_ENV": '"production"' }
     });
     const clientComponents = [];
     for (const file of input.files) {
@@ -350,7 +679,7 @@ ${registryEntries}
       await import_promises3.default.writeFile(registryEntryPath, registryWrapper, "utf8");
       clientEntryPoint = registryEntryPath;
     }
-    await esbuild.build({
+    await esbuild2.build({
       entryPoints: [clientEntryPoint],
       bundle: true,
       format: "esm",
@@ -358,21 +687,35 @@ ${registryEntries}
       target: ["es2020", "chrome90", "firefox88", "safari14"],
       jsx: "automatic",
       external: CLIENT_EXTERNALS,
-      plugins: [serverStubPlugin()],
+      plugins: [serverStubPlugin(), cssTextPlugin(scopeId)],
       outfile: clientJsPath,
       minify: true,
       sourcemap: false,
       define: { "process.env.NODE_ENV": '"production"' },
-      banner: { js: 'import React from "react";' },
-      loader: { ".css": "text" }
-      // CSS imports return the CSS string (injected via BrodoxHead or style tag)
+      banner: { js: 'import React from "react";' }
+    });
+    await esbuild2.build({
+      entryPoints: [clientEntryPoint],
+      bundle: true,
+      format: "esm",
+      platform: "browser",
+      target: ["es2020", "chrome90", "firefox88", "safari14"],
+      jsx: "automatic",
+      external: [],
+      // no externals — everything inlined or replaced by plugins
+      plugins: [canvasReactPlugin(), canvasRuntimePlugin(), cssTextPlugin(scopeId)],
+      outfile: browserJsPath,
+      minify: true,
+      sourcemap: false,
+      define: { "process.env.NODE_ENV": '"production"' }
+      // no banner — canvasReactPlugin handles the React reference via window global
     });
     const hasCss = input.files.some((f) => /\.css$/.test(f.path));
     const cssName = hasCss ? `${safeName}.css` : null;
     const cssPath = hasCss ? import_node_path3.default.join(input.outputDir, cssName) : null;
     if (hasCss && cssPath) {
       try {
-        await esbuild.build({
+        await esbuild2.build({
           entryPoints: [entryPoint],
           bundle: true,
           format: "esm",
@@ -382,7 +725,8 @@ ${registryEntries}
           plugins: [serverStubPlugin()],
           outfile: cssPath.replace(/\.css$/, ".css.tmp.js"),
           // esbuild needs a JS outfile
-          minify: true,
+          minify: false,
+          // we'll minify after scoping
           sourcemap: false,
           define: { "process.env.NODE_ENV": '"production"' },
           loader: { ".css": "css" }
@@ -393,6 +737,12 @@ ${registryEntries}
         } catch {
         }
         await import_promises3.default.rm(cssPath.replace(/\.css$/, ".css.tmp.js"), { force: true });
+        try {
+          const rawCss = await import_promises3.default.readFile(cssPath, "utf8");
+          const minifiedScoped = await minifyScopedCss(rawCss, scopeId);
+          await import_promises3.default.writeFile(cssPath, minifiedScoped, "utf8");
+        } catch {
+        }
       } catch {
       }
     }
@@ -400,15 +750,68 @@ ${registryEntries}
     return {
       serverJsPath,
       clientJsPath,
+      browserJsPath,
       cssPath,
       serverJsName,
       clientJsName,
+      browserJsName,
       cssName,
+      scopeId,
       compiledAt: /* @__PURE__ */ new Date()
     };
   }
 };
+// src/utils/cssStrategy.ts
+var PAGE_CSS_THRESHOLDS = {
+  /** Embed as <style> when total page CSS ≤ this value (bytes). */
+  INLINE_MAX_BYTES: 4096,
+  /** Switch to multi-chunk delivery when total page CSS > this value (bytes). */
+  CHUNK_MIN_BYTES: 51200,
+  /** Maximum bytes per CSS chunk file. */
+  CHUNK_SIZE_BYTES: 25600
+};
+function decidePageCssStrategy(mergedCss) {
+  const size = Buffer.byteLength(mergedCss, "utf8");
+  if (size === 0) return { strategy: "none" };
+  if (size <= PAGE_CSS_THRESHOLDS.INLINE_MAX_BYTES) {
+    return { strategy: "inline", inlineCss: mergedCss };
+  }
+  if (size > PAGE_CSS_THRESHOLDS.CHUNK_MIN_BYTES) {
+    return {
+      strategy: "chunks",
+      cssChunks: splitCssIntoChunks(mergedCss, PAGE_CSS_THRESHOLDS.CHUNK_SIZE_BYTES)
+    };
+  }
+  return { strategy: "separate", cssChunks: [mergedCss] };
+}
+function splitCssIntoChunks(css, chunkSize) {
+  const chunks = [];
+  let remaining = css.trim();
+  while (remaining.length > 0) {
+    const buf = Buffer.from(remaining, "utf8");
+    if (buf.byteLength <= chunkSize) {
+      chunks.push(remaining);
+      break;
+    }
+    const candidate = buf.slice(0, chunkSize).toString("utf8");
+    const lastBrace = candidate.lastIndexOf("}");
+    if (lastBrace < 0) {
+      chunks.push(remaining);
+      break;
+    }
+    chunks.push(remaining.slice(0, lastBrace + 1));
+    remaining = remaining.slice(lastBrace + 1).trim();
+  }
+  return chunks.filter((c) => c.length > 0);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BrodoxCompiler
+  BrodoxCompiler,
+  PAGE_CSS_THRESHOLDS,
+  computeScopeId,
+  decidePageCssStrategy,
+  minifyScopedCss,
+  scopeCss,
+  splitCssIntoChunks
 });

package/dist/index.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 // src/compiler.ts
-import * as esbuild from "esbuild";
+import * as esbuild2 from "esbuild";
 import fs3 from "fs/promises";
 import path3 from "path";
 import os from "os";
@@ -125,11 +125,13 @@ export function useRouter() {
 export function useParams() { return {}; }
-export function BrodoxHead({ title, description }) {
+export function BrodoxHead({ title, description, cssContent }) {
   if (title && typeof globalThis.__brodoxCollectHead === 'function')
     globalThis.__brodoxCollectHead({ type: 'title', props: { content: title } });
   if (description && typeof globalThis.__brodoxCollectHead === 'function')
     globalThis.__brodoxCollectHead({ type: 'meta', props: { name: 'description', content: description } });
+  if (cssContent && typeof globalThis.__brodoxCollectHead === 'function')
+    globalThis.__brodoxCollectHead({ type: 'style', props: { content: cssContent } });
   return null;
 }
@@ -205,6 +207,311 @@ export var ClientRender = Client;
   };
 }
+// src/plugins/canvasBuildPlugin.ts
+function canvasReactPlugin() {
+  return {
+    name: "brodox-canvas-react",
+    setup(build2) {
+      build2.onResolve({ filter: /^react\/jsx-runtime$/ }, () => ({
+        path: "react/jsx-runtime",
+        namespace: "brodox-canvas-jsx"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-jsx" }, () => ({
+        loader: "js",
+        // Use window.__brodox_jsx (ReactJSXRuntime) — the real jsx/jsxs functions
+        // behave differently from createElement for children handling.
+        contents: `
+var _jx = window.__brodox_jsx;
+export var jsx      = _jx.jsx;
+export var jsxs     = _jx.jsxs;
+export var Fragment = _jx.Fragment;
+`.trim()
+      }));
+      build2.onResolve({ filter: /^react\/jsx-dev-runtime$/ }, () => ({
+        path: "react/jsx-dev-runtime",
+        namespace: "brodox-canvas-jsx-dev"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-jsx-dev" }, () => ({
+        loader: "js",
+        contents: `
+var _jx = window.__brodox_jsx;
+export var jsxDEV   = _jx.jsx || _jx.jsxDEV;
+export var Fragment = _jx.Fragment;
+`.trim()
+      }));
+      build2.onResolve({ filter: /^react$/ }, () => ({
+        path: "react",
+        namespace: "brodox-canvas-react"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-react" }, () => ({
+        loader: "js",
+        contents: `
+var _r = window.__brodox_react;
+export default _r;
+export var Children            = _r.Children;
+export var createElement       = _r.createElement;
+export var cloneElement        = _r.cloneElement;
+export var createContext       = _r.createContext;
+export var createRef           = _r.createRef;
+export var forwardRef          = _r.forwardRef;
+export var Fragment            = _r.Fragment;
+export var isValidElement      = _r.isValidElement;
+export var lazy                = _r.lazy;
+export var memo                = _r.memo;
+export var Suspense            = _r.Suspense;
+export var useCallback         = _r.useCallback;
+export var useContext          = _r.useContext;
+export var useDebugValue       = _r.useDebugValue;
+export var useEffect           = _r.useEffect;
+export var useId               = _r.useId;
+export var useImperativeHandle = _r.useImperativeHandle;
+export var useLayoutEffect     = _r.useLayoutEffect;
+export var useMemo             = _r.useMemo;
+export var useReducer          = _r.useReducer;
+export var useRef              = _r.useRef;
+export var useState            = _r.useState;
+export var useSyncExternalStore= _r.useSyncExternalStore;
+export var useTransition       = _r.useTransition;
+export var startTransition     = _r.startTransition;
+`.trim()
+      }));
+      build2.onResolve({ filter: /^react-dom(\/.*)?$/ }, () => ({
+        path: "react-dom",
+        namespace: "brodox-canvas-react-dom"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-canvas-react-dom" }, () => ({
+        loader: "js",
+        contents: `
+var _rd = window.__brodox_react_dom;
+export default _rd;
+export var createPortal = _rd && _rd.createPortal;
+export var flushSync    = _rd && _rd.flushSync;
+`.trim()
+      }));
+    }
+  };
+}
+function canvasRuntimePlugin() {
+  return {
+    name: "brodox-runtime-canvas-stub",
+    setup(build2) {
+      build2.onResolve({ filter: /^@broxium\/runtime$/ }, () => ({
+        path: "@broxium/runtime",
+        namespace: "brodox-runtime-canvas"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "brodox-runtime-canvas" }, () => ({
+        loader: "js",
+        contents: `
+// brodox-runtime-canvas:@broxium/runtime
+var React = window.__brodox_react;
+var h = React.createElement;
+var F = React.Fragment;
+export function BrodoxHead() { return null; }
+export function BrodoxFont() { return null; }
+export function BrodoxLink({ href, children, className, style, target }) {
+  return h('a', { href, className, style, target }, children);
+}
+export function BrodoxImage({ src, alt, width, height, fill, className, style }) {
+  var imgStyle = fill
+    ? Object.assign({ width: '100%', height: '100%', objectFit: 'cover' }, style || {})
+    : (style || {});
+  return h('img', { src: src, alt: alt || '', width: fill ? undefined : width, height: fill ? undefined : height, className: className, style: imgStyle });
+}
+export function BrodoxRouter({ children }) { return h(F, null, children); }
+export function useRouter() {
+  return { pathname: '/', params: {}, navigate: function() {}, back: function() {}, forward: function() {}, prefetch: function() {} };
+}
+export function useParams() { return {}; }
+// In the canvas, Client and Server are both transparent: render children as-is.
+export function Client({ children }) { return h(F, null, children); }
+export function Server({ children }) { return h(F, null, children); }
+export var ClientRender = Client;
+`.trim()
+      }));
+    }
+  };
+}
+// src/utils/scopeCss.ts
+import * as esbuild from "esbuild";
+function computeScopeId(slug, version) {
+  let hash = 2166136261;
+  const input = `${slug}@${version}`;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  return hash.toString(36).slice(0, 6).padStart(6, "0");
+}
+function scopeSelectors(selectorText, scope) {
+  return selectorText.split(",").map((s) => {
+    const t = s.trim();
+    if (!t) return t;
+    if (t === ":root") return scope;
+    if (t === "html" || t === "body") return t;
+    return `${scope} ${t}`;
+  }).join(",\n");
+}
+function scopeCss(css, scopeId) {
+  const scope = `[data-bc=${scopeId}]`;
+  return scopeBlock(css, scope);
+}
+function scopeBlock(css, scope) {
+  let i = 0;
+  let out = "";
+  const len = css.length;
+  while (i < len) {
+    const wsStart = i;
+    while (i < len && /\s/.test(css[i])) i++;
+    out += css.slice(wsStart, i);
+    if (i >= len) break;
+    if (css[i] === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      if (end === -1) {
+        out += css.slice(i);
+        break;
+      }
+      out += css.slice(i, end + 2);
+      i = end + 2;
+      continue;
+    }
+    if (css[i] === "@") {
+      let j = i + 1;
+      while (j < len && /[a-zA-Z-]/.test(css[j])) j++;
+      const atName = css.slice(i + 1, j).toLowerCase();
+      if (atName === "charset" || atName === "import") {
+        const semi = css.indexOf(";", j);
+        if (semi === -1) {
+          out += css.slice(i);
+          i = len;
+        } else {
+          out += css.slice(i, semi + 1);
+          i = semi + 1;
+        }
+        continue;
+      }
+      if (atName === "keyframes" || atName === "-webkit-keyframes" || atName === "-moz-keyframes" || atName === "font-face") {
+        while (j < len && css[j] !== "{") j++;
+        if (j >= len) {
+          out += css.slice(i);
+          i = len;
+          continue;
+        }
+        const { block, end: blockEnd } = readBlock(css, j);
+        out += css.slice(i, j) + block;
+        i = blockEnd;
+        continue;
+      }
+      if (atName === "media" || atName === "supports" || atName === "layer" || atName === "container") {
+        while (j < len && css[j] !== "{") j++;
+        if (j >= len) {
+          out += css.slice(i);
+          i = len;
+          continue;
+        }
+        const condition = css.slice(i, j);
+        const { body, end: blockEnd } = readBlockBody(css, j);
+        const scopedBody = scopeBlock(body, scope);
+        out += `${condition}{
+${scopedBody}}
+`;
+        i = blockEnd;
+        continue;
+      }
+      while (j < len && css[j] !== "{" && css[j] !== ";") j++;
+      if (j >= len) {
+        out += css.slice(i);
+        i = len;
+        continue;
+      }
+      if (css[j] === ";") {
+        out += css.slice(i, j + 1);
+        i = j + 1;
+        continue;
+      }
+      const { block: unknownBlock, end: unknownEnd } = readBlock(css, j);
+      out += css.slice(i, j) + unknownBlock;
+      i = unknownEnd;
+      continue;
+    }
+    let selectorEnd = i;
+    while (selectorEnd < len) {
+      if (css[selectorEnd] === "{") break;
+      if (css[selectorEnd] === "/" && css[selectorEnd + 1] === "*") {
+        const end = css.indexOf("*/", selectorEnd + 2);
+        selectorEnd = end === -1 ? len : end + 2;
+        continue;
+      }
+      selectorEnd++;
+    }
+    if (selectorEnd >= len) {
+      out += css.slice(i);
+      break;
+    }
+    const rawSelector = css.slice(i, selectorEnd);
+    const trimmedSelector = rawSelector.trim();
+    if (!trimmedSelector) {
+      i = selectorEnd;
+      continue;
+    }
+    const cleanSelector = trimmedSelector.replace(/\/\*.*?\*\//gs, "").trim();
+    const scoped = scopeSelectors(cleanSelector, scope);
+    const { body: declBody, end: declEnd } = readBlockBody(css, selectorEnd);
+    out += `${scoped} {
+${declBody}}
+`;
+    i = declEnd;
+  }
+  return out;
+}
+function readBlock(css, openBrace) {
+  let depth = 0;
+  let i = openBrace;
+  const len = css.length;
+  while (i < len) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) {
+        return { block: css.slice(openBrace, i + 1), end: i + 1 };
+      }
+    } else if (css[i] === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      if (end === -1) {
+        i = len;
+        break;
+      }
+      i = end + 1;
+    }
+    i++;
+  }
+  return { block: css.slice(openBrace), end: len };
+}
+function readBlockBody(css, openBrace) {
+  const { block, end } = readBlock(css, openBrace);
+  const body = block.slice(1, -1);
+  return { body, end };
+}
+async function minifyScopedCss(css, scopeId) {
+  const scoped = scopeCss(css, scopeId);
+  try {
+    const result = await esbuild.transform(scoped, {
+      loader: "css",
+      minify: true
+    });
+    return result.code;
+  } catch {
+    return scoped;
+  }
+}
 // src/compiler.ts
 var ENTRY_PRIORITY = [
   "App.tsx",
@@ -251,6 +558,21 @@ function findReactNodeModules() {
   }
   return [];
 }
+function cssTextPlugin(scopeId) {
+  return {
+    name: "brodox-css-text",
+    setup(build2) {
+      build2.onLoad({ filter: /\.css$/ }, async (args) => {
+        const content = await fs3.readFile(args.path, "utf8");
+        const minified = await minifyScopedCss(content, scopeId);
+        return {
+          contents: `module.exports = ${JSON.stringify(minified)};`,
+          loader: "js"
+        };
+      });
+    }
+  };
+}
 var BrodoxCompiler = class {
   async compile(input) {
     const tmpDir = path3.join(os.tmpdir(), `brodox-compile-${input.slug}-${randomUUID()}`);
@@ -273,14 +595,17 @@ var BrodoxCompiler = class {
     if (!entryPoint) {
       throw new Error(`No entry file found in component files for ${input.slug}`);
     }
+    const scopeId = computeScopeId(input.slug, input.version);
     const safeName = `${input.slug}-v${input.version}`;
     const serverJsName = `${safeName}.server.esm.js`;
     const clientJsName = `${safeName}.client.esm.js`;
+    const browserJsName = `${safeName}.browser.js`;
     const serverJsPath = path3.join(input.outputDir, serverJsName);
     const clientJsPath = path3.join(input.outputDir, clientJsName);
+    const browserJsPath = path3.join(input.outputDir, browserJsName);
     await fs3.mkdir(input.outputDir, { recursive: true });
     const serverNodePaths = [...input.nodePaths ?? [], ...findReactNodeModules()];
-    await esbuild.build({
+    await esbuild2.build({
       entryPoints: [entryPoint],
       bundle: true,
       format: "esm",
@@ -290,13 +615,11 @@ var BrodoxCompiler = class {
       nodePaths: serverNodePaths,
       external: [],
       // no externals — fully self-contained
-      plugins: [clientStubPlugin(), runtimeServerStubPlugin(serverNodePaths)],
+      plugins: [clientStubPlugin(), runtimeServerStubPlugin(serverNodePaths), cssTextPlugin(scopeId)],
       outfile: serverJsPath,
       minify: false,
       sourcemap: false,
-      define: { "process.env.NODE_ENV": '"production"' },
-      loader: { ".css": "text" }
-      // CSS imports return empty string in server bundle
+      define: { "process.env.NODE_ENV": '"production"' }
     });
     const clientComponents = [];
     for (const file of input.files) {
@@ -321,7 +644,7 @@ ${registryEntries}
       await fs3.writeFile(registryEntryPath, registryWrapper, "utf8");
       clientEntryPoint = registryEntryPath;
     }
-    await esbuild.build({
+    await esbuild2.build({
       entryPoints: [clientEntryPoint],
       bundle: true,
       format: "esm",
@@ -329,21 +652,35 @@ ${registryEntries}
       target: ["es2020", "chrome90", "firefox88", "safari14"],
       jsx: "automatic",
       external: CLIENT_EXTERNALS,
-      plugins: [serverStubPlugin()],
+      plugins: [serverStubPlugin(), cssTextPlugin(scopeId)],
       outfile: clientJsPath,
       minify: true,
       sourcemap: false,
       define: { "process.env.NODE_ENV": '"production"' },
-      banner: { js: 'import React from "react";' },
-      loader: { ".css": "text" }
-      // CSS imports return the CSS string (injected via BrodoxHead or style tag)
+      banner: { js: 'import React from "react";' }
+    });
+    await esbuild2.build({
+      entryPoints: [clientEntryPoint],
+      bundle: true,
+      format: "esm",
+      platform: "browser",
+      target: ["es2020", "chrome90", "firefox88", "safari14"],
+      jsx: "automatic",
+      external: [],
+      // no externals — everything inlined or replaced by plugins
+      plugins: [canvasReactPlugin(), canvasRuntimePlugin(), cssTextPlugin(scopeId)],
+      outfile: browserJsPath,
+      minify: true,
+      sourcemap: false,
+      define: { "process.env.NODE_ENV": '"production"' }
+      // no banner — canvasReactPlugin handles the React reference via window global
     });
     const hasCss = input.files.some((f) => /\.css$/.test(f.path));
     const cssName = hasCss ? `${safeName}.css` : null;
     const cssPath = hasCss ? path3.join(input.outputDir, cssName) : null;
     if (hasCss && cssPath) {
       try {
-        await esbuild.build({
+        await esbuild2.build({
           entryPoints: [entryPoint],
           bundle: true,
           format: "esm",
@@ -353,7 +690,8 @@ ${registryEntries}
           plugins: [serverStubPlugin()],
           outfile: cssPath.replace(/\.css$/, ".css.tmp.js"),
           // esbuild needs a JS outfile
-          minify: true,
+          minify: false,
+          // we'll minify after scoping
           sourcemap: false,
           define: { "process.env.NODE_ENV": '"production"' },
           loader: { ".css": "css" }
@@ -364,6 +702,12 @@ ${registryEntries}
         } catch {
         }
         await fs3.rm(cssPath.replace(/\.css$/, ".css.tmp.js"), { force: true });
+        try {
+          const rawCss = await fs3.readFile(cssPath, "utf8");
+          const minifiedScoped = await minifyScopedCss(rawCss, scopeId);
+          await fs3.writeFile(cssPath, minifiedScoped, "utf8");
+        } catch {
+        }
       } catch {
       }
     }
@@ -371,14 +715,67 @@ ${registryEntries}
     return {
       serverJsPath,
       clientJsPath,
+      browserJsPath,
       cssPath,
       serverJsName,
       clientJsName,
+      browserJsName,
       cssName,
+      scopeId,
       compiledAt: /* @__PURE__ */ new Date()
     };
   }
 };
+// src/utils/cssStrategy.ts
+var PAGE_CSS_THRESHOLDS = {
+  /** Embed as <style> when total page CSS ≤ this value (bytes). */
+  INLINE_MAX_BYTES: 4096,
+  /** Switch to multi-chunk delivery when total page CSS > this value (bytes). */
+  CHUNK_MIN_BYTES: 51200,
+  /** Maximum bytes per CSS chunk file. */
+  CHUNK_SIZE_BYTES: 25600
+};
+function decidePageCssStrategy(mergedCss) {
+  const size = Buffer.byteLength(mergedCss, "utf8");
+  if (size === 0) return { strategy: "none" };
+  if (size <= PAGE_CSS_THRESHOLDS.INLINE_MAX_BYTES) {
+    return { strategy: "inline", inlineCss: mergedCss };
+  }
+  if (size > PAGE_CSS_THRESHOLDS.CHUNK_MIN_BYTES) {
+    return {
+      strategy: "chunks",
+      cssChunks: splitCssIntoChunks(mergedCss, PAGE_CSS_THRESHOLDS.CHUNK_SIZE_BYTES)
+    };
+  }
+  return { strategy: "separate", cssChunks: [mergedCss] };
+}
+function splitCssIntoChunks(css, chunkSize) {
+  const chunks = [];
+  let remaining = css.trim();
+  while (remaining.length > 0) {
+    const buf = Buffer.from(remaining, "utf8");
+    if (buf.byteLength <= chunkSize) {
+      chunks.push(remaining);
+      break;
+    }
+    const candidate = buf.slice(0, chunkSize).toString("utf8");
+    const lastBrace = candidate.lastIndexOf("}");
+    if (lastBrace < 0) {
+      chunks.push(remaining);
+      break;
+    }
+    chunks.push(remaining.slice(0, lastBrace + 1));
+    remaining = remaining.slice(lastBrace + 1).trim();
+  }
+  return chunks.filter((c) => c.length > 0);
+}
 export {
-  BrodoxCompiler
+  BrodoxCompiler,
+  PAGE_CSS_THRESHOLDS,
+  computeScopeId,
+  decidePageCssStrategy,
+  minifyScopedCss,
+  scopeCss,
+  splitCssIntoChunks
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@broxium/compiler",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Brodox component compiler — TSX to ESM server + client bundles",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,9 +18,9 @@
     "esbuild": "^0.25.0"
   },
   "devDependencies": {
+    "@types/node": "^20.19.42",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "@types/node": "^20.0.0"
+    "typescript": "^5.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",