@lark-apaas/client-toolkit 1.2.7 → 1.2.8-alpha.0

package/lib/components/AppContainer/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseThemeProviderProps } from '../theme';
-import '../../index.css';
+import '../../runtime';
 interface IBaseAuthProviderProps {
     enableAuth?: boolean;
 }

package/lib/components/AppContainer/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { ConfigProvider } from "antd";
 import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
 import zh_CN from "antd/locale/zh_CN";
@@ -8,21 +8,14 @@ import { defaultUIConfig } from "../theme/ui-config.js";
 import { Toaster } from "./sonner.js";
 import { PageHoc } from "./PageHoc.js";
 import { findValueByPixel, generateTailwindRadiusToken, themeColorTokenMap, themeMetaOptions } from "../theme/index.js";
-import { registerDayjsPlugins } from "./dayjsPlugins.js";
-import "../../index.css";
-import { initAxiosConfig } from "../../utils/axiosConfig.js";
 import { reportTeaEvent } from "./utils/tea.js";
 import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
 import safety from "./safety.js";
 import { getAppId } from "../../utils/getAppId.js";
-import { ServerLogSSEClient } from "../../server-log/index.js";
 import QueryProvider from "../QueryProvider/index.js";
-import { initObservable } from "./utils/observable.js";
 import { AuthProvider } from "@lark-apaas/auth-sdk";
-registerDayjsPlugins();
-initAxiosConfig();
-initObservable();
+import "../../runtime/index.js";
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
 const readCssVarColor = (varName, fallback)=>{
     try {
@@ -36,7 +29,6 @@ const readCssVarColor = (varName, fallback)=>{
 const App = (props)=>{
     const { themeMeta = {}, enableAuth } = props;
     useAppInfo();
-    const serverLogClientRef = useRef(null);
     const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
         rem: '0.625'
     };
@@ -48,40 +40,6 @@ const App = (props)=>{
             borderRadius: radiusToken
         }
     };
-    useEffect(()=>{
-        if ('production' !== process.env.NODE_ENV && window.parent !== window) {
-            try {
-                const backendUrl = window.location.origin;
-                serverLogClientRef.current = new ServerLogSSEClient({
-                    serverUrl: backendUrl,
-                    sseEndpoint: '/dev/logs/server-logs/stream',
-                    debug: true
-                });
-                serverLogClientRef.current.start();
-                console.log('[AppContainer] Server log SSE client started');
-            } catch (error) {
-                console.error('[AppContainer] Failed to start server log SSE client:', error);
-            }
-            const handleVisibilityChange = ()=>{
-                if (!serverLogClientRef.current) return;
-                if (document.hidden) {
-                    serverLogClientRef.current.pause();
-                    console.log('[AppContainer] Tab hidden, SSE paused');
-                } else {
-                    serverLogClientRef.current.resume();
-                    console.log('[AppContainer] Tab visible, SSE resumed');
-                }
-            };
-            document.addEventListener('visibilitychange', handleVisibilityChange);
-            return ()=>{
-                document.removeEventListener('visibilitychange', handleVisibilityChange);
-                if (serverLogClientRef.current) {
-                    serverLogClientRef.current.stop();
-                    console.log('[AppContainer] Server log SSE client stopped');
-                }
-            };
-        }
-    }, []);
     useEffect(()=>{
         if (isMiaodaPreview) fetch(`${location.origin}/ai/api/feida_preview/csrf`).then(()=>{
             setTimeout(()=>{

package/lib/runtime/axios.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Axios 配置初始化
+ * 从原有的 axiosConfig.ts 迁移
+ */
+export { initAxiosConfig } from '../utils/axiosConfig';

package/lib/runtime/axios.js

@@ -0,0 +1,2 @@
+import { initAxiosConfig } from "../utils/axiosConfig.js";
+export { initAxiosConfig };

package/lib/runtime/dayjs.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Dayjs 插件注册
+ * 从原有的 dayjsPlugins.ts 迁移
+ */
+export { registerDayjsPlugins } from '../components/AppContainer/dayjsPlugins';

package/lib/runtime/dayjs.js

@@ -0,0 +1,2 @@
+import { registerDayjsPlugins } from "../components/AppContainer/dayjsPlugins.js";
+export { registerDayjsPlugins };

package/lib/runtime/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Client Toolkit Runtime
+ *
+ * 全局初始化逻辑，通过 rspack-plugin 自动注入到用户入口之前
+ * 无论用户是否使用 AppContainer，这些基础能力始终可用
+ *
+ * 执行顺序：
+ * 1. 全局样式
+ * 2. Dayjs 插件注册
+ * 3. Axios 配置
+ * 4. 可观测初始化
+ * 5. Server Log SSE (开发环境)
+ *
+ * 兼容性说明：
+ * - 使用 __FULLSTACK_RUNTIME_INITIALIZED__ 标志位防止重复初始化
+ * - 旧版 AppContainer 和新版 runtime 可以共存
+ */
+import './styles';
+declare global {
+    interface Window {
+        __FULLSTACK_RUNTIME_INITIALIZED__?: boolean;
+    }
+}

package/lib/runtime/index.js

@@ -0,0 +1,12 @@
+import "./styles.js";
+import { registerDayjsPlugins } from "./dayjs.js";
+import { initAxiosConfig } from "./axios.js";
+import { initObservable } from "./observable.js";
+import { initServerLog } from "./server-log.js";
+if (!window.__FULLSTACK_RUNTIME_INITIALIZED__) {
+    window.__FULLSTACK_RUNTIME_INITIALIZED__ = true;
+    registerDayjsPlugins();
+    initAxiosConfig();
+    initObservable();
+    if ('production' !== process.env.NODE_ENV) initServerLog();
+}

package/lib/runtime/observable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 可观测初始化
+ * 从原有的 observable.ts 迁移
+ */
+export { initObservable } from '../components/AppContainer/utils/observable';

package/lib/runtime/observable.js

@@ -0,0 +1,2 @@
+import { initObservable } from "../components/AppContainer/utils/observable.js";
+export { initObservable };

package/lib/runtime/server-log.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 初始化 Server Log SSE 客户端
+ * 仅在开发环境且在 iframe 中时启用
+ */
+export declare function initServerLog(): void;

package/lib/runtime/server-log.js

@@ -0,0 +1,41 @@
+import { ServerLogSSEClient } from "../server-log/index.js";
+let client = null;
+function initServerLog() {
+    if (window.parent === window) return;
+    try {
+        const backendUrl = window.location.origin;
+        client = new ServerLogSSEClient({
+            serverUrl: backendUrl,
+            sseEndpoint: '/dev/logs/server-logs/stream',
+            debug: true
+        });
+        client.start();
+        console.log('[Runtime] Server log SSE client started');
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        window.addEventListener('beforeunload', cleanup);
+        window.addEventListener('unload', cleanup);
+    } catch (error) {
+        console.error('[Runtime] Failed to start server log SSE client:', error);
+    }
+}
+function handleVisibilityChange() {
+    if (!client) return;
+    if (document.hidden) {
+        client.pause();
+        console.log('[Runtime] Tab hidden, SSE paused');
+    } else {
+        client.resume();
+        console.log('[Runtime] Tab visible, SSE resumed');
+    }
+}
+function cleanup() {
+    if (client) {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+        window.removeEventListener('beforeunload', cleanup);
+        window.removeEventListener('unload', cleanup);
+        client.stop();
+        client = null;
+        console.log('[Runtime] Server log SSE client stopped');
+    }
+}
+export { initServerLog };

package/lib/runtime/styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 全局样式导入
+ * 在 runtime 中最先执行，确保样式优先加载
+ */
+import '../index.css';

package/lib/runtime/styles.js

@@ -0,0 +1 @@
+import "../index.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.7",
+  "version": "1.2.8-alpha.0",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -15,6 +15,11 @@
       "require": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
+    "./runtime": {
+      "import": "./lib/runtime/index.js",
+      "require": "./lib/runtime/index.js",
+      "types": "./lib/runtime/index.d.ts"
+    },
     "./antd-table": {
       "import": "./lib/antd-table.js",
       "require": "./lib/antd-table.js",