@quilted/preact-localize 0.1.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @quilted/react-localize
 
+## 0.3.1
+
+### Patch Changes
+
+- [#788](https://github.com/lemonmade/quilt/pull/788) [`85a4b7e`](https://github.com/lemonmade/quilt/commit/85a4b7ed8e6ad58662ebf969d8fabbe8e21510a3) Thanks [@lemonmade](https://github.com/lemonmade)! - Add `Browser.locale` and use it in place of `useLocaleFromEnvironment()`
+
+## 0.3.0
+
+### Patch Changes
+
+- [#757](https://github.com/lemonmade/quilt/pull/757) [`00cac4b`](https://github.com/lemonmade/quilt/commit/00cac4b4d01831ba654e94152d7a67a0ef75043b) Thanks [@lemonmade](https://github.com/lemonmade)! - Simplify routing library
+
+- Updated dependencies [[`00cac4b`](https://github.com/lemonmade/quilt/commit/00cac4b4d01831ba654e94152d7a67a0ef75043b)]:
+  - @quilted/request-router@0.3.0
+  - @quilted/preact-router@0.2.0
+
 ## 0.2.2
 
 ### Patch Changes

package/build/esm/Localization.mjs

@@ -1,16 +1,24 @@
 import { useMemo } from 'preact/hooks';
 import { createLocalizedFormatting } from '@quilted/localize';
-import { HTMLAttributes } from '@quilted/preact-browser';
+import { useBrowserDetails, HTMLAttributes } from '@quilted/preact-browser';
 import { LocaleContext, LocalizedFormattingContext } from './context.mjs';
 import { jsx, jsxs } from 'preact/jsx-runtime';
 
 const RTL_LOCALES = new Set(['ar', 'arc', 'ckb', 'dv', 'fa', 'ha', 'he', 'khw', 'ks', 'ps', 'sd', 'ur', 'uz-AF', 'yi']);
 function Localization({
-  locale,
-  direction = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr',
+  locale: explicitLocale,
+  direction: explicitDirection,
   children
 }) {
+  const browserDetails = useBrowserDetails({
+    optional: explicitLocale == null
+  });
+  const locale = explicitLocale ?? browserDetails?.locale.value;
+  if (locale == null) {
+    throw new Error(`Could not determine locale`);
+  }
   const formatting = useMemo(() => createLocalizedFormatting(locale), [locale]);
+  const direction = explicitDirection ?? (RTL_LOCALES.has(locale) ? 'rtl' : 'ltr');
   return jsx(LocaleContext.Provider, {
     value: locale,
     children: jsxs(LocalizedFormattingContext.Provider, {

package/build/esm/index.mjs

@@ -2,10 +2,10 @@ export { MissingTranslationError, MissingTranslationPlaceholderError, createLoca
 export { Localization } from './Localization.mjs';
 export { useLocalizedFormatting } from './hooks/formatting.mjs';
 export { useLocale } from './hooks/locale.mjs';
-export { useLocaleFromEnvironment } from './hooks/locale-from-environment.mjs';
 export { LocalizedFormattingContext } from './context.mjs';
 export { LocalizedLink } from './routing/LocalizedLink.mjs';
-export { LocalizedRouting } from './routing/LocalizedRouting.mjs';
+export { LocalizedNavigation } from './routing/LocalizedNavigation.mjs';
+export { LocalizedRouter } from './routing/LocalizedRouter.mjs';
 export { useRouteLocalization } from './routing/context.mjs';
 export { createRouteLocalization } from './routing/localization/by-locale.mjs';
 export { createRoutePathLocalization } from './routing/localization/by-path.mjs';

package/build/esm/request-router.mjs

@@ -7,9 +7,9 @@ function createRequestRouterLocalization({
 }) {
   const {
     matchLocale,
-    redirectUrl,
+    redirectURL,
     defaultLocale,
-    localeFromUrl
+    localeFromURL
   } = localization;
   const getDefaultLocaleFromRequest = request => {
     const acceptLanguage = request.headers.get('Accept-Language');
@@ -20,7 +20,7 @@ function createRequestRouterLocalization({
     to,
     ...options
   }) {
-    return new RedirectResponse(redirectUrl(new URL(request.url), {
+    return new RedirectResponse(redirectURL(new URL(request.url), {
       to
     }), options);
   }
@@ -32,11 +32,11 @@ function createRequestRouterLocalization({
       return async (request, ...args) => {
         if (!include(request)) return handler(request, ...args);
         const url = new URL(request.url);
-        const urlLocale = localeFromUrl(url);
+        const urlLocale = localeFromURL(url);
         const requestLocale = getLocaleForRequest(request, () => getDefaultLocaleFromRequest(request));
         const matchedLocale = (requestLocale == null ? undefined : matchLocale(requestLocale)) ?? defaultLocale;
         if (urlLocale !== matchedLocale) {
-          return new RedirectResponse(redirectUrl(url, {
+          return new RedirectResponse(redirectURL(url, {
             to: matchedLocale
           }));
         }

package/build/esm/routing/LocalizedLink.mjs

@@ -1,5 +1,5 @@
 import { useMemo } from 'preact/hooks';
-import { useRouter, useCurrentUrl, Link } from '@quilted/preact-router';
+import { useRouter, useCurrentURL, Link } from '@quilted/preact-router';
 import { useRouteLocalization } from './context.mjs';
 import { jsx } from 'preact/jsx-runtime';
 
@@ -9,16 +9,16 @@ function LocalizedLink({
   ...props
 }) {
   const router = useRouter();
-  const currentUrl = useCurrentUrl();
+  const url = useCurrentURL();
   const {
-    redirectUrl
+    redirectURL
   } = useRouteLocalization();
-  const resolvedUrl = useMemo(() => redirectUrl(to ? router.resolve(to).url : currentUrl, {
+  const resolvedURL = useMemo(() => redirectURL(to ? router.resolve(to).url : url, {
     to: locale
-  }), [to, currentUrl, locale, redirectUrl, router]);
+  }), [to, url, locale, redirectURL, router]);
   return jsx(Link, {
     hrefLang: locale,
-    to: resolvedUrl,
+    to: resolvedURL,
     ...props
   });
 }

package/build/esm/routing/LocalizedNavigation.mjs

@@ -0,0 +1,47 @@
+import { useMemo } from 'preact/hooks';
+import { useBrowserDetails } from '@quilted/preact-browser';
+import { Navigation } from '@quilted/preact-router';
+import { Localization } from '../Localization.mjs';
+import { LocalizedRouter } from './LocalizedRouter.mjs';
+import { RouteLocalizationContext } from './context.mjs';
+import { jsx } from 'preact/jsx-runtime';
+
+function LocalizedNavigation({
+  locale: explicitLocale,
+  router,
+  routes,
+  context,
+  localization,
+  children
+}) {
+  const browser = useBrowserDetails({
+    optional: true
+  });
+  const resolvedRouter = useMemo(() => router ?? new LocalizedRouter(browser?.request.url, {
+    localization: localization
+  }), [router]);
+  const resolvedLocalization = resolvedRouter.localization;
+  const localeFromEnvironment = browser?.locale.value;
+  let resolvedLocale;
+  if (explicitLocale) {
+    resolvedLocale = explicitLocale;
+  } else if (localeFromEnvironment != null && localeFromEnvironment.toLowerCase().startsWith(resolvedLocalization.locale.toLowerCase())) {
+    resolvedLocale = localeFromEnvironment;
+  } else {
+    resolvedLocale = resolvedLocalization.locale;
+  }
+  return jsx(Localization, {
+    locale: resolvedLocale,
+    children: jsx(RouteLocalizationContext.Provider, {
+      value: resolvedLocalization,
+      children: jsx(Navigation, {
+        router: resolvedRouter,
+        routes: routes,
+        context: context,
+        children: children
+      })
+    })
+  });
+}
+
+export { LocalizedNavigation };

package/build/esm/routing/LocalizedRouter.mjs

@@ -0,0 +1,34 @@
+import { Router } from '@quilted/preact-router';
+
+class LocalizedRouter extends Router {
+  constructor(initial, {
+    localization,
+    isExternal: explicitIsExternal
+  }) {
+    const {
+      localeFromURL
+    } = localization;
+    super(initial, {
+      isExternal(url, currentURL) {
+        return matchedLocale !== localeFromURL(url) || (explicitIsExternal?.(url, currentURL) ?? false);
+      }
+    });
+    const currentURL = this.currentRequest.url;
+    const matchedLocale = localeFromURL(currentURL);
+    const resolvedLocalization = {
+      locale: matchedLocale ?? localization.defaultLocale,
+      ...localization
+    };
+    this.localization = resolvedLocalization;
+    const {
+      pathname: rootPath
+    } = localization.redirectURL(new URL('/', currentURL), {
+      to: resolvedLocalization.locale
+    });
+    if (rootPath.length > 1) Object.assign(this, {
+      base: rootPath
+    });
+  }
+}
+
+export { LocalizedRouter };

package/build/esm/routing/localization/by-locale.mjs

@@ -6,16 +6,16 @@ function createRouteLocalization({
   const locales = [...localeMap.keys()].sort((a, b) => b.length - a.length);
   return {
     locales,
-    redirectUrl,
+    redirectURL,
     matchLocale,
-    localeFromUrl,
+    localeFromURL,
     defaultLocale
   };
   function matchLocale(requestLocale) {
     const language = requestLocale.split('-')[0];
     return locales.find(locale => locale === requestLocale || locale === language);
   }
-  function localeFromUrl(url) {
+  function localeFromURL(url) {
     const hostname = url.hostname.toLowerCase();
     const pathname = normalizePath(url.pathname.toLowerCase());
     for (const [locale, target] of sortedLocaleMap) {
@@ -26,10 +26,10 @@ function createRouteLocalization({
       }
     }
   }
-  function redirectUrl(from, {
+  function redirectURL(from, {
     to: toLocale
   }) {
-    const fromLocale = localeFromUrl(from);
+    const fromLocale = localeFromURL(from);
     const toUrl = new URL(from);
     if (fromLocale === toLocale) return toUrl;
     const target = localeMap.get(toLocale) ?? localeMap.get(defaultLocale);

package/build/esnext/Localization.esnext

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { useMemo } from 'preact/hooks';
 import { createLocalizedFormatting } from '@quilted/localize';
-import { HTMLAttributes } from '@quilted/preact-browser';
+import { useBrowserDetails, HTMLAttributes } from '@quilted/preact-browser';
 import { LocaleContext, LocalizedFormattingContext } from './context.esnext';
 
 const RTL_LOCALES = /* @__PURE__ */ new Set([
@@ -21,11 +21,17 @@ const RTL_LOCALES = /* @__PURE__ */ new Set([
   "yi"
 ]);
 function Localization({
-  locale,
-  direction = RTL_LOCALES.has(locale) ? "rtl" : "ltr",
+  locale: explicitLocale,
+  direction: explicitDirection,
   children
 }) {
+  const browserDetails = useBrowserDetails({ optional: explicitLocale == null });
+  const locale = explicitLocale ?? browserDetails?.locale.value;
+  if (locale == null) {
+    throw new Error(`Could not determine locale`);
+  }
   const formatting = useMemo(() => createLocalizedFormatting(locale), [locale]);
+  const direction = explicitDirection ?? (RTL_LOCALES.has(locale) ? "rtl" : "ltr");
   return /* @__PURE__ */ jsx(LocaleContext.Provider, { value: locale, children: /* @__PURE__ */ jsxs(LocalizedFormattingContext.Provider, { value: formatting, children: [
     /* @__PURE__ */ jsx(HTMLAttributes, { lang: locale, dir: direction }),
     children

package/build/esnext/index.esnext

@@ -2,10 +2,10 @@ export { MissingTranslationError, MissingTranslationPlaceholderError, createLoca
 export { Localization } from './Localization.esnext';
 export { useLocalizedFormatting } from './hooks/formatting.esnext';
 export { useLocale } from './hooks/locale.esnext';
-export { useLocaleFromEnvironment } from './hooks/locale-from-environment.esnext';
 export { LocalizedFormattingContext } from './context.esnext';
 export { LocalizedLink } from './routing/LocalizedLink.esnext';
-export { LocalizedRouting } from './routing/LocalizedRouting.esnext';
+export { LocalizedNavigation } from './routing/LocalizedNavigation.esnext';
+export { LocalizedRouter } from './routing/LocalizedRouter.esnext';
 export { useRouteLocalization } from './routing/context.esnext';
 export { createRouteLocalization } from './routing/localization/by-locale.esnext';
 export { createRoutePathLocalization } from './routing/localization/by-path.esnext';

package/build/esnext/request-router.esnext

@@ -5,7 +5,7 @@ function createRequestRouterLocalization({
   localization,
   requestLocale: customRequestLocale
 }) {
-  const { matchLocale, redirectUrl, defaultLocale, localeFromUrl } = localization;
+  const { matchLocale, redirectURL, defaultLocale, localeFromURL } = localization;
   const getDefaultLocaleFromRequest = (request) => {
     const acceptLanguage = request.headers.get("Accept-Language");
     return acceptLanguage && parseAcceptLanguageHeader(acceptLanguage) || void 0;
@@ -16,7 +16,7 @@ function createRequestRouterLocalization({
     ...options
   }) {
     return new RedirectResponse(
-      redirectUrl(new URL(request.url), { to }),
+      redirectURL(new URL(request.url), { to }),
       options
     );
   }
@@ -24,10 +24,9 @@ function createRequestRouterLocalization({
     redirect: localeRedirect,
     localizedRequestHandler(handler, { include = () => true } = {}) {
       return async (request, ...args) => {
-        if (!include(request))
-          return handler(request, ...args);
+        if (!include(request)) return handler(request, ...args);
         const url = new URL(request.url);
-        const urlLocale = localeFromUrl(url);
+        const urlLocale = localeFromURL(url);
         const requestLocale = getLocaleForRequest(
           request,
           () => getDefaultLocaleFromRequest(request)
@@ -35,7 +34,7 @@ function createRequestRouterLocalization({
         const matchedLocale = (requestLocale == null ? void 0 : matchLocale(requestLocale)) ?? defaultLocale;
         if (urlLocale !== matchedLocale) {
           return new RedirectResponse(
-            redirectUrl(url, {
+            redirectURL(url, {
               to: matchedLocale
             })
           );

package/build/esnext/routing/LocalizedLink.esnext

@@ -1,6 +1,6 @@
 import { jsx } from 'preact/jsx-runtime';
 import { useMemo } from 'preact/hooks';
-import { useRouter, useCurrentUrl, Link } from '@quilted/preact-router';
+import { useRouter, useCurrentURL, Link } from '@quilted/preact-router';
 import { useRouteLocalization } from './context.esnext';
 
 function LocalizedLink({
@@ -9,13 +9,13 @@ function LocalizedLink({
   ...props
 }) {
   const router = useRouter();
-  const currentUrl = useCurrentUrl();
-  const { redirectUrl } = useRouteLocalization();
-  const resolvedUrl = useMemo(
-    () => redirectUrl(to ? router.resolve(to).url : currentUrl, { to: locale }),
-    [to, currentUrl, locale, redirectUrl, router]
+  const url = useCurrentURL();
+  const { redirectURL } = useRouteLocalization();
+  const resolvedURL = useMemo(
+    () => redirectURL(to ? router.resolve(to).url : url, { to: locale }),
+    [to, url, locale, redirectURL, router]
   );
-  return /* @__PURE__ */ jsx(Link, { hrefLang: locale, to: resolvedUrl, ...props });
+  return /* @__PURE__ */ jsx(Link, { hrefLang: locale, to: resolvedURL, ...props });
 }
 
 export { LocalizedLink };

package/build/esnext/routing/LocalizedNavigation.esnext

@@ -0,0 +1,35 @@
+import { jsx } from 'preact/jsx-runtime';
+import { useMemo } from 'preact/hooks';
+import { useBrowserDetails } from '@quilted/preact-browser';
+import { Navigation } from '@quilted/preact-router';
+import { Localization } from '../Localization.esnext';
+import { LocalizedRouter } from './LocalizedRouter.esnext';
+import { RouteLocalizationContext } from './context.esnext';
+
+function LocalizedNavigation({
+  locale: explicitLocale,
+  router,
+  routes,
+  context,
+  localization,
+  children
+}) {
+  const browser = useBrowserDetails({ optional: true });
+  const resolvedRouter = useMemo(
+    () => router ?? new LocalizedRouter(browser?.request.url, { localization }),
+    [router]
+  );
+  const resolvedLocalization = resolvedRouter.localization;
+  const localeFromEnvironment = browser?.locale.value;
+  let resolvedLocale;
+  if (explicitLocale) {
+    resolvedLocale = explicitLocale;
+  } else if (localeFromEnvironment != null && localeFromEnvironment.toLowerCase().startsWith(resolvedLocalization.locale.toLowerCase())) {
+    resolvedLocale = localeFromEnvironment;
+  } else {
+    resolvedLocale = resolvedLocalization.locale;
+  }
+  return /* @__PURE__ */ jsx(Localization, { locale: resolvedLocale, children: /* @__PURE__ */ jsx(RouteLocalizationContext.Provider, { value: resolvedLocalization, children: /* @__PURE__ */ jsx(Navigation, { router: resolvedRouter, routes, context, children }) }) });
+}
+
+export { LocalizedNavigation };

package/build/esnext/routing/LocalizedRouter.esnext

@@ -0,0 +1,32 @@
+import { Router } from '@quilted/preact-router';
+
+class LocalizedRouter extends Router {
+  localization;
+  constructor(initial, {
+    localization,
+    isExternal: explicitIsExternal
+  }) {
+    const { localeFromURL } = localization;
+    super(initial, {
+      isExternal(url, currentURL2) {
+        return matchedLocale !== localeFromURL(url) || (explicitIsExternal?.(url, currentURL2) ?? false);
+      }
+    });
+    const currentURL = this.currentRequest.url;
+    const matchedLocale = localeFromURL(currentURL);
+    const resolvedLocalization = {
+      locale: matchedLocale ?? localization.defaultLocale,
+      ...localization
+    };
+    this.localization = resolvedLocalization;
+    const { pathname: rootPath } = localization.redirectURL(
+      new URL("/", currentURL),
+      {
+        to: resolvedLocalization.locale
+      }
+    );
+    if (rootPath.length > 1) Object.assign(this, { base: rootPath });
+  }
+}
+
+export { LocalizedRouter };

package/build/esnext/routing/localization/by-locale.esnext

@@ -8,9 +8,9 @@ function createRouteLocalization({
   const locales = [...localeMap.keys()].sort((a, b) => b.length - a.length);
   return {
     locales,
-    redirectUrl,
+    redirectURL,
     matchLocale,
-    localeFromUrl,
+    localeFromURL,
     defaultLocale
   };
   function matchLocale(requestLocale) {
@@ -19,24 +19,21 @@ function createRouteLocalization({
       (locale) => locale === requestLocale || locale === language
     );
   }
-  function localeFromUrl(url) {
+  function localeFromURL(url) {
     const hostname = url.hostname.toLowerCase();
     const pathname = normalizePath(url.pathname.toLowerCase());
     for (const [locale, target] of sortedLocaleMap) {
       if (target.startsWith("/")) {
-        if (pathname.startsWith(target))
-          return locale;
+        if (pathname.startsWith(target)) return locale;
       } else {
-        if (hostname === target)
-          return locale;
+        if (hostname === target) return locale;
       }
     }
   }
-  function redirectUrl(from, { to: toLocale }) {
-    const fromLocale = localeFromUrl(from);
+  function redirectURL(from, { to: toLocale }) {
+    const fromLocale = localeFromURL(from);
     const toUrl = new URL(from);
-    if (fromLocale === toLocale)
-      return toUrl;
+    if (fromLocale === toLocale) return toUrl;
     const target = localeMap.get(toLocale) ?? localeMap.get(defaultLocale);
     if (target.startsWith("/")) {
       const fromTarget = fromLocale == null ? "/" : localeMap.get(fromLocale) ?? "/";
@@ -50,8 +47,7 @@ function createRouteLocalization({
   }
 }
 function normalizePath(path) {
-  if (path.length === 0)
-    return "/";
+  if (path.length === 0) return "/";
   return path.endsWith("/") && path.length > 1 ? path.slice(0, -1) : path;
 }