@quilted/preact-localize 0.0.0-preview-20240627021955

package/build/typescript/routing/types.d.ts

@@ -0,0 +1,17 @@
+export interface RouteLocalization {
+    readonly locales: string[];
+    readonly defaultLocale: string;
+    matchLocale(locale: string): string | undefined;
+    redirectURL(from: URL, options: {
+        to: string;
+    }): URL;
+    localeFromURL(url: URL): string | undefined;
+}
+export interface ResolvedRouteLocalization extends RouteLocalization {
+    readonly locale: string;
+}
+export interface DefaultLocaleDefinition {
+    locale: string;
+    nested?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/build/typescript/routing/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../source/routing/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC,GAAG,GAAG,CAAC;IACnD,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB;IAClE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/build/typescript/routing.d.ts

@@ -0,0 +1,9 @@
+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';
+export { createRouteSubdomainLocalization } from './routing/localization/by-subdomain.ts';
+export type { RouteLocalization, ResolvedRouteLocalization, DefaultLocaleDefinition, } from './routing/types.ts';
+//# sourceMappingURL=routing.d.ts.map

package/build/typescript/routing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../../source/routing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAC,uBAAuB,EAAC,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAC,2BAA2B,EAAC,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAC,gCAAgC,EAAC,MAAM,wCAAwC,CAAC;AACxF,YAAY,EACV,iBAAiB,EACjB,yBAAyB,EACzB,uBAAuB,GACxB,MAAM,oBAAoB,CAAC"}

package/configuration/rollup.config.js

@@ -0,0 +1,3 @@
+import {quiltPackage} from '@quilted/rollup/package';
+
+export default quiltPackage();

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@quilted/preact-localize",
+  "description": "Utilities for localizing React applications",
+  "type": "module",
+  "version": "0.0.0-preview-20240627021955",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lemonmade/quilt",
+    "directory": "packages/preact-localize"
+  },
+  "publishConfig": {
+    "access": "public",
+    "@quilted:registry": "https://registry.npmjs.org"
+  },
+  "exports": {
+    ".": {
+      "types": "./build/typescript/index.d.ts",
+      "quilt:source": "./source/index.ts",
+      "quilt:esnext": "./build/esnext/index.esnext",
+      "import": "./build/esm/index.mjs"
+    },
+    "./request-router": {
+      "types": "./build/typescript/request-router.d.ts",
+      "quilt:source": "./source/request-router.ts",
+      "quilt:esnext": "./build/esnext/request-router.esnext",
+      "import": "./build/esm/request-router.mjs"
+    }
+  },
+  "types": "./build/typescript/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "request-router": [
+        "./build/typescript/request-router.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@quilted/localize": "^0.2.0",
+    "@quilted/preact-browser": "^0.1.0",
+    "@quilted/preact-context": "^0.1.0",
+    "@quilted/preact-router": "0.0.0-preview-20240627021955"
+  },
+  "peerDependencies": {
+    "@quilted/request-router": "0.0.0-preview-20240627021955",
+    "preact": "^10.21.0"
+  },
+  "peerDependenciesMeta": {
+    "@quilted/request-router": {
+      "optional": true
+    },
+    "preact": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@quilted/request-router": "0.0.0-preview-20240627021955",
+    "preact": "^10.21.0"
+  },
+  "scripts": {
+    "build": "rollup --config configuration/rollup.config.js"
+  }
+}

package/source/Localization.tsx

@@ -0,0 +1,45 @@
+import type {RenderableProps} from 'preact';
+import {useMemo} from 'preact/hooks';
+import {createLocalizedFormatting} from '@quilted/localize';
+import {HTMLAttributes} 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,
+  direction = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr',
+  children,
+}: RenderableProps<LocalizationProps>) {
+  const formatting = useMemo(() => createLocalizedFormatting(locale), [locale]);
+
+  return (
+    <LocaleContext.Provider value={locale}>
+      <LocalizedFormattingContext.Provider value={formatting}>
+        <HTMLAttributes lang={locale} dir={direction} />
+        {children}
+      </LocalizedFormattingContext.Provider>
+    </LocaleContext.Provider>
+  );
+}

package/source/context.ts

@@ -0,0 +1,7 @@
+import {createOptionalContext} from '@quilted/preact-context';
+import type {LocalizedFormatting} from '@quilted/localize';
+
+export const LocalizedFormattingContext =
+  createOptionalContext<LocalizedFormatting>();
+
+export const LocaleContext = createOptionalContext<string>();

package/source/hooks/formatting.ts

@@ -0,0 +1,3 @@
+import {LocalizedFormattingContext} from '../context.ts';
+
+export const useLocalizedFormatting = LocalizedFormattingContext.use;

package/source/hooks/locale-from-environment.ts

@@ -0,0 +1,15 @@
+import {parseAcceptLanguageHeader} from '@quilted/localize';
+import {useBrowserDetails} from '@quilted/preact-browser';
+
+export function useLocaleFromEnvironment() {
+  if (typeof navigator === 'object' && navigator.language) {
+    return navigator.language;
+  }
+
+  const browserDetails = useBrowserDetails({optional: true});
+
+  const acceptLanguage =
+    browserDetails?.request.headers?.get('Accept-Language');
+
+  return acceptLanguage && parseAcceptLanguageHeader(acceptLanguage);
+}

package/source/hooks/locale.ts

@@ -0,0 +1,3 @@
+import {LocaleContext} from '../context.ts';
+
+export const useLocale = LocaleContext.use;

package/source/index.ts

@@ -0,0 +1,26 @@
+export {
+  createTranslate,
+  createLocalizedFormatting,
+  parseAcceptLanguageHeader,
+  MissingTranslationError,
+  MissingTranslationPlaceholderError,
+} from '@quilted/localize';
+export type {
+  Translate,
+  TranslationDictionary,
+  LocalizedFormatting,
+  LocalizedFormattingCache,
+  LocalizedNumberFormatOptions,
+  LocalizedDateTimeFormatOptions,
+} from '@quilted/localize';
+
+export {Localization} from './Localization.tsx';
+export {useLocalizedFormatting} from './hooks/formatting.ts';
+export {useLocale} from './hooks/locale.ts';
+export {useLocaleFromEnvironment} from './hooks/locale-from-environment.ts';
+export {LocalizedFormattingContext} from './context.ts';
+
+export * from './routing.ts';
+
+// export function useLocale(): string {}
+// export function useTranslate(): Translate {}

package/source/request-router.ts

@@ -0,0 +1,98 @@
+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);
+      };
+    },
+  };
+}

package/source/routing/LocalizedLink.tsx

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

package/source/routing/LocalizedNavigation.tsx

@@ -0,0 +1,64 @@
+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 {useLocaleFromEnvironment} from '../hooks/locale-from-environment.ts';
+
+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;
+}
+
+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 = useLocaleFromEnvironment();
+
+  let resolvedLocale: string;
+
+  if (explicitLocale) {
+    resolvedLocale = explicitLocale;
+  } else if (
+    localeFromEnvironment != null &&
+    localeFromEnvironment
+      .toLowerCase()
+      .startsWith(resolvedLocalization.locale.toLowerCase())
+  ) {
+    resolvedLocale = localeFromEnvironment;
+  } else {
+    resolvedLocale = resolvedLocalization.locale;
+  }
+
+  return (
+    <Localization locale={resolvedLocale}>
+      <RouteLocalizationContext.Provider value={resolvedLocalization}>
+        <Navigation router={resolvedRouter} routes={routes} context={context}>
+          {children}
+        </Navigation>
+      </RouteLocalizationContext.Provider>
+    </Localization>
+  );
+}

package/source/routing/LocalizedRouter.ts

@@ -0,0 +1,46 @@
+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});
+  }
+}

package/source/routing/context.ts

@@ -0,0 +1,8 @@
+import {createOptionalContext} from '@quilted/preact-context';
+
+import type {ResolvedRouteLocalization} from './types.ts';
+
+export const RouteLocalizationContext =
+  createOptionalContext<ResolvedRouteLocalization>();
+
+export const useRouteLocalization = RouteLocalizationContext.use;

package/source/routing/localization/by-locale.ts

@@ -0,0 +1,71 @@
+import type {RouteLocalization} from '../types.ts';
+
+export function createRouteLocalization({
+  locales: localeMap,
+  default: defaultLocale,
+}: {
+  locales: Map<string, string>;
+  default: string;
+}): RouteLocalization {
+  const sortedLocaleMap = [...localeMap].sort(
+    ([, a], [, b]) => b.length - a.length,
+  );
+
+  const locales = [...localeMap.keys()].sort((a, b) => b.length - a.length);
+
+  return {
+    locales,
+    redirectURL,
+    matchLocale,
+    localeFromURL,
+    defaultLocale,
+  };
+
+  function matchLocale(requestLocale: string) {
+    const language = requestLocale.split('-')[0];
+
+    return locales.find(
+      (locale) => locale === requestLocale || locale === language,
+    );
+  }
+
+  function localeFromURL(url: 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;
+      } else {
+        if (hostname === target) return locale;
+      }
+    }
+  }
+
+  function redirectURL(from: URL, {to: toLocale}: {to: string}) {
+    const fromLocale = localeFromURL(from);
+    const toUrl = new URL(from);
+
+    if (fromLocale === toLocale) return toUrl;
+
+    const target = localeMap.get(toLocale) ?? localeMap.get(defaultLocale)!;
+
+    if (target.startsWith('/')) {
+      const fromTarget =
+        fromLocale == null ? '/' : localeMap.get(fromLocale) ?? '/';
+
+      toUrl.pathname = normalizePath(
+        toUrl.pathname.replace(fromTarget, target),
+      );
+    } else {
+      toUrl.hostname = target;
+    }
+
+    return toUrl;
+  }
+}
+
+function normalizePath(path: string) {
+  if (path.length === 0) return '/';
+  return path.endsWith('/') && path.length > 1 ? path.slice(0, -1) : path;
+}

package/source/routing/localization/by-path.ts

@@ -0,0 +1,31 @@
+import type {DefaultLocaleDefinition} from '../types.ts';
+import {createRouteLocalization} from './by-locale.ts';
+
+export function createRoutePathLocalization({
+  locales,
+  default: defaultLocaleDefinition,
+}: {
+  locales: string[];
+  default: string | DefaultLocaleDefinition;
+}) {
+  const localeMap = new Map<string, string>();
+
+  const defaultLocale =
+    typeof defaultLocaleDefinition === 'string'
+      ? defaultLocaleDefinition
+      : defaultLocaleDefinition.locale;
+
+  const defaultLocaleNested =
+    typeof defaultLocaleDefinition === 'string' ||
+    (defaultLocaleDefinition.nested ?? true);
+
+  for (const locale of locales) {
+    if (!defaultLocaleNested && locale === defaultLocale) {
+      localeMap.set(locale, '/');
+    } else {
+      localeMap.set(locale, `/${locale.toLowerCase()}`);
+    }
+  }
+
+  return createRouteLocalization({locales: localeMap, default: defaultLocale});
+}

package/source/routing/localization/by-subdomain.ts

@@ -0,0 +1,34 @@
+import type {DefaultLocaleDefinition} from '../types.ts';
+import {createRouteLocalization} from './by-locale.ts';
+
+export function createRouteSubdomainLocalization({
+  base,
+  locales,
+  default: defaultLocaleDefinition,
+}: {
+  base: string;
+  locales: string[];
+  default: string | DefaultLocaleDefinition;
+}) {
+  const localeMap = new Map<string, string>();
+  const normalizedBase = base.replace(/^https?:\/\//, '');
+
+  const defaultLocale =
+    typeof defaultLocaleDefinition === 'string'
+      ? defaultLocaleDefinition
+      : defaultLocaleDefinition.locale;
+
+  const defaultLocaleNested =
+    typeof defaultLocaleDefinition === 'string' ||
+    (defaultLocaleDefinition.nested ?? true);
+
+  for (const locale of locales) {
+    if (!defaultLocaleNested && locale === defaultLocale) {
+      localeMap.set(locale, normalizedBase);
+    } else {
+      localeMap.set(locale, `${locale.toLowerCase()}.${normalizedBase}`);
+    }
+  }
+
+  return createRouteLocalization({locales: localeMap, default: defaultLocale});
+}

package/source/routing/types.ts

@@ -0,0 +1,16 @@
+export interface RouteLocalization {
+  readonly locales: string[];
+  readonly defaultLocale: string;
+  matchLocale(locale: string): string | undefined;
+  redirectURL(from: URL, options: {to: string}): URL;
+  localeFromURL(url: URL): string | undefined;
+}
+
+export interface ResolvedRouteLocalization extends RouteLocalization {
+  readonly locale: string;
+}
+
+export interface DefaultLocaleDefinition {
+  locale: string;
+  nested?: boolean;
+}

package/source/routing.ts

@@ -0,0 +1,12 @@
+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';
+export {createRouteSubdomainLocalization} from './routing/localization/by-subdomain.ts';
+export type {
+  RouteLocalization,
+  ResolvedRouteLocalization,
+  DefaultLocaleDefinition,
+} from './routing/types.ts';

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@quilted/typescript/tsconfig.project.json",
+  "compilerOptions": {
+    "rootDir": "source",
+    "outDir": "build/typescript",
+    "jsxImportSource": "preact"
+  },
+  "include": ["source"],
+  "exclude": ["*.test.ts", "*.test.tsx"],
+  "references": [
+    {"path": "../localize"},
+    {"path": "../preact-browser"},
+    {"path": "../preact-context"},
+    {"path": "../preact-router"},
+    {"path": "../request-router"}
+  ]
+}