airx 0.3.1 → 0.4.0

package/output/esm/render/common/index.d.ts

@@ -42,7 +42,7 @@ export interface Instance<E extends AbstractElement = AbstractElement> {
     element?: AirxElement;
     beforeElement?: AirxElement;
     signalWatcher?: signal.Watcher;
-    childrenRender?: AirxComponentRender;
+    componentReturnValue?: AirxComponentRender | AirxElement;
     needReRender?: boolean;
     elementNamespace?: string;
     context: InnerAirxComponentContext<E>;

package/output/esm/types.d.ts

@@ -1,6 +1,6 @@
-import * as CSS from 'csstype';
-import { Signal } from 'signal-polyfill';
-import { AirxChildren } from './element';
+import type * as CSS from 'csstype';
+import type { Signal } from 'signal-polyfill';
+import type { AirxComponentRender, AirxChildren } from './element';
 export interface Events {
     onCopy: ClipboardEvent;
     onCut: ClipboardEvent;
@@ -1145,25 +1145,29 @@ interface IntrinsicElementAttributesMap {
     use: SVGAttributes;
     view: SVGAttributes;
 }
-export type ReservedProps = {
-    children?: AirxChildren;
+export interface RefAttributes {
+    ref?: Signal.State<any | undefined> | ((ele: any) => void);
+}
+export interface ReservedAttributes {
     key?: string | number | symbol;
-    ref?: Signal.State<any | undefined>;
-};
+    children?: AirxChildren;
+}
 export type NativeElements = {
-    [K in keyof IntrinsicElementAttributesMap]: IntrinsicElementAttributesMap[K] & ReservedProps;
+    [K in keyof IntrinsicElementAttributesMap]: IntrinsicElementAttributesMap[K] & ReservedAttributes & RefAttributes;
 };
 declare global {
     namespace JSX {
-        interface ElementAttributesProperty {
+        type ElementClass = never;
+        interface Element extends AirxComponentRender {
         }
         interface ElementChildrenAttribute {
-            children: AirxChildren;
+            children: {};
         }
         interface IntrinsicElements extends NativeElements {
-            [name: string]: any;
         }
-        type IntrinsicAttributes = ReservedProps;
+        interface IntrinsicAttributes {
+            key?: string | number | symbol;
+        }
     }
 }
 export {};

package/output/umd/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/umd/index.js

@@ -90,9 +90,13 @@
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function createElement(type, props, ...children) {
-      const localChildren = children.length > 0
-          ? children
-          : props.children;
+      const localChildren = [];
+      if (children.length > 0) {
+          localChildren.push(...children);
+      }
+      else if (props && props.children) {
+          localChildren.push(props.children);
+      }
       return {
           type,
           props: {
@@ -393,10 +397,16 @@
               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);
+                          }
                       }
                   });
               }
@@ -461,22 +471,7 @@
       }
       // 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();
@@ -487,32 +482,58 @@
               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)();