@lark-apaas/client-toolkit 0.1.0-alpha.1

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

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

package/lib/components/AppContainer/IframeBridge.js

@@ -0,0 +1,92 @@
+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 { postMessage } from "../../utils/postMessage.js";
+import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { childApi } from "./utils/childApi.js";
+import "./utils/listenHot.js";
+import "./LogInterceptor.js";
+var IframeBridge_RouteMessageType = /*#__PURE__*/ function(RouteMessageType) {
+    RouteMessageType["RouteChange"] = "RouteChange";
+    RouteMessageType["RouteBack"] = "RouteBack";
+    RouteMessageType["RouteForward"] = "RouteForward";
+    return RouteMessageType;
+}(IframeBridge_RouteMessageType || {});
+function isRouteMessageType(type) {
+    return Object.values(IframeBridge_RouteMessageType).includes(type);
+}
+async function connectParent() {
+    postMessage({
+        type: 'PreviewReady',
+        data: {}
+    });
+    const connection = connectToParent({
+        parentOrigin: getPreviewParentOrigin(),
+        methods: {
+            ...childApi
+        }
+    });
+    await connection.promise;
+}
+'production' !== process.env.NODE_ENV && connectParent();
+function IframeBridge() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const navigateRef = useUpdatingRef(navigate);
+    const isActive = useRef(false);
+    const historyBack = useCallback(()=>{
+        navigateRef.current(-1);
+        isActive.current = true;
+    }, [
+        navigateRef
+    ]);
+    const historyForward = useCallback(()=>{
+        navigateRef.current(1);
+        isActive.current = true;
+    }, [
+        navigateRef
+    ]);
+    const operatorMessage = useMemo(()=>({
+            ["RouteBack"]: historyBack,
+            ["RouteForward"]: historyForward,
+            ["RouteChange"]: navigateRef.current
+        }), [
+        historyBack,
+        historyForward,
+        navigateRef
+    ]);
+    useEffect(()=>{
+        if (isActive.current) {
+            isActive.current = false;
+            return;
+        }
+        postMessage({
+            type: 'ChildLocationChange',
+            data: location
+        });
+    }, [
+        location
+    ]);
+    const handleMessage = useCallback((event)=>{
+        const { data } = event;
+        if (isRouteMessageType(data?.type)) operatorMessage[data?.type](data?.data);
+    }, [
+        operatorMessage
+    ]);
+    useEffect(()=>{
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        handleMessage
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            display: 'none'
+        }
+    });
+}
+export { IframeBridge as default };

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

@@ -0,0 +1 @@
+export {};

package/lib/components/AppContainer/LogInterceptor.js

@@ -0,0 +1,44 @@
+import { postMessage } from "../../utils/postMessage.js";
+const PROXY_CONSOLE_METHOD = [
+    'log',
+    'info',
+    'warn',
+    'error'
+];
+const LOG_FILTER_PREFIX = [
+    '[Dataloom]',
+    '[MiaoDa]'
+];
+const initHandleError = ()=>{
+    window.onerror = (message, source, lineno, colno, error)=>{
+        const errorList = [];
+        if (error) errorList.push(error);
+        else {
+            if ('string' == typeof message && [
+                'Script error.'
+            ].includes(message)) return;
+            if (message) errorList.push(message);
+            else if (source) errorList.push(source);
+        }
+        console.error('[MiaoDa]', ...errorList);
+    };
+};
+const initLogInterceptor = ()=>{
+    PROXY_CONSOLE_METHOD.forEach((method)=>{
+        const originalMethod = window.console[method];
+        window.console[method] = (...args)=>{
+            originalMethod(...args);
+            const log = args[0];
+            if ('string' == typeof log && LOG_FILTER_PREFIX.some((prefix)=>log.startsWith(prefix))) postMessage({
+                type: 'Console',
+                method,
+                data: args
+            });
+        };
+    });
+};
+function init() {
+    initHandleError();
+    initLogInterceptor();
+}
+'production' !== process.env.NODE_ENV && init();

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

@@ -0,0 +1,4 @@
+import React, { ReactNode } from 'react';
+export declare function PageHoc(props: {
+    children: ReactNode;
+}): React.JSX.Element;

package/lib/components/AppContainer/PageHoc.js

@@ -0,0 +1,30 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { snapdom } from "@zumer/snapdom";
+import { postMessage } from "../../utils/postMessage.js";
+function PageHoc(props) {
+    const { children } = props;
+    useEffect(()=>{
+        if ('production' !== process.env.NODE_ENV) {
+            const timer = setTimeout(()=>{
+                snapdom(document.body, {
+                    format: 'png',
+                    width: document.body.scrollWidth,
+                    height: document.body.scrollHeight,
+                    backgroundColor: '#ffffff'
+                }).then(async (res)=>{
+                    const imgEle = await res.toPng();
+                    postMessage({
+                        type: 'PageScreenshot',
+                        data: imgEle.src
+                    });
+                });
+            }, 1000);
+            return ()=>clearTimeout(timer);
+        }
+    }, []);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+}
+export { PageHoc };

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

@@ -0,0 +1 @@
+export declare function registerDayjsPlugins(): void;

package/lib/components/AppContainer/dayjsPlugins.js

@@ -0,0 +1,69 @@
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import arraySupport from "dayjs/plugin/arraySupport";
+import calendar from "dayjs/plugin/calendar";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import dayOfYear from "dayjs/plugin/dayOfYear";
+import duration from "dayjs/plugin/duration";
+import isBetween from "dayjs/plugin/isBetween";
+import isLeapYear from "dayjs/plugin/isLeapYear";
+import isMoment from "dayjs/plugin/isMoment";
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
+import isToday from "dayjs/plugin/isToday";
+import isTomorrow from "dayjs/plugin/isTomorrow";
+import isYesterday from "dayjs/plugin/isYesterday";
+import isoWeek from "dayjs/plugin/isoWeek";
+import isoWeeksInYear from "dayjs/plugin/isoWeeksInYear";
+import localeData from "dayjs/plugin/localeData";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import minMax from "dayjs/plugin/minMax";
+import negativeYear from "dayjs/plugin/negativeYear";
+import objectSupport from "dayjs/plugin/objectSupport";
+import pluralGetSet from "dayjs/plugin/pluralGetSet";
+import preParsePostFormat from "dayjs/plugin/preParsePostFormat";
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+import relativeTime from "dayjs/plugin/relativeTime";
+import toArray from "dayjs/plugin/toArray";
+import toObject from "dayjs/plugin/toObject";
+import updateLocale from "dayjs/plugin/updateLocale";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+import weekYear from "dayjs/plugin/weekYear";
+import weekday from "dayjs/plugin/weekday";
+let isRegistered = false;
+function registerDayjsPlugins() {
+    if (isRegistered) return;
+    isRegistered = true;
+    dayjs.extend(advancedFormat);
+    dayjs.extend(arraySupport);
+    dayjs.extend(calendar);
+    dayjs.extend(customParseFormat);
+    dayjs.extend(dayOfYear);
+    dayjs.extend(duration);
+    dayjs.extend(isBetween);
+    dayjs.extend(isLeapYear);
+    dayjs.extend(isMoment);
+    dayjs.extend(isSameOrAfter);
+    dayjs.extend(isSameOrBefore);
+    dayjs.extend(isToday);
+    dayjs.extend(isTomorrow);
+    dayjs.extend(isYesterday);
+    dayjs.extend(isoWeek);
+    dayjs.extend(isoWeeksInYear);
+    dayjs.extend(localeData);
+    dayjs.extend(localizedFormat);
+    dayjs.extend(minMax);
+    dayjs.extend(negativeYear);
+    dayjs.extend(objectSupport);
+    dayjs.extend(pluralGetSet);
+    dayjs.extend(preParsePostFormat);
+    dayjs.extend(quarterOfYear);
+    dayjs.extend(relativeTime);
+    dayjs.extend(toArray);
+    dayjs.extend(toObject);
+    dayjs.extend(updateLocale);
+    dayjs.extend(weekOfYear);
+    dayjs.extend(weekYear);
+    dayjs.extend(weekday);
+}
+export { registerDayjsPlugins };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IBaseThemeProviderProps } from '../theme';
+import '../../index.css';
+declare const AppContainer: React.FC<{
+    children: React.ReactNode;
+} & IBaseThemeProviderProps>;
+export default AppContainer;

package/lib/components/AppContainer/index.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { StyleProvider } from "@ant-design/cssinjs";
+import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
+import IframeBridge from "./IframeBridge.js";
+import { defaultUIConfig } from "../theme/ui-config.js";
+import { Toaster } from "./sonner.js";
+import { PageHoc } from "./PageHoc.js";
+import { ThemeProvider, findValueByPixel, generateTailwindRadiusToken, themeColorTokenMap, themeMetaOptions } from "../theme/index.js";
+import { registerDayjsPlugins } from "./dayjsPlugins.js";
+import "../../index.css";
+registerDayjsPlugins();
+const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
+const App = (props)=>{
+    const { themeMeta = {} } = props;
+    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(()=>{
+                const match = document.cookie.match(/lgw_csrf_token=([^;]+)/);
+                if (match) window.lgw_csrf_token = match[1];
+            }, 300);
+        });
+    }, []);
+    return /*#__PURE__*/ jsxs(StyleProvider, {
+        layer: true,
+        children: [
+            /*#__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(IframeBridge, {}),
+            /*#__PURE__*/ jsx(PageHoc, {
+                children: props.children
+            })
+        ]
+    });
+};
+const AppContainer = (props)=>{
+    const { children, ...rest } = props;
+    return /*#__PURE__*/ jsx(ThemeProvider, {
+        ...rest,
+        children: /*#__PURE__*/ jsx(App, {
+            themeMeta: props.themeMeta,
+            children: children
+        })
+    });
+};
+const components_AppContainer = AppContainer;
+export { components_AppContainer as default };

package/lib/components/AppContainer/sonner.css

@@ -0,0 +1,101 @@
+:root {
+  --ud-normal-bg: #fff;
+  --ud-normal-border: #dee0e3;
+  --ud-normal-text: #1f2329;
+  --ud-success-bg: #e4fae1;
+  --ud-success-border: #32a645;
+  --ud-success-text: #1f2329;
+  --ud-info-bg: #f0f4ff;
+  --ud-info-border: #1456f0;
+  --ud-info-text: #1f2329;
+  --ud-warning-bg: #fff3e5;
+  --ud-warning-border: #ed6d0c;
+  --ud-warning-text: #1f2329;
+  --ud-error-bg: #fef0f0;
+  --ud-error-border: #f54a45;
+  --ud-error-text: #1f2329;
+}
+
+[data-sonner-toast][data-styled="true"] [data-button] {
+  background: var(--ud-info-border);
+}
+
+[data-sonner-toaster][data-sonner-theme="dark"] [data-sonner-toast] [data-close-button] {
+  background: var(--ud-normal-bg);
+  border-color: var(--ud-normal-border);
+  color: var(--ud-normal-text);
+}
+
+[data-sonner-toaster][data-sonner-theme="dark"] [data-sonner-toast] [data-close-button]:hover {
+  background: var(--ud-normal-bg-hover);
+  border-color: var(--ud-normal-border-hover);
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="success"] {
+  background: var(--ud-success-bg);
+  border-color: var(--ud-success-border);
+  color: var(--ud-success-text);
+
+  & [data-icon] {
+    color: var(--ud-success-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="success"] [data-close-button] {
+  background: var(--ud-success-bg);
+  border-color: var(--ud-success-border);
+  color: var(--ud-success-text);
+
+  & [data-icon] {
+    color: var(--ud-success-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="info"] {
+  background: var(--ud-info-bg);
+  border-color: var(--ud-info-border);
+  color: var(--ud-info-text);
+
+  & [data-icon] {
+    color: var(--ud-info-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="info"] [data-close-button] {
+  background: var(--ud-info-bg);
+  border-color: var(--ud-info-border);
+  color: var(--ud-info-text);
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="warning"] {
+  background: var(--ud-warning-bg);
+  border-color: var(--ud-warning-border);
+  color: var(--ud-warning-text);
+
+  & [data-icon] {
+    color: var(--ud-warning-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="warning"] [data-close-button] {
+  background: var(--ud-warning-bg);
+  border-color: var(--ud-warning-border);
+  color: var(--ud-warning-text);
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="error"] {
+  background: var(--ud-error-bg);
+  border-color: var(--ud-error-border);
+  color: var(--ud-error-text);
+
+  & [data-icon] {
+    color: var(--ud-error-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="error"] [data-close-button] {
+  background: var(--ud-error-bg);
+  border-color: var(--ud-error-border);
+  color: var(--ud-error-text);
+}
+

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { toast } from 'sonner';
+import './sonner.css';
+/**
+ * 配置全局 Sonner Container 的入口
+ */
+declare const Toaster: ({ ...props }: any) => React.JSX.Element;
+export { Toaster, toast };

package/lib/components/AppContainer/sonner.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Toaster, toast } from "sonner";
+import "./sonner.css";
+import { useTheme } from "../../hooks/index.js";
+const sonner_Toaster = ({ ...props })=>{
+    const { theme } = useTheme();
+    return /*#__PURE__*/ jsx(Toaster, {
+        theme: theme,
+        className: "toaster group",
+        style: {
+            top: 70
+        },
+        position: "top-center",
+        richColors: true,
+        toastOptions: {
+            classNames: {
+                description: 'group-[.toast]:text-muted-foreground',
+                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+            }
+        },
+        ...props
+    });
+};
+export { sonner_Toaster as Toaster, toast };

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

@@ -0,0 +1,5 @@
+import { ChildApi } from '../../../types/iframe-events';
+/**
+ * 子级方法，提供给父级调用
+ */
+export declare const childApi: ChildApi;

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

@@ -0,0 +1,20 @@
+import { normalizeBasePath } from "../../../utils/utils.js";
+async function getRoutes() {
+    let routes = [
+        {
+            path: '/'
+        }
+    ];
+    try {
+        const basePath = normalizeBasePath(process.env.CLIENT_BASE_PATH);
+        const res = await fetch(`${basePath}/routes.json`);
+        routes = await res.json();
+    } catch (error) {
+        console.warn('get routes.json error', error);
+    }
+    return routes;
+}
+const childApi = {
+    getRoutes
+};
+export { childApi };

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

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

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

@@ -0,0 +1,43 @@
+import sockjs_client from "sockjs-client";
+import { postMessage } from "../../../utils/postMessage.js";
+import { getWsPath } from "../../../utils/utils.js";
+let hotInited = false;
+function handleDevServerMessage(msg) {
+    if ('hash' === msg.type) {
+        if (!hotInited) {
+            hotInited = true;
+            return;
+        }
+        postMessage({
+            type: 'HmrMessage',
+            msg: {
+                type: 'hot'
+            },
+            data: null
+        });
+    } else if ('errors' === msg.type) postMessage({
+        type: 'HmrMessage',
+        msg: {
+            type: 'errors',
+            data: JSON.stringify(msg.data)
+        },
+        data: null
+    });
+}
+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 };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const RenderError: React.FC<{
+    error: Error;
+}>;
+export default RenderError;

package/lib/components/ErrorRender/index.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { Button } from "antd";
+import { postMessage } from "../../utils/postMessage.js";
+import { copyToClipboard } from "../../utils/copyToClipboard.js";
+const RenderError = (props)=>{
+    const { error } = props;
+    const location = useLocation();
+    const onClickCopy = useCallback(()=>{
+        const { message, stack } = error ?? {};
+        let result = error;
+        if (message && stack) {
+            const wrapIndex = stack.indexOf('\n');
+            const extraMsg = -1 !== wrapIndex ? stack.slice(0, wrapIndex) : stack;
+            result = `${message}
+  ${extraMsg}`;
+        }
+        copyToClipboard(result);
+    }, [
+        error
+    ]);
+    const onClickRepair = useCallback(()=>{
+        postMessage({
+            type: 'RenderErrorRepair',
+            data: props.error
+        });
+    }, [
+        props
+    ]);
+    useEffect(()=>{
+        if (props.error) postMessage({
+            type: 'RenderError',
+            data: props.error,
+            location: location
+        });
+    }, [
+        props.error,
+        location
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "min-h-screen flex items-center justify-center bg-gray-100",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "flex flex-col justify-center items-center text-center",
+            children: [
+                /*#__PURE__*/ jsx("img", {
+                    src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/render_error.svg",
+                    alt: "render error",
+                    className: "mb-4 w-[120px]"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-l/[22px] text-[#1F2329] font-medium mb-2",
+                    children: "哎呀，写错代码了"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-sm/[22px] text-[#646A73] font-normal mb-2",
+                    children: "可复制错误信息，或告诉妙搭进行修复"
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex space-x-4",
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            className: "bg-white text-gray-600 font-[400] border rounded-[6px] shadow-xs hover:bg-gray-100 active:bg-gray-200 focus:outline-hidden h-[32px] border-[#D0D3D6]",
+                            onClick: onClickCopy,
+                            children: "复制错误信息"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            className: "h-[32px] text-sm font-medium text-white bg-blue-600 border border-transparent rounded-[6px] shadow-xs hover:bg-blue-600 active:bg-blue-700 focus:outline-hidden ",
+                            onClick: onClickRepair,
+                            children: "告诉妙搭修复"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ErrorRender = RenderError;
+export { ErrorRender as default };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NotFound: () => React.JSX.Element;
+export default NotFound;