@lark-apaas/client-toolkit 1.2.28-alpha.72 → 1.2.28-alpha.73

package/lib/components/AppContainer/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import react, { Suspense, useEffect, useMemo, useState } from "react";
 import { ConfigProvider } from "antd";
 import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
 import zh_CN from "antd/locale/zh_CN";
@@ -10,20 +10,33 @@ import { reportTeaEvent } from "./utils/tea.js";
 import { useAppInfo } from "../../hooks/index.js";
 import { TrackKey } from "../../types/tea.js";
 import { slardar } from "@lark-apaas/internal-slardar";
-import safety from "./safety.js";
 import { getAppId } from "../../utils/getAppId.js";
 import { isNewPathEnabled } from "../../utils/apiPath.js";
 import QueryProvider from "../QueryProvider/index.js";
 import { AuthProvider } from "@lark-apaas/auth-sdk";
 import "../../runtime/index.js";
+const Safety = /*#__PURE__*/ react.lazy(()=>import("./safety.js"));
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
-const readCssVarColor = (varName, fallback)=>{
+const readAllCssVarColors = ()=>{
     try {
-        if ('undefined' == typeof document) return fallback;
-        const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-        return value || fallback;
+        if ('undefined' == typeof document) return {};
+        const styles = getComputedStyle(document.documentElement);
+        const read = (name)=>styles.getPropertyValue(name).trim() || void 0;
+        return {
+            background: read('--background'),
+            destructive: read('--destructive'),
+            primary: read('--primary'),
+            foreground: read('--foreground'),
+            warning: read('--warning'),
+            success: read('--success'),
+            muted: read('--muted'),
+            mutedForeground: read('--muted-foreground'),
+            border: read('--border'),
+            popover: read('--popover'),
+            accent: read('--accent')
+        };
     } catch  {
-        return fallback;
+        return {};
     }
 };
 const appFlags = process.env.APP_FLAGS || {};
@@ -69,13 +82,17 @@ const App = (props)=>{
     }, []);
     const appId = getAppId();
     const permissionApiUrl = isNewPathEnabled() ? `/app/${appId}/__runtime__/api/v1/permissions/roles` : `/spark/app/${appId}/runtime/api/v1/permissions/roles`;
-    return /*#__PURE__*/ jsxs(AuthProvider, {
-        config: {
+    const authConfig = useMemo(()=>({
             enable: enableAuth,
             permissionApi: {
                 url: permissionApiUrl
             }
-        },
+        }), [
+        enableAuth,
+        permissionApiUrl
+    ]);
+    return /*#__PURE__*/ jsxs(AuthProvider, {
+        config: authConfig,
         children: [
             !disableToaster && true !== appFlags.customToaster && /*#__PURE__*/ jsx(Toaster, {}),
             'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(MiaodaInspector, {}),
@@ -88,19 +105,7 @@ const App = (props)=>{
 };
 const AppContainer_AppContainer = (props)=>{
     const { children } = props;
-    const [cssColors, setCssColors] = useState(()=>({
-            background: readCssVarColor('--background'),
-            destructive: readCssVarColor('--destructive'),
-            primary: readCssVarColor('--primary'),
-            foreground: readCssVarColor('--foreground'),
-            warning: readCssVarColor('--warning'),
-            success: readCssVarColor('--success'),
-            muted: readCssVarColor('--muted'),
-            mutedForeground: readCssVarColor('--muted-foreground'),
-            border: readCssVarColor('--border'),
-            popover: readCssVarColor('--popover'),
-            accent: readCssVarColor('--accent')
-        }));
+    const [cssColors, setCssColors] = useState(readAllCssVarColors);
     useEffect(()=>{
         if ('production' === process.env.NODE_ENV) return ()=>{};
         const observer = new MutationObserver((mutations)=>{
@@ -119,19 +124,7 @@ const AppContainer_AppContainer = (props)=>{
                     const maxRetries = 10;
                     const retryDelay = 400;
                     const updateColors = ()=>{
-                        const newColors = {
-                            background: readCssVarColor('--background'),
-                            destructive: readCssVarColor('--destructive'),
-                            primary: readCssVarColor('--primary'),
-                            foreground: readCssVarColor('--foreground'),
-                            warning: readCssVarColor('--warning'),
-                            success: readCssVarColor('--success'),
-                            muted: readCssVarColor('--muted'),
-                            mutedForeground: readCssVarColor('--muted-foreground'),
-                            border: readCssVarColor('--border'),
-                            popover: readCssVarColor('--popover'),
-                            accent: readCssVarColor('--accent')
-                        };
+                        const newColors = readAllCssVarColors();
                         setCssColors((currentColors)=>{
                             if (JSON.stringify(currentColors) !== JSON.stringify(newColors)) {
                                 retryCount = 0;
@@ -203,7 +196,10 @@ const AppContainer_AppContainer = (props)=>{
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(safety, {}),
+            /*#__PURE__*/ jsx(Suspense, {
+                fallback: null,
+                children: /*#__PURE__*/ jsx(Safety, {})
+            }),
             /*#__PURE__*/ jsx(QueryProvider, {
                 children: /*#__PURE__*/ jsx(ConfigProvider, {
                     locale: zh_CN,

package/lib/components/AppContainer/safety.js

@@ -1,9 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
-import { getCsrfToken } from "../../utils/getCsrfToken.js";
 import { getAppId } from "../../utils/getAppId.js";
-import { isNewPathEnabled } from "../../utils/apiPath.js";
 import { useIsMobile } from "../../hooks/index.js";
 import { X } from "lucide-react";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/drawer.js";
@@ -13,35 +11,11 @@ const Component = ()=>{
     const [visible, setVisible] = useState(!window.localStorage?.getItem(HasClosedKey));
     const [open, setOpen] = useState(false);
     const isMobile = useIsMobile();
-    const [userinfo, setUserinfo] = useState(null);
-    const [isInternetVisible, setIsInternetVisible] = useState(false);
-    const [showBadge, setShowBadge] = useState(true);
-    const [badgeLoaded, setBadgeLoaded] = useState(false);
     const timeoutRef = useRef(null);
-    useEffect(()=>{
-        const appId = getAppId();
-        const csrfHeaders = {
-            'X-Suda-Csrf-Token': getCsrfToken()
-        };
-        const tenantInfoUrl = isNewPathEnabled() ? `/app/${appId}/__runtime__/api/v1/studio/tenant_info` : `/spark/b/${appId}/tenant_info`;
-        fetch(tenantInfoUrl, {
-            headers: csrfHeaders
-        }).then((res)=>res.json()).then((data)=>{
-            setUserinfo(data?.data?.tenant_info);
-            setIsInternetVisible(data?.data?.is_internet_visible);
-        }).catch(()=>{});
-        const getPublishedUrl = isNewPathEnabled() ? `/app/${appId}/__runtime__/api/v1/studio/get_published` : `/spark/b/${appId}/get_published`;
-        fetch(getPublishedUrl, {
-            headers: csrfHeaders
-        }).then((res)=>res.json()).then((data)=>{
-            const badge = data?.data?.app_info?.show_badge;
-            setShowBadge(false !== badge);
-        }).catch(()=>{
-            setShowBadge(true);
-        }).finally(()=>{
-            setBadgeLoaded(true);
-        });
-    }, []);
+    const platformData = window.__platform__ ?? {};
+    const tenantName = platformData.tenantName ?? '';
+    const isInternetVisible = platformData.isInternetVisible ?? false;
+    const showBadge = false !== platformData.showBadge;
     useEffect(()=>{
         if (isMobile) {
             const link = document.createElement('link');
@@ -54,7 +28,6 @@ const Component = ()=>{
         isMobile
     ]);
     if ('production' !== process.env.NODE_ENV) return null;
-    if (!badgeLoaded) return null;
     if (!showBadge) return null;
     if (!visible) return null;
     if (isMobile) return /*#__PURE__*/ jsxs(Sheet, {
@@ -114,7 +87,7 @@ const Component = ()=>{
                                                 /*#__PURE__*/ jsx("p", {
                                                     className: "shrink-0 min-w-[96px] m-0! text-[#646A73] text-sm",
                                                     children: t('safety.tenant.operated', {
-                                                        name: userinfo?.name ?? ''
+                                                        name: tenantName
                                                     })
                                                 })
                                             ]
@@ -233,7 +206,7 @@ const Component = ()=>{
                                                 /*#__PURE__*/ jsx("p", {
                                                     className: "shrink-0 min-w-[96px] m-0! text-[#a6a6a6]",
                                                     children: t('safety.tenant.operated', {
-                                                        name: userinfo?.name ?? ''
+                                                        name: tenantName
                                                     })
                                                 })
                                             ]

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

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const RenderError: React.FC<{
-    error: Error;
-    resetErrorBoundary?: () => void;
+    error: unknown;
+    resetErrorBoundary?: (...args: unknown[]) => void;
 }>;
 export default RenderError;

package/lib/utils/getInitialInfo.js

@@ -24,10 +24,24 @@ async function getAppPublished() {
         console.error('Error fetching published app info:', error);
     }
 }
+function getPreloadedInfo() {
+    try {
+        const platformData = window.__platform__?.appPublished;
+        if (platformData && 'object' == typeof platformData) return platformData;
+    } catch  {}
+}
 let initialInfo;
 let pendingPromise = null;
 function getInitialInfo(refresh = false) {
     if (initialInfo && !refresh) return Promise.resolve(initialInfo);
+    if (!initialInfo && !refresh) {
+        const preloaded = getPreloadedInfo();
+        if (preloaded) {
+            initialInfo = preloaded;
+            if (initialInfo) window._bucket_id = initialInfo.app_runtime_extra?.bucket?.default_bucket_id;
+            return Promise.resolve(initialInfo);
+        }
+    }
     if (pendingPromise && !refresh) return pendingPromise;
     pendingPromise = getAppPublished().then((info)=>{
         initialInfo = info;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.2.28-alpha.72",
+  "version": "1.2.28-alpha.73",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [