@arronqzy/i18n 0.1.1

package/src/react/I18nProvider.tsx

@@ -0,0 +1,96 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { createTranslator, isLocale, resolveLocale, writeStoredLocale } from "../core";
+import { zhCN } from "../locales/zh-CN";
+import { enUS } from "../locales/en-US";
+import type { Locale, MessageParams, NestedMessages } from "../types";
+import { LOCALE_STORAGE_KEY } from "../types";
+
+const catalogs: Record<Locale, NestedMessages> = {
+  "zh-CN": zhCN as unknown as NestedMessages,
+  "en-US": enUS as unknown as NestedMessages,
+};
+
+export type I18nContextValue = {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+  t: (key: string, params?: MessageParams) => string;
+  messages: NestedMessages;
+};
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export type I18nProviderProps = {
+  children: ReactNode;
+  /** Explicit locale; when omitted, resolve from storage / browser / zh-CN */
+  locale?: Locale | null;
+  storageKey?: string;
+  detectBrowser?: boolean;
+  onLocaleChange?: (locale: Locale) => void;
+};
+
+export function I18nProvider({
+  children,
+  locale: localeProp,
+  storageKey = LOCALE_STORAGE_KEY,
+  detectBrowser = true,
+  onLocaleChange,
+}: I18nProviderProps) {
+  const [localeState, setLocaleState] = useState<Locale>(() =>
+    resolveLocale({ locale: localeProp, storageKey, detectBrowser })
+  );
+
+  useEffect(() => {
+    if (isLocale(localeProp)) setLocaleState(localeProp);
+  }, [localeProp]);
+
+  const locale = isLocale(localeProp) ? localeProp : localeState;
+
+  const setLocale = useCallback(
+    (next: Locale) => {
+      setLocaleState(next);
+      writeStoredLocale(next, storageKey);
+      onLocaleChange?.(next);
+    },
+    [onLocaleChange, storageKey]
+  );
+
+  const messages = catalogs[locale];
+  const t = useMemo(() => createTranslator(messages), [messages]);
+
+  const value = useMemo<I18nContextValue>(
+    () => ({ locale, setLocale, t, messages }),
+    [locale, setLocale, t, messages]
+  );
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n(): I18nContextValue {
+  const ctx = useContext(I18nContext);
+  if (!ctx) {
+    throw new Error("useI18n must be used within I18nProvider");
+  }
+  return ctx;
+}
+
+/** Safe hook: returns zh-CN translator when outside provider (for utilities). */
+export function useI18nOptional(): I18nContextValue {
+  const ctx = useContext(I18nContext);
+  if (ctx) return ctx;
+  const messages = catalogs["zh-CN"];
+  const t = createTranslator(messages);
+  return {
+    locale: "zh-CN",
+    setLocale: () => undefined,
+    t,
+    messages,
+  };
+}

package/src/react/index.ts

@@ -0,0 +1,2 @@
+export { I18nProvider, useI18n, useI18nOptional } from "./I18nProvider";
+export type { I18nContextValue, I18nProviderProps } from "./I18nProvider";

package/src/types.ts

@@ -0,0 +1,13 @@
+export type Locale = "zh-CN" | "en-US";
+
+export const LOCALES: Locale[] = ["zh-CN", "en-US"];
+
+export const LOCALE_STORAGE_KEY = "abuilder.locale";
+
+export type MessageParams = Record<string, string | number | boolean | null | undefined>;
+
+export type TranslateFn = (key: string, params?: MessageParams) => string;
+
+export type NestedMessages = {
+  [key: string]: string | NestedMessages;
+};

package/src/vue/index.ts

@@ -0,0 +1,98 @@
+import {
+  computed,
+  inject,
+  provide,
+  ref,
+  type App,
+  type InjectionKey,
+  type Ref,
+} from "vue";
+import { createTranslator, resolveLocale, writeStoredLocale } from "../core";
+import { zhCN } from "../locales/zh-CN";
+import { enUS } from "../locales/en-US";
+import type { Locale, MessageParams, NestedMessages, TranslateFn } from "../types";
+import { LOCALE_STORAGE_KEY } from "../types";
+
+const catalogs: Record<Locale, NestedMessages> = {
+  "zh-CN": zhCN as unknown as NestedMessages,
+  "en-US": enUS as unknown as NestedMessages,
+};
+
+export type I18nState = {
+  locale: Ref<Locale>;
+  setLocale: (locale: Locale) => void;
+  t: TranslateFn;
+  messages: Ref<NestedMessages>;
+};
+
+export const ABUILDER_I18N_KEY: InjectionKey<I18nState> = Symbol("abuilder-i18n");
+
+export type CreateAbuilderI18nOptions = {
+  locale?: Locale | null;
+  storageKey?: string;
+  detectBrowser?: boolean;
+};
+
+export function createAbuilderI18n(options: CreateAbuilderI18nOptions = {}): I18nState {
+  const storageKey = options.storageKey ?? LOCALE_STORAGE_KEY;
+  const locale = ref(
+    resolveLocale({
+      locale: options.locale,
+      storageKey,
+      detectBrowser: options.detectBrowser ?? true,
+    })
+  );
+
+  const messages = computed(() => catalogs[locale.value]);
+
+  const t: TranslateFn = (key, params) => createTranslator(messages.value)(key, params);
+
+  function setLocale(next: Locale) {
+    locale.value = next;
+    writeStoredLocale(next, storageKey);
+  }
+
+  return {
+    locale,
+    setLocale,
+    t,
+    messages,
+  };
+}
+
+export function provideI18n(options?: CreateAbuilderI18nOptions): I18nState {
+  const i18n = createAbuilderI18n(options);
+  provide(ABUILDER_I18N_KEY, i18n);
+  return i18n;
+}
+
+/** Vue plugin: app.use(abuilderI18n, { locale: 'en-US' }) */
+export const abuilderI18n = {
+  install(app: App, options: CreateAbuilderI18nOptions = {}) {
+    const i18n = createAbuilderI18n(options);
+    app.provide(ABUILDER_I18N_KEY, i18n);
+    app.config.globalProperties.$t = i18n.t;
+    app.config.globalProperties.$i18n = i18n;
+  },
+};
+
+export function useI18n(): I18nState {
+  const ctx = inject(ABUILDER_I18N_KEY, null);
+  if (!ctx) {
+    throw new Error("useI18n must be used after provideI18n / abuilderI18n plugin");
+  }
+  return ctx;
+}
+
+export function useI18nOptional(): I18nState {
+  const ctx = inject(ABUILDER_I18N_KEY, null);
+  if (ctx) return ctx;
+  return createAbuilderI18n({ locale: "zh-CN", detectBrowser: false });
+}
+
+declare module "vue" {
+  interface ComponentCustomProperties {
+    $t: TranslateFn;
+    $i18n: I18nState;
+  }
+}