@quilted/preact-localize 0.4.0 → 0.4.1

package/source/routing/LocalizedNavigation.tsx

@@ -1,63 +1,49 @@
-import type {RenderableProps} from 'preact';
-import {useMemo} from 'preact/hooks';
-import {useBrowserDetails} from '@quilted/preact-browser';
-import {Navigation, type RouteDefinition} from '@quilted/preact-router';
-
-import {Localization} from '../Localization.tsx';
-
-import {LocalizedRouter} from './LocalizedRouter.ts';
-import {RouteLocalizationContext} from './context.ts';
-import type {RouteLocalization} from './types.ts';
-
-export interface LocalizedNavigationProps<Context = unknown> {
-  locale?: string;
-  router?: LocalizedRouter;
-  localization?: RouteLocalization;
-  routes?: readonly RouteDefinition<any, any, Context>[];
-  context?: Context;
-}
+import {Navigation, type NavigationOptions} from '@quilted/preact-router';
 
-export function LocalizedNavigation<Context = unknown>({
-  locale: explicitLocale,
-  router,
-  routes,
-  context,
-  localization,
-  children,
-}: RenderableProps<LocalizedNavigationProps<Context>>) {
-  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: string;
-
-  if (explicitLocale) {
-    resolvedLocale = explicitLocale;
-  } else if (
-    localeFromEnvironment != null &&
-    localeFromEnvironment
-      .toLowerCase()
-      .startsWith(resolvedLocalization.locale.toLowerCase())
-  ) {
-    resolvedLocale = localeFromEnvironment;
-  } else {
-    resolvedLocale = resolvedLocalization.locale;
+import type {RouteLocalization, ResolvedRouteLocalization} from './types.ts';
+
+export class LocalizedNavigation extends Navigation {
+  readonly routes: ResolvedRouteLocalization;
+
+  get locale() {
+    return this.routes.locale;
   }
 
-  return (
-    <Localization locale={resolvedLocale}>
-      <RouteLocalizationContext.Provider value={resolvedLocalization}>
-        <Navigation router={resolvedRouter} routes={routes} context={context}>
-          {children}
-        </Navigation>
-      </RouteLocalizationContext.Provider>
-    </Localization>
-  );
+  constructor(
+    initial: ConstructorParameters<typeof Navigation>[0],
+    {
+      routes,
+      isExternal: explicitIsExternal,
+    }: {routes: RouteLocalization} & Pick<NavigationOptions, 'isExternal'>,
+  ) {
+    const {localeFromURL} = routes;
+
+    let matchedLocale: string | undefined;
+
+    super(initial, {
+      isExternal(url, currentURL) {
+        return (
+          matchedLocale !== localeFromURL(url) ||
+          (explicitIsExternal?.(url, currentURL) ?? false)
+        );
+      },
+    });
+
+    const currentURL = this.currentRequest.url;
+
+    matchedLocale = localeFromURL(currentURL);
+
+    const resolvedLocalization: ResolvedRouteLocalization = {
+      locale: matchedLocale ?? routes.defaultLocale,
+      ...routes,
+    };
+
+    this.routes = resolvedLocalization;
+
+    const {pathname: rootPath} = routes.redirectURL(new URL('/', currentURL), {
+      to: resolvedLocalization.locale,
+    });
+
+    if (rootPath.length > 1) Object.assign(this, {base: rootPath});
+  }
 }

package/source/routing/context.ts

@@ -1,8 +1,17 @@
-import {createOptionalContext} from '@quilted/preact-context';
+import {useNavigation} from '@quilted/preact-router';
 
+import {LocalizedNavigation} from './LocalizedNavigation.tsx';
 import type {ResolvedRouteLocalization} from './types.ts';
 
-export const RouteLocalizationContext =
-  createOptionalContext<ResolvedRouteLocalization>();
+export function useRouteLocalization(): ResolvedRouteLocalization {
+  const navigation = useNavigation();
 
-export const useRouteLocalization = RouteLocalizationContext.use;
+  if (!(navigation instanceof LocalizedNavigation)) {
+    throw new Error(
+      'useRouteLocalization() requires a LocalizedNavigation instance to be provided in context. ' +
+        'Make sure you are passing a LocalizedNavigation to QuiltFrameworkContext.',
+    );
+  }
+
+  return navigation.routes;
+}

package/source/routing.ts

@@ -1,6 +1,5 @@
 export {LocalizedLink} from './routing/LocalizedLink.tsx';
 export {LocalizedNavigation} from './routing/LocalizedNavigation.tsx';
-export {LocalizedRouter} from './routing/LocalizedRouter.ts';
 export {useRouteLocalization} from './routing/context.ts';
 export {createRouteLocalization} from './routing/localization/by-locale.ts';
 export {createRoutePathLocalization} from './routing/localization/by-path.ts';

package/build/esm/Localization.mjs

@@ -1,37 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import { createLocalizedFormatting } from '@quilted/localize';
-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: explicitLocale,
-  direction: explicitDirection,
-  children
-}) {
-  const browserDetails = useBrowserDetails({
-    optional: true
-  });
-  const locale = explicitLocale ?? browserDetails?.locale.value ?? getLocaleFromEnvironment();
-  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, {
-      value: formatting,
-      children: [browserDetails && jsx(HTMLAttributes, {
-        lang: locale,
-        dir: direction
-      }), children]
-    })
-  });
-}
-function getLocaleFromEnvironment() {
-  if (typeof navigator === 'undefined') {
-    throw new Error(`Could not determine the locale automatically`);
-  }
-  return navigator.language;
-}
-
-export { Localization };

package/build/esm/context.mjs

@@ -1,6 +0,0 @@
-import { createOptionalContext } from '@quilted/preact-context';
-
-const LocalizedFormattingContext = createOptionalContext();
-const LocaleContext = createOptionalContext();
-
-export { LocaleContext, LocalizedFormattingContext };

package/build/esm/routing/LocalizedRouter.mjs

@@ -1,34 +0,0 @@
-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/esnext/Localization.esnext

@@ -1,44 +0,0 @@
-import { jsx, jsxs } from 'preact/jsx-runtime';
-import { useMemo } from 'preact/hooks';
-import { createLocalizedFormatting } from '@quilted/localize';
-import { useBrowserDetails, HTMLAttributes } from '@quilted/preact-browser';
-import { LocaleContext, LocalizedFormattingContext } from './context.esnext';
-
-const RTL_LOCALES = /* @__PURE__ */ new Set([
-  "ar",
-  "arc",
-  "ckb",
-  "dv",
-  "fa",
-  "ha",
-  "he",
-  "khw",
-  "ks",
-  "ps",
-  "sd",
-  "ur",
-  "uz-AF",
-  "yi"
-]);
-function Localization({
-  locale: explicitLocale,
-  direction: explicitDirection,
-  children
-}) {
-  const browserDetails = useBrowserDetails({ optional: true });
-  const locale = explicitLocale ?? browserDetails?.locale.value ?? getLocaleFromEnvironment();
-  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: [
-    browserDetails && /* @__PURE__ */ jsx(HTMLAttributes, { lang: locale, dir: direction }),
-    children
-  ] }) });
-}
-function getLocaleFromEnvironment() {
-  if (typeof navigator === "undefined") {
-    throw new Error(`Could not determine the locale automatically`);
-  }
-  return navigator.language;
-}
-
-export { Localization };

package/build/esnext/context.esnext

@@ -1,6 +0,0 @@
-import { createOptionalContext } from '@quilted/preact-context';
-
-const LocalizedFormattingContext = createOptionalContext();
-const LocaleContext = createOptionalContext();
-
-export { LocaleContext, LocalizedFormattingContext };

package/build/esnext/routing/LocalizedRouter.esnext

@@ -1,32 +0,0 @@
-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/source/Localization.tsx

@@ -1,61 +0,0 @@
-import type {RenderableProps} from 'preact';
-import {useMemo} from 'preact/hooks';
-import {createLocalizedFormatting} from '@quilted/localize';
-import {HTMLAttributes, useBrowserDetails} from '@quilted/preact-browser';
-
-import {LocaleContext, LocalizedFormattingContext} from './context.ts';
-
-export interface LocalizationProps {
-  locale?: string;
-  direction?: 'ltr' | 'rtl';
-}
-
-const RTL_LOCALES = new Set([
-  'ar',
-  'arc',
-  'ckb',
-  'dv',
-  'fa',
-  'ha',
-  'he',
-  'khw',
-  'ks',
-  'ps',
-  'sd',
-  'ur',
-  'uz-AF',
-  'yi',
-]);
-
-export function Localization({
-  locale: explicitLocale,
-  direction: explicitDirection,
-  children,
-}: RenderableProps<LocalizationProps>) {
-  const browserDetails = useBrowserDetails({optional: true});
-  const locale =
-    explicitLocale ??
-    browserDetails?.locale.value ??
-    getLocaleFromEnvironment();
-
-  const formatting = useMemo(() => createLocalizedFormatting(locale), [locale]);
-  const direction =
-    explicitDirection ?? (RTL_LOCALES.has(locale) ? 'rtl' : 'ltr');
-
-  return (
-    <LocaleContext.Provider value={locale}>
-      <LocalizedFormattingContext.Provider value={formatting}>
-        {browserDetails && <HTMLAttributes lang={locale} dir={direction} />}
-        {children}
-      </LocalizedFormattingContext.Provider>
-    </LocaleContext.Provider>
-  );
-}
-
-function getLocaleFromEnvironment() {
-  if (typeof navigator === 'undefined') {
-    throw new Error(`Could not determine the locale automatically`);
-  }
-
-  return navigator.language;
-}

package/source/routing/LocalizedRouter.ts

@@ -1,46 +0,0 @@
-import {Router, type RouterOptions} from '@quilted/preact-router';
-
-import type {RouteLocalization, ResolvedRouteLocalization} from './types.ts';
-
-export class LocalizedRouter extends Router {
-  readonly localization: ResolvedRouteLocalization;
-
-  constructor(
-    initial: ConstructorParameters<typeof Router>[0],
-    {
-      localization,
-      isExternal: explicitIsExternal,
-    }: {localization: RouteLocalization} & Pick<RouterOptions, 'isExternal'>,
-  ) {
-    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: ResolvedRouteLocalization = {
-      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});
-  }
-}