ref tests, add some sort of effect api

implementation is wrong, but it just to have something kinda working, suggestions and help is welcome :)

Author: pikax

src/apis/effect.ts

@@ -0,0 +1,54 @@
+import { watchEffect } from './watch';
+
+export function isEffect(fn: any): fn is ReactiveEffect {
+  return fn && fn._isEffect === true;
+}
+
+export interface ReactiveEffect<T = any> {
+  // (...args: any[]): T;
+  (): T;
+  _isEffect: true;
+  id: number;
+  active: boolean;
+  raw: () => T;
+  // deps: Array<Dep>;
+  // options: ReactiveEffectOptions;
+  options: any;
+}
+let uid = 0;
+
+export function effect<T = any>(
+  fn: () => T,
+  options: any = {} //ReactiveEffectOptions = EMPTY_OBJ
+): ReactiveEffect<T> {
+  if (isEffect(fn)) {
+    fn = fn.raw;
+  }
+  // const effect = createReactiveEffect(fn, options);
+  // if (!options.lazy) {
+  //   effect();
+  // }
+  // return effect;
+
+  // hacky stuff
+  const effect: ReactiveEffect = () => {
+    return fn();
+  };
+
+  watchEffect(fn, {
+    deep: true,
+    flush: 'sync',
+  });
+
+  if (!options.lazy) {
+    effect();
+  }
+
+  effect.id = uid++;
+  effect._isEffect = true;
+  effect.active = true;
+  effect.raw = fn;
+  // effect.deps = [];
+  effect.options = options;
+  return effect;
+}

src/index.ts

@@ -37,5 +37,6 @@ export { getCurrentVM as getCurrentInstance } from './runtimeContext';
 export * from './apis/state';
 export * from './apis/lifecycle';
 export * from './apis/watch';
+export * from './apis/effect';
 export * from './apis/computed';
 export * from './apis/inject';

src/reactivity/ref.ts

@@ -82,7 +82,7 @@ type RefValue<T> = T extends Ref<infer V> ? V : UnwrapRef<T>;
 
 // without init value, explicit typed: a = ref<{ a: number }>()
 // typeof a will be Ref<{ a: number } | undefined>
-export function ref<T = undefined>(): Ref<T | undefined>;
+export function ref<T = any>(): Ref<T | undefined>;
 // with null as init value: a = ref<{ a: number }>(null);
 // typeof a will be Ref<{ a: number } | null>
 export function ref<T = null>(raw: null): Ref<T | null>;

test/apis/ref.spec.ts

@@ -1,13 +1,14 @@
 import {
   ref,
   // effect,
-  // reactive,
+  reactive,
   isRef,
-  // toRef,
-  // toRefs,
+  toRef,
+  toRefs,
   Ref,
   // isReactive,
   computed,
+  effect,
 } from '../../src';
 // import { shallowRef, unref, customRef } from '../src/ref'
 
@@ -19,69 +20,69 @@ describe('reactivity/ref', () => {
     expect(a.value).toBe(2);
   });
 
-  // it('should be reactive', () => {
-  //   const a = ref(1);
-  //   let dummy;
-  //   effect(() => {
-  //     dummy = a.value;
-  //   });
-  //   expect(dummy).toBe(1);
-  //   a.value = 2;
-  //   expect(dummy).toBe(2);
-  // });
-
-  // it('should make nested properties reactive', () => {
-  //   const a = ref({
-  //     count: 1,
-  //   });
-  //   let dummy;
-  //   effect(() => {
-  //     dummy = a.value.count;
-  //   });
-  //   expect(dummy).toBe(1);
-  //   a.value.count = 2;
-  //   expect(dummy).toBe(2);
-  // });
-
-  // it('should work without initial value', () => {
-  //   const a = ref();
-  //   let dummy;
-  //   effect(() => {
-  //     dummy = a.value;
-  //   });
-  //   expect(dummy).toBe(undefined);
-  //   a.value = 2;
-  //   expect(dummy).toBe(2);
-  // });
-
-  // it('should work like a normal property when nested in a reactive object', () => {
-  //   const a = ref(1);
-  //   const obj = reactive({
-  //     a,
-  //     b: {
-  //       c: a,
-  //     },
-  //   });
-
-  //   let dummy1: number;
-  //   let dummy2: number;
+  it('should be reactive', () => {
+    const a = ref(1);
+    let dummy;
+    effect(() => {
+      dummy = a.value;
+    });
+    expect(dummy).toBe(1);
+    a.value = 2;
+    expect(dummy).toBe(2);
+  });
 
-  //   effect(() => {
-  //     dummy1 = obj.a;
-  //     dummy2 = obj.b.c;
-  //   });
+  it('should make nested properties reactive', () => {
+    const a = ref({
+      count: 1,
+    });
+    let dummy;
+    effect(() => {
+      dummy = a.value.count;
+    });
+    expect(dummy).toBe(1);
+    a.value.count = 2;
+    expect(dummy).toBe(2);
+  });
 
-  //   const assertDummiesEqualTo = (val: number) =>
-  //     [dummy1, dummy2].forEach(dummy => expect(dummy).toBe(val));
+  it('should work without initial value', () => {
+    const a = ref();
+    let dummy;
+    effect(() => {
+      dummy = a.value;
+    });
+    expect(dummy).toBe(undefined);
+    a.value = 2;
+    expect(dummy).toBe(2);
+  });
 
-  //   assertDummiesEqualTo(1);
-  //   a.value++;
-  //   assertDummiesEqualTo(2);
-  //   obj.a++;
-  //   assertDummiesEqualTo(3);
-  //   obj.b.c++;
-  //   assertDummiesEqualTo(4);
-  // });
+  it('should work like a normal property when nested in a reactive object', () => {
+    const a = ref(1);
+    const obj = reactive({
+      a,
+      b: {
+        c: a,
+      },
+    });
+
+    let dummy1: number;
+    let dummy2: number;
+
+    effect(() => {
+      dummy1 = obj.a;
+      dummy2 = obj.b.c;
+    });
+
+    const assertDummiesEqualTo = (val: number) =>
+      [dummy1, dummy2].forEach(dummy => expect(dummy).toBe(val));
+
+    assertDummiesEqualTo(1);
+    a.value++;
+    assertDummiesEqualTo(2);
+    obj.a++;
+    assertDummiesEqualTo(3);
+    obj.b.c++;
+    assertDummiesEqualTo(4);
+  });
 
   it('should unwrap nested ref in types', () => {
     const a = ref(0);
@@ -184,74 +185,74 @@ describe('reactivity/ref', () => {
     expect(isRef({ value: 0 })).toBe(false);
   });
 
-  // test('toRef', () => {
-  //   const a = reactive({
-  //     x: 1,
-  //   });
-  //   const x = toRef(a, 'x');
-  //   expect(isRef(x)).toBe(true);
-  //   expect(x.value).toBe(1);
-
-  //   // source -> proxy
-  //   a.x = 2;
-  //   expect(x.value).toBe(2);
-
-  //   // proxy -> source
-  //   x.value = 3;
-  //   expect(a.x).toBe(3);
-
-  //   // reactivity
-  //   let dummyX;
-  //   effect(() => {
-  //     dummyX = x.value;
-  //   });
-  //   expect(dummyX).toBe(x.value);
-
-  //   // mutating source should trigger effect using the proxy refs
-  //   a.x = 4;
-  //   expect(dummyX).toBe(4);
-  // });
-
-  // test('toRefs', () => {
-  //   const a = reactive({
-  //     x: 1,
-  //     y: 2,
-  //   });
-
-  //   const { x, y } = toRefs(a);
-
-  //   expect(isRef(x)).toBe(true);
-  //   expect(isRef(y)).toBe(true);
-  //   expect(x.value).toBe(1);
-  //   expect(y.value).toBe(2);
-
-  //   // source -> proxy
-  //   a.x = 2;
-  //   a.y = 3;
-  //   expect(x.value).toBe(2);
-  //   expect(y.value).toBe(3);
-
-  //   // proxy -> source
-  //   x.value = 3;
-  //   y.value = 4;
-  //   expect(a.x).toBe(3);
-  //   expect(a.y).toBe(4);
+  test('toRef', () => {
+    const a = reactive({
+      x: 1,
+    });
+    const x = toRef(a, 'x');
+    expect(isRef(x)).toBe(true);
+    expect(x.value).toBe(1);
+
+    // source -> proxy
+    a.x = 2;
+    expect(x.value).toBe(2);
+
+    // proxy -> source
+    x.value = 3;
+    expect(a.x).toBe(3);
+
+    // reactivity
+    let dummyX;
+    effect(() => {
+      dummyX = x.value;
+    });
+    expect(dummyX).toBe(x.value);
+
+    // mutating source should trigger effect using the proxy refs
+    a.x = 4;
+    expect(dummyX).toBe(4);
+  });
 
-  //   // reactivity
-  //   let dummyX, dummyY;
-  //   effect(() => {
-  //     dummyX = x.value;
-  //     dummyY = y.value;
-  //   });
-  //   expect(dummyX).toBe(x.value);
-  //   expect(dummyY).toBe(y.value);
-
-  //   // mutating source should trigger effect using the proxy refs
-  //   a.x = 4;
-  //   a.y = 5;
-  //   expect(dummyX).toBe(4);
-  //   expect(dummyY).toBe(5);
-  // });
+  test('toRefs', () => {
+    const a = reactive({
+      x: 1,
+      y: 2,
+    });
+
+    const { x, y } = toRefs(a);
+
+    expect(isRef(x)).toBe(true);
+    expect(isRef(y)).toBe(true);
+    expect(x.value).toBe(1);
+    expect(y.value).toBe(2);
+
+    // source -> proxy
+    a.x = 2;
+    a.y = 3;
+    expect(x.value).toBe(2);
+    expect(y.value).toBe(3);
+
+    // proxy -> source
+    x.value = 3;
+    y.value = 4;
+    expect(a.x).toBe(3);
+    expect(a.y).toBe(4);
+
+    // reactivity
+    let dummyX, dummyY;
+    effect(() => {
+      dummyX = x.value;
+      dummyY = y.value;
+    });
+    expect(dummyX).toBe(x.value);
+    expect(dummyY).toBe(y.value);
+
+    // mutating source should trigger effect using the proxy refs
+    a.x = 4;
+    a.y = 5;
+    expect(dummyX).toBe(4);
+    expect(dummyY).toBe(5);
+  });
 
   // test('customRef', () => {
   //   let value = 1;