@blinkk/root 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/cli.js

@@ -3,7 +3,7 @@ import {
   htmlPretty,
   isValidTagName,
   parseTagNames
-} from "./chunk-WVRC46JG.js";
+} from "./chunk-DXD5LKU3.js";
 import {
   copyGlob,
   createViteServer,
@@ -16,22 +16,125 @@ import {
   makeDir,
   rmDir,
   writeFile
-} from "./chunk-LTSJAEBG.js";
+} from "./chunk-XGD3RBFM.js";
 import {
   configureServerPlugins,
   getVitePlugins
-} from "./chunk-DTEQ2AIW.js";
+} from "./chunk-QKBMWK5B.js";
 
 // src/cli/commands/build.ts
 import path3 from "node:path";
 import { fileURLToPath } from "node:url";
 import fsExtra from "fs-extra";
+import { dim, cyan } from "kleur/colors";
 import glob2 from "tiny-glob";
 import { build as viteBuild } from "vite";
 
-// src/render/asset-map/build-asset-map.ts
+// src/node/element-graph.ts
 import fs from "node:fs";
 import path from "node:path";
+import glob from "tiny-glob";
+import { searchForWorkspaceRoot } from "vite";
+var ElementGraph = class {
+  constructor(sourceFiles) {
+    this.sourceFiles = {};
+    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)) {
+      return [];
+    }
+    visited.add(tagName);
+    this.deps[tagName] ??= this.parseDepsFromSource(tagName);
+    const deps = new Set(this.deps[tagName]);
+    for (const depTagName of this.deps[tagName]) {
+      for (const childDep of this.getDeps(depTagName, visited)) {
+        deps.add(childDep);
+      }
+    }
+    return Array.from(deps);
+  }
+  parseDepsFromSource(tagName) {
+    const srcFile = this.sourceFiles[tagName];
+    if (!srcFile) {
+      throw new Error(`could not find file path for tagName <${tagName}>`);
+    }
+    const src = fs.readFileSync(srcFile.filePath, "utf-8");
+    const tagNames = parseTagNames(src);
+    const deps = /* @__PURE__ */ new Set();
+    for (const depTagName of tagNames) {
+      if (depTagName !== tagName && depTagName in this.sourceFiles) {
+        deps.add(depTagName);
+      }
+    }
+    return Array.from(deps);
+  }
+};
+async function getElements(rootConfig) {
+  var _a;
+  const rootDir = rootConfig.rootDir;
+  const elementsDirs = getElementsDirs(rootConfig);
+  const excludePatterns = ((_a = rootConfig.elements) == null ? void 0 : _a.exclude) || [];
+  const excludeElement = (moduleId) => {
+    return excludePatterns.some((pattern) => Boolean(moduleId.match(pattern)));
+  };
+  const elementFilePaths = {};
+  for (const dirPath of elementsDirs) {
+    if (await isDirectory(dirPath)) {
+      const files = await glob("**/*", { cwd: dirPath });
+      files.forEach((file) => {
+        const parts = path.parse(file);
+        if (isJsFile(parts.base) && isValidTagName(parts.name)) {
+          const tagName = parts.name;
+          const filePath = path.join(dirPath, file);
+          const relPath = path.relative(rootDir, filePath);
+          if (!excludeElement(relPath)) {
+            elementFilePaths[tagName] = { filePath, relPath };
+          }
+        }
+      });
+    }
+  }
+  const graph = new ElementGraph(elementFilePaths);
+  return graph;
+}
+function getElementsDirs(rootConfig) {
+  var _a;
+  const rootDir = rootConfig.rootDir;
+  const workspaceRoot = searchForWorkspaceRoot(rootDir);
+  const elementsDirs = [path.join(rootDir, "elements")];
+  const elementsInclude = ((_a = rootConfig.elements) == null ? void 0 : _a.include) || [];
+  for (const dirPath of elementsInclude) {
+    const elementsDir = path.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);
+  }
+  return elementsDirs;
+}
+
+// src/render/asset-map/build-asset-map.ts
+import fs2 from "node:fs";
+import path2 from "node:path";
 var BuildAssetMap = class {
   constructor(rootConfig) {
     this.rootConfig = rootConfig;
@@ -101,12 +204,12 @@ var BuildAssetMap = class {
   }
 };
 function realPathRelativeTo(rootDir, src) {
-  const fullPath = path.resolve(rootDir, src);
-  if (!fs.existsSync(fullPath)) {
+  const fullPath = path2.resolve(rootDir, src);
+  if (!fs2.existsSync(fullPath)) {
     return src;
   }
-  const realpath = fs.realpathSync(path.resolve(rootDir, src));
-  return path.relative(rootDir, realpath);
+  const realpath = fs2.realpathSync(path2.resolve(rootDir, src));
+  return path2.relative(rootDir, realpath);
 }
 var BuildAsset = class {
   constructor(assetMap, assetData) {
@@ -182,91 +285,6 @@ var BuildAsset = class {
   }
 };
 
-// src/cli/commands/build.ts
-import { dim, cyan } from "kleur/colors";
-
-// src/node/element-graph.ts
-import fs2 from "node:fs";
-import path2 from "node:path";
-import { searchForWorkspaceRoot } from "vite";
-import glob from "tiny-glob";
-var ElementGraph = class {
-  constructor(sourceFiles) {
-    this.sourceFiles = {};
-    this.deps = {};
-    this.sourceFiles = sourceFiles;
-  }
-  getDeps(tagName, visited) {
-    visited ??= /* @__PURE__ */ new Set();
-    if (visited.has(tagName)) {
-      return [];
-    }
-    visited.add(tagName);
-    this.deps[tagName] ??= this.parseDepsFromSource(tagName);
-    const deps = new Set(this.deps[tagName]);
-    for (const depTagName of this.deps[tagName]) {
-      for (const childDep of this.getDeps(depTagName, visited)) {
-        deps.add(childDep);
-      }
-    }
-    return Array.from(deps);
-  }
-  parseDepsFromSource(tagName) {
-    const srcFile = this.sourceFiles[tagName];
-    if (!srcFile) {
-      throw new Error(`could not find file path for tagName <${tagName}>`);
-    }
-    const src = fs2.readFileSync(srcFile.filePath, "utf-8");
-    const tagNames = parseTagNames(src);
-    const deps = /* @__PURE__ */ new Set();
-    for (const depTagName of tagNames) {
-      if (depTagName !== tagName && depTagName in this.sourceFiles) {
-        deps.add(depTagName);
-      }
-    }
-    return Array.from(deps);
-  }
-};
-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 elementFilePaths = {};
-  for (const dirPath of elementsDirs) {
-    if (await isDirectory(dirPath)) {
-      const files = await glob("**/*", { cwd: dirPath });
-      files.forEach((file) => {
-        const parts = path2.parse(file);
-        if (isJsFile(parts.base) && isValidTagName(parts.name)) {
-          const tagName = parts.name;
-          const filePath = path2.join(dirPath, file);
-          const relPath = path2.relative(rootDir, filePath);
-          if (!excludeElement(relPath)) {
-            elementFilePaths[tagName] = { filePath, relPath };
-          }
-        }
-      });
-    }
-  }
-  const graph = new ElementGraph(elementFilePaths);
-  return graph;
-}
-
 // src/cli/commands/build.ts
 var __dirname = path3.dirname(fileURLToPath(import.meta.url));
 async function build(rootProjectDir, options) {
@@ -354,7 +372,8 @@ async function build(rootProjectDir, options) {
         output: {
           format: "esm",
           chunkFileNames: "chunks/[name].[hash].min.js",
-          assetFileNames: "assets/[name].[hash][extname]"
+          assetFileNames: "assets/[name].[hash][extname]",
+          sanitizeFileName
         }
       },
       outDir: path3.join(distDir, "server"),
@@ -385,6 +404,7 @@ async function build(rootProjectDir, options) {
           entryFileNames: "assets/[name].[hash].min.js",
           chunkFileNames: "chunks/[name].[hash].min.js",
           assetFileNames: "assets/[name].[hash][extname]",
+          sanitizeFileName,
           ...(_e = (_d = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _d.rollupOptions) == null ? void 0 : _e.output
         }
       },
@@ -414,6 +434,7 @@ async function build(rootProjectDir, options) {
             entryFileNames: "assets/[name].[hash].min.js",
             chunkFileNames: "chunks/[name].[hash].min.js",
             assetFileNames: "assets/[name].[hash][extname]",
+            sanitizeFileName,
             ...(_h = (_g = viteConfig == null ? void 0 : viteConfig.build) == null ? void 0 : _g.rollupOptions) == null ? void 0 : _h.output
           }
         },
@@ -432,9 +453,9 @@ async function build(rootProjectDir, options) {
     await writeFile(path3.join(distDir, "client/manifest.json"), "{}");
   }
   await copyGlob(
-    "*.css",
-    path3.join(distDir, "routes/assets"),
-    path3.join(distDir, "client/assets")
+    "**/*.css",
+    path3.join(distDir, "routes"),
+    path3.join(distDir, "client")
   );
   const routesManifest = await loadJson(
     path3.join(distDir, "routes/manifest.json")
@@ -479,6 +500,11 @@ async function build(rootProjectDir, options) {
     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"))) {
@@ -486,8 +512,6 @@ async function build(rootProjectDir, options) {
   } 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) => {
@@ -562,11 +586,24 @@ function printFileOutput(fileSize2, outputDir, outputFile) {
     `${indent}${dim(paddedSize)}  ${dim(outputDir)}${cyan(outputFile)}`
   );
 }
+function sanitizeFileName(name) {
+  return name.replaceAll("...", "").replaceAll("_", "").replaceAll("[", "").replaceAll("]", "").replace(/[^\x00-\x7F]/g, "").replace(/\x00/g, "").toLowerCase();
+}
 
 // src/cli/commands/dev.ts
 import path5 from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 import { default as express } from "express";
+import { dim as dim2 } from "kleur/colors";
+import glob3 from "tiny-glob";
+
+// src/core/middleware.ts
+function rootProjectMiddleware(options) {
+  return (req, _, next) => {
+    req.rootConfig = options.rootConfig;
+    next();
+  };
+}
 
 // src/render/asset-map/dev-asset-map.ts
 import path4 from "node:path";
@@ -691,17 +728,6 @@ var DevServerAsset = class {
   }
 };
 
-// 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) {
@@ -740,20 +766,20 @@ async function findOpenPort(min, max) {
 }
 
 // src/cli/commands/dev.ts
-import glob3 from "tiny-glob";
 var __dirname2 = path5.dirname(fileURLToPath2(import.meta.url));
-async function dev(rootProjectDir) {
+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://localhost:${port}`);
+  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);
+  server.listen(port, host);
 }
 async function createDevServer(options) {
   const rootDir = path5.resolve((options == null ? void 0 : options.rootDir) || process.cwd());
@@ -784,7 +810,7 @@ async function createDevServer(options) {
 async function viteServerMiddleware(options) {
   const rootConfig = options.rootConfig;
   const rootDir = rootConfig.rootDir;
-  const elementGraph = await getElements(rootConfig);
+  let elementGraph = await getElements(rootConfig);
   const elements = Object.values(elementGraph.sourceFiles).map((sourceFile) => {
     return sourceFile.relPath;
   });
@@ -803,6 +829,21 @@ async function viteServerMiddleware(options) {
     port: options.port,
     optimizeDeps
   });
+  function isInElementsDir(changedFilePath) {
+    const filePath = path5.resolve(changedFilePath);
+    const elementsDirs = getElementsDirs(rootConfig);
+    return elementsDirs.some((dirPath) => filePath.startsWith(dirPath));
+  }
+  viteServer.watcher.on("add", async (filePath) => {
+    if (isInElementsDir(filePath)) {
+      elementGraph = await getElements(rootConfig);
+    }
+  });
+  viteServer.watcher.on("unlink", async (filePath) => {
+    if (isInElementsDir(filePath)) {
+      elementGraph = await getElements(rootConfig);
+    }
+  });
   return async (req, res, next) => {
     try {
       req.viteServer = viteServer;
@@ -871,21 +912,22 @@ function rootDevServer500Middleware() {
 
 // src/cli/commands/preview.ts
 import path6 from "node:path";
+import compression from "compression";
 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 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 createPreviewServer(options) {
   const rootDir = options.rootDir;
@@ -925,9 +967,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;
@@ -941,6 +993,8 @@ function rootPreviewServerMiddleware() {
       await renderer.handle(req, res, next);
     } catch (e) {
       try {
+        console.error(`error rendering ${req.originalUrl}`);
+        console.error(e.stack || e);
         const { html } = await renderer.renderError(e);
         res.status(500).set({ "Content-Type": "text/html" }).end(html);
       } catch (e2) {
@@ -954,14 +1008,16 @@ function rootPreviewServerMiddleware() {
 function rootPreviewServer404Middleware() {
   return async (req, res) => {
     console.error(`\u2753 404 ${req.originalUrl}`);
-    const url = req.path;
-    const ext = path6.extname(url);
-    const renderer = req.renderer;
-    if (!ext) {
-      const data = await renderer.render404();
-      const html = data.html || "";
-      res.status(404).set({ "Content-Type": "text/html" }).end(html);
-      return;
+    if (req.renderer) {
+      const url = req.path;
+      const ext = path6.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");
   };
@@ -970,14 +1026,16 @@ function rootPreviewServer500Middleware() {
   return async (err, req, res, next) => {
     console.error(`\u2757 500 ${req.originalUrl}`);
     console.error(String(err.stack || err));
-    const url = req.path;
-    const ext = path6.extname(url);
-    const renderer = req.renderer;
-    if (!ext) {
-      const data = await renderer.renderError(err);
-      const html = data.html || "";
-      res.status(500).set({ "Content-Type": "text/html" }).end(html);
-      return;
+    if (req.renderer) {
+      const url = req.path;
+      const ext = path6.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);
   };
@@ -985,21 +1043,22 @@ function rootPreviewServer500Middleware() {
 
 // src/cli/commands/start.ts
 import path7 from "node:path";
+import compression2 from "compression";
 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 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 createProdServer(options) {
   const rootDir = options.rootDir;
@@ -1039,9 +1098,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;
@@ -1055,6 +1124,8 @@ function rootProdServerMiddleware() {
       await renderer.handle(req, res, next);
     } catch (e) {
       try {
+        console.error(`error rendering ${req.originalUrl}`);
+        console.error(e.stack || e);
         const { html } = await renderer.renderError(e);
         res.status(500).set({ "Content-Type": "text/html" }).end(html);
       } catch (e2) {