@blocklet/pages-kit-block-studio 0.0.18 → 0.1.0

package/lib/cjs/constants/index.js

@@ -1,9 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MEDIA_KIT_RESOURCE_TYPE = exports.MEDIA_KIT_DID = exports.PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = exports.PAGES_KIT_BLOCK_STUDIO_DID = exports.PAGES_KIT_RESOURCE_TYPE = exports.PAGES_KIT_DID = void 0;
+exports.DEFAULT_BLOCK_ENTRY_FILES_PATTERN = exports.NANOID_LENGTH = exports.PREVIEW_IMAGE_DIR = exports.METADATA_FILE_NAME = exports.libDir = exports.NEW_BLOCK_TEMPLATE_METADATA_PATH = exports.NEW_BLOCK_TEMPLATE_PATH = exports.MEDIA_KIT_RESOURCE_TYPE = exports.MEDIA_KIT_DID = exports.PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = exports.PAGES_KIT_BLOCK_STUDIO_DID = exports.PAGES_KIT_RESOURCE_TYPE = exports.PAGES_KIT_DID = void 0;
+const path_1 = __importDefault(require("path"));
 exports.PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
 exports.PAGES_KIT_RESOURCE_TYPE = 'page';
 exports.PAGES_KIT_BLOCK_STUDIO_DID = 'z2qa7rr3eUyVnWp2PCxEVARuUfLFh6cE5V2xV';
 exports.PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = 'page';
 exports.MEDIA_KIT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9';
 exports.MEDIA_KIT_RESOURCE_TYPE = 'imgpack';
+exports.NEW_BLOCK_TEMPLATE_PATH = path_1.default.join(__dirname, 'new-block-template', 'index.tsx');
+exports.NEW_BLOCK_TEMPLATE_METADATA_PATH = path_1.default.join(__dirname, 'new-block-template', '@metadata.json');
+exports.libDir = 'lib';
+exports.METADATA_FILE_NAME = '@metadata.json';
+exports.PREVIEW_IMAGE_DIR = '@preview-images';
+exports.NANOID_LENGTH = 16;
+exports.DEFAULT_BLOCK_ENTRY_FILES_PATTERN = 'src/**/index.{ts,tsx,html}';

package/lib/cjs/constants/new-block-template/@metadata.json

@@ -0,0 +1,59 @@
+{
+  "properties": {
+    "gs1rn5jmxfvpxptx": {
+      "index": 0,
+      "data": {
+        "id": "gs1rn5jmxfvpxptx",
+        "key": "title",
+        "locales": {
+          "zh": {
+            "name": "Title"
+          }
+        }
+      }
+    },
+    "9ajrz12ik7esfk1z": {
+      "index": 1,
+      "data": {
+        "id": "9ajrz12ik7esfk1z",
+        "key": "description",
+        "locales": {
+          "zh": {
+            "name": "Description",
+            "defaultValue": "Welcome to Pages Kit Block Studio"
+          }
+        }
+      }
+    },
+    "3ckcfvf6b7zyskk8": {
+      "index": 2,
+      "data": {
+        "id": "3ckcfvf6b7zyskk8",
+        "key": "logo",
+        "type": "url",
+        "locales": {
+          "zh": {
+            "defaultValue": {
+              "url": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80",
+              "mediaKitUrl": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80"
+            },
+            "name": "Logo"
+          }
+        }
+      }
+    },
+    "x3lqht8ikble1itx": {
+      "index": 3,
+      "data": {
+        "id": "x3lqht8ikble1itx",
+        "key": "copyright",
+        "locales": {
+          "zh": {
+            "defaultValue": "Powered by Pages Kit Block Studio"
+          }
+        },
+        "visible": false
+      }
+    }
+  }
+}

package/lib/cjs/constants/new-block-template/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditComponent = void 0;
+exports.default = HelloWorld;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// default export
+function HelloWorld({ title = 'Hello World', logo, description, copyright }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: '16px 0',
+        }, children: [title && (0, jsx_runtime_1.jsx)("h1", { children: title }), logo && ((0, jsx_runtime_1.jsx)("img", { src: typeof logo === 'object' ? logo.url : logo, alt: "logo", style: {
+                    margin: '16px 0',
+                    maxWidth: '200px',
+                } })), description && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    color: '#666',
+                    marginTop: '8px',
+                }, children: description })), copyright && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    color: '#999',
+                    fontSize: '12px',
+                    marginTop: '16px',
+                }, children: copyright }))] }));
+}
+// export edit component
+const EditComponent = (_a) => {
+    var { onChange } = _a, props = __rest(_a, ["onChange"]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: '14px',
+                    fontWeight: 500,
+                    color: '#333',
+                    padding: '8px 0',
+                    borderBottom: '1px solid #eee',
+                }, children: "Footer Parameters" }), (0, jsx_runtime_1.jsx)("input", { id: "copyright-input", type: "text", style: {
+                    width: '100%',
+                    padding: '8px 12px',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    fontSize: '14px',
+                    transition: 'border-color 0.3s',
+                    outline: 'none',
+                }, value: props.copyright || '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange({ copyright: e.target.value }), placeholder: "Please Input Copyright" })] }));
+};
+exports.EditComponent = EditComponent;

package/lib/cjs/constants/new-block-template/index.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+export interface HelloWorldProps {
+  title?: string;
+  logo?: string | { url: string };
+  description?: string;
+  copyright?: string;
+}
+
+// default export
+export default function HelloWorld({ title = 'Hello World', logo, description, copyright }: HelloWorldProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '16px 0',
+      }}>
+      {title && <h1>{title}</h1>}
+      {logo && (
+        <img
+          src={typeof logo === 'object' ? logo.url : logo}
+          alt="logo"
+          style={{
+            margin: '16px 0',
+            maxWidth: '200px',
+          }}
+        />
+      )}
+      {description && (
+        <div
+          style={{
+            color: '#666',
+            marginTop: '8px',
+          }}>
+          {description}
+        </div>
+      )}
+      {copyright && (
+        <div
+          style={{
+            color: '#999',
+            fontSize: '12px',
+            marginTop: '16px',
+          }}>
+          {copyright}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// export edit component
+export const EditComponent: React.FC<HelloWorldProps & { onChange?: (value: HelloWorldProps) => void }> = ({
+  onChange,
+  ...props
+}) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div
+        style={{
+          fontSize: '14px',
+          fontWeight: 500,
+          color: '#333',
+          padding: '8px 0',
+          borderBottom: '1px solid #eee',
+        }}>
+        Footer Parameters
+      </div>
+      <input
+        id="copyright-input"
+        type="text"
+        style={{
+          width: '100%',
+          padding: '8px 12px',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          fontSize: '14px',
+          transition: 'border-color 0.3s',
+          outline: 'none',
+        }}
+        value={props.copyright || ''}
+        onChange={(e) => onChange?.({ copyright: e.target.value })}
+        placeholder="Please Input Copyright"
+      />
+    </div>
+  );
+};

package/lib/cjs/middlewares/init-block-studio-router.js

@@ -17,6 +17,7 @@ const express_1 = require("express");
 const fs_1 = __importDefault(require("fs"));
 const lodash_1 = require("lodash");
 const path_1 = __importDefault(require("path"));
+const constants_1 = require("../constants");
 const helper_1 = require("../utils/helper");
 exports.initBlockStudioRouter = (0, express_1.Router)();
 const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.svg'];
@@ -43,11 +44,6 @@ exports.initBlockStudioRouter.get('/', (req, res) => __awaiter(void 0, void 0, v
             return fs_1.default.createReadStream(filePath).pipe(res);
         }
         const metadata = (0, helper_1.initializeMetadata)(filePath);
-        const code = (0, helper_1.getBlockCode)(filePath);
-        if (code) {
-            (0, lodash_1.set)(metadata, 'renderer.script', code);
-            (0, lodash_1.set)(metadata, 'renderer.type', 'react-component');
-        }
         return res.json(metadata);
     }
     catch (error) {
@@ -87,16 +83,54 @@ exports.initBlockStudioRouter.post('/', (req, res) => __awaiter(void 0, void 0,
                 });
             }
         }
-        res.json({ success: true, content: mergedContent, message: 'Updated' });
-        // save metadata without renderer after response
-        delete mergedContent.renderer;
         fs_1.default.writeFileSync(filePath, JSON.stringify(mergedContent, null, 2));
-        return null;
+        return res.json({ success: true, content: mergedContent, message: 'Updated' });
     }
     catch (error) {
         return res.status(500).json({ error: 'Failed to write file' });
     }
 }));
+exports.initBlockStudioRouter.post('/create', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!helper_1.isDev) {
+        return res.status(403).json({ error: 'Only available in development mode' });
+    }
+    const { name, description } = req.body;
+    if (!name) {
+        return res.status(400).json({ error: 'Name is required' });
+    }
+    try {
+        const pattern = (0, helper_1.getBlockEntryFilesPattern)();
+        const baseDir = path_1.default.dirname(pattern.replace(/\*\*?/g, ''));
+        const blockDir = path_1.default.join(baseDir, name);
+        const metadataPath = path_1.default.join(blockDir, constants_1.METADATA_FILE_NAME);
+        const indexPath = path_1.default.join(blockDir, 'index.tsx');
+        // Check if block already exists
+        if (fs_1.default.existsSync(blockDir)) {
+            return res.status(409).json({ error: 'Block already exists' });
+        }
+        // Create block directory
+        fs_1.default.mkdirSync(blockDir, { recursive: true });
+        // Initialize metadata
+        let metadata = (0, helper_1.initializeMetadata)(metadataPath);
+        metadata.name = name;
+        metadata.description = description || '';
+        metadata.createdAt = new Date().toISOString();
+        metadata.updatedAt = new Date().toISOString();
+        // get template metadata from @metadata.json
+        const metadataContent = fs_1.default.readFileSync(constants_1.NEW_BLOCK_TEMPLATE_METADATA_PATH, 'utf-8');
+        metadata = Object.assign(Object.assign({}, metadata), (0, helper_1.safeParse)(metadataContent));
+        // Write metadata file
+        fs_1.default.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
+        // Copy template file to index.tsx
+        const templateContent = fs_1.default.readFileSync(constants_1.NEW_BLOCK_TEMPLATE_PATH, 'utf-8');
+        fs_1.default.writeFileSync(indexPath, templateContent);
+        return res.json({ success: true, metadata });
+    }
+    catch (error) {
+        console.error('Failed to create block:', error);
+        return res.status(500).json({ error: 'Failed to create block' });
+    }
+}));
 exports.initBlockStudioRouter.get('/all', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
     const { withBlockletData = true } = req.query;
     const allBlocks = yield (0, helper_1.findComponentFiles)();

package/lib/cjs/middlewares/init-resource-router.js

@@ -140,7 +140,7 @@ exports.initResourceRouter.post('/', (req, res) => __awaiter(void 0, void 0, voi
         const buildProcess = (0, child_process_1.spawn)('pnpm', ['run', 'build-lib'], {
             stdio: 'inherit',
             shell: true,
-            env: Object.assign(Object.assign({}, process.env), { FORCE_COLOR: '1', BLOCK_FILTER: componentIds.join(',') }),
+            env: Object.assign(Object.assign({}, process.env), { FORCE_COLOR: '1', BLOCK_FILTER: componentIds.join(','), NODE_OPTIONS: '--max_old_space_size=16384' }),
         });
         yield new Promise((resolve, reject) => {
             buildProcess.on('close', (code) => {
@@ -149,6 +149,10 @@ exports.initResourceRouter.post('/', (req, res) => __awaiter(void 0, void 0, voi
                 else
                     reject(new Error(`Build process exited with code ${code}`));
             });
+            buildProcess.on('error', (error) => {
+                console.error('Build process error:', error);
+                reject(error);
+            });
         });
         const dir = getExportDir(projectId, releaseId);
         fs_1.default.rmSync(dir, { recursive: true, force: true });

package/lib/cjs/plugins/vite-plugin-block-studio.js

@@ -47,6 +47,7 @@ exports.initBlockStudioPlugins = initBlockStudioPlugins;
 // import typescript from '@rollup/plugin-typescript';
 const fs_1 = require("fs");
 const path = __importStar(require("path"));
+const ufo_1 = require("ufo");
 const vite_plugin_react_pages_1 = __importStar(require("vite-plugin-react-pages"));
 const helper_1 = require("../utils/helper");
 const vite_plugin_html_transform_1 = require("./vite-plugin-html-transform");
@@ -108,18 +109,13 @@ function initBlockStudioPlugins(options) {
                                 formats: ['es', !multiMode ? 'umd' : 'cjs'],
                                 fileName: (format, entryName) => `${format}/${entryName}.js`,
                             }, rollupOptions: {
-                                external: [
-                                    'react',
-                                    'react-router-dom',
-                                    'react-dom',
-                                    'react-is',
-                                    'react/jsx-runtime',
-                                    'crypto',
-                                    // '@emotion/react',
-                                    // '@emotion/styled',
-                                    '@arcblock/ux',
-                                    '@arcblock/did-connect',
-                                ],
+                                external: (id) => {
+                                    const skip = ['react', 'crypto'];
+                                    if (skip.some((s) => id === s)) {
+                                        return true;
+                                    }
+                                    return false;
+                                },
                                 output: {
                                     chunkFileNames: () => {
                                         return '[format]/_chunks/[name]-[hash].js';
@@ -127,22 +123,13 @@ function initBlockStudioPlugins(options) {
                                     // 为所有外部依赖提供全局变量
                                     globals: {
                                         react: 'React',
-                                        'react-dom': 'ReactDOM',
-                                        'react-is': 'ReactIs',
-                                        'react-router-dom': 'ReactRouterDOM',
-                                        'react/jsx-runtime': 'ReactJsxRuntime',
-                                        // '@emotion/react': 'emotionReact',
-                                        // '@emotion/styled': 'emotionStyled',
-                                        '@mui/material': 'MUI',
-                                        '@arcblock/ux': 'ArcBlockUX',
-                                        '@arcblock/did-connect': 'ArcBlockDidConnect',
                                     },
                                     paths: {
-                                    // Redirect 'react' imports to '@blocklet/pages-kit/builtin/react'
-                                    // react: '@blocklet/pages-kit/builtin/react',
+                                        // Redirect 'react' imports to '@blocklet/pages-kit/builtin/react'
+                                        react: '@blocklet/pages-kit/builtin/react',
                                     },
                                     // 确保正确处理命名导出和默认导出
-                                    // interop: 'auto',
+                                    interop: 'auto',
                                 },
                             } }, _config === null || _config === void 0 ? void 0 : _config.build),
                     };
@@ -162,21 +149,23 @@ function initBlockStudioPlugins(options) {
                             const pageId = `/${blockName}`;
                             const dirPath = path.dirname(filePath);
                             const metadataPath = path.join(dirPath, '@metadata.json');
+                            const dataPath = isHtml ? `${vite_plugin_html_transform_1.VIRTUAL_MODULE_ID}?dir=${dirPath}` : filePath;
                             api.addPageData({
                                 pageId,
-                                dataPath: isHtml ? `${vite_plugin_html_transform_1.VIRTUAL_MODULE_ID}?dir=${dirPath}` : filePath,
+                                dataPath,
                                 staticData: isHtml
                                     ? {
-                                        isHtmlPreview: true,
-                                        dataPath: filePath,
-                                        code: (0, vite_plugin_html_transform_1.generateComponent)((0, vite_plugin_html_transform_1.readHtmlFiles)(dirPath.split('?dir=')[1] || '')),
+                                        isHtml: true,
+                                        dataPath,
+                                        code: (0, vite_plugin_html_transform_1.generateComponent)((0, vite_plugin_html_transform_1.readHtmlFiles)(dirPath)),
                                         blockName,
                                         dirPath,
+                                        importPath: (0, ufo_1.joinURL)('@id', dataPath),
                                         metadataPath,
                                     }
-                                    : Object.assign(Object.assign({}, (yield helpers.extractStaticData(file))), { code: (0, fs_1.readFileSync)(file.path, 'utf-8'), dataPath: filePath, blockName,
-                                        dirPath,
-                                        metadataPath }),
+                                    : Object.assign(Object.assign({}, (yield helpers.extractStaticData(file))), { code: (0, fs_1.readFileSync)(file.path, 'utf-8'), dataPath,
+                                        blockName,
+                                        dirPath, importPath: (0, ufo_1.joinURL)('@fs', dataPath), metadataPath }),
                             });
                         });
                     });
@@ -197,6 +186,15 @@ function initBlockStudioPlugins(options) {
         //   maxConcurrent: 5, // 可选，默认值
         //   timeout: 30 * 1000, // 可选，默认值 30 秒
         // }),
+        {
+            name: 'build-force-exit',
+            apply: 'build',
+            enforce: 'post',
+            closeBundle() {
+                // ensure vite build exit
+                process.exit(0);
+            },
+        },
     ];
 }
 exports.default = initBlockStudioPlugins;

package/lib/cjs/plugins/vite-plugin-html-transform.js

@@ -21,6 +21,7 @@ exports.RESOLVED_VIRTUAL_MODULE_ID = `\0${exports.VIRTUAL_MODULE_ID}`;
 const isRelativePath = (path) => {
     return path.startsWith('./') || path.startsWith('../') || (!path.startsWith('http') && !path.startsWith('//'));
 };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function extractExternalResources(html, _dirPath) {
     const external = {
         js: [],
@@ -170,10 +171,24 @@ ${content.trim()}`;
     <meta http-equiv="X-Content-Type-Options" content="nosniff">
     <meta http-equiv="Referrer-Policy" content="no-referrer">
     <meta http-equiv="Permissions-Policy" content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()">`;
+    const autoHeightScript = `<script>
+    (function() {
+      if ('ResizeObserver' in window) {
+        const resizeObserver = new ResizeObserver(() => {
+          const height = document.documentElement.scrollHeight;
+          window.parent.postMessage({ height }, '*');
+        });
+        
+        resizeObserver.observe(document.documentElement);
+      }
+    })();
+  </script>`;
     // 将处理后的相对路径引入的 CSS 和 JS 注入到 HTML 中
     const htmlContent = htmlWithoutRelativeImport
         .replace('<head>', `<head>${securityHeaders}`)
         .replace('</head>', `${cssContents.map((css) => `<style>${css.trim()}</style>`).join('\n')}
+      
+      ${autoHeightScript}
     </head>`)
         .replace('</body>', `
     ${jsContents.map((js) => `<script>${js}</script>`).join('\n')}
@@ -190,21 +205,41 @@ ${content.trim()}`;
         name: (0, path_1.basename)(dirPath),
     };
 }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function generateComponent(content, _isDev = true) {
     const htmlContent = content.html;
     const { name } = content;
-    if (_isDev) {
-        // do something
-    }
-    return `import { createElement } from 'react';
+    return `import { createElement, useEffect, useRef } from 'react';
+
 
 export default function HtmlPreview() {
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const handleMessage = (event) => {
+      if (event.source === iframe.contentWindow) {
+        const height = event.data.height;
+        if (height) {
+          iframe.style.height = height + 'px';
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
   return createElement('iframe', {
-    style: { border: 'none', width: '100%', height: '100%' },
+    ref: iframeRef,
+    style: { border: 'none', width: '100%', height: '100%', maxHeight: '100vh' },
     sandbox: 'allow-scripts',
     title: 'Preview ${name}',
     srcDoc: ${htmlContent}
   });
+
 }`;
 }
 function initHtmlPreviewTransformPlugin() {