@blocklet/pages-kit 0.2.195

package/lib/cjs/api/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/api/pages-kit.js

@@ -0,0 +1,26 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponents = void 0;
+const axios_1 = __importDefault(require("axios"));
+const ufo_1 = require("ufo");
+const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
+function getComponents({ mode, name } = {}) {
+    var _a, _b;
+    return __awaiter(this, void 0, void 0, function* () {
+        const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID)) === null || _b === void 0 ? void 0 : _b.mountPoint) || '/';
+        return axios_1.default.get((0, ufo_1.joinURL)(prefix, '/api/components'), { params: { name, mode } }).then((res) => res.data);
+    });
+}
+exports.getComponents = getComponents;

package/lib/cjs/components/CustomComponentRenderer/index.js

@@ -0,0 +1,164 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cache_1 = __importDefault(require("@emotion/cache"));
+const react_1 = require("@emotion/react");
+const material_1 = require("@mui/material");
+const react_2 = require("react");
+const client_1 = __importDefault(require("react-dom/client"));
+const react_error_boundary_1 = require("react-error-boundary");
+const react_frame_component_1 = require("react-frame-component");
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+const CUSTOM_COMPONENT_RENDERER = 'custom-component-renderer';
+const defineCustomElements = (win) => {
+    if (!win.customElements.get(CUSTOM_COMPONENT_RENDERER)) {
+        win.customElements.define(CUSTOM_COMPONENT_RENDERER, class CustomComponentRenderer extends win.HTMLElement {
+            constructor() {
+                super();
+                this.root = this.attachShadow({ mode: 'open' });
+                this.reactRoot = client_1.default.createRoot(this.root);
+            }
+            static get observedAttributes() {
+                return ['component-id'];
+            }
+            get componentId() {
+                return this.getAttribute('component-id');
+            }
+            connectedCallback() {
+                this.setup();
+            }
+            attributeChangedCallback() {
+                this.setup();
+            }
+            setup() {
+                const { subscribe } = customComponentState(this.componentId);
+                subscribe(() => this.render());
+                this.render();
+            }
+            get state() {
+                return Object.assign(Object.assign({}, customComponentState(this.componentId).getState()), { properties: customComponentProperties(this.id).getState().properties });
+            }
+            render() {
+                var _a, _b, _c, _d, _e;
+                return __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const { component, properties: parameters } = this.state;
+                        if (!component)
+                            throw new Error('missing required component config');
+                        let script;
+                        let current = component;
+                        const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => { var _a, _b; return [(_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name, value]; }));
+                        while (current) {
+                            mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => [data.name, data.defaultValue])));
+                            if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
+                                script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
+                                break;
+                            }
+                            if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
+                                const c = customComponentState(current.renderer.componentId).getState()
+                                    .component;
+                                mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { value }]) => {
+                                    var _a, _b;
+                                    return [
+                                        (_b = (_a = c === null || c === void 0 ? void 0 : c.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name,
+                                        value,
+                                    ];
+                                })));
+                                current = c;
+                            }
+                            else {
+                                current = undefined;
+                            }
+                        }
+                        if (!script)
+                            throw new Error('Missing required script');
+                        const cache = (0, cache_1.default)({
+                            key: 'css',
+                            prepend: true,
+                            container: this.root,
+                        });
+                        const url = URL.createObjectURL(new Blob([script], { type: 'application/javascript' }));
+                        const { default: C } = yield Promise.resolve(`${url}`).then(s => __importStar(require(s)));
+                        this.reactRoot.render((0, jsx_runtime_1.jsx)(react_1.CacheProvider, { value: cache, children: (0, jsx_runtime_1.jsx)(C, Object.assign({}, properties)) }));
+                    }
+                    catch (error) {
+                        this.reactRoot.render((0, jsx_runtime_1.jsx)("div", {}));
+                    }
+                });
+            }
+        });
+    }
+};
+const CUSTOM_COMPONENT_STATE_MAP = {};
+const customComponentState = (id, initial) => {
+    var _a;
+    (_a = CUSTOM_COMPONENT_STATE_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_STATE_MAP[id] = (0, zustand_1.create)()((0, immer_1.immer)(() => (Object.assign({}, initial)))));
+    return CUSTOM_COMPONENT_STATE_MAP[id];
+};
+const CUSTOM_COMPONENT_PROPERTIES_MAP = {};
+const customComponentProperties = (id, initial) => {
+    var _a;
+    (_a = CUSTOM_COMPONENT_PROPERTIES_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_PROPERTIES_MAP[id] = (0, zustand_1.create)()((0, immer_1.immer)(() => (Object.assign({}, initial)))));
+    return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
+};
+function CustomComponentRenderer({ id, componentId, components, properties, }) {
+    const frame = (0, react_frame_component_1.useFrame)();
+    components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id, { component }));
+    customComponentProperties(id, { properties });
+    (0, react_2.useEffect)(() => {
+        components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id).setState({ component }));
+        customComponentProperties(id, { properties }).setState({ properties });
+    });
+    (0, react_2.useEffect)(() => {
+        defineCustomElements(frame.window || window);
+    }, [frame]);
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { fallbackRender: E, children: (0, jsx_runtime_1.jsx)("custom-component-renderer", { "component-id": componentId, id: id }) }));
+}
+exports.default = CustomComponentRenderer;
+function E({ error }) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", children: error.message }) }));
+}
+function mergeProperties(properties, newProperties) {
+    for (const [key, val] of Object.entries(newProperties)) {
+        if (properties[key] === undefined || properties[key] === null || properties[key] === '') {
+            properties[key] = val;
+        }
+    }
+    return properties;
+}

package/lib/cjs/components/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomComponentRenderer = void 0;
+var CustomComponentRenderer_1 = require("./CustomComponentRenderer");
+Object.defineProperty(exports, "CustomComponentRenderer", { enumerable: true, get: function () { return __importDefault(CustomComponentRenderer_1).default; } });

package/lib/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/esm/api/index.js

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

package/lib/esm/api/pages-kit.js

@@ -0,0 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import axios from 'axios';
+import { joinURL } from 'ufo';
+const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
+export function getComponents({ mode, name } = {}) {
+    var _a, _b;
+    return __awaiter(this, void 0, void 0, function* () {
+        const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID)) === null || _b === void 0 ? void 0 : _b.mountPoint) || '/';
+        return axios.get(joinURL(prefix, '/api/components'), { params: { name, mode } }).then((res) => res.data);
+    });
+}

package/lib/esm/components/CustomComponentRenderer/index.js

@@ -0,0 +1,135 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { Alert, Box } from '@mui/material';
+import { useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useFrame } from 'react-frame-component';
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+const CUSTOM_COMPONENT_RENDERER = 'custom-component-renderer';
+const defineCustomElements = (win) => {
+    if (!win.customElements.get(CUSTOM_COMPONENT_RENDERER)) {
+        win.customElements.define(CUSTOM_COMPONENT_RENDERER, class CustomComponentRenderer extends win.HTMLElement {
+            constructor() {
+                super();
+                this.root = this.attachShadow({ mode: 'open' });
+                this.reactRoot = ReactDOM.createRoot(this.root);
+            }
+            static get observedAttributes() {
+                return ['component-id'];
+            }
+            get componentId() {
+                return this.getAttribute('component-id');
+            }
+            connectedCallback() {
+                this.setup();
+            }
+            attributeChangedCallback() {
+                this.setup();
+            }
+            setup() {
+                const { subscribe } = customComponentState(this.componentId);
+                subscribe(() => this.render());
+                this.render();
+            }
+            get state() {
+                return Object.assign(Object.assign({}, customComponentState(this.componentId).getState()), { properties: customComponentProperties(this.id).getState().properties });
+            }
+            render() {
+                var _a, _b, _c, _d, _e;
+                return __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const { component, properties: parameters } = this.state;
+                        if (!component)
+                            throw new Error('missing required component config');
+                        let script;
+                        let current = component;
+                        const properties = Object.fromEntries(Object.entries(parameters !== null && parameters !== void 0 ? parameters : {}).map(([id, { value }]) => { var _a, _b; return [(_b = (_a = component.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name, value]; }));
+                        while (current) {
+                            mergeProperties(properties, Object.fromEntries(Object.values((_a = current.properties) !== null && _a !== void 0 ? _a : {}).map(({ data }) => [data.name, data.defaultValue])));
+                            if (((_b = current.renderer) === null || _b === void 0 ? void 0 : _b.type) === 'web-component') {
+                                script = (_c = current.renderer) === null || _c === void 0 ? void 0 : _c.script;
+                                break;
+                            }
+                            if (((_d = current.renderer) === null || _d === void 0 ? void 0 : _d.type) === 'custom-component' && current.renderer.componentId) {
+                                const c = customComponentState(current.renderer.componentId).getState()
+                                    .component;
+                                mergeProperties(properties, Object.fromEntries(Object.entries((_e = current.renderer.properties) !== null && _e !== void 0 ? _e : {}).map(([id, { value }]) => {
+                                    var _a, _b;
+                                    return [
+                                        (_b = (_a = c === null || c === void 0 ? void 0 : c.properties) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.data.name,
+                                        value,
+                                    ];
+                                })));
+                                current = c;
+                            }
+                            else {
+                                current = undefined;
+                            }
+                        }
+                        if (!script)
+                            throw new Error('Missing required script');
+                        const cache = createCache({
+                            key: 'css',
+                            prepend: true,
+                            container: this.root,
+                        });
+                        const url = URL.createObjectURL(new Blob([script], { type: 'application/javascript' }));
+                        const { default: C } = yield import(/* @vite-ignore */ url);
+                        this.reactRoot.render(_jsx(CacheProvider, { value: cache, children: _jsx(C, Object.assign({}, properties)) }));
+                    }
+                    catch (error) {
+                        this.reactRoot.render(_jsx("div", {}));
+                    }
+                });
+            }
+        });
+    }
+};
+const CUSTOM_COMPONENT_STATE_MAP = {};
+const customComponentState = (id, initial) => {
+    var _a;
+    (_a = CUSTOM_COMPONENT_STATE_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_STATE_MAP[id] = create()(immer(() => (Object.assign({}, initial)))));
+    return CUSTOM_COMPONENT_STATE_MAP[id];
+};
+const CUSTOM_COMPONENT_PROPERTIES_MAP = {};
+const customComponentProperties = (id, initial) => {
+    var _a;
+    (_a = CUSTOM_COMPONENT_PROPERTIES_MAP[id]) !== null && _a !== void 0 ? _a : (CUSTOM_COMPONENT_PROPERTIES_MAP[id] = create()(immer(() => (Object.assign({}, initial)))));
+    return CUSTOM_COMPONENT_PROPERTIES_MAP[id];
+};
+export default function CustomComponentRenderer({ id, componentId, components, properties, }) {
+    const frame = useFrame();
+    components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id, { component }));
+    customComponentProperties(id, { properties });
+    useEffect(() => {
+        components === null || components === void 0 ? void 0 : components.map((component) => customComponentState(component.id).setState({ component }));
+        customComponentProperties(id, { properties }).setState({ properties });
+    });
+    useEffect(() => {
+        defineCustomElements(frame.window || window);
+    }, [frame]);
+    return (_jsx(ErrorBoundary, { fallbackRender: E, children: _jsx("custom-component-renderer", { "component-id": componentId, id: id }) }));
+}
+function E({ error }) {
+    return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
+}
+function mergeProperties(properties, newProperties) {
+    for (const [key, val] of Object.entries(newProperties)) {
+        if (properties[key] === undefined || properties[key] === null || properties[key] === '') {
+            properties[key] = val;
+        }
+    }
+    return properties;
+}

package/lib/esm/components/index.js

@@ -0,0 +1 @@
+export { default as CustomComponentRenderer } from './CustomComponentRenderer';

package/lib/esm/index.js

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

package/lib/esm/types/index.js

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

package/lib/types/api/index.d.ts

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

package/lib/types/api/pages-kit.d.ts

@@ -0,0 +1,8 @@
+import { CustomComponentType } from '../types';
+export type Mode = 'draft' | 'staging' | 'production';
+export declare function getComponents({ mode, name }?: {
+    mode?: Mode;
+    name?: string;
+}): Promise<{
+    components: CustomComponentType;
+}>;

package/lib/types/components/CustomComponentRenderer/index.d.ts

@@ -0,0 +1,11 @@
+import { CustomComponentType } from '../../types';
+export default function CustomComponentRenderer({ id, componentId, components, properties, }: {
+    id: string;
+    componentId: string;
+    components?: CustomComponentType[];
+    properties?: {
+        [key: string]: {
+            value: any;
+        };
+    };
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { default as CustomComponentRenderer } from './CustomComponentRenderer';

package/lib/types/index.d.ts

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

package/lib/types/types/index.d.ts

@@ -0,0 +1,32 @@
+export type CustomComponentType = {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name?: string;
+    renderer?: {
+        type: 'web-component';
+        script?: string;
+        source?: {
+            script?: string;
+        };
+    } | {
+        type: 'custom-component';
+        componentId?: string;
+        properties?: {
+            [key: string]: {
+                value?: any;
+            };
+        };
+    };
+    properties?: {
+        [key: string]: {
+            index: number;
+            data: {
+                id: string;
+                name?: string;
+                type?: 'string' | 'number' | 'boolean' | 'custom-component';
+                defaultValue?: any;
+            };
+        };
+    };
+};

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@blocklet/pages-kit",
+  "version": "0.2.195",
+  "description": "Pages Kit components and utils",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Arcblock <blocklet@arcblock.io> https://github.com/blocklet",
+  "homepage": "https://github.com/blocklet/pages-kit#readme",
+  "license": "ISC",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.js",
+  "exports": {
+    ".": {
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
+    },
+    "./api": {
+      "import": "./lib/esm/api/index.js",
+      "require": "./lib/cjs/api/index.js"
+    },
+    "./api/*": {
+      "import": "./lib/esm/api/*.js",
+      "require": "./lib/cjs/api/*.js"
+    },
+    "./components": {
+      "import": "./lib/esm/components/index.js",
+      "require": "./lib/cjs/components/index.js"
+    },
+    "./types": {
+      "import": "./lib/esm/types/index.js",
+      "require": "./lib/cjs/types/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./lib/types/index.d.ts"
+      ],
+      "api": [
+        "./lib/types/api/index.d.ts"
+      ],
+      "api/*": [
+        "./lib/types/api/*.d.ts",
+        "./lib/types/api/*/index.d.ts"
+      ],
+      "components": [
+        "./lib/types/components/index.d.ts"
+      ],
+      "types": [
+        "./lib/types/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "lib",
+    "LICENSE",
+    "package.json",
+    "README.md",
+    "tsconfig.json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blocklet/pages-kit.git"
+  },
+  "scripts": {
+    "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",
+    "build": "run-p build:*",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
+    "build:esm": "tsc --module es2022 --outDir lib/esm",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir lib/types",
+    "dev": "run-p 'build:* -- -w'",
+    "clean": "rimraf lib",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "@blocklet/sdk": "^1.16.22",
+    "axios": "^1.6.5",
+    "lodash": "^4.17.21",
+    "nanoid": "^3.3.7",
+    "ufo": "^1.3.2"
+  },
+  "peerDependencies": {
+    "@arcblock/ux": "^2.8.17",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.1",
+    "@mui/icons-material": "^5.14.11",
+    "@mui/lab": "^5.0.0-alpha.146",
+    "@mui/material": "^5.14.11",
+    "axios": "^1.6.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.12",
+    "react-frame-component": "^5.2.6",
+    "react-router-dom": "^6.16.0",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@arcblock/ux": "^2.9.13",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.3",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/lab": "^5.0.0-alpha.160",
+    "@mui/material": "^5.15.4",
+    "@types/lodash": "^4.14.202",
+    "@types/mustache": "^4.2.5",
+    "@types/node-fetch": "^2.6.10",
+    "@types/react": "^18.2.48",
+    "axios": "^1.6.5",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.12",
+    "react-frame-component": "^5.2.6",
+    "react-router-dom": "^6.21.2",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.3.3",
+    "zustand": "^4.4.7"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "lib",
+    "lib": ["DOM"]
+  }
+}