@blinkk/root 1.0.0-alpha.3 → 1.0.0-alpha.31

package/dist/cli.js

@@ -1,12 +1,22 @@
+import {
+  configureServerPlugins,
+  getVitePlugins
+} from "./chunk-ZB7R6ZOY.js";
+
 // src/cli/commands/dev.ts
-import path4 from "node:path";
+import path5 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 path2 from "path";
+import path3 from "node:path";
+
+// src/core/elements.ts
+import fs2 from "node:fs";
+import path2 from "node:path";
 import glob from "tiny-glob";
+import { searchForWorkspaceRoot } from "vite";
 
 // src/core/fsutils.ts
 import { promises as fs } from "node:fs";
@@ -27,12 +37,6 @@ async function makeDir(dirpath) {
     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 });
 }
@@ -50,42 +54,114 @@ async function isDirectory(dirpath) {
     throw err;
   });
 }
+function fileExists(filepath) {
+  return fs.access(filepath).then(() => true).catch(() => false);
+}
+async function directoryContains(dirpath, subpath) {
+  const outer = await fs.realpath(dirpath);
+  const inner = await fs.realpath(subpath);
+  const rel = path.relative(outer, inner);
+  return !rel.startsWith("..");
+}
+
+// src/core/elements.ts
+async function getElements(rootConfig) {
+  var _a, _b;
+  const rootDir = rootConfig.rootDir;
+  const workspaceRoot = searchForWorkspaceRoot(rootDir);
+  const elementsDirs = [path2.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 = path2.resolve(rootDir, dirPath);
+    if (!directoryContains(rootDir, elementsDir)) {
+      throw new Error(
+        `the elements dir (${dirPath}) should be within the project's workspace (${workspaceRoot})`
+      );
+    }
+    elementsDirs.push(elementsDir);
+  }
+  const elementMap = {};
+  for (const dirPath of elementsDirs) {
+    if (await isDirectory(dirPath)) {
+      const elementFiles = await glob("**/*", { cwd: dirPath });
+      elementFiles.forEach((file) => {
+        const parts = path2.parse(file);
+        if (isJsFile(parts.base)) {
+          const filePath = path2.join(dirPath, file);
+          const src = path2.relative(rootDir, filePath);
+          const realPath = fs2.realpathSync(filePath);
+          if (!excludeElement(src)) {
+            elementMap[parts.name] = {
+              src,
+              filePath,
+              realPath
+            };
+          }
+        }
+      });
+    }
+  }
+  return elementMap;
+}
 
 // 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) {
-  const rootDir = (options == null ? void 0 : options.rootDir) || process.cwd();
-  let elementMap;
+  const elementsVirtualId = "virtual:root-elements";
+  const resolvedElementsVirtualId = "\0" + elementsVirtualId;
+  const rootConfig = options.rootConfig;
+  let tagNameToElement;
+  const customElementFiles = /* @__PURE__ */ new Set();
   async function updateElementMap() {
-    elementMap = {};
-    const files = await glob("./elements/**/*", { cwd: rootDir });
-    files.forEach((file) => {
-      const parts = path2.parse(file);
-      if (isJsFile(parts.base)) {
-        elementMap[parts.name] = `/${file}`;
-      }
+    tagNameToElement = await getElements(rootConfig);
+    customElementFiles.clear();
+    Object.values(tagNameToElement).forEach((elementModule) => {
+      customElementFiles.add(elementModule.filePath);
+      customElementFiles.add(elementModule.realPath);
     });
-    console.log(JSON.stringify(elementMap));
   }
   async function getElementImport(tagname) {
-    if (!elementMap) {
+    if (!tagNameToElement) {
       await updateElementMap();
     }
-    if (tagname in elementMap) {
-      return elementMap[tagname];
+    if (tagname in tagNameToElement) {
+      const elementModule = tagNameToElement[tagname];
+      if (elementModule.filePath === elementModule.realPath) {
+        return elementModule.src;
+      }
     }
     return null;
   }
+  function isCustomElement(id) {
+    if (!isJsFile(id)) {
+      return false;
+    }
+    return customElementFiles.has(id);
+  }
   return {
     name: "vite-plugin-root",
-    async transform(src, id) {
-      if (!id.startsWith(rootDir)) {
-        return null;
+    resolveId(id) {
+      if (id === elementsVirtualId) {
+        return resolvedElementsVirtualId;
       }
-      const moduleId = id.slice(rootDir.length);
-      if (moduleId.startsWith("/elements/") && isJsFile(id)) {
-        const idParts = path2.parse(id);
+      return null;
+    },
+    async load(id) {
+      if (id === resolvedElementsVirtualId) {
+        await updateElementMap();
+        return `export const elementsMap = ${JSON.stringify(tagNameToElement)}`;
+      }
+      return null;
+    },
+    async transform(src, id) {
+      if (isCustomElement(id)) {
+        await updateElementMap();
+        const idParts = path3.parse(id);
         const deps = /* @__PURE__ */ new Set();
         const tagnames = [
           ...src.matchAll(JSX_ELEMENTS_REGEX),
@@ -102,46 +178,79 @@ function pluginRoot(options) {
           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 importLines = importUrls.map((url) => `import '/${url}';`).join("\n");
           const code = `${src}
 
 // autogenerated by root:
 ${importLines}
 `;
-          console.log(code);
           return { code };
         }
         return null;
       }
+      return null;
     }
   };
 }
 
 // src/render/asset-map/dev-asset-map.ts
-import path3 from "node:path";
+import path4 from "node:path";
+import { searchForWorkspaceRoot as searchForWorkspaceRoot2 } from "vite";
 var DevServerAssetMap = class {
-  constructor(moduleGraph) {
+  constructor(rootConfig, moduleGraph) {
+    this.rootConfig = rootConfig;
     this.moduleGraph = moduleGraph;
   }
-  async get(moduleId) {
-    const viteModule = await this.moduleGraph.getModuleByUrl(moduleId);
-    if (!viteModule || !viteModule.id) {
-      return null;
+  async get(src) {
+    const file = path4.resolve(this.rootConfig.rootDir, src);
+    const viteModules = this.moduleGraph.getModulesByFile(file);
+    if (viteModules && viteModules.size > 0) {
+      const [viteModule] = viteModules;
+      return new DevServerAsset(src, {
+        assetMap: this,
+        viteModule
+      });
+    }
+    if (file.startsWith(this.rootConfig.rootDir)) {
+      const assetUrl = file.slice(this.rootConfig.rootDir.length);
+      return {
+        src,
+        assetUrl,
+        getCssDeps: async () => [],
+        getJsDeps: async () => [assetUrl]
+      };
     }
-    return new DevServerAsset(this, viteModule);
+    const workspaceRoot = searchForWorkspaceRoot2(this.rootConfig.rootDir);
+    if (await directoryContains(workspaceRoot, file)) {
+      const assetUrl = `/@fs/${file}`;
+      return {
+        src,
+        assetUrl,
+        getCssDeps: async () => [],
+        getJsDeps: async () => [assetUrl]
+      };
+    }
+    console.log(`could not find asset in asset map: ${src}`);
+    return null;
+  }
+  filePathToSrc(file) {
+    return path4.relative(this.rootConfig.rootDir, file);
   }
 };
 var DevServerAsset = class {
-  constructor(assetMap, viteModule) {
-    this.assetMap = assetMap;
-    this.viteModule = viteModule;
+  constructor(src, options) {
+    this.src = src;
+    this.assetMap = options.assetMap;
+    this.viteModule = options.viteModule;
     this.moduleId = this.viteModule.id;
     this.assetUrl = this.viteModule.url;
   }
@@ -171,13 +280,17 @@ var DevServerAsset = class {
       return;
     }
     visited.add(asset.moduleId);
-    const parts = path3.parse(asset.assetUrl);
+    const parts = path4.parse(asset.assetUrl);
     if ([".js", ".jsx", ".ts", ".tsx"].includes(parts.ext) && asset.moduleId.includes("/elements/")) {
       urls.add(asset.assetUrl);
     }
     asset.getImportedModules().forEach((viteModule) => {
-      if (viteModule.id) {
-        const importedAsset = new DevServerAsset(this.assetMap, viteModule);
+      if (viteModule.file) {
+        const src = this.assetMap.filePathToSrc(viteModule.file);
+        const importedAsset = new DevServerAsset(src, {
+          assetMap: this.assetMap,
+          viteModule
+        });
         this.collectJs(importedAsset, urls, visited);
       }
     });
@@ -193,15 +306,19 @@ var DevServerAsset = class {
       return;
     }
     visited.add(asset.assetUrl);
-    if (asset.moduleId.endsWith(".scss")) {
-      const parts = path3.parse(asset.assetUrl);
+    if (asset.src.endsWith(".scss")) {
+      const parts = path4.parse(asset.src);
       if (!parts.name.startsWith("_")) {
         urls.add(asset.assetUrl);
       }
     }
     asset.getImportedModules().forEach((viteModule) => {
-      if (viteModule.id) {
-        const importedAsset = new DevServerAsset(this.assetMap, viteModule);
+      if (viteModule.file) {
+        const src = this.assetMap.filePathToSrc(viteModule.file);
+        const importedAsset = new DevServerAsset(src, {
+          assetMap: this.assetMap,
+          viteModule
+        });
         this.collectCss(importedAsset, urls, visited);
       }
     });
@@ -221,103 +338,269 @@ async function loadRootConfig(rootDir) {
     const configBundle = await bundleRequire({
       filepath: configPath
     });
-    return configBundle.mod.default || {};
+    return Object.assign({}, configBundle.mod.default || {}, { rootDir });
   }
-  return {};
+  return { rootDir };
 }
 
 // src/render/html-minify.ts
 import { minify } from "html-minifier-terser";
-async function htmlMinify(html) {
-  const min = await minify(html, {
+async function htmlMinify(html, options) {
+  const minifyOptions = options || {
     collapseWhitespace: true,
     removeComments: true,
     preserveLineBreaks: true
-  });
-  return min.trimStart();
+  };
+  try {
+    const min = await minify(html, minifyOptions);
+    return min.trimStart();
+  } catch (e) {
+    console.error("failed to minify html:", e);
+    return html;
+  }
 }
 
 // src/cli/commands/dev.ts
 import glob2 from "tiny-glob";
-var __dirname2 = path4.dirname(fileURLToPath(import.meta.url));
-async function createServer(options) {
-  const app = express();
-  app.use(express.static("public"));
-  const middlewares = await getMiddlewares({ rootDir: options == null ? void 0 : options.rootDir });
-  middlewares.forEach((middleware) => app.use(middleware));
-  const port = parseInt(process.env.PORT || "4007");
-  console.log("\u{1F333} Root.js");
+import { dim } from "kleur/colors";
+
+// src/core/middleware.ts
+function rootProjectMiddleware(options) {
+  return (req, _, next) => {
+    req.rootConfig = Object.assign({}, options.rootConfig, {
+      rootDir: options.rootDir
+    });
+    next();
+  };
+}
+
+// src/cli/ports.ts
+import { createServer } from "node:net";
+function isPortOpen(port) {
+  return new Promise((resolve, reject) => {
+    const server = createServer();
+    server.on("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        resolve(false);
+        return;
+      }
+      reject(err);
+    });
+    server.on("close", () => {
+      resolve(true);
+    });
+    server.listen(port, () => {
+      server.close((err) => {
+        if (err) {
+          console.log(`error closing server: ${err}`);
+          reject(err);
+        }
+      });
+    });
+  });
+}
+async function findOpenPort(min, max) {
+  let port = min;
+  while (port <= max) {
+    const isOpen = await isPortOpen(port);
+    if (isOpen) {
+      return port;
+    }
+    port += 1;
+  }
+  throw new Error(`no ports open between ${min} and ${max}`);
+}
+
+// src/render/html-pretty.ts
+import { default as beautify } from "js-beautify";
+async function htmlPretty(html, options) {
+  const prettyOptions = options || {
+    indent_size: 0,
+    end_with_newline: true,
+    extra_liners: []
+  };
+  try {
+    const output = beautify.html(html, prettyOptions);
+    return output.trimStart();
+  } catch (e) {
+    console.error("failed to pretty html:", e);
+    return html;
+  }
+}
+
+// src/cli/commands/dev.ts
+var __dirname = path5.dirname(fileURLToPath(import.meta.url));
+async function dev(rootProjectDir) {
+  process.env.NODE_ENV = "development";
+  const rootDir = path5.resolve(rootProjectDir || process.cwd());
+  const defaultPort = parseInt(process.env.PORT || "4007");
+  const port = await findOpenPort(defaultPort, defaultPort + 10);
+  console.log();
+  console.log(`${dim("\u2503")} project:  ${rootDir}`);
+  console.log(`${dim("\u2503")} server:   http://localhost:${port}`);
+  console.log(`${dim("\u2503")} mode:     development`);
   console.log();
-  console.log(`Started server: http://localhost:${port}`);
-  app.listen(port);
+  const server = await createServer2({ rootDir, port });
+  server.listen(port);
 }
-async function getMiddlewares(options) {
-  const rootDir = (options == null ? void 0 : options.rootDir) || process.cwd();
+async function createServer2(options) {
+  const rootDir = path5.resolve((options == null ? void 0 : options.rootDir) || process.cwd());
   const rootConfig = await loadRootConfig(rootDir);
+  const port = options == null ? void 0 : options.port;
+  const server = express();
+  server.disable("x-powered-by");
+  server.use(rootProjectMiddleware({ rootDir, rootConfig }));
+  server.use(await viteServerMiddleware({ rootDir, rootConfig, port }));
+  server.use(rootDevRendererMiddleware());
+  const plugins = rootConfig.plugins || [];
+  await configureServerPlugins(
+    server,
+    async () => {
+      var _a;
+      const userMiddlewares = ((_a = rootConfig.server) == null ? void 0 : _a.middlewares) || [];
+      for (const middleware of userMiddlewares) {
+        server.use(middleware);
+      }
+      server.use(rootDevServerMiddleware());
+      server.use(rootDevServer404Middleware());
+    },
+    plugins,
+    { type: "dev" }
+  );
+  return server;
+}
+async function viteServerMiddleware(options) {
+  var _a, _b, _c;
+  const rootDir = options.rootDir;
+  const rootConfig = options.rootConfig;
   const viteConfig = rootConfig.vite || {};
-  const renderModulePath = path4.resolve(__dirname2, "./render.js");
-  const pages = [];
-  if (await isDirectory(path4.join(rootDir, "routes"))) {
-    const pageFiles = await glob2(path4.join(rootDir, "routes/**/*"));
+  let hmrOptions = (_a = viteConfig.server) == null ? void 0 : _a.hmr;
+  if (typeof hmrOptions === "undefined" && options.port) {
+    hmrOptions = { port: options.port + 10 };
+  }
+  const routeFiles = [];
+  if (await isDirectory(path5.join(rootDir, "routes"))) {
+    const pageFiles = await glob2("routes/**/*", { cwd: rootDir });
     pageFiles.forEach((file) => {
-      const parts = path4.parse(file);
+      const parts = path5.parse(file);
       if (!parts.name.startsWith("_") && isJsFile(parts.base)) {
-        pages.push(file);
-      }
-    });
-  }
-  const elements = [];
-  if (await isDirectory(path4.join(rootDir, "elements"))) {
-    const elementFiles = await glob2(path4.join(rootDir, "elements/**/*"));
-    elementFiles.forEach((file) => {
-      const parts = path4.parse(file);
-      if (isJsFile(parts.base)) {
-        elements.push(file);
+        routeFiles.push(file);
       }
     });
   }
+  const elementsMap = await getElements(rootConfig);
+  const elements = Object.values(elementsMap).map((mod) => mod.src);
   const bundleScripts = [];
-  if (await isDirectory(path4.join(rootDir, "bundles"))) {
-    const bundleFiles = await glob2(path4.join(rootDir, "bundles/*"));
+  if (await isDirectory(path5.join(rootDir, "bundles"))) {
+    const bundleFiles = await glob2("bundles/*", { cwd: rootDir });
     bundleFiles.forEach((file) => {
-      const parts = path4.parse(file);
+      const parts = path5.parse(file);
       if (isJsFile(parts.base)) {
         bundleScripts.push(file);
       }
     });
   }
+  const noExternalConfig = (_b = viteConfig.ssr) == null ? void 0 : _b.noExternal;
+  const noExternal = [];
+  if (noExternalConfig) {
+    if (Array.isArray(noExternalConfig)) {
+      noExternal.push(...noExternalConfig);
+    } else {
+      noExternal.push(noExternalConfig);
+    }
+  }
   const viteServer = await createViteServer({
     ...viteConfig,
-    server: { middlewareMode: true },
+    mode: "development",
+    root: rootDir,
+    publicDir: path5.join(rootDir, "public"),
+    server: {
+      ...viteConfig.server || {},
+      middlewareMode: true,
+      hmr: hmrOptions
+    },
     appType: "custom",
     optimizeDeps: {
-      include: [...pages, ...elements, ...bundleScripts]
+      ...viteConfig.optimizeDeps || {},
+      include: [
+        ...routeFiles,
+        ...elements,
+        ...bundleScripts,
+        ...((_c = viteConfig.optimizeDeps) == null ? void 0 : _c.include) || []
+      ]
     },
     ssr: {
-      noExternal: ["@blinkk/root"]
+      ...viteConfig.ssr || {},
+      noExternal: ["@blinkk/root", ...noExternal]
     },
     esbuild: {
+      ...viteConfig.esbuild || {},
       jsx: "automatic",
       jsxImportSource: "preact"
     },
-    plugins: [...viteConfig.plugins || [], pluginRoot({ rootDir, rootConfig })]
+    plugins: [
+      await pluginRoot({ rootConfig }),
+      ...viteConfig.plugins || [],
+      ...getVitePlugins(rootConfig.plugins || [])
+    ]
   });
-  const rootMiddleware = async (req, res, next) => {
-    const url = req.originalUrl;
-    const render = await viteServer.ssrLoadModule(renderModulePath);
-    const renderer = new render.Renderer(rootConfig);
+  return async (req, res, next) => {
     try {
-      const assetMap = new DevServerAssetMap(viteServer.moduleGraph);
-      const data = await renderer.render(url, {
-        assetMap
-      });
-      const html = await htmlMinify(await viteServer.transformIndexHtml(url, data.html || ""));
+      req.viteServer = viteServer;
+      viteServer.middlewares(req, res, next);
+    } catch (e) {
+      next(e);
+    }
+  };
+}
+function rootDevRendererMiddleware() {
+  const renderModulePath = path5.resolve(__dirname, "./render.js");
+  return async (req, _, next) => {
+    const rootConfig = req.rootConfig;
+    const viteServer = req.viteServer;
+    try {
+      const render = await viteServer.ssrLoadModule(renderModulePath);
+      const assetMap = new DevServerAssetMap(
+        rootConfig,
+        viteServer.moduleGraph
+      );
+      req.renderer = new render.Renderer(rootConfig, { assetMap });
+      next();
+    } catch (e) {
+      next(e);
+    }
+  };
+}
+function rootDevServerMiddleware() {
+  return async (req, res, next) => {
+    const url = req.path;
+    const renderer = req.renderer;
+    const viteServer = req.viteServer;
+    const rootConfig = req.rootConfig;
+    try {
+      const data = await renderer.render(url);
+      if (data.notFound || !data.html) {
+        next();
+        return;
+      }
+      let html = await viteServer.transformIndexHtml(url, data.html || "");
+      if (rootConfig.prettyHtml !== false) {
+        html = await htmlPretty(html, rootConfig.prettyHtmlOptions);
+      }
+      if (rootConfig.minifyHtml !== false) {
+        html = await htmlMinify(html, rootConfig.minifyHtmlOptions);
+      }
       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);
@@ -325,49 +608,112 @@ async function getMiddlewares(options) {
       }
     }
   };
-  return [viteServer.middlewares, rootMiddleware];
 }
-function dev(rootDir) {
-  createServer({ rootDir });
+function rootDevServer404Middleware() {
+  return async (req, res) => {
+    const url = req.path;
+    const ext = path5.extname(url);
+    const renderer = req.renderer;
+    if (!ext) {
+      const data = await renderer.renderDevServer404();
+      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");
+  };
 }
 
 // src/cli/commands/build.ts
-import path6 from "node:path";
+import path7 from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 import fsExtra2 from "fs-extra";
 import glob3 from "tiny-glob";
 import { build as viteBuild } from "vite";
 
 // src/render/asset-map/build-asset-map.ts
-import path5 from "path";
+import fs3 from "node:fs";
+import path6 from "node:path";
 var BuildAssetMap = class {
-  constructor(manifest) {
-    this.manifest = manifest;
-    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]));
-    });
+  constructor(rootConfig) {
+    this.rootConfig = rootConfig;
+    this.srcToAsset = /* @__PURE__ */ new Map();
   }
-  async get(moduleId) {
-    return this.moduleIdToAsset.get(moduleId) || null;
+  async get(src) {
+    const asset = this.srcToAsset.get(src);
+    if (asset) {
+      return asset;
+    }
+    const realSrc = realPathRelativeTo(this.rootConfig.rootDir, src);
+    if (realSrc !== src) {
+      const asset2 = this.srcToAsset.get(realSrc);
+      if (asset2) {
+        return asset2;
+      }
+    }
+    console.log(`could not find build asset: ${src}`);
+    return null;
+  }
+  add(asset) {
+    this.srcToAsset.set(asset.src, asset);
   }
   toJson() {
     const result = {};
-    for (const moduleId of this.moduleIdToAsset.keys()) {
-      result[moduleId] = this.moduleIdToAsset.get(moduleId).toJson();
+    for (const src of this.srcToAsset.keys()) {
+      result[src] = this.srcToAsset.get(src).toJson();
     }
     return result;
   }
+  static fromViteManifest(rootConfig, viteManifest, elementMap) {
+    const assetMap = new BuildAssetMap(rootConfig);
+    const elementFiles = /* @__PURE__ */ new Set();
+    Object.values(elementMap).forEach((elementModule) => {
+      elementFiles.add(elementModule.src);
+      const realSrc = realPathRelativeTo(rootConfig.rootDir, elementModule.src);
+      if (realSrc !== elementModule.src) {
+        elementFiles.add(realSrc);
+      }
+    });
+    Object.keys(viteManifest).forEach((manifestKey) => {
+      const src = manifestKey;
+      const manifestChunk = viteManifest[manifestKey];
+      const isElement = elementFiles.has(src);
+      const assetData = {
+        src,
+        assetUrl: `/${manifestChunk.file}`,
+        importedModules: manifestChunk.imports || [],
+        importedCss: (manifestChunk.css || []).map((relPath) => `/${relPath}`),
+        isElement
+      };
+      assetMap.add(new BuildAsset(assetMap, assetData));
+    });
+    return assetMap;
+  }
+  static fromRootManifest(rootConfig, rootManifest) {
+    const assetMap = new BuildAssetMap(rootConfig);
+    Object.keys(rootManifest).forEach((moduleId) => {
+      const assetData = rootManifest[moduleId];
+      assetMap.add(new BuildAsset(assetMap, assetData));
+    });
+    return assetMap;
+  }
 };
+function realPathRelativeTo(rootDir, src) {
+  const fullPath = path6.resolve(rootDir, src);
+  if (!fs3.existsSync(fullPath)) {
+    return src;
+  }
+  const realpath = fs3.realpathSync(path6.resolve(rootDir, src));
+  return path6.relative(rootDir, realpath);
+}
 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.src = assetData.src;
+    this.assetUrl = assetData.assetUrl;
+    this.importedModules = assetData.importedModules;
+    this.importedCss = assetData.importedCss;
+    this.isElement = assetData.isElement;
   }
   async getCssDeps() {
     const visited = /* @__PURE__ */ new Set();
@@ -385,21 +731,22 @@ var BuildAsset = class {
     if (!asset) {
       return;
     }
-    if (!asset.moduleId) {
+    if (!asset.src) {
       return;
     }
-    if (visited.has(asset.moduleId)) {
+    if (visited.has(asset.src)) {
       return;
     }
-    visited.add(asset.moduleId);
-    const parts = path5.parse(asset.assetUrl);
-    if ([".js", ".jsx", ".ts", ".tsx"].includes(parts.ext) && asset.moduleId.includes("/elements/")) {
+    visited.add(asset.src);
+    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 (src) => {
+        const importedAsset = await this.assetMap.get(src);
+        this.collectJs(importedAsset, urls, visited);
+      })
+    );
   }
   async collectCss(asset, urls, visited) {
     if (!asset) {
@@ -408,94 +755,112 @@ var BuildAsset = class {
     if (!asset.assetUrl) {
       return;
     }
-    if (visited.has(asset.moduleId)) {
+    if (visited.has(asset.src)) {
       return;
     }
-    visited.add(asset.moduleId);
+    visited.add(asset.src);
     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,
+      src: this.src,
       assetUrl: this.assetUrl,
       importedModules: this.importedModules,
-      importedCss: this.importedCss
+      importedCss: this.importedCss,
+      isElement: this.isElement
     };
   }
 };
 
 // src/cli/commands/build.ts
-var __dirname3 = path6.dirname(fileURLToPath2(import.meta.url));
-async function build(rootDir) {
-  console.log("\u{1F333} Root.js");
-  if (!rootDir) {
-    rootDir = process.cwd();
-  }
+import { dim as dim2, cyan } from "kleur/colors";
+var __dirname2 = path7.dirname(fileURLToPath2(import.meta.url));
+async function build(rootProjectDir, options) {
+  var _a, _b, _c, _d, _e;
+  const rootDir = path7.resolve(rootProjectDir || process.cwd());
   const rootConfig = await loadRootConfig(rootDir);
-  const distDir = path6.join(rootDir, "dist");
+  const distDir = path7.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 glob3(path6.join(rootDir, "routes/**/*"));
+  const routeFiles = [];
+  if (await isDirectory(path7.join(rootDir, "routes"))) {
+    const pageFiles = await glob3("routes/**/*", { cwd: rootDir });
     pageFiles.forEach((file) => {
-      const parts = path6.parse(file);
+      const parts = path7.parse(file);
       if (!parts.name.startsWith("_") && isJsFile(parts.base)) {
-        pages.push(file);
-      }
-    });
-  }
-  const elements = [];
-  if (await isDirectory(path6.join(rootDir, "elements"))) {
-    const elementFiles = await glob3(path6.join(rootDir, "elements/**/*"));
-    elementFiles.forEach((file) => {
-      const parts = path6.parse(file);
-      if (isJsFile(parts.base)) {
-        elements.push(file);
+        routeFiles.push(path7.resolve(rootDir, file));
       }
     });
   }
+  const elementsMap = await getElements(rootConfig);
+  const elements = Object.values(elementsMap).map(
+    (mod) => path7.resolve(rootDir, mod.src)
+  );
   const bundleScripts = [];
-  if (await isDirectory(path6.join(rootDir, "bundles"))) {
-    const bundleFiles = await glob3(path6.join(rootDir, "bundles/*"));
+  if (await isDirectory(path7.join(rootDir, "bundles"))) {
+    const bundleFiles = await glob3("bundles/*", { cwd: rootDir });
     bundleFiles.forEach((file) => {
-      const parts = path6.parse(file);
+      const parts = path7.parse(file);
       if (isJsFile(parts.base)) {
-        bundleScripts.push(file);
+        bundleScripts.push(path7.resolve(rootDir, file));
       }
     });
   }
   const viteConfig = rootConfig.vite || {};
+  const vitePlugins = [
+    pluginRoot({ rootConfig }),
+    ...viteConfig.plugins || [],
+    ...getVitePlugins(rootConfig.plugins || [])
+  ];
   const baseConfig = {
     ...viteConfig,
     root: rootDir,
+    mode,
     esbuild: {
       jsx: "automatic",
       jsxImportSource: "preact",
       treeShaking: true
     },
-    plugins: [...viteConfig.plugins || [], pluginRoot({ rootDir, rootConfig })]
+    plugins: vitePlugins
   };
+  const noExternalConfig = (_a = viteConfig.ssr) == null ? void 0 : _a.noExternal;
+  const noExternal = [];
+  if (noExternalConfig) {
+    if (Array.isArray(noExternalConfig)) {
+      noExternal.push(...noExternalConfig);
+    } else {
+      noExternal.push(noExternalConfig);
+    }
+  }
   await viteBuild({
     ...baseConfig,
-    mode: "production",
     publicDir: false,
     build: {
       rollupOptions: {
-        input: [path6.resolve(__dirname3, "./render.js")],
+        ...(_b = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _b.rollupOptions,
+        input: [path7.resolve(__dirname2, "./render.js")],
         output: {
           format: "esm",
-          chunkFileNames: "chunks/[name].[hash].js",
+          chunkFileNames: "chunks/[name].[hash].min.js",
           assetFileNames: "assets/[name].[hash][extname]"
         }
       },
-      outDir: path6.join(distDir, "server"),
+      outDir: path7.join(distDir, "server"),
       ssr: true,
       ssrManifest: false,
       cssCodeSplit: true,
@@ -505,23 +870,26 @@ async function build(rootDir) {
       reportCompressedSize: false
     },
     ssr: {
-      noExternal: ["@blinkk/root"]
+      ...viteConfig.ssr,
+      noExternal: ["@blinkk/root", ...noExternal]
     }
   });
   await viteBuild({
     ...baseConfig,
-    mode: "production",
     publicDir: false,
     build: {
       rollupOptions: {
-        input: [...pages, ...elements, ...bundleScripts],
+        ...(_c = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _c.rollupOptions,
+        input: [...routeFiles, ...elements, ...bundleScripts],
         output: {
           format: "esm",
-          chunkFileNames: "chunks/[name].[hash].js",
-          assetFileNames: "assets/[name].[hash][extname]"
+          entryFileNames: "assets/[name].[hash].min.js",
+          chunkFileNames: "chunks/[name].[hash].min.js",
+          assetFileNames: "assets/[name].[hash][extname]",
+          ...(_e = (_d = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _d.rollupOptions) == null ? void 0 : _e.output
         }
       },
-      outDir: path6.join(distDir, "client"),
+      outDir: path7.join(distDir, "client"),
       ssr: false,
       ssrManifest: false,
       manifest: true,
@@ -532,45 +900,282 @@ 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(
+    path7.join(distDir, "client/manifest.json")
+  );
+  const assetMap = BuildAssetMap.fromViteManifest(
+    rootConfig,
+    viteManifest,
+    elementsMap
+  );
+  const rootManifest = assetMap.toJson();
+  writeFile(
+    path7.join(distDir, "client/root-manifest.json"),
+    JSON.stringify(rootManifest, null, 2)
+  );
+  const buildDir = path7.join(distDir, "html");
+  const publicDir = path7.join(rootDir, "public");
+  if (fsExtra2.existsSync(path7.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"));
-  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");
+  console.log("\njs/css output:");
+  makeDir(path7.join(buildDir, "assets"));
+  makeDir(path7.join(buildDir, "chunks"));
+  Object.keys(rootManifest).forEach((src) => {
+    if (isRouteFile(src)) {
+      return;
+    }
+    const assetData = rootManifest[src];
+    const assetRelPath = assetData.assetUrl.slice(1);
+    const assetFrom = path7.join(distDir, "client", assetRelPath);
+    const assetTo = path7.join(buildDir, assetRelPath);
+    fsExtra2.copySync(assetFrom, assetTo);
+    printFileOutput(fileSize(assetTo), "dist/html/", assetRelPath);
+  });
+  if (!ssrOnly) {
+    const render = await import(path7.join(distDir, "server/render.js"));
+    const renderer = new render.Renderer(rootConfig, { assetMap });
+    const sitemap = await renderer.getSitemap();
+    console.log("\nhtml output:");
+    await Promise.all(
+      Object.keys(sitemap).map(async (urlPath) => {
+        const { route, params } = sitemap[urlPath];
+        const data = await renderer.renderRoute(route, {
+          routeParams: params
+        });
+        let outFilePath = path7.join(urlPath.slice(1), "index.html");
+        if (outFilePath.endsWith("404/index.html")) {
+          outFilePath = outFilePath.replace("404/index.html", "404.html");
+        }
+        const outPath = path7.join(buildDir, outFilePath);
+        let html = data.html || "";
+        if (rootConfig.prettyHtml !== false) {
+          html = await htmlPretty(html, rootConfig.prettyHtmlOptions);
+        }
+        if (rootConfig.minifyHtml !== false) {
+          html = await htmlMinify(html, rootConfig.minifyHtmlOptions);
+        }
+        await writeFile(outPath, html);
+        printFileOutput(fileSize(outPath), "dist/html/", outFilePath);
+      })
+    );
+  }
+}
+function isRouteFile(filepath) {
+  return filepath.startsWith("routes") && isJsFile(filepath);
+}
+function fileSize(filepath) {
+  const stats = fsExtra2.statSync(filepath);
+  const bytes = stats.size;
+  const k = 1024;
+  if (bytes < k) {
+    return (bytes / k).toFixed(2) + " kB";
+  }
+  const units = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + units[i];
+}
+function printFileOutput(fileSize2, outputDir, outputFile) {
+  const indent = " ".repeat(2);
+  const paddedSize = fileSize2.padStart(9, " ");
+  console.log(
+    `${indent}${dim2(paddedSize)}  ${dim2(outputDir)}${cyan(outputFile)}`
+  );
+}
+
+// src/cli/commands/preview.ts
+import path8 from "node:path";
+import { default as express2 } from "express";
+import { dim as dim3 } from "kleur/colors";
+import sirv from "sirv";
+import compression from "compression";
+async function preview(rootProjectDir) {
+  process.env.NODE_ENV = "development";
+  const rootDir = path8.resolve(rootProjectDir || process.cwd());
+  const server = await createServer3({ rootDir });
+  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(`${dim3("\u2503")} mode:     staging`);
+  console.log();
+  server.listen(port);
+}
+async function createServer3(options) {
+  const rootDir = options.rootDir;
+  const rootConfig = await loadRootConfig(rootDir);
+  const distDir = path8.join(rootDir, "dist");
+  const server = express2();
+  server.disable("x-powered-by");
+  server.use(compression());
+  server.use(rootProjectMiddleware({ rootDir, rootConfig }));
+  server.use(await rootPreviewRendererMiddleware({ rootConfig, distDir }));
+  const plugins = rootConfig.plugins || [];
+  configureServerPlugins(
+    server,
+    async () => {
+      var _a;
+      const userMiddlewares = ((_a = rootConfig.server) == null ? void 0 : _a.middlewares) || [];
+      userMiddlewares.forEach((middleware) => {
+        server.use(middleware);
+      });
+      const publicDir = path8.join(distDir, "html");
+      server.use(sirv(publicDir, { dev: false }));
+      server.use(rootPreviewServerMiddleware());
+    },
+    plugins,
+    { type: "preview" }
+  );
+  return server;
+}
+async function rootPreviewRendererMiddleware(options) {
+  const { distDir, rootConfig } = options;
+  const render = await import(path8.join(distDir, "server/render.js"));
+  const manifestPath = path8.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(rootConfig, rootManifest);
+  const renderer = new render.Renderer(rootConfig, { assetMap });
+  return async (req, _, next) => {
+    req.renderer = renderer;
+    next();
+  };
+}
+function rootPreviewServerMiddleware() {
+  return async (req, res, next) => {
+    const rootConfig = req.rootConfig;
+    const renderer = req.renderer;
+    try {
+      const url = req.path;
+      const data = await renderer.render(url);
+      if (data.notFound || !data.html) {
+        next();
+        return;
+      }
+      let html = data.html || "";
+      if (rootConfig.prettyHtml !== false) {
+        html = await htmlPretty(html, rootConfig.prettyHtmlOptions);
+      }
+      if (rootConfig.minifyHtml !== false) {
+        html = await htmlMinify(html, rootConfig.minifyHtmlOptions);
+      }
+      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 html = await htmlMinify(data.html || "");
-    await writeFile(outPath, html);
-    const relPath = outPath.slice(path6.dirname(distDir).length + 1);
-    console.log(`saved ${relPath}`);
-  }));
+  };
 }
 
 // src/cli/commands/start.ts
-async function start() {
-  console.log("SSR production server is coming soon");
+import path9 from "node:path";
+import { default as express3 } from "express";
+import { dim as dim4 } from "kleur/colors";
+import sirv2 from "sirv";
+import compression2 from "compression";
+async function start(rootProjectDir) {
+  process.env.NODE_ENV = "production";
+  const rootDir = path9.resolve(rootProjectDir || process.cwd());
+  const server = await createServer4({ rootDir });
+  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(`${dim4("\u2503")} mode:     production`);
+  console.log();
+  server.listen(port);
+}
+async function createServer4(options) {
+  const rootDir = options.rootDir;
+  const rootConfig = await loadRootConfig(rootDir);
+  const distDir = path9.join(rootDir, "dist");
+  const server = express3();
+  server.disable("x-powered-by");
+  server.use(compression2());
+  server.use(rootProjectMiddleware({ rootDir, rootConfig }));
+  server.use(await rootProdRendererMiddleware({ rootConfig, distDir }));
+  const plugins = rootConfig.plugins || [];
+  configureServerPlugins(
+    server,
+    async () => {
+      var _a;
+      const userMiddlewares = ((_a = rootConfig.server) == null ? void 0 : _a.middlewares) || [];
+      userMiddlewares.forEach((middleware) => {
+        server.use(middleware);
+      });
+      const publicDir = path9.join(distDir, "html");
+      server.use(sirv2(publicDir, { dev: false }));
+      server.use(rootProdServerMiddleware());
+    },
+    plugins,
+    { type: "prod" }
+  );
+  return server;
+}
+async function rootProdRendererMiddleware(options) {
+  const { distDir, rootConfig } = options;
+  const render = await import(path9.join(distDir, "server/render.js"));
+  const manifestPath = path9.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(rootConfig, rootManifest);
+  const renderer = new render.Renderer(rootConfig, { assetMap });
+  return async (req, _, next) => {
+    req.renderer = renderer;
+    next();
+  };
+}
+function rootProdServerMiddleware() {
+  return async (req, res, next) => {
+    const rootConfig = req.rootConfig;
+    const renderer = req.renderer;
+    try {
+      const url = req.path;
+      const data = await renderer.render(url);
+      if (data.notFound || !data.html) {
+        next();
+        return;
+      }
+      let html = data.html || "";
+      if (rootConfig.prettyHtml !== false) {
+        html = await htmlPretty(html, rootConfig.prettyHtmlOptions);
+      }
+      if (rootConfig.minifyHtml !== false) {
+        html = await htmlMinify(html, rootConfig.minifyHtmlOptions);
+      }
+      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);
+      }
+    }
+  };
 }
 export {
   build,
   dev,
+  preview,
   start
 };
 //# sourceMappingURL=cli.js.map