airx 0.3.0 → 0.4.0

package/output/esm/element.d.ts

@@ -15,7 +15,7 @@ export interface AirxElement<P = any> {
     props: Props & P;
     [symbol.airxElementSymbol]: true;
 }
-export type AirxChildren = null | string | number | boolean | undefined | AirxElement | Array<AirxChildren>;
+export type AirxChildren = null | string | number | boolean | undefined | AirxElement | Array<AirxChildren> | AirxComponentRender;
 /**
  * 函数式组件接收自己的 props，并返回一个 AirxElement
  */

package/output/esm/index.js

@@ -84,11 +84,18 @@ const airxElementSymbol = Symbol('airx-element');
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createElement(type, props, ...children) {
+    const localChildren = [];
+    if (children.length > 0) {
+        localChildren.push(...children);
+    }
+    else if (props && props.children) {
+        localChildren.push(props.children);
+    }
     return {
         type,
         props: {
             ...props,
-            children
+            children: localChildren
         },
         [airxElementSymbol]: true
     };
@@ -384,10 +391,16 @@ function reconcileChildren(appContext, parentInstance, childrenElementArray) {
             if ('ref' in instance.memoProps) {
                 context.onMounted(() => {
                     const ref = instance.memoProps.ref;
-                    // 如果组件有自己的 dom 并且 ref 为 state
-                    if (instance.domRef && isState(ref)) {
-                        ref.set(instance.domRef);
-                        return () => ref.set(undefined);
+                    // 如果组件有自己的 dom
+                    if (instance.domRef) {
+                        if (isState(ref)) {
+                            ref.set(instance.domRef);
+                            return () => ref.set(undefined);
+                        }
+                        if (typeof ref === 'function') {
+                            ref(instance.domRef);
+                            return () => ref(undefined);
+                        }
                     }
                 });
             }
@@ -452,22 +465,7 @@ function performUnitOfWork(pluginContext, instance, onUpdateRequire) {
     }
     // airx 组件
     if (typeof element?.type === 'function') {
-        if (instance.signalWatcher == null) {
-            // Watch 是惰性的，只有当 Signal 被读取时才会触发 --！
-            const signalWatcher = createWatch(async () => {
-                instance.needReRender = true;
-                onUpdateRequire?.(instance);
-                queueMicrotask(() => {
-                    signalWatcher.watch();
-                    const paddings = signalWatcher.getPending();
-                    for (const padding of paddings)
-                        padding.get();
-                });
-            });
-            instance.signalWatcher = signalWatcher;
-            instance.context.addDisposer(() => signalWatcher.unwatch());
-        }
-        if (instance.childrenRender == null) {
+        if (instance.componentReturnValue == null) {
             const component = element.type;
             const beforeContext = globalContext.current;
             globalContext.current = instance.context.getSafeContext();
@@ -478,32 +476,58 @@ function performUnitOfWork(pluginContext, instance, onUpdateRequire) {
             catch (error) {
                 componentReturnValue = createErrorRender(error);
             }
-            if (typeof componentReturnValue !== 'function') {
-                const error = new Error('Component must return a render function');
-                componentReturnValue = createErrorRender(error.message);
-            }
             // restore context
             globalContext.current = beforeContext;
-            instance.childrenRender = componentReturnValue;
-            const childrenComputed = createComputed(() => {
-                try {
-                    return instance.childrenRender();
-                }
-                catch (error) {
-                    return createErrorRender(error)();
+            instance.componentReturnValue = componentReturnValue;
+            // static function component
+            if (isValidElement(componentReturnValue)) {
+                const elements = childrenAsElements(componentReturnValue);
+                reconcileChildren(pluginContext, instance, elements);
+            }
+            // reaction function component
+            if (typeof componentReturnValue === 'function') {
+                if (instance.signalWatcher == null) {
+                    // Watch 是惰性的，只有当 Signal 被读取时才会触发 --！
+                    const signalWatcher = createWatch(async () => {
+                        instance.needReRender = true;
+                        onUpdateRequire?.(instance);
+                        queueMicrotask(() => {
+                            signalWatcher.watch();
+                            const paddings = signalWatcher.getPending();
+                            for (const padding of paddings)
+                                padding.get();
+                        });
+                    });
+                    instance.signalWatcher = signalWatcher;
+                    instance.context.addDisposer(() => signalWatcher.unwatch());
                 }
-            });
-            instance.signalWatcher.watch(childrenComputed);
-            const children = childrenComputed.get();
-            reconcileChildren(pluginContext, instance, childrenAsElements(children));
+                const childrenComputed = createComputed(() => {
+                    try {
+                        if (typeof componentReturnValue === 'function') {
+                            return componentReturnValue();
+                        }
+                    }
+                    catch (error) {
+                        return createErrorRender(error)();
+                    }
+                });
+                instance.signalWatcher.watch(childrenComputed);
+                const children = childrenComputed.get();
+                reconcileChildren(pluginContext, instance, childrenAsElements(children));
+            }
         }
         if (instance.needReRender) {
             let children;
             try {
-                // 如果是由于父组件导致的子组件渲染
-                // 直接使用 childrenComputed.get() 将读取到缓存值
-                // 因此这里使用 childrenRender 来更新 children 的值
-                children = instance.childrenRender();
+                if (isValidElement(instance.componentReturnValue)) {
+                    children = instance.componentReturnValue;
+                }
+                else {
+                    // 如果是由于父组件导致的子组件渲染
+                    // 直接使用 childrenComputed.get() 将读取到缓存值
+                    // 因此这里使用 childrenRender 来更新 children 的值
+                    children = instance.componentReturnValue();
+                }
             }
             catch (error) {
                 children = createErrorRender(error)();