@viewfly/core 0.0.5 → 0.0.7

package/bundles/index.esm.js

@@ -107,16 +107,6 @@ function styleToObject(style) {
     return obj;
 }
 
-class Memo {
-    constructor(shouldUpdate, render) {
-        this.shouldUpdate = shouldUpdate;
-        this.render = render;
-    }
-}
-function withMemo(shouldUpdate, render) {
-    return new Memo(shouldUpdate, render);
-}
-
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -193,11 +183,23 @@ class Component extends ReflectiveInjector {
         componentSetupStack.push(this);
         let isSetup = true;
         const render = this.type(props);
+        const isRenderFn = typeof render === 'function';
+        const componentInstance = isRenderFn ? { $render: render } : render;
+        let refs = toRefs(this.props.ref);
+        onMounted(() => {
+            for (const ref of refs) {
+                ref.bind(componentInstance);
+            }
+        });
+        onDestroy(() => {
+            for (const ref of refs) {
+                ref.unBind(componentInstance);
+            }
+        });
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const templateRender = render instanceof Memo ? render.render : render;
-        let template = templateRender();
+        let template = componentInstance.$render();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
@@ -210,15 +212,27 @@ class Component extends ReflectiveInjector {
                     if (add.length || remove.length || replace.length) {
                         this.invokePropsChangedHooks(newProps);
                     }
+                    const newRefs = toRefs(newProps.ref);
+                    for (const oldRef of refs) {
+                        if (!newRefs.includes(oldRef)) {
+                            oldRef.unBind(componentInstance);
+                        }
+                    }
+                    for (const newRef of newRefs) {
+                        if (!refs.includes(newRef)) {
+                            newRef.bind(componentInstance);
+                        }
+                    }
+                    refs = newRefs;
                 }
-                if (render instanceof Memo) {
-                    if (!render.shouldUpdate(newProps, oldProps)) {
+                if (typeof componentInstance.$shouldUpdate === 'function') {
+                    if (!componentInstance.$shouldUpdate(newProps, oldProps)) {
                         return template;
                     }
                 }
                 this.unWatch();
                 signalDepsStack.push([]);
-                template = templateRender();
+                template = componentInstance.$render();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -302,6 +316,11 @@ class Component extends ReflectiveInjector {
         }
     }
 }
+function toRefs(ref) {
+    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
+        return i instanceof Ref;
+    });
+}
 /**
  * 当组件第一次渲染完成时触发
  * @param callback
@@ -383,7 +402,7 @@ function onDestroy(callback) {
 class Ref {
     constructor(callback) {
         this.callback = callback;
-        this.unBindMap = new WeakMap();
+        this.unBindMap = new Map();
         this.targetCaches = new Set();
     }
     bind(value) {
@@ -626,6 +645,13 @@ class JSXElement {
     }
 }
 
+function withMemo(shouldUpdate, render) {
+    return {
+        $shouldUpdate: shouldUpdate,
+        $render: render
+    };
+}
+
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
@@ -1293,4 +1319,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, Memo, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };

package/bundles/index.js

@@ -108,16 +108,6 @@ function styleToObject(style) {
     return obj;
 }
 
-class Memo {
-    constructor(shouldUpdate, render) {
-        this.shouldUpdate = shouldUpdate;
-        this.render = render;
-    }
-}
-function withMemo(shouldUpdate, render) {
-    return new Memo(shouldUpdate, render);
-}
-
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -194,11 +184,23 @@ class Component extends di.ReflectiveInjector {
         componentSetupStack.push(this);
         let isSetup = true;
         const render = this.type(props);
+        const isRenderFn = typeof render === 'function';
+        const componentInstance = isRenderFn ? { $render: render } : render;
+        let refs = toRefs(this.props.ref);
+        onMounted(() => {
+            for (const ref of refs) {
+                ref.bind(componentInstance);
+            }
+        });
+        onDestroy(() => {
+            for (const ref of refs) {
+                ref.unBind(componentInstance);
+            }
+        });
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const templateRender = render instanceof Memo ? render.render : render;
-        let template = templateRender();
+        let template = componentInstance.$render();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
@@ -211,15 +213,27 @@ class Component extends di.ReflectiveInjector {
                     if (add.length || remove.length || replace.length) {
                         this.invokePropsChangedHooks(newProps);
                     }
+                    const newRefs = toRefs(newProps.ref);
+                    for (const oldRef of refs) {
+                        if (!newRefs.includes(oldRef)) {
+                            oldRef.unBind(componentInstance);
+                        }
+                    }
+                    for (const newRef of newRefs) {
+                        if (!refs.includes(newRef)) {
+                            newRef.bind(componentInstance);
+                        }
+                    }
+                    refs = newRefs;
                 }
-                if (render instanceof Memo) {
-                    if (!render.shouldUpdate(newProps, oldProps)) {
+                if (typeof componentInstance.$shouldUpdate === 'function') {
+                    if (!componentInstance.$shouldUpdate(newProps, oldProps)) {
                         return template;
                     }
                 }
                 this.unWatch();
                 signalDepsStack.push([]);
-                template = templateRender();
+                template = componentInstance.$render();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -303,6 +317,11 @@ class Component extends di.ReflectiveInjector {
         }
     }
 }
+function toRefs(ref) {
+    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
+        return i instanceof Ref;
+    });
+}
 /**
  * 当组件第一次渲染完成时触发
  * @param callback
@@ -384,7 +403,7 @@ function onDestroy(callback) {
 class Ref {
     constructor(callback) {
         this.callback = callback;
-        this.unBindMap = new WeakMap();
+        this.unBindMap = new Map();
         this.targetCaches = new Set();
     }
     bind(value) {
@@ -627,6 +646,13 @@ class JSXElement {
     }
 }
 
+function withMemo(shouldUpdate, render) {
+    return {
+        $shouldUpdate: shouldUpdate,
+        $render: render
+    };
+}
+
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
@@ -1299,7 +1325,6 @@ exports.Fragment = Fragment;
 exports.JSXComponent = JSXComponent;
 exports.JSXElement = JSXElement;
 exports.JSXText = JSXText;
-exports.Memo = Memo;
 exports.NativeRenderer = NativeRenderer;
 exports.Ref = Ref;
 exports.RootComponent = RootComponent;

package/bundles/model/component.d.ts

@@ -1,14 +1,20 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
 import { Props, Key, JSXTypeof, JSXChildNode } from './jsx-element';
-import { Memo } from './memo';
 export declare class JSXComponent {
     props: Props;
     private factory;
     constructor(props: Props, factory: (injector: Component, props: Props) => Component);
     createInstance(injector: Component): Component;
 }
+export interface ComponentInstance<T> {
+    $render(): JSXChildNode;
+    $shouldUpdate?(currentProps: T, prevProps: T): unknown;
+}
+export interface Renderable {
+    $render(): any;
+}
 export interface ComponentSetup<T extends Props<any> = Props<any>> {
-    (props?: T): (() => JSXChildNode) | Memo<T>;
+    (props?: T): (() => JSXChildNode) | ComponentInstance<T>;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -109,13 +115,14 @@ export declare function onDestroy(callback: () => void): void;
 export interface RefListener<T> {
     (current: T): void | (() => void);
 }
-export declare class Ref<T extends object> {
+export type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnType<T> : T> = U extends Renderable ? Omit<U, keyof ComponentInstance<any>> : U extends Function ? never : T;
+export declare class Ref<T, U> {
     private callback;
     private unBindMap;
     private targetCaches;
-    constructor(callback: RefListener<T>);
-    bind(value: T): void;
-    unBind(value: T): void;
+    constructor(callback: RefListener<U>);
+    bind(value: U): void;
+    unBind(value: U): void;
 }
 /**
  * 用于节点渲染完成时获取 DOM 节点
@@ -138,7 +145,7 @@ export declare class Ref<T extends object> {
  * }
  * ```
  */
-export declare function useRef<T extends object>(callback: RefListener<T>): Ref<T>;
+export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<T, U>;
 declare const depsKey: unique symbol;
 /**
  * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态

package/bundles/model/memo.d.ts

@@ -1,10 +1,6 @@
 import { JSXChildNode, Props } from './jsx-element';
+import { ComponentInstance } from './component';
 export interface ShouldUpdate<T extends Props> {
     (currentProps: T, prevProps: T): unknown;
 }
-export declare class Memo<T extends Props> {
-    shouldUpdate: ShouldUpdate<T>;
-    render: () => JSXChildNode;
-    constructor(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode);
-}
-export declare function withMemo<T extends Props = Props>(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode): Memo<T>;
+export declare function withMemo<T extends Props = Props>(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode): ComponentInstance<T>;

package/bundles/public-api.d.ts

@@ -3,5 +3,5 @@ export * from '@tanbo/di';
 export * from './_utils/make-error';
 export * from './foundation/_api';
 export * from './model/_api';
-export * from './jsx';
+export * from './types';
 export * from './viewfly';

package/bundles/types.d.ts

@@ -0,0 +1,19 @@
+import { Key, Ref, JSXComponent, ExtractInstanceType } from '@viewfly/core';
+export declare namespace ViewTypes {
+    type ClassNames = string | Record<string, unknown> | Array<string | Record<string, unknown>>;
+    interface IntrinsicAttributes {
+        key?: Key;
+        ref?: any;
+    }
+    interface RefAttributes<T> extends IntrinsicAttributes {
+        ref?: Ref<T, ExtractInstanceType<T>> | Ref<T, ExtractInstanceType<T>>[];
+    }
+    interface ElementClass extends JSXComponent {
+    }
+    interface ElementChildrenAttribute {
+    }
+    interface IntrinsicElements {
+    }
+    interface IntrinsicClassAttributes<T> extends IntrinsicAttributes {
+    }
+}

package/jsx-runtime/index.d.ts

@@ -1,4 +1,4 @@
-import type { JSXComponent, jsx, jsxs, Fragment } from '@viewfly/core'
+import type { jsx, jsxs, Fragment, ViewTypes } from '@viewfly/core'
 import type { NativeElements } from '@viewfly/platform-browser'
 
 /**
@@ -10,9 +10,18 @@ import type { NativeElements } from '@viewfly/platform-browser'
 export { jsx, jsxs, Fragment }
 
 export namespace JSX {
-  export interface ElementClass extends JSXComponent {
+  export interface ElementClass extends ViewTypes.ElementClass {
   }
 
-  export interface IntrinsicElements extends NativeElements {
+  export interface IntrinsicElements extends NativeElements, ViewTypes.IntrinsicElements {
+  }
+
+  export interface IntrinsicAttributes extends ViewTypes.IntrinsicAttributes {
+  }
+
+  export interface ElementChildrenAttribute extends ViewTypes.ElementChildrenAttribute {
+  }
+
+  export interface IntrinsicClassAttributes<T> extends ViewTypes.IntrinsicClassAttributes<T> {
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -34,5 +34,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "f3cb35e8a4c24063ea8431de7d001d801925e9d9"
+  "gitHead": "78757f2aad67c1a6969b2ca76ada75c58364bc43"
 }

package/bundles/jsx.d.ts

@@ -1,14 +0,0 @@
-import { Key, Ref } from '@viewfly/core';
-export declare namespace JSX {
-    type ClassNames = string | Record<string, unknown> | Array<string | Record<string, unknown>>;
-    interface Attributes<T extends object> {
-        ref?: Ref<T> | Ref<T>[];
-        key?: Key;
-    }
-    interface ElementClass {
-    }
-    interface IntrinsicElements {
-    }
-    interface IntrinsicAttributes {
-    }
-}