@lark-apaas/miaoda-core 0.1.0-alpha.1 → 0.1.0-alpha.11

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

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

package/lib/components/AppContainer/IframeBridge.js

@@ -1,16 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
 import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
-var IframeBridge_MessageType = /*#__PURE__*/ function(MessageType) {
-    MessageType["RouteChange"] = "RouteChange";
-    MessageType["RouteBack"] = "RouteBack";
-    MessageType["RouteForward"] = "RouteForward";
-    return MessageType;
-}(IframeBridge_MessageType || {});
-function isMessageType(type) {
-    return Object.values(IframeBridge_MessageType).includes(type);
+import { isIncomingMessage, postMessage } from "../../utils/postMessage.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);
 }
 function IframeBridge() {
     const location = useLocation();
@@ -39,27 +40,46 @@ function IframeBridge() {
         navigateRef
     ]);
     useEffect(()=>{
-        window.parent.postMessage({
-            type: 'PreviewReady'
-        }, getPreviewParentOrigin());
+        postMessage({
+            type: 'PreviewReady',
+            data: {}
+        });
     }, []);
     useEffect(()=>{
         if (isActive.current) {
             isActive.current = false;
             return;
         }
-        window.parent.postMessage({
+        postMessage({
             type: 'ChildLocationChange',
             data: location
-        }, getPreviewParentOrigin());
+        });
     }, [
         location
     ]);
+    const handleGetRoutes = useUpdatingRef(async ()=>{
+        let routes = [
+            {
+                path: '/'
+            }
+        ];
+        try {
+            const res = await fetch('/routes.json');
+            routes = await res.json();
+        } catch (error) {
+            console.warn('get routes.json error', error);
+        }
+        postMessage({
+            type: 'UpdateRoutes',
+            data: {
+                routes
+            }
+        });
+    });
     const handleMessage = useCallback((event)=>{
-        const { data: { data } } = event;
-        const type = data?.type;
-        if (!isMessageType(type)) return;
-        operatorMessage[type](data?.data);
+        const { data } = event;
+        if (isRouteMessageType(data?.type)) operatorMessage[data?.type](data?.data);
+        else if (isIncomingMessage(data, 'GetRoutes')) handleGetRoutes.current();
     }, [
         operatorMessage
     ]);

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.js

@@ -1,17 +1,37 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import html2canvas_pro from "html2canvas-pro";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { postMessage } from "../../utils/postMessage.js";
 function PageHoc(props) {
     const { children } = props;
     useEffect(()=>{
-        if ('production' !== process.env.NODE_ENV) html2canvas_pro(document.body).then((canvas)=>{
-            const base64 = canvas.toDataURL('image/png');
-            window.parent.postMessage({
-                type: 'PageScreenshot',
-                data: base64
-            }, getPreviewParentOrigin());
-        });
+        if ('production' !== process.env.NODE_ENV) setTimeout(()=>{
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const devicePixelRatio = window.devicePixelRatio || 1;
+            const captureWidth = Math.min(viewportWidth, document.documentElement.scrollWidth);
+            const captureHeight = Math.min(viewportHeight, document.documentElement.scrollHeight);
+            html2canvas_pro(document.body, {
+                width: captureWidth,
+                height: captureHeight,
+                scrollX: window.scrollX,
+                scrollY: window.scrollY,
+                useCORS: true,
+                allowTaint: true,
+                backgroundColor: '#ffffff',
+                scale: devicePixelRatio,
+                windowWidth: viewportWidth,
+                windowHeight: viewportHeight
+            }).then((canvas)=>{
+                const base64 = canvas.toDataURL('image/png');
+                postMessage({
+                    type: 'PageScreenshot',
+                    data: base64
+                });
+            }).catch((error)=>{
+                console.error('截图失败:', error);
+            });
+        }, 1000);
     }, []);
     return /*#__PURE__*/ jsx(Fragment, {
         children: children

package/lib/components/ErrorRender/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { Button } from "antd";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { postMessage } from "../../utils/postMessage.js";
 import { copyToClipboard } from "../../utils/copyToClipboard.js";
 const RenderError = (props)=>{
     const { error } = props;
@@ -21,19 +21,19 @@ const RenderError = (props)=>{
         error
     ]);
     const onClickRepair = useCallback(()=>{
-        window.parent.postMessage({
+        postMessage({
             type: 'RenderErrorRepair',
             data: props.error
-        }, getPreviewParentOrigin());
+        });
     }, [
         props
     ]);
     useEffect(()=>{
-        if (props.error) window.parent.postMessage({
+        if (props.error) postMessage({
             type: 'RenderError',
             data: props.error,
             location: location
-        }, getPreviewParentOrigin());
+        });
     }, [
         props.error,
         location

package/lib/components/NotFoundRender/index.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useEffect } from "react";
-import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { postMessage } from "../../utils/postMessage.js";
 import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
 import { logger } from "../../logger/index.js";
 const NotFound = ()=>{
@@ -14,10 +14,10 @@ const NotFound = ()=>{
         location.pathname
     ]);
     const onClick = ()=>{
-        if ('production' !== process.env.NODE_ENV) window.parent.postMessage({
+        if ('production' !== process.env.NODE_ENV) postMessage({
             type: 'CreatePage',
             data: location.pathname
-        }, getPreviewParentOrigin());
+        });
         else navigateRef.current('/');
     };
     return /*#__PURE__*/ jsxs("div", {

package/lib/components/SidebarNav/DrawerNav.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BaseNavProps } from '../../types';
-export default function DrawerNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;
+export default function DrawerNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/DropdownNav.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BaseNavProps } from '../../types';
-export default function DropdownNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;
+export default function DropdownNav({ navList, className, activeClassName, }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/Sidebar.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { NavProps } from '../../types';
-export default function SidebarNav({ activeClassName, className, navList }: NavProps): React.JSX.Element;
+export default function SidebarNav({ activeClassName, className, navList, }: NavProps): React.JSX.Element;

package/lib/components/TopNav/BottomNav.d.ts

@@ -8,5 +8,5 @@ interface BottomNavProps extends BaseNavProps {
     navList: NavItemProps[];
     maxBottomItems?: number;
 }
-export declare function BottomNav({ navList, className, maxBottomItems }: BottomNavProps): React.JSX.Element;
+export declare function BottomNav({ navList, className, maxBottomItems, }: BottomNavProps): React.JSX.Element;
 export {};

package/lib/components/TopNav/TopNav.d.ts

@@ -7,4 +7,4 @@ import { BaseNavProps } from '../../types';
 export interface TopNavProps extends BaseNavProps {
     align?: 'left' | 'center' | 'right';
 }
-export declare function TopNav({ navList, align, className, activeClassName }: TopNavProps): React.JSX.Element;
+export declare function TopNav({ navList, align, className, activeClassName, }: TopNavProps): React.JSX.Element;

package/lib/components/User/UserWithAvatar.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import type { UserWithAvatarProps } from './type';
-export declare function UserWithAvatar({ data, size, mode, className }: UserWithAvatarProps): React.JSX.Element;
+export declare function UserWithAvatar({ data, size, mode, className, }: UserWithAvatarProps): React.JSX.Element;

package/lib/components/common/UserAvatarLayout.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-export default function UserAvatarLayout({ className }: {
+export default function UserAvatarLayout({ className, }: {
     className?: string;
 }): React.JSX.Element;

package/lib/types/iframe-events.d.ts

@@ -0,0 +1,37 @@
+export interface IframeMessage<T = unknown> {
+    type: string;
+    data: T;
+}
+export interface PreviewReadyMessage extends IframeMessage<Record<string, never>> {
+    type: 'PreviewReady';
+}
+export interface ConsoleMessage extends IframeMessage<Record<string, any>> {
+    method: string;
+    type: 'Console';
+}
+export interface ChildLocationChangeMessage extends IframeMessage<any> {
+    type: 'ChildLocationChange';
+}
+export interface CreatePageMessage extends IframeMessage<string> {
+    type: 'CreatePage';
+}
+export interface RenderErrorMessage extends IframeMessage<any> {
+    type: 'RenderError';
+    location?: any;
+}
+export interface RenderErrorRepairMessage extends IframeMessage<any> {
+    type: 'RenderErrorRepair';
+}
+export interface PageScreenshotMessage extends IframeMessage<string> {
+    type: 'PageScreenshot';
+}
+export interface UpdateRoutesMessage extends IframeMessage<{
+    routes: any[];
+}> {
+    type: 'UpdateRoutes';
+}
+export type OutgoingMessage = PreviewReadyMessage | ConsoleMessage | ChildLocationChangeMessage | CreatePageMessage | RenderErrorMessage | RenderErrorRepairMessage | PageScreenshotMessage | UpdateRoutesMessage;
+export interface GetRoutesMessage extends IframeMessage<Record<string, never>> {
+    type: 'GetRoutes';
+}
+export type IncomingMessage = GetRoutesMessage;

package/lib/utils/postMessage.d.ts

@@ -0,0 +1,8 @@
+import { IncomingMessage, OutgoingMessage } from '../types/iframe-events';
+export declare function postMessage<T extends OutgoingMessage>(message: T, targetOrigin?: string): void;
+export declare function isOutgoingMessage<T extends OutgoingMessage['type']>(msg: OutgoingMessage, type: T): msg is Extract<OutgoingMessage, {
+    type: T;
+}>;
+export declare function isIncomingMessage<T extends IncomingMessage['type']>(msg: IncomingMessage, type: T): msg is Extract<IncomingMessage, {
+    type: T;
+}>;

package/lib/utils/postMessage.js

@@ -0,0 +1,11 @@
+import { getPreviewParentOrigin } from "./getParentOrigin.js";
+function postMessage(message, targetOrigin) {
+    window.parent.postMessage(message, targetOrigin ?? getPreviewParentOrigin());
+}
+function isOutgoingMessage(msg, type) {
+    return msg.type === type;
+}
+function isIncomingMessage(msg, type) {
+    return msg.type === type;
+}
+export { isIncomingMessage, isOutgoingMessage, postMessage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/miaoda-core",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.11",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -56,25 +56,9 @@
       "types": "./lib/apis/utils/*.d.ts"
     }
   },
-  "scripts": {
-    "tsc": "tsc --declaration",
-    "build": "rslib build",
-    "build:storybook": "storybook build",
-    "bump": "changeset version",
-    "change": "changeset",
-    "check": "biome check --write",
-    "dev": "rslib build --watch",
-    "format": "biome format --write",
-    "storybook": "storybook dev",
-    "test": "echo 0",
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
-    "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
-    "prepublishOnly": "npm run build"
-  },
   "dependencies": {
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
-    "@lark-apaas/miaoda-inspector": "workspace:*",
     "@data-loom/js": "0.2.3",
     "clsx": "~2.0.1",
     "dayjs": "^1.11.13",
@@ -84,7 +68,8 @@
     "sonner": "~2.0.0",
     "tailwind-merge": "~2.0.0",
     "tailwind-variants": "0.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "@lark-apaas/miaoda-inspector": "0.1.0-alpha.5"
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.6",
@@ -105,10 +90,11 @@
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
+    "typescript-eslint": "^8.41.0",
     "antd": "^5.26.6",
     "eslint": "^8.57.0",
     "jsdom": "^26.1.0",
-    "lucide-react": "^0.541.0",
+    "lucide-react": "npm:@lark-apaas/lucide-react@0.1.0-alpha.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
@@ -122,9 +108,22 @@
   },
   "peerDependencies": {
     "antd": ">=5.26.6",
-    "lucide-react": "^0.541.0",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "react-router-dom": ">=6.26.2"
+  },
+  "scripts": {
+    "tsc": "tsc --declaration",
+    "build": "rslib build",
+    "build:storybook": "storybook build",
+    "bump": "changeset version",
+    "change": "changeset",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "storybook": "storybook dev",
+    "test": "echo 0",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
   }
-}
+}