@blinkk/root 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/cli.js

@@ -1,74 +1,165 @@
 // src/cli/commands/dev.ts
-import path3 from "node:path";
+import path4 from "node:path";
 import { fileURLToPath } from "node:url";
 import { default as express } from "express";
 import { createServer as createViteServer } from "vite";
 
 // src/render/vite-plugin-root.ts
-import path from "path";
+import path2 from "path";
 import glob from "tiny-glob";
-var ELEMENTS_REGEX = /h\("(\w[\w-]+\w)"/g;
+
+// src/core/fsutils.ts
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import fsExtra from "fs-extra";
+function isJsFile(filename) {
+  return !!filename.match(/\.(j|t)sx?$/);
+}
+async function writeFile(filepath, content) {
+  const dirPath = path.dirname(filepath);
+  await makeDir(dirPath);
+  await fs.writeFile(filepath, content);
+}
+async function makeDir(dirpath) {
+  try {
+    await fs.access(dirpath);
+  } catch (e) {
+    await fs.mkdir(dirpath, { recursive: true });
+  }
+}
+async function copyDir(srcdir, dstdir) {
+  if (!fsExtra.existsSync(srcdir)) {
+    return;
+  }
+  fsExtra.copySync(srcdir, dstdir, { recursive: true, overwrite: true });
+}
+async function rmDir(dirpath) {
+  await fs.rm(dirpath, { recursive: true, force: true });
+}
+async function loadJson(filepath) {
+  const content = await fs.readFile(filepath, "utf-8");
+  return JSON.parse(content);
+}
+async function isDirectory(dirpath) {
+  return fs.stat(dirpath).then((fsStat) => {
+    return fsStat.isDirectory();
+  }).catch((err) => {
+    if (err.code === "ENOENT") {
+      return false;
+    }
+    throw err;
+  });
+}
+function fileExists(filepath) {
+  return fs.access(filepath).then(() => true).catch(() => false);
+}
+
+// src/render/vite-plugin-root.ts
+var JSX_ELEMENTS_REGEX = /jsxs?\("(\w[\w-]+\w)"/g;
+var HTML_ELEMENTS_REGEX = /<(\w[\w-]+\w)/g;
 function pluginRoot(options) {
+  var _a, _b;
+  const elementsVirtualId = "virtual:root-elements";
+  const resolvedElementsVirtualId = "\0" + elementsVirtualId;
   const rootDir = (options == null ? void 0 : options.rootDir) || process.cwd();
-  let config;
-  let server;
+  const rootConfig = (options == null ? void 0 : options.rootConfig) || {};
+  const elementsDirs = [path2.join(rootDir, "elements")];
+  const includeDirs = ((_a = rootConfig.elements) == null ? void 0 : _a.include) || [];
+  includeDirs.forEach((dirPath) => {
+    const elementsDir = path2.resolve(rootDir, dirPath);
+    if (!elementsDir.startsWith(rootDir)) {
+      throw new Error(
+        `the elements dir (${dirPath}) should be relative to the project's root dir (${rootDir})`
+      );
+    }
+    elementsDirs.push(elementsDir);
+  });
+  const excludePatterns = ((_b = rootConfig.elements) == null ? void 0 : _b.exclude) || [];
+  const excludeElement = (moduleId) => {
+    return excludePatterns.some((pattern) => Boolean(moduleId.match(pattern)));
+  };
   let elementMap;
   async function updateElementMap() {
     elementMap = {};
-    const files = await glob("./elements/**/*", { cwd: rootDir });
-    files.forEach((file) => {
-      const parts = path.parse(file);
-      if (isJsFile(parts.base)) {
-        elementMap[parts.name] = `${rootDir}/${file}`;
-      }
-    });
+    await Promise.all(
+      elementsDirs.map(async (dirPath) => {
+        const dirExists = await isDirectory(dirPath);
+        if (!dirExists) {
+          return;
+        }
+        const files = await glob("**/*", { cwd: dirPath });
+        files.forEach((file) => {
+          const parts = path2.parse(file);
+          if (isJsFile(parts.base)) {
+            const fullPath = path2.join(dirPath, file);
+            const moduleId = fullPath.slice(rootDir.length);
+            if (!excludeElement(moduleId)) {
+              elementMap[parts.name] = moduleId;
+            }
+          }
+        });
+      })
+    );
   }
-  async function getElementImport(tagName) {
+  async function getElementImport(tagname) {
     if (!elementMap) {
       await updateElementMap();
     }
-    if (tagName in elementMap) {
-      const filePath = elementMap[tagName];
-      if (server && server.moduleGraph) {
-        const moduleSet = server.moduleGraph.getModulesByFile(filePath);
-        if (moduleSet && moduleSet.size > 0) {
-          const module = moduleSet.values().next().value;
-          return module.url;
-        }
-      }
+    if (tagname in elementMap) {
+      return elementMap[tagname];
     }
     return null;
   }
+  function isCustomElement(id) {
+    if (!isJsFile(id)) {
+      return false;
+    }
+    return elementsDirs.some((elementsDir) => {
+      return id.startsWith(elementsDir);
+    });
+  }
   return {
     name: "vite-plugin-root",
-    configResolved(resolvedConfig) {
-      config = resolvedConfig;
+    resolveId(id) {
+      if (id === elementsVirtualId) {
+        return resolvedElementsVirtualId;
+      }
+      return null;
     },
-    configureServer(_server) {
-      server = _server;
+    async load(id) {
+      if (id === resolvedElementsVirtualId) {
+        await updateElementMap();
+        return `export const elementsMap = ${JSON.stringify(elementMap)}`;
+      }
+      return null;
     },
     async transform(src, id) {
-      if (id.includes("/elements/") && isJsFile(id)) {
-        const idParts = path.parse(id);
+      if (isCustomElement(id)) {
+        const idParts = path2.parse(id);
         const deps = /* @__PURE__ */ new Set();
-        const elementsRe = ELEMENTS_REGEX;
-        for (const match of src.matchAll(elementsRe)) {
-          const tagName = match[1];
-          if (!tagName.includes("-")) {
+        const tagnames = [
+          ...src.matchAll(JSX_ELEMENTS_REGEX),
+          ...src.matchAll(HTML_ELEMENTS_REGEX)
+        ];
+        for (const match of tagnames) {
+          const tagname = match[1];
+          if (!tagname.includes("-")) {
             continue;
           }
-          if (tagName === idParts.name) {
+          if (tagname === idParts.name) {
             continue;
           }
-          deps.add(tagName);
+          deps.add(tagname);
         }
         const importUrls = [];
-        await Promise.all(Array.from(deps).map(async (tagName) => {
-          const importUrl = await getElementImport(tagName);
-          if (importUrl) {
-            importUrls.push(importUrl);
-          }
-        }));
+        await Promise.all(
+          Array.from(deps).map(async (tagname) => {
+            const importUrl = await getElementImport(tagname);
+            if (importUrl) {
+              importUrls.push(importUrl);
+            }
+          })
+        );
         if (importUrls.length > 0) {
           const importLines = importUrls.map((url) => `import '${url}';`).join("\n");
           const code = `${src}
@@ -80,16 +171,13 @@ ${importLines}
         }
         return null;
       }
+      return null;
     }
   };
 }
-function isJsFile(file) {
-  return !!file.match(/\.(j|t)sx?$/);
-}
-var vite_plugin_root_default = pluginRoot;
 
 // src/render/asset-map/dev-asset-map.ts
-import path2 from "node:path";
+import path3 from "node:path";
 var DevServerAssetMap = class {
   constructor(moduleGraph) {
     this.moduleGraph = moduleGraph;
@@ -97,7 +185,12 @@ var DevServerAssetMap = class {
   async get(moduleId) {
     const viteModule = await this.moduleGraph.getModuleByUrl(moduleId);
     if (!viteModule || !viteModule.id) {
-      return null;
+      return {
+        moduleId,
+        assetUrl: moduleId,
+        getCssDeps: async () => [],
+        getJsDeps: async () => [moduleId]
+      };
     }
     return new DevServerAsset(this, viteModule);
   }
@@ -135,7 +228,7 @@ var DevServerAsset = class {
       return;
     }
     visited.add(asset.moduleId);
-    const parts = path2.parse(asset.assetUrl);
+    const parts = path3.parse(asset.assetUrl);
     if ([".js", ".jsx", ".ts", ".tsx"].includes(parts.ext) && asset.moduleId.includes("/elements/")) {
       urls.add(asset.assetUrl);
     }
@@ -158,7 +251,7 @@ var DevServerAsset = class {
     }
     visited.add(asset.assetUrl);
     if (asset.moduleId.endsWith(".scss")) {
-      const parts = path2.parse(asset.assetUrl);
+      const parts = path3.parse(asset.assetUrl);
       if (!parts.name.startsWith("_")) {
         urls.add(asset.assetUrl);
       }
@@ -193,62 +286,141 @@ async function loadRootConfig(rootDir) {
 // src/render/html-minify.ts
 import { minify } from "html-minifier-terser";
 async function htmlMinify(html) {
-  const min = await minify(html, {
-    collapseWhitespace: true,
-    removeComments: true,
-    preserveLineBreaks: true
-  });
-  return min.trimStart();
+  try {
+    const min = await minify(html, {
+      collapseWhitespace: true,
+      removeComments: true,
+      preserveLineBreaks: true
+    });
+    return min.trimStart();
+  } catch (e) {
+    console.error("failed to minify html:", e);
+    return html;
+  }
 }
 
 // src/cli/commands/dev.ts
-var __dirname2 = path3.dirname(fileURLToPath(import.meta.url));
+import glob2 from "tiny-glob";
+import { dim } from "kleur/colors";
+var __dirname = path4.dirname(fileURLToPath(import.meta.url));
 async function createServer(options) {
+  const rootDir = (options == null ? void 0 : options.rootDir) || process.cwd();
   const app = express();
+  app.disable("x-powered-by");
   app.use(express.static("public"));
-  const middlewares = await getMiddlewares({ rootDir: options == null ? void 0 : options.rootDir });
+  const middlewares = await getMiddlewares({ rootDir });
   middlewares.forEach((middleware) => app.use(middleware));
   const port = parseInt(process.env.PORT || "4007");
-  const version = process.env.npm_package_version || "dev";
-  console.log(`\u{1F333} Root.js v${version}`);
   console.log();
-  console.log(`Started server: http://localhost:${port}`);
+  console.log(`${dim("\u2503")} project:  ${rootDir}`);
+  console.log(`${dim("\u2503")} server:   http://localhost:${port}`);
+  console.log();
   app.listen(port);
 }
 async function getMiddlewares(options) {
-  const rootDir = (options == null ? void 0 : options.rootDir) || process.cwd();
+  var _a, _b, _c;
+  const rootDir = path4.resolve((options == null ? void 0 : options.rootDir) || process.cwd());
   const rootConfig = await loadRootConfig(rootDir);
   const viteConfig = rootConfig.vite || {};
-  const renderModulePath = path3.resolve(__dirname2, "./render.js");
+  const renderModulePath = path4.resolve(__dirname, "./render.js");
+  const pages = [];
+  if (await isDirectory(path4.join(rootDir, "routes"))) {
+    const pageFiles = await glob2("routes/**/*", { cwd: rootDir });
+    pageFiles.forEach((file) => {
+      const parts = path4.parse(file);
+      if (!parts.name.startsWith("_") && isJsFile(parts.base)) {
+        pages.push(file);
+      }
+    });
+  }
+  const elementsDirs = [path4.join(rootDir, "elements")];
+  const elementsInclude = ((_a = rootConfig.elements) == null ? void 0 : _a.include) || [];
+  const excludePatterns = ((_b = rootConfig.elements) == null ? void 0 : _b.exclude) || [];
+  const excludeElement = (moduleId) => {
+    return excludePatterns.some((pattern) => Boolean(moduleId.match(pattern)));
+  };
+  for (const dirPath of elementsInclude) {
+    const elementsDir = path4.resolve(rootDir, dirPath);
+    if (!elementsDir.startsWith(rootDir)) {
+      throw new Error(
+        `the elements dir (${dirPath}) should be relative to the project's root dir (${rootDir})`
+      );
+    }
+    elementsDirs.push(elementsDir);
+  }
+  const elements = [];
+  for (const dirPath of elementsDirs) {
+    if (await isDirectory(dirPath)) {
+      const elementFiles = await glob2("**/*", { cwd: dirPath });
+      elementFiles.forEach((file) => {
+        const parts = path4.parse(file);
+        if (isJsFile(parts.base)) {
+          const fullPath = path4.join(dirPath, file);
+          const moduleId = fullPath.slice(rootDir.length);
+          if (!excludeElement(moduleId)) {
+            elements.push(moduleId.slice(1));
+          }
+        }
+      });
+    }
+  }
+  const bundleScripts = [];
+  if (await isDirectory(path4.join(rootDir, "bundles"))) {
+    const bundleFiles = await glob2(path4.join(rootDir, "bundles/*"));
+    bundleFiles.forEach((file) => {
+      const parts = path4.parse(file);
+      if (isJsFile(parts.base)) {
+        bundleScripts.push(file);
+      }
+    });
+  }
   const viteServer = await createViteServer({
     ...viteConfig,
+    mode: "development",
+    root: rootDir,
     server: { middlewareMode: true },
     appType: "custom",
     optimizeDeps: {
-      include: [renderModulePath]
+      include: [...pages, ...elements, ...bundleScripts]
+    },
+    ssr: {
+      noExternal: ["@blinkk/root"]
     },
     esbuild: {
       jsx: "automatic",
       jsxImportSource: "preact"
     },
-    plugins: [...viteConfig.plugins || [], vite_plugin_root_default()]
+    plugins: [...viteConfig.plugins || [], pluginRoot({ rootDir, rootConfig })]
   });
   const rootMiddleware = async (req, res, next) => {
     const url = req.originalUrl;
-    const render = await viteServer.ssrLoadModule(renderModulePath);
-    const renderer = new render.Renderer(rootConfig);
+    let renderer = null;
     try {
+      const render = await viteServer.ssrLoadModule(renderModulePath);
+      renderer = new render.Renderer(rootConfig);
       const assetMap = new DevServerAssetMap(viteServer.moduleGraph);
       const data = await renderer.render(url, {
         assetMap
       });
-      const html = await htmlMinify(await viteServer.transformIndexHtml(url, data.html || ""));
+      if (data.notFound || !data.html) {
+        next();
+        return;
+      }
+      let html = await viteServer.transformIndexHtml(url, data.html || "");
+      if (rootConfig.minifyHtml !== false) {
+        html = await htmlMinify(html);
+      }
       res.status(200).set({ "Content-Type": "text/html" }).end(html);
     } catch (e) {
       viteServer.ssrFixStacktrace(e);
+      console.error(e);
       try {
-        const { html } = await renderer.renderError(e);
-        res.status(500).set({ "Content-Type": "text/html" }).end(html);
+        if (renderer) {
+          const { html } = await renderer.renderError(e);
+          res.status(500).set({ "Content-Type": "text/html" }).end(html);
+        } else {
+          next(e);
+        }
       } catch (e2) {
         console.error("failed to render custom error");
         console.error(e2);
@@ -256,33 +428,51 @@ async function getMiddlewares(options) {
       }
     }
   };
-  return [viteServer.middlewares, rootMiddleware];
+  const notFoundMiddleware = async (req, res) => {
+    const url = req.originalUrl;
+    const ext = path4.extname(url);
+    if (!ext) {
+      const render = await viteServer.ssrLoadModule(renderModulePath);
+      const renderer = new render.Renderer(rootConfig);
+      const data = await renderer.renderDevNotFound();
+      const html = data.html || "";
+      res.status(404).set({ "Content-Type": "text/html" }).end(html);
+      return;
+    }
+    res.status(404).set({ "Content-Type": "text/plain" }).end("404");
+  };
+  const userMiddlewares = ((_c = rootConfig.server) == null ? void 0 : _c.middlewares) || [];
+  return [
+    ...userMiddlewares,
+    viteServer.middlewares,
+    rootMiddleware,
+    notFoundMiddleware
+  ];
 }
-function dev(rootDir) {
-  createServer({ rootDir });
+async function dev(rootProjectDir) {
+  process.env.NODE_ENV = "development";
+  const rootDir = path4.resolve(rootProjectDir || process.cwd());
+  await createServer({ rootDir });
 }
 
 // src/cli/commands/build.ts
-import path6 from "node:path";
+import path5 from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 import fsExtra2 from "fs-extra";
-import glob2 from "tiny-glob";
+import glob3 from "tiny-glob";
 import { build as viteBuild } from "vite";
 
 // src/render/asset-map/build-asset-map.ts
-import path4 from "path";
 var BuildAssetMap = class {
-  constructor(manifest) {
-    this.manifest = manifest;
+  constructor() {
     this.moduleIdToAsset = /* @__PURE__ */ new Map();
-    Object.keys(this.manifest).forEach((manifestKey) => {
-      const moduleId = `/${manifestKey}`;
-      this.moduleIdToAsset.set(moduleId, new BuildAsset(this, moduleId, this.manifest[manifestKey]));
-    });
   }
   async get(moduleId) {
     return this.moduleIdToAsset.get(moduleId) || null;
   }
+  add(asset) {
+    this.moduleIdToAsset.set(asset.moduleId, asset);
+  }
   toJson() {
     const result = {};
     for (const moduleId of this.moduleIdToAsset.keys()) {
@@ -290,15 +480,46 @@ var BuildAssetMap = class {
     }
     return result;
   }
+  static fromViteManifest(viteManifest, elementMap) {
+    const assetMap = new BuildAssetMap();
+    const elementModuleIds = /* @__PURE__ */ new Set();
+    Object.values(elementMap).forEach(
+      (moduleId) => elementModuleIds.add(moduleId)
+    );
+    Object.keys(viteManifest).forEach((manifestKey) => {
+      const moduleId = `/${manifestKey}`;
+      const manifestChunk = viteManifest[manifestKey];
+      const isElement = elementModuleIds.has(moduleId);
+      const assetData = {
+        moduleId,
+        assetUrl: `/${manifestChunk.file}`,
+        importedModules: (manifestChunk.imports || []).map(
+          (relPath) => `/${relPath}`
+        ),
+        importedCss: (manifestChunk.css || []).map((relPath) => `/${relPath}`),
+        isElement
+      };
+      assetMap.add(new BuildAsset(assetMap, assetData));
+    });
+    return assetMap;
+  }
+  static fromRootManifest(rootManifest) {
+    const assetMap = new BuildAssetMap();
+    Object.keys(rootManifest).forEach((moduleId) => {
+      const assetData = rootManifest[moduleId];
+      assetMap.add(new BuildAsset(assetMap, assetData));
+    });
+    return assetMap;
+  }
 };
 var BuildAsset = class {
-  constructor(assetMap, moduleId, manifestData) {
+  constructor(assetMap, assetData) {
     this.assetMap = assetMap;
-    this.moduleId = moduleId;
-    this.manifestData = manifestData;
-    this.assetUrl = `/${manifestData.file}`;
-    this.importedModules = (this.manifestData.imports || []).map((relPath) => `/${relPath}`);
-    this.importedCss = (this.manifestData.css || []).map((relPath) => `/${relPath}`);
+    this.moduleId = assetData.moduleId;
+    this.assetUrl = assetData.assetUrl;
+    this.importedModules = assetData.importedModules;
+    this.importedCss = assetData.importedCss;
+    this.isElement = assetData.isElement;
   }
   async getCssDeps() {
     const visited = /* @__PURE__ */ new Set();
@@ -323,14 +544,15 @@ var BuildAsset = class {
       return;
     }
     visited.add(asset.moduleId);
-    const parts = path4.parse(asset.assetUrl);
-    if ([".ts", ".tsx"].includes(parts.ext) && asset.moduleId.includes("/elements/")) {
+    if (asset.isElement) {
       urls.add(asset.assetUrl);
     }
-    await Promise.all(asset.importedModules.map(async (moduleId) => {
-      const importedAsset = await this.assetMap.get(moduleId);
-      this.collectJs(importedAsset, urls, visited);
-    }));
+    await Promise.all(
+      asset.importedModules.map(async (moduleId) => {
+        const importedAsset = await this.assetMap.get(moduleId);
+        this.collectJs(importedAsset, urls, visited);
+      })
+    );
   }
   async collectCss(asset, urls, visited) {
     if (!asset) {
@@ -346,102 +568,90 @@ var BuildAsset = class {
     if (asset.importedCss) {
       asset.importedCss.forEach((cssUrl) => urls.add(cssUrl));
     }
-    await Promise.all(asset.importedModules.map(async (moduleId) => {
-      const importedAsset = await this.assetMap.get(moduleId);
-      this.collectCss(importedAsset, urls, visited);
-    }));
+    await Promise.all(
+      asset.importedModules.map(async (moduleId) => {
+        const importedAsset = await this.assetMap.get(moduleId);
+        this.collectCss(importedAsset, urls, visited);
+      })
+    );
   }
   toJson() {
     return {
       moduleId: this.moduleId,
       assetUrl: this.assetUrl,
       importedModules: this.importedModules,
-      importedCss: this.importedCss
+      importedCss: this.importedCss,
+      isElement: this.isElement
     };
   }
 };
 
-// src/core/fsutils.ts
-import { promises as fs } from "node:fs";
-import path5 from "node:path";
-import fsExtra from "fs-extra";
-function isJsFile2(file) {
-  return !!file.match(/\.(j|t)sx?$/);
-}
-async function writeFile(filePath, content) {
-  const dirPath = path5.dirname(filePath);
-  await makeDir(dirPath);
-  await fs.writeFile(filePath, content);
-}
-async function makeDir(dirPath) {
-  try {
-    await fs.access(dirPath);
-  } catch (e) {
-    await fs.mkdir(dirPath, { recursive: true });
-  }
-}
-async function copyDir(srcDir, dstDir) {
-  if (!fsExtra.existsSync(srcDir)) {
-    return;
-  }
-  fsExtra.copySync(srcDir, dstDir, { recursive: true, overwrite: true });
-}
-async function rmDir(dirPath) {
-  await fs.rm(dirPath, { recursive: true, force: true });
-}
-async function loadJson(filePath) {
-  const content = await fs.readFile(filePath, "utf-8");
-  return JSON.parse(content);
-}
-async function isDirectory(dirPath) {
-  return fs.stat(dirPath).then((fsStat) => {
-    return fsStat.isDirectory();
-  }).catch((err) => {
-    if (err.code === "ENOENT") {
-      return false;
-    }
-    throw err;
-  });
-}
-
 // src/cli/commands/build.ts
-var __dirname3 = path6.dirname(fileURLToPath2(import.meta.url));
-async function build(rootDir) {
-  const version = process.env.npm_package_version || "dev";
-  console.log(`\u{1F333} Root.js v${version}`);
-  if (!rootDir) {
-    rootDir = process.cwd();
-  }
+import { dim as dim2 } from "kleur/colors";
+var __dirname2 = path5.dirname(fileURLToPath2(import.meta.url));
+async function build(rootProjectDir, options) {
+  var _a, _b;
+  const rootDir = path5.resolve(rootProjectDir || process.cwd());
   const rootConfig = await loadRootConfig(rootDir);
-  const distDir = path6.join(rootDir, "dist");
+  const distDir = path5.join(rootDir, "dist");
+  const ssrOnly = (options == null ? void 0 : options.ssrOnly) || false;
+  const mode = (options == null ? void 0 : options.mode) || "production";
+  console.log();
+  console.log(`${dim2("\u2503")} project:  ${rootDir}`);
+  console.log(`${dim2("\u2503")} output:   ${distDir}/html`);
+  console.log(`${dim2("\u2503")} mode:     ${mode}`);
+  console.log();
   await rmDir(distDir);
   await makeDir(distDir);
   const pages = [];
-  if (await isDirectory(path6.join(rootDir, "routes"))) {
-    const pageFiles = await glob2(path6.join(rootDir, "routes/**/*"));
+  if (await isDirectory(path5.join(rootDir, "routes"))) {
+    const pageFiles = await glob3(path5.join(rootDir, "routes/**/*"));
     pageFiles.forEach((file) => {
-      const parts = path6.parse(file);
-      if (!parts.name.startsWith("_") && isJsFile2(parts.base)) {
+      const parts = path5.parse(file);
+      if (!parts.name.startsWith("_") && isJsFile(parts.base)) {
         pages.push(file);
       }
     });
   }
+  const elementsDirs = [path5.join(rootDir, "elements")];
+  const elementsInclude = ((_a = rootConfig.elements) == null ? void 0 : _a.include) || [];
+  const excludePatterns = ((_b = rootConfig.elements) == null ? void 0 : _b.exclude) || [];
+  const excludeElement = (moduleId) => {
+    return excludePatterns.some((pattern) => Boolean(moduleId.match(pattern)));
+  };
+  for (const dirPath of elementsInclude) {
+    const elementsDir = path5.resolve(rootDir, dirPath);
+    if (!elementsDir.startsWith(rootDir)) {
+      throw new Error(
+        `the elements dir (${dirPath}) should be relative to the project's root dir (${rootDir})`
+      );
+    }
+    elementsDirs.push(elementsDir);
+  }
   const elements = [];
-  if (await isDirectory(path6.join(rootDir, "elements"))) {
-    const elementFiles = await glob2(path6.join(rootDir, "elements/**/*"));
-    elementFiles.forEach((file) => {
-      const parts = path6.parse(file);
-      if (isJsFile2(parts.base)) {
-        elements.push(file);
-      }
-    });
+  const elementMap = {};
+  for (const dirPath of elementsDirs) {
+    if (await isDirectory(dirPath)) {
+      const elementFiles = await glob3("**/*", { cwd: dirPath });
+      elementFiles.forEach((file) => {
+        const parts = path5.parse(file);
+        if (isJsFile(parts.base)) {
+          const fullPath = path5.join(dirPath, file);
+          const moduleId = fullPath.slice(rootDir.length);
+          if (!excludeElement(moduleId)) {
+            elements.push(fullPath);
+            elementMap[parts.name] = moduleId;
+          }
+        }
+      });
+    }
   }
   const bundleScripts = [];
-  if (await isDirectory(path6.join(rootDir, "bundles"))) {
-    const bundleFiles = await glob2(path6.join(rootDir, "bundles/*"));
+  if (await isDirectory(path5.join(rootDir, "bundles"))) {
+    const bundleFiles = await glob3(path5.join(rootDir, "bundles/*"));
     bundleFiles.forEach((file) => {
-      const parts = path6.parse(file);
-      if (isJsFile2(parts.base)) {
+      const parts = path5.parse(file);
+      if (isJsFile(parts.base)) {
         bundleScripts.push(file);
       }
     });
@@ -450,27 +660,27 @@ async function build(rootDir) {
   const baseConfig = {
     ...viteConfig,
     root: rootDir,
+    mode,
     esbuild: {
-      jsxFactory: "h",
-      jsxFragment: "Fragment",
-      jsxInject: 'import {h, Fragment} from "preact";'
+      jsx: "automatic",
+      jsxImportSource: "preact",
+      treeShaking: true
     },
-    plugins: [...viteConfig.plugins || [], pluginRoot()]
+    plugins: [...viteConfig.plugins || [], pluginRoot({ rootDir, rootConfig })]
   };
   await viteBuild({
     ...baseConfig,
-    mode: "production",
     publicDir: false,
     build: {
       rollupOptions: {
-        input: [path6.resolve(__dirname3, "./render.js")],
+        input: [path5.resolve(__dirname2, "./render.js")],
         output: {
           format: "esm",
           chunkFileNames: "chunks/[name].[hash].js",
           assetFileNames: "assets/[name].[hash][extname]"
         }
       },
-      outDir: path6.join(distDir, "server"),
+      outDir: path5.join(distDir, "server"),
       ssr: true,
       ssrManifest: false,
       cssCodeSplit: true,
@@ -478,11 +688,13 @@ async function build(rootDir) {
       minify: false,
       polyfillModulePreload: false,
       reportCompressedSize: false
+    },
+    ssr: {
+      noExternal: ["@blinkk/root"]
     }
   });
   await viteBuild({
     ...baseConfig,
-    mode: "production",
     publicDir: false,
     build: {
       rollupOptions: {
@@ -493,7 +705,7 @@ async function build(rootDir) {
           assetFileNames: "assets/[name].[hash][extname]"
         }
       },
-      outDir: path6.join(distDir, "client"),
+      outDir: path5.join(distDir, "client"),
       ssr: false,
       ssrManifest: false,
       manifest: true,
@@ -504,45 +716,174 @@ async function build(rootDir) {
       reportCompressedSize: false
     }
   });
-  const manifest = await loadJson(path6.join(distDir, "client/manifest.json"));
-  const assetMap = new BuildAssetMap(manifest);
-  writeFile(path6.join(distDir, "client/root-manifest.json"), JSON.stringify(assetMap.toJson(), null, 2));
-  const buildDir = path6.join(distDir, "html");
-  const publicDir = path6.join(rootDir, "public");
-  if (fsExtra2.existsSync(path6.join(rootDir, "public"))) {
+  const viteManifest = await loadJson(
+    path5.join(distDir, "client/manifest.json")
+  );
+  const assetMap = BuildAssetMap.fromViteManifest(viteManifest, elementMap);
+  writeFile(
+    path5.join(distDir, "client/root-manifest.json"),
+    JSON.stringify(assetMap.toJson(), null, 2)
+  );
+  const buildDir = path5.join(distDir, "html");
+  const publicDir = path5.join(rootDir, "public");
+  if (fsExtra2.existsSync(path5.join(rootDir, "public"))) {
     fsExtra2.copySync(publicDir, buildDir);
   } else {
     makeDir(buildDir);
   }
-  copyDir(path6.join(distDir, "client/assets"), path6.join(buildDir, "assets"));
-  copyDir(path6.join(distDir, "client/chunks"), path6.join(buildDir, "chunks"));
+  copyDir(path5.join(distDir, "client/assets"), path5.join(buildDir, "assets"));
+  copyDir(path5.join(distDir, "client/chunks"), path5.join(buildDir, "chunks"));
+  if (!ssrOnly) {
+    const render = await import(path5.join(distDir, "server/render.js"));
+    const renderer = new render.Renderer(rootConfig);
+    const sitemap = await renderer.getSitemap();
+    await Promise.all(
+      Object.keys(sitemap).map(async (urlPath) => {
+        const { route, params } = sitemap[urlPath];
+        const data = await renderer.renderRoute(route, {
+          assetMap,
+          routeParams: params
+        });
+        let outPath = path5.join(distDir, `html${urlPath}`, "index.html");
+        if (outPath.endsWith("404/index.html")) {
+          outPath = outPath.replace("404/index.html", "404.html");
+        }
+        const html = await htmlMinify(data.html || "");
+        await writeFile(outPath, html);
+        const relPath = outPath.slice(path5.dirname(distDir).length + 1);
+        console.log(`saved ${relPath}`);
+      })
+    );
+  }
+}
+
+// src/cli/commands/preview.ts
+import path6 from "node:path";
+import { default as express2 } from "express";
+import { dim as dim3 } from "kleur/colors";
+async function preview(rootProjectDir) {
+  var _a;
+  process.env.NODE_ENV = "development";
+  const rootDir = path6.resolve(rootProjectDir || process.cwd());
+  const rootConfig = await loadRootConfig(rootDir);
+  const distDir = path6.join(rootDir, "dist");
   const render = await import(path6.join(distDir, "server/render.js"));
   const renderer = new render.Renderer(rootConfig);
-  const sitemap = await renderer.getSitemap();
-  await Promise.all(Object.keys(sitemap).map(async (urlPath) => {
-    const { route, params } = sitemap[urlPath];
-    const data = await renderer.renderRoute(route, {
-      assetMap,
-      routeParams: params
-    });
-    let outPath = path6.join(distDir, `html${urlPath}`, "index.html");
-    if (outPath.endsWith("404/index.html")) {
-      outPath = outPath.replace("404/index.html", "404.html");
-    }
-    const html = await htmlMinify(data.html || "");
-    await writeFile(outPath, html);
-    const relPath = outPath.slice(path6.dirname(distDir).length + 1);
-    console.log(`saved ${relPath}`);
-  }));
+  const manifestPath = path6.join(distDir, "client/root-manifest.json");
+  if (!await fileExists(manifestPath)) {
+    throw new Error(
+      `could not find ${manifestPath}. run \`root build\` before \`root preview\`.`
+    );
+  }
+  const rootManifest = await loadJson(manifestPath);
+  const assetMap = BuildAssetMap.fromRootManifest(rootManifest);
+  const app = express2();
+  app.disable("x-powered-by");
+  const userMiddlewares = ((_a = rootConfig.server) == null ? void 0 : _a.middlewares) || [];
+  userMiddlewares.forEach((middleware) => {
+    app.use(middleware);
+  });
+  const publicDir = path6.join(distDir, "html");
+  app.use(express2.static(publicDir));
+  app.use(async (req, res, next) => {
+    try {
+      const url = req.originalUrl;
+      const data = await renderer.render(url, {
+        assetMap
+      });
+      if (data.notFound || !data.html) {
+        next();
+        return;
+      }
+      let html = data.html || "";
+      if (rootConfig.minifyHtml !== false) {
+        html = await htmlMinify(html);
+      }
+      res.status(200).set({ "Content-Type": "text/html" }).end(html);
+    } catch (e) {
+      try {
+        const { html } = await renderer.renderError(e);
+        res.status(500).set({ "Content-Type": "text/html" }).end(html);
+      } catch (e2) {
+        console.error("failed to render custom error");
+        console.error(e2);
+        next(e);
+      }
+    }
+  });
+  const port = parseInt(process.env.PORT || "4007");
+  console.log();
+  console.log(`${dim3("\u2503")} project:  ${rootDir}`);
+  console.log(`${dim3("\u2503")} server:   http://localhost:${port}`);
+  console.log();
+  app.listen(port);
 }
 
 // src/cli/commands/start.ts
-async function start(rootDir) {
-  console.log("SSR production server is coming soon");
+import path7 from "node:path";
+import { default as express3 } from "express";
+import { dim as dim4 } from "kleur/colors";
+async function start(rootProjectDir) {
+  var _a;
+  process.env.NODE_ENV = "production";
+  const rootDir = path7.resolve(rootProjectDir || process.cwd());
+  const rootConfig = await loadRootConfig(rootDir);
+  const distDir = path7.join(rootDir, "dist");
+  const render = await import(path7.join(distDir, "server/render.js"));
+  const renderer = new render.Renderer(rootConfig);
+  const manifestPath = path7.join(distDir, "client/root-manifest.json");
+  if (!await fileExists(manifestPath)) {
+    throw new Error(
+      `could not find ${manifestPath}. run \`root build\` before \`root start\`.`
+    );
+  }
+  const rootManifest = await loadJson(manifestPath);
+  const assetMap = BuildAssetMap.fromRootManifest(rootManifest);
+  const app = express3();
+  app.disable("x-powered-by");
+  const userMiddlewares = ((_a = rootConfig.server) == null ? void 0 : _a.middlewares) || [];
+  userMiddlewares.forEach((middleware) => {
+    app.use(middleware);
+  });
+  const publicDir = path7.join(distDir, "html");
+  app.use(express3.static(publicDir));
+  app.use(async (req, res, next) => {
+    try {
+      const url = req.originalUrl;
+      const data = await renderer.render(url, {
+        assetMap
+      });
+      if (data.notFound || !data.html) {
+        next();
+        return;
+      }
+      let html = data.html || "";
+      if (rootConfig.minifyHtml !== false) {
+        html = await htmlMinify(html);
+      }
+      res.status(200).set({ "Content-Type": "text/html" }).end(html);
+    } catch (e) {
+      try {
+        const { html } = await renderer.renderError(e);
+        res.status(500).set({ "Content-Type": "text/html" }).end(html);
+      } catch (e2) {
+        console.error("failed to render custom error");
+        console.error(e2);
+        next(e);
+      }
+    }
+  });
+  const port = parseInt(process.env.PORT || "4007");
+  console.log();
+  console.log(`${dim4("\u2503")} project:  ${rootDir}`);
+  console.log(`${dim4("\u2503")} server:   http://localhost:${port}`);
+  console.log();
+  app.listen(port);
 }
 export {
   build,
   dev,
+  preview,
   start
 };
 //# sourceMappingURL=cli.js.map