@blocklet/pages-kit 0.4.7 → 0.4.9

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

@@ -18,8 +18,10 @@ const ufo_1 = require("ufo");
 const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
 function preloadComponents(input) {
     return __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
-        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) || '/';
+        var _a, _b, _c;
+        const prefix = ((_b = (_a = window.blocklet) === null || _a === void 0 ? void 0 : _a.componentMountPoints.find((i) => i.did === PAGES_KIT_DID && i.status === '"running"')) === null || _b === void 0 ? void 0 : _b.mountPoint) ||
+            ((_c = window === null || window === void 0 ? void 0 : window.blocklet) === null || _c === void 0 ? void 0 : _c.prefix) ||
+            '/';
         return axios_1.default.post((0, ufo_1.joinURL)(prefix, '/api/components/preload'), input).then((res) => res.data);
     });
 }

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

@@ -45,7 +45,7 @@ function CustomComponentRenderer(_a) {
     var { dev } = _a, props = __rest(_a, ["dev"]);
     const inheritedDev = (0, DevProvider_1.useDev)();
     const BuiltinComponent = BuiltinComponents[props.componentId];
-    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ErrorView, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(DevProvider_1.DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? ((0, jsx_runtime_1.jsx)(BuiltinComponent, Object.assign({}, props))) : ((0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId }))) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: (props === null || props === void 0 ? void 0 : props.fallbackRender) || ErrorView, resetKeys: [Date.now()], children: (0, jsx_runtime_1.jsx)(DevProvider_1.DevProvider, { dev: dev !== null && dev !== void 0 ? dev : inheritedDev, children: BuiltinComponent ? ((0, jsx_runtime_1.jsx)(BuiltinComponent, Object.assign({}, props))) : ((0, jsx_runtime_1.jsx)(ComponentRenderer, Object.assign({}, props, { instanceId: (_b = props.instanceId) !== null && _b !== void 0 ? _b : props.componentId, renderType: props.renderType }))) }) }));
 }
 const BuiltinComponents = {
     'blocklet-react-component': BlockletReactComponentRenderer_1.default,
@@ -55,20 +55,25 @@ function ErrorView({ error }) {
 }
 function ComponentRenderer(_a) {
     var _b;
-    var { renderCount = 0, blockletId, blockletTitle, componentName } = _a, props = __rest(_a, ["renderCount", "blockletId", "blockletTitle", "componentName"]);
+    var { renderCount = 0, blockletId, blockletTitle, componentName, renderType = 'view' } = _a, props = __rest(_a, ["renderCount", "blockletId", "blockletTitle", "componentName", "renderType"]);
     const dev = (0, DevProvider_1.useDev)();
     if (renderCount > MAXIMUM_RENDER_STACK_SIZE) {
         throw new Error('Maximum render stack size exceeded');
     }
     const component = (0, state_1.useComponent)(Object.assign(Object.assign({}, props), { dev }));
+    const ctx = (0, context_1.useCustomComponentRenderer)();
     if (component === null || component === void 0 ? void 0 : component.error) {
-        // throw to outer error boundary
         throw component.error;
     }
-    const ctx = (0, context_1.useCustomComponentRenderer)();
-    if (component === null || component === void 0 ? void 0 : component.Component) {
-        const children = ((0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: component.Component, props: Object.assign(Object.assign({}, component.props), props.props) })));
-        return (ctx === null || ctx === void 0 ? void 0 : ctx.customRendererComponent) ? ((0, jsx_runtime_1.jsx)(ctx.customRendererComponent, { Component: component.Component, children: children })) : (children);
+    const renderComponentChildren = (Component) => {
+        const children = ((0, jsx_runtime_1.jsx)(Renderer, Object.assign({ renderCount: renderCount + 1 }, props, { Component: Component, props: Object.assign(Object.assign({}, component === null || component === void 0 ? void 0 : component.props), props.props) })));
+        return (ctx === null || ctx === void 0 ? void 0 : ctx.customRendererComponent) ? ((0, jsx_runtime_1.jsx)(ctx.customRendererComponent, { Component: Component, children: children })) : (children);
+    };
+    if ((component === null || component === void 0 ? void 0 : component.Component) && renderType === 'view') {
+        return renderComponentChildren(component.Component);
+    }
+    if ((component === null || component === void 0 ? void 0 : component.EditComponent) && renderType === 'setting') {
+        return renderComponentChildren(component.EditComponent);
     }
     // if the component is not in the dev.components, it means the component is not loaded
     if ((dev === null || dev === void 0 ? void 0 : dev.mode) === 'draft' && dev && ((_b = dev.components) === null || _b === void 0 ? void 0 : _b[props.componentId]) === undefined) {

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

@@ -193,6 +193,7 @@ function useComponent({ instanceId, componentId, properties, locale, dev }) {
     const componentProperties = (_a = transpile === null || transpile === void 0 ? void 0 : transpile.componentProperties) !== null && _a !== void 0 ? _a : preload === null || preload === void 0 ? void 0 : preload.componentProperties;
     return {
         Component: (_b = transpile === null || transpile === void 0 ? void 0 : transpile.Component) !== null && _b !== void 0 ? _b : preload === null || preload === void 0 ? void 0 : preload.Component,
+        EditComponent: transpile === null || transpile === void 0 ? void 0 : transpile.EditComponent,
         props: Object.assign(Object.assign({}, ((_c = transpile === null || transpile === void 0 ? void 0 : transpile.props) !== null && _c !== void 0 ? _c : preload === null || preload === void 0 ? void 0 : preload.props)), Object.fromEntries(Object.entries(properties !== null && properties !== void 0 ? properties : {})
             .map(([key, { value }]) => {
             var _a;
@@ -235,7 +236,7 @@ function usePreloadComponent({ instanceId, componentId, properties, locale, dev
 }
 function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components } = {}, }) {
     var _a, _b;
-    const [{ error, Component, propertiesFromCode }, setComponent] = (0, react_1.useState)({});
+    const [{ error, Component, EditComponent, propertiesFromCode }, setComponent] = (0, react_1.useState)({});
     const component = (0, property_1.mergeComponent)({
         componentId,
         getComponent: (componentId) => {
@@ -257,7 +258,7 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
                 .then((m) => {
                 // get properties from code
                 const propertiesFromCode = getPropertiesFromCode(m);
-                setComponent({ Component: m.default, propertiesFromCode });
+                setComponent({ Component: m.default, EditComponent: m.EditComponent || undefined, propertiesFromCode });
             })
                 .catch((error) => {
                 setComponent({ error });
@@ -267,6 +268,7 @@ function useTranspileComponent({ componentId, locale, properties, dev: { default
     return {
         error,
         Component,
+        EditComponent,
         props: component === null || component === void 0 ? void 0 : component.properties,
         componentProperties: (_b = (_a = components === null || components === void 0 ? void 0 : components[componentId]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.properties,
     };