@lightspeed-js/core 0.3.2 → 0.4.1

package/dist/compile.js

@@ -188,12 +188,14 @@ function emitMountPlaceholders(template, componentRegistry, depth = 0) {
   let result = template;
   result = result.replace(/<([A-Z][a-zA-Z0-9]*)((?:\s+[^>]*?)?)\s*\/>/g, (_match, name, attributes) => {
     warnUnknown(name);
-    return buildPlaceholder(name, attributes || "", "", componentRegistry?.[name.toLowerCase()]?.needs);
+    const entry = componentRegistry?.[name.toLowerCase()];
+    return buildPlaceholder(entry?.id ?? name, attributes || "", "", entry?.needs);
   });
   result = result.replace(/<([A-Z][a-zA-Z0-9]*)((?:\s+[^>]*?)?)\s*>([\s\S]*?)<\/\1\s*>/g, (_match, name, attributes, content) => {
     warnUnknown(name);
     const inner = emitMountPlaceholders(content, componentRegistry, depth + 1);
-    return buildPlaceholder(name, attributes || "", inner, componentRegistry?.[name.toLowerCase()]?.needs);
+    const entry = componentRegistry?.[name.toLowerCase()];
+    return buildPlaceholder(entry?.id ?? name, attributes || "", inner, entry?.needs);
   });
   return result;
 }

package/dist/index.js

@@ -1330,7 +1330,11 @@ class Mounter {
     };
     if (adopt) {
       const adopted = [];
-      if (this.adoptNodes(Array.from(fragment.childNodes), adopt, context, adopted)) {
+      if (!parent)
+        context.rootSlots = groupSlotFills(slotNodes);
+      const adoptedAll = this.adoptNodes(Array.from(fragment.childNodes), adopt, context, adopted);
+      delete context.rootSlots;
+      if (adoptedAll) {
         for (const marker of adopted) {
           await this.mountMarker(marker, instance, context);
         }
@@ -1588,9 +1592,15 @@ class Mounter {
             d = found.length;
             continue;
           }
+          const name = found[d].data.slice(SLOT_MARK.length);
+          const region = [];
+          d++;
           while (d < found.length && !isSlotEnd(found[d]))
-            d++;
+            region.push(found[d++]);
           d++;
+          if (context.rootSlots && !this.adoptNodes(context.rootSlots.get(name) ?? [], region, context, markers)) {
+            return false;
+          }
           continue;
         }
         const target = found[d++];
@@ -3031,7 +3041,13 @@ function createLightspeedApp(options) {
   return new LightspeedRuntime(options);
 }
 function serializeNodes(nodes) {
-  return nodes.map((node) => node.nodeType === 1 ? node.outerHTML : node.textContent ?? "").join("");
+  const document2 = nodes[0]?.ownerDocument;
+  if (!document2)
+    return "";
+  const template = document2.createElement("template");
+  for (const node of nodes)
+    template.content.appendChild(node.cloneNode(true));
+  return template.innerHTML;
 }
 // src/runtime/helpers.ts
 function reactive(target) {

package/dist/ssg.js

@@ -1353,7 +1353,11 @@ class Mounter {
     };
     if (adopt) {
       const adopted = [];
-      if (this.adoptNodes(Array.from(fragment.childNodes), adopt, context, adopted)) {
+      if (!parent)
+        context.rootSlots = groupSlotFills(slotNodes);
+      const adoptedAll = this.adoptNodes(Array.from(fragment.childNodes), adopt, context, adopted);
+      delete context.rootSlots;
+      if (adoptedAll) {
         for (const marker of adopted) {
           await this.mountMarker(marker, instance, context);
         }
@@ -1611,9 +1615,15 @@ class Mounter {
             d = found.length;
             continue;
           }
+          const name = found[d].data.slice(SLOT_MARK.length);
+          const region = [];
+          d++;
           while (d < found.length && !isSlotEnd(found[d]))
-            d++;
+            region.push(found[d++]);
           d++;
+          if (context.rootSlots && !this.adoptNodes(context.rootSlots.get(name) ?? [], region, context, markers)) {
+            return false;
+          }
           continue;
         }
         const target = found[d++];
@@ -3136,7 +3146,13 @@ class LightspeedRuntime {
   }
 }
 function serializeNodes(nodes) {
-  return nodes.map((node) => node.nodeType === 1 ? node.outerHTML : node.textContent ?? "").join("");
+  const document2 = nodes[0]?.ownerDocument;
+  if (!document2)
+    return "";
+  const template = document2.createElement("template");
+  for (const node of nodes)
+    template.content.appendChild(node.cloneNode(true));
+  return template.innerHTML;
 }
 
 // src/ssg/render.ts
@@ -3434,13 +3450,11 @@ function allComments(document2) {
   return comments;
 }
 function serialiseBetween(start, end) {
-  let html = "";
-  let current = start.nextSibling;
-  while (current && current !== end) {
-    html += current.nodeType === 1 ? current.outerHTML : current.textContent ?? "";
-    current = current.nextSibling;
+  const template = start.ownerDocument.createElement("template");
+  for (let current = start.nextSibling;current && current !== end; current = current.nextSibling) {
+    template.content.appendChild(current.cloneNode(true));
   }
-  return html;
+  return template.innerHTML;
 }
 // src/compile/expressions.ts
 function expressionKey(expr, params) {
@@ -3601,22 +3615,24 @@ function addMarkerBinds(payload, params, add) {
 }
 
 // src/project/component-ids.ts
-function componentIdOf(file) {
+function componentIdOf(file, prefix = "") {
   const name = file.split(/[\\/]/).pop() ?? file;
-  return name.replace(/\.lsp$/, "").toLowerCase();
+  return (prefix + name.replace(/\.lsp$/, "")).toLowerCase();
 }
 function resolveComponentIds(found, declaredOverrides = []) {
   const declared = new Set(declaredOverrides.map((id) => id.toLowerCase()));
   const files = new Map;
   const rootOf = new Map;
-  const result = { files, overrides: [], conflicts: [], unusedOverrides: [] };
+  const roots = new Map;
+  const result = { files, overrides: [], conflicts: [], unusedOverrides: [], roots };
   const used = new Set;
-  for (const { file, root } of found) {
-    const id = componentIdOf(file);
+  for (const { file, root, prefix = "" } of found) {
+    const id = componentIdOf(file, prefix);
     const kept = files.get(id);
     if (kept === undefined) {
       files.set(id, file);
       rootOf.set(id, root);
+      roots.set(id, { root, prefix });
       continue;
     }
     if (rootOf.get(id) === root) {
@@ -3643,7 +3659,7 @@ function describeConflict(conflict, rel) {
 // src/project/components.ts
 import { readFile, readdir } from "fs/promises";
 import { createRequire as createRequire2 } from "node:module";
-import { dirname as dirname2, join, relative as relative2, resolve as resolve2 } from "path";
+import { dirname as dirname2, join, relative as relative2, resolve as resolve2, sep } from "path";
 
 // src/specifiers.ts
 var PACKAGE_NAME = "@lightspeed-js/core";
@@ -4292,12 +4308,14 @@ function emitMountPlaceholders(template, componentRegistry, depth = 0) {
   let result = template;
   result = result.replace(/<([A-Z][a-zA-Z0-9]*)((?:\s+[^>]*?)?)\s*\/>/g, (_match, name, attributes) => {
     warnUnknown(name);
-    return buildPlaceholder(name, attributes || "", "", componentRegistry?.[name.toLowerCase()]?.needs);
+    const entry = componentRegistry?.[name.toLowerCase()];
+    return buildPlaceholder(entry?.id ?? name, attributes || "", "", entry?.needs);
   });
   result = result.replace(/<([A-Z][a-zA-Z0-9]*)((?:\s+[^>]*?)?)\s*>([\s\S]*?)<\/\1\s*>/g, (_match, name, attributes, content) => {
     warnUnknown(name);
     const inner = emitMountPlaceholders(content, componentRegistry, depth + 1);
-    return buildPlaceholder(name, attributes || "", inner, componentRegistry?.[name.toLowerCase()]?.needs);
+    const entry = componentRegistry?.[name.toLowerCase()];
+    return buildPlaceholder(entry?.id ?? name, attributes || "", inner, entry?.needs);
   });
   return result;
 }
@@ -4406,18 +4424,43 @@ function createComponentProject(options) {
   const announced = new Set;
   let rebuilding = null;
   const projectModules = new Map;
-  function roots() {
+  function rootSpecs() {
     const root = rootOf();
-    return [resolve2(root, "src"), ...extraComponentDirs.map((dir) => resolve2(root, dir))];
+    return [
+      { dir: resolve2(root, "src"), prefix: "" },
+      ...extraComponentDirs.map((entry) => typeof entry === "string" ? { dir: resolve2(root, entry), prefix: "" } : { dir: resolve2(root, entry.dir), prefix: entry.prefix ?? "" })
+    ];
+  }
+  function roots() {
+    return rootSpecs().map((spec) => spec.dir);
   }
   async function findComponentFiles() {
+    const specs = rootSpecs();
     const found = [];
-    for (const dir of roots()) {
-      for (const file of await findLspFiles(dir))
-        found.push({ file, root: dir });
+    for (const spec of specs) {
+      const nested = new Set(specs.map((s) => s.dir).filter((d) => d !== spec.dir && d.startsWith(spec.dir + sep)));
+      for (const file of await findLspFiles(spec.dir, nested)) {
+        found.push({ file, root: spec.dir, ...spec.prefix ? { prefix: spec.prefix } : {} });
+      }
     }
     return found;
   }
+  let rootOfId = new Map;
+  function registryFor(id) {
+    const all = Object.fromEntries(registry);
+    const home = rootOfId.get(id);
+    if (!home?.prefix)
+      return all;
+    for (const [sibling, where] of rootOfId) {
+      if (where.root !== home.root)
+        continue;
+      const local = sibling.slice(home.prefix.length);
+      const entry = registry.get(sibling);
+      if (local && entry)
+        all[local] = { ...entry, id: sibling };
+    }
+    return all;
+  }
   function announce(ids) {
     const rel = (file) => relative2(rootOf(), file);
     for (const conflict of ids.conflicts) {
@@ -4443,6 +4486,7 @@ function createComponentProject(options) {
       const nextFiles = new Map;
       try {
         const ids = resolveComponentIds(await findComponentFiles(), declaredOverrides);
+        rootOfId = ids.roots;
         conflicts = ids.conflicts;
         announce(ids);
         for (const [componentId, filePath] of ids.files) {
@@ -4507,9 +4551,9 @@ function createComponentProject(options) {
   }
   async function definitions() {
     await rebuild();
-    const registryObj = Object.fromEntries(registry);
     const out = [];
     for (const [componentId, raw] of registry) {
+      const registryObj = registryFor(componentId);
       const scopeId = scopeIdFor(componentId);
       const source = raw.logic?.trim() ? await compileLogic2(raw.logic) : "";
       const setup = await buildSetup(source, {
@@ -4545,6 +4589,7 @@ function createComponentProject(options) {
       return conflicts;
     },
     roots,
+    registryFor,
     rebuild,
     definitions,
     compileMarkup: (html, id = "index") => transformTemplate(html, id, Object.fromEntries(registry)),
@@ -4560,14 +4605,15 @@ function withSharedStyles(parsed, watch) {
       watch(file);
   return inlineStyleSources(parsed, nodeStyleReader());
 }
-async function findLspFiles(dir) {
+async function findLspFiles(dir, skip = new Set) {
   const found = [];
   try {
     const entries = (await readdir(dir, { withFileTypes: true })).sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
     for (const entry of entries) {
       const fullPath = join(dir, entry.name);
       if (entry.isDirectory()) {
-        found.push(...await findLspFiles(fullPath));
+        if (!skip.has(fullPath))
+          found.push(...await findLspFiles(fullPath, skip));
       } else if (entry.isFile() && entry.name.endsWith(".lsp")) {
         found.push(fullPath);
       }

package/dist/types/src/parser/template.d.ts

@@ -5,6 +5,12 @@ interface ComponentRegistry {
         logic: string;
         /** Cell keys the component itself declared - see `LSPComponent.needs`. */
         needs?: string[];
+        /**
+         * The id the component registers under, when the tag is a local name for
+         * it: inside a prefixed component root, a sibling's unprefixed name
+         * (ADR-061). Absent, the tag lowercased is the id.
+         */
+        id?: string;
     };
 }
 /**

package/dist/types/src/project/component-ids.d.ts

@@ -15,6 +15,8 @@ export interface FoundComponent {
     file: string;
     /** The component root it was found under. */
     root: string;
+    /** The root's prefix (ADR-061): its components register as prefix + name. */
+    prefix?: string;
 }
 export type Conflict = {
     kind: "same-root";
@@ -39,8 +41,14 @@ export interface ComponentIds {
     conflicts: Conflict[];
     /** Names in `overrides` that replace nothing - left over after a rename or removal. */
     unusedOverrides: string[];
+    /** Component id to the root it came from, and that root's prefix. */
+    roots: Map<string, {
+        root: string;
+        prefix: string;
+    }>;
 }
-export declare function componentIdOf(file: string): string;
+/** A component's id: its root's prefix and its filename, lowercased (`Slv` + `Icon.lsp` → `slvicon`). */
+export declare function componentIdOf(file: string, prefix?: string): string;
 /** `found` must be in precedence order: every file of the first root, then the next. */
 export declare function resolveComponentIds(found: FoundComponent[], declaredOverrides?: readonly string[]): ComponentIds;
 /** One message per conflict, each ending in the change that fixes it (ADR-055). */

package/dist/types/src/project/components.d.ts

@@ -11,11 +11,21 @@ import { parseLSP } from "../parser/index.js";
 import type { ComponentDefinition } from "../runtime/components/index.js";
 import { type Conflict } from "./component-ids.js";
 export type Compiler = "esbuild" | "tsc" | "swc";
+/** A component root: a folder, or a folder with a prefix (ADR-061). */
+export type ComponentDir = string | {
+    dir: string;
+    prefix?: string;
+};
+export declare const componentDirPath: (entry: ComponentDir) => string;
 export interface ComponentProjectOptions {
     /** The project root. A function when it is only known later (Vite's configResolved). */
     root: string | (() => string);
-    /** Roots beyond the project's own `src`, relative to the root. */
-    componentDirs?: string[];
+    /**
+     * Roots beyond the project's own `src`, relative to the root. An entry with
+     * a `prefix` registers its components as prefix + name (ADR-061), and may
+     * be a folder inside `src`, which then belongs to it rather than to `src`.
+     */
+    componentDirs?: ComponentDir[];
     /** Names the app replaces on purpose (ADR-058). */
     overrides?: string[];
     /** For component logic at build time. */
@@ -39,6 +49,10 @@ export interface ComponentProject {
     readonly conflicts: Conflict[];
     /** Every root components come from, in precedence order: `src` first. */
     roots(): string[];
+    /** The registry as `id`'s template sees it: with its root's siblings under their local names (ADR-061). */
+    registryFor(id: string): Record<string, RegistryEntry & {
+        id?: string;
+    }>;
     /** Rescan the roots. Concurrent callers share one rescan. */
     rebuild(): Promise<void>;
     /** Compile every component, as the client's modules do, for build-time rendering. */

package/dist/types/src/ssg/fragment.d.ts

@@ -13,12 +13,12 @@
  * `app.hydrate(container)` on the element it put the fragment in.
  */
 import type { TemplateExpression } from "../compile/expressions.js";
-import type { ComponentProject, Compiler } from "../project/components.js";
+import type { ComponentDir, ComponentProject, Compiler } from "../project/components.js";
 export interface FragmentRendererOptions {
     /** The project root: components are found in its `src`, then `componentDirs`. */
     root: string;
-    /** Further component roots, relative to the root - as `lightspeedPlugin`'s. */
-    componentDirs?: string[];
+    /** Further component roots, relative to the root - as `lightspeedPlugin`'s, prefixes included. */
+    componentDirs?: ComponentDir[];
     /** Names the app replaces on purpose (ADR-058). */
     overrides?: string[];
     compiler?: Compiler;

package/dist/types/src/vite/plugin.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "vite";
+import { type ComponentDir } from "../project/components.js";
 interface LightspeedPluginOptions {
     typescript?: boolean;
     /**
@@ -62,8 +63,13 @@ interface LightspeedPluginOptions {
      * wherever it was found. The project's own `src` is searched first and wins,
      * so an app can replace a package's component by giving a file the same
      * name - once it says so in `overrides` (ADR-058).
+     *
+     * `{ dir, prefix }` namespaces a root (ADR-061): its components register as
+     * prefix + name (`{ dir: 'node_modules/ui', prefix: 'Ui' }` makes its
+     * `Button.lsp` `<UiButton>`), and inside it a sibling's plain name still
+     * finds the sibling. A prefixed folder inside `src` belongs to its entry.
      */
-    componentDirs?: string[];
+    componentDirs?: ComponentDir[];
     /**
      * Component names the app replaces on purpose: a file in `src` (or an
      * earlier root) with the same name as one in a later `componentDirs` root.

package/dist/types/test/component-prefix.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/test/eager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vite.js

@@ -18,22 +18,24 @@ var __toESM = (mod, isNodeMode, target) => {
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/project/component-ids.ts
-function componentIdOf(file) {
+function componentIdOf(file, prefix = "") {
   const name = file.split(/[\\/]/).pop() ?? file;
-  return name.replace(/\.lsp$/, "").toLowerCase();
+  return (prefix + name.replace(/\.lsp$/, "")).toLowerCase();
 }
 function resolveComponentIds(found, declaredOverrides = []) {
   const declared = new Set(declaredOverrides.map((id) => id.toLowerCase()));
   const files = new Map;
   const rootOf = new Map;
-  const result = { files, overrides: [], conflicts: [], unusedOverrides: [] };
+  const roots = new Map;
+  const result = { files, overrides: [], conflicts: [], unusedOverrides: [], roots };
   const used = new Set;
-  for (const { file, root } of found) {
-    const id = componentIdOf(file);
+  for (const { file, root, prefix = "" } of found) {
+    const id = componentIdOf(file, prefix);
     const kept = files.get(id);
     if (kept === undefined) {
       files.set(id, file);
       rootOf.set(id, root);
+      roots.set(id, { root, prefix });
       continue;
     }
     if (rootOf.get(id) === root) {
@@ -60,7 +62,7 @@ function describeConflict(conflict, rel) {
 // src/project/components.ts
 import { readFile, readdir } from "fs/promises";
 import { createRequire as createRequire2 } from "node:module";
-import { dirname as dirname2, join, relative as relative2, resolve as resolve2 } from "path";
+import { dirname as dirname2, join, relative as relative2, resolve as resolve2, sep } from "path";
 
 // src/runtime/diagnostics.ts
 var PREFIX = "[lightspeed]";
@@ -782,7 +784,11 @@ class Mounter {
     };
     if (adopt) {
       const adopted = [];
-      if (this.adoptNodes(Array.from(fragment.childNodes), adopt, context, adopted)) {
+      if (!parent)
+        context.rootSlots = groupSlotFills(slotNodes);
+      const adoptedAll = this.adoptNodes(Array.from(fragment.childNodes), adopt, context, adopted);
+      delete context.rootSlots;
+      if (adoptedAll) {
         for (const marker of adopted) {
           await this.mountMarker(marker, instance, context);
         }
@@ -1040,9 +1046,15 @@ class Mounter {
             d = found.length;
             continue;
           }
+          const name = found[d].data.slice(SLOT_MARK.length);
+          const region = [];
+          d++;
           while (d < found.length && !isSlotEnd(found[d]))
-            d++;
+            region.push(found[d++]);
           d++;
+          if (context.rootSlots && !this.adoptNodes(context.rootSlots.get(name) ?? [], region, context, markers)) {
+            return false;
+          }
           continue;
         }
         const target = found[d++];
@@ -2556,12 +2568,14 @@ function emitMountPlaceholders(template, componentRegistry, depth = 0) {
   let result = template;
   result = result.replace(/<([A-Z][a-zA-Z0-9]*)((?:\s+[^>]*?)?)\s*\/>/g, (_match, name, attributes) => {
     warnUnknown(name);
-    return buildPlaceholder(name, attributes || "", "", componentRegistry?.[name.toLowerCase()]?.needs);
+    const entry = componentRegistry?.[name.toLowerCase()];
+    return buildPlaceholder(entry?.id ?? name, attributes || "", "", entry?.needs);
   });
   result = result.replace(/<([A-Z][a-zA-Z0-9]*)((?:\s+[^>]*?)?)\s*>([\s\S]*?)<\/\1\s*>/g, (_match, name, attributes, content) => {
     warnUnknown(name);
     const inner = emitMountPlaceholders(content, componentRegistry, depth + 1);
-    return buildPlaceholder(name, attributes || "", inner, componentRegistry?.[name.toLowerCase()]?.needs);
+    const entry = componentRegistry?.[name.toLowerCase()];
+    return buildPlaceholder(entry?.id ?? name, attributes || "", inner, entry?.needs);
   });
   return result;
 }
@@ -2659,6 +2673,7 @@ function splitAttributes(componentId, attrString) {
 }
 
 // src/project/components.ts
+var componentDirPath = (entry) => typeof entry === "string" ? entry : entry.dir;
 function createComponentProject(options) {
   const rootOf = () => typeof options.root === "function" ? options.root() : options.root;
   const extraComponentDirs = options.componentDirs ?? [];
@@ -2670,18 +2685,43 @@ function createComponentProject(options) {
   const announced = new Set;
   let rebuilding = null;
   const projectModules = new Map;
-  function roots() {
+  function rootSpecs() {
     const root = rootOf();
-    return [resolve2(root, "src"), ...extraComponentDirs.map((dir) => resolve2(root, dir))];
+    return [
+      { dir: resolve2(root, "src"), prefix: "" },
+      ...extraComponentDirs.map((entry) => typeof entry === "string" ? { dir: resolve2(root, entry), prefix: "" } : { dir: resolve2(root, entry.dir), prefix: entry.prefix ?? "" })
+    ];
+  }
+  function roots() {
+    return rootSpecs().map((spec) => spec.dir);
   }
   async function findComponentFiles() {
+    const specs = rootSpecs();
     const found = [];
-    for (const dir of roots()) {
-      for (const file of await findLspFiles(dir))
-        found.push({ file, root: dir });
+    for (const spec of specs) {
+      const nested = new Set(specs.map((s) => s.dir).filter((d) => d !== spec.dir && d.startsWith(spec.dir + sep)));
+      for (const file of await findLspFiles(spec.dir, nested)) {
+        found.push({ file, root: spec.dir, ...spec.prefix ? { prefix: spec.prefix } : {} });
+      }
     }
     return found;
   }
+  let rootOfId = new Map;
+  function registryFor(id) {
+    const all = Object.fromEntries(registry);
+    const home = rootOfId.get(id);
+    if (!home?.prefix)
+      return all;
+    for (const [sibling, where] of rootOfId) {
+      if (where.root !== home.root)
+        continue;
+      const local = sibling.slice(home.prefix.length);
+      const entry = registry.get(sibling);
+      if (local && entry)
+        all[local] = { ...entry, id: sibling };
+    }
+    return all;
+  }
   function announce(ids) {
     const rel = (file) => relative2(rootOf(), file);
     for (const conflict of ids.conflicts) {
@@ -2707,6 +2747,7 @@ function createComponentProject(options) {
       const nextFiles = new Map;
       try {
         const ids = resolveComponentIds(await findComponentFiles(), declaredOverrides);
+        rootOfId = ids.roots;
         conflicts = ids.conflicts;
         announce(ids);
         for (const [componentId, filePath] of ids.files) {
@@ -2771,9 +2812,9 @@ function createComponentProject(options) {
   }
   async function definitions() {
     await rebuild();
-    const registryObj = Object.fromEntries(registry);
     const out = [];
     for (const [componentId, raw] of registry) {
+      const registryObj = registryFor(componentId);
       const scopeId = scopeIdFor(componentId);
       const source = raw.logic?.trim() ? await compileLogic2(raw.logic) : "";
       const setup = await buildSetup(source, {
@@ -2809,6 +2850,7 @@ function createComponentProject(options) {
       return conflicts;
     },
     roots,
+    registryFor,
     rebuild,
     definitions,
     compileMarkup: (html, id = "index") => transformTemplate(html, id, Object.fromEntries(registry)),
@@ -2824,14 +2866,15 @@ function withSharedStyles(parsed, watch) {
       watch(file);
   return inlineStyleSources(parsed, nodeStyleReader());
 }
-async function findLspFiles(dir) {
+async function findLspFiles(dir, skip = new Set) {
   const found = [];
   try {
     const entries = (await readdir(dir, { withFileTypes: true })).sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
     for (const entry of entries) {
       const fullPath = join(dir, entry.name);
       if (entry.isDirectory()) {
-        found.push(...await findLspFiles(fullPath));
+        if (!skip.has(fullPath))
+          found.push(...await findLspFiles(fullPath, skip));
       } else if (entry.isFile() && entry.name.endsWith(".lsp")) {
         found.push(fullPath);
       }
@@ -4492,7 +4535,13 @@ class LightspeedRuntime {
   }
 }
 function serializeNodes(nodes) {
-  return nodes.map((node) => node.nodeType === 1 ? node.outerHTML : node.textContent ?? "").join("");
+  const document2 = nodes[0]?.ownerDocument;
+  if (!document2)
+    return "";
+  const template = document2.createElement("template");
+  for (const node of nodes)
+    template.content.appendChild(node.cloneNode(true));
+  return template.innerHTML;
 }
 
 // src/ssg/render.ts
@@ -4790,18 +4839,16 @@ function allComments(document2) {
   return comments;
 }
 function serialiseBetween(start, end) {
-  let html = "";
-  let current = start.nextSibling;
-  while (current && current !== end) {
-    html += current.nodeType === 1 ? current.outerHTML : current.textContent ?? "";
-    current = current.nextSibling;
+  const template = start.ownerDocument.createElement("template");
+  for (let current = start.nextSibling;current && current !== end; current = current.nextSibling) {
+    template.content.appendChild(current.cloneNode(true));
   }
-  return html;
+  return template.innerHTML;
 }
 
 // src/vite/layout.ts
 import { readFile as readFile2 } from "fs/promises";
-import { dirname as dirname3, join as join2, relative as relative3, resolve as resolve3, sep } from "path";
+import { dirname as dirname3, join as join2, relative as relative3, resolve as resolve3, sep as sep2 } from "path";
 
 // src/parser/layout.ts
 var DECLARATION2 = /<!--\s*lsp:layout\s+([^\s>][^>]*?)\s*-->/;
@@ -4903,7 +4950,7 @@ async function findLayout(name, from, root) {
       return { path: candidate, html: await readFile2(candidate, "utf-8") };
     } catch {
     }
-    if (dir === stop || !dir.startsWith(stop + sep))
+    if (dir === stop || !dir.startsWith(stop + sep2))
       return null;
     const parent = dirname3(dir);
     if (parent === dir)
@@ -5091,7 +5138,7 @@ function resolvedByHost(entry) {
 // src/vite/plugin.ts
 import { readFile as readFile3, readdir as readdir2, writeFile as writeFile2, mkdir as mkdir2, rm } from "fs/promises";
 import { existsSync } from "fs";
-import { basename, dirname as dirname5, isAbsolute, join as join4, relative as relative4, resolve as resolve4, sep as sep2 } from "path";
+import { basename, dirname as dirname5, isAbsolute, join as join4, relative as relative4, resolve as resolve4, sep as sep3 } from "path";
 var VIRTUAL_COMPONENTS = "virtual:lightspeed/components";
 var RESOLVED_COMPONENTS = "\x00" + VIRTUAL_COMPONENTS;
 function lightspeedPlugin(options = {}) {
@@ -5214,7 +5261,9 @@ function lightspeedPlugin(options = {}) {
         },
         ...extraComponentDirs.length > 0 ? {
           server: {
-            fs: { allow: [userRoot, ...extraComponentDirs.map((dir) => resolve4(userRoot, dir))] }
+            fs: {
+              allow: [userRoot, ...extraComponentDirs.map((dir) => resolve4(userRoot, componentDirPath(dir)))]
+            }
           }
         } : {}
       };
@@ -5224,7 +5273,7 @@ function lightspeedPlugin(options = {}) {
       const pages2 = await findPages(userRoot);
       if (pages2.length === 0)
         return fsAccess;
-      const named = pages2.map((page) => relative4(userRoot, page).split(sep2).join("/")).join(", ");
+      const named = pages2.map((page) => relative4(userRoot, page).split(sep3).join("/")).join(", ");
       console.log(pages2.length === 1 ? `⚡ 1 page: ${named}` : `⚡ ${pages2.length} pages: ${named}`);
       return {
         ...fsAccess,
@@ -5232,7 +5281,7 @@ function lightspeedPlugin(options = {}) {
         build: {
           rollupOptions: {
             input: Object.fromEntries(pages2.map((page) => [
-              relative4(userRoot, page).split(sep2).join("/").replace(/\.html$/, ""),
+              relative4(userRoot, page).split(sep3).join("/").replace(/\.html$/, ""),
               page
             ]))
           }
@@ -5293,12 +5342,12 @@ ${entries.join(`,
           await project.rebuild();
           const content = await readFile3(id, "utf-8");
           const parsed = withSharedStyles(parseLSP(content, id), (file) => this.addWatchFile?.(file));
-          const componentId = basename(id, ".lsp").toLowerCase();
+          const componentId = [...componentFiles].find(([, file]) => resolve4(root, file) === resolve4(id))?.[0] ?? basename(id, ".lsp").toLowerCase();
           let compiledLogic = parsed.logic;
           if (useTypeScript && parsed.logic.trim()) {
             compiledLogic = await project.compileLogic(parsed.logic);
           }
-          const registryObj = Object.fromEntries(componentRegistry);
+          const registryObj = project.registryFor(componentId);
           const transformedTemplate = transformTemplate(parsed.view, componentId, registryObj);
           const transformedSkeleton = parsed.skeleton ? transformTemplate(parsed.skeleton, componentId, registryObj) : "";
           const scopeId = scopeIdFor(componentId);
@@ -5450,13 +5499,27 @@ ${entries.join(`,
     const registryObj = Object.fromEntries(componentRegistry);
     const templates = {};
     for (const [componentId, raw] of componentRegistry) {
-      templates[componentId] = transformTemplate(raw.template, componentId, registryObj);
+      templates[componentId] = transformTemplate(raw.template, componentId, project.registryFor(componentId));
     }
+    const flattens = !isDevMode && shouldRender && options.flattenStatic !== false;
+    const definitions = flattens ? await project.definitions() : null;
     const eager = new Set;
     for (const page of await findPages(root)) {
       const html = await readFile3(page, "utf-8");
       const compiled = transformTemplate(html, "index", registryObj);
-      eagerComponents(compiled, templates).forEach((id) => eager.add(id));
+      let markup = compiled;
+      if (definitions) {
+        try {
+          markup = (await renderPage({
+            html: compiled,
+            definitions,
+            css: cssMode,
+            pageExpressions: buildExpressionTable(extractExpressions(compiled))
+          })).html;
+        } catch {
+        }
+      }
+      eagerComponents(markup, templates).forEach((id) => eager.add(id));
     }
     return [...eager];
   }
@@ -5606,7 +5669,7 @@ ${entries.join(`,
     return existsSync(join4(dir, ROUTES_DIR)) ? join4(dir, ROUTES_DIR) : dir;
   }
   function pageKey(file) {
-    return relative4(root, file).split(sep2).join("/");
+    return relative4(root, file).split(sep3).join("/");
   }
   async function findPages(dir) {
     if (host)
@@ -5646,7 +5709,7 @@ ${entries.join(`,
     routeTable.length = 0;
     routeDeclarations.clear();
     for (const file of await findPages(root)) {
-      const rel = relative4(base, file).split(sep2).join("/");
+      const rel = relative4(base, file).split(sep3).join("/");
       const key = pageKey(file);
       let declared = null;
       try {
@@ -5721,9 +5784,9 @@ ${entries.join(`,
     const absolute = resolve4(root, file);
     const within = relative4(root, absolute);
     if (!within.startsWith("..") && !isAbsolute(within)) {
-      return "/" + within.split(sep2).join("/");
+      return "/" + within.split(sep3).join("/");
     }
-    return absolute.split(sep2).join("/");
+    return absolute.split(sep3).join("/");
   }
 }
 function generateComponentModule(parsed, transformedTemplate, componentId, scopeId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed-js/core",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "Lightspeed: a compile-first framework for islands of reactivity in static HTML.",
   "keywords": [
     "lightspeed",