@zhin.js/core 1.0.1 → 1.0.2

package/src/jsx-runtime.ts

@@ -0,0 +1,12 @@
+// JSX 运行时入口文件
+import { jsx, jsxs, Fragment, renderJSX } from './jsx.js';
+
+export { jsx, jsxs, Fragment, renderJSX };
+
+// 默认导出 JSX 运行时
+export default {
+    jsx,
+    jsxs,
+    Fragment,
+    renderJSX
+};

package/src/jsx.d.ts

@@ -0,0 +1,52 @@
+import { SendContent } from './types.js';
+import { Component,ComponentContext } from './component.js';
+import { MessageElement } from './types.js';
+
+declare global {
+    namespace JSX {
+        interface Element {
+            type: string | Component<any>;
+            data: Record<string, any>;
+            children?: JSXChildren;
+        }
+
+        interface ElementClass {
+            render(props: any, context?: ComponentContext): MaybePromise<SendContent>;
+        }
+
+        interface ElementAttributesProperty {
+            data: {};
+        }
+
+        interface ElementChildrenAttribute {
+            children: {};
+        }
+
+        interface IntrinsicElements {
+            // 简化的组件元素
+            fetch: JSXFetchElement;
+        }
+    }
+}
+
+// 简化的组件属性接口
+interface JSXBaseElement {
+    children?: JSXChildren;
+}
+
+interface JSXFetchElement extends JSXBaseElement {
+    url?: string;
+}
+
+// JSX 子元素类型
+type JSXChildren = MessageElement | string | number | boolean | null | undefined | JSXChildren[];
+
+// JSX 元素类型
+type JSXElement = {
+    type: string | Component<any>;
+    data: Record<string, any>;
+    children?: JSXChildren;
+};
+
+// 类型辅助
+type MaybePromise<T> = T | Promise<T>;

package/src/jsx.ts

@@ -0,0 +1,92 @@
+import { MaybePromise } from '@zhin.js/types';
+import { SendContent,MessageElement } from './types.js';
+import { MessageComponent } from './message.js';
+import { Component, ComponentContext } from './component.js';
+
+
+// JSX 子元素类型
+export type JSXChildren = MessageElement | string | number | boolean | null | undefined | JSXChildren[];
+
+// JSX 元素类型
+export type JSXElementType = string | Component<any> ;
+
+// JSX 属性类型
+export type JSXProps = Record<string, any> & {
+    children?: JSXChildren;
+};
+export {Fragment} from './component.js'
+// 全局 JSX 命名空间
+declare global {
+    namespace JSX {
+        interface Element extends MessageComponent<any> {}
+        interface ElementClass {
+            render(props: any, context?: ComponentContext): MaybePromise<SendContent>;
+        }
+        interface ElementAttributesProperty {
+            data: {};
+        }
+        interface ElementChildrenAttribute {
+            children: {};
+        }
+        interface IntrinsicElements {
+            [elemName: string]: any;
+        }
+    }
+}
+
+// JSX 运行时函数
+export function jsx(type: JSXElementType, data: JSXProps): MessageElement {
+    return {
+        type,
+        data,
+    } as MessageElement;
+}
+
+// JSX Fragment 支持
+export function jsxs(type: JSXElementType, props: JSXProps): MessageElement {
+    return jsx(type, props);
+}
+
+
+// JSX 渲染函数
+export async function renderJSX(element: MessageComponent<any>, context?: ComponentContext): Promise<SendContent> {
+    if (typeof element.type === 'string') {
+        if (element.type === 'Fragment') {
+            return await renderChildren(element.data.children, context);
+        }
+        // 其他内置组件处理
+        return await renderChildren(element.data.children, context);
+    } else if (typeof element.type === 'function') {
+        // 函数组件
+        const component = element.type as Component<any>;
+        return await component(element.data, context || {} as ComponentContext);
+    } else {
+        // 类组件或其他类型
+        const component = element.type as Component<any>;
+        return await component(element.data, context || {} as ComponentContext);
+    }
+}
+
+// 渲染子元素
+async function renderChildren(children: JSXChildren, context?: ComponentContext): Promise<SendContent> {
+    if (children == null) return '';
+    if (typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') {
+        return String(children);
+    }
+    if (Array.isArray(children)) {
+        const results = await Promise.all(children.map(async child => {
+            if (typeof child === 'string' || typeof child === 'number' || typeof child === 'boolean') {
+                return String(child);
+            }
+            if (child && typeof child === 'object' && 'type' in child) {
+                return await renderJSX(child as MessageComponent<any>, context);
+            }
+            return '';
+        }));
+        return results.join('');
+    }
+    if (children && typeof children === 'object' && 'type' in children) {
+        return await renderJSX(children as MessageComponent<any>, context);
+    }
+    return '';
+}

package/src/message.ts

@@ -1,10 +1,13 @@
-import {MaybePromise} from "@zhin.js/types";
-import {MessageSegment, MessageSender, RegisteredAdapter, SendContent} from "./types";
+import {MessageElement, MessageSender, SendContent} from "./types";
+import { Component } from "./component.js";
 
 /**
  * 消息组件类型：用于自定义消息结构
  */
-export type MessageComponent<T extends object>=(props:T&{children:SendContent})=>MaybePromise<SendContent>
+export type MessageComponent<T extends object>={
+    type:Component<T&{children?:SendContent}>
+    data:T
+}
 /**
  * 消息频道信息
  */
@@ -23,7 +26,7 @@ export interface MessageBase {
     $id: string;
     $adapter:string
     $bot:string
-    $content: MessageSegment[];
+    $content: MessageElement[];
     $sender: MessageSender;
     $reply(content:SendContent,quote?:boolean|string):Promise<void>
     $channel: MessageChannel;

package/src/plugin.ts

@@ -9,7 +9,7 @@ import {Message} from './message.js'
 import {Dependency, Logger,} from "@zhin.js/hmr";
 import {App} from "./app";
 import {MessageCommand} from "./command.js";
-import {Component} from "./component.js";
+import {Component, renderComponents} from "./component.js";
 import { PluginError, MessageError, errorManager } from './errors.js';
 import {remove} from "./utils.js";
 import {Prompt} from "./prompt.js";
@@ -30,7 +30,7 @@ export type MessageMiddleware<P extends RegisteredAdapter=RegisteredAdapter> = (
  */
 export class Plugin extends Dependency<Plugin> {
     middlewares: MessageMiddleware<any>[] = [];
-    components: Map<string, Component<any, any, any>> = new Map();
+    components: Map<string, Component<any>> = new Map();
     schemas: Map<string,Schema<any>>=new Map();
     commands:MessageCommand[]=[];
     crons:Cron[]=[];
@@ -54,7 +54,7 @@ export class Plugin extends Dependency<Plugin> {
             return next()
         });
         // 发送前渲染组件
-        this.beforeSend((options)=>Component.render(this.components,options))
+        this.beforeSend((options)=>renderComponents(this.components,options))
         // 资源清理：卸载时清空模型、定时任务等
         this.on('dispose',()=>{
             for(const name of this.schemas.keys()){
@@ -140,7 +140,7 @@ export class Plugin extends Dependency<Plugin> {
         return temp.getLogger(names.join('/'))
     }
     /** 添加组件 */
-    addComponent<T = {}, D = {}, P = Component.Props<T>>(component:Component<T,D,P>){
+    addComponent<T=any>(component:Component<T>){
         this.components.set(component.name,component);
     }
     /** 添加中间件 */

package/src/types.ts

@@ -3,6 +3,7 @@ import {MessageChannel} from "./message.js";
 import {Adapter} from "./adapter.js";
 import {Bot,BotConfig} from "./bot.js";
 import { Databases,Registry } from "@zhin.js/database";
+import { MessageComponent } from "./message.js";
 
 /**
  * 类型定义文件：包含适配器、消息、数据库、配置等核心类型声明。
@@ -52,6 +53,7 @@ export interface MessageSegment {
   type: string;
   data: Record<string, any>;
 }
+export type MessageElement=MessageSegment|MessageComponent<any>
 /**
  * 单个或数组类型
  */
@@ -59,7 +61,7 @@ export type MaybeArray<T>=T|T[]
 /**
  * 消息发送内容类型
  */
-export type SendContent=MaybeArray<string|MessageSegment>
+export type SendContent=MaybeArray<string|MessageElement>
 /**
  * 消息发送者信息
  */

package/src/utils.ts

@@ -1,4 +1,4 @@
-import {Dict, MessageSegment, SendContent} from "./types";
+import {Dict, MessageElement, MessageSegment, SendContent} from "./types";
 
 export function getValueWithRuntime(template: string, ctx: Dict) {
     const result = evaluate(template, ctx);
@@ -79,10 +79,10 @@ export namespace segment{
     }
     export function from(content: SendContent): SendContent {
         if (!Array.isArray(content)) content=[content];
-        const toString=(template:string|MessageSegment)=>{
+        const toString=(template:string|MessageElement)=>{
             if(typeof template!=='string') return [template]
             template=unescape(template);
-            const result: MessageSegment[] = [];
+            const result: MessageElement[] = [];
             const closingReg = /<(\S+)(\s[^>]+)?\/>/;
             const twinningReg = /<(\S+)(\s[^>]+)?>([\s\S]*?)<\/\1>/;
             while (template.length) {
@@ -132,7 +132,7 @@ export namespace segment{
         return content.reduce((result,item)=>{
             result.push(...toString(item))
             return result;
-        },[] as MessageSegment[])
+        },[] as MessageElement[])
     }
     export function raw(content:SendContent){
         if(!Array.isArray(content)) content=[content]
@@ -147,7 +147,8 @@ export namespace segment{
         if(!Array.isArray(content)) content=[content]
         return content.map(item=>{
             if(typeof item==='string') return item
-            const {type,data}=item
+            let {type,data}=item
+            if(typeof type==='function') type=type.name
             if(type==='text') return data.text
             return `<${type} ${Object.keys(data).map(key=>`${key}='${escape(JSON.stringify(data[key]))}'`).join(' ')}/>`
         }).join('')

package/tests/component-new.test.ts

@@ -0,0 +1,348 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { 
+  defineComponent, 
+  createComponentContext, 
+  renderComponents, 
+  getProps,
+  Component,
+  ComponentContext,
+  Fragment,
+  Fetch
+} from '../src/component'
+import { Message } from '../src/message'
+import { SendOptions } from '../src/types'
+
+// Mock utils functions
+vi.mock('../src/utils', () => ({
+  getValueWithRuntime: vi.fn((expression, context) => {
+    // Simple mock implementation for testing
+    if (typeof expression === 'string' && context) {
+      // Handle simple variable access
+      if (expression in context) {
+        return context[expression]
+      }
+      // Handle object property access like 'user.name'
+      if (expression.includes('.')) {
+        const [obj, prop] = expression.split('.')
+        return context[obj]?.[prop]
+      }
+      // Handle simple expressions
+      try {
+        return eval(expression)
+      } catch {
+        return expression
+      }
+    }
+    return expression
+  }),
+  compiler: vi.fn((template, context) => template),
+  segment: {
+    toString: vi.fn((content) => typeof content === 'string' ? content : JSON.stringify(content)),
+    from: vi.fn((content) => content),
+    escape: vi.fn((content) => content.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
+  }
+}))
+
+describe('函数式组件系统测试', () => {
+  let mockContext: ComponentContext
+  let mockMessage: Message
+
+  beforeEach(() => {
+    mockMessage = {
+      $id: '1',
+      $adapter: 'test',
+      $bot: 'test-bot',
+      $content: [],
+      $sender: { id: 'user1', name: 'User' },
+      $reply: vi.fn(),
+      $channel: { id: 'channel1', type: 'private' },
+      $timestamp: Date.now(),
+      $raw: 'test'
+    }
+
+    mockContext = createComponentContext(
+      { user: { name: 'John', age: 25 } },
+      undefined,
+      'test template'
+    )
+  })
+
+  describe('defineComponent 函数测试', () => {
+    it('应该正确创建函数式组件', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: { name: string }, context: ComponentContext) {
+        return `Hello ${props.name}`
+      }, 'test-component')
+
+      expect(TestComponent).toBeInstanceOf(Function)
+      expect(TestComponent.name).toBe('test-component')
+    })
+
+    it('应该支持异步组件', async () => {
+      const AsyncComponent = defineComponent(async function AsyncComponent(props: { delay: number }, context: ComponentContext) {
+        await new Promise(resolve => setTimeout(resolve, props.delay))
+        return `Delayed: ${props.delay}ms`
+      }, 'async-component')
+
+      const result = await AsyncComponent({ delay: 10 }, mockContext)
+      expect(result).toBe('Delayed: 10ms')
+    })
+  })
+
+  describe('getProps 函数测试', () => {
+    it('应该正确解析简单属性', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test name="John" age={25} active={true} />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.name).toBe('John')
+      expect(props.age).toBe(25)
+      expect(props.active).toBe(true)
+    })
+
+    it('应该正确解析表达式属性', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test sum={1+1} />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.sum).toBe(2)
+    })
+
+    it('应该正确处理 kebab-case 到 camelCase 转换', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test user-name="John" user-age={25} is-active={true} />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.userName).toBe('John')
+      expect(props.userAge).toBe(25)
+      expect(props.isActive).toBe(true)
+    })
+
+    it('应该正确处理 children 属性', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test>Hello World</test>'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.children).toBe('Hello World')
+    })
+
+    it('应该正确处理自闭合标签', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test name="John" />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.name).toBe('John')
+      expect(props.children).toBeUndefined()
+    })
+  })
+
+  describe('createComponentContext 函数测试', () => {
+    it('应该正确创建组件上下文', () => {
+      const context = createComponentContext(
+        { user: { name: 'John' } },
+        undefined,
+        'test template'
+      )
+
+      expect(context.props).toEqual({ user: { name: 'John' } })
+      expect(context.root).toBe('test template')
+      expect(context.parent).toBeUndefined()
+      expect(context.children).toBeUndefined()
+      expect(typeof context.render).toBe('function')
+      expect(typeof context.getValue).toBe('function')
+      expect(typeof context.compile).toBe('function')
+    })
+
+    it('应该正确处理父上下文', () => {
+      const parentContext = createComponentContext({ parent: 'data' })
+      const childContext = createComponentContext(
+        { child: 'data' },
+        parentContext,
+        'child template'
+      )
+
+      expect(childContext.parent).toBe(parentContext)
+      expect(childContext.props).toEqual({ child: 'data' })
+    })
+  })
+
+  describe('内置组件测试', () => {
+    it('Fragment 组件应该正确渲染 children', async () => {
+      const result = await Fragment({ children: 'Hello World' }, mockContext)
+      expect(result).toBe('Hello World')
+    })
+
+    it('Fetch 组件应该正确获取远程内容', async () => {
+      // Mock fetch
+      global.fetch = vi.fn().mockResolvedValue({
+        text: () => Promise.resolve('Remote content')
+      })
+
+      const result = await Fetch({ url: 'https://example.com' }, mockContext)
+      expect(result).toBe('Remote content')
+    })
+  })
+
+  describe('renderComponents 函数测试', () => {
+    it('应该正确渲染单个组件', async () => {
+      const TestComponent = defineComponent(async function TestComponent(props: { name: string }, context: ComponentContext) {
+        return `Hello ${props.name}`
+      }, 'test')
+
+      const componentMap = new Map([['test', TestComponent]])
+      const options: SendOptions = {
+        content: '<test name="John" />',
+        type: 'text',
+        context: 'test',
+        bot: 'test'
+      }
+
+      const result = await renderComponents(componentMap, options)
+      expect(result.content).toContain('Hello John')
+    })
+
+    it('应该正确渲染多个组件', async () => {
+      const Component1 = defineComponent(async function Component1(props: { text: string }, context: ComponentContext) {
+        return `[${props.text}]`
+      }, 'comp1')
+
+      const Component2 = defineComponent(async function Component2(props: { number: number }, context: ComponentContext) {
+        return `{${props.number}}`
+      }, 'comp2')
+
+      const componentMap = new Map([
+        ['comp1', Component1],
+        ['comp2', Component2]
+      ])
+
+      const options: SendOptions = {
+        content: '<comp1 text="Hello" /> <comp2 number={42} />',
+        type: 'text',
+        context: 'test',
+        bot: 'test'
+      }
+
+      const result = await renderComponents(componentMap, options)
+      expect(result.content).toContain('[Hello]')
+      expect(result.content).toContain('{42}')
+    })
+
+    it('应该正确处理嵌套组件', async () => {
+      const OuterComponent = defineComponent(async function OuterComponent(props: { title: string }, context: ComponentContext) {
+        return `标题: ${props.title}`
+      }, 'outer')
+
+      const InnerComponent = defineComponent(async function InnerComponent(props: { content: string }, context: ComponentContext) {
+        return `Content: ${props.content}`
+      }, 'inner')
+
+      const componentMap = new Map([
+        ['outer', OuterComponent],
+        ['inner', InnerComponent]
+      ])
+
+      const options: SendOptions = {
+        content: '<outer title="Test"><inner content="Nested" /></outer>',
+        type: 'text',
+        context: 'test',
+        bot: 'test'
+      }
+
+      const result = await renderComponents(componentMap, options)
+      // 现在嵌套组件渲染应该工作了
+      expect(result.content).toContain('标题: Test')
+    })
+  })
+
+  describe('表达式求值测试', () => {
+    it('应该正确计算数学表达式', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test sum={1+2+3} product={2*3*4} />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.sum).toBe(6)
+      expect(props.product).toBe(24)
+    })
+
+    it('应该正确处理比较表达式', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test greater={5>3} equal={2==2} />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.greater).toBe(true)
+      expect(props.equal).toBe(true)
+    })
+
+    it('应该正确处理三元运算符', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test result={5>3 ? "yes" : "no"} />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.result).toBe('yes')
+    })
+
+    it('应该正确处理数组和对象表达式', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = '<test items={[1,2,3]} config={{name:"test",value:42}} />'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props.items).toEqual([1, 2, 3])
+      expect(props.config).toEqual({ name: 'test', value: 42 })
+    })
+  })
+
+  describe('错误处理测试', () => {
+    it('应该正确处理无效的组件模板', () => {
+      const TestComponent = defineComponent(async function TestComponent(props: any, context: ComponentContext) {
+        return 'test'
+      }, 'test')
+
+      const template = 'invalid template'
+      const props = getProps(TestComponent, template, mockContext)
+
+      expect(props).toEqual({})
+    })
+
+    it('应该正确处理组件渲染错误', async () => {
+      const ErrorComponent = defineComponent(async function ErrorComponent(props: any, context: ComponentContext) {
+        throw new Error('Test error')
+      }, 'error')
+
+      const componentMap = new Map([['error', ErrorComponent]])
+      const options: SendOptions = {
+        content: '<error />',
+        type: 'text',
+        context: 'test',
+        bot: 'test'
+      }
+
+      await expect(renderComponents(componentMap, options)).rejects.toThrow('Test error')
+    })
+  })
+})