@blinkk/root 1.0.0-alpha.9 → 1.0.0-beta.1

package/dist/render.js

@@ -1,10 +1,14 @@
 import {
-  ErrorPage,
-  HEAD_CONTEXT,
+  htmlMinify,
+  htmlPretty,
+  parseTagNames
+} from "./chunk-GGQGZ7ZE.js";
+import {
+  HTML_CONTEXT,
   I18N_CONTEXT,
-  SCRIPT_CONTEXT,
+  REQUEST_CONTEXT,
   getTranslations
-} from "./chunk-ZV52A6YZ.js";
+} from "./chunk-WTSNW7BB.js";
 
 // src/render/render.tsx
 import renderToString from "preact-render-to-string";
@@ -149,8 +153,9 @@ function getRoutes(config) {
     }
   );
   const trie = new RouteTrie();
-  Object.keys(routes).forEach((filePath) => {
-    let routePath = filePath.replace(/^\/routes/, "");
+  Object.keys(routes).forEach((modulePath) => {
+    const src = modulePath.slice(1);
+    let routePath = modulePath.replace(/^\/routes/, "");
     const parts = path.parse(routePath);
     if (parts.name.startsWith("_")) {
       return;
@@ -160,18 +165,23 @@ function getRoutes(config) {
     } else {
       routePath = path.join(parts.dir, parts.name);
     }
+    const localeRoutePath = i18nUrlFormat.replace("{locale}", "[locale]").replace("{path}", routePath.replace(/^\/*/, ""));
     trie.add(routePath, {
-      modulePath: filePath,
-      module: routes[filePath],
-      locale: defaultLocale
+      src,
+      module: routes[modulePath],
+      locale: defaultLocale,
+      routePath,
+      localeRoutePath
     });
     locales.forEach((locale) => {
-      const localeRoutePath = i18nUrlFormat.replace("{locale}", locale).replace("{path}", routePath.replace(/^\/*/, ""));
-      if (localeRoutePath !== routePath) {
-        trie.add(localeRoutePath, {
-          modulePath: filePath,
-          module: routes[filePath],
-          locale
+      const localePath = localeRoutePath.replace("[locale]", locale);
+      if (localePath !== routePath) {
+        trie.add(localePath, {
+          src,
+          module: routes[modulePath],
+          locale,
+          routePath,
+          localeRoutePath
         });
       }
     });
@@ -179,17 +189,33 @@ function getRoutes(config) {
   return trie;
 }
 async function getAllPathsForRoute(urlPathFormat, route) {
-  const urlPaths = [];
   const routeModule = route.module;
+  if (!routeModule.default) {
+    return [];
+  }
+  const urlPaths = [];
   if (routeModule.getStaticPaths) {
     const staticPaths = await routeModule.getStaticPaths();
-    staticPaths.paths.forEach(
-      (pathParams) => {
-        urlPaths.push({
-          urlPath: replaceParams(urlPathFormat, pathParams.params),
-          params: pathParams.params || {}
-        });
-      }
+    if (staticPaths.paths) {
+      staticPaths.paths.forEach(
+        (pathParams) => {
+          const urlPath = replaceParams(urlPathFormat, pathParams.params || {});
+          if (pathContainsPlaceholders(urlPath)) {
+            console.warn(
+              `path contains placeholders: ${urlPathFormat}, double check getStaticPaths() and ensure all params are returned. more info: https://rootjs.dev/guide/routes#getStaticPaths`
+            );
+          } else {
+            urlPaths.push({
+              urlPath: replaceParams(urlPathFormat, pathParams.params),
+              params: pathParams.params || {}
+            });
+          }
+        }
+      );
+    }
+  } else if (pathContainsPlaceholders(urlPathFormat)) {
+    console.warn(
+      `path contains placeholders: ${urlPathFormat}, did you forget to define getStaticPaths()? more info: https://rootjs.dev/guide/routes#getStaticPaths`
     );
   } else {
     urlPaths.push({ urlPath: urlPathFormat, params: {} });
@@ -209,189 +235,363 @@ function replaceParams(urlPathFormat, params) {
   );
   return urlPath;
 }
+function pathContainsPlaceholders(urlPath) {
+  const segments = urlPath.split("/");
+  return segments.some((segment) => {
+    return segment.startsWith("[") && segment.endsWith("]");
+  });
+}
 
-// src/render/render.tsx
-import { elementsMap } from "virtual:root-elements";
-
-// src/core/components/dev-not-found-page.tsx
+// src/core/pages/ErrorPage.tsx
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 var STYLES = `
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+
+:root {
+  --font-family-text: "Inter", sans-serif;
+}
+
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: var(--font-family-text);
+  background: #F5F5F5;
+  padding: 40px 16px;
+}
+
+.root {
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 h1 {
   margin-bottom: 40px;
 }
 
-.route-list {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  column-gap: 24px;
-  row-gap: 8px;
-  padding: 0 40px;
+h2 {
+  margin-top: 30px;
+}
+
+.box {
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 16px;
+  border-radius: 12px;
+  background: #ffffff;
 }
 
-.route-module {
-  text-align: right;
+pre.box {
+  white-space: pre-wrap;
 }
 
-hr {
-  margin: 60px 0;
+@media (min-width: 500px)  {
+  body {
+    padding: 40px;
+  }
+
+  .box {
+    padding: 24px;
+  }
+}
+
+@media (min-width: 1024px)  {
+  body {
+    padding: 100px;
+  }
 }
 `;
-function DevNotFoundPage(props) {
-  const routesList = [];
-  Object.keys(props.routes).forEach((urlPath) => {
-    routesList.push(Object.assign({}, props.routes[urlPath], { urlPath }));
-  });
+function ErrorPage(props) {
+  const { code, message } = props;
+  const title = props.title ? `${code} | ${props.title}` : code;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("style", {
         dangerouslySetInnerHTML: { __html: STYLES }
       }),
       /* @__PURE__ */ jsxs("div", {
+        className: "root",
         children: [
-          /* @__PURE__ */ jsxs("h1", {
-            children: [
-              /* @__PURE__ */ jsx("strong", {
-                children: "404:"
-              }),
-              " Not Found"
-            ]
+          /* @__PURE__ */ jsx("h1", {
+            children: title
           }),
-          routesList.length > 0 ? /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                children: "Routes found in the project:"
-              }),
-              /* @__PURE__ */ jsx("div", {
-                class: "route-list",
-                children: routesList.map((route) => /* @__PURE__ */ jsxs(Fragment, {
-                  children: [
-                    /* @__PURE__ */ jsx("div", {
-                      class: "route-module",
-                      children: route.modulePath
-                    }),
-                    /* @__PURE__ */ jsx("a", {
-                      class: "route-url",
-                      href: route.urlPath,
-                      children: route.urlPath
-                    })
-                  ]
-                }))
-              })
-            ]
-          }) : /* @__PURE__ */ jsxs(Fragment, {
-            children: [
-              /* @__PURE__ */ jsx("h2", {
-                children: "No routes found in the project"
-              }),
-              /* @__PURE__ */ jsxs("p", {
-                children: [
-                  "Add your first route at ",
-                  /* @__PURE__ */ jsx("code", {
-                    children: "/routes/index.tsx"
-                  })
-                ]
-              })
-            ]
+          message && /* @__PURE__ */ jsx("p", {
+            children: message
           }),
-          /* @__PURE__ */ jsx("hr", {}),
-          /* @__PURE__ */ jsx("p", {
-            children: "Note: This page could use some love! If you're interested in helping to style this page, please reach out to the root.js developers!"
+          props.children
+        ]
+      })
+    ]
+  });
+}
+
+// src/core/pages/DevNotFoundPage.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+function DevNotFoundPage(props) {
+  const req = props.req;
+  const routesList = [];
+  let urlMaxLength = 0;
+  Object.keys(props.sitemap).forEach((urlPath) => {
+    const route = props.sitemap[urlPath].route;
+    routesList.push(Object.assign({}, route, { urlPath }));
+    if (urlPath.length > urlMaxLength) {
+      urlMaxLength = urlPath.length;
+    }
+  });
+  const routesListString = routesList.map((route) => {
+    return `${route.urlPath.padEnd(urlMaxLength, " ")}  =>  ${route.src}`;
+  }).join("\n");
+  return /* @__PURE__ */ jsxs2(ErrorPage, {
+    code: 404,
+    title: "Root.js",
+    children: [
+      /* @__PURE__ */ jsx2("h2", {
+        children: "Routes"
+      }),
+      routesList.length > 0 ? /* @__PURE__ */ jsx2("pre", {
+        className: "box",
+        children: /* @__PURE__ */ jsx2("code", {
+          children: routesListString
+        })
+      }) : /* @__PURE__ */ jsxs2("div", {
+        className: "box",
+        children: [
+          "Add your first route at ",
+          /* @__PURE__ */ jsx2("code", {
+            children: "/routes/index.tsx"
           })
         ]
+      }),
+      /* @__PURE__ */ jsx2("h2", {
+        children: "Debug Info"
+      }),
+      /* @__PURE__ */ jsx2("pre", {
+        className: "box",
+        children: /* @__PURE__ */ jsx2("code", {
+          children: `url: ${req.originalUrl}`
+        })
+      })
+    ]
+  });
+}
+
+// src/core/pages/DevErrorPage.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
+function DevErrorPage(props) {
+  var _a;
+  const req = props.req;
+  const err = props.error;
+  const route = props.route;
+  const routeParams = props.routeParams;
+  let errMsg = String(err);
+  if (err && err.stack) {
+    errMsg = err.stack.replace(/\(.*node_modules/g, "(node_modules").replace(/at \/.*node_modules/g, "at node_modules");
+    if ((_a = req.rootConfig) == null ? void 0 : _a.rootDir) {
+      errMsg = errMsg.replaceAll(req.rootConfig.rootDir, "<root>");
+    }
+    if (process.env.HOME) {
+      errMsg = errMsg.replaceAll(process.env.HOME, "$HOME");
+    }
+  }
+  return /* @__PURE__ */ jsxs3(ErrorPage, {
+    code: 500,
+    title: "Root.js",
+    children: [
+      errMsg && /* @__PURE__ */ jsxs3(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx3("h2", {
+            children: "Error"
+          }),
+          /* @__PURE__ */ jsx3("pre", {
+            className: "box",
+            children: /* @__PURE__ */ jsx3("code", {
+              children: errMsg
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx3("h2", {
+        children: "Debug Info"
+      }),
+      /* @__PURE__ */ jsx3("pre", {
+        className: "box",
+        children: /* @__PURE__ */ jsx3("code", {
+          children: `url: ${req.originalUrl}
+route: ${(route == null ? void 0 : route.src) || "null"}
+routeParams: ${routeParams && JSON.stringify(routeParams) || "null"}`
+        })
       })
     ]
   });
 }
 
 // src/render/render.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "preact/jsx-runtime";
 var Renderer = class {
-  constructor(config) {
-    this.routes = getRoutes(config);
+  constructor(rootConfig, options) {
+    this.rootConfig = rootConfig;
+    this.routes = getRoutes(this.rootConfig);
+    this.assetMap = options.assetMap;
+    this.elementGraph = options.elementGraph;
   }
-  async render(url, options) {
-    const assetMap = options.assetMap;
+  async handle(req, res, next) {
+    const url = req.path;
     const [route, routeParams] = this.routes.get(url);
-    if (route && route.module && route.module.default) {
-      return await this.renderRoute(route, { routeParams, assetMap });
+    if (!route) {
+      next();
+      return;
     }
-    return { notFound: true };
-  }
-  async renderRoute(route, options) {
-    const routeParams = options.routeParams;
-    const assetMap = options.assetMap;
-    const Component = route.module.default;
-    if (!Component) {
-      throw new Error(
-        "unable to render route. the route should have a default export that renders a jsx component."
-      );
+    const render404 = async () => {
+      next();
+    };
+    const render = async (props2) => {
+      if (!route.module.default) {
+        console.error(`no default component exported in route: ${route.src}`);
+        render404();
+        return;
+      }
+      const output = await this.renderComponent(route.module.default, props2, {
+        route,
+        routeParams
+      });
+      let html = output.html;
+      if (this.rootConfig.prettyHtml) {
+        html = await htmlPretty(html, this.rootConfig.prettyHtmlOptions);
+      } else if (this.rootConfig.minifyHtml !== false) {
+        html = await htmlMinify(html, this.rootConfig.minifyHtmlOptions);
+      }
+      if (req.viteServer) {
+        html = await req.viteServer.transformIndexHtml(req.originalUrl, html);
+      }
+      let statusCode = 200;
+      if (route.src === "routes/404.tsx") {
+        statusCode = 404;
+      } else if (route.src === "routes/500.tsx") {
+        statusCode = 500;
+      }
+      res.status(statusCode).set({ "Content-Type": "text/html" }).end(html);
+    };
+    if (route.module.handle) {
+      const handlerContext = {
+        route,
+        params: routeParams,
+        render,
+        render404
+      };
+      req.handlerContext = handlerContext;
+      return route.module.handle(req, res, next);
     }
     let props = {};
     if (route.module.getStaticProps) {
       const propsData = await route.module.getStaticProps({
+        rootConfig: this.rootConfig,
         params: routeParams
       });
       if (propsData.notFound) {
-        return this.render404();
+        return render404();
       }
       if (propsData.props) {
         props = propsData.props;
       }
     }
+    await render(props);
+  }
+  async renderComponent(Component, props, options) {
+    const { route, routeParams } = options;
     const locale = route.locale;
     const translations = getTranslations(locale);
-    const headComponents = [];
-    const userScripts = [];
-    const vdom = /* @__PURE__ */ jsx2(I18N_CONTEXT.Provider, {
-      value: { locale, translations },
-      children: /* @__PURE__ */ jsx2(SCRIPT_CONTEXT.Provider, {
-        value: userScripts,
-        children: /* @__PURE__ */ jsx2(HEAD_CONTEXT.Provider, {
-          value: headComponents,
-          children: /* @__PURE__ */ jsx2(Component, {
+    const ctx = {
+      route,
+      props,
+      routeParams,
+      locale,
+      translations
+    };
+    const htmlContext = {
+      htmlAttrs: {},
+      headAttrs: {},
+      headComponents: [],
+      bodyAttrs: {},
+      scriptDeps: []
+    };
+    const vdom = /* @__PURE__ */ jsx4(REQUEST_CONTEXT.Provider, {
+      value: ctx,
+      children: /* @__PURE__ */ jsx4(I18N_CONTEXT.Provider, {
+        value: { locale, translations },
+        children: /* @__PURE__ */ jsx4(HTML_CONTEXT.Provider, {
+          value: htmlContext,
+          children: /* @__PURE__ */ jsx4(Component, {
             ...props
           })
         })
       })
     });
-    const mainHtml = renderToString(vdom, {}, { pretty: true });
-    const pageAsset = await assetMap.get(route.modulePath);
-    const cssDeps = await (pageAsset == null ? void 0 : pageAsset.getCssDeps());
-    if (cssDeps) {
-      cssDeps.forEach((cssUrl) => {
-        headComponents.push(/* @__PURE__ */ jsx2("link", {
-          rel: "stylesheet",
-          href: cssUrl
-        }));
-      });
+    const mainHtml = renderToString(vdom);
+    const jsDeps = /* @__PURE__ */ new Set();
+    const cssDeps = /* @__PURE__ */ new Set();
+    const routeAsset = await this.assetMap.get(route.src);
+    if (routeAsset) {
+      const routeCssDeps = await routeAsset.getCssDeps();
+      routeCssDeps.forEach((dep) => cssDeps.add(dep));
     }
-    const scriptDeps = await this.getScriptDeps(mainHtml, { assetMap });
-    scriptDeps.forEach((jsUrls) => {
-      headComponents.push(/* @__PURE__ */ jsx2("script", {
-        type: "module",
-        src: jsUrls
-      }));
-    });
+    await this.collectElementDeps(mainHtml, jsDeps, cssDeps);
     await Promise.all(
-      userScripts.map(async (scriptDep) => {
-        const scriptAsset = await assetMap.get(scriptDep.src);
+      htmlContext.scriptDeps.map(async (scriptDep) => {
+        if (!scriptDep.src) {
+          return;
+        }
+        const scriptAsset = await this.assetMap.get(scriptDep.src.slice(1));
         if (scriptAsset) {
-          const scriptUrl = scriptAsset ? scriptAsset.assetUrl : scriptDep.src;
-          headComponents.push(/* @__PURE__ */ jsx2("script", {
-            type: "module",
-            src: scriptUrl
-          }));
+          jsDeps.add(scriptAsset.assetUrl);
+          const scriptJsDeps = await scriptAsset.getJsDeps();
+          scriptJsDeps.forEach((dep) => jsDeps.add(dep));
         }
       })
     );
-    const html = await this.renderHtml({ mainHtml, locale, headComponents });
+    const styleTags = Array.from(cssDeps).map((cssUrl) => {
+      return /* @__PURE__ */ jsx4("link", {
+        rel: "stylesheet",
+        href: cssUrl
+      });
+    });
+    const scriptTags = Array.from(jsDeps).map((jsUrls) => {
+      return /* @__PURE__ */ jsx4("script", {
+        type: "module",
+        src: jsUrls
+      });
+    });
+    const html = await this.renderHtml(mainHtml, {
+      htmlAttrs: htmlContext.htmlAttrs,
+      headAttrs: htmlContext.headAttrs,
+      bodyAttrs: htmlContext.bodyAttrs,
+      headComponents: [
+        ...htmlContext.headComponents,
+        ...styleTags,
+        ...scriptTags
+      ]
+    });
     return { html };
   }
+  async renderRoute(route, options) {
+    const routeParams = options.routeParams;
+    const Component = route.module.default;
+    if (!Component) {
+      throw new Error(
+        "unable to render route. the route should have a default export that renders a jsx component."
+      );
+    }
+    let props = {};
+    if (route.module.getStaticProps) {
+      const propsData = await route.module.getStaticProps({
+        rootConfig: this.rootConfig,
+        params: routeParams
+      });
+      if (propsData.notFound) {
+        return { notFound: true };
+      }
+      if (propsData.props) {
+        props = propsData.props;
+      }
+    }
+    return this.renderComponent(Component, props, { route, routeParams });
+  }
   async getSitemap() {
     const sitemap = {};
     await this.routes.walk(async (urlPath, route) => {
@@ -405,86 +605,131 @@ var Renderer = class {
     });
     return sitemap;
   }
-  async renderHtml(options) {
-    const page = /* @__PURE__ */ jsxs2("html", {
-      lang: options.locale,
+  async renderHtml(html, options) {
+    const htmlAttrs = (options == null ? void 0 : options.htmlAttrs) || {};
+    const headAttrs = (options == null ? void 0 : options.headAttrs) || {};
+    const bodyAttrs = (options == null ? void 0 : options.bodyAttrs) || {};
+    const page = /* @__PURE__ */ jsxs4("html", {
+      ...htmlAttrs,
       children: [
-        /* @__PURE__ */ jsxs2("head", {
+        /* @__PURE__ */ jsxs4("head", {
+          ...headAttrs,
           children: [
-            /* @__PURE__ */ jsx2("meta", {
+            /* @__PURE__ */ jsx4("meta", {
               charSet: "utf-8"
             }),
-            options.headComponents
+            options == null ? void 0 : options.headComponents
           ]
         }),
-        /* @__PURE__ */ jsx2("body", {
-          dangerouslySetInnerHTML: { __html: options.mainHtml }
+        /* @__PURE__ */ jsx4("body", {
+          ...bodyAttrs,
+          dangerouslySetInnerHTML: { __html: html }
         })
       ]
     });
-    const html = `<!doctype html>
-${renderToString(
-      page,
-      {},
-      { pretty: true }
-    )}
+    return `<!doctype html>
+${renderToString(page)}
 `;
-    return html;
   }
   async render404() {
-    return {
-      html: "<!doctype html><html><title>404 Not Found</title><h1>404 Not Found</h1>",
-      notFound: true
-    };
-  }
-  async renderError(error) {
-    const mainHtml = renderToString(/* @__PURE__ */ jsx2(ErrorPage, {
-      error
+    const [route, routeParams] = this.routes.get("/404");
+    if (route && route.src === "routes/404.tsx" && route.module.default) {
+      const Component = route.module.default;
+      return this.renderComponent(Component, {}, { route, routeParams });
+    }
+    const mainHtml = renderToString(/* @__PURE__ */ jsx4(ErrorPage, {
+      code: 404,
+      title: "Not Found"
     }));
-    const html = await this.renderHtml({ mainHtml, locale: "en" });
+    const html = await this.renderHtml(mainHtml, {
+      headComponents: [/* @__PURE__ */ jsx4("title", {
+        children: "404"
+      })]
+    });
     return { html };
   }
-  async renderDevNotFound() {
-    const routes = await this.getAllRoutes();
-    const mainHtml = renderToString(/* @__PURE__ */ jsx2(DevNotFoundPage, {
-      routes
-    }));
-    const html = await this.renderHtml({
-      mainHtml,
-      locale: "en",
-      headComponents: [/* @__PURE__ */ jsx2("title", {
-        children: "404: Not Found"
+  async renderError(err) {
+    const [route, routeParams] = this.routes.get("/500");
+    if (route && route.src === "routes/500.tsx" && route.module.default) {
+      const Component = route.module.default;
+      return this.renderComponent(
+        Component,
+        { error: err },
+        { route, routeParams }
+      );
+    }
+    const mainHtml = renderToString(
+      /* @__PURE__ */ jsx4(ErrorPage, {
+        code: 500,
+        title: "Error",
+        message: "An unknown error occurred."
+      })
+    );
+    const html = await this.renderHtml(mainHtml, {
+      headComponents: [/* @__PURE__ */ jsx4("title", {
+        children: "500"
       })]
     });
     return { html };
   }
-  async getAllRoutes() {
-    const routes = {};
-    await this.routes.walk((urlPath, route) => {
-      routes[urlPath] = route;
+  async renderDevServer404(req) {
+    const sitemap = await this.getSitemap();
+    const mainHtml = renderToString(
+      /* @__PURE__ */ jsx4(DevNotFoundPage, {
+        req,
+        sitemap
+      })
+    );
+    const html = await this.renderHtml(mainHtml, {
+      headComponents: [/* @__PURE__ */ jsx4("title", {
+        children: "404 | Root.js"
+      })]
     });
-    return routes;
+    return { html };
   }
-  async getScriptDeps(html, options) {
-    const assetMap = options.assetMap;
-    const deps = /* @__PURE__ */ new Set();
-    const re = /<(\w[\w-]+\w)/g;
-    const matches = Array.from(html.matchAll(re));
+  async renderDevServer500(req, error) {
+    const [route, routeParams] = this.routes.get(req.path);
+    const mainHtml = renderToString(
+      /* @__PURE__ */ jsx4(DevErrorPage, {
+        req,
+        route,
+        routeParams,
+        error
+      })
+    );
+    const html = await this.renderHtml(mainHtml, {
+      headComponents: [/* @__PURE__ */ jsx4("title", {
+        children: "500 | Root.js"
+      })]
+    });
+    return { html };
+  }
+  async collectElementDeps(html, jsDeps, cssDeps) {
+    const elementsMap = this.elementGraph.sourceFiles;
+    const assetMap = this.assetMap;
+    const tagNames = /* @__PURE__ */ new Set();
+    for (const tagName of parseTagNames(html)) {
+      if (tagName && tagName in elementsMap) {
+        tagNames.add(tagName);
+        for (const depTagName of this.elementGraph.getDeps(tagName)) {
+          tagNames.add(depTagName);
+        }
+      }
+    }
     await Promise.all(
-      matches.map(async (match) => {
-        const tagName = match[1];
-        if (tagName && tagName.includes("-") && tagName in elementsMap) {
-          const modulePath = elementsMap[tagName];
-          const asset = await assetMap.get(modulePath);
-          if (!asset) {
-            return;
-          }
-          const assetJsDeps = await asset.getJsDeps();
-          assetJsDeps.forEach((dep) => deps.add(dep));
+      Array.from(tagNames).map(async (tagName) => {
+        const elementModule = elementsMap[tagName];
+        const asset = await assetMap.get(elementModule.relPath);
+        if (!asset) {
+          return;
         }
+        const assetJsDeps = await asset.getJsDeps();
+        assetJsDeps.forEach((dep) => jsDeps.add(dep));
+        const assetCssDeps = await asset.getCssDeps();
+        assetCssDeps.forEach((dep) => cssDeps.add(dep));
       })
     );
-    return Array.from(deps);
+    return { jsDeps, cssDeps };
   }
 };
 export {