@zhin.js/core 1.0.1 → 1.0.2

package/lib/component.js

@@ -1,273 +1,469 @@
 import { getValueWithRuntime, compiler, segment } from './utils.js';
+// 组件匹配符号
 export const CapWithChild = Symbol('CapWithChild');
 export const CapWithClose = Symbol('CapWithClose');
+// 组件定义函数 - 简化版，只支持函数式组件
+export function defineComponent(component, name = component.name) {
+    if (name) {
+        // 创建一个新的函数来避免修改只读属性
+        const namedComponent = component;
+        Object.defineProperty(namedComponent, 'name', {
+            value: name,
+            writable: false,
+            enumerable: false,
+            configurable: true
+        });
+        return namedComponent;
+    }
+    return component;
+}
+// 组件匹配函数
+export function matchComponent(comp, template) {
+    // 使用更复杂的正则表达式来正确处理大括号内的内容
+    const selfClosingRegex = new RegExp(`<${comp.name}((?:[^>]|{[^}]*})*)?/>`);
+    const closingRegex = new RegExp(`<${comp.name}((?:[^>]|{[^}]*})*)?>([^<]*?)</${comp.name}>`);
+    let match = template.match(selfClosingRegex);
+    if (!match) {
+        match = template.match(closingRegex);
+    }
+    return match ? match[0] : '';
+}
+// 属性解析函数 - 支持 children
+export function getProps(comp, template, context) {
+    // 1. 首先匹配组件标签，支持自闭合和闭合标签
+    const selfClosingRegex = new RegExp(`<${comp.name}((?:[^>]|{[^}]*})*)?/>`);
+    const closingRegex = new RegExp(`<${comp.name}((?:[^>]|{[^}]*})*)?>([^<]*?)</${comp.name}>`);
+    let match = template.match(selfClosingRegex);
+    let isSelfClosing = true;
+    let children = '';
+    if (!match) {
+        match = template.match(closingRegex);
+        isSelfClosing = false;
+        if (match) {
+            children = match[2] || '';
+        }
+    }
+    if (!match) {
+        return {};
+    }
+    const attributesString = match[1] || '';
+    // 2. 解析属性，支持多种格式
+    const props = {};
+    // 如果有属性字符串，解析属性
+    if (attributesString.trim()) {
+        // 使用手动解析来处理复杂的嵌套结构
+        let i = 0;
+        while (i < attributesString.length) {
+            // 跳过空白字符
+            while (i < attributesString.length && /\s/.test(attributesString[i])) {
+                i++;
+            }
+            if (i >= attributesString.length)
+                break;
+            // 解析属性名
+            let key = '';
+            while (i < attributesString.length && /[a-zA-Z0-9_$\-]/.test(attributesString[i])) {
+                key += attributesString[i];
+                i++;
+            }
+            if (!key) {
+                i++;
+                continue;
+            }
+            // 跳过空白字符
+            while (i < attributesString.length && /\s/.test(attributesString[i])) {
+                i++;
+            }
+            // 检查是否有等号
+            if (i < attributesString.length && attributesString[i] === '=') {
+                i++; // 跳过等号
+                // 跳过空白字符
+                while (i < attributesString.length && /\s/.test(attributesString[i])) {
+                    i++;
+                }
+                if (i >= attributesString.length) {
+                    props[key] = true;
+                    break;
+                }
+                // 解析属性值
+                const value = parseAttributeValue(attributesString, i, context);
+                props[key] = value.value;
+                i = value.nextIndex;
+            }
+            else {
+                // 没有等号，是布尔属性
+                props[key] = true;
+            }
+        }
+    }
+    // 3. 处理 children（如果不是自闭合标签）
+    if (!isSelfClosing && children.trim()) {
+        props.children = children;
+    }
+    // 4. 处理 kebab-case 到 camelCase 的转换
+    const camelCaseProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        camelCaseProps[camelKey] = value;
+    }
+    return camelCaseProps;
+}
 /**
- * Component类：消息组件系统核心，支持模板渲染、属性解析、循环等。
- * 用于自定义消息结构和复用UI片段。
- * @template T 组件props类型
- * @template D 组件data类型
- * @template P 组件props配置类型
+ * 解析属性值
  */
-export class Component {
-    $options;
-    [CapWithClose];
-    [CapWithChild];
-    $props = [];
-    get name() {
-        return this.$options.name;
+function parseAttributeValue(str, startIndex, context) {
+    let i = startIndex;
+    // 处理引号包围的字符串
+    if (str[i] === '"' || str[i] === "'") {
+        const quote = str[i];
+        i++; // 跳过开始引号
+        let value = '';
+        while (i < str.length && str[i] !== quote) {
+            if (str[i] === '\\' && i + 1 < str.length) {
+                // 处理转义字符
+                i++;
+                value += str[i];
+            }
+            else {
+                value += str[i];
+            }
+            i++;
+        }
+        if (i < str.length) {
+            i++; // 跳过结束引号
+        }
+        // 检查引号内是否包含表达式（大括号）
+        if (value.includes('{') && value.includes('}')) {
+            // 包含表达式，进行求值
+            const evaluatedValue = evaluateQuotedExpression(value, context);
+            return { value: evaluatedValue, nextIndex: i };
+        }
+        return { value, nextIndex: i };
     }
-    set name(value) {
-        this.$options.name = value;
+    // 处理大括号包围的表达式
+    if (str[i] === '{') {
+        let braceCount = 0;
+        let value = '';
+        i++; // 跳过开始大括号
+        while (i < str.length) {
+            if (str[i] === '{') {
+                braceCount++;
+            }
+            else if (str[i] === '}') {
+                if (braceCount === 0) {
+                    i++; // 跳过结束大括号
+                    break;
+                }
+                braceCount--;
+            }
+            value += str[i];
+            i++;
+        }
+        return { value: parseExpressionValue(value, context), nextIndex: i };
     }
-    /**
-     * 构造函数：初始化组件，生成属性正则
-     * @param $options 组件配置项
-     */
-    constructor($options) {
-        this.$options = $options;
-        this.formatProps();
-        this[CapWithChild] = new RegExp(`<${$options.name}([^>]*)?>([^<])*?</${$options.name}>`);
-        this[CapWithClose] = new RegExp(`<${$options.name}([^>]*)?/>`);
+    // 处理无引号的值
+    let value = '';
+    while (i < str.length && !/\s/.test(str[i]) && str[i] !== '>') {
+        value += str[i];
+        i++;
     }
-    /**
-     * 判断模板是否为自闭合标签
-     * @param template 模板字符串
-     */
-    isClosing(template) {
-        return this[CapWithClose].test(template);
+    return { value: parseUnquotedValue(value, context), nextIndex: i };
+}
+/**
+ * 求值引号内的表达式
+ */
+function evaluateQuotedExpression(quotedValue, context) {
+    if (!context)
+        return quotedValue;
+    // 处理引号内的表达式，将 {expr} 格式转换为 ${expr} 格式
+    let result = quotedValue;
+    const expressionRegex = /\{([^}]+)\}/g;
+    let match;
+    while ((match = expressionRegex.exec(quotedValue)) !== null) {
+        const expr = match[1];
+        try {
+            const value = context.getValue(expr);
+            if (value !== undefined && value !== expr) {
+                const stringValue = typeof value === 'string' ? value : JSON.stringify(value);
+                result = result.replace(match[0], stringValue);
+            }
+        }
+        catch (error) {
+            // 如果求值失败，保持原始表达式
+        }
+    }
+    return result;
+}
+/**
+ * 解析表达式值
+ */
+function parseExpressionValue(expr, context) {
+    expr = expr.trim();
+    // 处理字符串字面量
+    if ((expr.startsWith('"') && expr.endsWith('"')) ||
+        (expr.startsWith("'") && expr.endsWith("'"))) {
+        return expr.slice(1, -1);
     }
-    /**
-     * 匹配组件标签
-     * @param template 模板字符串
-     * @returns 匹配到的标签内容
-     */
-    match(template) {
-        let [match] = this[CapWithChild].exec(template) || [];
-        if (match)
-            return match;
-        [match] = this[CapWithClose].exec(template) || [];
-        return match;
+    // 处理数字
+    if (/^-?\d+(\.\d+)?$/.test(expr)) {
+        return parseFloat(expr);
     }
-    /**
-     * 格式化props配置，生成props数组
-     */
-    formatProps() {
-        for (const [key, value] of Object.entries(this.$options.props || {})) {
-            this.formatProp(key, value);
+    // 处理布尔值
+    if (expr === 'true')
+        return true;
+    if (expr === 'false')
+        return false;
+    if (expr === 'null')
+        return null;
+    if (expr === 'undefined')
+        return undefined;
+    // 处理数组
+    if (expr.startsWith('[') && expr.endsWith(']')) {
+        try {
+            return JSON.parse(expr);
+        }
+        catch {
+            // 如果JSON解析失败，尝试手动解析简单数组
+            const items = expr.slice(1, -1).split(',').map(item => parseExpressionValue(item.trim(), context));
+            return items;
         }
     }
-    /**
-     * 格式化单个prop配置
-     * @param name 属性名
-     * @param value 类型或配置
-     */
-    formatProp(name, value) {
-        if (typeof value === 'function') {
-            return this.$props.push({
-                name,
-                type: value,
-                default: undefined,
-            });
+    // 处理对象 - 改进的嵌套大括号处理
+    if (expr.startsWith('{') && expr.endsWith('}')) {
+        try {
+            return JSON.parse(expr);
+        }
+        catch {
+            // 如果JSON解析失败，尝试手动解析简单对象
+            try {
+                return parseSimpleObject(expr);
+            }
+            catch {
+                // 如果都失败，返回原始字符串
+                return expr;
+            }
         }
-        return this.$props.push({
-            name,
-            type: value.type,
-            default: value.default,
-        });
     }
-    parseProps(template) {
-        const result = Object.fromEntries(this.$props.map(prop => {
-            const generateDefault = typeof prop.default === 'function' ? prop.default : () => prop.default;
-            return [prop.name, generateDefault()];
-        }));
-        const matchedArr = [...template.matchAll(/([a-zA-Z\-:]+)\s*=\s*(['"])(.*?)\2/g)].filter(Boolean);
-        if (!matchedArr.length)
+    // 处理表达式 - 在沙盒中执行
+    if (context) {
+        try {
+            const result = context.getValue(expr);
+            // 如果结果是 undefined，说明表达式被阻止或求值失败，返回原始表达式
+            if (result === undefined) {
+                return expr;
+            }
             return result;
-        for (const [_, key, __, value] of matchedArr) {
-            Object.defineProperty(result, key, {
-                enumerable: true,
-                writable: false,
-                value,
-            });
         }
-        return result;
-    }
-    parseChildren(template) {
-        if (this.isClosing(template))
-            return '';
-        const matched = template.match(/<[^>]+>([^<]*?)<\/[^?]+>/);
-        if (!matched)
-            return '';
-        return matched[1];
+        catch (error) {
+            // 如果执行失败，返回原始表达式
+            return expr;
+        }
     }
-    async render(template, context) {
-        const props = this.parseProps(template);
-        const assignValue = () => {
-            for (const key of keys) {
-                if (!key.startsWith(':'))
-                    continue;
-                Object.defineProperty(props, key.slice(1), {
-                    value: getValueWithRuntime(Reflect.get(props, key), context.parent),
-                });
-                Reflect.deleteProperty(props, key);
+    // 如果没有上下文，返回原始表达式
+    return expr;
+}
+/**
+ * 解析简单对象（处理嵌套大括号和方括号）
+ */
+function parseSimpleObject(objStr) {
+    const result = {};
+    let i = 1; // 跳过开始的 {
+    let depth = 0;
+    let bracketDepth = 0;
+    let key = '';
+    let value = '';
+    let inKey = true;
+    let inString = false;
+    let stringChar = '';
+    while (i < objStr.length - 1) { // 跳过结束的 }
+        const char = objStr[i];
+        if (!inString) {
+            if (char === '{') {
+                depth++;
+                value += char;
             }
-        };
-        const keys = Object.keys(props).map(key => {
-            const newKey = key.replace(/(\w)+-(\w)/g, function (_, char, later) {
-                return `${char}${later.toUpperCase()}`;
-            });
-            if (key !== newKey) {
-                Object.defineProperty(props, newKey, {
-                    value: Reflect.get(props, key),
-                    enumerable: true,
-                });
-                Reflect.deleteProperty(props, key);
+            else if (char === '}') {
+                depth--;
+                value += char;
             }
-            return newKey;
-        });
-        assignValue();
-        const data = this.$options.data ? this.$options.data.apply(props) : {};
-        for (const key of keys) {
-            if (key === 'vFor') {
-                const { 'vFor': expression, 'v-for': _, ...rest } = props;
-                const { name, value, ...other } = Component.fixLoop(expression);
-                const list = value === '__loop__' ? other[value] : getValueWithRuntime(value, context);
-                const fnStr = `
-                const result=[];\n
-                for(const ${name} of list){\n
-                  result.push(render(props,{\n
-                    ...context,\n
-                    children:'',\n
-                    $origin:'${template.replace(/'/g, "'")}',
-                    parent:{\n
-                      ...context.parent,\n
-                      ${name}:list[${name}]
-                    }\n
-                  }))\n
+            else if (char === '[') {
+                bracketDepth++;
+                value += char;
+            }
+            else if (char === ']') {
+                bracketDepth--;
+                value += char;
+            }
+            else if (char === ':' && depth === 0 && bracketDepth === 0) {
+                inKey = false;
+                i++;
+                continue;
+            }
+            else if (char === ',' && depth === 0 && bracketDepth === 0) {
+                // 处理键值对
+                if (key.trim() && value.trim()) {
+                    const parsedValue = parseExpressionValue(value.trim());
+                    result[key.trim()] = parsedValue;
                 }
-                return result;`;
-                const fn = new Function('render,list,props,context', fnStr);
-                const newTpl = template
-                    .replace(`v-for="${expression}"`, '')
-                    .replace(`v-for='${expression}'`, '')
-                    .replace(`vFor="${expression}"`, '')
-                    .replace(`vFor='${expression}'`, '');
-                return (await Promise.all(fn(this.render.bind(this), list, newTpl, context))).join('');
+                key = '';
+                value = '';
+                inKey = true;
+                i++;
+                continue;
             }
-            if (key === 'vIf') {
-                const needRender = getValueWithRuntime(Reflect.get(props, 'vIf'), context);
-                if (!needRender)
-                    return '';
+            else if (char === '"' || char === "'") {
+                inString = true;
+                stringChar = char;
+                if (inKey) {
+                    key += char;
+                }
+                else {
+                    value += char;
+                }
+            }
+            else {
+                if (inKey) {
+                    key += char;
+                }
+                else {
+                    value += char;
+                }
             }
         }
-        context.children = this.parseChildren(template) || context.children;
-        const ctx = {
-            $slots: context.$slots || {},
-            ...props,
-            ...data,
-            $message: context.$message,
-            render: context.render,
-            parent: context,
-            children: context.children,
-        };
-        const result = segment.toString(await this.$options.render(props, ctx));
-        context.$root = context.$root.replace(context.$origin || template, result.includes('<') ? segment.escape(result) : result);
-        return context.render(context.$root, context);
+        else {
+            if (char === stringChar) {
+                inString = false;
+            }
+            if (inKey) {
+                key += char;
+            }
+            else {
+                value += char;
+            }
+        }
+        i++;
+    }
+    // 处理最后一个键值对
+    if (key.trim() && value.trim()) {
+        const parsedValue = parseExpressionValue(value.trim());
+        result[key.trim()] = parsedValue;
     }
+    return result;
 }
-export function defineComponent(options, name = options.name) {
-    if (typeof options === 'function')
-        options = {
-            name,
-            render: options,
-        };
-    return new Component(options);
+/**
+ * 解析无引号的值
+ */
+function parseUnquotedValue(value, context) {
+    // 检查是否是大括号表达式
+    if (value.startsWith('{') && value.endsWith('}')) {
+        const expr = value.slice(1, -1); // 移除大括号
+        return parseExpressionValue(expr, context);
+    }
+    // 处理布尔值
+    if (value === 'true')
+        return true;
+    if (value === 'false')
+        return false;
+    // 处理数字
+    if (/^-?\d+(\.\d+)?$/.test(value)) {
+        return parseFloat(value);
+    }
+    // 处理 null/undefined
+    if (value === 'null')
+        return null;
+    if (value === 'undefined')
+        return undefined;
+    // 其他情况作为字符串处理
+    return value;
 }
-(function (Component) {
-    Component.fixLoop = (loop) => {
-        let [_, name, value] = /(\S+)\sin\s(\S+)/.exec(loop) || [];
-        if (/\d+/.test(value))
-            value = `[${new Array(+value)
-                .fill(0)
-                .map((_, i) => i)
-                .join(',')}]`;
-        if (/^\[.+]$/.test(value)) {
-            return { name, value: '__loop__', __loop__: JSON.parse(value) };
-        }
-        return { name, value };
+// 创建组件上下文的工厂函数
+export function createComponentContext(props = {}, parent, root = '') {
+    return {
+        // 基础渲染能力
+        render: async (template, context) => {
+            // 这里需要实现渲染逻辑
+            return template;
+        },
+        // 数据访问（只读）
+        props: Object.freeze({ ...props }),
+        // 父组件上下文（只读）
+        parent: parent ? Object.freeze(parent) : undefined,
+        // 根模板（只读）
+        root,
+        // 子组件内容（React 概念）
+        children: undefined,
+        getValue: (template) => getValueWithRuntime(template, props),
+        compile: (template) => compiler(template, props),
     };
-    async function render(componentMap, options) {
-        if (!componentMap.size)
-            return options;
-        const components = [
-            ...componentMap.values(),
-            Component.Template,
-            Component.Slot,
-        ];
-        const createContext = (runtime = {}, parent, $root) => {
-            return {
-                $slots: {},
-                ...runtime,
-                $message: parent.$message,
-                $root,
-                parent,
-                render: (template, context) => {
-                    return renderWithRuntime(template, context, context.$root);
-                },
-            };
-        };
-        const renderWithRuntime = async (template, runtime, $root) => {
-            const ctx = createContext(runtime, runtime, $root);
-            template = compiler(template, runtime);
+}
+export async function renderComponent(component, template, context) {
+    const props = getProps(component, template, context);
+    return component(props, context);
+}
+// 渲染函数 - 支持新的组件系统
+export async function renderComponents(componentMap, options, customContext) {
+    if (!componentMap.size)
+        return options;
+    const components = [...Array.from(componentMap.values()), Fetch, Fragment];
+    // 创建根上下文
+    const rootContext = customContext || createComponentContext(options, undefined, typeof options.content === 'string' ? options.content : segment.toString(options.content));
+    // 实现渲染逻辑
+    const renderWithContext = async (template, context) => {
+        let result = template;
+        let hasChanges = true;
+        let iterations = 0;
+        const maxIterations = 10; // 防止无限循环
+        // 编译模板
+        result = context.compile(result);
+        // 递归处理所有组件，直到没有更多组件需要渲染
+        while (hasChanges && iterations < maxIterations) {
+            hasChanges = false;
+            iterations++;
             for (const comp of components) {
-                const match = comp.match(template);
-                if (!match)
-                    continue;
-                return await comp.render(match, ctx);
-            }
-            return template;
-        };
-        const template = segment.toString(options.content);
-        const output = await renderWithRuntime(template, options, template);
-        const content = segment.from(output);
-        return {
-            ...options,
-            content
-        };
-    }
-    Component.render = render;
-    Component.Template = defineComponent({
-        name: 'template',
-        render(props, context) {
-            const keys = Object.keys(props);
-            if (!keys.length)
-                keys.push('#default');
-            for (const key of Object.keys(props)) {
-                if (key.startsWith('#')) {
-                    context.parent.$slots[key.slice(1)] = (async (p) => {
-                        return await context.render(context.children || '', { ...context, ...p });
-                    });
+                const match = matchComponent(comp, result);
+                if (match) {
+                    // 创建组件特定的上下文
+                    const componentContext = createComponentContext(context.props, context, result);
+                    const rendered = await renderComponent(comp, match, componentContext);
+                    const renderedString = typeof rendered === 'string' ? rendered : segment.toString(rendered);
+                    result = result.replace(match, renderedString);
+                    hasChanges = true;
+                    break; // 处理一个组件后重新开始循环
                 }
             }
-            return '';
-        },
-    });
-    Component.Slot = defineComponent({
-        name: 'slot',
-        props: {
-            name: String,
-        },
-        render({ name, ...props }, context) {
-            name = name || 'default';
-            if (!context.parent)
-                return '';
-            if (context.parent.$slots[name])
-                return context.parent.$slots[name](props, context);
-            return context.children || '';
-        },
-    });
-})(Component || (Component = {}));
-process.on('unhandledRejection', e => {
-    // console.error 已替换为注释
-});
+        }
+        return result;
+    };
+    // 更新根上下文的渲染函数
+    rootContext.render = async (template, context) => {
+        return await renderWithContext(template, rootContext);
+    };
+    // 渲染模板
+    const output = await renderWithContext(rootContext.root, rootContext);
+    const content = typeof output === 'string' ? segment.from(output) : output;
+    return {
+        ...options,
+        content
+    };
+}
+// 内置组件
+export const Fragment = defineComponent(async (props, context) => {
+    let children = props.children || '';
+    if (Array.isArray(children)) {
+        return children.join('');
+    }
+    if (typeof children === 'string') {
+        try {
+            const parsed = JSON.parse(segment.unescape(children));
+            return context.render(parsed || '', context);
+        }
+        catch {
+            return context.render(children || '', context);
+        }
+    }
+    return String(children);
+}, 'Fragment');
+export const Fetch = defineComponent(async ({ url }) => {
+    return await fetch(url).then((r) => r.text());
+}, 'fetch');
 //# sourceMappingURL=component.js.map