@quilted/preact-localize 0.3.5 → 0.4.1

package/source/index.ts

@@ -1,6 +1,6 @@
 export {
   createTranslate,
-  createLocalizedFormatting,
+  Localization,
   parseAcceptLanguageHeader,
   MissingTranslationError,
   MissingTranslationPlaceholderError,
@@ -14,14 +14,9 @@ export type {
   LocalizedDateTimeFormatOptions,
 } from '@quilted/localize';
 
-export {Localization} from './Localization.tsx';
 export {useLocalizedFormatting} from './hooks/formatting.ts';
 export {useLocale} from './hooks/locale.ts';
 export {useAlternateURL} from './hooks/alternate-url.ts';
 export {AlternateURL} from './components/AlternateURL.tsx';
-export {LocalizedFormattingContext} from './context.ts';
 
 export * from './routing.ts';
-
-// export function useLocale(): string {}
-// export function useTranslate(): Translate {}

package/source/routing/LocalizedLink.tsx

@@ -1,6 +1,6 @@
 import type {ComponentProps} from 'preact';
 import {useMemo} from 'preact/hooks';
-import {useCurrentURL, Link, useRouter} from '@quilted/preact-router';
+import {useCurrentURL, Link, useNavigation} from '@quilted/preact-router';
 
 import {useRouteLocalization} from './context.ts';
 
@@ -14,13 +14,13 @@ export function LocalizedLink({
   locale: string;
   to?: LinkProps['to'];
 }) {
-  const router = useRouter();
+  const navigation = useNavigation();
   const url = useCurrentURL();
   const {redirectURL} = useRouteLocalization();
 
   const resolvedURL = useMemo(
-    () => redirectURL(to ? router.resolve(to).url : url, {to: locale}),
-    [to, url, locale, redirectURL, router],
+    () => redirectURL(to ? navigation.resolve(to).url : url, {to: locale}),
+    [to, url, locale, redirectURL, navigation],
   );
 
   return <Link hrefLang={locale} to={resolvedURL} {...props} />;

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/tsconfig.json

@@ -8,7 +8,6 @@
     {"path": "../preact-browser"},
     {"path": "../preact-context"},
     {"path": "../preact-router"},
-    {"path": "../request-router"},
     {"path": "../signals"}
   ]
 }

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/request-router.mjs

@@ -1,49 +0,0 @@
-import { RedirectResponse } from '@quilted/request-router';
-import { parseAcceptLanguageHeader } from '@quilted/localize';
-
-function createRequestRouterLocalization({
-  localization,
-  requestLocale: customRequestLocale
-}) {
-  const {
-    matchLocale,
-    redirectURL,
-    defaultLocale,
-    localeFromURL
-  } = localization;
-  const getDefaultLocaleFromRequest = request => {
-    const acceptLanguage = request.headers.get('Accept-Language');
-    return acceptLanguage && parseAcceptLanguageHeader(acceptLanguage) || undefined;
-  };
-  const getLocaleForRequest = customRequestLocale ?? getDefaultLocaleFromRequest;
-  function localeRedirect(request, {
-    to,
-    ...options
-  }) {
-    return new RedirectResponse(redirectURL(new URL(request.url), {
-      to
-    }), options);
-  }
-  return {
-    redirect: localeRedirect,
-    localizedRequestHandler(handler, {
-      include = () => true
-    } = {}) {
-      return async (request, ...args) => {
-        if (!include(request)) return handler(request, ...args);
-        const url = new URL(request.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, {
-            to: matchedLocale
-          }));
-        }
-        return handler(request, ...args);
-      };
-    }
-  };
-}
-
-export { createRequestRouterLocalization };

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/request-router.esnext

@@ -1,48 +0,0 @@
-import { RedirectResponse } from '@quilted/request-router';
-import { parseAcceptLanguageHeader } from '@quilted/localize';
-
-function createRequestRouterLocalization({
-  localization,
-  requestLocale: customRequestLocale
-}) {
-  const { matchLocale, redirectURL, defaultLocale, localeFromURL } = localization;
-  const getDefaultLocaleFromRequest = (request) => {
-    const acceptLanguage = request.headers.get("Accept-Language");
-    return acceptLanguage && parseAcceptLanguageHeader(acceptLanguage) || void 0;
-  };
-  const getLocaleForRequest = customRequestLocale ?? getDefaultLocaleFromRequest;
-  function localeRedirect(request, {
-    to,
-    ...options
-  }) {
-    return new RedirectResponse(
-      redirectURL(new URL(request.url), { to }),
-      options
-    );
-  }
-  return {
-    redirect: localeRedirect,
-    localizedRequestHandler(handler, { include = () => true } = {}) {
-      return async (request, ...args) => {
-        if (!include(request)) return handler(request, ...args);
-        const url = new URL(request.url);
-        const urlLocale = localeFromURL(url);
-        const requestLocale = getLocaleForRequest(
-          request,
-          () => getDefaultLocaleFromRequest(request)
-        );
-        const matchedLocale = (requestLocale == null ? void 0 : matchLocale(requestLocale)) ?? defaultLocale;
-        if (urlLocale !== matchedLocale) {
-          return new RedirectResponse(
-            redirectURL(url, {
-              to: matchedLocale
-            })
-          );
-        }
-        return handler(request, ...args);
-      };
-    }
-  };
-}
-
-export { createRequestRouterLocalization };

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/build/typescript/request-router.d.ts

@@ -1,16 +0,0 @@
-import { RedirectResponse, type RequestHandler } from '@quilted/request-router';
-import type { RouteLocalization, ResolvedRouteLocalization, DefaultLocaleDefinition } from './routing.ts';
-export type { RouteLocalization, ResolvedRouteLocalization, DefaultLocaleDefinition, };
-export interface RequestRouterLocalization {
-    redirect(request: Request, options: {
-        to: string;
-    } & Pick<NonNullable<ConstructorParameters<typeof RedirectResponse>[1]>, 'status' | 'headers'>): Response;
-    localizedRequestHandler(handler: RequestHandler, options?: {
-        include?(request: Request): boolean;
-    }): RequestHandler;
-}
-export declare function createRequestRouterLocalization({ localization, requestLocale: customRequestLocale, }: {
-    localization: RouteLocalization;
-    requestLocale?(request: Request, getDefaultFromRequest: () => string | undefined): string | undefined;
-}): RequestRouterLocalization;
-//# sourceMappingURL=request-router.d.ts.map

package/build/typescript/request-router.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"request-router.d.ts","sourceRoot":"","sources":["../../source/request-router.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAE,KAAK,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAG9E,OAAO,KAAK,EACV,iBAAiB,EACjB,yBAAyB,EACzB,uBAAuB,EACxB,MAAM,cAAc,CAAC;AAEtB,YAAY,EACV,iBAAiB,EACjB,yBAAyB,EACzB,uBAAuB,GACxB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,IAAI,CAC1B,WAAW,CAAC,qBAAqB,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9D,QAAQ,GAAG,SAAS,CACrB,GACA,QAAQ,CAAC;IACZ,uBAAuB,CACrB,OAAO,EAAE,cAAc,EACvB,OAAO,CAAC,EAAE;QAAC,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAA;KAAC,GAC9C,cAAc,CAAC;CACnB;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,YAAY,EACZ,aAAa,EAAE,mBAAmB,GACnC,EAAE;IACD,YAAY,EAAE,iBAAiB,CAAC;IAChC,aAAa,CAAC,CACZ,OAAO,EAAE,OAAO,EAChB,qBAAqB,EAAE,MAAM,MAAM,GAAG,SAAS,GAC9C,MAAM,GAAG,SAAS,CAAC;CACvB,GAAG,yBAAyB,CA2D5B"}

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/request-router.ts

@@ -1,98 +0,0 @@
-import {RedirectResponse, type RequestHandler} from '@quilted/request-router';
-import {parseAcceptLanguageHeader} from '@quilted/localize';
-
-import type {
-  RouteLocalization,
-  ResolvedRouteLocalization,
-  DefaultLocaleDefinition,
-} from './routing.ts';
-
-export type {
-  RouteLocalization,
-  ResolvedRouteLocalization,
-  DefaultLocaleDefinition,
-};
-
-export interface RequestRouterLocalization {
-  redirect(
-    request: Request,
-    options: {to: string} & Pick<
-      NonNullable<ConstructorParameters<typeof RedirectResponse>[1]>,
-      'status' | 'headers'
-    >,
-  ): Response;
-  localizedRequestHandler(
-    handler: RequestHandler,
-    options?: {include?(request: Request): boolean},
-  ): RequestHandler;
-}
-
-export function createRequestRouterLocalization({
-  localization,
-  requestLocale: customRequestLocale,
-}: {
-  localization: RouteLocalization;
-  requestLocale?(
-    request: Request,
-    getDefaultFromRequest: () => string | undefined,
-  ): string | undefined;
-}): RequestRouterLocalization {
-  const {matchLocale, redirectURL, defaultLocale, localeFromURL} = localization;
-
-  const getDefaultLocaleFromRequest = (request: Request) => {
-    const acceptLanguage = request.headers.get('Accept-Language');
-    return (
-      (acceptLanguage && parseAcceptLanguageHeader(acceptLanguage)) || undefined
-    );
-  };
-
-  const getLocaleForRequest =
-    customRequestLocale ?? getDefaultLocaleFromRequest;
-
-  function localeRedirect(
-    request: Request,
-    {
-      to,
-      ...options
-    }: {to: string} & Pick<
-      NonNullable<ConstructorParameters<typeof RedirectResponse>[1]>,
-      'status' | 'headers'
-    >,
-  ): Response {
-    return new RedirectResponse(
-      redirectURL(new URL(request.url), {to}),
-      options,
-    );
-  }
-
-  return {
-    redirect: localeRedirect,
-    localizedRequestHandler(
-      handler: RequestHandler,
-      {include = () => true}: {include?(request: Request): boolean} = {},
-    ): RequestHandler {
-      return async (request, ...args) => {
-        if (!include(request)) return handler(request, ...args);
-
-        const url = new URL(request.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, {
-              to: matchedLocale,
-            }),
-          );
-        }
-
-        return handler(request, ...args);
-      };
-    },
-  };
-}