@lark-apaas/client-toolkit 1.2.9-beta.24 → 1.2.9-beta.26

package/lib/components/AppContainer/index.js

@@ -4,10 +4,8 @@ import { ConfigProvider } from "antd";
 import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
 import zh_CN from "antd/locale/zh_CN";
 import IframeBridge from "./IframeBridge.js";
-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 { reportTeaEvent } from "./utils/tea.js";
 import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
@@ -28,19 +26,8 @@ const readCssVarColor = (varName, fallback)=>{
 };
 const appFlags = process.env.APP_FLAGS || {};
 const App = (props)=>{
-    const { themeMeta = {}, enableAuth, disableToaster = false } = props;
+    const { enableAuth, disableToaster = false } = props;
     useAppInfo();
-    const { rem } = findValueByPixel(themeMetaOptions.themeRadius, themeMeta.borderRadius) || {
-        rem: '0.625'
-    };
-    const radiusToken = generateTailwindRadiusToken(Number(rem));
-    const themeToken = {
-        ...defaultUIConfig,
-        common: {
-            ...defaultUIConfig.common,
-            borderRadius: radiusToken
-        }
-    };
     useEffect(()=>{
         if (isMiaodaPreview) fetch(`${location.origin}/ai/api/feida_preview/csrf`).then(()=>{
             setTimeout(()=>{
@@ -65,14 +52,7 @@ const App = (props)=>{
         },
         children: [
             !disableToaster && true !== appFlags.customToaster && /*#__PURE__*/ jsx(Toaster, {}),
-            'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(MiaodaInspector, {
-                theme: {
-                    themeMetaOptions: themeMetaOptions,
-                    themeColorTokenMap: themeColorTokenMap,
-                    themeToken
-                },
-                cwd: process.env.CWD || ''
-            }),
+            'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(MiaodaInspector, {}),
             'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(IframeBridge, {}),
             /*#__PURE__*/ jsx(PageHoc, {
                 children: props.children
@@ -81,7 +61,7 @@ const App = (props)=>{
     });
 };
 const AppContainer_AppContainer = (props)=>{
-    const { children, ...rest } = props;
+    const { children } = props;
     const [cssColors, setCssColors] = useState(()=>({
             background: readCssVarColor('--background'),
             destructive: readCssVarColor('--destructive'),
@@ -209,7 +189,6 @@ const AppContainer_AppContainer = (props)=>{
                         }
                     },
                     children: /*#__PURE__*/ jsx(App, {
-                        themeMeta: props.themeMeta,
                         enableAuth: props.enableAuth,
                         disableToaster: props.disableToaster,
                         children: children

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

@@ -1,3 +1,2 @@
 export * from './constants';
 export * from './util';
-export * from './ui-config';

package/lib/components/theme/index.js

@@ -1,3 +1,2 @@
 export * from "./constants.js";
 export * from "./util.js";
-export * from "./ui-config.js";

package/lib/components/theme/util.d.ts

@@ -1,5 +1,4 @@
 import { ITheme } from "../../types";
-import { UIComponentConfig } from "./ui-config";
 export interface IBaseThemeProviderProps {
     defaultTheme?: ITheme;
     themeMeta?: Partial<IThemeTokenMeta>;
@@ -18,4 +17,3 @@ export interface IThemeTokenMeta {
      */
     spacing: number;
 }
-export declare const generateTailwindRadiusToken: (radiusRemValue: number) => UIComponentConfig;

package/lib/components/theme/util.js

@@ -1,108 +0,0 @@
-const generateTailwindRadiusToken = (radiusRemValue)=>{
-    try {
-        const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        const radiusPx = radiusRemValue * rootFontSize;
-        const tempElement = document.createElement('div');
-        tempElement.style.position = 'absolute';
-        tempElement.style.visibility = 'hidden';
-        document.body.appendChild(tempElement);
-        tempElement.style.borderRadius = `${radiusPx}px`;
-        const computed = getComputedStyle(tempElement).borderRadius;
-        document.body.removeChild(tempElement);
-        if (computed && 'auto' !== computed && 'initial' !== computed) return {
-            type: 'select',
-            options: [
-                {
-                    value: 'rounded-none',
-                    label: 'none（0px）',
-                    rawValue: '0'
-                },
-                {
-                    value: 'rounded-sm',
-                    label: `sm (${Math.max(0, radiusPx - 4)}px)`,
-                    rawValue: `${Math.max(0, radiusPx - 4)}`
-                },
-                {
-                    value: 'rounded',
-                    label: 's (4px)',
-                    rawValue: '4'
-                },
-                {
-                    value: 'rounded-md',
-                    label: `m (${Math.max(0, radiusPx - 2)}px)`,
-                    rawValue: `${Math.max(0, radiusPx - 2)}`
-                },
-                {
-                    value: 'rounded-lg',
-                    label: `l (${radiusPx}px)`,
-                    rawValue: `${radiusPx}`
-                },
-                {
-                    value: 'rounded-xl',
-                    label: `xl (${radiusPx + 4}px)`,
-                    rawValue: `${radiusPx + 4}`
-                },
-                {
-                    value: 'rounded-2xl',
-                    label: '2xl (16px)',
-                    rawValue: '16'
-                },
-                {
-                    value: 'rounded-full',
-                    label: 'Full',
-                    rawValue: '9999'
-                }
-            ]
-        };
-        throw new Error('Browser calculation validation failed');
-    } catch (error) {
-        console.warn('Failed to get computed values from browser, falling back to default calculation:', error);
-        const radiusPx = 16 * radiusRemValue;
-        return {
-            type: 'select',
-            options: [
-                {
-                    value: 'rounded-none',
-                    label: 'none（0px）',
-                    rawValue: '0'
-                },
-                {
-                    value: 'rounded-sm',
-                    label: `sm (${Math.max(0, radiusPx - 4)}px)`,
-                    rawValue: `${Math.max(0, radiusPx - 4)}`
-                },
-                {
-                    value: 'rounded',
-                    label: 's (4px)',
-                    rawValue: '4'
-                },
-                {
-                    value: 'rounded-md',
-                    label: `m (${Math.max(0, radiusPx - 2)}px)`,
-                    rawValue: `${Math.max(0, radiusPx - 2)}`
-                },
-                {
-                    value: 'rounded-lg',
-                    label: `l (${radiusPx}px)`,
-                    rawValue: `${radiusPx}`
-                },
-                {
-                    value: 'rounded-xl',
-                    label: `xl (${radiusPx + 4}px)`,
-                    rawValue: `${radiusPx + 4}`
-                },
-                {
-                    value: 'rounded-2xl',
-                    label: '2xl (16px)',
-                    rawValue: '16'
-                },
-                {
-                    value: 'rounded-full',
-                    label: 'Full',
-                    rawValue: '9999'
-                }
-            ]
-        };
-    }
-};
-export { generateTailwindRadiusToken };

package/lib/runtime/index.d.ts

@@ -15,6 +15,7 @@
  * - 使用 __FULLSTACK_RUNTIME_INITIALIZED__ 标志位防止重复初始化
  * - 旧版 AppContainer 和新版 runtime 可以共存
  */
+import './react-devtools-hook';
 import './styles';
 declare global {
     interface Window {

package/lib/runtime/index.js

@@ -1,3 +1,4 @@
+import "./react-devtools-hook.js";
 import "./styles.js";
 import { registerDayjsPlugins } from "./dayjs.js";
 import { initAxiosConfig } from "./axios.js";

package/lib/runtime/react-devtools-hook.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Inject minimal __REACT_DEVTOOLS_GLOBAL_HOOK__ before React loads.
+ * React checks for this hook during module initialization and registers its
+ * renderer via hook.inject(). This gives us access to renderer.overrideProps()
+ * for live component prop modification in the inspector.
+ *
+ * Must execute before React's module-level code runs.
+ *
+ * When react-refresh-runtime runs first (as an rspack runtime module),
+ * it may create __REACT_DEVTOOLS_GLOBAL_HOOK__ with an inject() that
+ * doesn't populate the renderers Map. We patch the existing hook to
+ * ensure renderers are always tracked.
+ */
+export {};
+declare global {
+    interface Window {
+        __REACT_DEVTOOLS_GLOBAL_HOOK__?: any;
+    }
+}

package/lib/runtime/react-devtools-hook.js

@@ -0,0 +1,20 @@
+if ('undefined' != typeof window && 'production' !== process.env.NODE_ENV) if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!(hook.renderers instanceof Map)) hook.renderers = new Map();
+    const originalInject = 'function' == typeof hook.inject ? hook.inject.bind(hook) : null;
+    hook.inject = function(renderer) {
+        const id = originalInject ? originalInject(renderer) : hook.renderers.size + 1;
+        if (null != id && !hook.renderers.has(id)) hook.renderers.set(id, renderer);
+        return id;
+    };
+} else window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+    renderers: new Map(),
+    supportsFiber: true,
+    inject (renderer) {
+        const id = this.renderers.size + 1;
+        this.renderers.set(id, renderer);
+        return id;
+    },
+    onCommitFiberRoot () {},
+    onCommitFiberUnmount () {}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.9-beta.24",
+  "version": "1.2.9-beta.26",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -93,10 +93,10 @@
   "dependencies": {
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
-    "@data-loom/js": "0.4.8",
+    "@data-loom/js": "0.4.7",
     "@lark-apaas/auth-sdk": "^0.1.0",
     "@lark-apaas/client-capability": "^0.1.4",
-    "@lark-apaas/miaoda-inspector": "^1.0.16",
+    "@lark-apaas/miaoda-inspector": "1.0.13-beta.10",
     "@lark-apaas/observable-web": "^1.0.1",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",

package/lib/components/theme/ui-config.d.ts

@@ -1 +0,0 @@
-export { defaultUIConfig, type UIComponentConfig, } from '@lark-apaas/miaoda-inspector';

package/lib/components/theme/ui-config.js

@@ -1,2 +0,0 @@
-import { defaultUIConfig } from "@lark-apaas/miaoda-inspector";
-export { defaultUIConfig };