@blinkk/root 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/cli.js

@@ -3,7 +3,7 @@ import {
   htmlPretty,
   isValidTagName,
   parseTagNames
-} from "./chunk-GGQGZ7ZE.js";
+} from "./chunk-WVRC46JG.js";
 import {
   copyGlob,
   createViteServer,
@@ -22,186 +22,173 @@ import {
   getVitePlugins
 } from "./chunk-DTEQ2AIW.js";
 
-// src/cli/commands/dev.ts
+// src/cli/commands/build.ts
 import path3 from "node:path";
 import { fileURLToPath } from "node:url";
-import { default as express } from "express";
+import fsExtra from "fs-extra";
+import glob2 from "tiny-glob";
+import { build as viteBuild } from "vite";
 
-// src/render/asset-map/dev-asset-map.ts
+// src/render/asset-map/build-asset-map.ts
+import fs from "node:fs";
 import path from "node:path";
-import { searchForWorkspaceRoot } from "vite";
-var DevServerAssetMap = class {
-  constructor(rootConfig, moduleGraph) {
+var BuildAssetMap = class {
+  constructor(rootConfig) {
     this.rootConfig = rootConfig;
-    this.moduleGraph = moduleGraph;
+    this.srcToAsset = /* @__PURE__ */ new Map();
   }
   async get(src) {
-    const file = path.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
-      });
+    const asset = this.srcToAsset.get(src);
+    if (asset) {
+      return asset;
     }
-    if (file.startsWith(this.rootConfig.rootDir)) {
-      const assetUrl = file.slice(this.rootConfig.rootDir.length);
-      return {
-        src,
-        assetUrl,
-        getCssDeps: async () => [],
-        getJsDeps: async () => [assetUrl]
-      };
+    const realSrc = realPathRelativeTo(this.rootConfig.rootDir, src);
+    if (realSrc !== src) {
+      const asset2 = this.srcToAsset.get(realSrc);
+      if (asset2) {
+        return asset2;
+      }
     }
-    const workspaceRoot = searchForWorkspaceRoot(this.rootConfig.rootDir);
-    if (await directoryContains(workspaceRoot, file)) {
-      const assetUrl = `/@fs/${file}`;
-      return {
+    console.log(`could not find build asset: ${src}`);
+    return null;
+  }
+  add(asset) {
+    this.srcToAsset.set(asset.src, asset);
+  }
+  toJson() {
+    const result = {};
+    for (const src of this.srcToAsset.keys()) {
+      result[src] = this.srcToAsset.get(src).toJson();
+    }
+    return result;
+  }
+  static fromViteManifest(rootConfig, clientManifest, elementsGraph) {
+    const assetMap = new BuildAssetMap(rootConfig);
+    const elementFiles = /* @__PURE__ */ new Set();
+    Object.values(elementsGraph.sourceFiles).forEach((elementSource) => {
+      elementFiles.add(elementSource.relPath);
+      const realSrc = realPathRelativeTo(
+        rootConfig.rootDir,
+        elementSource.relPath
+      );
+      if (realSrc !== elementSource.filePath) {
+        elementFiles.add(realSrc);
+      }
+    });
+    Object.keys(clientManifest).forEach((manifestKey) => {
+      const src = manifestKey;
+      const manifestChunk = clientManifest[manifestKey];
+      const isElement = elementFiles.has(src);
+      const assetUrl = src.startsWith("routes/") && isJsFile(src) ? "" : `/${manifestChunk.file}`;
+      const assetData = {
         src,
         assetUrl,
-        getCssDeps: async () => [],
-        getJsDeps: async () => [assetUrl]
+        importedModules: manifestChunk.imports || [],
+        importedCss: (manifestChunk.css || []).map((relPath) => `/${relPath}`),
+        isElement
       };
-    }
-    console.log(`could not find asset in asset map: ${src}`);
-    return null;
+      assetMap.add(new BuildAsset(assetMap, assetData));
+    });
+    return assetMap;
   }
-  filePathToSrc(file) {
-    return path.relative(this.rootConfig.rootDir, file);
+  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;
   }
 };
-var DevServerAsset = class {
-  constructor(src, options) {
-    this.src = src;
-    this.assetMap = options.assetMap;
-    this.viteModule = options.viteModule;
-    this.moduleId = this.viteModule.id;
-    this.assetUrl = this.viteModule.url;
+function realPathRelativeTo(rootDir, src) {
+  const fullPath = path.resolve(rootDir, src);
+  if (!fs.existsSync(fullPath)) {
+    return src;
+  }
+  const realpath = fs.realpathSync(path.resolve(rootDir, src));
+  return path.relative(rootDir, realpath);
+}
+var BuildAsset = class {
+  constructor(assetMap, assetData) {
+    this.assetMap = assetMap;
+    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();
     const deps = /* @__PURE__ */ new Set();
-    this.collectCss(this, deps, visited);
+    await this.collectCss(this, deps, visited);
     return Array.from(deps);
   }
   async getJsDeps() {
     const visited = /* @__PURE__ */ new Set();
     const deps = /* @__PURE__ */ new Set();
-    this.collectJs(this, deps, visited);
+    await this.collectJs(this, deps, visited);
     return Array.from(deps);
   }
-  getImportedModules() {
-    return this.viteModule.importedModules;
-  }
-  collectJs(asset, urls, visited) {
+  async collectJs(asset, urls, visited) {
     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 = path.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);
     }
-    asset.getImportedModules().forEach((viteModule) => {
-      if (viteModule.file) {
-        const src = this.assetMap.filePathToSrc(viteModule.file);
-        const importedAsset = new DevServerAsset(src, {
-          assetMap: this.assetMap,
-          viteModule
-        });
+    await Promise.all(
+      asset.importedModules.map(async (src) => {
+        const importedAsset = await this.assetMap.get(src);
         this.collectJs(importedAsset, urls, visited);
-      }
-    });
+      })
+    );
   }
-  collectCss(asset, urls, visited) {
+  async collectCss(asset, urls, visited) {
     if (!asset) {
       return;
     }
-    if (!asset.assetUrl) {
+    if (!asset.src) {
       return;
     }
-    if (visited.has(asset.assetUrl)) {
+    if (visited.has(asset.src)) {
       return;
     }
-    visited.add(asset.assetUrl);
-    if (asset.src.endsWith(".scss")) {
-      const parts = path.parse(asset.src);
-      if (!parts.name.startsWith("_")) {
-        urls.add(asset.assetUrl);
-      }
+    visited.add(asset.src);
+    if (asset.importedCss) {
+      asset.importedCss.forEach((cssUrl) => urls.add(cssUrl));
     }
-    asset.getImportedModules().forEach((viteModule) => {
-      if (viteModule.file) {
-        const src = this.assetMap.filePathToSrc(viteModule.file);
-        const importedAsset = new DevServerAsset(src, {
-          assetMap: this.assetMap,
-          viteModule
-        });
+    await Promise.all(
+      asset.importedModules.map(async (moduleId) => {
+        const importedAsset = await this.assetMap.get(moduleId);
         this.collectCss(importedAsset, urls, visited);
-      }
-    });
+      })
+    );
+  }
+  toJson() {
+    return {
+      src: this.src,
+      assetUrl: this.assetUrl,
+      importedModules: this.importedModules,
+      importedCss: this.importedCss,
+      isElement: this.isElement
+    };
   }
 };
 
-// src/cli/commands/dev.ts
-import { dim } from "kleur/colors";
-
-// src/core/middleware.ts
-function rootProjectMiddleware(options) {
-  return (req, _, next) => {
-    req.rootConfig = options.rootConfig;
-    next();
-  };
-}
-
-// src/utils/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/cli/commands/build.ts
+import { dim, cyan } from "kleur/colors";
 
 // src/node/element-graph.ts
-import fs from "node:fs";
+import fs2 from "node:fs";
 import path2 from "node:path";
-import { searchForWorkspaceRoot as searchForWorkspaceRoot2 } from "vite";
+import { searchForWorkspaceRoot } from "vite";
 import glob from "tiny-glob";
 var ElementGraph = class {
   constructor(sourceFiles) {
@@ -209,6 +196,20 @@ var ElementGraph = class {
     this.deps = {};
     this.sourceFiles = sourceFiles;
   }
+  toJson() {
+    for (const tagName in this.sourceFiles) {
+      this.deps[tagName] ??= this.parseDepsFromSource(tagName);
+    }
+    return {
+      sourceFiles: this.sourceFiles,
+      deps: this.deps
+    };
+  }
+  static fromJson(data) {
+    const graph = new ElementGraph(data.sourceFiles);
+    graph.deps = data.deps;
+    return graph;
+  }
   getDeps(tagName, visited) {
     visited ??= /* @__PURE__ */ new Set();
     if (visited.has(tagName)) {
@@ -229,7 +230,7 @@ var ElementGraph = class {
     if (!srcFile) {
       throw new Error(`could not find file path for tagName <${tagName}>`);
     }
-    const src = fs.readFileSync(srcFile.filePath, "utf-8");
+    const src = fs2.readFileSync(srcFile.filePath, "utf-8");
     const tagNames = parseTagNames(src);
     const deps = /* @__PURE__ */ new Set();
     for (const depTagName of tagNames) {
@@ -243,7 +244,7 @@ var ElementGraph = class {
 async function getElements(rootConfig) {
   var _a, _b;
   const rootDir = rootConfig.rootDir;
-  const workspaceRoot = searchForWorkspaceRoot2(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) || [];
@@ -280,321 +281,30 @@ async function getElements(rootConfig) {
   return graph;
 }
 
-// src/cli/commands/dev.ts
-import glob2 from "tiny-glob";
+// src/cli/commands/build.ts
 var __dirname = path3.dirname(fileURLToPath(import.meta.url));
-async function dev(rootProjectDir) {
-  process.env.NODE_ENV = "development";
+async function build(rootProjectDir, options) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const mode = (options == null ? void 0 : options.mode) || "production";
+  process.env.NODE_ENV = mode;
   const rootDir = path3.resolve(rootProjectDir || process.cwd());
-  const defaultPort = parseInt(process.env.PORT || "4007");
-  const port = await findOpenPort(defaultPort, defaultPort + 10);
+  const rootConfig = await loadRootConfig(rootDir, { command: "build" });
+  const distDir = path3.join(rootDir, "dist");
+  const ssrOnly = (options == null ? void 0 : options.ssrOnly) || false;
   console.log();
   console.log(`${dim("\u2503")} project:  ${rootDir}`);
-  console.log(`${dim("\u2503")} server:   http://localhost:${port}`);
-  console.log(`${dim("\u2503")} mode:     development`);
-  console.log();
-  const server = await createServer2({ rootDir, port });
-  server.listen(port);
-}
-async function createServer2(options) {
-  const rootDir = path3.resolve((options == null ? void 0 : options.rootDir) || process.cwd());
-  const rootConfig = await loadRootConfig(rootDir, { command: "dev" });
-  const port = options == null ? void 0 : options.port;
-  const server = express();
-  server.disable("x-powered-by");
-  server.use(rootProjectMiddleware({ rootConfig }));
-  server.use(await viteServerMiddleware({ rootConfig, port }));
-  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());
-      server.use(rootDevServer500Middleware());
-    },
-    plugins,
-    { type: "dev", rootConfig }
-  );
-  return server;
-}
-async function viteServerMiddleware(options) {
-  const rootConfig = options.rootConfig;
-  const rootDir = rootConfig.rootDir;
-  const elementGraph = await getElements(rootConfig);
-  const elements = Object.values(elementGraph.sourceFiles).map((sourceFile) => {
-    return sourceFile.relPath;
-  });
-  const bundleScripts = [];
-  if (await isDirectory(path3.join(rootDir, "bundles"))) {
-    const bundleFiles = await glob2("bundles/*", { cwd: rootDir });
-    bundleFiles.forEach((file) => {
-      const parts = path3.parse(file);
-      if (isJsFile(parts.base)) {
-        bundleScripts.push(file);
-      }
-    });
-  }
-  const optimizeDeps = [...elements, ...bundleScripts];
-  const viteServer = await createViteServer(rootConfig, {
-    port: options.port,
-    optimizeDeps
-  });
-  return async (req, res, next) => {
-    try {
-      req.viteServer = viteServer;
-      const renderModulePath = path3.resolve(__dirname, "./render.js");
-      const render = await viteServer.ssrLoadModule(
-        renderModulePath
-      );
-      const assetMap = new DevServerAssetMap(
-        rootConfig,
-        viteServer.moduleGraph
-      );
-      req.renderer = new render.Renderer(rootConfig, { assetMap, elementGraph });
-      viteServer.middlewares(req, res, next);
-    } catch (e) {
-      next(e);
-    }
-  };
-}
-function rootDevServerMiddleware() {
-  return async (req, res, next) => {
-    const renderer = req.renderer;
-    const viteServer = req.viteServer;
-    try {
-      await renderer.handle(req, res, next);
-    } catch (err) {
-      viteServer.ssrFixStacktrace(err);
-      next(err);
-    }
-  };
-}
-function rootDevServer404Middleware() {
-  return async (req, res) => {
-    console.error(`\u2753 404 ${req.originalUrl}`);
-    if (req.renderer) {
-      const url = req.path;
-      const ext = path3.extname(url);
-      if (!ext) {
-        const renderer = req.renderer;
-        const data = await renderer.renderDevServer404(req);
-        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");
-  };
-}
-function rootDevServer500Middleware() {
-  return async (err, req, res, next) => {
-    console.error(`\u2757 500 ${req.originalUrl}`);
-    console.error(String(err.stack || err));
-    if (req.renderer) {
-      const url = req.path;
-      const ext = path3.extname(url);
-      if (!ext) {
-        const renderer = req.renderer;
-        const data = await renderer.renderDevServer500(req, err);
-        const html = data.html || "";
-        res.status(500).set({ "Content-Type": "text/html" }).end(html);
-        return;
-      }
-    }
-    next(err);
-  };
-}
-
-// src/cli/commands/build.ts
-import path5 from "node:path";
-import { fileURLToPath as fileURLToPath2 } from "node:url";
-import fsExtra from "fs-extra";
-import glob3 from "tiny-glob";
-import { build as viteBuild } from "vite";
-
-// src/render/asset-map/build-asset-map.ts
-import fs2 from "node:fs";
-import path4 from "node:path";
-var BuildAssetMap = class {
-  constructor(rootConfig) {
-    this.rootConfig = rootConfig;
-    this.srcToAsset = /* @__PURE__ */ new Map();
-  }
-  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 src of this.srcToAsset.keys()) {
-      result[src] = this.srcToAsset.get(src).toJson();
-    }
-    return result;
-  }
-  static fromViteManifest(rootConfig, clientManifest, elementsGraph) {
-    const assetMap = new BuildAssetMap(rootConfig);
-    const elementFiles = /* @__PURE__ */ new Set();
-    Object.values(elementsGraph.sourceFiles).forEach((elementSource) => {
-      elementFiles.add(elementSource.relPath);
-      const realSrc = realPathRelativeTo(
-        rootConfig.rootDir,
-        elementSource.relPath
-      );
-      if (realSrc !== elementSource.filePath) {
-        elementFiles.add(realSrc);
-      }
-    });
-    Object.keys(clientManifest).forEach((manifestKey) => {
-      const src = manifestKey;
-      const manifestChunk = clientManifest[manifestKey];
-      const isElement = elementFiles.has(src);
-      const assetUrl = src.startsWith("routes/") ? "" : `/${manifestChunk.file}`;
-      const assetData = {
-        src,
-        assetUrl,
-        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 = path4.resolve(rootDir, src);
-  if (!fs2.existsSync(fullPath)) {
-    return src;
-  }
-  const realpath = fs2.realpathSync(path4.resolve(rootDir, src));
-  return path4.relative(rootDir, realpath);
-}
-var BuildAsset = class {
-  constructor(assetMap, assetData) {
-    this.assetMap = assetMap;
-    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();
-    const deps = /* @__PURE__ */ new Set();
-    await this.collectCss(this, deps, visited);
-    return Array.from(deps);
-  }
-  async getJsDeps() {
-    const visited = /* @__PURE__ */ new Set();
-    const deps = /* @__PURE__ */ new Set();
-    await this.collectJs(this, deps, visited);
-    return Array.from(deps);
-  }
-  async collectJs(asset, urls, visited) {
-    if (!asset) {
-      return;
-    }
-    if (!asset.src) {
-      return;
-    }
-    if (visited.has(asset.src)) {
-      return;
-    }
-    visited.add(asset.src);
-    if (asset.isElement) {
-      urls.add(asset.assetUrl);
-    }
-    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) {
-      return;
-    }
-    if (!asset.src) {
-      return;
-    }
-    if (visited.has(asset.src)) {
-      return;
-    }
-    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);
-      })
-    );
-  }
-  toJson() {
-    return {
-      src: this.src,
-      assetUrl: this.assetUrl,
-      importedModules: this.importedModules,
-      importedCss: this.importedCss,
-      isElement: this.isElement
-    };
-  }
-};
-
-// src/cli/commands/build.ts
-import { dim as dim2, cyan } from "kleur/colors";
-var __dirname2 = path5.dirname(fileURLToPath2(import.meta.url));
-async function build(rootProjectDir, options) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const mode = (options == null ? void 0 : options.mode) || "production";
-  process.env.NODE_ENV = mode;
-  const rootDir = path5.resolve(rootProjectDir || process.cwd());
-  const rootConfig = await loadRootConfig(rootDir, { command: "build" });
-  const distDir = path5.join(rootDir, "dist");
-  const ssrOnly = (options == null ? void 0 : options.ssrOnly) || false;
-  console.log();
-  console.log(`${dim2("\u2503")} project:  ${rootDir}`);
-  console.log(`${dim2("\u2503")} output:   ${distDir}/html`);
-  console.log(`${dim2("\u2503")} mode:     ${mode}`);
+  console.log(`${dim("\u2503")} output:   ${distDir}/html`);
+  console.log(`${dim("\u2503")} mode:     ${mode}`);
   console.log();
   await rmDir(distDir);
   await makeDir(distDir);
   const routeFiles = [];
-  if (await isDirectory(path5.join(rootDir, "routes"))) {
-    const pageFiles = await glob3("routes/**/*", { cwd: rootDir });
+  if (await isDirectory(path3.join(rootDir, "routes"))) {
+    const pageFiles = await glob2("routes/**/*", { cwd: rootDir });
     pageFiles.forEach((file) => {
-      const parts = path5.parse(file);
+      const parts = path3.parse(file);
       if (!parts.name.startsWith("_") && isJsFile(parts.base)) {
-        routeFiles.push(path5.resolve(rootDir, file));
+        routeFiles.push(path3.resolve(rootDir, file));
       }
     });
   }
@@ -603,12 +313,12 @@ async function build(rootProjectDir, options) {
     return sourceFile.filePath;
   });
   const bundleScripts = [];
-  if (await isDirectory(path5.join(rootDir, "bundles"))) {
-    const bundleFiles = await glob3("bundles/*", { cwd: rootDir });
+  if (await isDirectory(path3.join(rootDir, "bundles"))) {
+    const bundleFiles = await glob2("bundles/*", { cwd: rootDir });
     bundleFiles.forEach((file) => {
-      const parts = path5.parse(file);
+      const parts = path3.parse(file);
       if (isJsFile(parts.base)) {
-        bundleScripts.push(path5.resolve(rootDir, file));
+        bundleScripts.push(path3.resolve(rootDir, file));
       }
     });
   }
@@ -631,7 +341,7 @@ async function build(rootProjectDir, options) {
     plugins: vitePlugins
   };
   const ssrInput = {
-    render: path5.resolve(__dirname2, "./render.js")
+    render: path3.resolve(__dirname, "./render.js")
   };
   rootPlugins.forEach((plugin) => {
     if (plugin.ssrInput) {
@@ -661,7 +371,7 @@ async function build(rootProjectDir, options) {
           assetFileNames: "assets/[name].[hash][extname]"
         }
       },
-      outDir: path5.join(distDir, "server"),
+      outDir: path3.join(distDir, "server"),
       ssr: true,
       ssrManifest: false,
       cssCodeSplit: true,
@@ -692,7 +402,7 @@ async function build(rootProjectDir, options) {
           ...(_e = (_d = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _d.rollupOptions) == null ? void 0 : _e.output
         }
       },
-      outDir: path5.join(distDir, "routes"),
+      outDir: path3.join(distDir, "routes"),
       ssr: false,
       ssrManifest: false,
       manifest: true,
@@ -721,7 +431,7 @@ async function build(rootProjectDir, options) {
             ...(_h = (_g = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _g.rollupOptions) == null ? void 0 : _h.output
           }
         },
-        outDir: path5.join(distDir, "client"),
+        outDir: path3.join(distDir, "client"),
         ssr: false,
         ssrManifest: false,
         manifest: true,
@@ -732,136 +442,451 @@ async function build(rootProjectDir, options) {
         reportCompressedSize: false
       }
     });
-  } else {
-    await writeFile(path5.join(distDir, "client/manifest.json"), "{}");
-  }
-  await copyGlob(
-    "*.css",
-    path5.join(distDir, "routes/assets"),
-    path5.join(distDir, "client/assets")
-  );
-  const routesManifest = await loadJson(
-    path5.join(distDir, "routes/manifest.json")
-  );
-  const clientManifest = await loadJson(
-    path5.join(distDir, "client/manifest.json")
-  );
-  function collectRouteCss(asset, cssDeps, visited) {
-    if (!asset || !asset.file || visited.has(asset.file)) {
-      return;
-    }
-    visited.add(asset.file);
-    if (asset.css) {
-      asset.css.forEach((dep) => cssDeps.add(dep));
-    }
-    if (asset.imports) {
-      asset.imports.forEach((manifestKey) => {
-        collectRouteCss(routesManifest[manifestKey], cssDeps, visited);
+  } else {
+    await writeFile(path3.join(distDir, "client/manifest.json"), "{}");
+  }
+  await copyGlob(
+    "*.css",
+    path3.join(distDir, "routes/assets"),
+    path3.join(distDir, "client/assets")
+  );
+  const routesManifest = await loadJson(
+    path3.join(distDir, "routes/manifest.json")
+  );
+  const clientManifest = await loadJson(
+    path3.join(distDir, "client/manifest.json")
+  );
+  function collectRouteCss(asset, cssDeps, visited) {
+    if (!asset || !asset.file || visited.has(asset.file)) {
+      return;
+    }
+    visited.add(asset.file);
+    if (asset.css) {
+      asset.css.forEach((dep) => cssDeps.add(dep));
+    }
+    if (asset.imports) {
+      asset.imports.forEach((manifestKey) => {
+        collectRouteCss(routesManifest[manifestKey], cssDeps, visited);
+      });
+    }
+  }
+  Object.keys(routesManifest).forEach((manifestKey) => {
+    const asset = routesManifest[manifestKey];
+    if (asset.isEntry) {
+      const visited = /* @__PURE__ */ new Set();
+      const cssDeps = /* @__PURE__ */ new Set();
+      collectRouteCss(asset, cssDeps, visited);
+      asset.css = Array.from(cssDeps);
+      asset.imports = [];
+      clientManifest[manifestKey] = asset;
+    } else if (asset.file.endsWith(".css")) {
+      clientManifest[manifestKey] = asset;
+    }
+  });
+  const assetMap = BuildAssetMap.fromViteManifest(
+    rootConfig,
+    clientManifest,
+    elementGraph
+  );
+  const rootManifest = assetMap.toJson();
+  await writeFile(
+    path3.join(distDir, "client/root-manifest.json"),
+    JSON.stringify(rootManifest, null, 2)
+  );
+  const elementGraphJson = elementGraph.toJson();
+  await writeFile(
+    path3.join(distDir, "client/root-element-graph.json"),
+    JSON.stringify(elementGraphJson, null, 2)
+  );
+  const buildDir = path3.join(distDir, "html");
+  const publicDir = path3.join(rootDir, "public");
+  if (fsExtra.existsSync(path3.join(rootDir, "public"))) {
+    fsExtra.copySync(publicDir, buildDir, { dereference: true });
+  } else {
+    await makeDir(buildDir);
+  }
+  await makeDir(path3.join(buildDir, "assets"));
+  await makeDir(path3.join(buildDir, "chunks"));
+  console.log("\njs/css output:");
+  await Promise.all(
+    Object.keys(rootManifest).map(async (src) => {
+      if (isRouteFile(src)) {
+        return;
+      }
+      const assetData = rootManifest[src];
+      if (!assetData.assetUrl) {
+        return;
+      }
+      const assetRelPath = assetData.assetUrl.slice(1);
+      const assetFrom = path3.join(distDir, "client", assetRelPath);
+      const assetTo = path3.join(buildDir, assetRelPath);
+      if (!await fileExists(assetFrom)) {
+        console.log(`${assetFrom} does not exist`);
+        return;
+      }
+      await fsExtra.copy(assetFrom, assetTo);
+      printFileOutput(fileSize(assetTo), "dist/html/", assetRelPath);
+    })
+  );
+  if (!ssrOnly) {
+    const render = await import(path3.join(distDir, "server/render.js"));
+    const renderer = new render.Renderer(rootConfig, { assetMap, elementGraph });
+    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
+        });
+        if (data.notFound) {
+          return;
+        }
+        let outFilePath = path3.join(urlPath.slice(1), "index.html");
+        if (outFilePath.endsWith("404/index.html")) {
+          outFilePath = outFilePath.replace("404/index.html", "404.html");
+        }
+        const outPath = path3.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 = fsExtra.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}${dim(paddedSize)}  ${dim(outputDir)}${cyan(outputFile)}`
+  );
+}
+
+// src/cli/commands/dev.ts
+import path5 from "node:path";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+import { default as express } from "express";
+
+// src/render/asset-map/dev-asset-map.ts
+import path4 from "node:path";
+import { searchForWorkspaceRoot as searchForWorkspaceRoot2 } from "vite";
+var DevServerAssetMap = class {
+  constructor(rootConfig, moduleGraph) {
+    this.rootConfig = rootConfig;
+    this.moduleGraph = moduleGraph;
+  }
+  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]
+      };
+    }
+    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(src, options) {
+    this.src = src;
+    this.assetMap = options.assetMap;
+    this.viteModule = options.viteModule;
+    this.moduleId = this.viteModule.id;
+    this.assetUrl = this.viteModule.url;
+  }
+  async getCssDeps() {
+    const visited = /* @__PURE__ */ new Set();
+    const deps = /* @__PURE__ */ new Set();
+    this.collectCss(this, deps, visited);
+    return Array.from(deps);
+  }
+  async getJsDeps() {
+    const visited = /* @__PURE__ */ new Set();
+    const deps = /* @__PURE__ */ new Set();
+    this.collectJs(this, deps, visited);
+    return Array.from(deps);
+  }
+  getImportedModules() {
+    return this.viteModule.importedModules;
+  }
+  collectJs(asset, urls, visited) {
+    if (!asset) {
+      return;
+    }
+    if (!asset.moduleId) {
+      return;
+    }
+    if (visited.has(asset.moduleId)) {
+      return;
+    }
+    visited.add(asset.moduleId);
+    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.file) {
+        const src = this.assetMap.filePathToSrc(viteModule.file);
+        const importedAsset = new DevServerAsset(src, {
+          assetMap: this.assetMap,
+          viteModule
+        });
+        this.collectJs(importedAsset, urls, visited);
+      }
+    });
+  }
+  collectCss(asset, urls, visited) {
+    if (!asset) {
+      return;
+    }
+    if (!asset.assetUrl) {
+      return;
+    }
+    if (visited.has(asset.assetUrl)) {
+      return;
+    }
+    visited.add(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.file) {
+        const src = this.assetMap.filePathToSrc(viteModule.file);
+        const importedAsset = new DevServerAsset(src, {
+          assetMap: this.assetMap,
+          viteModule
+        });
+        this.collectCss(importedAsset, urls, visited);
+      }
+    });
+  }
+};
+
+// src/cli/commands/dev.ts
+import { dim as dim2 } from "kleur/colors";
+
+// src/core/middleware.ts
+function rootProjectMiddleware(options) {
+  return (req, _, next) => {
+    req.rootConfig = options.rootConfig;
+    next();
+  };
+}
+
+// src/utils/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);
+        }
       });
-    }
-  }
-  Object.keys(routesManifest).forEach((manifestKey) => {
-    const asset = routesManifest[manifestKey];
-    if (asset.isEntry) {
-      const visited = /* @__PURE__ */ new Set();
-      const cssDeps = /* @__PURE__ */ new Set();
-      collectRouteCss(asset, cssDeps, visited);
-      asset.css = Array.from(cssDeps);
-      asset.imports = [];
-      clientManifest[manifestKey] = asset;
-    } else if (asset.file.endsWith(".css")) {
-      clientManifest[manifestKey] = asset;
-    }
+    });
   });
-  const assetMap = BuildAssetMap.fromViteManifest(
-    rootConfig,
-    clientManifest,
-    elementGraph
-  );
-  const rootManifest = assetMap.toJson();
-  await writeFile(
-    path5.join(distDir, "client/root-manifest.json"),
-    JSON.stringify(rootManifest, null, 2)
-  );
-  const buildDir = path5.join(distDir, "html");
-  const publicDir = path5.join(rootDir, "public");
-  if (fsExtra.existsSync(path5.join(rootDir, "public"))) {
-    fsExtra.copySync(publicDir, buildDir, { dereference: true });
-  } else {
-    makeDir(buildDir);
+}
+async function findOpenPort(min, max) {
+  let port = min;
+  while (port <= max) {
+    const isOpen = await isPortOpen(port);
+    if (isOpen) {
+      return port;
+    }
+    port += 1;
   }
-  console.log("\njs/css output:");
-  makeDir(path5.join(buildDir, "assets"));
-  makeDir(path5.join(buildDir, "chunks"));
-  await Promise.all(
-    Object.keys(rootManifest).map(async (src) => {
-      if (isRouteFile(src)) {
-        return;
-      }
-      const assetData = rootManifest[src];
-      const assetRelPath = assetData.assetUrl.slice(1);
-      const assetFrom = path5.join(distDir, "client", assetRelPath);
-      const assetTo = path5.join(buildDir, assetRelPath);
-      if (!await fileExists(assetFrom)) {
-        console.log(`${assetFrom} does not exist`);
-        return;
+  throw new Error(`no ports open between ${min} and ${max}`);
+}
+
+// src/cli/commands/dev.ts
+import glob3 from "tiny-glob";
+var __dirname2 = path5.dirname(fileURLToPath2(import.meta.url));
+async function dev(rootProjectDir, options) {
+  process.env.NODE_ENV = "development";
+  const rootDir = path5.resolve(rootProjectDir || process.cwd());
+  const defaultPort = parseInt(process.env.PORT || "4007");
+  const host = (options == null ? void 0 : options.host) || "localhost";
+  const port = await findOpenPort(defaultPort, defaultPort + 10);
+  console.log();
+  console.log(`${dim2("\u2503")} project:  ${rootDir}`);
+  console.log(`${dim2("\u2503")} server:   http://${host}:${port}`);
+  console.log(`${dim2("\u2503")} mode:     development`);
+  console.log();
+  const server = await createDevServer({ rootDir, port });
+  server.listen(port, host);
+}
+async function createDevServer(options) {
+  const rootDir = path5.resolve((options == null ? void 0 : options.rootDir) || process.cwd());
+  const rootConfig = await loadRootConfig(rootDir, { command: "dev" });
+  const port = options == null ? void 0 : options.port;
+  const server = express();
+  server.disable("x-powered-by");
+  server.use(rootProjectMiddleware({ rootConfig }));
+  server.use(await viteServerMiddleware({ rootConfig, port }));
+  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);
       }
-      await fsExtra.copy(assetFrom, assetTo);
-      printFileOutput(fileSize(assetTo), "dist/html/", assetRelPath);
-    })
+      server.use(rootDevServerMiddleware());
+      server.use(rootDevServer404Middleware());
+      server.use(rootDevServer500Middleware());
+    },
+    plugins,
+    { type: "dev", rootConfig }
   );
-  if (!ssrOnly) {
-    const render = await import(path5.join(distDir, "server/render.js"));
-    const renderer = new render.Renderer(rootConfig, { assetMap, elementGraph });
-    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
-        });
-        if (data.notFound) {
-          return;
-        }
-        let outFilePath = path5.join(urlPath.slice(1), "index.html");
-        if (outFilePath.endsWith("404/index.html")) {
-          outFilePath = outFilePath.replace("404/index.html", "404.html");
-        }
-        const outPath = path5.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);
-      })
-    );
+  return server;
+}
+async function viteServerMiddleware(options) {
+  const rootConfig = options.rootConfig;
+  const rootDir = rootConfig.rootDir;
+  const elementGraph = await getElements(rootConfig);
+  const elements = Object.values(elementGraph.sourceFiles).map((sourceFile) => {
+    return sourceFile.relPath;
+  });
+  const bundleScripts = [];
+  if (await isDirectory(path5.join(rootDir, "bundles"))) {
+    const bundleFiles = await glob3("bundles/*", { cwd: rootDir });
+    bundleFiles.forEach((file) => {
+      const parts = path5.parse(file);
+      if (isJsFile(parts.base)) {
+        bundleScripts.push(file);
+      }
+    });
   }
+  const optimizeDeps = [...elements, ...bundleScripts];
+  const viteServer = await createViteServer(rootConfig, {
+    port: options.port,
+    optimizeDeps
+  });
+  return async (req, res, next) => {
+    try {
+      req.viteServer = viteServer;
+      const renderModulePath = path5.resolve(__dirname2, "./render.js");
+      const render = await viteServer.ssrLoadModule(
+        renderModulePath
+      );
+      const assetMap = new DevServerAssetMap(
+        rootConfig,
+        viteServer.moduleGraph
+      );
+      req.renderer = new render.Renderer(rootConfig, { assetMap, elementGraph });
+      viteServer.middlewares(req, res, next);
+    } catch (e) {
+      next(e);
+    }
+  };
 }
-function isRouteFile(filepath) {
-  return filepath.startsWith("routes") && isJsFile(filepath);
+function rootDevServerMiddleware() {
+  return async (req, res, next) => {
+    const renderer = req.renderer;
+    const viteServer = req.viteServer;
+    try {
+      await renderer.handle(req, res, next);
+    } catch (err) {
+      viteServer.ssrFixStacktrace(err);
+      next(err);
+    }
+  };
 }
-function fileSize(filepath) {
-  const stats = fsExtra.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 rootDevServer404Middleware() {
+  return async (req, res) => {
+    console.error(`\u2753 404 ${req.originalUrl}`);
+    if (req.renderer) {
+      const url = req.path;
+      const ext = path5.extname(url);
+      if (!ext) {
+        const renderer = req.renderer;
+        const data = await renderer.renderDevServer404(req);
+        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");
+  };
 }
-function printFileOutput(fileSize2, outputDir, outputFile) {
-  const indent = " ".repeat(2);
-  const paddedSize = fileSize2.padStart(9, " ");
-  console.log(
-    `${indent}${dim2(paddedSize)}  ${dim2(outputDir)}${cyan(outputFile)}`
-  );
+function rootDevServer500Middleware() {
+  return async (err, req, res, next) => {
+    console.error(`\u2757 500 ${req.originalUrl}`);
+    console.error(String(err.stack || err));
+    if (req.renderer) {
+      const url = req.path;
+      const ext = path5.extname(url);
+      if (!ext) {
+        const renderer = req.renderer;
+        const data = await renderer.renderDevServer500(req, err);
+        const html = data.html || "";
+        res.status(500).set({ "Content-Type": "text/html" }).end(html);
+        return;
+      }
+    }
+    next(err);
+  };
 }
 
 // src/cli/commands/preview.ts
@@ -870,19 +895,20 @@ 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) {
+async function preview(rootProjectDir, options) {
   process.env.NODE_ENV = "development";
   const rootDir = path6.resolve(rootProjectDir || process.cwd());
-  const server = await createServer3({ rootDir });
+  const server = await createPreviewServer({ rootDir });
   const port = parseInt(process.env.PORT || "4007");
+  const host = (options == null ? void 0 : options.host) || "localhost";
   console.log();
   console.log(`${dim3("\u2503")} project:  ${rootDir}`);
-  console.log(`${dim3("\u2503")} server:   http://localhost:${port}`);
+  console.log(`${dim3("\u2503")} server:   http://${host}:${port}`);
   console.log(`${dim3("\u2503")} mode:     preview`);
   console.log();
-  server.listen(port);
+  server.listen(port, host);
 }
-async function createServer3(options) {
+async function createPreviewServer(options) {
   const rootDir = options.rootDir;
   const rootConfig = await loadRootConfig(rootDir, { command: "preview" });
   const distDir = path6.join(rootDir, "dist");
@@ -920,9 +946,19 @@ async function rootPreviewRendererMiddleware(options) {
       `could not find ${manifestPath}. run \`root build\` before \`root preview\`.`
     );
   }
+  const elementGraphJsonPath = path6.join(
+    distDir,
+    "client/root-element-graph.json"
+  );
+  if (!await fileExists(elementGraphJsonPath)) {
+    throw new Error(
+      `could not find ${elementGraphJsonPath}. run \`root build\` before \`root start\`.`
+    );
+  }
   const rootManifest = await loadJson(manifestPath);
   const assetMap = BuildAssetMap.fromRootManifest(rootConfig, rootManifest);
-  const elementGraph = await getElements(rootConfig);
+  const elementGraphJson = await loadJson(elementGraphJsonPath);
+  const elementGraph = ElementGraph.fromJson(elementGraphJson);
   const renderer = new render.Renderer(rootConfig, { assetMap, elementGraph });
   return async (req, _, next) => {
     req.renderer = renderer;
@@ -984,19 +1020,20 @@ 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) {
+async function start(rootProjectDir, options) {
   process.env.NODE_ENV = "production";
   const rootDir = path7.resolve(rootProjectDir || process.cwd());
-  const server = await createServer4({ rootDir });
+  const server = await createProdServer({ rootDir });
   const port = parseInt(process.env.PORT || "4007");
+  const host = (options == null ? void 0 : options.host) || "localhost";
   console.log();
   console.log(`${dim4("\u2503")} project:  ${rootDir}`);
-  console.log(`${dim4("\u2503")} server:   http://localhost:${port}`);
+  console.log(`${dim4("\u2503")} server:   http://${host}:${port}`);
   console.log(`${dim4("\u2503")} mode:     production`);
   console.log();
-  server.listen(port);
+  server.listen(port, host);
 }
-async function createServer4(options) {
+async function createProdServer(options) {
   const rootDir = options.rootDir;
   const rootConfig = await loadRootConfig(rootDir, { command: "start" });
   const distDir = path7.join(rootDir, "dist");
@@ -1034,9 +1071,19 @@ async function rootProdRendererMiddleware(options) {
       `could not find ${manifestPath}. run \`root build\` before \`root start\`.`
     );
   }
+  const elementGraphJsonPath = path7.join(
+    distDir,
+    "client/root-element-graph.json"
+  );
+  if (!await fileExists(elementGraphJsonPath)) {
+    throw new Error(
+      `could not find ${elementGraphJsonPath}. run \`root build\` before \`root start\`.`
+    );
+  }
   const rootManifest = await loadJson(manifestPath);
   const assetMap = BuildAssetMap.fromRootManifest(rootConfig, rootManifest);
-  const elementGraph = await getElements(rootConfig);
+  const elementGraphJson = await loadJson(elementGraphJsonPath);
+  const elementGraph = ElementGraph.fromJson(elementGraphJson);
   const renderer = new render.Renderer(rootConfig, { assetMap, elementGraph });
   return async (req, _, next) => {
     req.renderer = renderer;
@@ -1097,6 +1144,9 @@ function rootProdServer500Middleware() {
 }
 export {
   build,
+  createDevServer,
+  createPreviewServer,
+  createProdServer,
   dev,
   preview,
   start