talizen 0.2.12 → 0.2.14

package/README.md

@@ -120,6 +120,7 @@ import {
   logout,
   register,
   updateProfile,
+  useAuth,
 } from "talizen/auth";
 
 await register({
@@ -140,6 +141,13 @@ const providers = await listAuthProviders();
 console.log(providers.map((provider) => provider.key));
 
 await loginWithOAuth("github", { redirectUrl: "/account" });
+
+function AccountBadge() {
+  const { user, loading, logout } = useAuth();
+  if (loading) return <span>Loading...</span>;
+  if (!user) return <a href="/login">Sign in</a>;
+  return <button onClick={() => logout()}>{user.name ?? user.account ?? "Logout"}</button>;
+}
 ```
 
 ### Invoke a custom function

package/auth.d.ts

@@ -54,6 +54,23 @@ export declare class TalizenAuthError extends Error {
 }
 export declare function register(input: AuthRegisterInput, options?: TalizenRequestOptions): Promise<AuthUser>;
 export declare function login(input: AuthPasswordInput, options?: TalizenRequestOptions): Promise<AuthUser>;
+export interface UseAuthResult {
+    user: AuthUser | null;
+    loading: boolean;
+    error: unknown;
+    refresh(): Promise<AuthUser | null>;
+    login(input: AuthPasswordInput): Promise<AuthUser>;
+    register(input: AuthRegisterInput): Promise<AuthUser>;
+    logout(): Promise<void>;
+    updateProfile(profile: AuthProfile): Promise<AuthUser>;
+}
+/**
+ * Subscribe to the current auth user.
+ *
+ * The hook reloads `/auth/me` whenever `setTalizenConfig()` changes runtime
+ * config, which lets preview auth headers update the page without remounting.
+ */
+export declare function useAuth(options?: TalizenRequestOptions): UseAuthResult;
 export declare function logout(options?: TalizenRequestOptions): Promise<void>;
 export declare function currentUser(options?: TalizenRequestOptions): Promise<AuthUser | null>;
 export declare function updateProfile(profile: AuthProfile, options?: TalizenRequestOptions): Promise<AuthUser>;

package/auth.js

@@ -1,4 +1,5 @@
-import { requestJson, } from "./core.js";
+import * as React from "react";
+import { getTalizenConfig, requestJson, subscribeTalizenConfig, } from "./core.js";
 export class TalizenAuthError extends Error {
     constructor(message) {
         super(message);
@@ -17,6 +18,80 @@ export async function login(input, options) {
         body: JSON.stringify(input),
     }, options);
 }
+function readAuthConfigSnapshot() {
+    return getTalizenConfig();
+}
+/**
+ * Subscribe to the current auth user.
+ *
+ * The hook reloads `/auth/me` whenever `setTalizenConfig()` changes runtime
+ * config, which lets preview auth headers update the page without remounting.
+ */
+export function useAuth(options) {
+    const configSnapshot = React.useSyncExternalStore(subscribeTalizenConfig, readAuthConfigSnapshot, readAuthConfigSnapshot);
+    const optionsRef = React.useRef(options);
+    const requestIdRef = React.useRef(0);
+    const [state, setState] = React.useState({
+        user: null,
+        loading: true,
+        error: null,
+    });
+    React.useEffect(() => {
+        optionsRef.current = options;
+    }, [options]);
+    const refresh = React.useCallback(async () => {
+        const requestId = requestIdRef.current + 1;
+        requestIdRef.current = requestId;
+        setState(current => ({ ...current, loading: true, error: null }));
+        try {
+            const nextUser = await currentUser(optionsRef.current);
+            if (requestIdRef.current === requestId) {
+                setState({ user: nextUser, loading: false, error: null });
+            }
+            return nextUser;
+        }
+        catch (error) {
+            if (requestIdRef.current === requestId) {
+                setState(current => ({ ...current, loading: false, error }));
+            }
+            throw error;
+        }
+    }, []);
+    React.useEffect(() => {
+        void refresh().catch(() => { });
+    }, [configSnapshot, refresh]);
+    const loginAndRefresh = React.useCallback(async (input) => {
+        const nextUser = await login(input, optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: nextUser, loading: false, error: null });
+        return nextUser;
+    }, []);
+    const registerAndRefresh = React.useCallback(async (input) => {
+        const nextUser = await register(input, optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: nextUser, loading: false, error: null });
+        return nextUser;
+    }, []);
+    const logoutAndRefresh = React.useCallback(async () => {
+        await logout(optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: null, loading: false, error: null });
+    }, []);
+    const updateProfileAndRefresh = React.useCallback(async (profile) => {
+        const nextUser = await updateProfile(profile, optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: nextUser, loading: false, error: null });
+        return nextUser;
+    }, []);
+    return {
+        ...state,
+        refresh,
+        login: loginAndRefresh,
+        register: registerAndRefresh,
+        logout: logoutAndRefresh,
+        updateProfile: updateProfileAndRefresh,
+    };
+}
 export async function logout(options) {
     await requestJson("/auth/logout", {
         method: "POST",

package/core.d.ts

@@ -17,6 +17,8 @@ export interface TalizenClientConfig {
     headers?: HeadersInit;
     fetch?: typeof fetch;
     onFileUploadProcess?: TalizenFileUploadProcessCallback;
+    i18n?: Partial<TalizenLocaleRuntime>;
+    messages?: Record<string, unknown>;
 }
 export interface TalizenRequestOptions extends TalizenClientConfig {
     signal?: AbortSignal;
@@ -25,8 +27,14 @@ export interface TalizenErrorBody {
     code?: number | string;
     message?: string;
 }
+export interface TalizenLocaleRuntime {
+    locale: string;
+    locales: string[];
+    defaultLocale: string;
+}
 export declare function setTalizenConfig(config: TalizenClientConfig): void;
 export declare function getTalizenConfig(): TalizenClientConfig;
+export declare function subscribeTalizenConfig(listener: () => void): () => void;
 declare global {
     var TalizenConfig: TalizenClientConfig | undefined;
 }

package/core.js

@@ -1,13 +1,21 @@
 let talizenConfig = {};
+const talizenConfigListeners = new Set();
 export function setTalizenConfig(config) {
     talizenConfig = {
         ...talizenConfig,
         ...config,
     };
+    talizenConfigListeners.forEach(listener => listener());
 }
 export function getTalizenConfig() {
     return talizenConfig;
 }
+export function subscribeTalizenConfig(listener) {
+    talizenConfigListeners.add(listener);
+    return () => {
+        talizenConfigListeners.delete(listener);
+    };
+}
 export function resolveTalizenConfig(config) {
     // globalThis is the global object in the browser and node.js
     const globalTalizenConfig = typeof globalThis !== "undefined" ? globalThis.TalizenConfig : {};

package/i18n.d.ts

@@ -1,16 +1,10 @@
 import * as React from "react";
+import { type TalizenLocaleRuntime } from "./core.js";
 /**
- * 当前语言运行时信息。由 Talizen 渲染引擎注入到 `globalThis.__TALIZEN_I18N__`
- * （SSR 与浏览器端注入同一份，避免 hydration 不一致）。站点未开启多语言时为空。
+ * 当前语言运行时信息。由 Talizen 渲染引擎写入 TalizenConfig.i18n
+ * （旧版 globalThis.__TALIZEN_I18N__ 仍作为兼容 fallback）。站点未开启多语言时为空。
  */
-export interface LocaleRuntime {
-    /** 当前生效语言；站点未配置多语言时为 ""。 */
-    locale: string;
-    /** 站点配置的全部语言。 */
-    locales: string[];
-    /** 默认语言（其 URL 无前缀）。 */
-    defaultLocale: string;
-}
+export type LocaleRuntime = TalizenLocaleRuntime;
 declare global {
     var __TALIZEN_I18N__: Partial<LocaleRuntime> | undefined;
 }

package/i18n.js

@@ -1,6 +1,24 @@
 import * as React from "react";
-function readLocaleRuntime() {
-    const d = (typeof globalThis !== "undefined" ? globalThis.__TALIZEN_I18N__ : undefined) ?? {};
+import { getTalizenConfig, subscribeTalizenConfig } from "./core.js";
+let lastSnapshot = null;
+let lastSnapshotI18n;
+let lastSnapshotMessages;
+function readI18nRuntimeConfig() {
+    const config = getTalizenConfig();
+    const fallbackI18n = typeof globalThis !== "undefined" ? globalThis.__TALIZEN_I18N__ : undefined;
+    const fallbackMessages = typeof globalThis !== "undefined" ? globalThis.__TALIZEN_MESSAGES__ : undefined;
+    const i18n = config.i18n ?? fallbackI18n;
+    const messages = config.messages ?? fallbackMessages ?? {};
+    if (lastSnapshot && lastSnapshotI18n === i18n && lastSnapshotMessages === messages) {
+        return lastSnapshot;
+    }
+    lastSnapshotI18n = i18n;
+    lastSnapshotMessages = messages;
+    lastSnapshot = { i18n, messages };
+    return lastSnapshot;
+}
+function normalizeLocaleRuntime(value) {
+    const d = value ?? {};
     const locales = Array.isArray(d.locales) ? d.locales.filter((l) => typeof l === "string") : [];
     return {
         locale: typeof d.locale === "string" ? d.locale : "",
@@ -8,6 +26,9 @@ function readLocaleRuntime() {
         defaultLocale: typeof d.defaultLocale === "string" ? d.defaultLocale : (locales[0] ?? ""),
     };
 }
+function readLocaleRuntime() {
+    return normalizeLocaleRuntime(readI18nRuntimeConfig().i18n);
+}
 /**
  * 读取当前语言运行时信息（当前语言 / 全部语言 / 默认语言）。SSR 与客户端返回一致。
  * 站点未开启多语言时 `locale === ""`。
@@ -17,7 +38,8 @@ function readLocaleRuntime() {
  * ```
  */
 export function useLocale() {
-    return readLocaleRuntime();
+    const snapshot = React.useSyncExternalStore(subscribeTalizenConfig, readI18nRuntimeConfig, readI18nRuntimeConfig);
+    return normalizeLocaleRuntime(snapshot.i18n);
 }
 /**
  * 读取当前语言运行时信息——与 useLocale() 完全等价，但命名为 get*（**不是 hook**），
@@ -67,6 +89,7 @@ export const LOCALE_COOKIE = "CREGHT_LOCALE";
  */
 export function Link(props) {
     const { href, locale, onClick, ...rest } = props;
+    useLocale();
     const finalHref = localizedPath(href, locale);
     const handleClick = (event) => {
         if (locale && typeof document !== "undefined") {
@@ -77,7 +100,7 @@ export function Link(props) {
     return React.createElement("a", { ...rest, href: finalHref, onClick: handleClick });
 }
 function readMessages() {
-    return (typeof globalThis !== "undefined" ? globalThis.__TALIZEN_MESSAGES__ : undefined) ?? {};
+    return readI18nRuntimeConfig().messages;
 }
 function lookupMessage(obj, path) {
     let cur = obj;
@@ -99,8 +122,8 @@ function lookupMessage(obj, path) {
  *
  * UI chrome 用 useTranslations；文章等内容用 CMS 字段级 _i18n（见 listContents/getContent）。
  */
-function buildTranslator(namespace) {
-    const messages = readMessages();
+function buildTranslator(namespace, sourceMessages) {
+    const messages = sourceMessages ?? readMessages();
     const scoped = namespace ? lookupMessage(messages, namespace) : messages;
     const base = (scoped && typeof scoped === "object" ? scoped : {});
     return (key, vars) => {
@@ -112,7 +135,8 @@ function buildTranslator(namespace) {
     };
 }
 export function useTranslations(namespace) {
-    return buildTranslator(namespace);
+    const snapshot = React.useSyncExternalStore(subscribeTalizenConfig, readI18nRuntimeConfig, readI18nRuntimeConfig);
+    return React.useMemo(() => buildTranslator(namespace, snapshot.messages), [namespace, snapshot]);
 }
 /**
  * 读取 UI 文案翻译器——与 useTranslations() 等价，但命名为 get*（**不是 hook**），

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talizen",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Talizen frontend SDK types for cms, form and core.",
   "type": "module",
   "license": "MIT",