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

package/dist/render.js

@@ -1,26 +1,296 @@
-import {
-  htmlMinify,
-  htmlPretty,
-  parseTagNames
-} from "./chunk-WVRC46JG.js";
 import {
   HTML_CONTEXT,
   I18N_CONTEXT,
   REQUEST_CONTEXT,
   getTranslations
-} from "./chunk-WTSNW7BB.js";
+} from "./chunk-MJCIAH6K.js";
+import {
+  htmlMinify,
+  htmlPretty,
+  parseTagNames
+} from "./chunk-DFBTOMQF.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-country-code") || 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";
 
 // src/render/route-trie.ts
-var RouteTrie = class {
+var RouteTrie = class _RouteTrie {
   constructor() {
     this.children = {};
   }
+  /**
+   * Adds a route to the trie.
+   */
   add(path2, route) {
     path2 = this.normalizePath(path2);
     if (path2 === "") {
@@ -35,25 +305,35 @@ var RouteTrie = class {
     }
     let nextNode;
     if (head.startsWith("[") && head.endsWith("]")) {
-      if (!this.paramChild) {
-        const paramName = head.slice(1, -1);
-        this.paramChild = new ParamChild(paramName);
+      if (!this.paramChildren) {
+        this.paramChildren = {};
       }
-      nextNode = this.paramChild.trie;
+      const paramName = head.slice(1, -1);
+      if (!this.paramChildren[paramName]) {
+        this.paramChildren[paramName] = new ParamChild(paramName);
+      }
+      nextNode = this.paramChildren[paramName].trie;
     } else {
       nextNode = this.children[head];
       if (!nextNode) {
-        nextNode = new RouteTrie();
+        nextNode = new _RouteTrie();
         this.children[head] = nextNode;
       }
     }
     nextNode.add(tail, route);
   }
+  /**
+   * Returns a route mapped to the given path and any parameter values from the
+   * URL.
+   */
   get(path2) {
     const params = {};
     const route = this.getRoute(path2, params);
     return [route, params];
   }
+  /**
+   * Walks the route trie and calls a callback function for each route.
+   */
   walk(cb) {
     const promises = [];
     const addPromise = (promise) => {
@@ -64,11 +344,13 @@ var RouteTrie = class {
     if (this.route) {
       addPromise(cb("/", this.route));
     }
-    if (this.paramChild) {
-      const param = `[${this.paramChild.name}]`;
-      this.paramChild.trie.walk((childPath, route) => {
-        const paramUrlPath = `/${param}${childPath}`;
-        addPromise(cb(paramUrlPath, route));
+    if (this.paramChildren) {
+      Object.values(this.paramChildren).forEach((paramChild) => {
+        const param = `[${paramChild.name}]`;
+        paramChild.trie.walk((childPath, route) => {
+          const paramUrlPath = `/${param}${childPath}`;
+          addPromise(cb(paramUrlPath, route));
+        });
       });
     }
     if (this.wildcardChild) {
@@ -84,9 +366,12 @@ var RouteTrie = class {
     return Promise.all(promises).then(() => {
     });
   }
+  /**
+   * Removes all routes from the trie.
+   */
   clear() {
     this.children = {};
-    this.paramChild = void 0;
+    this.paramChildren = void 0;
     this.wildcardChild = void 0;
     this.route = void 0;
   }
@@ -103,11 +388,13 @@ var RouteTrie = class {
         return route;
       }
     }
-    if (this.paramChild) {
-      const route = this.paramChild.trie.getRoute(tail, params);
-      if (route) {
-        params[this.paramChild.name] = head;
-        return route;
+    if (this.paramChildren) {
+      for (const paramChild of Object.values(this.paramChildren)) {
+        const route = paramChild.trie.getRoute(tail, params);
+        if (route) {
+          params[paramChild.name] = head;
+          return route;
+        }
       }
     }
     if (this.wildcardChild) {
@@ -116,9 +403,17 @@ var RouteTrie = class {
     }
     return void 0;
   }
+  /**
+   * Normalizes a path for inclusion into the route trie.
+   */
   normalizePath(path2) {
     return path2.replace(/^\/+/g, "");
   }
+  /**
+   * Splits the parent directory from its children, e.g.:
+   *
+   *     splitPath("foo/bar/baz") -> ["foo", "bar/baz"]
+   */
   splitPath(path2) {
     const i = path2.indexOf("/");
     if (i === -1) {
@@ -170,8 +465,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 +476,7 @@ function getRoutes(config) {
           src,
           module: routes[modulePath],
           locale,
+          isDefaultLocale: false,
           routePath,
           localeRoutePath
         });
@@ -206,19 +503,19 @@ async function getAllPathsForRoute(urlPathFormat, route) {
             );
           } else {
             urlPaths.push({
-              urlPath: replaceParams(urlPathFormat, pathParams.params),
+              urlPath: normalizeUrlPath(urlPath),
               params: pathParams.params || {}
             });
           }
         }
       );
     }
-  } else if (pathContainsPlaceholders(urlPathFormat)) {
+  } else if (pathContainsPlaceholders(urlPathFormat) && !routeModule.handle) {
     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: {} });
+    urlPaths.push({ urlPath: normalizeUrlPath(urlPathFormat), params: {} });
   }
   return urlPaths;
 }
@@ -235,6 +532,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,194 +545,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;
-}
-
-.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/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: "Not found",
-    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: "Something went wrong",
-    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 {
@@ -440,7 +555,7 @@ var Renderer = class {
     this.elementGraph = options.elementGraph;
   }
   async handle(req, res, next) {
-    const url = req.path;
+    const url = req.path.toLowerCase();
     const [route, routeParams] = this.routes.get(url);
     if (!route) {
       next();
@@ -449,18 +564,35 @@ var Renderer = class {
     if (route.locale) {
       routeParams.$locale = route.locale;
     }
+    const fallbackLocales = route.isDefaultLocale ? getFallbackLocales(req) : [route.locale];
+    const getPreferredLocale = (availableLocales) => {
+      var _a, _b;
+      const lowerLocales = availableLocales.map((l) => l.toLowerCase());
+      for (const fallbackLocale of fallbackLocales) {
+        if (lowerLocales.includes(fallbackLocale.toLowerCase())) {
+          return fallbackLocale;
+        }
+      }
+      return ((_b = (_a = req.rootConfig) == null ? void 0 : _a.i18n) == null ? void 0 : _b.defaultLocale) || "en";
+    };
     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) {
@@ -469,7 +601,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") {
@@ -477,12 +609,15 @@ var Renderer = class {
       } else if (route.src === "routes/500.tsx") {
         statusCode = 500;
       }
+      req.hooks.trigger("preRender");
       res.status(statusCode).set({ "Content-Type": "text/html" }).end(html);
     };
     if (route.module.handle) {
       const handlerContext = {
         route,
         params: routeParams,
+        i18nFallbackLocales: fallbackLocales,
+        getPreferredLocale,
         render,
         render404
       };
@@ -505,10 +640,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,
@@ -522,18 +661,7 @@ var Renderer = class {
       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 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);
     const jsDeps = /* @__PURE__ */ new Set();
     const cssDeps = /* @__PURE__ */ new Set();
@@ -548,7 +676,8 @@ var Renderer = class {
         if (!scriptDep.src) {
           return;
         }
-        const scriptAsset = await this.assetMap.get(scriptDep.src.slice(1));
+        const assetId = String(scriptDep.src).slice(1);
+        const scriptAsset = await this.assetMap.get(assetId);
         if (scriptAsset) {
           jsDeps.add(scriptAsset.assetUrl);
           const scriptJsDeps = await scriptAsset.getJsDeps();
@@ -557,16 +686,10 @@ var Renderer = class {
       })
     );
     const styleTags = Array.from(cssDeps).map((cssUrl) => {
-      return /* @__PURE__ */ jsx4("link", {
-        rel: "stylesheet",
-        href: cssUrl
-      });
+      return /* @__PURE__ */ jsx4("link", { rel: "stylesheet", href: cssUrl });
     });
     const scriptTags = Array.from(jsDeps).map((jsUrls) => {
-      return /* @__PURE__ */ jsx4("script", {
-        type: "module",
-        src: jsUrls
-      });
+      return /* @__PURE__ */ jsx4("script", { type: "module", src: jsUrls });
     });
     const html = await this.renderHtml(mainHtml, {
       htmlAttrs: htmlContext.htmlAttrs,
@@ -580,6 +703,7 @@ var Renderer = class {
     });
     return { html };
   }
+  /** SSG renders a route. */
   async renderRoute(route, options) {
     const routeParams = options.routeParams;
     if (route.locale) {
@@ -592,6 +716,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,
@@ -603,8 +729,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 = {};
@@ -623,80 +766,85 @@ var Renderer = class {
     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__ */ jsxs4("head", {
-          ...headAttrs,
-          children: [
-            /* @__PURE__ */ jsx4("meta", {
-              charSet: "utf-8"
-            }),
-            options == null ? void 0 : options.headComponents
-          ]
-        }),
-        /* @__PURE__ */ jsx4("body", {
-          ...bodyAttrs,
-          dangerouslySetInnerHTML: { __html: html }
-        })
-      ]
-    });
+    const page = /* @__PURE__ */ jsxs4("html", { ...htmlAttrs, children: [
+      /* @__PURE__ */ jsxs4("head", { ...headAttrs, children: [
+        /* @__PURE__ */ jsx4("meta", { charSet: "utf-8" }),
+        options == null ? void 0 : options.headComponents
+      ] }),
+      /* @__PURE__ */ jsx4("body", { ...bodyAttrs, dangerouslySetInnerHTML: { __html: html } })
+    ] });
     return `<!doctype html>
 ${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",
-        message: "Double-check the URL entered and try again."
-      })
+      /* @__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 Not Found"
-        }),
-        /* @__PURE__ */ jsx4("meta", {
-          name: "viewport",
-          content: "width=device-width, initial-scale=1.0"
-        })
+        /* @__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: "Something went wrong",
-        message: "An unknown error occurred."
-      })
+      /* @__PURE__ */ jsx4(
+        ErrorPage,
+        {
+          code: 500,
+          title: "Something went wrong",
+          message: "An unknown error occurred.",
+          align: "center"
+        }
+      )
     );
     const html = await this.renderHtml(mainHtml, {
       headComponents: [
-        /* @__PURE__ */ jsx4("title", {
-          children: "500 Error"
-        }),
-        /* @__PURE__ */ jsx4("meta", {
-          name: "viewport",
-          content: "width=device-width, initial-scale=1.0"
-        })
+        /* @__PURE__ */ jsx4("title", { children: "500 Error" }),
+        /* @__PURE__ */ jsx4(
+          "meta",
+          {
+            name: "viewport",
+            content: "width=device-width, initial-scale=1.0"
+          }
+        )
       ]
     });
     return { html };
@@ -704,35 +852,35 @@ ${renderToString(page)}
   async renderDevServer404(req) {
     const sitemap = await this.getSitemap();
     const mainHtml = renderToString(
-      /* @__PURE__ */ jsx4(DevNotFoundPage, {
-        req,
-        sitemap
-      })
+      /* @__PURE__ */ jsx4(DevNotFoundPage, { req, sitemap })
     );
     const html = await this.renderHtml(mainHtml, {
-      headComponents: [/* @__PURE__ */ jsx4("title", {
-        children: "404 Not found | Root.js"
-      })]
+      headComponents: [/* @__PURE__ */ jsx4("title", { children: "404 Not found | Root.js" })]
     });
     return { html };
   }
   async renderDevServer500(req, error) {
     const [route, routeParams] = this.routes.get(req.path);
     const mainHtml = renderToString(
-      /* @__PURE__ */ jsx4(DevErrorPage, {
-        req,
-        route,
-        routeParams,
-        error
-      })
+      /* @__PURE__ */ jsx4(
+        DevErrorPage,
+        {
+          req,
+          route,
+          routeParams,
+          error
+        }
+      )
     );
     const html = await this.renderHtml(mainHtml, {
-      headComponents: [/* @__PURE__ */ jsx4("title", {
-        children: "500 Error | Root.js"
-      })]
+      headComponents: [/* @__PURE__ */ jsx4("title", { children: "500 Error | Root.js" })]
     });
     return { html };
   }
+  /**
+   * Parses rendered HTML for custom element tags used on the page and
+   * automatically adds the JS/CSS deps to the page.
+   */
   async collectElementDeps(html, jsDeps, cssDeps) {
     const elementsMap = this.elementGraph.sourceFiles;
     const assetMap = this.assetMap;