refactor: use explicit exports for runtime-core

packages/runtime-core/__tests__/vnode.spec.ts

@@ -1,12 +1,15 @@
-import { createBlock, createVNode, openBlock } from '@vue/runtime-test'
 import {
-  ShapeFlags,
+  createBlock,
+  createVNode,
+  openBlock,
   Comment,
   Fragment,
   Text,
-  cloneVNode
+  cloneVNode,
-} from '@vue/runtime-core'
+  mergeProps,
-import { mergeProps, normalizeVNode } from '../src/vnode'
+  normalizeVNode
+} from '../src/vnode'
+import { ShapeFlags } from '../src/shapeFlags'
 import { Data } from '../src/component'
 import { PatchFlags } from '@vue/shared'
 

packages/runtime-core/src/apiComputed.ts

@@ -0,0 +1,20 @@
+import {
+  computed as _computed,
+  ComputedRef,
+  WritableComputedOptions,
+  WritableComputedRef,
+  ComputedGetter
+} from '@vue/reactivity'
+import { recordInstanceBoundEffect } from './component'
+
+export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
+export function computed<T>(
+  options: WritableComputedOptions<T>
+): WritableComputedRef<T>
+export function computed<T>(
+  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
+) {
+  const c = _computed(getterOrOptions as any)
+  recordInstanceBoundEffect(c.effect)
+  return c
+}

packages/runtime-core/src/apiOptions.ts

@@ -15,7 +15,7 @@ import {
   EMPTY_OBJ,
   NOOP
 } from '@vue/shared'
-import { computed } from './apiReactivity'
+import { computed } from './apiComputed'
 import { watch, WatchOptions, WatchCallback } from './apiWatch'
 import { provide, inject } from './apiInject'
 import {

packages/runtime-core/src/apiReactivity.ts

@@ -1,54 +0,0 @@
-export {
-  ref,
-  isRef,
-  toRefs,
-  reactive,
-  isReactive,
-  readonly,
-  isReadonly,
-  shallowReactive,
-  toRaw,
-  markReadonly,
-  markNonReactive,
-  // types
-  ReactiveEffect,
-  ReactiveEffectOptions,
-  DebuggerEvent,
-  TrackOpTypes,
-  TriggerOpTypes,
-  Ref,
-  ComputedRef,
-  UnwrapRef,
-  WritableComputedOptions
-} from '@vue/reactivity'
-
-import {
-  computed as _computed,
-  ComputedRef,
-  WritableComputedOptions,
-  ReactiveEffect,
-  WritableComputedRef,
-  ComputedGetter
-} from '@vue/reactivity'
-
-import { currentInstance } from './component'
-
-// record effects created during a component's setup() so that they can be
-// stopped when the component unmounts
-export function recordEffect(effect: ReactiveEffect) {
-  if (currentInstance) {
-    ;(currentInstance.effects || (currentInstance.effects = [])).push(effect)
-  }
-}
-
-export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
-export function computed<T>(
-  options: WritableComputedOptions<T>
-): WritableComputedRef<T>
-export function computed<T>(
-  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
-) {
-  const c = _computed(getterOrOptions as any)
-  recordEffect(c.effect)
-  return c
-}

packages/runtime-core/src/apiWatch.ts

@@ -16,13 +16,13 @@ import {
   hasChanged,
   NOOP
 } from '@vue/shared'
-import { recordEffect } from './apiReactivity'
 import {
   currentInstance,
   ComponentInternalInstance,
   currentSuspense,
   Data,
-  isInSSRComponentSetup
+  isInSSRComponentSetup,
+  recordInstanceBoundEffect
 } from './component'
 import {
   ErrorCodes,
@@ -235,7 +235,7 @@ function doWatch(
     }
   }
 
-  recordEffect(runner)
+  recordInstanceBoundEffect(runner)
   return () => {
     stop(runner)
     if (instance) {

packages/runtime-core/src/component.ts

@@ -501,3 +501,11 @@ function createSetupContext(instance: ComponentInternalInstance): SetupContext {
   }
   return __DEV__ ? Object.freeze(context) : context
 }
+
+// record effects created during a component's setup() so that they can be
+// stopped when the component unmounts
+export function recordInstanceBoundEffect(effect: ReactiveEffect) {
+  if (currentInstance) {
+    ;(currentInstance.effects || (currentInstance.effects = [])).push(effect)
+  }
+}

packages/runtime-core/src/components/Suspense.ts

@@ -417,6 +417,8 @@ function createSuspenseBoundary<HostNode, HostElement>(
             pushWarningContext(vnode)
           }
           handleSetupResult(instance, asyncSetupResult, suspense)
+          // unset placeholder, otherwise this will be treated as a hydration mount
+          vnode.el = null
           setupRenderEffect(
             instance,
             vnode,

packages/runtime-core/src/hydration.ts

@@ -15,8 +15,8 @@ import { warn } from './warning'
 import { PatchFlags, isReservedProp, isOn } from '@vue/shared'
 
 // Note: hydration is DOM-specific
-// but we have to place it in core due to tight coupling with core renderer
+// but we have to place it in core due to tight coupling with core - splitting
-// logic - splitting it out
+// it out creates a ton of unnecessary complexity.
 export function createHydrateFn(
   mountComponent: any, // TODO
   patchProp: any // TODO

packages/runtime-core/src/index.ts

@@ -1,10 +1,35 @@
 // Public API ------------------------------------------------------------------
 
 export const version = __VERSION__
-export * from './apiReactivity'
+export {
-export * from './apiWatch'
+  ref,
-export * from './apiLifecycle'
+  isRef,
-export * from './apiInject'
+  toRefs,
+  reactive,
+  isReactive,
+  readonly,
+  isReadonly,
+  shallowReactive,
+  toRaw,
+  markReadonly,
+  markNonReactive
+} from '@vue/reactivity'
+export { computed } from './apiComputed'
+export { watch } from './apiWatch'
+export {
+  onBeforeMount,
+  onMounted,
+  onBeforeUpdate,
+  onUpdated,
+  onBeforeUnmount,
+  onUnmounted,
+  onActivated,
+  onDeactivated,
+  onRenderTracked,
+  onRenderTriggered,
+  onErrorCaptured
+} from './apiLifecycle'
+export { provide, inject } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 
@@ -24,37 +49,23 @@ export {
   createBlock
 } from './vnode'
 // Internal Components
-export { Fragment, Portal } from './vnode'
+export { Text, Comment, Fragment, Portal } from './vnode'
 export { Suspense, SuspenseProps } from './components/Suspense'
 export { KeepAlive, KeepAliveProps } from './components/KeepAlive'
 export {
   BaseTransition,
   BaseTransitionProps
 } from './components/BaseTransition'
-// VNode flags
+export { PatchFlags } from '@vue/shared'
-export { PublicShapeFlags as ShapeFlags } from './shapeFlags'
+export { ShapeFlags } from './shapeFlags'
-import { PublicPatchFlags } from '@vue/shared'
-export const PatchFlags = PublicPatchFlags as {
-  // export patch flags as plain numbers to avoid d.ts relying on @vue/shared
-  // the enum type is internal anyway.
-  TEXT: number
-  CLASS: number
-  STYLE: number
-  PROPS: number
-  NEED_PATCH: number
-  FULL_PROPS: number
-  STABLE_FRAGMENT: number
-  KEYED_FRAGMENT: number
-  UNKEYED_FRAGMENT: number
-  DYNAMIC_SLOTS: number
-  BAIL: number
-}
 
 // SFC CSS Modules
 export { useCSSModule } from './helpers/useCssModule'
 
+// Internal API ----------------------------------------------------------------
+
 // For custom renderers
-export { createRenderer, RootRenderFunction } from './renderer'
+export { createRenderer } from './renderer'
 export { warn } from './warning'
 export {
   handleError,
@@ -63,14 +74,10 @@ export {
 } from './errorHandling'
 export {
   useTransitionState,
-  TransitionState,
   resolveTransitionHooks,
-  setTransitionHooks,
+  setTransitionHooks
-  TransitionHooks
 } from './components/BaseTransition'
 
-// Internal API ----------------------------------------------------------------
-
 // For compiler generated code
 // should sync with '@vue/compiler-core/src/runtimeConstants.ts'
 export { withDirectives } from './directives'
@@ -104,6 +111,7 @@ export const camelize = _camelize as (s: string) => string
 export { registerRuntimeCompiler } from './component'
 
 // SSR -------------------------------------------------------------------------
+
 import { createComponentInstance, setupComponent } from './component'
 import {
   renderComponentRoot,
@@ -125,6 +133,26 @@ export const ssrUtils = (__NODE_JS__ ? _ssrUtils : null) as typeof _ssrUtils
 
 // Types -----------------------------------------------------------------------
 
+export {
+  ReactiveEffect,
+  ReactiveEffectOptions,
+  DebuggerEvent,
+  TrackOpTypes,
+  TriggerOpTypes,
+  Ref,
+  ComputedRef,
+  UnwrapRef,
+  WritableComputedOptions
+} from '@vue/reactivity'
+export {
+  // types
+  WatchOptions,
+  WatchCallback,
+  CleanupRegistrator,
+  WatchSource,
+  StopHandle
+} from './apiWatch'
+export { InjectionKey } from './apiInject'
 export {
   App,
   AppConfig,
@@ -152,9 +180,8 @@ export {
   ComponentOptionsWithObjectProps as ComponentOptionsWithProps,
   ComponentOptionsWithArrayProps
 } from './apiOptions'
-
 export { ComponentPublicInstance } from './componentProxy'
-export { RendererOptions } from './renderer'
+export { RendererOptions, RootRenderFunction } from './renderer'
 export { Slot, Slots } from './componentSlots'
 export {
   Prop,
@@ -171,4 +198,5 @@ export {
   DirectiveArguments
 } from './directives'
 export { SuspenseBoundary } from './components/Suspense'
+export { TransitionState, TransitionHooks } from './components/BaseTransition'
 export { HMRRuntime } from './hmr'

packages/runtime-core/src/shapeFlags.ts

@@ -10,17 +10,3 @@ export const enum ShapeFlags {
   COMPONENT_KEPT_ALIVE = 1 << 8,
   COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
 }
-
-// For runtime consumption
-export const PublicShapeFlags = {
-  ELEMENT: ShapeFlags.ELEMENT,
-  FUNCTIONAL_COMPONENT: ShapeFlags.FUNCTIONAL_COMPONENT,
-  STATEFUL_COMPONENT: ShapeFlags.STATEFUL_COMPONENT,
-  TEXT_CHILDREN: ShapeFlags.TEXT_CHILDREN,
-  ARRAY_CHILDREN: ShapeFlags.ARRAY_CHILDREN,
-  SLOTS_CHILDREN: ShapeFlags.SLOTS_CHILDREN,
-  SUSPENSE: ShapeFlags.SUSPENSE,
-  COMPONENT_SHOULD_KEEP_ALIVE: ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE,
-  COMPONENT_KEPT_ALIVE: ShapeFlags.COMPONENT_KEPT_ALIVE,
-  COMPONENT: ShapeFlags.COMPONENT
-}

packages/shared/src/patchFlags.ts

@@ -82,20 +82,6 @@ export const enum PatchFlags {
   BAIL = -2
 }
 
-// runtime object for public consumption
-export const PublicPatchFlags = {
-  TEXT: PatchFlags.TEXT,
-  CLASS: PatchFlags.CLASS,
-  STYLE: PatchFlags.STYLE,
-  PROPS: PatchFlags.PROPS,
-  NEED_PATCH: PatchFlags.NEED_PATCH,
-  FULL_PROPS: PatchFlags.FULL_PROPS,
-  KEYED_FRAGMENT: PatchFlags.KEYED_FRAGMENT,
-  UNKEYED_FRAGMENT: PatchFlags.UNKEYED_FRAGMENT,
-  DYNAMIC_SLOTS: PatchFlags.DYNAMIC_SLOTS,
-  BAIL: PatchFlags.BAIL
-}
-
 // dev only flag -> name mapping
 export const PatchFlagNames = {
   [PatchFlags.TEXT]: `TEXT`,