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

package/dist/render.js

@@ -1,18 +1,341 @@
-import {
-  htmlMinify,
-  htmlPretty,
-  parseTagNames
-} from "./chunk-WVRC46JG.js";
 import {
   HTML_CONTEXT,
   I18N_CONTEXT,
   REQUEST_CONTEXT,
   getTranslations
-} from "./chunk-WTSNW7BB.js";
+} from "./chunk-HQXIHYDN.js";
+import {
+  htmlMinify,
+  htmlPretty,
+  parseTagNames
+} from "./chunk-DXD5LKU3.js";
 
 // src/render/render.tsx
 import renderToString from "preact-render-to-string";
 
+// 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: var(--font-family-text);
+  background: #F5F5F5;
+  padding: 40px 16px;
+}
+
+.root {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.root.align-center {
+  text-align: center;
+}
+
+h1.title {
+  margin-top: 0;
+  margin-bottom: 24px;
+}
+
+p.message {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.box {
+  font-size: 16px;
+  line-height: 1.5;
+  padding: 16px;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+pre.box {
+  white-space: pre-wrap;
+}
+
+@media (min-width: 500px)  {
+  body {
+    padding: 40px;
+  }
+
+  .box {
+    padding: 24px;
+  }
+}
+
+@media (min-width: 1024px)  {
+  body {
+    padding: 100px;
+  }
+}
+`;
+function ErrorPage(props) {
+  const { code, message } = props;
+  const title = props.title || code;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("style", {
+        dangerouslySetInnerHTML: { __html: STYLES }
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: `root align-${props.align || "left"}`,
+        children: [
+          /* @__PURE__ */ jsx("h1", {
+            className: "title",
+            children: title
+          }),
+          message && /* @__PURE__ */ jsx("p", {
+            className: "message",
+            children: message
+          }),
+          props.children
+        ]
+      })
+    ]
+  });
+}
+
+// src/core/pages/DevErrorPage.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } 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__ */ jsxs2(ErrorPage, {
+    code: 500,
+    title: "Something went wrong",
+    children: [
+      errMsg && /* @__PURE__ */ jsxs2(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx2("h2", {
+            children: "Error"
+          }),
+          /* @__PURE__ */ jsx2("pre", {
+            className: "box",
+            children: /* @__PURE__ */ jsx2("code", {
+              children: errMsg
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("h2", {
+        children: "Debug Info"
+      }),
+      /* @__PURE__ */ jsx2("pre", {
+        className: "box",
+        children: /* @__PURE__ */ jsx2("code", {
+          children: `url: ${req.originalUrl}
+route: ${(route == null ? void 0 : route.src) || "null"}
+routeParams: ${routeParams && JSON.stringify(routeParams) || "null"}`
+        })
+      })
+    ]
+  });
+}
+
+// src/core/pages/DevNotFoundPage.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
+function DevNotFoundPage(props) {
+  const req = props.req;
+  const routesListMap = {};
+  let srcMaxLength = 0;
+  Object.keys(props.sitemap).forEach((urlPath) => {
+    const route = props.sitemap[urlPath].route;
+    routesListMap[route.src] ??= [];
+    routesListMap[route.src].push({ route, urlPath });
+    if (route.src.length > srcMaxLength) {
+      srcMaxLength = route.src.length;
+    }
+  });
+  const routeSrcs = Object.keys(routesListMap).sort(sortRouteFiles);
+  const lines = [];
+  routeSrcs.forEach((routeSrc) => {
+    const routeUrls = routesListMap[routeSrc].sort(sortRouteURLs);
+    routeUrls.forEach((routeUrl, i) => {
+      const urlPath = routeUrl.urlPath;
+      if (i === 0) {
+        lines.push(`${routeSrc.padEnd(srcMaxLength, " ")}  =>  ${urlPath}`);
+      } else {
+        lines.push(`${"".padEnd(srcMaxLength, " ")}  =>  ${urlPath}`);
+      }
+    });
+  });
+  const routesListString = lines.join("\n");
+  return /* @__PURE__ */ jsxs3(ErrorPage, {
+    code: 404,
+    title: "Not found",
+    children: [
+      /* @__PURE__ */ jsx3("h2", {
+        children: "Routes"
+      }),
+      Object.keys(routesListMap).length > 0 ? /* @__PURE__ */ jsx3("pre", {
+        className: "box",
+        children: /* @__PURE__ */ jsx3("code", {
+          children: routesListString
+        })
+      }) : /* @__PURE__ */ jsxs3("div", {
+        className: "box",
+        children: [
+          "Add your first route at ",
+          /* @__PURE__ */ jsx3("code", {
+            children: "/routes/index.tsx"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx3("h2", {
+        children: "Debug Info"
+      }),
+      /* @__PURE__ */ jsx3("pre", {
+        className: "box",
+        children: /* @__PURE__ */ jsx3("code", {
+          children: `url: ${req.originalUrl}`
+        })
+      })
+    ]
+  });
+}
+function sortRouteFiles(a, b) {
+  if (a === "routes/index.tsx") {
+    return -1;
+  }
+  if (b === "routes/index.tsx") {
+    return 1;
+  }
+  return a.localeCompare(b);
+}
+function sortRouteURLs(a, b) {
+  if (a.route.isDefaultLocale && !b.route.isDefaultLocale) {
+    return -1;
+  }
+  if (!a.route.isDefaultLocale && b.route.isDefaultLocale) {
+    return 1;
+  }
+  return a.urlPath.localeCompare(b.urlPath);
+}
+
+// src/render/accept-language.ts
+var ACCEPT_LANG_RE = /((([a-zA-Z]+(-[a-zA-Z0-9]+){0,2})|\*)(;q=[0-1](\.[0-9]+)?)?)*/g;
+function parseAcceptLanguage(value) {
+  const matches = String(value).match(ACCEPT_LANG_RE);
+  if (!matches) {
+    return [];
+  }
+  const results = [];
+  matches.forEach((m) => {
+    if (!m) {
+      return;
+    }
+    const parts = m.split(";");
+    const ietf = parts[0].split("-");
+    const hasScript = ietf.length === 3;
+    results.push({
+      code: ietf[0],
+      script: hasScript ? ietf[1] : void 0,
+      region: hasScript ? ietf[2] : ietf[1],
+      quality: parts[1] ? parseFloat(parts[1].split("=")[1]) : 1
+    });
+  });
+  results.sort((a, b) => b.quality - a.quality);
+  return results;
+}
+
+// src/render/i18n-fallbacks.ts
+var UNKNOWN_COUNTRY = "zz";
+function getFallbackLocales(req) {
+  var _a, _b;
+  const hl = getFirstQueryParam(req, "hl");
+  const countryCode = getCountry(req);
+  if (isWebCrawler(req)) {
+    const defaultLocale = ((_b = (_a = req.rootConfig) == null ? void 0 : _a.i18n) == null ? void 0 : _b.defaultLocale) || "en";
+    if (hl && hl !== defaultLocale) {
+      return [hl, defaultLocale];
+    }
+    return [defaultLocale];
+  }
+  const locales = /* @__PURE__ */ new Set();
+  if (hl) {
+    const langCode = hl;
+    locales.add(`${langCode}_${countryCode}`);
+    locales.add(`${langCode}_ALL`);
+    locales.add(langCode);
+  }
+  const langs = getFallbackLanguages(req);
+  langs.forEach((langCode) => {
+    locales.add(`${langCode}_${countryCode}`);
+  });
+  locales.add(`ALL_${countryCode}`);
+  langs.forEach((langCode) => {
+    locales.add(`${langCode}_ALL`);
+    locales.add(langCode);
+  });
+  return Array.from(locales);
+}
+function getCountry(req) {
+  const normalize = (countryCode) => String(countryCode).toLowerCase();
+  const gl = getFirstQueryParam(req, "gl");
+  if (gl) {
+    return normalize(gl);
+  }
+  const gaeCountry = req.get("x-appengine-country");
+  if (gaeCountry) {
+    return normalize(gaeCountry);
+  }
+  return UNKNOWN_COUNTRY;
+}
+function getFallbackLanguages(req) {
+  const langs = /* @__PURE__ */ new Set();
+  const acceptLangHeader = req.get("accept-language") || "";
+  if (acceptLangHeader) {
+    parseAcceptLanguage(acceptLangHeader).forEach((lang) => {
+      if (lang.region) {
+        langs.add(`${lang.code}-${lang.region}`);
+      }
+      langs.add(lang.code);
+    });
+  }
+  langs.add("en");
+  return Array.from(langs);
+}
+function getFirstQueryParam(req, key) {
+  const val = req.query[key];
+  if (val === null || val === void 0) {
+    return null;
+  }
+  if (Array.isArray(val)) {
+    if (val.length === 0) {
+      return null;
+    }
+    return String(val[0]);
+  }
+  return String(val);
+}
+function isWebCrawler(req) {
+  const userAgentHeader = req.get("User-Agent");
+  if (!userAgentHeader) {
+    return false;
+  }
+  const userAgent = userAgentHeader.toLowerCase();
+  return userAgent.includes("googlebot") || userAgent.includes("bingbot") || userAgent.includes("twitterbot");
+}
+
 // src/render/router.ts
 import path from "node:path";
 
@@ -170,8 +493,9 @@ function getRoutes(config) {
       src,
       module: routes[modulePath],
       locale: defaultLocale,
-      routePath,
-      localeRoutePath
+      isDefaultLocale: true,
+      routePath: normalizeUrlPath(routePath),
+      localeRoutePath: normalizeUrlPath(localeRoutePath)
     });
     locales.forEach((locale) => {
       const localePath = localeRoutePath.replace("[locale]", locale);
@@ -180,6 +504,7 @@ function getRoutes(config) {
           src,
           module: routes[modulePath],
           locale,
+          isDefaultLocale: false,
           routePath,
           localeRoutePath
         });
@@ -206,7 +531,7 @@ async function getAllPathsForRoute(urlPathFormat, route) {
             );
           } else {
             urlPaths.push({
-              urlPath: replaceParams(urlPathFormat, pathParams.params),
+              urlPath: normalizeUrlPath(urlPath),
               params: pathParams.params || {}
             });
           }
@@ -218,7 +543,7 @@ async function getAllPathsForRoute(urlPathFormat, route) {
       `path contains placeholders: ${urlPathFormat}, did you forget to define getStaticPaths()? more info: https://rootjs.dev/guide/routes#getStaticPaths`
     );
   } else {
-    urlPaths.push({ urlPath: urlPathFormat, params: {} });
+    urlPaths.push({ urlPath: normalizeUrlPath(urlPathFormat), params: {} });
   }
   return urlPaths;
 }
@@ -235,6 +560,12 @@ function replaceParams(urlPathFormat, params) {
   );
   return urlPath;
 }
+function normalizeUrlPath(urlPath) {
+  if (urlPath !== "/" && urlPath.endsWith("/")) {
+    urlPath = urlPath.replace(/\/*$/g, "");
+  }
+  return urlPath;
+}
 function pathContainsPlaceholders(urlPath) {
   const segments = urlPath.split("/");
   return segments.some((segment) => {
@@ -242,186 +573,6 @@ function pathContainsPlaceholders(urlPath) {
   });
 }
 
-// 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: var(--font-family-text);
-  background: #F5F5F5;
-  padding: 40px 16px;
-}
-
-.root {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-h1 {
-  margin-bottom: 40px;
-}
-
-h2 {
-  margin-top: 30px;
-}
-
-.box {
-  font-size: 16px;
-  line-height: 1.5;
-  padding: 16px;
-  border-radius: 12px;
-  background: #ffffff;
-}
-
-pre.box {
-  white-space: pre-wrap;
-}
-
-@media (min-width: 500px)  {
-  body {
-    padding: 40px;
-  }
-
-  .box {
-    padding: 24px;
-  }
-}
-
-@media (min-width: 1024px)  {
-  body {
-    padding: 100px;
-  }
-}
-`;
-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__ */ jsx("h1", {
-            children: title
-          }),
-          message && /* @__PURE__ */ jsx("p", {
-            children: message
-          }),
-          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 jsx4, jsxs as jsxs4 } from "preact/jsx-runtime";
 var Renderer = class {
@@ -438,18 +589,28 @@ var Renderer = class {
       next();
       return;
     }
+    if (route.locale) {
+      routeParams.$locale = route.locale;
+    }
+    const fallbackLocales = route.isDefaultLocale ? getFallbackLocales(req) : [route.locale];
     const render404 = async () => {
       next();
     };
-    const render = async (props2) => {
+    const render = async (props2, options) => {
       if (!route.module.default) {
         console.error(`no default component exported in route: ${route.src}`);
         render404();
         return;
       }
+      const currentPath = req.path;
+      const locale = (options == null ? void 0 : options.locale) || route.locale;
+      const translations = options == null ? void 0 : options.translations;
       const output = await this.renderComponent(route.module.default, props2, {
+        currentPath,
         route,
-        routeParams
+        routeParams,
+        locale,
+        translations
       });
       let html = output.html;
       if (this.rootConfig.prettyHtml) {
@@ -458,7 +619,7 @@ var Renderer = class {
         html = await htmlMinify(html, this.rootConfig.minifyHtmlOptions);
       }
       if (req.viteServer) {
-        html = await req.viteServer.transformIndexHtml(req.originalUrl, html);
+        html = await req.viteServer.transformIndexHtml(currentPath, html);
       }
       let statusCode = 200;
       if (route.src === "routes/404.tsx") {
@@ -472,6 +633,7 @@ var Renderer = class {
       const handlerContext = {
         route,
         params: routeParams,
+        i18nFallbackLocales: fallbackLocales,
         render,
         render404
       };
@@ -494,10 +656,14 @@ var Renderer = class {
     await render(props);
   }
   async renderComponent(Component, props, options) {
-    const { route, routeParams } = options;
-    const locale = route.locale;
-    const translations = getTranslations(locale);
+    const { currentPath, route, routeParams } = options;
+    const locale = options.locale;
+    const translations = {
+      ...getTranslations(locale),
+      ...options.translations || {}
+    };
     const ctx = {
+      currentPath,
       route,
       props,
       routeParams,
@@ -571,6 +737,9 @@ var Renderer = class {
   }
   async renderRoute(route, options) {
     const routeParams = options.routeParams;
+    if (route.locale) {
+      routeParams.$locale = route.locale;
+    }
     const Component = route.module.default;
     if (!Component) {
       throw new Error(
@@ -578,6 +747,8 @@ var Renderer = class {
       );
     }
     let props = {};
+    let locale = route.locale;
+    let translations = void 0;
     if (route.module.getStaticProps) {
       const propsData = await route.module.getStaticProps({
         rootConfig: this.rootConfig,
@@ -589,8 +760,25 @@ var Renderer = class {
       if (propsData.props) {
         props = propsData.props;
       }
+      if (propsData.locale) {
+        locale = propsData.locale;
+      }
+      if (propsData.translations) {
+        translations = propsData.translations;
+      }
     }
-    return this.renderComponent(Component, props, { route, routeParams });
+    const routePath = route.isDefaultLocale ? route.routePath : route.localeRoutePath;
+    const currentPath = replaceParams(routePath, {
+      ...routeParams,
+      locale
+    });
+    return this.renderComponent(Component, props, {
+      currentPath,
+      route,
+      routeParams,
+      locale,
+      translations
+    });
   }
   async getSitemap() {
     const sitemap = {};
@@ -631,44 +819,67 @@ var Renderer = class {
 ${renderToString(page)}
 `;
   }
-  async render404() {
+  async render404(options) {
+    const currentPath = (options == null ? void 0 : options.currentPath) || "/404";
     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 });
+      return this.renderComponent(
+        Component,
+        {},
+        { currentPath, route, routeParams, locale: "en" }
+      );
     }
-    const mainHtml = renderToString(/* @__PURE__ */ jsx4(ErrorPage, {
-      code: 404,
-      title: "Not Found"
-    }));
+    const mainHtml = renderToString(
+      /* @__PURE__ */ jsx4(ErrorPage, {
+        code: 404,
+        title: "Not found",
+        message: "Double-check the URL entered and try again.",
+        align: "center"
+      })
+    );
     const html = await this.renderHtml(mainHtml, {
-      headComponents: [/* @__PURE__ */ jsx4("title", {
-        children: "404"
-      })]
+      headComponents: [
+        /* @__PURE__ */ jsx4("title", {
+          children: "404 Not Found"
+        }),
+        /* @__PURE__ */ jsx4("meta", {
+          name: "viewport",
+          content: "width=device-width, initial-scale=1.0"
+        })
+      ]
     });
     return { html };
   }
-  async renderError(err) {
+  async renderError(err, options) {
+    const currentPath = (options == null ? void 0 : options.currentPath) || "/500";
     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 }
+        { currentPath, route, routeParams, locale: "en" }
       );
     }
     const mainHtml = renderToString(
       /* @__PURE__ */ jsx4(ErrorPage, {
         code: 500,
-        title: "Error",
-        message: "An unknown error occurred."
+        title: "Something went wrong",
+        message: "An unknown error occurred.",
+        align: "center"
       })
     );
     const html = await this.renderHtml(mainHtml, {
-      headComponents: [/* @__PURE__ */ jsx4("title", {
-        children: "500"
-      })]
+      headComponents: [
+        /* @__PURE__ */ jsx4("title", {
+          children: "500 Error"
+        }),
+        /* @__PURE__ */ jsx4("meta", {
+          name: "viewport",
+          content: "width=device-width, initial-scale=1.0"
+        })
+      ]
     });
     return { html };
   }
@@ -682,7 +893,7 @@ ${renderToString(page)}
     );
     const html = await this.renderHtml(mainHtml, {
       headComponents: [/* @__PURE__ */ jsx4("title", {
-        children: "404 | Root.js"
+        children: "404 Not found | Root.js"
       })]
     });
     return { html };
@@ -699,7 +910,7 @@ ${renderToString(page)}
     );
     const html = await this.renderHtml(mainHtml, {
       headComponents: [/* @__PURE__ */ jsx4("title", {
-        children: "500 | Root.js"
+        children: "500 Error | Root.js"
       })]
     });
     return { html };