@blinkk/root 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist/cli.js

@@ -4,14 +4,19 @@ import {
 } 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";
@@ -58,60 +63,84 @@ async function isDirectory(dirpath) {
 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/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) {
+// src/core/elements.ts
+async function getElements(rootConfig) {
   var _a, _b;
-  const elementsVirtualId = "virtual:root-elements";
-  const resolvedElementsVirtualId = "\0" + elementsVirtualId;
-  const rootDir = (options == null ? void 0 : options.rootDir) || process.cwd();
-  const rootConfig = (options == null ? void 0 : options.rootConfig) || {};
+  const rootDir = rootConfig.rootDir;
+  const workspaceRoot = searchForWorkspaceRoot(rootDir);
   const elementsDirs = [path2.join(rootDir, "elements")];
-  const includeDirs = ((_a = rootConfig.elements) == null ? void 0 : _a.include) || [];
-  includeDirs.forEach((dirPath) => {
+  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 (!elementsDir.startsWith(rootDir)) {
+    if (!directoryContains(rootDir, elementsDir)) {
       throw new Error(
-        `the elements dir (${dirPath}) should be relative to the project's root dir (${rootDir})`
+        `the elements dir (${dirPath}) should be within the project's workspace (${workspaceRoot})`
       );
     }
     elementsDirs.push(elementsDir);
-  });
-  const excludePatterns = ((_b = rootConfig.elements) == null ? void 0 : _b.exclude) || [];
-  const excludeElement = (moduleId) => {
-    return excludePatterns.some((pattern) => Boolean(moduleId.match(pattern)));
-  };
-  let elementMap;
-  async function updateElementMap() {
-    elementMap = {};
-    await Promise.all(
-      elementsDirs.map(async (dirPath) => {
-        const dirExists = await isDirectory(dirPath);
-        if (!dirExists) {
-          return;
-        }
-        const files = await glob("**/*", { cwd: dirPath });
-        files.forEach((file) => {
-          const parts = path2.parse(file);
-          if (isJsFile(parts.base)) {
-            const fullPath = path2.join(dirPath, file);
-            const moduleId = fullPath.slice(rootDir.length);
-            if (!excludeElement(moduleId)) {
-              elementMap[parts.name] = moduleId;
-            }
+  }
+  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;
+async function pluginRoot(options) {
+  const elementsVirtualId = "virtual:root-elements";
+  const resolvedElementsVirtualId = "\0" + elementsVirtualId;
+  const rootConfig = options.rootConfig;
+  let tagNameToElement;
+  const customElementFiles = /* @__PURE__ */ new Set();
+  async function updateElementMap() {
+    tagNameToElement = await getElements(rootConfig);
+    customElementFiles.clear();
+    Object.values(tagNameToElement).forEach((elementModule) => {
+      customElementFiles.add(elementModule.filePath);
+      customElementFiles.add(elementModule.realPath);
+    });
   }
+  await updateElementMap();
   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;
   }
@@ -119,9 +148,7 @@ function pluginRoot(options) {
     if (!isJsFile(id)) {
       return false;
     }
-    return elementsDirs.some((elementsDir) => {
-      return id.startsWith(elementsDir);
-    });
+    return customElementFiles.has(id);
   }
   return {
     name: "vite-plugin-root",
@@ -134,13 +161,13 @@ function pluginRoot(options) {
     async load(id) {
       if (id === resolvedElementsVirtualId) {
         await updateElementMap();
-        return `export const elementsMap = ${JSON.stringify(elementMap)}`;
+        return `export const elementsMap = ${JSON.stringify(tagNameToElement)}`;
       }
       return null;
     },
     async transform(src, id) {
       if (isCustomElement(id)) {
-        const idParts = path2.parse(id);
+        const idParts = path3.parse(id);
         const deps = /* @__PURE__ */ new Set();
         const tagnames = [
           ...src.matchAll(JSX_ELEMENTS_REGEX),
@@ -166,7 +193,7 @@ function pluginRoot(options) {
           })
         );
         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:
@@ -182,28 +209,54 @@ ${importLines}
 }
 
 // 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) {
+  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 {
-        moduleId,
-        assetUrl: moduleId,
+        src,
+        assetUrl,
         getCssDeps: async () => [],
-        getJsDeps: async () => [moduleId]
+        getJsDeps: async () => [assetUrl]
       };
     }
-    return new DevServerAsset(this, viteModule);
+    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;
   }
@@ -233,13 +286,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);
       }
     });
@@ -255,15 +312,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);
       }
     });
@@ -283,9 +344,9 @@ 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
@@ -318,27 +379,66 @@ function rootProjectMiddleware(options) {
   };
 }
 
+// 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/cli/commands/dev.ts
-var __dirname = path4.dirname(fileURLToPath(import.meta.url));
+var __dirname = path5.dirname(fileURLToPath(import.meta.url));
 async function dev(rootProjectDir) {
   process.env.NODE_ENV = "development";
-  const rootDir = path4.resolve(rootProjectDir || process.cwd());
-  const server = await createServer({ rootDir });
-  const port = parseInt(process.env.PORT || "4007");
+  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();
+  const server = await createServer2({ rootDir, port });
   server.listen(port);
 }
-async function createServer(options) {
-  const rootDir = path4.resolve((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 }));
+  server.use(await viteServerMiddleware({ rootDir, rootConfig, port }));
   server.use(rootDevRendererMiddleware());
   const plugins = rootConfig.plugins || [];
   await configureServerPlugins(
@@ -358,102 +458,83 @@ async function createServer(options) {
   return server;
 }
 async function viteServerMiddleware(options) {
-  var _a, _b, _c;
+  var _a, _b;
   const rootDir = options.rootDir;
   const rootConfig = options.rootConfig;
   const viteConfig = rootConfig.vite || {};
+  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(path4.join(rootDir, "routes"))) {
+  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)) {
         routeFiles.push(file);
       }
     });
   }
-  const elementsDirs = [path4.join(rootDir, "elements")];
-  const elementsInclude = ((_a = rootConfig.elements) == null ? void 0 : _a.include) || [];
-  const excludePatterns = ((_b = rootConfig.elements) == null ? void 0 : _b.exclude) || [];
-  const excludeElement = (moduleId) => {
-    return excludePatterns.some((pattern) => Boolean(moduleId.match(pattern)));
-  };
-  for (const dirPath of elementsInclude) {
-    const elementsDir = path4.resolve(rootDir, dirPath);
-    if (!elementsDir.startsWith(rootDir)) {
-      throw new Error(
-        `the elements dir (${dirPath}) should be relative to the project's root dir (${rootDir})`
-      );
-    }
-    elementsDirs.push(elementsDir);
-  }
-  const elements = [];
-  for (const dirPath of elementsDirs) {
-    if (await isDirectory(dirPath)) {
-      const elementFiles = await glob2("**/*", { cwd: dirPath });
-      elementFiles.forEach((file) => {
-        const parts = path4.parse(file);
-        if (isJsFile(parts.base)) {
-          const fullPath = path4.join(dirPath, file);
-          const moduleId = fullPath.slice(rootDir.length);
-          if (!excludeElement(moduleId)) {
-            elements.push(moduleId.slice(1));
-          }
-        }
-      });
-    }
-  }
+  const 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 vitePlugins = [
-    pluginRoot({ rootDir, rootConfig }),
-    ...viteConfig.plugins || [],
-    ...getVitePlugins(rootConfig.plugins || [])
-  ];
   const viteServer = await createViteServer({
     ...viteConfig,
     mode: "development",
     root: rootDir,
-    publicDir: path4.join(rootDir, "public"),
-    server: { middlewareMode: true },
+    publicDir: path5.join(rootDir, "public"),
+    server: {
+      ...viteConfig.server || {},
+      middlewareMode: true,
+      hmr: hmrOptions
+    },
     appType: "custom",
     optimizeDeps: {
+      ...viteConfig.optimizeDeps || {},
       include: [
         ...routeFiles,
         ...elements,
         ...bundleScripts,
-        ...((_c = viteConfig.optimizeDeps) == null ? void 0 : _c.include) || []
+        ...((_b = viteConfig.optimizeDeps) == null ? void 0 : _b.include) || []
       ]
     },
     ssr: {
+      ...viteConfig.ssr || {},
       noExternal: ["@blinkk/root"]
     },
     esbuild: {
+      ...viteConfig.esbuild || {},
       jsx: "automatic",
       jsxImportSource: "preact"
     },
-    plugins: vitePlugins
+    plugins: [
+      pluginRoot({ rootConfig }),
+      ...viteConfig.plugins || [],
+      ...getVitePlugins(rootConfig.plugins || [])
+    ]
   });
-  return async (req, res, next) => {
+  return (req, res, next) => {
     req.viteServer = viteServer;
     viteServer.middlewares(req, res, next);
   };
 }
 function rootDevRendererMiddleware() {
-  const renderModulePath = path4.resolve(__dirname, "./render.js");
+  const renderModulePath = path5.resolve(__dirname, "./render.js");
   return async (req, _, next) => {
     const rootConfig = req.rootConfig;
     const viteServer = req.viteServer;
     const render = await viteServer.ssrLoadModule(renderModulePath);
-    const assetMap = new DevServerAssetMap(viteServer.moduleGraph);
+    const assetMap = new DevServerAssetMap(rootConfig, viteServer.moduleGraph);
     req.renderer = new render.Renderer(rootConfig, { assetMap });
     next();
   };
@@ -496,7 +577,7 @@ function rootDevServerMiddleware() {
 function rootDevServer404Middleware() {
   return async (req, res) => {
     const url = req.originalUrl;
-    const ext = path4.extname(url);
+    const ext = path5.extname(url);
     const renderer = req.renderer;
     if (!ext) {
       const data = await renderer.renderDevServer404();
@@ -509,7 +590,7 @@ function rootDevServer404Middleware() {
 }
 
 // src/cli/commands/build.ts
-import path5 from "node:path";
+import path6 from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 import fsExtra2 from "fs-extra";
 import glob3 from "tiny-glob";
@@ -518,37 +599,40 @@ import { build as viteBuild } from "vite";
 // src/render/asset-map/build-asset-map.ts
 var BuildAssetMap = class {
   constructor() {
-    this.moduleIdToAsset = /* @__PURE__ */ new Map();
+    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;
+    }
+    console.log(`could not find build asset: ${src}`);
+    return null;
   }
   add(asset) {
-    this.moduleIdToAsset.set(asset.moduleId, 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(viteManifest, elementMap) {
     const assetMap = new BuildAssetMap();
-    const elementModuleIds = /* @__PURE__ */ new Set();
+    const elementFiles = /* @__PURE__ */ new Set();
     Object.values(elementMap).forEach(
-      (moduleId) => elementModuleIds.add(moduleId)
+      (elementModule) => elementFiles.add(elementModule.src)
     );
     Object.keys(viteManifest).forEach((manifestKey) => {
-      const moduleId = `/${manifestKey}`;
+      const src = manifestKey;
       const manifestChunk = viteManifest[manifestKey];
-      const isElement = elementModuleIds.has(moduleId);
+      const isElement = elementFiles.has(src);
       const assetData = {
-        moduleId,
+        src,
         assetUrl: `/${manifestChunk.file}`,
-        importedModules: (manifestChunk.imports || []).map(
-          (relPath) => `/${relPath}`
-        ),
+        importedModules: manifestChunk.imports || [],
         importedCss: (manifestChunk.css || []).map((relPath) => `/${relPath}`),
         isElement
       };
@@ -568,7 +652,7 @@ var BuildAssetMap = class {
 var BuildAsset = class {
   constructor(assetMap, assetData) {
     this.assetMap = assetMap;
-    this.moduleId = assetData.moduleId;
+    this.src = assetData.src;
     this.assetUrl = assetData.assetUrl;
     this.importedModules = assetData.importedModules;
     this.importedCss = assetData.importedCss;
@@ -590,19 +674,19 @@ 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);
+    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);
+      asset.importedModules.map(async (src) => {
+        const importedAsset = await this.assetMap.get(src);
         this.collectJs(importedAsset, urls, visited);
       })
     );
@@ -614,10 +698,10 @@ 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));
     }
@@ -630,7 +714,7 @@ var BuildAsset = class {
   }
   toJson() {
     return {
-      moduleId: this.moduleId,
+      src: this.src,
       assetUrl: this.assetUrl,
       importedModules: this.importedModules,
       importedCss: this.importedCss,
@@ -641,12 +725,11 @@ var BuildAsset = class {
 
 // src/cli/commands/build.ts
 import { dim as dim2 } from "kleur/colors";
-var __dirname2 = path5.dirname(fileURLToPath2(import.meta.url));
+var __dirname2 = path6.dirname(fileURLToPath2(import.meta.url));
 async function build(rootProjectDir, options) {
-  var _a, _b;
-  const rootDir = path5.resolve(rootProjectDir || process.cwd());
+  const rootDir = path6.resolve(rootProjectDir || process.cwd());
   const rootConfig = await loadRootConfig(rootDir);
-  const distDir = path5.join(rootDir, "dist");
+  const distDir = path6.join(rootDir, "dist");
   const ssrOnly = (options == null ? void 0 : options.ssrOnly) || false;
   const mode = (options == null ? void 0 : options.mode) || "production";
   console.log();
@@ -656,62 +739,33 @@ async function build(rootProjectDir, options) {
   console.log();
   await rmDir(distDir);
   await makeDir(distDir);
-  const pages = [];
-  if (await isDirectory(path5.join(rootDir, "routes"))) {
-    const pageFiles = await glob3(path5.join(rootDir, "routes/**/*"));
+  const routeFiles = [];
+  if (await isDirectory(path6.join(rootDir, "routes"))) {
+    const pageFiles = await glob3("routes/**/*", { cwd: rootDir });
     pageFiles.forEach((file) => {
-      const parts = path5.parse(file);
+      const parts = path6.parse(file);
       if (!parts.name.startsWith("_") && isJsFile(parts.base)) {
-        pages.push(file);
+        routeFiles.push(path6.resolve(rootDir, file));
       }
     });
   }
-  const elementsDirs = [path5.join(rootDir, "elements")];
-  const elementsInclude = ((_a = rootConfig.elements) == null ? void 0 : _a.include) || [];
-  const excludePatterns = ((_b = rootConfig.elements) == null ? void 0 : _b.exclude) || [];
-  const excludeElement = (moduleId) => {
-    return excludePatterns.some((pattern) => Boolean(moduleId.match(pattern)));
-  };
-  for (const dirPath of elementsInclude) {
-    const elementsDir = path5.resolve(rootDir, dirPath);
-    if (!elementsDir.startsWith(rootDir)) {
-      throw new Error(
-        `the elements dir (${dirPath}) should be relative to the project's root dir (${rootDir})`
-      );
-    }
-    elementsDirs.push(elementsDir);
-  }
-  const elements = [];
-  const elementMap = {};
-  for (const dirPath of elementsDirs) {
-    if (await isDirectory(dirPath)) {
-      const elementFiles = await glob3("**/*", { cwd: dirPath });
-      elementFiles.forEach((file) => {
-        const parts = path5.parse(file);
-        if (isJsFile(parts.base)) {
-          const fullPath = path5.join(dirPath, file);
-          const moduleId = fullPath.slice(rootDir.length);
-          if (!excludeElement(moduleId)) {
-            elements.push(fullPath);
-            elementMap[parts.name] = moduleId;
-          }
-        }
-      });
-    }
-  }
+  const elementsMap = await getElements(rootConfig);
+  const elements = Object.values(elementsMap).map(
+    (mod) => path6.resolve(rootDir, mod.src)
+  );
   const bundleScripts = [];
-  if (await isDirectory(path5.join(rootDir, "bundles"))) {
-    const bundleFiles = await glob3(path5.join(rootDir, "bundles/*"));
+  if (await isDirectory(path6.join(rootDir, "bundles"))) {
+    const bundleFiles = await glob3("bundles/*", { cwd: rootDir });
     bundleFiles.forEach((file) => {
-      const parts = path5.parse(file);
+      const parts = path6.parse(file);
       if (isJsFile(parts.base)) {
-        bundleScripts.push(file);
+        bundleScripts.push(path6.resolve(rootDir, file));
       }
     });
   }
   const viteConfig = rootConfig.vite || {};
   const vitePlugins = [
-    pluginRoot({ rootDir, rootConfig }),
+    pluginRoot({ rootConfig }),
     ...viteConfig.plugins || [],
     ...getVitePlugins(rootConfig.plugins || [])
   ];
@@ -731,14 +785,14 @@ async function build(rootProjectDir, options) {
     publicDir: false,
     build: {
       rollupOptions: {
-        input: [path5.resolve(__dirname2, "./render.js")],
+        input: [path6.resolve(__dirname2, "./render.js")],
         output: {
           format: "esm",
           chunkFileNames: "chunks/[name].[hash].js",
           assetFileNames: "assets/[name].[hash][extname]"
         }
       },
-      outDir: path5.join(distDir, "server"),
+      outDir: path6.join(distDir, "server"),
       ssr: true,
       ssrManifest: false,
       cssCodeSplit: true,
@@ -756,14 +810,14 @@ async function build(rootProjectDir, options) {
     publicDir: false,
     build: {
       rollupOptions: {
-        input: [...pages, ...elements, ...bundleScripts],
+        input: [...routeFiles, ...elements, ...bundleScripts],
         output: {
           format: "esm",
           chunkFileNames: "chunks/[name].[hash].js",
           assetFileNames: "assets/[name].[hash][extname]"
         }
       },
-      outDir: path5.join(distDir, "client"),
+      outDir: path6.join(distDir, "client"),
       ssr: false,
       ssrManifest: false,
       manifest: true,
@@ -775,24 +829,24 @@ async function build(rootProjectDir, options) {
     }
   });
   const viteManifest = await loadJson(
-    path5.join(distDir, "client/manifest.json")
+    path6.join(distDir, "client/manifest.json")
   );
-  const assetMap = BuildAssetMap.fromViteManifest(viteManifest, elementMap);
+  const assetMap = BuildAssetMap.fromViteManifest(viteManifest, elementsMap);
   writeFile(
-    path5.join(distDir, "client/root-manifest.json"),
+    path6.join(distDir, "client/root-manifest.json"),
     JSON.stringify(assetMap.toJson(), null, 2)
   );
-  const buildDir = path5.join(distDir, "html");
-  const publicDir = path5.join(rootDir, "public");
-  if (fsExtra2.existsSync(path5.join(rootDir, "public"))) {
+  const buildDir = path6.join(distDir, "html");
+  const publicDir = path6.join(rootDir, "public");
+  if (fsExtra2.existsSync(path6.join(rootDir, "public"))) {
     fsExtra2.copySync(publicDir, buildDir);
   } else {
     makeDir(buildDir);
   }
-  copyDir(path5.join(distDir, "client/assets"), path5.join(buildDir, "assets"));
-  copyDir(path5.join(distDir, "client/chunks"), path5.join(buildDir, "chunks"));
+  copyDir(path6.join(distDir, "client/assets"), path6.join(buildDir, "assets"));
+  copyDir(path6.join(distDir, "client/chunks"), path6.join(buildDir, "chunks"));
   if (!ssrOnly) {
-    const render = await import(path5.join(distDir, "server/render.js"));
+    const render = await import(path6.join(distDir, "server/render.js"));
     const renderer = new render.Renderer(rootConfig, { assetMap });
     const sitemap = await renderer.getSitemap();
     await Promise.all(
@@ -801,13 +855,13 @@ async function build(rootProjectDir, options) {
         const data = await renderer.renderRoute(route, {
           routeParams: params
         });
-        let outPath = path5.join(distDir, `html${urlPath}`, "index.html");
+        let outPath = path6.join(distDir, `html${urlPath}`, "index.html");
         if (outPath.endsWith("404/index.html")) {
           outPath = outPath.replace("404/index.html", "404.html");
         }
         const html = await htmlMinify(data.html || "");
         await writeFile(outPath, html);
-        const relPath = outPath.slice(path5.dirname(distDir).length + 1);
+        const relPath = outPath.slice(path6.dirname(distDir).length + 1);
         console.log(`saved ${relPath}`);
       })
     );
@@ -815,15 +869,15 @@ async function build(rootProjectDir, options) {
 }
 
 // src/cli/commands/preview.ts
-import path6 from "node:path";
+import path7 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 = path6.resolve(rootProjectDir || process.cwd());
-  const server = await createServer2({ rootDir });
+  const rootDir = path7.resolve(rootProjectDir || process.cwd());
+  const server = await createServer3({ rootDir });
   const port = parseInt(process.env.PORT || "4007");
   console.log();
   console.log(`${dim3("\u2503")} project:  ${rootDir}`);
@@ -832,10 +886,10 @@ async function preview(rootProjectDir) {
   console.log();
   server.listen(port);
 }
-async function createServer2(options) {
+async function createServer3(options) {
   const rootDir = options.rootDir;
   const rootConfig = await loadRootConfig(rootDir);
-  const distDir = path6.join(rootDir, "dist");
+  const distDir = path7.join(rootDir, "dist");
   const server = express2();
   server.disable("x-powered-by");
   server.use(compression());
@@ -850,7 +904,7 @@ async function createServer2(options) {
       userMiddlewares.forEach((middleware) => {
         server.use(middleware);
       });
-      const publicDir = path6.join(distDir, "html");
+      const publicDir = path7.join(distDir, "html");
       server.use(sirv(publicDir, { dev: false }));
       server.use(rootPreviewServerMiddleware());
     },
@@ -861,8 +915,8 @@ async function createServer2(options) {
 }
 async function rootPreviewRendererMiddleware(options) {
   const { distDir, rootConfig } = options;
-  const render = await import(path6.join(distDir, "server/render.js"));
-  const manifestPath = path6.join(distDir, "client/root-manifest.json");
+  const render = await import(path7.join(distDir, "server/render.js"));
+  const manifestPath = path7.join(distDir, "client/root-manifest.json");
   if (!await fileExists(manifestPath)) {
     throw new Error(
       `could not find ${manifestPath}. run \`root build\` before \`root preview\`.`
@@ -906,15 +960,15 @@ function rootPreviewServerMiddleware() {
 }
 
 // src/cli/commands/start.ts
-import path7 from "node:path";
+import path8 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 = path7.resolve(rootProjectDir || process.cwd());
-  const server = await createServer3({ rootDir });
+  const rootDir = path8.resolve(rootProjectDir || process.cwd());
+  const server = await createServer4({ rootDir });
   const port = parseInt(process.env.PORT || "4007");
   console.log();
   console.log(`${dim4("\u2503")} project:  ${rootDir}`);
@@ -923,10 +977,10 @@ async function start(rootProjectDir) {
   console.log();
   server.listen(port);
 }
-async function createServer3(options) {
+async function createServer4(options) {
   const rootDir = options.rootDir;
   const rootConfig = await loadRootConfig(rootDir);
-  const distDir = path7.join(rootDir, "dist");
+  const distDir = path8.join(rootDir, "dist");
   const server = express3();
   server.disable("x-powered-by");
   server.use(compression2());
@@ -941,7 +995,7 @@ async function createServer3(options) {
       userMiddlewares.forEach((middleware) => {
         server.use(middleware);
       });
-      const publicDir = path7.join(distDir, "html");
+      const publicDir = path8.join(distDir, "html");
       server.use(sirv2(publicDir, { dev: false }));
       server.use(rootProdServerMiddleware());
     },
@@ -952,8 +1006,8 @@ async function createServer3(options) {
 }
 async function rootProdRendererMiddleware(options) {
   const { distDir, rootConfig } = options;
-  const render = await import(path7.join(distDir, "server/render.js"));
-  const manifestPath = path7.join(distDir, "client/root-manifest.json");
+  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\`.`