@blocklet/pages-kit 0.2.226 → 0.2.228

package/lib/cjs/builtin/mui/material.js

@@ -1,33 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Typography = exports.Container = exports.TextField = exports.Switch = exports.Stack = exports.Popper = exports.Paper = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.ClickAwayListener = exports.Button = exports.Box = exports.Autocomplete = void 0;
+exports.ListItemSecondaryAction = exports.ListItemIcon = exports.ListSubheader = exports.ListItemButton = exports.ListItemAvatar = exports.ListItem = exports.List = exports.Typography = exports.Container = exports.TextField = exports.Switch = exports.Stack = exports.Popper = exports.Paper = exports.DialogTitle = exports.DialogContent = exports.DialogActions = exports.Dialog = exports.ClickAwayListener = exports.Button = exports.Box = exports.Autocomplete = exports.Avatar = exports.useTheme = exports.createTheme = exports.ThemeProvider = void 0;
 var material_1 = require("@mui/material");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return material_1.ThemeProvider; } });
+Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return material_1.createTheme; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return material_1.useTheme; } });
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return material_1.Avatar; } });
 Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return material_1.Autocomplete; } });
-var material_2 = require("@mui/material");
-Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return material_2.Box; } });
-var material_3 = require("@mui/material");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return material_3.Button; } });
-var material_4 = require("@mui/material");
-Object.defineProperty(exports, "ClickAwayListener", { enumerable: true, get: function () { return material_4.ClickAwayListener; } });
-var material_5 = require("@mui/material");
-Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return material_5.Dialog; } });
-var material_6 = require("@mui/material");
-Object.defineProperty(exports, "DialogActions", { enumerable: true, get: function () { return material_6.DialogActions; } });
-var material_7 = require("@mui/material");
-Object.defineProperty(exports, "DialogContent", { enumerable: true, get: function () { return material_7.DialogContent; } });
-var material_8 = require("@mui/material");
-Object.defineProperty(exports, "DialogTitle", { enumerable: true, get: function () { return material_8.DialogTitle; } });
-var material_9 = require("@mui/material");
-Object.defineProperty(exports, "Paper", { enumerable: true, get: function () { return material_9.Paper; } });
-var material_10 = require("@mui/material");
-Object.defineProperty(exports, "Popper", { enumerable: true, get: function () { return material_10.Popper; } });
-var material_11 = require("@mui/material");
-Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return material_11.Stack; } });
-var material_12 = require("@mui/material");
-Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return material_12.Switch; } });
-var material_13 = require("@mui/material");
-Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return material_13.TextField; } });
-var material_14 = require("@mui/material");
-Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return material_14.Container; } });
-var material_15 = require("@mui/material");
-Object.defineProperty(exports, "Typography", { enumerable: true, get: function () { return material_15.Typography; } });
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return material_1.Box; } });
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return material_1.Button; } });
+Object.defineProperty(exports, "ClickAwayListener", { enumerable: true, get: function () { return material_1.ClickAwayListener; } });
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return material_1.Dialog; } });
+Object.defineProperty(exports, "DialogActions", { enumerable: true, get: function () { return material_1.DialogActions; } });
+Object.defineProperty(exports, "DialogContent", { enumerable: true, get: function () { return material_1.DialogContent; } });
+Object.defineProperty(exports, "DialogTitle", { enumerable: true, get: function () { return material_1.DialogTitle; } });
+Object.defineProperty(exports, "Paper", { enumerable: true, get: function () { return material_1.Paper; } });
+Object.defineProperty(exports, "Popper", { enumerable: true, get: function () { return material_1.Popper; } });
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return material_1.Stack; } });
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return material_1.Switch; } });
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return material_1.TextField; } });
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return material_1.Container; } });
+Object.defineProperty(exports, "Typography", { enumerable: true, get: function () { return material_1.Typography; } });
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return material_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return material_1.ListItem; } });
+Object.defineProperty(exports, "ListItemAvatar", { enumerable: true, get: function () { return material_1.ListItemAvatar; } });
+Object.defineProperty(exports, "ListItemButton", { enumerable: true, get: function () { return material_1.ListItemButton; } });
+Object.defineProperty(exports, "ListSubheader", { enumerable: true, get: function () { return material_1.ListSubheader; } });
+Object.defineProperty(exports, "ListItemIcon", { enumerable: true, get: function () { return material_1.ListItemIcon; } });
+Object.defineProperty(exports, "ListItemSecondaryAction", { enumerable: true, get: function () { return material_1.ListItemSecondaryAction; } });

package/lib/cjs/builtin/utils.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withQuery = exports.joinURL = void 0;
+exports.getComponentMountPoint = exports.getQuery = exports.withQuery = exports.joinURL = void 0;
 var ufo_1 = require("ufo");
 Object.defineProperty(exports, "joinURL", { enumerable: true, get: function () { return ufo_1.joinURL; } });
 Object.defineProperty(exports, "withQuery", { enumerable: true, get: function () { return ufo_1.withQuery; } });
+Object.defineProperty(exports, "getQuery", { enumerable: true, get: function () { return ufo_1.getQuery; } });
+function getComponentMountPoint(name) {
+    var _a, _b;
+    return (_b = (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.name === name || i.did === name)) === null || _b === void 0 ? void 0 : _b.mountPoint;
+}
+exports.getComponentMountPoint = getComponentMountPoint;

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

@@ -43,27 +43,14 @@ function ErrorView({ 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 ComponentRenderer(_a) {
-    var _b;
     var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
-    if (!((_b = props.dev) === null || _b === void 0 ? void 0 : _b.components)) {
-        return (0, jsx_runtime_1.jsx)(PreloadRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
-    }
-    return (0, jsx_runtime_1.jsx)(DebugRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
-}
-function PreloadRenderer(props) {
-    const component = (0, state_1.usePreloadComponent)(props);
-    if (!component)
-        return null;
-    return (0, jsx_runtime_1.jsx)(Renderer, Object.assign({}, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) }));
-}
-function DebugRenderer(props) {
-    const component = (0, state_1.useTranspileComponent)(props);
+    const component = (0, state_1.useComponent)(props);
     if (!component)
         return null;
-    return (0, jsx_runtime_1.jsx)(Renderer, Object.assign({}, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) }));
+    return ((0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
 }
 function Renderer({ renderCount, Component, locale, props, dev, }) {
     const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {

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

@@ -43,7 +43,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTranspileComponent = exports.usePreloadComponent = exports.customComponentStates = void 0;
+exports.useComponent = exports.customComponentStates = void 0;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
 const immer_1 = require("zustand/middleware/immer");
@@ -135,13 +135,24 @@ function loadComponents(input) {
             })) });
     });
 }
+function useComponent({ instanceId, componentId, properties, locale, dev }) {
+    var _a, _b;
+    const transpile = useTranspileComponent({ componentId, locale, properties, dev });
+    const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
+    const Component = (_a = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.Component;
+    if (!Component)
+        return null;
+    const props = (_b = preload === null || preload === void 0 ? void 0 : preload.props) !== null && _b !== void 0 ? _b : transpile === null || transpile === void 0 ? void 0 : transpile.props;
+    return { Component, props };
+}
+exports.useComponent = useComponent;
 const COMPONENT_LOADER_MAP = {};
-function usePreloadComponent({ instanceId, componentId, properties: parameters, locale: requestLocale, dev: { mode } = {}, }) {
+function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
     var _a;
     const previousRef = (0, react_1.useRef)();
-    const locale = (0, exports.customComponentStates)((s) => { var _a; return ((_a = s.state.config.supportedLocales) === null || _a === void 0 ? void 0 : _a.some((i) => i.locale === requestLocale)) ? requestLocale : undefined; });
+    const requestLocale = (0, exports.customComponentStates)((s) => { var _a; return ((_a = s.state.config.supportedLocales) === null || _a === void 0 ? void 0 : _a.some((i) => i.locale === locale)) ? locale : undefined; });
     const defaultLocale = (0, exports.customComponentStates)((s) => s.state.config.defaultLocale);
-    const realLocale = locale || defaultLocale;
+    const realLocale = requestLocale || defaultLocale;
     const result = (0, exports.customComponentStates)((s) => realLocale ? s.getComponent({ instanceId, componentId, locale: realLocale }) : undefined);
     if (result) {
         previousRef.current = result;
@@ -150,16 +161,15 @@ function usePreloadComponent({ instanceId, componentId, properties: parameters,
     if (realLocale && instanceId) {
         const key = [instanceId, realLocale].join('-');
         (_a = COMPONENT_LOADER_MAP[key]) !== null && _a !== void 0 ? _a : (COMPONENT_LOADER_MAP[key] = exports.customComponentStates.getState().loadComponents({
-            mode,
+            mode: dev === null || dev === void 0 ? void 0 : dev.mode,
             locale: realLocale,
-            instances: [{ id: instanceId, component: { id: componentId }, properties: parameters }],
+            instances: [{ id: instanceId, component: { id: componentId }, properties }],
         }));
         if (previousRef.current)
             return previousRef.current;
     }
     return null;
 }
-exports.usePreloadComponent = usePreloadComponent;
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
     const [Component, setComponent] = (0, react_1.useState)();
     const component = (0, property_1.mergeComponent)({
@@ -184,7 +194,6 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
         props: component.properties,
     };
 }
-exports.useTranspileComponent = useTranspileComponent;
 function transpileAndLoadScript(script) {
     return __awaiter(this, void 0, void 0, function* () {
         const [ts, { createBuiltinModuleTransformer }] = yield Promise.all([

package/lib/esm/builtin/mui/material.js

@@ -1,15 +1 @@
-export { Autocomplete } from '@mui/material';
-export { Box } from '@mui/material';
-export { Button } from '@mui/material';
-export { ClickAwayListener } from '@mui/material';
-export { Dialog } from '@mui/material';
-export { DialogActions } from '@mui/material';
-export { DialogContent } from '@mui/material';
-export { DialogTitle } from '@mui/material';
-export { Paper } from '@mui/material';
-export { Popper } from '@mui/material';
-export { Stack } from '@mui/material';
-export { Switch } from '@mui/material';
-export { TextField } from '@mui/material';
-export { Container } from '@mui/material';
-export { Typography } from '@mui/material';
+export { ThemeProvider, createTheme, useTheme, Avatar, Autocomplete, Box, Button, ClickAwayListener, Dialog, DialogActions, DialogContent, DialogTitle, Paper, Popper, Stack, Switch, TextField, Container, Typography, List, ListItem, ListItemAvatar, ListItemButton, ListSubheader, ListItemIcon, ListItemSecondaryAction, } from '@mui/material';

package/lib/esm/builtin/utils.js

@@ -1 +1,5 @@
-export { joinURL, withQuery } from 'ufo';
+export { joinURL, withQuery, getQuery } from 'ufo';
+export function getComponentMountPoint(name) {
+    var _a, _b;
+    return (_b = (_a = globalThis.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.name === name || i.did === name)) === null || _b === void 0 ? void 0 : _b.mountPoint;
+}

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

@@ -14,7 +14,7 @@ import '../../utils/inject-global-components';
 import { Alert, Box } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RenderNestedComponent } from '../../utils/property';
-import { usePreloadComponent, useTranspileComponent } from './state';
+import { useComponent } from './state';
 export * from './state';
 const MAXIMUM_RENDER_STACK_SIZE = 20;
 export default function CustomComponentRenderer(_a) {
@@ -26,27 +26,14 @@ function ErrorView({ error }) {
     return (_jsx(Box, { children: _jsx(Alert, { severity: "error", children: error.message }) }));
 }
 function ComponentRenderer(_a) {
-    var _b;
     var { renderCount = 0 } = _a, props = __rest(_a, ["renderCount"]);
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
-    if (!((_b = props.dev) === null || _b === void 0 ? void 0 : _b.components)) {
-        return _jsx(PreloadRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
-    }
-    return _jsx(DebugRenderer, Object.assign({ renderCount: renderCount + 1 }, props));
-}
-function PreloadRenderer(props) {
-    const component = usePreloadComponent(props);
-    if (!component)
-        return null;
-    return _jsx(Renderer, Object.assign({}, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) }));
-}
-function DebugRenderer(props) {
-    const component = useTranspileComponent(props);
+    const component = useComponent(props);
     if (!component)
         return null;
-    return _jsx(Renderer, Object.assign({}, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) }));
+    return (_jsx(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
 }
 function Renderer({ renderCount, Component, locale, props, dev, }) {
     const componentProps = Object.fromEntries(Object.entries(props).map(([key, val]) => {

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

@@ -109,13 +109,23 @@ function loadComponents(input) {
             })) });
     });
 }
+export function useComponent({ instanceId, componentId, properties, locale, dev }) {
+    var _a, _b;
+    const transpile = useTranspileComponent({ componentId, locale, properties, dev });
+    const preload = usePreloadComponent({ instanceId, componentId, properties, locale, dev });
+    const Component = (_a = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.Component;
+    if (!Component)
+        return null;
+    const props = (_b = preload === null || preload === void 0 ? void 0 : preload.props) !== null && _b !== void 0 ? _b : transpile === null || transpile === void 0 ? void 0 : transpile.props;
+    return { Component, props };
+}
 const COMPONENT_LOADER_MAP = {};
-export function usePreloadComponent({ instanceId, componentId, properties: parameters, locale: requestLocale, dev: { mode } = {}, }) {
+function usePreloadComponent({ instanceId, componentId, properties, locale, dev }) {
     var _a;
     const previousRef = useRef();
-    const locale = customComponentStates((s) => { var _a; return ((_a = s.state.config.supportedLocales) === null || _a === void 0 ? void 0 : _a.some((i) => i.locale === requestLocale)) ? requestLocale : undefined; });
+    const requestLocale = customComponentStates((s) => { var _a; return ((_a = s.state.config.supportedLocales) === null || _a === void 0 ? void 0 : _a.some((i) => i.locale === locale)) ? locale : undefined; });
     const defaultLocale = customComponentStates((s) => s.state.config.defaultLocale);
-    const realLocale = locale || defaultLocale;
+    const realLocale = requestLocale || defaultLocale;
     const result = customComponentStates((s) => realLocale ? s.getComponent({ instanceId, componentId, locale: realLocale }) : undefined);
     if (result) {
         previousRef.current = result;
@@ -124,16 +134,16 @@ export function usePreloadComponent({ instanceId, componentId, properties: param
     if (realLocale && instanceId) {
         const key = [instanceId, realLocale].join('-');
         (_a = COMPONENT_LOADER_MAP[key]) !== null && _a !== void 0 ? _a : (COMPONENT_LOADER_MAP[key] = customComponentStates.getState().loadComponents({
-            mode,
+            mode: dev === null || dev === void 0 ? void 0 : dev.mode,
             locale: realLocale,
-            instances: [{ id: instanceId, component: { id: componentId }, properties: parameters }],
+            instances: [{ id: instanceId, component: { id: componentId }, properties }],
         }));
         if (previousRef.current)
             return previousRef.current;
     }
     return null;
 }
-export function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
+function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
     const [Component, setComponent] = useState();
     const component = mergeComponent({
         componentId,

package/lib/types/builtin/mui/material.d.ts

@@ -1,15 +1 @@
-export { Autocomplete } from '@mui/material';
-export { Box } from '@mui/material';
-export { Button } from '@mui/material';
-export { ClickAwayListener } from '@mui/material';
-export { Dialog } from '@mui/material';
-export { DialogActions } from '@mui/material';
-export { DialogContent } from '@mui/material';
-export { DialogTitle } from '@mui/material';
-export { Paper } from '@mui/material';
-export { Popper } from '@mui/material';
-export { Stack } from '@mui/material';
-export { Switch } from '@mui/material';
-export { TextField } from '@mui/material';
-export { Container } from '@mui/material';
-export { Typography } from '@mui/material';
+export { ThemeProvider, createTheme, useTheme, Avatar, Autocomplete, Box, Button, ClickAwayListener, Dialog, DialogActions, DialogContent, DialogTitle, Paper, Popper, Stack, Switch, TextField, Container, Typography, List, ListItem, ListItemAvatar, ListItemButton, ListSubheader, ListItemIcon, ListItemSecondaryAction, } from '@mui/material';

package/lib/types/builtin/utils.d.ts

@@ -1 +1,2 @@
-export { joinURL, withQuery } from 'ufo';
+export { joinURL, withQuery, getQuery } from 'ufo';
+export declare function getComponentMountPoint(name: string): string | undefined;

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

@@ -136,15 +136,9 @@ export declare const customComponentStates: import("zustand").UseBoundStore<Omit
         loadComponents: (input: Pick<PreloadComponentsInput, 'mode' | 'locale' | 'instances'>) => Promise<void>;
     }) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare function usePreloadComponent({ instanceId, componentId, properties: parameters, locale: requestLocale, dev: { mode }, }: CustomComponentRendererProps): {
+export declare function useComponent({ instanceId, componentId, properties, locale, dev }: CustomComponentRendererProps): {
     Component: ComponentType<any>;
     props?: {
         [key: string]: any;
     };
 } | null;
-export declare function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components }, }: CustomComponentRendererProps): {
-    Component: ComponentType;
-    props: {
-        [key: string]: any;
-    };
-} | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/pages-kit",
-  "version": "0.2.226",
+  "version": "0.2.228",
   "description": "Pages Kit components and utils",
   "publishConfig": {
     "access": "public"
@@ -121,7 +121,7 @@
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
-    "@arcblock/ux": "^2.9.23",
+    "@arcblock/ux": "^2.9.25",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
@@ -131,12 +131,12 @@
     "@types/lodash": "^4.14.202",
     "@types/mustache": "^4.2.5",
     "@types/node-fetch": "^2.6.11",
-    "@types/react": "^18.2.50",
+    "@types/react": "^18.2.52",
     "axios": "^1.6.7",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3",
+    "react-router-dom": "^6.22.0",
     "rimraf": "^5.0.5"
   }
 }