@blocklet/pages-kit-block-studio 0.6.13 → 0.6.15

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

@@ -1,24 +1,25 @@
 /* eslint-disable no-await-in-loop */
 /* eslint-disable no-console */
+import { getMediaKitFileStream } from '@blocklet/uploader-server';
 import chalk from 'chalk';
 import { execSync, spawn } from 'child_process';
-import { findComponentFiles, libDir } from './helper';
-export async function buildLib(options) {
-    const workingDir = options?.cwd || process.cwd();
+import fs from 'fs';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import path, { join, basename } from 'path';
+import ts from 'typescript';
+import { findComponentFiles, libDir, getPreviewImageRelativePath, generateYaml, logger, getComponentScriptName, getEditComponentBlockName, getAigneOutputValueSchemaBlockName, getPropertiesSchemaBlockName, getGetServerSidePropsBlockName, copyRecursive, } from './helper';
+async function performBuild(workingDir, componentIds) {
     // Scan for all index files
     const allBlocks = findComponentFiles({ cwd: workingDir }).map((entry) => {
         return entry.blockName;
     });
-    const filterModules = process.argv.includes('--filter')
-        ? process.argv[process.argv.indexOf('--filter') + 1]?.split(',')
-        : process.env.BLOCK_FILTER?.split(',') || null;
     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 || ''));
+    const blocks = allBlocks.filter((name) => !componentIds || componentIds.includes(name || ''));
     if (!blocks.length) {
-        console.log(chalk.yellow('No components founds, please check has any component been selected'));
-        throw new Error('No components founds, please check has any component been selected');
-        return;
+        console.log(chalk.yellow('No components found, please check has any component been selected'));
+        throw new Error('No components found, please check has any component been selected');
     }
     // Clean up the lib directory
     await execSync(`rm -rf ${libDir}`, { cwd: workingDir });
@@ -26,51 +27,266 @@ export async function buildLib(options) {
     // Start to build
     console.log(chalk.cyan(`Start to build ${blocks.length} blocks in parallel\n`));
     const canBuildBlocks = multiMode ? blocks : [blocks.join(',')];
-    const configFile = 'vite-lib.config';
-    const hasConfig = execSync(`ls ${configFile}.* 2>/dev/null || true`, {
+    const configFile = 'vite-lib.config.ts';
+    const hasConfig = execSync(`ls ${configFile} 2>/dev/null || true`, {
         cwd: workingDir,
         encoding: 'utf-8',
     }).trim() !== '';
+    await Promise.all(canBuildBlocks.map((blockName) => {
+        console.log(chalk.blue(`Building ${blockName} Block...`));
+        return new Promise((resolve, reject) => {
+            const build = spawn('vite', [
+                'build',
+                '--filter',
+                `"${blockName}"`,
+                '--outDir',
+                libDir,
+                '--emptyOutDir=false',
+                hasConfig ? `--config ${configFile}.*` : '',
+            ], {
+                stdio: ignoreViteLog ? ['inherit', 'ignore', 'ignore'] : 'inherit',
+                shell: true,
+                cwd: workingDir,
+            });
+            build.on('close', (code) => {
+                if (code === 0) {
+                    console.log(chalk.green(`Build ${blockName} successfully`));
+                    resolve();
+                }
+                else {
+                    reject(new Error(`Build failed with code ${code}`));
+                }
+            });
+        });
+    }));
+    console.log(chalk.green(`\nBuild ${blocks.length} blocks successfully`));
+    console.log(chalk.gray(`Generate the ${libDir} directory successfully`));
+}
+async function performPackaging({ exportDir, componentIds, workingDir }) {
+    if (exportDir) {
+        // Clear and create export directory
+        fs.rmSync(exportDir, { recursive: true, force: true });
+        fs.mkdirSync(exportDir, { recursive: true });
+    }
+    const distDir = join(workingDir, libDir);
+    const codeDir = join(distDir, 'es');
+    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 });
+    const chunksDir = join(tmpPackage, 'chunks');
+    fs.mkdirSync(chunksDir, { recursive: true });
+    const chunksMapPath = join(codeDir, 'chunks-map.json');
+    const chunksMap = JSON.parse(fs.readFileSync(chunksMapPath, 'utf8'));
+    // Get components with metadata
+    const canUseComponents = findComponentFiles({
+        cwd: workingDir,
+        filter: componentIds,
+        strictExistMetadata: true,
+    });
+    // Process metadata files
+    const metadataList = await Promise.all(canUseComponents.map(async ({ fullPath, blockName, metadata: _metadata }) => {
+        const metadata = _metadata;
+        const jsName = `${blockName}.js`;
+        // Set version to 2
+        set(metadata, 'version', 2);
+        // Get main component code
+        const code = fs.readFileSync(join(codeDir, `${getComponentScriptName(blockName, 'esm')}.js`), 'utf8');
+        if (code) {
+            set(metadata, 'renderer.script', code);
+            set(metadata, 'renderer.type', 'react-component');
+            set(metadata, 'renderer.chunks', chunksMap[jsName] || []);
+        }
+        // Transpile to CJS
+        try {
+            const cjsCode = ts.transpileModule(code, {
+                compilerOptions: {
+                    jsx: ts.JsxEmit.React,
+                    target: ts.ScriptTarget.ES2016,
+                    module: ts.ModuleKind.CommonJS,
+                    moduleResolution: ts.ModuleResolutionKind.Node16,
+                },
+            }).outputText;
+            if (cjsCode) {
+                set(metadata, 'renderer.cjsScript', cjsCode);
+            }
+        }
+        catch (error) {
+            // ignore error
+        }
+        // Handle edit component code
+        try {
+            const editComponentJsName = `${getEditComponentBlockName(blockName)}.js`;
+            const editComponentCode = fs.readFileSync(join(codeDir, editComponentJsName), 'utf8');
+            if (editComponentCode) {
+                set(metadata, 'renderer.editComponent', editComponentCode);
+                set(metadata, 'renderer.chunks', Array.from(new Set([...get(metadata, 'renderer.chunks', []), ...(chunksMap[editComponentJsName] || [])])));
+            }
+        }
+        catch (error) {
+            // ignore error
+        }
+        // Handle aigne output value schema
+        try {
+            const aigneOutputValueSchemaJsName = `${getAigneOutputValueSchemaBlockName(blockName)}.js`;
+            const aigneOutputValueSchemaCode = fs.readFileSync(join(codeDir, aigneOutputValueSchemaJsName), 'utf8');
+            if (aigneOutputValueSchemaCode) {
+                set(metadata, 'renderer.aigneOutputValueSchema', aigneOutputValueSchemaCode);
+            }
+        }
+        catch (error) {
+            // ignore error
+        }
+        // Handle properties schema
+        try {
+            const propertiesSchemaJsName = `${getPropertiesSchemaBlockName(blockName)}.js`;
+            const propertiesSchemaCode = fs.readFileSync(join(codeDir, propertiesSchemaJsName), 'utf8');
+            if (propertiesSchemaCode) {
+                set(metadata, 'renderer.PROPERTIES_SCHEMA', propertiesSchemaCode);
+            }
+        }
+        catch (error) {
+            // ignore error
+        }
+        // Handle getServerSideProps
+        try {
+            const getServerSidePropsJsName = `${getGetServerSidePropsBlockName(blockName)}.js`;
+            const getServerSidePropsCode = fs.readFileSync(join(codeDir, getServerSidePropsJsName), 'utf8');
+            if (getServerSidePropsCode) {
+                set(metadata, 'renderer.getServerSideProps', getServerSidePropsCode);
+            }
+        }
+        catch (error) {
+            // ignore error
+        }
+        // Handle preview image
+        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);
+            }
+        }
+        // Handle type:url properties
+        if (metadata.properties) {
+            const downloadPromises = [];
+            Object.keys(metadata.properties).forEach((key) => {
+                const property = metadata.properties[key].data;
+                if (property.type === 'url') {
+                    Object.keys(property.locales).forEach((locale) => {
+                        if (property.locales[locale].defaultValue?.mediaKitUrl?.startsWith('mediakit://')) {
+                            const downloadPromise = (async () => {
+                                try {
+                                    const fileName = basename(property.locales[locale].defaultValue.mediaKitUrl);
+                                    const targetPath = path.join(componentsDir, fileName);
+                                    if (fs.existsSync(targetPath)) {
+                                        return;
+                                    }
+                                    // try to get image from preview image
+                                    const imagePathInPreview = path.join(path.dirname(fullPath), getPreviewImageRelativePath(fileName));
+                                    if (fs.existsSync(imagePathInPreview)) {
+                                        fs.copyFileSync(imagePathInPreview, targetPath);
+                                        return;
+                                    }
+                                    const resWithStream = await getMediaKitFileStream(property.locales[locale].defaultValue.mediaKitUrl);
+                                    if (!resWithStream.data) {
+                                        return;
+                                    }
+                                    const writeStream = fs.createWriteStream(targetPath);
+                                    resWithStream.data.pipe(writeStream);
+                                    await new Promise((resolve, reject) => {
+                                        writeStream.on('finish', () => {
+                                            property.locales[locale].defaultValue.url = property.locales[locale].defaultValue.mediaKitUrl;
+                                            resolve();
+                                        });
+                                        writeStream.on('error', reject);
+                                    });
+                                }
+                                catch (error) {
+                                    console.error('Download media kit file failed:', error.message);
+                                }
+                            })();
+                            downloadPromises.push(downloadPromise);
+                        }
+                    });
+                }
+            });
+            if (downloadPromises.length > 0) {
+                await Promise.allSettled(downloadPromises);
+            }
+        }
+        // Write metadata file
+        const metadataYmlPath = path.join(componentsDir, `${metadata.name || 'unnamed'}.${metadata.id}.yml`);
+        fs.writeFileSync(metadataYmlPath, generateYaml(metadata));
+        return metadata;
+    }));
+    // Copy chunks directory
+    await copyRecursive(join(codeDir, 'chunks'), chunksDir);
+    // Generate pages.config.yml
+    const pagesConfigPath = path.join(tmpPackage, '.blocklet/pages/pages.config.yml');
+    fs.mkdirSync(path.dirname(pagesConfigPath), { recursive: true });
+    const pagesConfig = {
+        version: 2,
+        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);
+    if (exportDir) {
+        // Copy to target directory
+        await copyRecursive(tmpPackage, exportDir);
+        console.log(chalk.green(`Package exported to: ${exportDir}`));
+    }
+}
+export async function buildLib(options = {}) {
+    const workingDir = options?.cwd || process.cwd();
+    const filterModules = process.argv.includes('--filter')
+        ? process.argv[process.argv.indexOf('--filter') + 1]?.split(',')
+        : process.env.BLOCK_FILTER?.split(',');
+    // Get parameters from environment variables
+    const componentIds = filterModules ?? null;
+    const exportDir = process.argv.includes('--export-dir')
+        ? process.argv[process.argv.indexOf('--export-dir') + 1]
+        : process.env.EXPORT_DIR;
     try {
-        await Promise.all(canBuildBlocks.map((blockName) => {
-            console.log(chalk.blue(`Building ${blockName} Block...`));
-            return new Promise((resolve, reject) => {
-                const build = spawn('vite', [
-                    'build',
-                    '--filter',
-                    `"${blockName}"`,
-                    '--outDir',
-                    libDir,
-                    '--emptyOutDir=false',
-                    hasConfig ? `--config ${configFile}.*` : '',
-                ], {
-                    stdio: ignoreViteLog ? ['inherit', 'ignore', 'ignore'] : 'inherit',
-                    shell: true,
-                    cwd: workingDir,
-                });
-                build.on('close', (code) => {
-                    if (code === 0) {
-                        console.log(chalk.green(`Build ${blockName} successfully`));
-                        resolve();
-                    }
-                    else {
-                        reject(new Error(`Build failed with code ${code}`));
-                    }
-                });
+        // Phase 1: Build components
+        await performBuild(workingDir, componentIds);
+        console.log(chalk.green('Build completed successfully'));
+        // Phase 2: Package resources (if export directory is specified)
+        if (exportDir) {
+            await performPackaging({
+                exportDir,
+                componentIds,
+                workingDir,
             });
-        }));
-        console.log(chalk.green(`\nBuild ${blocks.length} blocks successfully`));
-        console.log(chalk.gray(`Generate the ${libDir} directory successfully`));
-        process.exit(0);
+            console.log(chalk.green('Package completed successfully'));
+        }
     }
     catch (err) {
         console.error(chalk.red('Build failed:'), err);
-        process.exit(1);
+        if (process.env.NODE_ENV !== 'test') {
+            process.exit(1);
+        }
+        throw err;
+    }
+    finally {
+        process.exit(0);
     }
 }
 const cwdArg = process.argv.indexOf('--cwd');
 const cwd = cwdArg !== -1 ? process.argv[cwdArg + 1] : undefined;
-buildLib({ cwd }).catch((err) => {
+buildLib({ cwd })
+    .catch((err) => {
     console.error(chalk.red('Build failed:'), err);
     process.exit(1);
+})
+    .finally(() => {
+    process.exit(0);
 });

package/lib/esm/utils/helper.js

@@ -202,3 +202,38 @@ export const GET_SERVER_SIDE_PROPS_NAME = 'getServerSideProps';
 export const getGetServerSidePropsBlockName = (blockName) => {
     return `${blockName}(${GET_SERVER_SIDE_PROPS_NAME})`;
 };
+export function copyFile(src, dest) {
+    return new Promise((resolve, reject) => {
+        const readStream = fs.createReadStream(src);
+        const writeStream = fs.createWriteStream(dest);
+        readStream.on('error', reject);
+        writeStream.on('error', reject);
+        writeStream.on('finish', resolve);
+        readStream.pipe(writeStream);
+    });
+}
+export async function copyDirectory(src, dest) {
+    await fs.promises.mkdir(dest, { recursive: true });
+    const entries = await fs.promises.readdir(src, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (entry.isDirectory()) {
+            // eslint-disable-next-line no-await-in-loop
+            await copyDirectory(srcPath, destPath);
+        }
+        else {
+            // eslint-disable-next-line no-await-in-loop
+            await copyFile(srcPath, destPath);
+        }
+    }
+}
+export async function copyRecursive(src, dest) {
+    const srcStats = await fs.promises.stat(src);
+    if (srcStats.isDirectory()) {
+        await copyDirectory(src, dest);
+    }
+    else {
+        await copyFile(src, dest);
+    }
+}

package/lib/types/middlewares/init-resource-router.d.ts

@@ -1,5 +1,2 @@
-export declare function copyFile(src: string, dest: string): Promise<void>;
-export declare function copyDirectory(src: string, dest: string): Promise<void>;
-export declare function copyRecursive(src: string, dest: string): Promise<void>;
 export declare const initResourceRouter: import("express-ws").Router;
 export default initResourceRouter;