!121 refactor: reactive type

Merge pull request !121 from Hoikan/reactive

.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
   ],
   root: true,
 
-  plugins: ['jest', 'no-for-of-loops', 'no-function-declare-after-return', 'react', '@typescript-eslint'],
+  plugins: ['jest', 'no-function-declare-after-return', 'react', '@typescript-eslint'],
 
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -56,7 +56,6 @@ module.exports = {
     'comma-dangle': ['error', 'only-multiline'],
 
     'no-constant-condition': 'off',
-    'no-for-of-loops/no-for-of-loops': 'error',
     'no-function-declare-after-return/no-function-declare-after-return': 'error',
   },
   globals: {

packages/inula-reactive/src/RNode.ts

@@ -14,6 +14,8 @@
  */
 
 import { printNode } from './utils/printNode';
+import { Signal } from './Types';
+import { isFunction } from './Utils';
 
 let runningRNode: RNode<any> | undefined = undefined; // 当前正执行的RNode
 let calledGets: RNode<any>[] | null = null;
@@ -47,7 +49,7 @@ function defaultEquality(a: any, b: any) {
   return a === b;
 }
 
-export class RNode<T = any> {
+export class RNode<T = any> implements Signal<T> {
   _value: T;
   fn?: () => T;
 
@@ -57,7 +59,6 @@ export class RNode<T = any> {
   private state: State;
   isEffect = false;
 
-
   cleanups: ((oldValue: T) => void)[] = [];
   equals = defaultEquality;
 
@@ -128,7 +129,7 @@ export class RNode<T = any> {
 
     const prevValue = this.getValue();
 
-    const value = typeof fnOrValue === 'function' ? fnOrValue(prevValue) : fnOrValue;
+    const value = isFunction(fnOrValue) ? fnOrValue(prevValue) : fnOrValue;
 
     this.compare(prevValue, value);
 
@@ -291,7 +292,6 @@ export class RNode<T = any> {
   setValue(value: any) {
     this._value = value;
   }
-
 }
 
 export function onCleanup<T = any>(fn: (oldValue: T) => void): void {
@@ -324,4 +324,3 @@ export function untrack(fn) {
     runningRNode = preRContext;
   }
 }
-

packages/inula-reactive/src/RNodeAccessor.ts

@@ -43,12 +43,12 @@ export function setRNodeVal(rNode: RProxyNode<any>, value: unknown): void {
 
   if (isRoot) {
     prevValue = rNode.root!.$;
-    newValue = isFunction<(...prev: any) => any>(value) ? value(prevValue) : value;
+    newValue = isFunction(value) ? value(prevValue) : value;
     rNode.root!.$ = newValue;
   } else {
     const parentVal = getRNodeVal(parent!);
     prevValue = parentVal[key];
-    newValue = isFunction<(...prev: any) => any>(value) ? value(prevValue) : value;
+    newValue = isFunction(value) ? value(prevValue) : value;
     parentVal[key] = newValue;
   }
 }

packages/inula-reactive/src/RNodeCreator.ts

@@ -15,25 +15,28 @@
 
 import { isPrimitive } from './Utils';
 import { RNode } from './RNode';
-import { ProxyRNode } from './Types';
-import { RProxyNode } from './RProxyNode';
-import { getRNodeVal, getRootRNode } from './RNodeAccessor';
+import { Fn, NonFunctionType, Signal } from './Types';
+import { Proxy, RProxyNode } from './RProxyNode';
+import { getRNodeVal } from './RNodeAccessor';
 
-export type Reactive<T = any> = RNode<T> | Atom<T>;
-
-export function createReactive<T extends any>(raw?: T): ReactiveProxy<T> {
+export function createReactive<T extends string>(raw?: T): Signal<string>;
+export function createReactive<T extends number>(raw?: T): Signal<number>;
+export function createReactive<T extends symbol>(raw?: T): Signal<symbol>;
+export function createReactive<T extends number | string | symbol>(raw?: T): Signal<T>;
+export function createReactive<T extends Record<any, any> | Array<any> | symbol>(raw?: T): Proxy<T>;
+export function createReactive<T extends NonFunctionType>(raw?: T): Proxy<T> | Signal<T> {
   if (isPrimitive(raw) || raw === null || raw === undefined) {
     return new RNode(raw, { isSignal: true });
   } else {
-    const node = new RProxyNode(null, {
+    const node = new RProxyNode<T>(null, {
       root: { $: raw },
     });
-    return node.proxy as ReactiveProxy<T>;
+    return node.proxy;
   }
 }
 
-export function createComputed<T>(fn: T) {
-  const rNode = new RProxyNode(fn, { isComputed: true });
+export function createComputed<T extends Fn>(fn: T) {
+  const rNode = new RProxyNode<T>(fn, { isComputed: true });
   return rNode.proxy;
 }
 
@@ -45,7 +48,7 @@ export function createWatch<T>(fn: T) {
   rNode.get();
 }
 
-export function getOrCreateChildProxy(value: unknown, parent: RProxyNode<any>, key: string | symbol): ProxyRNode<any> {
+export function getOrCreateChildProxy(value: unknown, parent: RProxyNode<any>, key: string | symbol) {
   const child = getOrCreateChildRNode(parent, key);
 
   return child.proxy;

packages/inula-reactive/src/RProxyNode.ts

@@ -18,6 +18,23 @@ import { getRNodeVal, getRootRNode, setRNodeVal } from './RNodeAccessor';
 import { preciseCompare } from './comparison/InDepthComparison';
 import { isObject } from './Utils';
 import { RNode, Root, runEffects } from './RNode';
+import { Computation, ProxyRNode, Signal } from './Types';
+
+export type Proxy<T> = T extends Record<string, unknown>
+  ? SignalProxy<T>
+  : T extends () => infer Return
+  ? ComputationProxy<Return>
+  : Signal<T>;
+
+export type SignalProxy<T> = {
+  [Val in keyof T]: SignalProxy<T[Val]>;
+} & Signal<T>;
+
+export type ComputationProxy<T> = T extends Record<string, unknown>
+  ? {
+      readonly [Val in keyof T]: ComputationProxy<T[Val]>;
+    } & Computation<T>
+  : Computation<T>;
 
 export interface RNodeOptions {
   root?: Root<any> | null;
@@ -39,7 +56,7 @@ export class RProxyNode<T = any> extends RNode<T> {
   key: KEY | null;
   children: Map<KEY, RProxyNode> | null = null;
 
-  proxy: any = null;
+  proxy: Proxy<T> = null;
 
   extend: any; // 用于扩展，放一些自定义属性
 
@@ -50,7 +67,8 @@ export class RProxyNode<T = any> extends RNode<T> {
 
     this.isComputed = options?.isComputed || false;
 
-    this.proxy = createProxy(this);
+    // Proxy type should be optimized
+    this.proxy = createProxy as unknown as Proxy<T>;
     this.parent = options?.parent || null;
     this.key = options?.key as KEY;
     this.root = options?.root || {};

packages/inula-reactive/src/Types.ts

@@ -93,3 +93,25 @@ export type RNode<T = any> = RootRNode<T> | ChildrenRNode<T>;
 
 export type Reactive<T = any> = RNode<T> | Atom<T>;
 
+export type Signal<T> = {
+  /**
+   * 返回响应式对象的值，自动追踪依赖
+   */
+  get(): T;
+  /**
+   * 返回响应式对象的值，不追踪依赖
+   */
+  read(): T;
+  set(value: T): void;
+};
+
+export type Computation<T> = {
+  get(): T;
+  read(): T;
+};
+
+export type NonFunctionType<T = any> = Exclude<T, Fn>;
+
+// Use Fn instead of native Function for tslint
+export type Fn = (...args: any[]) => any;
+export type NoArgFn = () => any;

packages/inula-reactive/src/Utils.ts

@@ -15,6 +15,7 @@
 
 import { RNode } from './RNode';
 import { RProxyNode } from './RProxyNode';
+import { Fn } from './Types';
 
 export function isReactiveObj(obj: any) {
   return obj instanceof RNode || obj instanceof RProxyNode;
@@ -30,7 +31,7 @@ export function isPrimitive(obj: unknown): boolean {
   return obj != null && type !== 'object' && type !== 'function';
 }
 
-export function isFunction<T extends (...prev: any) => any>(obj: unknown): obj is Function {
+export function isFunction(obj: unknown): obj is Fn {
   return typeof obj === 'function';
 }
 

packages/inula-reactive/src/proxy/RProxyHandler.ts

@@ -17,7 +17,7 @@ import { getOrCreateChildProxy } from '../RNodeCreator';
 import { getRNodeVal } from '../RNodeAccessor';
 import { isArray } from '../Utils';
 import { RNode } from '../RNode';
-import {RProxyNode} from "../RProxyNode";
+import {Proxy, RProxyNode} from '../RProxyNode';
 
 const GET = 'get';
 const SET = 'set';
@@ -44,7 +44,7 @@ const MODIFY_ARR_FNS = new Set<string | symbol>([
 // 数组的遍历方法
 const LOOP_ARR_FNS = new Set<string | symbol>(['forEach', 'map', 'every', 'some', 'filter', 'join']);
 
-export function createProxy<T extends any>(proxyNode: RNode) {
+export function createProxy<T extends RProxyNode>(proxyNode: T): Proxy<T> {
   return new Proxy(proxyNode, {
     get,
     set,