@viewfly/core 0.0.1-alpha.2 → 0.0.1-alpha.4

package/bundles/index.esm.js

@@ -230,7 +230,7 @@ class Component extends ReflectiveInjector {
     }
     init() {
         const self = this;
-        const props = new Proxy({}, {
+        const props = new Proxy(this.config || {}, {
             get(_, key) {
                 if (self.config) {
                     return self.config[key];
@@ -482,8 +482,12 @@ const depsKey = Symbol('deps');
  */
 function useSignal(state) {
     const usedComponents = new Set();
-    function stateManager() {
+    function signal() {
         const component = getRendingContext();
+        const derivedContext = getDerivedContext();
+        if (derivedContext) {
+            derivedContext.push(signal);
+        }
         if (component && !usedComponents.has(component)) {
             usedComponents.add(component);
             component.destroyCallbacks.push(() => {
@@ -492,7 +496,7 @@ function useSignal(state) {
         }
         return state;
     }
-    stateManager.set = function (newState) {
+    signal.set = function (newState) {
         if (newState === state) {
             return;
         }
@@ -500,28 +504,58 @@ function useSignal(state) {
         for (const component of usedComponents) {
             component.markAsDirtied();
         }
-        for (const fn of stateManager[depsKey]) {
+        for (const fn of signal[depsKey]) {
             fn();
         }
     };
-    stateManager[depsKey] = new Set();
-    return stateManager;
+    signal[depsKey] = new Set();
+    return signal;
+}
+const derivedStack = [];
+function getDerivedContext() {
+    return derivedStack[derivedStack.length - 1];
 }
 /**
- * 监听状态变化，当任意一个状态发生变更时，触发回调。
- * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
- * 当在组件中调用时，组件销毁时会自动取消监听。
- * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
- * @param effect 状态变更后的回调函数
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param callback
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
+function useDerived(callback, isContinue) {
+    const deps = [];
+    derivedStack.push(deps);
+    const data = callback();
+    derivedStack.pop();
+    const signal = useSignal(data);
+    if (deps.length) {
+        const unListen = useEffect(deps, () => {
+            const data = callback();
+            signal.set(data);
+            if (typeof isContinue === 'function' && !isContinue(data)) {
+                unListen();
+            }
+        });
+    }
+    return signal;
+}
+/* eslint-enable max-len*/
 function useEffect(deps, effect) {
+    if (typeof deps === 'function' &&
+        typeof deps.set === 'undefined' &&
+        typeof deps[depsKey] === 'undefined') {
+        deps = useDerived(deps);
+    }
     const signals = Array.isArray(deps) ? deps : [deps];
+    let oldValues = signals.map(s => s());
     let prevCleanup;
     function effectCallback() {
         if (typeof prevCleanup === 'function') {
             prevCleanup();
         }
-        prevCleanup = effect();
+        const newValues = signals.map(s => s());
+        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        oldValues = newValues;
     }
     for (const dep of signals) {
         dep[depsKey].add(effectCallback);
@@ -568,7 +602,7 @@ function inject(token, notFoundValue, flags) {
  */
 class RootComponent extends Component {
     constructor(factory) {
-        super(new NullInjector(), factory, new Props(null));
+        super(new NullInjector(), factory, null);
         this.changeEmitter = new Subject();
     }
     markAsChanged() {
@@ -905,7 +939,9 @@ let Renderer = class Renderer {
                     if (isChanged) {
                         diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
                     }
+                    const newProps = start.jsxNode.props;
                     start.jsxNode = diffAtom.jsxNode;
+                    start.jsxNode.props = newProps;
                     const { render } = this.componentAtomCaches.get(start.jsxNode);
                     const template = render();
                     if (template) {
@@ -1205,4 +1241,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, onDestroy, onMount, onPropsChanged, onUpdated, provide, useEffect, useRef, useSignal };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, onDestroy, onMount, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };

package/bundles/index.js

@@ -231,7 +231,7 @@ class Component extends di.ReflectiveInjector {
     }
     init() {
         const self = this;
-        const props = new Proxy({}, {
+        const props = new Proxy(this.config || {}, {
             get(_, key) {
                 if (self.config) {
                     return self.config[key];
@@ -483,8 +483,12 @@ const depsKey = Symbol('deps');
  */
 function useSignal(state) {
     const usedComponents = new Set();
-    function stateManager() {
+    function signal() {
         const component = getRendingContext();
+        const derivedContext = getDerivedContext();
+        if (derivedContext) {
+            derivedContext.push(signal);
+        }
         if (component && !usedComponents.has(component)) {
             usedComponents.add(component);
             component.destroyCallbacks.push(() => {
@@ -493,7 +497,7 @@ function useSignal(state) {
         }
         return state;
     }
-    stateManager.set = function (newState) {
+    signal.set = function (newState) {
         if (newState === state) {
             return;
         }
@@ -501,28 +505,58 @@ function useSignal(state) {
         for (const component of usedComponents) {
             component.markAsDirtied();
         }
-        for (const fn of stateManager[depsKey]) {
+        for (const fn of signal[depsKey]) {
             fn();
         }
     };
-    stateManager[depsKey] = new Set();
-    return stateManager;
+    signal[depsKey] = new Set();
+    return signal;
+}
+const derivedStack = [];
+function getDerivedContext() {
+    return derivedStack[derivedStack.length - 1];
 }
 /**
- * 监听状态变化，当任意一个状态发生变更时，触发回调。
- * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
- * 当在组件中调用时，组件销毁时会自动取消监听。
- * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
- * @param effect 状态变更后的回调函数
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param callback
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
+function useDerived(callback, isContinue) {
+    const deps = [];
+    derivedStack.push(deps);
+    const data = callback();
+    derivedStack.pop();
+    const signal = useSignal(data);
+    if (deps.length) {
+        const unListen = useEffect(deps, () => {
+            const data = callback();
+            signal.set(data);
+            if (typeof isContinue === 'function' && !isContinue(data)) {
+                unListen();
+            }
+        });
+    }
+    return signal;
+}
+/* eslint-enable max-len*/
 function useEffect(deps, effect) {
+    if (typeof deps === 'function' &&
+        typeof deps.set === 'undefined' &&
+        typeof deps[depsKey] === 'undefined') {
+        deps = useDerived(deps);
+    }
     const signals = Array.isArray(deps) ? deps : [deps];
+    let oldValues = signals.map(s => s());
     let prevCleanup;
     function effectCallback() {
         if (typeof prevCleanup === 'function') {
             prevCleanup();
         }
-        prevCleanup = effect();
+        const newValues = signals.map(s => s());
+        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        oldValues = newValues;
     }
     for (const dep of signals) {
         dep[depsKey].add(effectCallback);
@@ -569,7 +603,7 @@ function inject(token, notFoundValue, flags) {
  */
 class RootComponent extends Component {
     constructor(factory) {
-        super(new di.NullInjector(), factory, new Props(null));
+        super(new di.NullInjector(), factory, null);
         this.changeEmitter = new stream.Subject();
     }
     markAsChanged() {
@@ -906,7 +940,9 @@ exports.Renderer = class Renderer {
                     if (isChanged) {
                         diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
                     }
+                    const newProps = start.jsxNode.props;
                     start.jsxNode = diffAtom.jsxNode;
+                    start.jsxNode.props = newProps;
                     const { render } = this.componentAtomCaches.get(start.jsxNode);
                     const template = render();
                     if (template) {
@@ -1225,6 +1261,7 @@ exports.onMount = onMount;
 exports.onPropsChanged = onPropsChanged;
 exports.onUpdated = onUpdated;
 exports.provide = provide;
+exports.useDerived = useDerived;
 exports.useEffect = useEffect;
 exports.useRef = useRef;
 exports.useSignal = useSignal;

package/bundles/model/component.d.ts

@@ -6,7 +6,7 @@ export declare class JSXComponent {
 }
 export type JSXTemplate = JSXElement | JSXComponent | null | void;
 export interface ComponentSetup {
-    (props: JSXProps<any>): () => JSXTemplate;
+    (props?: JSXProps<any>): () => JSXTemplate;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -175,14 +175,35 @@ export interface Signal<T> {
  * }
  */
 export declare function useSignal<T>(state: T): Signal<T>;
+/**
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param callback
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
+ */
+export declare function useDerived<T>(callback: () => T, isContinue?: (data: T) => unknown): Signal<T>;
+export interface EffectCallback<T, U> {
+    (newValue: T, oldValue: U): void | (() => void);
+}
 /**
  * 监听状态变化，当任意一个状态发生变更时，触发回调。
  * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
  * 当在组件中调用时，组件销毁时会自动取消监听。
- * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
+ * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组，或者是一个求值函数
  * @param effect 状态变更后的回调函数
  */
-export declare function useEffect(deps: Signal<any> | Signal<any>[], effect: LifeCycleCallback): () => void;
+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;
 /**
  * 通过 IoC 容器当前组件提供上下文共享数据的方法
  * @param provider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.4",
   "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",
@@ -36,5 +36,6 @@
   },
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
-  }
+  },
+  "gitHead": "68a7c531c0040fc0b1b7addb87a8df3c5981600e"
 }