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

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

@@ -0,0 +1,217 @@
+import * as path from 'path';
+import { Project, Node } from 'ts-morph';
+/**
+ * 创建 ts-morph 项目
+ * @param tsConfigFilePath tsconfig.json 文件路径
+ */
+export function createTsMorphProject(tsConfigFilePath = path.resolve(process.cwd(), 'tsconfig.json')) {
+    return new Project({
+        tsConfigFilePath,
+    });
+}
+/**
+ * 解析类型定义文件，提取指定类型及其依赖
+ * @param sourceFilePath 源文件路径
+ * @param typeName 要提取的类型名称
+ * @param tsConfigFilePath tsconfig.json 文件路径
+ */
+export 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 (Node.isInterfaceDeclaration(declaration) || 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 (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 导入语句集合
+ */
+export 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/esm/utils/zod-utils.js

@@ -0,0 +1,269 @@
+import config from '@blocklet/sdk/lib/config';
+import { promises as fs } from 'fs';
+import lowerFirst from 'lodash/lowerFirst';
+import { nanoid } from 'nanoid';
+import * as path from 'path';
+import { generate } from 'ts-to-zod';
+import { z } from 'zod';
+import { zodToJsonSchema } from 'zod-to-json-schema';
+import { zodToTs, printNode } from 'zod-to-ts';
+import { NANOID_LENGTH } from './helper';
+import { extractTypeWithDependencies, combineTypeDefinitions } from './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
+ */
+export const PROPERTIES_TYPE_SCHEMA = {
+    // Properties 类型到 Zod schema 的映射
+    propertyToZod: {
+        string: () => z.string(),
+        multiline: () => z.string(),
+        number: () => z.number(),
+        decimal: () => z.number(),
+        boolean: () => z.boolean(),
+        color: () => z.string(),
+        url: () => z.object({
+            url: z.string(),
+            mediaKitUrl: z.string().optional(),
+            width: z.number().optional(),
+            height: 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 z.object({});
+        },
+        yaml: (properties, { addZodDescribe, propLLMConfig }) => {
+            const { subProperties } = properties;
+            if (subProperties && Object.keys(subProperties)?.length > 0) {
+                // 使用联合类型：字符串或结构化对象
+                return z.union([
+                    z.string(),
+                    propertiesToZodSchema(subProperties, { addZodDescribe, llmConfig: propLLMConfig?.subProperties }),
+                ]);
+            }
+            return z.string();
+        },
+        array: (properties, { addZodDescribe, propLLMConfig }) => {
+            const { subProperties } = properties;
+            if (subProperties && Object.keys(subProperties)?.length > 0) {
+                // 递归处理子属性
+                return z.array(propertiesToZodSchema(subProperties, { addZodDescribe, llmConfig: propLLMConfig?.subProperties }));
+            }
+            return z.array(z.any());
+        },
+        component: () => z.any(),
+        custom: () => z.any(),
+        default: () => z.string(),
+    },
+};
+/**
+ * 从 Properties 对象创建 Zod schema
+ */
+export 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 PROPERTIES_TYPE_SCHEMA.propertyToZod
+            ? PROPERTIES_TYPE_SCHEMA.propertyToZod[propType]
+            : 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 z.object(schemaObj);
+}
+/**
+ * 从JSON Schema生成Properties对象
+ */
+export 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 || nanoid(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类型字符串
+ */
+export function zodSchemaToTypeString(schema, typeName, removeUndefined = true) {
+    const { node } = zodToTs(schema, typeName);
+    let output = printNode(node);
+    if (removeUndefined) {
+        // 移除所有的 "| undefined"
+        output = output.replace(/\s+\|\s+undefined/g, '');
+    }
+    return output;
+}
+/**
+ * 从Zod schema生成JSON Schema
+ */
+export function zodSchemaToJsonSchema(schema) {
+    return zodToJsonSchema(schema, { $refStrategy: 'none' });
+}
+/**
+ * 从TypeScript文件中的类型声明生成Zod schema
+ * 支持处理外部引用类型
+ * @param sourceFilePath 源文件路径
+ * @param typeName 类型名称
+ * @param tsConfigFilePath tsconfig.json 路径，默认为项目根目录下的tsconfig.json
+ */
+export async function tsFileToZodSchema(sourceFilePath, typeName) {
+    try {
+        const { typeText, dependencies, imports } = extractTypeWithDependencies(sourceFilePath, typeName);
+        // set imports to empty array
+        const combinedTypeDefinition = combineTypeDefinitions(typeText, dependencies, []);
+        // 使用 ts-to-zod 生成代码，需要手动添加 imports 和 combinedTypeDefinition，因为 zod-to-ts 对 import 处理存在问题
+        const result = generate({
+            sourceText: combinedTypeDefinition,
+            keepComments: true,
+        });
+        // 提取生成的 Zod schema 代码
+        const zodSchemaText = result.getZodSchemasFile('zod');
+        // 创建临时目录
+        const tmpDir = path.resolve(config.env.dataDir, 'temp');
+        try {
+            await fs.stat(tmpDir);
+        }
+        catch (error) {
+            // 如果目录不存在，stat 会抛出错误
+            await fs.mkdir(tmpDir, { recursive: true });
+        }
+        const fileName = `zodSchema_${typeName}_${nanoid(NANOID_LENGTH)}.ts`;
+        const filePath = path.join(tmpDir, fileName);
+        // 添加 ts-to-zod 的 imports 和 zodSchemaText
+        const zodSchemaTextWithImports = `
+${imports.join('\n')}
+
+${zodSchemaText}
+    `;
+        // 写入临时文件
+        await fs.writeFile(filePath, zodSchemaTextWithImports);
+        // 动态导入生成的模块
+        const module = await import(/* @vite-ignore */ `file://${filePath}`);
+        // 首字母转换为小写
+        const schemaName = `${lowerFirst(typeName)}Schema`;
+        // 获取 schema
+        const schema = module[schemaName];
+        // 清理临时文件
+        await fs.unlink(filePath);
+        return schema;
+    }
+    catch (error) {
+        console.error('Failed to generate Zod schema from TypeScript file:', error);
+        console.error('Error details:', error);
+        return z.object({}).passthrough();
+    }
+}
+/**
+ * 从TypeScript文件中的类型生成Properties对象
+ * 支持处理外部引用类型
+ * @param sourceFilePath 源文件路径
+ * @param typeName 类型名称
+ * @param existingProperties 已存在的properties对象
+ */
+export 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/types/constants/new-block-template/index.d.ts

@@ -1,13 +1,20 @@
 import React from 'react';
-export interface HelloWorldProps {
+export interface BlockProps {
+    /** @description id: gs1rn5jmxfvpxptx | type: string | visible: true */
     title?: string;
-    logo?: 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?: string;
+    /** @description id: x3lqht8ikble1itx | type: string | visible: false */
     copyright?: string;
 }
-export default function HelloWorld({ title, logo, description, copyright }: HelloWorldProps): import("react/jsx-runtime").JSX.Element;
-export declare const EditComponent: React.FC<HelloWorldProps & {
-    onChange?: (value: HelloWorldProps) => void;
+export default function HelloWorld({ title, logo, description, copyright }: BlockProps): import("react/jsx-runtime").JSX.Element;
+export declare const EditComponent: React.FC<BlockProps & {
+    onChange?: (value: BlockProps) => void;
 }>;

package/lib/types/plugins/_theme.d.ts

@@ -1 +1,5 @@
-export default function Theme(): import("react/jsx-runtime").JSX.Element;
+declare function LayoutWrapper({ loadState, loadedData, ...rest }: {
+    loadState: any;
+    loadedData: any;
+}): import("react/jsx-runtime").JSX.Element;
+export default LayoutWrapper;