chocola 2.0.0-next.6 → 2.0.0-next.8

package/README.md

@@ -1,36 +1,39 @@
-# chocola
-
-Chocola is a JavaScript library for creating web user interfaces.
-
-`chocola` only contains the functionality to build and serve web static builds. For production you may want to implement `chocola` to your workflow with other frameworks until official workflows are provided.
-
-## Usage
-
-```html
-<!-- Greeting.html -->
-<script>
-    let self = new HTMLDivElement;
-    let input = new HTMLInputElement;
-
-    export let title = "Hello";
-
-    function $runtime() {
-        input.focus();
-    }
-</script>
-
-<template>
-    <div>
-        <h1>{title}</h1>
-        <input bind:self="input" type="text" placeholder="Your name">
-    </div>
-</template>
-
-<style>
-    h1 { color: chocolate; }
-</style>
-```
-
-## Documentation
-
-See https://github.com/chocolajs/chocola/wiki/Overview
+![Chochola • The sweetest way to build the web](https://chocolaframework.web.app/static/img/banner.jpg)
+
+## What is Chocola
+
+Chocola is a new and sweeter way to build your web apps.
+
+No bundler config. No virtual DOM. No hydration ceremony. Just `.html` files with `<template>`, `<script>`, and `<style>` — compiled to static HTML with scoped CSS, and optional runtime when you need it.
+
+Import components. Instantiate them. Mount, update, remove. All client-side. Same file, zero overhead.
+
+```html
+<script>
+    let self;
+    let input;
+
+    export let title = "Hello";
+
+    function $runtime() {
+        input.focus();
+    }
+</script>
+
+<template>
+    <div>
+        <h1>{title}</h1>
+        <input bind:self="input" type="text" placeholder="Your name">
+    </div>
+</template>
+
+<style>
+    h1 { color: chocolate; }
+</style>
+```
+
+Chocola 2 is in current development and will add CSR SPA and much more features!
+
+## Documentation
+
+https://github.com/chocolajs/chocola/wiki/Overview

package/compiler/chalk.js

@@ -1,32 +1,32 @@
-const ansi = {
-  bold: "\x1b[1m",
-  underline: "\x1b[4m",
-  red: "\x1b[31m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-};
-
-const reset = "\x1b[0m";
-
-function hexToAnsi(h) {
-  const r = parseInt(h.slice(1, 3), 16);
-  const g = parseInt(h.slice(3, 5), 16);
-  const b = parseInt(h.slice(5, 7), 16);
-  return `\x1b[38;2;${r};${g};${b}m`;
-}
-
-function makeChalk(stack) {
-  const fn = (s) => {
-    if (stack.length === 0) return s;
-    return stack.map(n => ansi[n] || hexToAnsi(n)).join("") + s + reset;
-  };
-  return new Proxy(fn, {
-    get(_, prop) {
-      if (prop === "hex") return (h) => makeChalk([...stack, h]);
-      return makeChalk([...stack, prop]);
-    },
-  });
-}
-
-const chalk = makeChalk([]);
-export default chalk;
+const ansi = {
+  bold: "\x1b[1m",
+  underline: "\x1b[4m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+};
+
+const reset = "\x1b[0m";
+
+function hexToAnsi(h) {
+  const r = parseInt(h.slice(1, 3), 16);
+  const g = parseInt(h.slice(3, 5), 16);
+  const b = parseInt(h.slice(5, 7), 16);
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+function makeChalk(stack) {
+  const fn = (s) => {
+    if (stack.length === 0) return s;
+    return stack.map(n => ansi[n] || hexToAnsi(n)).join("") + s + reset;
+  };
+  return new Proxy(fn, {
+    get(_, prop) {
+      if (prop === "hex") return (h) => makeChalk([...stack, h]);
+      return makeChalk([...stack, prop]);
+    },
+  });
+}
+
+const chalk = makeChalk([]);
+export default chalk;

package/compiler/component-processor.js

@@ -1,4 +1,5 @@
-import { JSDOM } from "jsdom";
+import path from "path";
+import { parseHTML } from "linkedom";
 import { protectCurlyBraces } from "../utils.js";
 import { genRandomId, incrementAlfabet, throwError, deterministicHash } from "./utils.js";
 import {
@@ -12,7 +13,7 @@ import chalk from "./chalk.js";
 
 
 class ProcessContext {
-  constructor(loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry) {
+  constructor(loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry, csrClasses) {
     this.loadedComponents = loadedComponents;
     this.runtimeChunks = runtimeChunks;
     this.compIdColl = compIdColl;
@@ -22,9 +23,112 @@ class ProcessContext {
     this.cssScopesMap = cssScopesMap;
     this.scopedStyles = scopedStyles;
     this.staticCtxRegistry = staticCtxRegistry;
+    this.csrClasses = csrClasses;
   }
 }
 
+function escapeForTemplateLiteral(str) {
+  return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\${/g, "\\${");
+}
+
+function parseFragment(html, doc) {
+  const fragment = doc.createDocumentFragment();
+  const temp = doc.createElement("div");
+  temp.innerHTML = html;
+  const children = [...temp.childNodes];
+  for (const child of children) {
+    fragment.appendChild(child);
+  }
+  return fragment;
+}
+
+function generateCSRClass(compName, cx, explicitClassName) {
+  if (cx.csrClasses.has(compName)) return;
+
+  let instance = cx.loadedComponents.get(compName);
+  if (!instance) return;
+
+  instance = protectCurlyBraces(instance);
+  const dom = parseHTML(instance);
+  const doc = dom.document;
+  const script = doc.querySelector("script")?.innerHTML;
+  const template = doc.querySelector("template")?.innerHTML;
+  const styles = doc.querySelector("style")?.innerHTML;
+
+  if (!template) return;
+
+  const compProps = extractPropsDefaults(script);
+  const topFuncSrc = extractTopLevelFunctions(script || "", RUNTIME_KW);
+  let runtime = extractRuntime(script || "", compName);
+
+  if (!cx.cssScopesMap.has(compName)) {
+    cx.cssScopesMap.set(compName, deterministicHash(compName, 8));
+  }
+  const cssId = cx.cssScopesMap.get(compName);
+
+  if (styles) {
+    cx.scopedStyles.push(scopeCss(styles, cssId));
+  }
+
+  const childMappings = [];
+  const bindVarNames = new Set();
+  const templateDoc = parseFragment(template, doc);
+  const seenTags = new Set();
+  for (const el of templateDoc.querySelectorAll("*")) {
+    const tag = el.tagName.toLowerCase();
+    if (!seenTags.has(tag)) {
+      seenTags.add(tag);
+      const childCompName = tag + ".html";
+      if (cx.loadedComponents.has(childCompName)) {
+        generateCSRClass(childCompName, cx);
+        const childClassName = childCompName.replace(".html", "").replace(/^\w/, c => c.toUpperCase());
+        childMappings.push({ tag, compClass: childClassName });
+      }
+    }
+    for (const attr of el.attributes) {
+      if (attr.name.startsWith("bind:")) {
+        bindVarNames.add(attr.value);
+      }
+    }
+  }
+
+  let csrRuntimeSource = null;
+  if (runtime) {
+    let injectCode = "";
+    for (const { name, defaultValue } of compProps) {
+      if (defaultValue !== undefined) {
+        injectCode += `let ${name} = ctx.${name}??${defaultValue};\n`;
+      } else {
+        injectCode += `let ${name} = ctx.${name};\n`;
+      }
+    }
+    for (const varName of bindVarNames) {
+      if (varName !== "self") {
+        injectCode += `let ${varName} = ctx.${varName};\n`;
+      }
+    }
+    if (topFuncSrc.length > 0) {
+      injectCode += "\n" + topFuncSrc.join("\n\n") + "\n";
+    }
+    runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
+    runtime = runtime.replace(`${RUNTIME_KW}()`, `function(self, ctx)`);
+    csrRuntimeSource = runtime.replace(/^(async\s+)?function\s+\w+/, "$1function");
+  }
+
+  const className = explicitClassName || compName.replace(".html", "").replace(/^\w/, c => c.toUpperCase());
+  const propsObj = {};
+  for (const { name, defaultValue } of compProps) {
+    propsObj[name] = defaultValue !== undefined ? defaultValue : null;
+  }
+
+  const childrenPart = childMappings.length > 0
+    ? ",\n      children: [" + childMappings.map(m => `{tag:"${m.tag}",compClass:${m.compClass}}`).join(",") + "]"
+    : "";
+  const runtimePart = csrRuntimeSource ? `,\n      runtime: ${csrRuntimeSource}` : "";
+  const classDef = `class ${className} extends ChocolaComponent {\n  constructor() {\n    super({\n      template: \`${escapeForTemplateLiteral(template)}\`,\n      hash: "${cssId}",\n      props: ${JSON.stringify(propsObj)}${runtimePart}${childrenPart}\n    });\n  }\n}`;
+  cx.csrClasses.set(compName, classDef);
+}
+
 
 
 export function processComponentElement(
@@ -42,8 +146,8 @@ export function processComponentElement(
   if (renderChain && renderChain.includes(compName)) return false;
 
   instance = protectCurlyBraces(instance);
-  const dom = new JSDOM(instance);
-  const doc = dom.window.document;
+  const dom = parseHTML(instance);
+  const doc = dom.document;
   let script = doc.querySelector("script")?.innerHTML;
   let template = doc.querySelector("template")?.innerHTML;
   let styles = doc.querySelector("style")?.innerHTML;
@@ -53,6 +157,17 @@ export function processComponentElement(
     return false;
   }
 
+  if (script) {
+    const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
+    script = script.replace(importRegex, (_, importedName, importPath) => {
+      const importedCompName = path.basename(importPath).toLowerCase();
+      if (cx.loadedComponents.has(importedCompName)) {
+        generateCSRClass(importedCompName, cx, importedName);
+      }
+      return "";
+    });
+  }
+
   const compProps = extractPropsDefaults(script);
 
   let ctx;
@@ -91,9 +206,9 @@ export function processComponentElement(
     get(target, key) { return target[key]; }
   });
 
-  const fragment = JSDOM.fragment(template);
+  const fragment = parseFragment(template, doc);
 
-  const slotFragment = JSDOM.fragment(elInnerHtml);
+  const slotFragment = parseFragment(elInnerHtml, doc);
   if (sourceFile) {
     validateChainStructure(slotFragment, sourceFile, sourceContent, elInnerHtml);
   }
@@ -188,19 +303,28 @@ export function processComponentElement(
         return;
       }
 
-      attribute.value = attribute.value.replace(
-        /\{([^}]+)\}/g,
-        (_, expr) => {
-          try {
-            return compileExpression(expr, true)(ctxProxy);
-          } catch {
-            return "";
+      child.setAttribute(
+        attribute.name,
+        attribute.value.replace(
+          /\{([^}]+)\}/g,
+          (_, expr) => {
+            try {
+              return compileExpression(expr, true)(ctxProxy);
+            } catch {
+              return "";
+            }
           }
-        }
+        )
       );
     });
 
-    processComponentElement(
+    const condAttrs = {};
+    if (hasIf) condAttrs["if"] = child.getAttribute("if");
+    if (hasDelIf) condAttrs["mount:if"] = getDelIfAttr(child);
+    if (hasElif) condAttrs["elif"] = child.getAttribute("elif");
+    if (hasElse) condAttrs["else"] = "";
+
+    const processed = processComponentElement(
       child,
       cx,
       renderChain.concat(compName),
@@ -208,11 +332,20 @@ export function processComponentElement(
       template
     );
 
-    applyConditionalToElement(child, ctxProxy, condChain, hasIf, hasDelIf, hasElif, hasElse);
+    let condTarget = child;
+    if (processed && processed.nodeType === 1) {
+      condTarget = processed;
+      for (const [name, value] of Object.entries(condAttrs)) {
+        condTarget.setAttribute(name, value);
+      }
+    }
+
+    applyConditionalToElement(condTarget, ctxProxy, condChain, hasIf, hasDelIf, hasElif, hasElse);
 
-    interpolateNode(child, ctxProxy)
+    interpolateNode(condTarget, ctxProxy)
   });
 
+  let csrRuntimeSource = null;
   const firstChild = fragment.children[0];
 
   if (firstChild && firstChild.nodeType === 1) {
@@ -233,14 +366,14 @@ export function processComponentElement(
       const ctxDefParts = [];
       const declared = new Set();
       for (const [key, value] of Object.entries(runtimeCtx)) {
-        ctxDefParts.push(`let ${key} = ctx.${key}||${JSON.stringify(value)};\n`);
+        ctxDefParts.push(`let ${key} = ctx.${key}??${JSON.stringify(value)};\n`);
         declared.add(key);
       }
 
       for (const { name, defaultValue } of compProps) {
         if (declared.has(name)) continue;
         if (defaultValue !== undefined) {
-          ctxDefParts.push(`let ${name} = ctx.${name}||${defaultValue};\n`);
+          ctxDefParts.push(`let ${name} = ctx.${name}??${defaultValue};\n`);
         } else {
           ctxDefParts.push(`let ${name} = ctx.${name};\n`);
         }
@@ -272,6 +405,7 @@ export function processComponentElement(
           runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
 
           runtime = runtime.replace(`${RUNTIME_KW}()`, `${letter}r(self, ctx)`);
+          csrRuntimeSource = runtime.replace(/^function\s+\w+/, "function");
           cx.runtimeChunks.push(runtime);
           cx.runtimeMap && cx.runtimeMap.set(compName, { letter });
         } else {
@@ -296,15 +430,38 @@ export function processComponentElement(
     cx.scopedStyles.push(styles);
   }
 
+  if (csrRuntimeSource && !cx.csrClasses.has(compName)) {
+    generateCSRClass(compName, cx);
+  }
+
+  if (element.style.display === "none" && firstChild && firstChild.nodeType === 1) {
+    firstChild.style.display = "none";
+  }
+
   element.replaceWith(fragment);
-  return true;
+  return firstChild && firstChild.nodeType === 1 ? firstChild : true;
 }
 
 export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent) {
   const cx = new ProcessContext(
-    loadedComponents, [], [], { value: null }, new Map(), [], new Map(), [], new Map()
+    loadedComponents, [], [], { value: null }, new Map(), [], new Map(), [], new Map(), new Map()
   );
 
+  for (const [compName, instance] of cx.loadedComponents) {
+    const script = instance.match(/<script>([\s\S]*?)<\/script>/i);
+    if (script) {
+      const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
+      let match;
+      while ((match = importRegex.exec(script[1])) !== null) {
+        const importedName = match[1];
+        const importedCompName = path.basename(match[2]).toLowerCase();
+        if (cx.loadedComponents.has(importedCompName)) {
+          generateCSRClass(importedCompName, cx, importedName);
+        }
+      }
+    }
+  }
+
   appElements.forEach(el => {
     if (!el.isConnected) return;
     processComponentElement(el, cx, [], pageSourceFile, pageSourceContent);
@@ -312,13 +469,14 @@ export function processAllComponents(appElements, loadedComponents, pageSourceFi
   const runtimeScript = cx.runtimeChunks.join("\n");
   const hasComponents = cx.runtimeChunks.length > 0;
   const scopesCss = cx.scopedStyles.join("\n");
+  const csrClasses = [...cx.csrClasses.values()].join("\n\n");
 
   const hashMap = {};
   for (const [compName, hash] of cx.cssScopesMap) {
     hashMap[compName] = hash;
   }
 
-  return { runtimeScript, hasComponents, scopesCss, hashMap };
+  return { runtimeScript, hasComponents, scopesCss, hashMap, csrClasses };
 }
 
 function getNextLetter(letterState) {

package/compiler/dom-processor.js

@@ -1,4 +1,4 @@
-import { JSDOM } from "jsdom";
+import { parseHTML } from "linkedom";
 import { promises as fs } from "fs";
 import path from "path";
 import { protectCurlyBraces, restoreCurlyBraces } from "../utils.js";
@@ -7,7 +7,7 @@ import { throwError } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
 export function createDOM(srcIndexContent) {
-  return new JSDOM(protectCurlyBraces(srcIndexContent));
+  return parseHTML(protectCurlyBraces(srcIndexContent));
 }
 
 export function validateAppContainer(doc) {
@@ -23,7 +23,7 @@ export function getAppElements(appContainer) {
 }
 
 export async function serializeDOM(dom) {
-  return restoreCurlyBraces(dom.serialize());
+  return restoreCurlyBraces(dom.document.toString());
 }
 
 export async function writeHTMLOutput(html, outDirPath) {
@@ -54,7 +54,6 @@ export function getScriptElements(doc) {
 
 export function appendRuntimeScript(doc, filename) {
   const runtimeScriptEl = doc.createElement("script");
-  runtimeScriptEl.type = "module";
   runtimeScriptEl.src = "./" + filename;
   doc.body.appendChild(runtimeScriptEl);
 }

package/compiler/index.js

@@ -26,48 +26,42 @@ import {
   processScript,
   processStylesheet,
 } from "./pipeline.js";
+import { text } from "stream/consumers";
 
-
-const logSeparation = chalk.yellow(`
-________________________________________________________________________
-========================================================================
-        `);
+const GOLD_COLOR = "#D87416";
+const WHITE_COLOR = "#FAFAF8";
+const TEXT_FAINT = "#E7EBE1";
 
 function logBanner() {
-  console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
-  console.log(logSeparation);
   console.log(
-    chalk.hex("#945e33")(`
-
-
-     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
-     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
-     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
-     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
-     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
-     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
-     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
-     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
-     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
-     ░                         ░                                  
-
-
-        `)
+    chalk.hex(GOLD_COLOR)(`
+   ┌─────────────────────────────────────────────┐
+   │┌-------------------------------------------┐│
+   ││                                           ││`)
+  );
+  console.log(
+    chalk.hex(GOLD_COLOR)(`   ││            `) +
+    chalk.bold.hex(WHITE_COLOR)(`{`) +
+    chalk.bold.hex(GOLD_COLOR)(`  C H O C O L A  `) +
+    chalk.bold.hex(WHITE_COLOR)(`}`) +
+    chalk.hex(GOLD_COLOR)(`            ││\n`) +
+    chalk.hex(GOLD_COLOR)(`   ││                                           ││
+   ││     `) +
+   chalk.hex(TEXT_FAINT)(`THE SWEETEST WAY TO BUILD THE WEB`) +
+   chalk.hex(GOLD_COLOR)(`     ││
+   ││                                           ││
+   │└-------------------------------------------┘│
+   └─────────────────────────────────────────────┘
+   `)
   );
 }
 
 function logSuccess(outDirPath) {
-  console.log(`
-              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
-              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
-            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
-                                                
-        `);
   console.log(
     chalk.bold.green(">"),
     "Project bundled succesfully at",
-    chalk.green.underline(outDirPath) + "\n\n"
-  );
+    chalk.green.underline(outDirPath));
+    console.log(chalk.bold.green(`\nJOB DONE!\n`));
 }
 
 async function setupOutputDirectory(outDirPath, emptyOutDir) {
@@ -81,9 +75,8 @@ async function loadAndDisplayComponents(srcComponentsPath) {
   const foundComponents = await getComponents(srcComponentsPath);
   const { loadedComponents, notDefComps: emptyComps, componentsLib } = foundComponents;
 
-  console.log(`       LOADING COMPONENTS`);
   console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
-  console.log("   ", componentsLib, "\n");
+  console.log("   ", componentsLib, "\n\n");
 
   if (emptyComps?.length > 0) {
     console.warn(chalk.bold.yellow("WARNING!"), "The following component files are empty:");
@@ -139,7 +132,7 @@ function processPageConditionals(parent) {
       if (result) {
         chainRendered = true;
       } else {
-        child.remove();
+        child.style.display = "none";
         chainRendered = false;
       }
       child.removeAttribute("if");
@@ -188,7 +181,6 @@ export default async function compile(rootDir, buildConfig) {
 
   const config = await loadConfig(rootDir);
   const paths = resolvePaths(rootDir, config);
-  !isHotReload && console.log(logSeparation);
 
   await setupOutputDirectory(paths.outDir, config.emptyOutDir);
 
@@ -197,20 +189,18 @@ export default async function compile(rootDir, buildConfig) {
   const pageSourcePath = indexFiles.srcPath;
 
   const loadedComponents = await loadAndDisplayComponents(paths.components);
-  !isHotReload && console.log(logSeparation);
-  !isHotReload && console.log(`       BUNDLING STATIC BUILD`);
-  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir) + "\n");
-  !isHotReload && console.log(logSeparation);
+  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir));
 
   const dom = createDOM(srcIndexContent);
-  const doc = dom.window.document;
+  const doc = dom.document;
   const appContainer = validateAppContainer(doc);
 
   processPageConditionals(appContainer);
 
   const appElements = getAppElements(appContainer);
-  const { runtimeScript, scopesCss, hashMap } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
-  const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
+  const { runtimeScript, scopesCss, hashMap, csrClasses } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
+  const csrSource = await fs.readFile(new URL("../runtime/index.js", import.meta.url), "utf-8");
+  const runtimeFilenames = await generateRuntimeScript(runtimeScript, paths.outDir, csrSource, csrClasses);
   await processAssets(doc, rootDir, config.srcDir, paths.outDir);
 
   if (scopesCss) {
@@ -219,7 +209,9 @@ export default async function compile(rootDir, buildConfig) {
     appendStylesheetLink(doc, fileName);
   };
 
-  appendRuntimeScript(doc, runtimeFilename);
+  for (const name of runtimeFilenames) {
+    appendRuntimeScript(doc, name);
+  }
   const html = await serializeDOM(dom);
   await writeHTMLOutput(html, paths.outDir);
 

package/compiler/runtime-generator.js

@@ -2,12 +2,29 @@ import { promises as fs } from "fs";
 import path from "path";
 import { genRandomId } from "./utils.js";
 
-export async function generateRuntimeScript(runtimeScript, outDirPath) {
+export async function generateRuntimeScript(runtimeScript, outDirPath, csrSource, csrClasses) {
   const fileIds = [];
-  const runtimeFilename = "run-" + genRandomId(fileIds, 6) + ".js";
-  const runtimeFileContents = `document.addEventListener("DOMContentLoaded", () => {${runtimeScript}})`;
+  const filenames = [];
 
-  await fs.writeFile(path.join(outDirPath, runtimeFilename), runtimeFileContents);
+  if (csrSource) {
+    const name = "run-" + genRandomId(fileIds, 6) + ".js";
+    const source = csrSource.replace(/^export\s+\{?\s*[^}]+\s*}?\s*;?\s*$/m, "");
+    await fs.writeFile(path.join(outDirPath, name), source);
+    filenames.push(name);
+  }
 
-  return runtimeFilename;
+  if (csrClasses) {
+    const name = "run-" + genRandomId(fileIds, 6) + ".js";
+    await fs.writeFile(path.join(outDirPath, name), csrClasses);
+    filenames.push(name);
+  }
+
+  if (runtimeScript) {
+    const name = "run-" + genRandomId(fileIds, 6) + ".js";
+    const content = `document.addEventListener("DOMContentLoaded", () => {${runtimeScript}})`;
+    await fs.writeFile(path.join(outDirPath, name), content);
+    filenames.push(name);
+  }
+
+  return filenames;
 }