@quilted/preact-localize 0.1.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@quilted/preact-localize",
+  "description": "Utilities for localizing React applications",
+  "type": "module",
+  "version": "0.1.0",
+  "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.1.0"
+  },
+  "peerDependencies": {
+    "@quilted/request-router": "^0.2.0",
+    "preact": "^10.21.0"
+  },
+  "peerDependenciesMeta": {
+    "@quilted/request-router": {
+      "optional": true
+    },
+    "preact": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@quilted/request-router": "^0.2.0",
+    "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 currentUrl = useCurrentUrl();
+  const {redirectUrl} = useRouteLocalization();
+
+  const resolvedUrl = useMemo(
+    () => redirectUrl(to ? router.resolve(to).url : currentUrl, {to: locale}),
+    [to, currentUrl, locale, redirectUrl, router],
+  );
+
+  return <Link hrefLang={locale} to={resolvedUrl} {...props} />;
+}

package/source/routing/LocalizedRouting.tsx

@@ -0,0 +1,94 @@
+import type {ComponentProps} from 'preact';
+import {useCallback, useMemo} from 'preact/hooks';
+import {Routing, useInitialURL} from '@quilted/preact-router';
+
+import {Localization} from '../Localization.tsx';
+import {useLocaleFromEnvironment} from '../hooks/locale-from-environment.ts';
+
+import type {RouteLocalization, ResolvedRouteLocalization} from './types.ts';
+import {RouteLocalizationContext} from './context.ts';
+
+export type LocalizedRoutingProps = Omit<
+  ComponentProps<typeof Routing>,
+  'prefix' | 'initialUrl'
+> & {
+  locale?: string;
+  localization: RouteLocalization;
+};
+
+export function LocalizedRouting({
+  locale: explicitLocale,
+  localization,
+  children,
+  isExternal: isExplicitlyExternal,
+  ...props
+}: LocalizedRoutingProps) {
+  const initialUrl = useInitialURL();
+  const localeFromEnvironment = useLocaleFromEnvironment();
+
+  const {
+    prefix,
+    isExternal: isExternalByRouteLocale,
+    resolvedLocalization,
+  } = useMemo(() => {
+    const {localeFromUrl} = localization;
+
+    const matchedLocale = initialUrl && localeFromUrl(initialUrl);
+
+    const resolvedLocalization: ResolvedRouteLocalization = {
+      locale: matchedLocale ?? localization.defaultLocale,
+      ...localization,
+    };
+
+    const rootUrl = localization.redirectUrl(
+      new URL('/', initialUrl ?? 'https://example.com'),
+      {to: resolvedLocalization.locale},
+    );
+
+    return {
+      prefix: rootUrl.pathname.length > 1 ? rootUrl.pathname : undefined,
+      isExternal: (url: URL) => matchedLocale !== localeFromUrl(url),
+      resolvedLocalization,
+    };
+  }, [initialUrl, localization]);
+
+  const isExternal = useCallback(
+    (url: URL, currentUrl: URL) => {
+      return (
+        isExternalByRouteLocale(url) ||
+        (isExplicitlyExternal?.(url, currentUrl) ?? false)
+      );
+    },
+    [isExplicitlyExternal, isExternalByRouteLocale],
+  );
+
+  let resolvedLocale: string;
+
+  if (explicitLocale) {
+    resolvedLocale = explicitLocale;
+  } else if (
+    localeFromEnvironment != null &&
+    localeFromEnvironment
+      .toLowerCase()
+      .startsWith(resolvedLocalization.locale.toLowerCase())
+  ) {
+    resolvedLocale = localeFromEnvironment;
+  } else {
+    resolvedLocale = resolvedLocalization.locale;
+  }
+
+  return (
+    <Routing
+      {...props}
+      prefix={prefix}
+      url={initialUrl}
+      isExternal={isExternal}
+    >
+      <Localization locale={resolvedLocale}>
+        <RouteLocalizationContext.Provider value={resolvedLocalization}>
+          {children}
+        </RouteLocalizationContext.Provider>
+      </Localization>
+    </Routing>
+  );
+}

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,11 @@
+export {LocalizedLink} from './routing/LocalizedLink.tsx';
+export {LocalizedRouting} from './routing/LocalizedRouting.tsx';
+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"}
+  ]
+}