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

package/lib/cjs/utils/build-lib.js

@@ -29,7 +29,7 @@ function buildLib(options) {
         const filterModules = process.argv.includes('--filter')
             ? (_a = process.argv[process.argv.indexOf('--filter') + 1]) === null || _a === void 0 ? void 0 : _a.split(',')
             : ((_b = process.env.BLOCK_FILTER) === null || _b === void 0 ? void 0 : _b.split(',')) || null;
-        const ignoreViteLog = false; // process.argv.includes('--log') ? false : process.env.BLOCK_LOG !== 'true';
+        const ignoreViteLog = process.argv.includes('--log') ? false : process.env.BLOCK_LOG !== 'true';
         const multiMode = process.argv.includes('--multi') || process.env.BLOCK_MULTI === 'true';
         const blocks = allBlocks.filter((name) => !filterModules || filterModules.includes(name || ''));
         if (!blocks.length) {

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

@@ -81,11 +81,13 @@ function generateWrapperCode(_a) {
             },
         }, null, 2);
         const client = `\
-import HomeComponent from '@blocklet/pages-kit-runtime/client';
+import PageRenderComponent, { RuntimeProps, RuntimeType } from '@blocklet/pages-kit-runtime/client';
 
+export type { RuntimeProps, RuntimeType };
 
+${generatePageDataTypes(state)}
 
-export default HomeComponent;
+export default PageRenderComponent;
 `;
         const index = client;
         const middleware = `
@@ -205,10 +207,14 @@ export default router;
                 compilerOptions: Object.assign(Object.assign({}, compilerOptions), { module: ts.ModuleKind.ESNext }),
             });
             // Generate proper type declarations
-            const dts = ts.transpileModule(content, {
-                fileName,
-                compilerOptions: Object.assign(Object.assign({}, compilerOptions), { declaration: true, emitDeclarationOnly: true }),
-            });
+            // const dts = ts.transpileModule(content, {
+            //   fileName,
+            //   compilerOptions: {
+            //     ...compilerOptions,
+            //     declaration: true,
+            //     emitDeclarationOnly: true,
+            //   },
+            // });
             return [
                 {
                     fileName: fileName.replace(/\.ts$/, '.cjs'),
@@ -220,11 +226,143 @@ export default router;
                 },
                 {
                     fileName: fileName.replace(/\.ts$/, '.d.ts'),
-                    content: dts.outputText || content, // Fallback to original content if declaration fails
+                    content, // Fallback to original content if declaration fails
                 },
             ];
         })))).flat();
         return [...result, { fileName: 'package.json', content: packageJson }];
     });
 }
+const basicComponentSectionTypes = {
+    iframe: `
+    src: string;
+    title?: string;
+    description?: string;
+  `,
+    section: `
+    title?: string;
+    description?: string;
+    image?: string;
+    imageMeta?: { naturalWidth?: number; naturalHeight?: number; filename: string };
+  `,
+    'section-card-list': `
+    title?: string;
+    description?: string;
+    list: {
+      id: string;
+      title: string;
+      description: string;
+      image: string;
+    }[];
+  `,
+    toc: `
+    title?: string;
+    description?: string;
+  `,
+};
+function getCustomComponentPropertyType(type) {
+    if (!type)
+        return 'string';
+    if (type === 'string' || type === 'multiline')
+        return 'string';
+    if (type === 'url')
+        return '{ url: string; mediaKitUrl?: string; width?: number; height?: number }';
+    if (type === 'json')
+        return 'any';
+    if (type === 'yaml')
+        return 'any';
+    return 'any';
+}
+const ALLOWED_PROPERTY_TYPES = ['string', 'multiline', 'url', 'json', 'yaml'];
+function generatePageDataTypes(state) {
+    const pageTypes = 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('/')
+            .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+            .join('')
+            .replace(/[^a-zA-Z0-9]/g, '')}Data`;
+        // 收集所有 section 的配置信息
+        const sectionTypes = page.sectionIds
+            .map((sectionId) => {
+            var _a, _b, _c, _d;
+            const section = page.sections[sectionId];
+            if (!section)
+                return null;
+            // check if the section is a template section
+            if (!section.isTemplateSection)
+                return null;
+            if (section.component === 'custom-component') {
+                const componentId = (_a = section.config) === null || _a === void 0 ? void 0 : _a.componentId;
+                if (!componentId)
+                    return null;
+                const component = ((_b = state.components[componentId]) === null || _b === void 0 ? void 0 : _b.data) || ((_d = (_c = state.resources.components) === null || _c === void 0 ? void 0 : _c[componentId]) === null || _d === void 0 ? void 0 : _d.component);
+                if (!component)
+                    return null;
+                // 为自定义组件生成属性类型
+                const properties = Object.entries(component.properties || {})
+                    .map(([, prop]) => {
+                    var _a, _b, _c, _d, _e;
+                    // check if the property type is allowed
+                    if (((_a = prop.data) === null || _a === void 0 ? void 0 : _a.type) && !ALLOWED_PROPERTY_TYPES.includes((_b = prop.data) === null || _b === void 0 ? void 0 : _b.type))
+                        return null;
+                    // if key is undefined, use id
+                    const key = ((_c = prop.data) === null || _c === void 0 ? void 0 : _c.key) || ((_d = prop.data) === null || _d === void 0 ? void 0 : _d.id);
+                    if (!key)
+                        return null;
+                    return `    "${key}"?: ${getCustomComponentPropertyType((_e = prop.data) === null || _e === void 0 ? void 0 : _e.type)};`;
+                })
+                    .filter(Boolean)
+                    .join('\n');
+                return `  "${section.name || section.id}"?: {
+${properties}
+  };`;
+            }
+            // basic component section types
+            if (basicComponentSectionTypes[section.component]) {
+                return `  "${section.name || section.id}"?: { ${basicComponentSectionTypes[section.component]} };`;
+            }
+            return `  "${section.name || section.id}"?: any;`;
+        })
+            .filter(Boolean)
+            .join('\n');
+        return `
+export interface ${typeName} {
+  title?: string;
+  image?: string;
+  description?: string;
+  sectionsData: {
+${sectionTypes}
+  };
+}`;
+    })
+        .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(' | ');
+    return `
+// 页面数据类型定义
+${pageTypes}
+
+// 所有页面数据类型的联合类型
+export type PageDataUnion = ${pageUnionTypes || 'never'};`;
+}
 exports.default = generateWrapperCode;

package/lib/cjs/utils/helper.js

@@ -1,16 +1,74 @@
 "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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 });
-exports.isDev = exports.isPathSafe = exports.libDir = exports.logger = void 0;
+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.setBlockEntryFilesPattern = setBlockEntryFilesPattern;
 exports.getBlockEntryFilesPattern = getBlockEntryFilesPattern;
 exports.findComponentFiles = findComponentFiles;
 exports.getBlockName = getBlockName;
-exports.generateBlockYml = generateBlockYml;
+exports.initializeMetadata = initializeMetadata;
+exports.generateYaml = generateYaml;
+exports.getBlockStudioInfo = getBlockStudioInfo;
+const component_1 = require("@blocklet/sdk/lib/component");
+const config_1 = __importDefault(require("@blocklet/sdk/lib/config"));
+const fs_1 = __importDefault(require("fs"));
+const promises_1 = require("fs/promises");
 const glob_1 = require("glob");
-const path_1 = __importDefault(require("path"));
+const nanoid_1 = require("nanoid");
+const path_1 = __importStar(require("path"));
+const promises_2 = require("stream/promises");
+const ufo_1 = require("ufo");
+const yaml = __importStar(require("yaml"));
+const constants_1 = require("../constants");
+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;
@@ -32,11 +90,13 @@ function findComponentFiles(options = {}) {
         const blockName = getBlockName(file);
         const fullPath = path_1.default.resolve(cwd, file);
         const isHtml = file.endsWith('.html');
+        const metadata = initializeMetadata(fullPath);
         return {
             file,
             blockName,
             fullPath,
             isHtml,
+            metadata,
         };
     })
         .filter(({ blockName }) => !(filter === null || filter === void 0 ? void 0 : filter.length) || filter.includes(blockName || ''));
@@ -48,12 +108,14 @@ function getBlockName(entry) {
         const [, pathWithoutIndex] = indexMatch;
         return path_1.default.basename(pathWithoutIndex || 'unknown');
     }
+    const matadataMatch = entry.match(/(.*)\/@metadata\.json$/);
+    if (matadataMatch) {
+        const [, pathWithoutMetadata] = matadataMatch;
+        return path_1.default.basename(pathWithoutMetadata || 'unknown');
+    }
     // If not an index file, return the filename without extension
     return path_1.default.basename(entry, path_1.default.extname(entry));
 }
-exports.logger = console;
-function generateBlockYml() { }
-exports.libDir = 'lib';
 const isPathSafe = (filePath) => {
     const normalizedPath = path_1.default.normalize(filePath);
     const pwd = process.env.PWD || process.cwd();
@@ -61,3 +123,107 @@ const isPathSafe = (filePath) => {
 };
 exports.isPathSafe = isPathSafe;
 exports.isDev = process.env.BLOCKLET_MODE === 'development';
+const isMetadataFile = (filePath) => {
+    return filePath.endsWith(exports.METADATA_FILE_NAME);
+};
+exports.isMetadataFile = isMetadataFile;
+const downloadAsset = (_a) => __awaiter(void 0, [_a], void 0, function* ({ asset, savePath, componentDid, }) {
+    if (!componentDid || !exports.isDev || !asset || !savePath) {
+        throw new Error('Invalid params');
+    }
+    // Check path safety
+    if (!(0, exports.isPathSafe)(savePath)) {
+        throw new Error('Invalid save path: path traversal detected');
+    }
+    const fileName = (0, path_1.basename)(asset);
+    // Ensure target directory exists
+    yield (0, promises_1.mkdir)(path_1.default.dirname(savePath), { recursive: true });
+    // download asset from pages-kit's /uploads
+    const res = yield (0, component_1.call)({
+        name: process.env.BLOCKLET_COMPONENT_DID,
+        path: (0, ufo_1.joinURL)('/uploads', fileName),
+        responseType: 'stream',
+        method: 'GET',
+    });
+    if (res.status >= 200 && res.status < 400) {
+        const file = fs_1.default.createWriteStream(savePath);
+        yield (0, promises_2.pipeline)(res.data, file);
+    }
+    else {
+        throw new Error(`download asset failed ${res.status}`);
+    }
+});
+exports.downloadAsset = downloadAsset;
+const getPreviewImageRelativePath = (name) => {
+    return path_1.default.join(exports.PREVIEW_IMAGE_DIR, name);
+};
+exports.getPreviewImageRelativePath = getPreviewImageRelativePath;
+function initializeMetadata(tempFilePath) {
+    let content = '';
+    if (!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);
+    if (!filePath) {
+        throw new Error('File path is required');
+    }
+    if (exports.isPagesKitBlockStudio && fs_1.default.existsSync(filePath)) {
+        content = fs_1.default.readFileSync(filePath, 'utf-8');
+    }
+    let metadata = {};
+    if (content) {
+        try {
+            metadata = JSON.parse(content);
+        }
+        catch (_a) {
+            // If parsing fails, use empty object
+        }
+    }
+    // Add id if not exists
+    if (!metadata.id) {
+        metadata.id = (0, nanoid_1.nanoid)(exports.NANOID_LENGTH);
+    }
+    // Add createdAt if not exists
+    if (!metadata.createdAt) {
+        metadata.createdAt = new Date().toISOString();
+    }
+    // Add updatedAt if not exists
+    if (!metadata.updatedAt) {
+        metadata.updatedAt = new Date().toISOString();
+    }
+    // Add name if not exists
+    if (!metadata.name) {
+        metadata.name = getBlockName(filePath);
+    }
+    if (exports.isPagesKitBlockStudio && !fs_1.default.existsSync(filePath)) {
+        fs_1.default.writeFileSync(filePath, JSON.stringify(metadata, null, 2));
+    }
+    return metadata;
+}
+function generateYaml(metadata) {
+    return yaml.stringify(metadata);
+}
+function getBlockStudioInfo() {
+    return config_1.default.components.find((c) => c.did === constants_1.PAGES_KIT_BLOCK_STUDIO_DID);
+}
+exports.isPagesKitBlockStudio = process.env.BLOCKLET_COMPONENT_DID === constants_1.PAGES_KIT_BLOCK_STUDIO_DID;
+const getBlockCode = (filePath) => {
+    var _a;
+    // Check path safety first
+    if (!(0, exports.isPathSafe)(filePath)) {
+        throw new Error('Invalid file path: path traversal detected');
+    }
+    const blockName = getBlockName(filePath);
+    // Find the actual code file using the block entry pattern
+    const files = findComponentFiles({ filter: [blockName] });
+    if (!files.length) {
+        throw new Error(`No code file found for block: ${blockName}`);
+    }
+    const codeFile = (_a = files[0]) === null || _a === void 0 ? void 0 : _a.fullPath;
+    if (!codeFile) {
+        throw new Error(`No code file found for block: ${blockName}`);
+    }
+    return fs_1.default.readFileSync(codeFile, 'utf8');
+};
+exports.getBlockCode = getBlockCode;

package/lib/esm/constants/index.js

@@ -0,0 +1,6 @@
+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';

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

@@ -9,8 +9,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Router } from 'express';
 import fs from 'fs';
+import { isEqual, keyBy, set } from 'lodash';
 import path from 'path';
-import { isPathSafe, isDev } from '../utils/helper';
+import { isPathSafe, isDev, downloadAsset, isMetadataFile, getPreviewImageRelativePath, initializeMetadata, findComponentFiles, getBlockStudioInfo, getBlockCode, } 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* () {
@@ -25,25 +26,23 @@ initBlockStudioRouter.get('/', (req, res) => __awaiter(void 0, void 0, void 0, f
         return res.status(403).json({ error: 'Invalid path' });
     }
     try {
-        if (!fs.existsSync(filePath)) {
-            return res.json(null);
-        }
         const ext = path.extname(filePath).toLowerCase();
         if (BINARY_EXTENSIONS.includes(ext)) {
+            if (!fs.existsSync(filePath)) {
+                return res.json(null);
+            }
             // For images, stream the file directly
             const mimeType = `image/${ext.slice(1)}`;
             res.setHeader('Content-Type', mimeType);
             return fs.createReadStream(filePath).pipe(res);
         }
-        // For text files, try to parse as JSON
-        const content = fs.readFileSync(filePath, 'utf-8');
-        try {
-            return res.json(JSON.parse(content));
-        }
-        catch (_a) {
-            // If JSON parsing fails, return as plain text
-            return res.json(content);
+        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) {
         return res.status(500).json({ error: 'Failed to read file' });
@@ -65,11 +64,60 @@ initBlockStudioRouter.post('/', (req, res) => __awaiter(void 0, void 0, void 0,
         if (!fs.existsSync(dir)) {
             fs.mkdirSync(dir, { recursive: true });
         }
-        fs.writeFileSync(filePath, JSON.stringify(content, null, 2));
-        return res.json({ success: true });
+        const currentMetadata = initializeMetadata(filePath);
+        const mergedContent = Object.assign(Object.assign({}, currentMetadata), content);
+        if (isEqual(currentMetadata, mergedContent)) {
+            return res.json({ success: true, content: mergedContent, message: 'No changes' });
+        }
+        mergedContent.updatedAt = new Date().toISOString();
+        // Check if this is a metadata file and has previewImage update
+        if (isMetadataFile(filePath) && content.previewImage && currentMetadata.previewImage !== content.previewImage) {
+            const previewImagePath = path.join(dir, getPreviewImageRelativePath(content.previewImage));
+            if (!fs.existsSync(previewImagePath)) {
+                yield downloadAsset({
+                    asset: content.previewImage,
+                    savePath: previewImagePath,
+                    componentDid: process.env.BLOCKLET_COMPONENT_DID || '',
+                });
+            }
+        }
+        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;
     }
     catch (error) {
         return res.status(500).json({ error: 'Failed to write file' });
     }
 }));
+initBlockStudioRouter.get('/all', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
+    const { withBlockletData = true } = req.query;
+    const allBlocks = yield findComponentFiles();
+    // get code to metadata
+    const allBlocksWithCode = allBlocks.map((block) => {
+        const code = getBlockCode(block.fullPath);
+        if (code) {
+            set(block.metadata, 'renderer.script', code);
+            set(block.metadata, 'renderer.type', 'react-component');
+        }
+        return block;
+    });
+    if (withBlockletData) {
+        const allBlocksWithBlockletData = allBlocksWithCode.map((block) => {
+            const blockletInfo = getBlockStudioInfo() || {
+                title: '',
+                did: '',
+            };
+            const item = {
+                blockletTitle: blockletInfo.title,
+                blockletId: blockletInfo.did,
+                data: block.metadata,
+            };
+            return item;
+        });
+        return res.json(keyBy(allBlocksWithBlockletData, 'data.id'));
+    }
+    return res.json(keyBy(allBlocksWithCode, 'id'));
+}));
 export default initBlockStudioRouter;

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

@@ -11,8 +11,9 @@ import { getResourceExportDir } from '@blocklet/sdk/lib/component';
 import { spawn } from 'child_process';
 import { Router } from 'express';
 import fs from 'fs';
+import set from 'lodash/set';
 import path, { join } from 'path';
-import { findComponentFiles, libDir } from '../utils/helper';
+import { findComponentFiles, libDir, getPreviewImageRelativePath, generateYaml, logger } from '../utils/helper';
 const DID = 'z2qa7rr3eUyVnWp2PCxEVARuUfLFh6cE5V2xV';
 const RESOURCE_TYPE = 'page';
 const allTag = '@ALL_COMPONENTS';
@@ -111,9 +112,55 @@ initResourceRouter.post('/', (req, res) => __awaiter(void 0, void 0, void 0, fun
         fs.rmSync(dir, { recursive: true, force: true });
         fs.mkdirSync(dir, { recursive: true });
         const rootDir = process.cwd();
-        const tmpPackage = join(rootDir, libDir);
+        const distDir = join(rootDir, libDir);
+        const tmpPackage = join(distDir, 'resource-blocklet');
+        fs.mkdirSync(tmpPackage, { recursive: true });
+        const pagesDir = join(tmpPackage, 'pages');
+        fs.mkdirSync(pagesDir, { recursive: true });
+        const componentsDir = join(tmpPackage, 'components');
+        fs.mkdirSync(componentsDir, { recursive: true });
+        // get @metadata.json by glob
+        const canUseComponents = findComponentFiles({ cwd: rootDir, filter: componentIds });
+        // Filter and process metadata files
+        const metadataList = canUseComponents.map(({ fullPath, blockName, metadata: _metadata }) => {
+            // get metadata
+            const metadata = _metadata;
+            // get code to metadata
+            const code = fs.readFileSync(join(distDir, 'es', `${blockName}.js`), 'utf8');
+            if (code) {
+                set(metadata, 'renderer.script', code);
+                set(metadata, 'renderer.type', 'react-component');
+            }
+            // write metadata to metadataPath
+            const metadataYmlPath = path.join(componentsDir, `${metadata.name || 'unnamed'}.${metadata.id}.yml`);
+            fs.writeFileSync(metadataYmlPath, generateYaml(metadata));
+            // Handle preview image if exists
+            if (metadata.previewImage) {
+                const imagePath = path.join(path.dirname(fullPath), getPreviewImageRelativePath(metadata.previewImage));
+                const imageDestPath = path.join(componentsDir, metadata.previewImage);
+                if (fs.existsSync(imagePath)) {
+                    fs.copyFileSync(imagePath, imageDestPath);
+                }
+            }
+            return metadata;
+        });
+        // write pages.config.yml
+        const pagesConfigPath = path.join(tmpPackage, '.blocklet/pages/pages.config.yml');
+        fs.mkdirSync(path.dirname(pagesConfigPath), { recursive: true });
+        const pagesConfig = {
+            pages: [],
+            components: metadataList.map((metadata) => ({
+                id: metadata.id,
+                name: metadata.name,
+            })),
+            supportedLocales: [],
+            config: {},
+        };
+        fs.writeFileSync(pagesConfigPath, generateYaml(pagesConfig));
+        logger.info('generate resource blocklet block count:', metadataList.length);
         yield copyRecursive(tmpPackage, dir);
-        fs.rmSync(tmpPackage, { recursive: true, force: true });
+        // remove tmpPackage
+        // fs.rmSync(tmpPackage, { recursive: true, force: true });
         res.json({ success: true });
     }
     catch (error) {

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

@@ -1,6 +1,7 @@
 // @ts-ignore
 import { initProxyToMediaKitUploadsMiddleware, initStaticResourceMiddleware } from '@blocklet/uploader-server';
 import express, { Router } from 'express';
+import { PAGES_KIT_DID, PAGES_KIT_RESOURCE_TYPE, MEDIA_KIT_DID, MEDIA_KIT_RESOURCE_TYPE, PAGES_KIT_BLOCK_STUDIO_DID, PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE, } from '../constants';
 // init uploader router
 export const initUploaderRouter = Router();
 initUploaderRouter.use('/', initProxyToMediaKitUploadsMiddleware({
@@ -10,20 +11,20 @@ initUploaderRouter.use('/', initProxyToMediaKitUploadsMiddleware({
     resourceTypes: [
         // image bin resource
         {
-            type: 'imgpack',
-            did: 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9',
+            type: MEDIA_KIT_RESOURCE_TYPE,
+            did: MEDIA_KIT_DID,
         },
         // pages kit resource (pages and components folder)
         {
-            type: 'page',
-            did: 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o',
+            type: PAGES_KIT_RESOURCE_TYPE,
+            did: PAGES_KIT_DID,
             folder: ['pages', 'components'],
             blacklist: ['.yml'],
         },
         // pages kit block studio resource
         {
-            type: 'page',
-            did: 'z2qa7rr3eUyVnWp2PCxEVARuUfLFh6cE5V2xV',
+            type: PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE,
+            did: PAGES_KIT_BLOCK_STUDIO_DID,
             folder: ['pages', 'components'],
             blacklist: ['.yml'],
         },

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

@@ -13,7 +13,7 @@ import { readFileSync, existsSync } from 'fs';
 import * as path from 'path';
 import pages, { DefaultPageStrategy } from 'vite-plugin-react-pages';
 import { findComponentFiles, setBlockEntryFilesPattern, getBlockEntryFilesPattern, getBlockName, logger, } from '../utils/helper';
-import { initHtmlPreviewTransformPlugin, VIRTUAL_MODULE_ID } from './vite-plugin-html-transform';
+import { initHtmlPreviewTransformPlugin, VIRTUAL_MODULE_ID, readHtmlFiles, generateComponent, } from './vite-plugin-html-transform';
 // import initRemoteScriptLocalizerPlugin from './vite-plugin-remote-script-localizer';
 export function initBlockStudioPlugins(options) {
     const workingDir = (options === null || options === void 0 ? void 0 : options.cwd) || process.cwd();
@@ -85,6 +85,9 @@ export function initBlockStudioPlugins(options) {
                                     '@arcblock/did-connect',
                                 ],
                                 output: {
+                                    chunkFileNames: () => {
+                                        return '[format]/_chunks/[name]-[hash].js';
+                                    },
                                     // 为所有外部依赖提供全局变量
                                     globals: {
                                         react: 'React',
@@ -130,6 +133,7 @@ export function initBlockStudioPlugins(options) {
                                     ? {
                                         isHtmlPreview: true,
                                         dataPath: filePath,
+                                        code: generateComponent(readHtmlFiles(dirPath.split('?dir=')[1] || '')),
                                         blockName,
                                         dirPath,
                                         metadataPath,