@blocklet/pages-kit-block-studio 0.4.64 → 0.4.66

package/lib/cjs/utils/ts-morph-utils.js

@@ -0,0 +1,255 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTsMorphProject = createTsMorphProject;
+exports.extractTypeWithDependencies = extractTypeWithDependencies;
+exports.combineTypeDefinitions = combineTypeDefinitions;
+const path = __importStar(require("path"));
+const ts_morph_1 = require("ts-morph");
+/**
+ * 创建 ts-morph 项目
+ * @param tsConfigFilePath tsconfig.json 文件路径
+ */
+function createTsMorphProject(tsConfigFilePath = path.resolve(process.cwd(), 'tsconfig.json')) {
+    return new ts_morph_1.Project({
+        tsConfigFilePath,
+    });
+}
+/**
+ * 解析类型定义文件，提取指定类型及其依赖
+ * @param sourceFilePath 源文件路径
+ * @param typeName 要提取的类型名称
+ * @param tsConfigFilePath tsconfig.json 文件路径
+ */
+function extractTypeWithDependencies(sourceFilePath, typeName, tsConfigFilePath = path.resolve(process.cwd(), 'tsconfig.json')) {
+    // 创建项目
+    const project = createTsMorphProject(tsConfigFilePath);
+    // 添加源文件
+    const sourceFile = project.addSourceFileAtPath(sourceFilePath);
+    // 收集所有导入语句
+    const imports = sourceFile.getImportDeclarations().map((imp) => imp.getText());
+    // 查找指定接口或类型别名
+    const targetInterface = sourceFile.getInterface(typeName);
+    const targetTypeAlias = sourceFile.getTypeAlias(typeName);
+    // 存储所有收集到的类型定义
+    const dependencies = new Map();
+    if (targetInterface) {
+        // 如果是接口，获取其文本
+        const typeText = targetInterface.getText();
+        // 收集接口依赖
+        collectTypeDependencies(targetInterface, dependencies, project, imports);
+        return { typeText, dependencies, imports };
+    }
+    if (targetTypeAlias) {
+        // 如果是类型别名，获取其文本
+        const typeText = targetTypeAlias.getText();
+        // 收集类型别名依赖
+        collectTypeDependencies(targetTypeAlias, dependencies, project, imports);
+        return { typeText, dependencies, imports };
+    }
+    throw new Error(`Type '${typeName}' not found in ${sourceFilePath}`);
+}
+/**
+ * 收集类型依赖
+ * @param node 类型节点
+ * @param dependencies 依赖集合
+ * @param project ts-morph 项目
+ * @param imports 导入语句集合
+ */
+function collectTypeDependencies(node, dependencies, project, imports) {
+    // 获取类型引用
+    const typeReferences = findTypeReferences(node);
+    // 处理每个类型引用
+    typeReferences.forEach((referenceName) => {
+        // 排除内置类型和已处理类型
+        if (isBuiltInType(referenceName) ||
+            dependencies.has(referenceName) ||
+            referenceName === node.getName() // 避免循环引用
+        ) {
+            return;
+        }
+        try {
+            // 在整个项目中查找类型定义
+            const { declaration, definitionText, sourceFileImports } = findTypeDefinitionInProject(referenceName, project);
+            if (declaration && definitionText) {
+                // 存储找到的类型定义
+                dependencies.set(referenceName, definitionText);
+                // 添加源文件的导入语句
+                if (sourceFileImports && sourceFileImports.length > 0) {
+                    sourceFileImports.forEach((importText) => {
+                        if (!imports.includes(importText)) {
+                            imports.push(importText);
+                        }
+                    });
+                }
+                // 递归收集该类型的依赖
+                if (ts_morph_1.Node.isInterfaceDeclaration(declaration) || ts_morph_1.Node.isTypeAliasDeclaration(declaration)) {
+                    collectTypeDependencies(declaration, dependencies, project, imports);
+                }
+            }
+        }
+        catch (error) {
+            console.warn(`Could not find definition for type: ${referenceName}`, error);
+        }
+    });
+}
+/**
+ * 从节点中查找所有类型引用
+ * @param node 类型节点
+ */
+function findTypeReferences(node) {
+    const references = [];
+    // 递归查找所有类型引用
+    function findReferences(currentNode) {
+        if (ts_morph_1.Node.isTypeReference(currentNode)) {
+            const typeName = currentNode.getTypeName().getText();
+            if (!references.includes(typeName)) {
+                references.push(typeName);
+            }
+        }
+        currentNode.forEachChild(findReferences);
+    }
+    findReferences(node);
+    return references;
+}
+/**
+ * 判断是否为内置类型
+ * @param typeName 类型名称
+ */
+function isBuiltInType(typeName) {
+    const builtInTypes = [
+        'String',
+        'Number',
+        'Boolean',
+        'Array',
+        'Object',
+        'Date',
+        'RegExp',
+        'Function',
+        'Promise',
+        'any',
+        'unknown',
+        'never',
+        'void',
+        'string',
+        'number',
+        'boolean',
+        'symbol',
+        'bigint',
+        'undefined',
+        'null',
+        'Record',
+        'Partial',
+        'Required',
+        'Readonly',
+        'Pick',
+        'Omit',
+        'Exclude',
+        'Extract',
+        'NonNullable',
+        'Parameters',
+        'ConstructorParameters',
+        'ReturnType',
+        'InstanceType',
+        'React',
+        'ReactNode',
+        'JSX',
+    ];
+    return builtInTypes.includes(typeName) || typeName.startsWith('React.');
+}
+/**
+ * 在项目中查找类型定义
+ * @param typeName 类型名称
+ * @param project ts-morph 项目
+ */
+function findTypeDefinitionInProject(typeName, project) {
+    // 在所有源文件中查找
+    for (const sourceFile of project.getSourceFiles()) {
+        // 尝试查找接口定义
+        const interfaceDecl = sourceFile.getInterface(typeName);
+        if (interfaceDecl) {
+            const imports = sourceFile.getImportDeclarations().map((imp) => imp.getText());
+            return {
+                declaration: interfaceDecl,
+                definitionText: interfaceDecl.getText(),
+                sourceFileImports: imports,
+            };
+        }
+        // 尝试查找类型别名定义
+        const typeAliasDecl = sourceFile.getTypeAlias(typeName);
+        if (typeAliasDecl) {
+            const imports = sourceFile.getImportDeclarations().map((imp) => imp.getText());
+            return {
+                declaration: typeAliasDecl,
+                definitionText: typeAliasDecl.getText(),
+                sourceFileImports: imports,
+            };
+        }
+        // 尝试查找枚举定义
+        const enumDecl = sourceFile.getEnum(typeName);
+        if (enumDecl) {
+            const imports = sourceFile.getImportDeclarations().map((imp) => imp.getText());
+            return {
+                declaration: enumDecl,
+                definitionText: enumDecl.getText(),
+                sourceFileImports: imports,
+            };
+        }
+    }
+    return { declaration: undefined, definitionText: undefined };
+}
+/**
+ * 组合类型及其依赖为完整的类型定义文本
+ * @param typeText 主类型文本
+ * @param dependencies 依赖类型集合
+ * @param imports 导入语句集合
+ */
+function combineTypeDefinitions(typeText, dependencies, imports = []) {
+    let combinedText = '';
+    // 首先添加所有导入语句
+    if (imports.length > 0) {
+        imports.forEach((importText) => {
+            combinedText += `${importText}\n`;
+        });
+        combinedText += '\n';
+    }
+    // 添加所有依赖类型
+    dependencies.forEach((defText) => {
+        combinedText += `${defText}\n\n`;
+    });
+    // 添加主类型
+    combinedText += typeText;
+    return combinedText;
+}

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

@@ -0,0 +1,314 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PROPERTIES_TYPE_SCHEMA = void 0;
+exports.propertiesToZodSchema = propertiesToZodSchema;
+exports.jsonSchemaToProperties = jsonSchemaToProperties;
+exports.zodSchemaToTypeString = zodSchemaToTypeString;
+exports.zodSchemaToJsonSchema = zodSchemaToJsonSchema;
+exports.tsFileToZodSchema = tsFileToZodSchema;
+exports.tsFileInterfaceToProperties = tsFileInterfaceToProperties;
+const config_1 = __importDefault(require("@blocklet/sdk/lib/config"));
+const fs_1 = require("fs");
+const lowerFirst_1 = __importDefault(require("lodash/lowerFirst"));
+const nanoid_1 = require("nanoid");
+const path = __importStar(require("path"));
+const ts_to_zod_1 = require("ts-to-zod");
+const zod_1 = require("zod");
+const zod_to_json_schema_1 = require("zod-to-json-schema");
+const zod_to_ts_1 = require("zod-to-ts");
+const helper_1 = require("./helper");
+const ts_morph_utils_1 = require("./ts-morph-utils");
+const PROPERTY_PREFIX = '@description';
+const JOIN_SYMBOL = ' | ';
+// 转换为: type: string | visible: boolean
+const stringifyZodDescribe = (properties, extra = {}) => {
+    return `${PROPERTY_PREFIX} ${Object.entries({
+        id: properties.id ?? '',
+        type: properties.type ?? 'string',
+        visible: properties.visible ?? true,
+        ...extra,
+    })
+        .map(([key, value]) => {
+        return `${key}: ${value}`;
+    })
+        .join(JOIN_SYMBOL)}`;
+};
+const parseZodDescribe = (describe) => {
+    const describeList = describe.split(JOIN_SYMBOL);
+    const result = {};
+    describeList.forEach((item) => {
+        const [key, value] = item.split(':');
+        const realKey = key.trim();
+        const realValue = value.trim();
+        if (['true', 'false'].includes(realValue)) {
+            result[realKey] = realValue === 'true';
+        }
+        else {
+            result[realKey] = realValue;
+        }
+    });
+    return result;
+};
+const getJSONSchemaDescribe = (jsonSchema) => {
+    let result = {};
+    if (jsonSchema.description) {
+        result = parseZodDescribe(jsonSchema.description);
+    }
+    return result;
+};
+/**
+ * Properties 类型与 Schema 类型的映射关系
+ * blocklets/pages-kit/src/pages/page-maker/custom-component/setting.tsx
+ */
+exports.PROPERTIES_TYPE_SCHEMA = {
+    // Properties 类型到 Zod schema 的映射
+    propertyToZod: {
+        string: () => zod_1.z.string(),
+        multiline: () => zod_1.z.string(),
+        number: () => zod_1.z.number(),
+        decimal: () => zod_1.z.number(),
+        boolean: () => zod_1.z.boolean(),
+        color: () => zod_1.z.string(),
+        url: () => zod_1.z.object({
+            url: zod_1.z.string(),
+            mediaKitUrl: zod_1.z.string().optional(),
+            width: zod_1.z.number().optional(),
+            height: zod_1.z.number().optional(),
+        }),
+        json: (properties, { addZodDescribe, propLLMConfig }) => {
+            const { subProperties } = properties;
+            if (subProperties && Object.keys(subProperties)?.length > 0) {
+                // 递归处理子属性
+                return propertiesToZodSchema(subProperties, { addZodDescribe, llmConfig: propLLMConfig?.subProperties });
+            }
+            return zod_1.z.object({});
+        },
+        yaml: (properties, { addZodDescribe, propLLMConfig }) => {
+            const { subProperties } = properties;
+            if (subProperties && Object.keys(subProperties)?.length > 0) {
+                // 使用联合类型：字符串或结构化对象
+                return zod_1.z.union([
+                    zod_1.z.string(),
+                    propertiesToZodSchema(subProperties, { addZodDescribe, llmConfig: propLLMConfig?.subProperties }),
+                ]);
+            }
+            return zod_1.z.string();
+        },
+        array: (properties, { addZodDescribe, propLLMConfig }) => {
+            const { subProperties } = properties;
+            if (subProperties && Object.keys(subProperties)?.length > 0) {
+                // 递归处理子属性
+                return zod_1.z.array(propertiesToZodSchema(subProperties, { addZodDescribe, llmConfig: propLLMConfig?.subProperties }));
+            }
+            return zod_1.z.array(zod_1.z.any());
+        },
+        component: () => zod_1.z.any(),
+        custom: () => zod_1.z.any(),
+        default: () => zod_1.z.string(),
+    },
+};
+/**
+ * 从 Properties 对象创建 Zod schema
+ */
+function propertiesToZodSchema(properties, { addZodDescribe = false, 
+// 这个目前来说都是可选的，避免用户在使用的过程中疯狂报错，并且目前 setting 中没有必填标识符
+isOptional = true, llmConfig, } = {}) {
+    const schemaObj = {};
+    Object.entries(properties || {}).forEach(([key, prop]) => {
+        if (!prop.data)
+            return;
+        // 如果key未定义，使用id
+        const propKey = prop.data.key || prop.data.id || key;
+        // prop llmConfig
+        const propLLMConfig = llmConfig?.[prop.data.id];
+        // 是否不需要 LLM 处理
+        if (propLLMConfig && !propLLMConfig.isNeedGenerate) {
+            return;
+        }
+        const propType = prop.data.type;
+        const getSchemaFn = (propType in exports.PROPERTIES_TYPE_SCHEMA.propertyToZod
+            ? exports.PROPERTIES_TYPE_SCHEMA.propertyToZod[propType]
+            : exports.PROPERTIES_TYPE_SCHEMA.propertyToZod.default);
+        schemaObj[propKey] = getSchemaFn(prop.data, { addZodDescribe, propLLMConfig });
+        if (isOptional) {
+            schemaObj[propKey] = schemaObj[propKey].optional();
+        }
+        let propDescribe = '';
+        if (addZodDescribe) {
+            propDescribe = stringifyZodDescribe(prop.data, propLLMConfig?.describe ? { llmDescribe: propLLMConfig?.describe } : {});
+        }
+        else if (propLLMConfig?.describe) {
+            propDescribe = propLLMConfig?.describe;
+        }
+        if (propDescribe) {
+            schemaObj[propKey] = schemaObj[propKey].describe(propDescribe);
+        }
+    });
+    return zod_1.z.object(schemaObj);
+}
+/**
+ * 从JSON Schema生成Properties对象
+ */
+function jsonSchemaToProperties(jsonSchema, { existingProperties, key, isRoot, index = 0, } = {}) {
+    let properties = {};
+    let loopProperties = {};
+    if (jsonSchema.type === 'array') {
+        loopProperties = jsonSchema.items?.properties;
+    }
+    else if (jsonSchema.type === 'object') {
+        loopProperties = jsonSchema.properties;
+    }
+    const schemaDescribe = getJSONSchemaDescribe(jsonSchema);
+    const { type, visible } = schemaDescribe;
+    const id = schemaDescribe.id || (0, nanoid_1.nanoid)(helper_1.NANOID_LENGTH);
+    properties[id] = {
+        index,
+        data: {
+            id,
+            key,
+            type,
+            visible,
+            locales: (id && existingProperties?.[id]?.data?.locales) || {
+                en: { name: key },
+                zh: { name: key },
+            },
+        },
+    };
+    if (loopProperties && Object.keys(loopProperties)?.length > 0) {
+        let subIndex = 0;
+        properties[id].data.subProperties = {};
+        // get sub existing properties
+        const subExistingProperties = existingProperties?.[id]?.data?.subProperties ?? existingProperties;
+        Object.entries(loopProperties).forEach(([key, item]) => {
+            properties[id].data.subProperties = {
+                ...properties[id].data.subProperties,
+                ...jsonSchemaToProperties(item, { existingProperties: subExistingProperties, key, index: subIndex++ }),
+            };
+        });
+    }
+    if (isRoot) {
+        properties = properties[id].data.subProperties;
+    }
+    return properties;
+}
+/**
+ * 从Zod schema生成TypeScript类型字符串
+ */
+function zodSchemaToTypeString(schema, typeName, removeUndefined = true) {
+    const { node } = (0, zod_to_ts_1.zodToTs)(schema, typeName);
+    let output = (0, zod_to_ts_1.printNode)(node);
+    if (removeUndefined) {
+        // 移除所有的 "| undefined"
+        output = output.replace(/\s+\|\s+undefined/g, '');
+    }
+    return output;
+}
+/**
+ * 从Zod schema生成JSON Schema
+ */
+function zodSchemaToJsonSchema(schema) {
+    return (0, zod_to_json_schema_1.zodToJsonSchema)(schema, { $refStrategy: 'none' });
+}
+/**
+ * 从TypeScript文件中的类型声明生成Zod schema
+ * 支持处理外部引用类型
+ * @param sourceFilePath 源文件路径
+ * @param typeName 类型名称
+ * @param tsConfigFilePath tsconfig.json 路径，默认为项目根目录下的tsconfig.json
+ */
+async function tsFileToZodSchema(sourceFilePath, typeName) {
+    try {
+        const { typeText, dependencies, imports } = (0, ts_morph_utils_1.extractTypeWithDependencies)(sourceFilePath, typeName);
+        // set imports to empty array
+        const combinedTypeDefinition = (0, ts_morph_utils_1.combineTypeDefinitions)(typeText, dependencies, []);
+        // 使用 ts-to-zod 生成代码，需要手动添加 imports 和 combinedTypeDefinition，因为 zod-to-ts 对 import 处理存在问题
+        const result = (0, ts_to_zod_1.generate)({
+            sourceText: combinedTypeDefinition,
+            keepComments: true,
+        });
+        // 提取生成的 Zod schema 代码
+        const zodSchemaText = result.getZodSchemasFile('zod');
+        // 创建临时目录
+        const tmpDir = path.resolve(config_1.default.env.dataDir, 'temp');
+        try {
+            await fs_1.promises.stat(tmpDir);
+        }
+        catch (error) {
+            // 如果目录不存在，stat 会抛出错误
+            await fs_1.promises.mkdir(tmpDir, { recursive: true });
+        }
+        const fileName = `zodSchema_${typeName}_${(0, nanoid_1.nanoid)(helper_1.NANOID_LENGTH)}.ts`;
+        const filePath = path.join(tmpDir, fileName);
+        // 添加 ts-to-zod 的 imports 和 zodSchemaText
+        const zodSchemaTextWithImports = `
+${imports.join('\n')}
+
+${zodSchemaText}
+    `;
+        // 写入临时文件
+        await fs_1.promises.writeFile(filePath, zodSchemaTextWithImports);
+        // 动态导入生成的模块
+        const module = await Promise.resolve(`${`file://${filePath}`}`).then(s => __importStar(require(s)));
+        // 首字母转换为小写
+        const schemaName = `${(0, lowerFirst_1.default)(typeName)}Schema`;
+        // 获取 schema
+        const schema = module[schemaName];
+        // 清理临时文件
+        await fs_1.promises.unlink(filePath);
+        return schema;
+    }
+    catch (error) {
+        console.error('Failed to generate Zod schema from TypeScript file:', error);
+        console.error('Error details:', error);
+        return zod_1.z.object({}).passthrough();
+    }
+}
+/**
+ * 从TypeScript文件中的类型生成Properties对象
+ * 支持处理外部引用类型
+ * @param sourceFilePath 源文件路径
+ * @param typeName 类型名称
+ * @param existingProperties 已存在的properties对象
+ */
+async function tsFileInterfaceToProperties(sourceFilePath, typeName, existingProperties = {}) {
+    const zodSchema = await tsFileToZodSchema(sourceFilePath, typeName);
+    const jsonSchema = zodSchemaToJsonSchema(zodSchema);
+    // get jsonSchemaToProperties and set isRoot to true
+    return jsonSchemaToProperties(jsonSchema, { existingProperties, key: '', isRoot: true });
+}

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

@@ -1,14 +1,23 @@
 import React from 'react';
 
-export interface HelloWorldProps {
+export interface BlockProps {
+  /** @description id: gs1rn5jmxfvpxptx | type: string | visible: true */
   title?: string;
-  logo?: string | { url: string };
+  /** @description id: 9ajrz12ik7esfk1z | type: string | visible: true */
   description?: string;
+  /** @description id: 3ckcfvf6b7zyskk8 | type: url | visible: true */
+  logo?: {
+    url: string;
+    mediaKitUrl?: string;
+    width?: number;
+    height?: number;
+  };
+  /** @description id: x3lqht8ikble1itx | type: string | visible: false */
   copyright?: string;
 }
 
 // default export
-export default function HelloWorld({ title = 'Hello World', logo, description, copyright }: HelloWorldProps) {
+export default function HelloWorld({ title = 'Hello World', logo, description, copyright }: BlockProps) {
   return (
     <div
       style={{
@@ -52,7 +61,7 @@ export default function HelloWorld({ title = 'Hello World', logo, description, c
 }
 
 // export edit component
-export const EditComponent: React.FC<HelloWorldProps & { onChange?: (value: HelloWorldProps) => void }> = ({
+export const EditComponent: React.FC<BlockProps & { onChange?: (value: BlockProps) => void }> = ({
   onChange,
   ...props
 }) => {