nuxt-i18n-micro 3.30.3 → 4.0.0

package/dist/runtime/components/i18n-t.vue.d.ts

@@ -1,5 +1,6 @@
+import { type I18nTRenderProps } from '@i18n-micro/core/render';
 import type { PluralFunc } from '@i18n-micro/types';
-import type { PropType, VNode } from 'vue';
+import type { FunctionalComponent, PropType } from 'vue';
 /**
  * Renders one translation into an element, with pluralization, interpolation and
  * number/date formatting handled for you.
@@ -8,121 +9,63 @@ import type { PropType, VNode } from 'vue';
  * several are set the first of that list wins — the order the render function checks them.
  *
  * @slot default — receives `{ translation }`, for wrapping the resolved string in markup
- * @slot {name} — any other named slot replaces the `{name}` placeholder inside the translation
+ * @slot {name} — any other named slot replaces every `{name}` placeholder inside the translation
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /** Translation key to render. */
-    keypath: {
-        type: PropType<string>;
-        required: true;
-    };
-    /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. */
-    plural: {
-        type: PropType<number | string>;
-    };
-    /** Element to render. */
-    tag: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Interpolation values substituted into the translation. */
-    params: {
-        type: PropType<Record<string, string | number | boolean>>;
-        default: () => {};
-    };
-    /** Rendered instead of the component when `hideIfEmpty` suppresses an empty translation. */
-    defaultValue: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Render the translation as HTML rather than text. Only for content you control. */
-    html: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Render nothing when the translation resolves to an empty string. */
-    hideIfEmpty: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Plural rule for this element only, overriding the configured one. */
-    customPluralRule: {
-        type: PropType<PluralFunc>;
-        default: null;
-    };
-    /** Formats the value with `$tn` and passes it to the translation as `{number}`. */
-    number: {
-        type: PropType<number | string>;
-    };
-    /** Formats the value with `$td` and passes it to the translation as `{date}`. */
-    date: {
-        type: PropType<Date | string | number>;
-    };
-    /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`. */
-    relativeDate: {
-        type: PropType<Date | string | number>;
-    };
-}>, () => string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /** Translation key to render. */
-    keypath: {
-        type: PropType<string>;
-        required: true;
-    };
-    /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. */
-    plural: {
-        type: PropType<number | string>;
-    };
-    /** Element to render. */
-    tag: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Interpolation values substituted into the translation. */
-    params: {
-        type: PropType<Record<string, string | number | boolean>>;
-        default: () => {};
-    };
-    /** Rendered instead of the component when `hideIfEmpty` suppresses an empty translation. */
-    defaultValue: {
-        type: PropType<string>;
-        default: string;
-    };
-    /** Render the translation as HTML rather than text. Only for content you control. */
-    html: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Render nothing when the translation resolves to an empty string. */
-    hideIfEmpty: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    /** Plural rule for this element only, overriding the configured one. */
-    customPluralRule: {
-        type: PropType<PluralFunc>;
-        default: null;
-    };
-    /** Formats the value with `$tn` and passes it to the translation as `{number}`. */
-    number: {
-        type: PropType<number | string>;
-    };
-    /** Formats the value with `$td` and passes it to the translation as `{date}`. */
-    date: {
-        type: PropType<Date | string | number>;
-    };
-    /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`. */
-    relativeDate: {
-        type: PropType<Date | string | number>;
-    };
-}>> & Readonly<{}>, {
-    params: Record<string, string | number | boolean>;
-    tag: string;
-    html: boolean;
-    defaultValue: string;
-    hideIfEmpty: boolean;
-    customPluralRule: PluralFunc;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: FunctionalComponent<I18nTRenderProps, {}, any, {}> & {
+    displayName: string;
+    inheritAttrs: boolean;
+    props: {
+        /** Translation key to render. */
+        keypath: {
+            type: PropType<string>;
+            required: boolean;
+        };
+        /** Count selecting the plural form. Set it to use `$tc` instead of `$t`. `null` means unset. */
+        plural: {
+            type: PropType<number | string | null>;
+        };
+        /** Element to render. */
+        tag: {
+            type: PropType<string>;
+            default: string;
+        };
+        /** Interpolation values substituted into the translation. */
+        params: {
+            type: PropType<Record<string, string | number | boolean>>;
+        };
+        /** Rendered instead of the component when `hideIfEmpty` suppresses an empty translation. */
+        defaultValue: {
+            type: PropType<string>;
+            default: string;
+        };
+        /** Render the translation as HTML rather than text. Only for translations you control: `params` are escaped, the translation is not. */
+        html: {
+            type: PropType<boolean>;
+            default: boolean;
+        };
+        /** Render nothing when the translation resolves to an empty string. */
+        hideIfEmpty: {
+            type: PropType<boolean>;
+            default: boolean;
+        };
+        /** Plural rule for this element only, overriding the configured one. Its answer is used as is; `null` renders empty. */
+        customPluralRule: {
+            type: PropType<PluralFunc>;
+            default: null;
+        };
+        /** Formats the value with `$tn` and passes it to the translation as `{number}`, alongside `params`. */
+        number: {
+            type: PropType<number | string | null>;
+        };
+        /** Formats the value with `$td` and passes it to the translation as `{date}`, alongside `params`. */
+        date: {
+            type: PropType<Date | string | number | null>;
+        };
+        /** Formats the value with `$tdr` and passes it to the translation as `{relativeDate}`, alongside `params`. */
+        relativeDate: {
+            type: PropType<Date | string | number | null>;
+        };
+    };
+};

package/dist/runtime/composables/useI18n.js

@@ -1,40 +1,4 @@
-import { useNuxtApp } from "#app";
+import { useNuxtApp } from "#app/nuxt";
 export function useI18n() {
-  const nuxtApp = useNuxtApp();
-  const injections = {
-    $i18nStrategy: nuxtApp.$i18nStrategy,
-    $getI18nConfig: nuxtApp.$getI18nConfig,
-    $defaultLocale: nuxtApp.$defaultLocale,
-    $getLocale: nuxtApp.$getLocale,
-    $getLocaleName: nuxtApp.$getLocaleName,
-    $getLocales: nuxtApp.$getLocales,
-    $getRouteName: nuxtApp.$getRouteName,
-    $t: nuxtApp.$t,
-    $_t: nuxtApp.$_t,
-    $ts: nuxtApp.$ts,
-    $_ts: nuxtApp.$_ts,
-    $tn: nuxtApp.$tn,
-    $td: nuxtApp.$td,
-    $tdr: nuxtApp.$tdr,
-    $has: nuxtApp.$has,
-    $resolveTranslations: nuxtApp.$resolveTranslations,
-    $setTranslation: nuxtApp.$setTranslation,
-    $tc: nuxtApp.$tc,
-    $mergeTranslations: nuxtApp.$mergeTranslations,
-    $setI18nRouteParams: nuxtApp.$setI18nRouteParams,
-    $switchLocaleRoute: nuxtApp.$switchLocaleRoute,
-    $switchLocalePath: nuxtApp.$switchLocalePath,
-    $switchLocale: nuxtApp.$switchLocale,
-    $switchRoute: nuxtApp.$switchRoute,
-    $localeRoute: nuxtApp.$localeRoute,
-    $localePath: nuxtApp.$localePath,
-    $loadPageTranslations: nuxtApp.$loadPageTranslations,
-    $setMissingHandler: nuxtApp.$setMissingHandler,
-    helper: nuxtApp.helper
-  };
-  const noDollarInjections = Object.fromEntries(Object.entries(injections).map(([key, value]) => [key.slice(1), value]));
-  return {
-    ...injections,
-    ...noDollarInjections
-  };
+  return useNuxtApp().$i18n;
 }

package/dist/runtime/composables/useI18nHead.js

@@ -1,22 +1,37 @@
-import { toValue, watch } from "vue";
-import { useState } from "#app";
+import { getCurrentInstance, onActivated, onBeforeUnmount, toValue, watch } from "vue";
+import { useRouter } from "#app/composables/router";
+import { useState } from "#app/composables/state";
+import { usePageHead, usePageRoute } from "../utils/page-head.js";
 export function useI18nHead(input) {
-  const pageHead = useState("i18n-head-page", () => null);
+  const pageHead = usePageHead();
   const localeState = useState("i18n-locale", () => null);
   const resetPageHead = () => {
     pageHead.value = null;
   };
   if (input !== void 0) {
+    const page = usePageRoute();
+    const router = useRouter();
+    let written = null;
+    const write = (value) => {
+      if (page && page.path !== router.currentRoute.value.path) return;
+      pageHead.value = value ?? null;
+      written = pageHead.value;
+    };
     watch(
       () => {
         localeState.value;
+        if (!page) router.currentRoute.value.path;
         return toValue(input);
       },
-      (value) => {
-        pageHead.value = value ?? null;
-      },
+      write,
       { immediate: true, deep: true }
     );
+    if (getCurrentInstance()) {
+      onActivated(() => write(toValue(input)));
+      onBeforeUnmount(() => {
+        if (!page && pageHead.value === written) pageHead.value = null;
+      });
+    }
   }
   return { pageHead, resetPageHead };
 }

package/dist/runtime/composables/useI18nLocale.d.ts

@@ -5,6 +5,10 @@ type CookieRef = {
 export type GetLocaleFromRoute = (route?: unknown) => string;
 export interface ResolveInitialLocaleOptions {
     route: unknown;
+    /** The locale the URL names, under a strategy that has one. */
+    urlLocale?: string | null;
+    /** What to remember when the URL's locale is not the visitor's: under no_prefix a record names one. */
+    preference?: string | null;
     serverLocale?: string | null;
     getLocaleFromRoute: GetLocaleFromRoute;
 }
@@ -18,7 +22,6 @@ export declare function useI18nLocale(): {
     hashCookie: CookieRef;
     getPreferredLocale: () => string | null;
     getLocale: () => string | null;
-    getLocaleWithServerFallback: (serverLocale?: string | null) => string | null;
     getEffectiveLocale: (route: unknown, getLocaleFromRoute: GetLocaleFromRoute) => string;
     resolveInitialLocale: (options: ResolveInitialLocaleOptions) => string;
     setLocale: (locale: string | null) => void;

package/dist/runtime/composables/useI18nLocale.js

@@ -1,17 +1,21 @@
 import { getEnabledLocaleCodes } from "@i18n-micro/utils/active-locales";
 import { getHashCookieName, getLocaleCookieName, getLocaleCookieOptions } from "@i18n-micro/utils/cookie";
-import { resolveI18nConfigWithRuntimeOverrides } from "@i18n-micro/utils/runtime-config";
-import { useCookie, useNuxtApp, useState } from "#app";
-import { getI18nConfig } from "#build/i18n.strategy.mjs";
+import { explicitLocale } from "@i18n-micro/utils/resolve-locale";
+import { useCookie } from "#app/composables/cookie";
+import { useState } from "#app/composables/state";
+import { useNuxtApp } from "#app/nuxt";
+import { cookies } from "#build/i18n.strategy.mjs";
+import { useResolvedI18nConfig } from "../utils/i18n-config.js";
 export function useI18nLocale() {
   const nuxtApp = useNuxtApp();
-  const i18nConfig = resolveI18nConfigWithRuntimeOverrides(nuxtApp.$getI18nConfig?.() ?? getI18nConfig());
+  const i18nConfig = useResolvedI18nConfig(nuxtApp);
   const validLocales = getEnabledLocaleCodes(i18nConfig.locales);
   const localeState = useState("i18n-locale", () => null);
   const localeCookieName = getLocaleCookieName(i18nConfig);
   const hashCookieName = getHashCookieName(i18nConfig);
-  const localeCookie = localeCookieName ? useCookie(localeCookieName, getLocaleCookieOptions()) : { value: null };
-  const hashCookie = hashCookieName ? useCookie(hashCookieName, getLocaleCookieOptions()) : { value: null };
+  const cookieRef = (name) => cookies && name ? useCookie(name, getLocaleCookieOptions()) : { value: null };
+  const localeCookie = cookieRef(localeCookieName);
+  const hashCookie = cookieRef(hashCookieName);
   const syncLocale = (locale) => {
     if (!locale) return;
     if (hashCookieName) hashCookie.value = locale;
@@ -23,41 +27,35 @@ export function useI18nLocale() {
       syncLocale(locale);
     }
   };
-  const getPreferredLocale = () => {
-    const preferred = localeState.value ?? (i18nConfig.hashMode ? hashCookie.value : localeCookie.value);
-    return preferred && validLocales.includes(preferred) ? preferred : null;
-  };
+  const preferenceCookie = i18nConfig.hashMode ? hashCookie : localeCookie;
+  const isValidLocale = (locale) => !!locale && validLocales.includes(locale);
+  const getPreferredLocale = () => explicitLocale({ validLocales, state: localeState.value, cookie: preferenceCookie.value });
   const getLocale = () => {
-    return localeState.value ?? (i18nConfig.hashMode ? hashCookie.value : localeCookie.value) ?? null;
-  };
-  const getLocaleWithServerFallback = (serverLocale) => {
-    return localeState.value ?? localeCookie.value ?? serverLocale ?? null;
+    return localeState.value ?? preferenceCookie.value ?? null;
   };
   const getEffectiveLocale = (route, getLocaleFromRoute) => {
     if (i18nConfig.hashMode && localeState.value !== null && localeState.value !== void 0) return localeState.value;
     return getLocaleFromRoute(route);
   };
   const resolveInitialLocale = (options) => {
-    let locale = localeState.value;
-    if (!locale && options.serverLocale) locale = options.serverLocale;
-    if (!locale) locale = options.getLocaleFromRoute(options.route);
-    if (locale && !localeState.value) {
+    const state = isValidLocale(localeState.value) ? localeState.value : null;
+    const locale = options.urlLocale || state || options.serverLocale || options.getLocaleFromRoute(options.route);
+    const remembered = options.preference ?? locale;
+    if (remembered && !state) {
       if (import.meta.server) {
-        localeState.value = locale;
+        localeState.value = remembered;
       } else {
-        setLocale(locale);
+        setLocale(remembered);
       }
     }
     return locale ?? "";
   };
-  const isValidLocale = (locale) => !!locale && validLocales.includes(locale);
   return {
     locale: localeState,
     localeCookie,
     hashCookie,
     getPreferredLocale,
     getLocale,
-    getLocaleWithServerFallback,
     getEffectiveLocale,
     resolveInitialLocale,
     setLocale,

package/dist/runtime/composables/useLocaleHead.d.ts

@@ -1,22 +1,4 @@
-interface MetaLink {
-    [key: string]: string | undefined;
-    rel: string;
-    href: string;
-    hreflang?: string;
-}
-interface MetaTag {
-    [key: string]: string;
-    property: string;
-    content: string;
-}
-interface MetaObject {
-    htmlAttrs: {
-        lang?: string;
-        dir?: 'ltr' | 'rtl' | 'auto';
-    };
-    link: MetaLink[];
-    meta: MetaTag[];
-}
+import { type LocaleHead } from '@i18n-micro/utils/locale-head';
 interface UseLocaleHeadOptions {
     /** Set `dir` on `<html>` from the locale's direction. */
     addDirAttribute?: boolean;
@@ -36,41 +18,53 @@ interface UseLocaleHeadOptions {
  * Only needed when `meta` is disabled or the defaults need adjusting — with `meta: true`
  * the module registers the same tags itself.
  *
- * @returns a ref holding the head object, ready to pass to `useHead`
+ * @returns `metaObject`, a ref holding the head object ready to pass to `useHead`; `updateMeta`
+ * refreshes it; `build` computes the head object from the current route (reactive when read in
+ * a getter, e.g. `useHead(() => build())`)
  * @example
  * ```ts
- * const head = useLocaleHead({ addSeoAttributes: true })
- * useHead(head)
+ * const { metaObject } = useLocaleHead({ addSeoAttributes: true })
+ * useHead(metaObject)
  * ```
  */
 export declare const useLocaleHead: ({ addDirAttribute, identifierAttribute, addSeoAttributes, baseUrl, autoUpdate, }?: UseLocaleHeadOptions) => {
     metaObject: import("vue").Ref<{
         htmlAttrs: {
+            [x: string]: string | undefined;
             lang?: string | undefined;
             dir?: "ltr" | "rtl" | "auto" | undefined;
         };
-        link: {
+        link: ({
             [x: string]: string | undefined;
-            rel: string;
+            rel: "canonical";
             href: string;
-            hreflang?: string | undefined;
-        }[];
+        } | {
+            [x: string]: string | undefined;
+            rel: "alternate";
+            href: string;
+            hreflang: string;
+        })[];
         meta: {
             [x: string]: string;
             property: string;
             content: string;
         }[];
-    }, MetaObject | {
+    }, LocaleHead | {
         htmlAttrs: {
+            [x: string]: string | undefined;
             lang?: string | undefined;
             dir?: "ltr" | "rtl" | "auto" | undefined;
         };
-        link: {
+        link: ({
             [x: string]: string | undefined;
-            rel: string;
+            rel: "canonical";
             href: string;
-            hreflang?: string | undefined;
-        }[];
+        } | {
+            [x: string]: string | undefined;
+            rel: "alternate";
+            href: string;
+            hreflang: string;
+        })[];
         meta: {
             [x: string]: string;
             property: string;
@@ -78,5 +72,6 @@ export declare const useLocaleHead: ({ addDirAttribute, identifierAttribute, add
         }[];
     }>;
     updateMeta: () => void;
+    build: () => LocaleHead;
 };
 export {};