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

package/lib/cjs/utils/generate-wrapper-code.js

@@ -275,12 +275,10 @@ function getCustomComponentPropertyType(type) {
 }
 const ALLOWED_PROPERTY_TYPES = ['string', 'multiline', 'url', 'json', 'yaml'];
 function generatePageDataTypes(state) {
-    const pageTypes = Object.values(state.pages)
+    const pageTypeDefinitions = Object.values(state.pages)
         .map((page) => {
-        // check if the page is a template page
         if (!page.isTemplate)
             return null;
-        // 将 slug 转换为有效的 TypeScript 类型名
         const typeName = `Page${page.slug
             .replace(/^\//, '')
             .split('/')
@@ -331,8 +329,7 @@ ${properties}
         })
             .filter(Boolean)
             .join('\n');
-        return `
-export interface ${typeName} {
+        const typeDefinition = `interface ${typeName} {
   title?: string;
   image?: string;
   description?: string;
@@ -340,29 +337,28 @@ export interface ${typeName} {
 ${sectionTypes}
   };
 }`;
+        return {
+            typeName,
+            typeDefinition,
+        };
     })
-        .filter(Boolean)
-        .join('\n');
-    // 生成 PageData 类型的联合类型
-    const pageUnionTypes = Object.values(state.pages)
-        .map((page) => {
-        if (!page.isTemplate)
-            return null;
-        const typeName = `Page${page.slug
-            .replace(/^\//, '')
-            .split('/')
-            .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-            .join('')
-            .replace(/[^a-zA-Z0-9]/g, '')}Data`;
-        return typeName;
-    })
-        .filter(Boolean)
-        .join(' | ');
+        .filter(Boolean);
+    // Generate type definitions string
+    const typeDefinitions = pageTypeDefinitions.map((def) => `export ${def === null || def === void 0 ? void 0 : def.typeDefinition}`).join('\n\n');
+    // Generate string literals for each type
+    const typeStrings = pageTypeDefinitions
+        .map((def) => `export const ${def === null || def === void 0 ? void 0 : def.typeName}String = \`${def === null || def === void 0 ? void 0 : def.typeDefinition}\`;`)
+        .join('\n\n');
+    // Generate union type
+    const pageUnionTypes = pageTypeDefinitions.map((def) => def === null || def === void 0 ? void 0 : def.typeName).join(' | ');
     return `
-// 页面数据类型定义
-${pageTypes}
+// Page data type definitions
+${typeDefinitions}
+
+// String versions of type definitions
+${typeStrings}
 
-// 所有页面数据类型的联合类型
+// Union type of all page data types
 export type PageDataUnion = ${pageUnionTypes || 'never'};`;
 }
 exports.default = generateWrapperCode;

package/lib/cjs/utils/helper.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 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) {
@@ -45,7 +48,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockCode = exports.isPagesKitBlockStudio = exports.getPreviewImageRelativePath = exports.downloadAsset = exports.isMetadataFile = exports.isDev = exports.isPathSafe = exports.NANOID_LENGTH = exports.PREVIEW_IMAGE_DIR = exports.METADATA_FILE_NAME = exports.libDir = exports.logger = void 0;
+exports.safeParse = exports.getBlockCode = exports.isPagesKitBlockStudio = exports.getPreviewImageRelativePath = exports.downloadAsset = exports.isMetadataFile = exports.isDev = exports.isPathSafe = exports.logger = void 0;
 exports.setBlockEntryFilesPattern = setBlockEntryFilesPattern;
 exports.getBlockEntryFilesPattern = getBlockEntryFilesPattern;
 exports.findComponentFiles = findComponentFiles;
@@ -64,14 +67,10 @@ const promises_2 = require("stream/promises");
 const ufo_1 = require("ufo");
 const yaml = __importStar(require("yaml"));
 const constants_1 = require("../constants");
+__exportStar(require("../constants"), exports);
 exports.logger = console;
-exports.libDir = 'lib';
-exports.METADATA_FILE_NAME = '@metadata.json';
-exports.PREVIEW_IMAGE_DIR = '@preview-images';
-exports.NANOID_LENGTH = 16;
-const DEFAULT_BLOCK_ENTRY_FILES_PATTERN = 'src/**/index.{ts,tsx,html}';
 if (!process.env.BLOCK_ENTRY_FILES_PATTERN) {
-    process.env.BLOCK_ENTRY_FILES_PATTERN = DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
+    process.env.BLOCK_ENTRY_FILES_PATTERN = constants_1.DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
 }
 function normalizePattern(pattern) {
     return pattern.replace(/^[/\\]+/, ''); // Remove leading slashes
@@ -80,7 +79,7 @@ function setBlockEntryFilesPattern(pattern) {
     process.env.BLOCK_ENTRY_FILES_PATTERN = normalizePattern(pattern);
 }
 function getBlockEntryFilesPattern() {
-    return process.env.BLOCK_ENTRY_FILES_PATTERN || DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
+    return process.env.BLOCK_ENTRY_FILES_PATTERN || constants_1.DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
 }
 function findComponentFiles(options = {}) {
     const { cwd = process.cwd(), filter } = options;
@@ -124,7 +123,7 @@ const isPathSafe = (filePath) => {
 exports.isPathSafe = isPathSafe;
 exports.isDev = process.env.BLOCKLET_MODE === 'development';
 const isMetadataFile = (filePath) => {
-    return filePath.endsWith(exports.METADATA_FILE_NAME);
+    return filePath.endsWith(constants_1.METADATA_FILE_NAME);
 };
 exports.isMetadataFile = isMetadataFile;
 const downloadAsset = (_a) => __awaiter(void 0, [_a], void 0, function* ({ asset, savePath, componentDid, }) {
@@ -155,7 +154,7 @@ const downloadAsset = (_a) => __awaiter(void 0, [_a], void 0, function* ({ asset
 });
 exports.downloadAsset = downloadAsset;
 const getPreviewImageRelativePath = (name) => {
-    return path_1.default.join(exports.PREVIEW_IMAGE_DIR, name);
+    return path_1.default.join(constants_1.PREVIEW_IMAGE_DIR, name);
 };
 exports.getPreviewImageRelativePath = getPreviewImageRelativePath;
 function initializeMetadata(tempFilePath) {
@@ -164,7 +163,7 @@ function initializeMetadata(tempFilePath) {
         throw new Error('File path is required');
     }
     // file path is metadata file
-    const filePath = (0, exports.isMetadataFile)(tempFilePath) ? tempFilePath : path_1.default.join((0, path_1.dirname)(tempFilePath), exports.METADATA_FILE_NAME);
+    const filePath = (0, exports.isMetadataFile)(tempFilePath) ? tempFilePath : path_1.default.join((0, path_1.dirname)(tempFilePath), constants_1.METADATA_FILE_NAME);
     if (!filePath) {
         throw new Error('File path is required');
     }
@@ -182,7 +181,7 @@ function initializeMetadata(tempFilePath) {
     }
     // Add id if not exists
     if (!metadata.id) {
-        metadata.id = (0, nanoid_1.nanoid)(exports.NANOID_LENGTH);
+        metadata.id = (0, nanoid_1.nanoid)(constants_1.NANOID_LENGTH);
     }
     // Add createdAt if not exists
     if (!metadata.createdAt) {
@@ -227,3 +226,12 @@ const getBlockCode = (filePath) => {
     return fs_1.default.readFileSync(codeFile, 'utf8');
 };
 exports.getBlockCode = getBlockCode;
+const safeParse = (text) => {
+    try {
+        return JSON.parse(text);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.safeParse = safeParse;

package/lib/esm/constants/index.js

@@ -1,6 +1,14 @@
+import path from 'path';
 export const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
 export const PAGES_KIT_RESOURCE_TYPE = 'page';
 export const PAGES_KIT_BLOCK_STUDIO_DID = 'z2qa7rr3eUyVnWp2PCxEVARuUfLFh6cE5V2xV';
 export const PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = 'page';
 export const MEDIA_KIT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9';
 export const MEDIA_KIT_RESOURCE_TYPE = 'imgpack';
+export const NEW_BLOCK_TEMPLATE_PATH = path.join(__dirname, 'new-block-template', 'index.tsx');
+export const NEW_BLOCK_TEMPLATE_METADATA_PATH = path.join(__dirname, 'new-block-template', '@metadata.json');
+export const libDir = 'lib';
+export const METADATA_FILE_NAME = '@metadata.json';
+export const PREVIEW_IMAGE_DIR = '@preview-images';
+export const NANOID_LENGTH = 16;
+export const DEFAULT_BLOCK_ENTRY_FILES_PATTERN = 'src/**/index.{ts,tsx,html}';

package/lib/esm/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/esm/constants/new-block-template/index.js

@@ -0,0 +1,50 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// default export
+export default function HelloWorld({ title = 'Hello World', logo, description, copyright }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: '16px 0',
+        }, children: [title && _jsx("h1", { children: title }), logo && (_jsx("img", { src: typeof logo === 'object' ? logo.url : logo, alt: "logo", style: {
+                    margin: '16px 0',
+                    maxWidth: '200px',
+                } })), description && (_jsx("div", { style: {
+                    color: '#666',
+                    marginTop: '8px',
+                }, children: description })), copyright && (_jsx("div", { style: {
+                    color: '#999',
+                    fontSize: '12px',
+                    marginTop: '16px',
+                }, children: copyright }))] }));
+}
+// export edit component
+export const EditComponent = (_a) => {
+    var { onChange } = _a, props = __rest(_a, ["onChange"]);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsx("div", { style: {
+                    fontSize: '14px',
+                    fontWeight: 500,
+                    color: '#333',
+                    padding: '8px 0',
+                    borderBottom: '1px solid #eee',
+                }, children: "Footer Parameters" }), _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" })] }));
+};

package/lib/esm/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/esm/middlewares/init-block-studio-router.js

@@ -11,7 +11,8 @@ import { Router } from 'express';
 import fs from 'fs';
 import { isEqual, keyBy, set } from 'lodash';
 import path from 'path';
-import { isPathSafe, isDev, downloadAsset, isMetadataFile, getPreviewImageRelativePath, initializeMetadata, findComponentFiles, getBlockStudioInfo, getBlockCode, } from '../utils/helper';
+import { METADATA_FILE_NAME, NEW_BLOCK_TEMPLATE_PATH, NEW_BLOCK_TEMPLATE_METADATA_PATH } from '../constants';
+import { isPathSafe, isDev, downloadAsset, isMetadataFile, getPreviewImageRelativePath, initializeMetadata, findComponentFiles, getBlockStudioInfo, getBlockCode, getBlockEntryFilesPattern, safeParse, } from '../utils/helper';
 export const initBlockStudioRouter = Router();
 const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.svg'];
 initBlockStudioRouter.get('/', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
@@ -37,11 +38,6 @@ initBlockStudioRouter.get('/', (req, res) => __awaiter(void 0, void 0, void 0, f
             return fs.createReadStream(filePath).pipe(res);
         }
         const metadata = initializeMetadata(filePath);
-        const code = getBlockCode(filePath);
-        if (code) {
-            set(metadata, 'renderer.script', code);
-            set(metadata, 'renderer.type', 'react-component');
-        }
         return res.json(metadata);
     }
     catch (error) {
@@ -81,16 +77,54 @@ initBlockStudioRouter.post('/', (req, res) => __awaiter(void 0, void 0, void 0,
                 });
             }
         }
-        res.json({ success: true, content: mergedContent, message: 'Updated' });
-        // save metadata without renderer after response
-        delete mergedContent.renderer;
         fs.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' });
     }
 }));
+initBlockStudioRouter.post('/create', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!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 = getBlockEntryFilesPattern();
+        const baseDir = path.dirname(pattern.replace(/\*\*?/g, ''));
+        const blockDir = path.join(baseDir, name);
+        const metadataPath = path.join(blockDir, METADATA_FILE_NAME);
+        const indexPath = path.join(blockDir, 'index.tsx');
+        // Check if block already exists
+        if (fs.existsSync(blockDir)) {
+            return res.status(409).json({ error: 'Block already exists' });
+        }
+        // Create block directory
+        fs.mkdirSync(blockDir, { recursive: true });
+        // Initialize metadata
+        let metadata = 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.readFileSync(NEW_BLOCK_TEMPLATE_METADATA_PATH, 'utf-8');
+        metadata = Object.assign(Object.assign({}, metadata), safeParse(metadataContent));
+        // Write metadata file
+        fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
+        // Copy template file to index.tsx
+        const templateContent = fs.readFileSync(NEW_BLOCK_TEMPLATE_PATH, 'utf-8');
+        fs.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' });
+    }
+}));
 initBlockStudioRouter.get('/all', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
     const { withBlockletData = true } = req.query;
     const allBlocks = yield findComponentFiles();

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

@@ -98,7 +98,7 @@ initResourceRouter.post('/', (req, res) => __awaiter(void 0, void 0, void 0, fun
         const buildProcess = 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) => {
@@ -107,6 +107,10 @@ initResourceRouter.post('/', (req, res) => __awaiter(void 0, void 0, void 0, fun
                 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.rmSync(dir, { recursive: true, force: true });

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

@@ -11,6 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 // import typescript from '@rollup/plugin-typescript';
 import { readFileSync, existsSync } from 'fs';
 import * as path from 'path';
+import { joinURL } from 'ufo';
 import pages, { DefaultPageStrategy } from 'vite-plugin-react-pages';
 import { findComponentFiles, setBlockEntryFilesPattern, getBlockEntryFilesPattern, getBlockName, logger, } from '../utils/helper';
 import { initHtmlPreviewTransformPlugin, VIRTUAL_MODULE_ID, readHtmlFiles, generateComponent, } from './vite-plugin-html-transform';
@@ -72,18 +73,13 @@ export 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';
@@ -91,22 +87,13 @@ export 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),
                     };
@@ -126,21 +113,23 @@ export function initBlockStudioPlugins(options) {
                             const pageId = `/${blockName}`;
                             const dirPath = path.dirname(filePath);
                             const metadataPath = path.join(dirPath, '@metadata.json');
+                            const dataPath = isHtml ? `${VIRTUAL_MODULE_ID}?dir=${dirPath}` : filePath;
                             api.addPageData({
                                 pageId,
-                                dataPath: isHtml ? `${VIRTUAL_MODULE_ID}?dir=${dirPath}` : filePath,
+                                dataPath,
                                 staticData: isHtml
                                     ? {
-                                        isHtmlPreview: true,
-                                        dataPath: filePath,
-                                        code: generateComponent(readHtmlFiles(dirPath.split('?dir=')[1] || '')),
+                                        isHtml: true,
+                                        dataPath,
+                                        code: generateComponent(readHtmlFiles(dirPath)),
                                         blockName,
                                         dirPath,
+                                        importPath: joinURL('@id', dataPath),
                                         metadataPath,
                                     }
-                                    : Object.assign(Object.assign({}, (yield helpers.extractStaticData(file))), { code: readFileSync(file.path, 'utf-8'), dataPath: filePath, blockName,
-                                        dirPath,
-                                        metadataPath }),
+                                    : Object.assign(Object.assign({}, (yield helpers.extractStaticData(file))), { code: readFileSync(file.path, 'utf-8'), dataPath,
+                                        blockName,
+                                        dirPath, importPath: joinURL('@fs', dataPath), metadataPath }),
                             });
                         });
                     });
@@ -161,6 +150,15 @@ export 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);
+            },
+        },
     ];
 }
 export default initBlockStudioPlugins;