refactor: internal structures (#426)

Author: antfu

src/apis/computed.ts

@@ -1,6 +1,6 @@
-import { getCurrentVue, getCurrentInstance } from '../runtimeContext'
+import { getVueConstructor, getCurrentInstance } from '../runtimeContext'
 import { createRef, Ref } from '../reactivity'
-import { defineComponentInstance } from '../helper'
+import { defineComponentInstance } from '../utils/helper'
 import { warn } from '../utils'
 
 interface Option<T> {
@@ -31,7 +31,7 @@ export function computed<T>(
     set = options.set
   }
 
-  const computedHost = defineComponentInstance(getCurrentVue(), {
+  const computedHost = defineComponentInstance(getVueConstructor(), {
     computed: {
       $$state: {
         get,

src/createApp.ts renamed to src/apis/createApp.ts

@@ -1,7 +1,7 @@
 import type Vue from 'vue'
 import { VueConstructor } from 'vue/types/umd'
-import { getCurrentVue } from './runtimeContext'
-import { warn } from './utils'
+import { getVueConstructor } from '../runtimeContext'
+import { warn } from '../utils'
 
 export interface App {
   config: VueConstructor['config']
@@ -14,7 +14,7 @@ export interface App {
 }
 
 export function createApp(rootComponent: any, rootProps: any = undefined): App {
-  const V = getCurrentVue()!
+  const V = getVueConstructor()!
 
   let mountedVM: Vue | undefined = undefined
 

src/createElement.ts renamed to src/apis/createElement.ts

@@ -1,22 +1,23 @@
 import Vue from 'vue'
-import { currentVM, getCurrentVue } from './runtimeContext'
-import { defineComponentInstance } from './helper'
-import { warn } from './utils'
+import { getVueConstructor, getCurrentInstance } from '../runtimeContext'
+import { defineComponentInstance } from '../utils/helper'
+import { warn } from '../utils'
 
 type CreateElement = Vue['$createElement']
 
 let fallbackCreateElement: CreateElement
 
 export const createElement = (function createElement(...args: any) {
-  if (!currentVM) {
+  const instance = getCurrentInstance()
+  if (!instance) {
     warn('`createElement()` has been called outside of render function.')
     if (!fallbackCreateElement) {
-      fallbackCreateElement = defineComponentInstance(getCurrentVue())
+      fallbackCreateElement = defineComponentInstance(getVueConstructor())
         .$createElement
     }
 
     return fallbackCreateElement.apply(fallbackCreateElement, args)
   }
 
-  return currentVM.$createElement.apply(currentVM, args)
+  return instance.$createElement.apply(instance, args)
 } as any) as CreateElement

src/apis/index.ts

@@ -0,0 +1,8 @@
+export * from './state'
+export * from './lifecycle'
+export * from './watch'
+export * from './computed'
+export * from './inject'
+export { createApp } from './createApp'
+export { nextTick } from './nextTick'
+export { createElement as h } from './createElement'

src/apis/inject.ts

@@ -1,6 +1,5 @@
 import { ComponentInstance } from '../component'
-import { currentVMInFn } from '../helper'
-import { hasOwn, warn } from '../utils'
+import { hasOwn, warn, currentVMInFn } from '../utils'
 import { getCurrentInstance } from '../runtimeContext'
 
 const NOT_FOUND = {}

src/apis/lifecycle.ts

@@ -1,18 +1,18 @@
 import { VueConstructor } from 'vue'
 import { ComponentInstance } from '../component'
 import {
-  getCurrentVue,
-  setCurrentVM,
+  getVueConstructor,
+  setCurrentInstance,
   getCurrentInstance,
 } from '../runtimeContext'
-import { currentVMInFn } from '../helper'
+import { currentVMInFn } from '../utils/helper'
 
 const genName = (name: string) => `on${name[0].toUpperCase() + name.slice(1)}`
 function createLifeCycle(lifeCyclehook: string) {
   return (callback: Function) => {
     const vm = currentVMInFn(genName(lifeCyclehook))
     if (vm) {
-      injectHookOption(getCurrentVue(), vm, lifeCyclehook, callback)
+      injectHookOption(getVueConstructor(), vm, lifeCyclehook, callback)
     }
   }
 }
@@ -31,11 +31,11 @@ function injectHookOption(
 function wrapHookCall(vm: ComponentInstance, fn: Function) {
   return (...args: any) => {
     let preVm = getCurrentInstance()
-    setCurrentVM(vm)
+    setCurrentInstance(vm)
     try {
       return fn(...args)
     } finally {
-      setCurrentVM(preVm)
+      setCurrentInstance(preVm)
     }
   }
 }

src/nextTick.ts renamed to src/apis/nextTick.ts

@@ -1,11 +1,11 @@
 import Vue from 'vue'
-import { currentVue } from './runtimeContext'
+import { getVueConstructor } from '../runtimeContext'
 
 type NextTick = Vue['$nextTick']
 
 export const nextTick: NextTick = function nextTick(
   this: ThisType<NextTick>,
   ...args: Parameters<NextTick>
 ) {
-  return currentVue?.nextTick.apply(this, args)
+  return getVueConstructor()?.nextTick.apply(this, args)
 } as any

src/apis/state.ts

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

src/apis/watch.ts

@@ -1,9 +1,12 @@
 import { ComponentInstance } from '../component'
 import { Ref, isRef, isReactive } from '../reactivity'
 import { assert, logError, noopFn, warn, isFunction } from '../utils'
-import { defineComponentInstance } from '../helper'
-import { getCurrentInstance, getCurrentVue } from '../runtimeContext'
-import { WatcherPreFlushQueueKey, WatcherPostFlushQueueKey } from '../symbols'
+import { defineComponentInstance } from '../utils/helper'
+import { getCurrentInstance, getVueConstructor } from '../runtimeContext'
+import {
+  WatcherPreFlushQueueKey,
+  WatcherPostFlushQueueKey,
+} from '../utils/symbols'
 import { ComputedRef } from './computed'
 
 export type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void
@@ -98,7 +101,7 @@ function getWatcherVM() {
   let vm = getCurrentInstance()
   if (!vm) {
     if (!fallbackVM) {
-      fallbackVM = defineComponentInstance(getCurrentVue())
+      fallbackVM = defineComponentInstance(getVueConstructor())
     }
     vm = fallbackVM
   } else if (!hasWatchEnv(vm)) {

src/env.d.ts

@@ -1,5 +1,5 @@
 import { VueConstructor } from 'vue'
-import { VfaState } from './vmStateManager'
+import { VfaState } from './utils/vmStateManager'
 import { VueWatcher } from './apis/watch'
 
 declare global {
@@ -13,7 +13,7 @@ declare module 'vue/types/vue' {
     readonly _uid: number
     readonly _data: Record<string, any>
     _watchers: VueWatcher[]
-    __secret_vfa_state__?: VfaState
+    __composition_api_state__?: VfaState
   }
 
   interface VueConstructor {

src/index.ts

@@ -1,22 +1,8 @@
-import Vue, { VueConstructor } from 'vue'
+import type Vue from 'vue'
 import { Data, SetupFunction } from './component'
-import { install } from './install'
-import { mixin } from './setup'
+import { Plugin } from './install'
 
-declare module 'vue/types/options' {
-  interface ComponentOptions<V extends Vue> {
-    setup?: SetupFunction<Data, Data>
-  }
-}
-
-const VueCompositionAPI = {
-  install: (Vue: VueConstructor) => install(Vue, mixin),
-}
-
-export default VueCompositionAPI
-export { createApp } from './createApp'
-export { nextTick } from './nextTick'
-export { createElement as h } from './createElement'
+export * from './apis'
 export { getCurrentInstance } from './runtimeContext'
 export {
   defineComponent,
@@ -25,14 +11,15 @@ export {
   PropOptions,
   SetupContext,
 } from './component'
+export default Plugin
 
-export * from './apis/state'
-export * from './apis/lifecycle'
-export * from './apis/watch'
-export * from './apis/computed'
-export * from './apis/inject'
+declare module 'vue/types/options' {
+  interface ComponentOptions<V extends Vue> {
+    setup?: SetupFunction<Data, Data>
+  }
+}
 
 // auto install when using CDN
 if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.use(VueCompositionAPI)
+  window.Vue.use(Plugin)
 }

src/install.ts

@@ -1,8 +1,9 @@
+import type { VueConstructor } from 'vue'
 import { AnyObject } from './types/basic'
 import { hasSymbol, hasOwn, isPlainObject, assert } from './utils'
 import { isRef } from './reactivity'
-import { setCurrentVue, currentVue } from './runtimeContext'
-import { VueConstructor } from 'vue'
+import { setVueConstructor, isVueRegistered } from './runtimeContext'
+import { mixin } from './mixin'
 
 /**
  * Helper that recursively merges two data objects together.
@@ -38,11 +39,8 @@ function mergeData(from: AnyObject, to: AnyObject): Object {
   return to
 }
 
-export function install(
-  Vue: VueConstructor,
-  _install: (Vue: VueConstructor) => void
-) {
-  if (currentVue && currentVue === Vue) {
+export function install(Vue: VueConstructor) {
+  if (isVueRegistered()) {
     if (__DEV__) {
       assert(
         false,
@@ -73,6 +71,10 @@ export function install(
     }
   }
 
-  setCurrentVue(Vue)
-  _install(Vue)
+  setVueConstructor(Vue)
+  mixin(Vue)
+}
+
+export const Plugin = {
+  install: (Vue: VueConstructor) => install(Vue),
 }

src/setup.ts renamed to src/mixin.ts

@@ -1,18 +1,31 @@
-import { VueConstructor } from 'vue'
+import type { VueConstructor } from 'vue'
 import {
   ComponentInstance,
   SetupContext,
   SetupFunction,
   Data,
 } from './component'
-import { Ref, isRef, isReactive, markRaw } from './reactivity'
-import { getCurrentInstance, setCurrentVM } from './runtimeContext'
-import { resolveSlots, createSlotProxy } from './helper'
-import { hasOwn, isPlainObject, assert, proxy, warn, isFunction } from './utils'
-import { ref } from './apis/state'
-import vmStateManager from './vmStateManager'
-import { unwrapRefProxy } from './reactivity/unwrap'
-import { markReactive } from './reactivity/reactive'
+import {
+  Ref,
+  isRef,
+  isReactive,
+  markRaw,
+  unwrapRefProxy,
+  markReactive,
+} from './reactivity'
+import { getCurrentInstance, setCurrentInstance } from './runtimeContext'
+import {
+  resolveSlots,
+  createSlotProxy,
+  hasOwn,
+  isPlainObject,
+  assert,
+  proxy,
+  warn,
+  isFunction,
+} from './utils'
+import { ref } from './apis'
+import vmStateManager from './utils/vmStateManager'
 
 function asVmProperty(
   vm: ComponentInstance,
@@ -83,11 +96,11 @@ function resolveScopedSlots(
   vm: ComponentInstance,
   slotsProxy: { [x: string]: Function }
 ): void {
-  const parentVode = (vm.$options as any)._parentVnode
-  if (!parentVode) return
+  const parentVNode = (vm.$options as any)._parentVnode
+  if (!parentVNode) return
 
   const prevSlots = vmStateManager.get(vm, 'slots') || []
-  const curSlots = resolveSlots(parentVode.data.scopedSlots, vm.$slots)
+  const curSlots = resolveSlots(parentVNode.data.scopedSlots, vm.$slots)
   // remove staled slots
   for (let index = 0; index < prevSlots.length; index++) {
     const key = prevSlots[index]
@@ -113,7 +126,7 @@ function activateCurrentInstance(
   onError?: (err: Error) => void
 ) {
   let preVm = getCurrentInstance()
-  setCurrentVM(vm)
+  setCurrentInstance(vm)
   try {
     return fn(vm)
   } catch (err) {
@@ -123,7 +136,7 @@ function activateCurrentInstance(
       throw err
     }
   } finally {
-    setCurrentVM(preVm)
+    setCurrentInstance(preVm)
   }
 }
 

src/reactivity/index.ts

@@ -5,6 +5,7 @@ export {
   shallowReactive,
   toRaw,
   isRaw,
+  markReactive,
 } from './reactive'
 export {
   ref,
@@ -19,3 +20,4 @@ export {
   triggerRef,
 } from './ref'
 export { set } from './set'
+export { unwrapRefProxy } from './unwrap'