@viewfly/core 0.4.0 → 0.5.0

package/bundles/foundation/component.d.ts

@@ -26,7 +26,7 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof<J
     protected _dirty: boolean;
     protected _changed: boolean;
     private unWatch?;
-    private isFirstRending;
+    private isFirstRendering;
     private refs;
     constructor(parentComponent: Injector | null, type: JSXInternal.ComponentSetup, props: Props, key?: Key | undefined);
     markAsDirtied(): void;
@@ -107,7 +107,7 @@ export type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnT
 export interface AbstractInstanceType<T extends Record<string, any>> {
     (): T & JSXInternal.ComponentInstance<any>;
 }
-export declare class Ref<T> {
+export declare class DynamicRef<T> {
     private callback;
     private unBindMap;
     private targetCaches;
@@ -121,7 +121,7 @@ export declare class Ref<T> {
  * @example
  * ```tsx
  * function App() {
- *   const ref = useRef(node => {
+ *   const ref = createDynamicRef(node => {
  *     function fn() {
  *       // do something...
  *     }
@@ -136,7 +136,12 @@ export declare class Ref<T> {
  * }
  * ```
  */
-export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<U>;
+export declare function createDynamicRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): DynamicRef<U>;
+export declare class StaticRef<T> extends DynamicRef<T> {
+    readonly current: T | null;
+    constructor();
+}
+export declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
 declare const depsKey: unique symbol;
 /**
  * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态
@@ -162,7 +167,7 @@ export interface Signal<T> {
  * ```tsx
  * function App() {
  *   // 初始化状态
- *   const state = useSignal(1)
+ *   const state = createSignal(1)
  *
  *   return () => {
  *     <div>
@@ -178,7 +183,7 @@ export interface Signal<T> {
  *   }
  * }
  */
-export declare function useSignal<T>(state: T): Signal<T>;
+export declare function createSignal<T>(state: T): Signal<T>;
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -186,28 +191,28 @@ export declare function useSignal<T>(state: T): Signal<T>;
  * @param callback
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
-export declare function useDerived<T>(callback: () => T, isContinue?: (data: T) => unknown): Signal<T>;
-export interface EffectCallback<T, U> {
+export declare function createDerived<T>(callback: () => T, isContinue?: (data: T) => unknown): Signal<T>;
+export interface WatchCallback<T, U> {
     (newValue: T, oldValue: U): void | (() => void);
 }
 /**
  * 监听状态变化，当任意一个状态发生变更时，触发回调。
- * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
+ * watch 会返回一个取消监听的函数，调用此函数，可以取消监听。
  * 当在组件中调用时，组件销毁时会自动取消监听。
  * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组，或者是一个求值函数
- * @param effect 状态变更后的回调函数
+ * @param callback 状态变更后的回调函数
  */
-export declare function useEffect<T>(deps: Signal<T>, effect: EffectCallback<T, T>): () => void;
-export declare function useEffect<T>(deps: [Signal<T>], effect: EffectCallback<[T], [T]>): () => void;
-export declare function useEffect<T, T1>(deps: [Signal<T>, Signal<T1>], effect: EffectCallback<[T, T1], [T, T1]>): () => void;
-export declare function useEffect<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], effect: EffectCallback<[T, T1, T2], [T, T1, T2]>): () => void;
-export declare function useEffect<T, T1, T2, T3>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>], effect: EffectCallback<[T, T1, T2, T3], [T, T1, T2, T3]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>], effect: EffectCallback<[T, T1, T2, T3, T4], [T, T1, T2, T3, T4]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4, T5>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>], effect: EffectCallback<[T, T1, T2, T3, T4, T5], [T, T1, T2, T3, T4, T5]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4, T5, T6>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>], effect: EffectCallback<[T, T1, T2, T3, T4, T5, T6], [T, T1, T2, T3, T4, T5, T6]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4, T5, T6, T7>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>, Signal<T7>], effect: EffectCallback<[T, T1, T2, T3, T4, T5, T6, T7], [T, T1, T2, T3, T4, T5, T6, T7]>): () => void;
-export declare function useEffect<T>(deps: () => T, effect: EffectCallback<T, T>): () => void;
-export declare function useEffect<T = any>(deps: Signal<any>[], effect: EffectCallback<T[], T[]>): () => void;
+export declare function watch<T>(deps: Signal<T>, callback: WatchCallback<T, T>): () => void;
+export declare function watch<T>(deps: [Signal<T>], callback: WatchCallback<[T], [T]>): () => void;
+export declare function watch<T, T1>(deps: [Signal<T>, Signal<T1>], callback: WatchCallback<[T, T1], [T, T1]>): () => void;
+export declare function watch<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], callback: WatchCallback<[T, T1, T2], [T, T1, T2]>): () => void;
+export declare function watch<T, T1, T2, T3>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>], callback: WatchCallback<[T, T1, T2, T3], [T, T1, T2, T3]>): () => void;
+export declare function watch<T, T1, T2, T3, T4>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>], callback: WatchCallback<[T, T1, T2, T3, T4], [T, T1, T2, T3, T4]>): () => void;
+export declare function watch<T, T1, T2, T3, T4, T5>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>], callback: WatchCallback<[T, T1, T2, T3, T4, T5], [T, T1, T2, T3, T4, T5]>): () => void;
+export declare function watch<T, T1, T2, T3, T4, T5, T6>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>], callback: WatchCallback<[T, T1, T2, T3, T4, T5, T6], [T, T1, T2, T3, T4, T5, T6]>): () => void;
+export declare function watch<T, T1, T2, T3, T4, T5, T6, T7>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>, Signal<T7>], callback: WatchCallback<[T, T1, T2, T3, T4, T5, T6, T7], [T, T1, T2, T3, T4, T5, T6, T7]>): () => void;
+export declare function watch<T>(deps: () => T, callback: WatchCallback<T, T>): () => void;
+export declare function watch<T = any>(deps: Signal<any>[], callback: WatchCallback<T[], T[]>): () => void;
 /**
  * 通过 IoC 容器当前组件提供上下文共享数据的方法
  * @param provider

package/bundles/foundation/types.d.ts

@@ -1,5 +1,5 @@
 import { Key } from './jsx-element';
-import { ExtractInstanceType, Ref } from './component';
+import { ExtractInstanceType, DynamicRef } from './component';
 import { Scope } from '../di/injectable';
 export type JSXNode = JSXInternal.JSXNode;
 export declare namespace JSXInternal {
@@ -19,7 +19,7 @@ export declare namespace JSXInternal {
         ref?: any;
     }
     interface RefAttributes<T> extends IntrinsicAttributes {
-        ref?: Ref<ExtractInstanceType<T>> | Ref<ExtractInstanceType<T>>[];
+        ref?: DynamicRef<ExtractInstanceType<T>> | DynamicRef<ExtractInstanceType<T>>[];
     }
     interface ElementClass<P = any> extends ComponentInstance<P> {
     }
@@ -29,6 +29,6 @@ export declare namespace JSXInternal {
         [name: string]: any;
     }
     interface IntrinsicClassAttributes<T> {
-        ref?: Ref<T>;
+        ref?: DynamicRef<T>;
     }
 }

package/bundles/index.esm.js

@@ -674,7 +674,7 @@ class Component extends ReflectiveInjector {
         this.propsChangedDestroyCallbacks = [];
         this._dirty = true;
         this._changed = true;
-        this.isFirstRending = true;
+        this.isFirstRendering = true;
     }
     markAsDirtied() {
         this._dirty = true;
@@ -728,7 +728,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         const template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         this.template = template;
@@ -764,7 +764,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         this.template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         return this.template;
@@ -775,15 +775,19 @@ class Component extends ReflectiveInjector {
     }
     rendered() {
         this.changedSubComponents.clear();
-        const is = this.isFirstRending;
-        this.isFirstRending = false;
+        const is = this.isFirstRendering;
+        this.isFirstRendering = false;
         this._dirty = this._changed = false;
+        this.invokeUpdatedHooks();
         if (is) {
-            this.invokeUpdatedHooks();
             this.invokeMountHooks();
         }
-        else {
-            this.invokeUpdatedHooks();
+        if (this.changed) {
+            Promise.resolve().then(() => {
+                if (this.parentComponent instanceof Component) {
+                    this.parentComponent.markAsChanged(this);
+                }
+            });
         }
     }
     destroy() {
@@ -841,7 +845,7 @@ class Component extends ReflectiveInjector {
 }
 function toRefs(ref) {
     return (Array.isArray(ref) ? ref : [ref]).filter(i => {
-        return i instanceof Ref;
+        return i instanceof DynamicRef;
     });
 }
 /**
@@ -922,7 +926,7 @@ function onUnmounted(callback) {
     const component = getSetupContext();
     component.unmountedCallbacks.push(callback);
 }
-class Ref {
+class DynamicRef {
     constructor(callback) {
         this.callback = callback;
         this.unBindMap = new Map();
@@ -956,7 +960,7 @@ class Ref {
  * @example
  * ```tsx
  * function App() {
- *   const ref = useRef(node => {
+ *   const ref = createDynamicRef(node => {
  *     function fn() {
  *       // do something...
  *     }
@@ -971,8 +975,32 @@ class Ref {
  * }
  * ```
  */
-function useRef(callback) {
-    return new Ref(callback);
+function createDynamicRef(callback) {
+    return new DynamicRef(callback);
+}
+const initValue = {};
+class StaticRef extends DynamicRef {
+    constructor() {
+        let value = initValue;
+        let isInit = false;
+        super(v => {
+            if (v !== initValue && !isInit) {
+                value = v;
+                isInit = true;
+            }
+        });
+        Object.defineProperty(this, 'current', {
+            get() {
+                if (value === initValue) {
+                    return null;
+                }
+                return value;
+            }
+        });
+    }
+}
+function createRef() {
+    return new StaticRef();
 }
 const depsKey = Symbol('deps');
 /**
@@ -982,7 +1010,7 @@ const depsKey = Symbol('deps');
  * ```tsx
  * function App() {
  *   // 初始化状态
- *   const state = useSignal(1)
+ *   const state = createSignal(1)
  *
  *   return () => {
  *     <div>
@@ -998,7 +1026,7 @@ const depsKey = Symbol('deps');
  *   }
  * }
  */
-function useSignal(state) {
+function createSignal(state) {
     function signal() {
         const depsContext = getSignalDepsContext();
         if (depsContext) {
@@ -1084,9 +1112,9 @@ function listen(model, deps, callback, isContinue) {
  * @param callback
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
-function useDerived(callback, isContinue) {
+function createDerived(callback, isContinue) {
     const { data, deps } = invokeDepFn(callback);
-    const signal = useSignal(data);
+    const signal = createSignal(data);
     const component = getSetupContext(false);
     const unListen = listen(signal, deps, callback, isContinue);
     if (component) {
@@ -1097,9 +1125,9 @@ function useDerived(callback, isContinue) {
     return signal;
 }
 /* eslint-enable max-len*/
-function useEffect(deps, effect) {
+function watch(deps, callback) {
     if (typeof deps === 'function' && !deps.$isSignal) {
-        deps = useDerived(deps);
+        deps = createDerived(deps);
     }
     const signals = Array.isArray(deps) ? deps : [deps];
     let oldValues = signals.map(s => s());
@@ -1109,7 +1137,7 @@ function useEffect(deps, effect) {
             prevCleanup();
         }
         const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        prevCleanup = Array.isArray(deps) ? callback(newValues, oldValues) : callback(newValues[0], oldValues[0]);
         oldValues = newValues;
     }
     for (const dep of signals) {
@@ -1769,7 +1797,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
 function applyRefs(refs, nativeNode, binding) {
     const refList = Array.isArray(refs) ? refs : [refs];
     for (const item of refList) {
-        if (item instanceof Ref) {
+        if (item instanceof DynamicRef) {
             binding ? item.bind(nativeNode) : item.unBind(nativeNode);
         }
     }
@@ -1896,4 +1924,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, Ref, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, THROW_IF_NOT_FOUND, Type, createRenderer, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, useDerived, useEffect, useRef, useSignal, viewfly, withMemo };
+export { Component, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, viewfly, watch, withMemo };

package/bundles/index.js

@@ -676,7 +676,7 @@ class Component extends ReflectiveInjector {
         this.propsChangedDestroyCallbacks = [];
         this._dirty = true;
         this._changed = true;
-        this.isFirstRending = true;
+        this.isFirstRendering = true;
     }
     markAsDirtied() {
         this._dirty = true;
@@ -730,7 +730,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         const template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         this.template = template;
@@ -766,7 +766,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         this.template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         return this.template;
@@ -777,15 +777,19 @@ class Component extends ReflectiveInjector {
     }
     rendered() {
         this.changedSubComponents.clear();
-        const is = this.isFirstRending;
-        this.isFirstRending = false;
+        const is = this.isFirstRendering;
+        this.isFirstRendering = false;
         this._dirty = this._changed = false;
+        this.invokeUpdatedHooks();
         if (is) {
-            this.invokeUpdatedHooks();
             this.invokeMountHooks();
         }
-        else {
-            this.invokeUpdatedHooks();
+        if (this.changed) {
+            Promise.resolve().then(() => {
+                if (this.parentComponent instanceof Component) {
+                    this.parentComponent.markAsChanged(this);
+                }
+            });
         }
     }
     destroy() {
@@ -843,7 +847,7 @@ class Component extends ReflectiveInjector {
 }
 function toRefs(ref) {
     return (Array.isArray(ref) ? ref : [ref]).filter(i => {
-        return i instanceof Ref;
+        return i instanceof DynamicRef;
     });
 }
 /**
@@ -924,7 +928,7 @@ function onUnmounted(callback) {
     const component = getSetupContext();
     component.unmountedCallbacks.push(callback);
 }
-class Ref {
+class DynamicRef {
     constructor(callback) {
         this.callback = callback;
         this.unBindMap = new Map();
@@ -958,7 +962,7 @@ class Ref {
  * @example
  * ```tsx
  * function App() {
- *   const ref = useRef(node => {
+ *   const ref = createDynamicRef(node => {
  *     function fn() {
  *       // do something...
  *     }
@@ -973,8 +977,32 @@ class Ref {
  * }
  * ```
  */
-function useRef(callback) {
-    return new Ref(callback);
+function createDynamicRef(callback) {
+    return new DynamicRef(callback);
+}
+const initValue = {};
+class StaticRef extends DynamicRef {
+    constructor() {
+        let value = initValue;
+        let isInit = false;
+        super(v => {
+            if (v !== initValue && !isInit) {
+                value = v;
+                isInit = true;
+            }
+        });
+        Object.defineProperty(this, 'current', {
+            get() {
+                if (value === initValue) {
+                    return null;
+                }
+                return value;
+            }
+        });
+    }
+}
+function createRef() {
+    return new StaticRef();
 }
 const depsKey = Symbol('deps');
 /**
@@ -984,7 +1012,7 @@ const depsKey = Symbol('deps');
  * ```tsx
  * function App() {
  *   // 初始化状态
- *   const state = useSignal(1)
+ *   const state = createSignal(1)
  *
  *   return () => {
  *     <div>
@@ -1000,7 +1028,7 @@ const depsKey = Symbol('deps');
  *   }
  * }
  */
-function useSignal(state) {
+function createSignal(state) {
     function signal() {
         const depsContext = getSignalDepsContext();
         if (depsContext) {
@@ -1086,9 +1114,9 @@ function listen(model, deps, callback, isContinue) {
  * @param callback
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
-function useDerived(callback, isContinue) {
+function createDerived(callback, isContinue) {
     const { data, deps } = invokeDepFn(callback);
-    const signal = useSignal(data);
+    const signal = createSignal(data);
     const component = getSetupContext(false);
     const unListen = listen(signal, deps, callback, isContinue);
     if (component) {
@@ -1099,9 +1127,9 @@ function useDerived(callback, isContinue) {
     return signal;
 }
 /* eslint-enable max-len*/
-function useEffect(deps, effect) {
+function watch(deps, callback) {
     if (typeof deps === 'function' && !deps.$isSignal) {
-        deps = useDerived(deps);
+        deps = createDerived(deps);
     }
     const signals = Array.isArray(deps) ? deps : [deps];
     let oldValues = signals.map(s => s());
@@ -1111,7 +1139,7 @@ function useEffect(deps, effect) {
             prevCleanup();
         }
         const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        prevCleanup = Array.isArray(deps) ? callback(newValues, oldValues) : callback(newValues[0], oldValues[0]);
         oldValues = newValues;
     }
     for (const dep of signals) {
@@ -1771,7 +1799,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
 function applyRefs(refs, nativeNode, binding) {
     const refList = Array.isArray(refs) ? refs : [refs];
     for (const item of refList) {
-        if (item instanceof Ref) {
+        if (item instanceof DynamicRef) {
             binding ? item.bind(nativeNode) : item.unBind(nativeNode);
         }
     }
@@ -1899,6 +1927,7 @@ function viewfly(config) {
 }
 
 exports.Component = Component;
+exports.DynamicRef = DynamicRef;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;
 exports.Inject = Inject;
@@ -1912,15 +1941,19 @@ exports.NativeRenderer = NativeRenderer;
 exports.NullInjector = NullInjector;
 exports.Optional = Optional;
 exports.Prop = Prop;
-exports.Ref = Ref;
 exports.ReflectiveInjector = ReflectiveInjector;
 exports.RootComponent = RootComponent;
 exports.Scope = Scope;
 exports.Self = Self;
 exports.SkipSelf = SkipSelf;
+exports.StaticRef = StaticRef;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.Type = Type;
+exports.createDerived = createDerived;
+exports.createDynamicRef = createDynamicRef;
+exports.createRef = createRef;
 exports.createRenderer = createRenderer;
+exports.createSignal = createSignal;
 exports.forwardRef = forwardRef;
 exports.getCurrentInstance = getCurrentInstance;
 exports.inject = inject;
@@ -1933,9 +1966,6 @@ exports.onPropsChanged = onPropsChanged;
 exports.onUnmounted = onUnmounted;
 exports.onUpdated = onUpdated;
 exports.provide = provide;
-exports.useDerived = useDerived;
-exports.useEffect = useEffect;
-exports.useRef = useRef;
-exports.useSignal = useSignal;
 exports.viewfly = viewfly;
+exports.watch = watch;
 exports.withMemo = withMemo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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",
@@ -47,7 +47,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "d14b3cd0247a07f72519745933c3070f12adbfa1",
+  "gitHead": "75a746eb22f41295157d079e8557154d5fa50e01",
   "dependencies": {
     "reflect-metadata": "^0.1.13"
   }