feat: adding missing reactivity api from vue-next (#311)

* fix(watch): component should runCleaup() on unmount

close #293

* feat: add unref API to match API with vue3

* types: making ComputedRef types inline with vue3 and provide ComputedRef type

* feat: bring API to vue-3 compatible

* fix rollup build

* ref tests, add some sort of effect api

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

* add unref test

* more tests

* fix computed.spec.ts

* watch/watchEffect making the apis inline with vue3

* fix state.spec.js tests

* tests

* apiWatch.spec.ts passing

* fix computed.spec.ts

* removing reactivity collection tests :(

Vue2 Limitations

* implementing `shallowReactive`

* removing bad import :/

* rename nonReactive to markRaw and add toRaw

* removing readonly.spec.ts

* add shallowRef

* clean stuff

* cleanup

* computed Ref

* Add toRefs type
fixes #315

* inline ref, reactive, computed, watch api to v3.0.0-beta.8

* code-review fixes

* feat(lifeCycleHook): `getCurrentInstance` inside lifecycle hook

* feat: warn when calling lifecycleHook outside setup() instead of throw, also change message

* fix(test): capture warning properly

* fix: apiLifecycleTests

Co-authored-by: Thorsten <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>

Author: 3 people

package.json

@@ -35,7 +35,7 @@
   },
   "homepage": "https://github.com/vuejs/composition-api#readme",
   "devDependencies": {
-    "@types/jest": "^24.0.13",
+    "@types/jest": "^25.2.1",
     "@types/node": "^12.0.2",
     "cross-env": "^5.2.0",
     "husky": "^2.7.0",
@@ -76,6 +76,9 @@
   },
   "jest": {
     "verbose": true,
+    "globals": {
+      "__DEV__": true
+    },
     "setupFiles": [
       "<rootDir>/test/setupTest.js"
     ],

rollup.config.js

@@ -56,7 +56,15 @@ function genConfig({ outFile, format, mode }) {
         typescript: require('typescript'),
       }),
       resolve(),
-      replace({ 'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development') }),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development'),
+        __DEV__:
+          format === 'es'
+            ? // preserve to be handled by bundlers
+              `(__DEV__)`
+            : // hard coded dev/prod builds
+              !isProd,
+      }),
       isProd && terser(),
     ].filter(Boolean),
   };

src/apis/computed.ts

@@ -8,14 +8,20 @@ interface Option<T> {
   set: (value: T) => void;
 }
 
+export interface ComputedRef<T = any> extends WritableComputedRef<T> {
+  readonly value: T;
+}
+
+export interface WritableComputedRef<T> extends Ref<T> {}
+
 // read-only
-export function computed<T>(getter: Option<T>['get']): Readonly<Ref<Readonly<T>>>;
+export function computed<T>(getter: Option<T>['get']): ComputedRef<T>;
 // writable
-export function computed<T>(options: Option<T>): Ref<Readonly<T>>;
+export function computed<T>(options: Option<T>): WritableComputedRef<T>;
 // implement
 export function computed<T>(
   options: Option<T>['get'] | Option<T>
-): Readonly<Ref<Readonly<T>>> | Ref<Readonly<T>> {
+): ComputedRef<T> | WritableComputedRef<T> {
   const vm = getCurrentVM();
   let get: Option<T>['get'], set: Option<T>['set'] | undefined;
   if (typeof options === 'function') {
@@ -37,7 +43,7 @@ export function computed<T>(
   return createRef<T>({
     get: () => (computedHost as any).$$state,
     set: (v: T) => {
-      if (process.env.NODE_ENV !== 'production' && !set) {
+      if (__DEV__ && !set) {
         warn('Computed property was assigned to but it has no setter.', vm!);
         return;
       }

src/apis/inject.ts

@@ -1,11 +1,12 @@
 import { ComponentInstance } from '../component';
-import { ensureCurrentVMInFn } from '../helper';
+import { currentVMInFn } from '../helper';
 import { hasOwn, warn } from '../utils';
+import { getCurrentVM } from '../runtimeContext';
 
 const NOT_FOUND = {};
 export interface InjectionKey<T> extends Symbol {}
 
-function resolveInject(provideKey: InjectionKey<any>, vm: ComponentInstance): any {
+function resolveInject(provideKey: InjectionKey<any> | string, vm: ComponentInstance): any {
   let source = vm;
   while (source) {
     // @ts-ignore
@@ -20,7 +21,9 @@ function resolveInject(provideKey: InjectionKey<any>, vm: ComponentInstance): an
 }
 
 export function provide<T>(key: InjectionKey<T> | string, value: T): void {
-  const vm: any = ensureCurrentVMInFn('provide');
+  const vm: any = currentVMInFn('provide');
+  if (!vm) return;
+
   if (!vm._provided) {
     const provideCache = {};
     Object.defineProperty(vm, '_provided', {
@@ -34,19 +37,23 @@ export function provide<T>(key: InjectionKey<T> | string, value: T): void {
 
 export function inject<T>(key: InjectionKey<T> | string): T | undefined;
 export function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T;
-export function inject<T>(key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+export function inject(key: InjectionKey<any> | string, defaultValue?: unknown) {
   if (!key) {
     return defaultValue;
   }
 
-  const vm = ensureCurrentVMInFn('inject');
-  const val = resolveInject(key as InjectionKey<T>, vm);
-  if (val !== NOT_FOUND) {
-    return val;
-  } else {
-    if (defaultValue === undefined && process.env.NODE_ENV !== 'production') {
-      warn(`Injection "${String(key)}" not found`, vm);
+  const vm = getCurrentVM();
+  if (vm) {
+    const val = resolveInject(key, vm);
+    if (val !== NOT_FOUND) {
+      return val;
+    } else {
+      if (defaultValue === undefined && process.env.NODE_ENV !== 'production') {
+        warn(`Injection "${String(key)}" not found`, vm);
+      }
+      return defaultValue;
     }
-    return defaultValue;
+  } else {
+    warn(`inject() can only be used inside setup() or functional components.`);
   }
 }

src/apis/lifecycle.ts

@@ -1,20 +1,34 @@
 import { VueConstructor } from 'vue';
 import { ComponentInstance } from '../component';
-import { getCurrentVue } from '../runtimeContext';
-import { ensureCurrentVMInFn } from '../helper';
+import { getCurrentVue, setCurrentVM, getCurrentVM } from '../runtimeContext';
+import { currentVMInFn } from '../helper';
 
 const genName = (name: string) => `on${name[0].toUpperCase() + name.slice(1)}`;
 function createLifeCycle(lifeCyclehook: string) {
   return (callback: Function) => {
-    const vm = ensureCurrentVMInFn(genName(lifeCyclehook));
-    injectHookOption(getCurrentVue(), vm, lifeCyclehook, callback);
+    const vm = currentVMInFn(genName(lifeCyclehook));
+    if (vm) {
+      injectHookOption(getCurrentVue(), vm, lifeCyclehook, callback);
+    }
   };
 }
 
 function injectHookOption(Vue: VueConstructor, vm: ComponentInstance, hook: string, val: Function) {
   const options = vm.$options as any;
   const mergeFn = Vue.config.optionMergeStrategies[hook];
-  options[hook] = mergeFn(options[hook], val);
+  options[hook] = mergeFn(options[hook], wrapHookCall(vm, val));
+}
+
+function wrapHookCall(vm: ComponentInstance, fn: Function) {
+  return (...args: any) => {
+    let preVm = getCurrentVM();
+    setCurrentVM(vm);
+    try {
+      return fn(...args);
+    } finally {
+      setCurrentVM(preVm);
+    }
+  };
 }
 
 // export const onCreated = createLifeCycle('created');

src/apis/state.ts

@@ -1 +1,17 @@
-export { reactive, ref, Ref, isRef, toRefs, set } from '../reactivity';
+export {
+  reactive,
+  ref,
+  Ref,
+  isRef,
+  toRefs,
+  set,
+  toRef,
+  isReactive,
+  UnwrapRef,
+  markRaw,
+  unref,
+  shallowReactive,
+  toRaw,
+  shallowRef,
+  triggerRef,
+} from '../reactivity';