@blinkk/root 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/render.js

@@ -2,13 +2,12 @@ import {
   ErrorPage,
   HEAD_CONTEXT,
   I18N_CONTEXT,
+  REQUEST_CONTEXT,
   SCRIPT_CONTEXT,
   getTranslations
-} from "./chunk-4SVK7R4Z.js";
+} from "./chunk-5FVR2OXQ.js";
 
 // src/render/render.tsx
-import path2 from "node:path";
-import { h } from "preact";
 import renderToString from "preact-render-to-string";
 
 // src/render/router.ts
@@ -19,13 +18,13 @@ var RouteTrie = class {
   constructor() {
     this.children = {};
   }
-  add(path3, route) {
-    path3 = this.normalizePath(path3);
-    if (path3 === "") {
+  add(path2, route) {
+    path2 = this.normalizePath(path2);
+    if (path2 === "") {
       this.route = route;
       return;
     }
-    const [head, tail] = this.splitPath(path3);
+    const [head, tail] = this.splitPath(path2);
     if (head.startsWith("[...") && head.endsWith("]")) {
       const paramName = head.slice(4, -1);
       this.wildcardChild = new WildcardChild(paramName, route);
@@ -47,9 +46,9 @@ var RouteTrie = class {
     }
     nextNode.add(tail, route);
   }
-  get(path3) {
+  get(path2) {
     const params = {};
-    const route = this.getRoute(path3, params);
+    const route = this.getRoute(path2, params);
     return [route, params];
   }
   walk(cb) {
@@ -79,7 +78,8 @@ var RouteTrie = class {
         addPromise(cb(`/${subpath}${childPath}`, childRoute));
       });
     }
-    return Promise.all(promises);
+    return Promise.all(promises).then(() => {
+    });
   }
   clear() {
     this.children = {};
@@ -113,15 +113,15 @@ var RouteTrie = class {
     }
     return void 0;
   }
-  normalizePath(path3) {
-    return path3.replace(/^\/+/g, "");
+  normalizePath(path2) {
+    return path2.replace(/^\/+/g, "");
   }
-  splitPath(path3) {
-    const i = path3.indexOf("/");
+  splitPath(path2) {
+    const i = path2.indexOf("/");
     if (i === -1) {
-      return [path3, ""];
+      return [path2, ""];
     }
-    return [path3.slice(0, i), path3.slice(i + 1)];
+    return [path2.slice(0, i), path2.slice(i + 1)];
   }
 };
 var ParamChild = class {
@@ -143,12 +143,16 @@ function getRoutes(config) {
   const locales = ((_a = config.i18n) == null ? void 0 : _a.locales) || [];
   const i18nUrlFormat = ((_b = config.i18n) == null ? void 0 : _b.urlFormat) || "/{locale}/{path}";
   const defaultLocale = ((_c = config.i18n) == null ? void 0 : _c.defaultLocale) || "en";
-  const routes = import.meta.glob(["/routes/*.ts", "/routes/**/*.ts", "/routes/*.tsx", "/routes/**/*.tsx"], {
-    eager: true
-  });
+  const routes = import.meta.glob(
+    ["/routes/*.ts", "/routes/**/*.ts", "/routes/*.tsx", "/routes/**/*.tsx"],
+    {
+      eager: true
+    }
+  );
   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;
@@ -158,18 +162,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
         });
       }
     });
@@ -177,58 +186,182 @@ 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: {} });
   }
   return urlPaths;
 }
 function replaceParams(urlPathFormat, params) {
-  const urlPath = urlPathFormat.replaceAll(/\[(\.\.\.)?([\w\-_]*)\]/g, (match, _wildcard, key) => {
-    const val = params[key];
-    if (!val) {
-      throw new Error(`unreplaced param ${match} in url: ${urlPathFormat}`);
+  const urlPath = urlPathFormat.replaceAll(
+    /\[(\.\.\.)?([\w\-_]*)\]/g,
+    (match, _wildcard, key) => {
+      const val = params[key];
+      if (!val) {
+        throw new Error(`unreplaced param ${match} in url: ${urlPathFormat}`);
+      }
+      return val;
     }
-    return val;
-  });
+  );
   return urlPath;
 }
+function pathContainsPlaceholders(urlPath) {
+  const segments = urlPath.split("/");
+  return segments.some((segment) => {
+    return segment.startsWith("[") && segment.endsWith("]");
+  });
+}
 
 // src/render/render.tsx
-var ELEMENTS_MAP = {};
-var ELEMENTS_MODULES = import.meta.glob([
-  "/elements/**/*.ts",
-  "/elements/**/*.tsx"
-]);
-Object.keys(ELEMENTS_MODULES).forEach((elementPath) => {
-  const parts = path2.parse(elementPath);
-  ELEMENTS_MAP[parts.name] = elementPath;
-});
+import { elementsMap } from "virtual:root-elements";
+
+// src/core/components/dev-not-found-page.tsx
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var STYLES = `
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+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;
+}
+
+.route-module {
+  text-align: right;
+}
+
+hr {
+  margin: 60px 0;
+}
+`;
+function DevNotFoundPage(props) {
+  const routesList = [];
+  Object.keys(props.sitemap).forEach((urlPath) => {
+    const route = props.sitemap[urlPath].route;
+    routesList.push(Object.assign({}, route, { urlPath }));
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("style", {
+        dangerouslySetInnerHTML: { __html: STYLES }
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        children: [
+          /* @__PURE__ */ jsxs("h1", {
+            children: [
+              /* @__PURE__ */ jsx("strong", {
+                children: "404:"
+              }),
+              " Not Found"
+            ]
+          }),
+          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"
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__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!"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/render/render.tsx
+import { jsx as jsx2, jsxs as jsxs2 } 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;
   }
-  async render(url, options) {
-    const assetMap = options.assetMap;
+  async render(url) {
     const [route, routeParams] = this.routes.get(url);
     if (route && route.module && route.module.default) {
-      return await this.renderRoute(route, { routeParams, assetMap });
+      return await this.renderRoute(route, { routeParams });
     }
-    return this.render404();
+    return { notFound: true };
   }
   async renderRoute(route, options) {
     const routeParams = options.routeParams;
-    const assetMap = options.assetMap;
+    const assetMap = this.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."
+      );
+    }
     let props = {};
     if (route.module.getStaticProps) {
       const propsData = await route.module.getStaticProps({
@@ -243,46 +376,61 @@ var Renderer = class {
     }
     const locale = route.locale;
     const translations = getTranslations(locale);
+    const ctx = {
+      route,
+      props,
+      routeParams,
+      locale,
+      translations
+    };
     const headComponents = [];
     const userScripts = [];
-    const vdom = /* @__PURE__ */ h(I18N_CONTEXT.Provider, {
-      value: { locale, translations }
-    }, /* @__PURE__ */ h(SCRIPT_CONTEXT.Provider, {
-      value: userScripts
-    }, /* @__PURE__ */ h(HEAD_CONTEXT.Provider, {
-      value: headComponents
-    }, /* @__PURE__ */ h(Component, {
-      ...props
-    }))));
+    const vdom = /* @__PURE__ */ jsx2(REQUEST_CONTEXT.Provider, {
+      value: ctx,
+      children: /* @__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, {
+              ...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__ */ h("link", {
-          rel: "stylesheet",
-          href: cssUrl
-        }));
-      });
+    const jsDeps = /* @__PURE__ */ new Set();
+    const cssDeps = /* @__PURE__ */ new Set();
+    const pageAsset = await assetMap.get(route.src);
+    if (pageAsset) {
+      const pageCssDeps = await pageAsset.getCssDeps();
+      pageCssDeps.forEach((dep) => cssDeps.add(dep));
     }
-    const scriptDeps = await this.getScriptDeps(mainHtml, { assetMap });
-    scriptDeps.forEach((jsUrls) => {
-      headComponents.push(/* @__PURE__ */ h("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.slice(1));
+        if (scriptAsset) {
+          jsDeps.add(scriptAsset.assetUrl);
+          const scriptJsDeps = await scriptAsset.getJsDeps();
+          scriptJsDeps.forEach((dep) => jsDeps.add(dep));
+        }
+      })
+    );
+    cssDeps.forEach((cssUrl) => {
+      headComponents.push(/* @__PURE__ */ jsx2("link", {
+        rel: "stylesheet",
+        href: cssUrl
       }));
     });
-    await Promise.all(userScripts.map(async (scriptDep) => {
-      const scriptAsset = await assetMap.get(scriptDep.src);
-      if (!scriptAsset && import.meta.env.PROD) {
-        console.log(`could not find precompiled asset: ${scriptDep.src}`);
-      }
-      const scriptUrl = scriptAsset ? scriptAsset.assetUrl : scriptDep.src;
-      headComponents.push(/* @__PURE__ */ h("script", {
+    jsDeps.forEach((jsUrls) => {
+      headComponents.push(/* @__PURE__ */ jsx2("script", {
         type: "module",
-        src: scriptUrl
+        src: jsUrls
       }));
-    }));
+    });
     const html = await this.renderHtml({ mainHtml, locale, headComponents });
     return { html };
   }
@@ -300,18 +448,28 @@ var Renderer = class {
     return sitemap;
   }
   async renderHtml(options) {
-    const page = /* @__PURE__ */ h("html", {
-      lang: options.locale
-    }, /* @__PURE__ */ h("head", null, /* @__PURE__ */ h("meta", {
-      charSet: "utf-8"
-    }), /* @__PURE__ */ h("meta", {
-      name: "viewport",
-      content: "width=device-width, initial-scale=1.0"
-    }), options.headComponents), /* @__PURE__ */ h("body", {
-      dangerouslySetInnerHTML: { __html: options.mainHtml }
-    }));
+    const page = /* @__PURE__ */ jsxs2("html", {
+      lang: options.locale,
+      children: [
+        /* @__PURE__ */ jsxs2("head", {
+          children: [
+            /* @__PURE__ */ jsx2("meta", {
+              charSet: "utf-8"
+            }),
+            options.headComponents
+          ]
+        }),
+        /* @__PURE__ */ jsx2("body", {
+          dangerouslySetInnerHTML: { __html: options.mainHtml }
+        })
+      ]
+    });
     const html = `<!doctype html>
-${renderToString(page, {}, { pretty: true })}
+${renderToString(
+      page,
+      {},
+      { pretty: true }
+    )}
 `;
     return html;
   }
@@ -322,30 +480,47 @@ ${renderToString(page, {}, { pretty: true })}
     };
   }
   async renderError(error) {
-    const mainHtml = renderToString(/* @__PURE__ */ h(ErrorPage, {
+    const mainHtml = renderToString(/* @__PURE__ */ jsx2(ErrorPage, {
       error
     }));
     const html = await this.renderHtml({ mainHtml, locale: "en" });
     return { html };
   }
-  async getScriptDeps(html, options) {
-    const assetMap = options.assetMap;
-    const deps = /* @__PURE__ */ new Set();
+  async renderDevServer404() {
+    const sitemap = await this.getSitemap();
+    const mainHtml = renderToString(/* @__PURE__ */ jsx2(DevNotFoundPage, {
+      sitemap
+    }));
+    const html = await this.renderHtml({
+      mainHtml,
+      locale: "en",
+      headComponents: [/* @__PURE__ */ jsx2("title", {
+        children: "404: Not Found"
+      })]
+    });
+    return { html };
+  }
+  async collectElementDeps(html, jsDeps, cssDeps) {
+    const assetMap = this.assetMap;
     const re = /<(\w[\w-]+\w)/g;
     const matches = Array.from(html.matchAll(re));
-    await Promise.all(matches.map(async (match) => {
-      const tagName = match[1];
-      if (tagName && tagName.includes("-") && tagName in ELEMENTS_MAP) {
-        const modulePath = ELEMENTS_MAP[tagName];
-        const asset = await assetMap.get(modulePath);
-        if (!asset) {
-          return;
+    await Promise.all(
+      matches.map(async (match) => {
+        const tagName = match[1];
+        if (tagName && tagName.includes("-") && tagName in elementsMap) {
+          const elementModule = elementsMap[tagName];
+          const asset = await assetMap.get(elementModule.src);
+          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));
         }
-        const assetJsDeps = await asset.getJsDeps();
-        assetJsDeps.forEach((dep) => deps.add(dep));
-      }
-    }));
-    return Array.from(deps);
+      })
+    );
+    return { jsDeps, cssDeps };
   }
 };
 export {