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

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

@@ -1,3 +1,2 @@
 import React from 'react';
-import './utils/listenHot';
 export default function IframeBridge(): React.JSX.Element;

package/lib/components/AppContainer/IframeBridge.js

@@ -1,12 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { connectToParent } from "penpal";
 import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
-import { resolveParentOrigin, submitPostMessage } from "../../utils/postMessage.js";
-import { childApi } from "./utils/childApi.js";
-import { batchLogInfo } from "../../logger/batch-logger.js";
-import "./utils/listenHot.js";
+import { submitPostMessage } from "../../utils/postMessage.js";
 var IframeBridge_RouteMessageType = /*#__PURE__*/ function(RouteMessageType) {
     RouteMessageType["RouteChange"] = "RouteChange";
     RouteMessageType["RouteBack"] = "RouteBack";
@@ -16,27 +12,6 @@ var IframeBridge_RouteMessageType = /*#__PURE__*/ function(RouteMessageType) {
 function isRouteMessageType(type) {
     return Object.values(IframeBridge_RouteMessageType).includes(type);
 }
-async function connectParent() {
-    submitPostMessage({
-        type: 'PreviewReady',
-        data: {}
-    });
-    batchLogInfo('info', JSON.stringify({
-        type: 'PreviewReady',
-        timestamp: Date.now(),
-        url: window.location.href
-    }));
-    const parentOrigin = resolveParentOrigin();
-    if (!parentOrigin) return;
-    const connection = connectToParent({
-        parentOrigin,
-        methods: {
-            ...childApi
-        }
-    });
-    await connection.promise;
-}
-'production' !== process.env.NODE_ENV && connectParent();
 function IframeBridge() {
     const location = useLocation();
     const navigate = useNavigate();

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/iframe-bridge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Iframe Bridge Runtime
+ *
+ * 开发环境下的 iframe 通信初始化：
+ * - connectParent - 通过 penpal 连接父页面，建立双向通信
+ */
+/**
+ * 初始化 iframe bridge（仅开发环境）
+ * - 连接父页面
+ */
+export declare function initIframeBridge(): void;

package/lib/runtime/iframe-bridge.js

@@ -0,0 +1,29 @@
+import { connectToParent } from "penpal";
+import { resolveParentOrigin, submitPostMessage } from "../utils/postMessage.js";
+import { batchLogInfo } from "../logger/batch-logger.js";
+import { childApi } from "../components/AppContainer/utils/childApi.js";
+async function connectParent() {
+    submitPostMessage({
+        type: 'PreviewReady',
+        data: {}
+    });
+    batchLogInfo('info', JSON.stringify({
+        type: 'PreviewReady',
+        timestamp: Date.now(),
+        url: window.location.href
+    }));
+    const parentOrigin = resolveParentOrigin();
+    if (!parentOrigin) return;
+    const connection = connectToParent({
+        parentOrigin,
+        methods: {
+            ...childApi
+        }
+    });
+    await connection.promise;
+}
+function initIframeBridge() {
+    if (window.parent === window) return;
+    connectParent();
+}
+export { initIframeBridge };

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,16 @@
+import "./styles.js";
+import { registerDayjsPlugins } from "./dayjs.js";
+import { initAxiosConfig } from "./axios.js";
+import { initObservable } from "./observable.js";
+import { initServerLog } from "./server-log.js";
+import { initIframeBridge } from "./iframe-bridge.js";
+if (!window.__FULLSTACK_RUNTIME_INITIALIZED__) {
+    window.__FULLSTACK_RUNTIME_INITIALIZED__ = true;
+    registerDayjsPlugins();
+    initAxiosConfig();
+    initObservable();
+    if ('production' !== process.env.NODE_ENV) {
+        initServerLog();
+        initIframeBridge();
+    }
+}

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.1",
   "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",
@@ -110,7 +115,6 @@
     "lodash": "^4.17.21",
     "network-idle": "^0.2.0",
     "penpal": "^6.2.2",
-    "sockjs-client": "^1.6.1",
     "sonner": "~2.0.0",
     "source-map": "^0.7.6",
     "stacktrace-js": "^2.0.2",
@@ -143,7 +147,6 @@
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
-    "@types/sockjs-client": "^1",
     "antd": "^5.26.6",
     "eslint": "^8.57.0",
     "jsdom": "^26.1.0",

package/lib/components/AppContainer/utils/listenHot.d.ts

@@ -1 +0,0 @@
-export declare function connectDevServer(): WebSocket;

package/lib/components/AppContainer/utils/listenHot.js

@@ -1,79 +0,0 @@
-import sockjs_client from "sockjs-client";
-import { submitPostMessage, submitSlardarEvent } from "../../../utils/postMessage.js";
-import { batchLogInfo } from "../../../logger/batch-logger.js";
-import { getWsPath } from "../../../utils/utils.js";
-let hotInited = false;
-function handleDevServerMessage(msg) {
-    if ('hash' === msg.type) {
-        if (!hotInited) {
-            hotInited = true;
-            return;
-        }
-        submitPostMessage({
-            type: 'HmrMessage',
-            msg: {
-                type: 'hot'
-            },
-            data: null
-        });
-        batchLogInfo('info', JSON.stringify({
-            type: 'HmrMessage',
-            subType: 'hot',
-            timestamp: Date.now(),
-            hash: msg.data
-        }));
-    } else if ('errors' === msg.type) {
-        submitPostMessage({
-            type: 'HmrMessage',
-            msg: {
-                type: 'errors',
-                data: JSON.stringify(msg.data)
-            },
-            data: null
-        });
-        batchLogInfo('info', JSON.stringify({
-            type: 'HmrMessage',
-            subType: 'errors',
-            timestamp: Date.now(),
-            errorCount: msg.data?.length
-        }));
-    } else if ('hmr-timing' === msg.type) {
-        const { duration, fileCount, fileTotalSize } = msg.data;
-        submitSlardarEvent({
-            name: 'runTiming',
-            metrics: {
-                duration
-            },
-            categories: {
-                type: 'sandbox-hmr-timing',
-                fileCount,
-                fileTotalSize
-            }
-        });
-        batchLogInfo('info', JSON.stringify({
-            type: 'HmrMessage',
-            subType: 'hmr-timing',
-            timestamp: Date.now(),
-            duration,
-            fileCount,
-            fileTotalSize
-        }));
-    }
-}
-function connectDevServer() {
-    const sockUrl = getWsPath();
-    const sock = new sockjs_client(sockUrl);
-    sock.onopen = ()=>console.log('✅ connect DevServer SockJS');
-    sock.onmessage = (event)=>{
-        try {
-            const msg = JSON.parse(event.data);
-            console.log('hmr 消息:', msg);
-            handleDevServerMessage(msg);
-        } catch (err) {
-            console.error('解析 hmr 消息失败:', event.data);
-        }
-    };
-    return sock;
-}
-'production' !== process.env.NODE_ENV && connectDevServer();
-export { connectDevServer };