build: improve treeshakeability (#5682)

Author: fnlctrl

packages/reactivity/src/baseHandlers.ts

@@ -35,6 +35,7 @@ import { warn } from './warning'
 const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`)
 
 const builtInSymbols = new Set(
+  /*#__PURE__*/
   Object.getOwnPropertyNames(Symbol)
     .map(key => (Symbol as any)[key])
     .filter(isSymbol)

packages/reactivity/src/deferredComputed.ts

@@ -4,7 +4,7 @@ import { ComputedGetter, ComputedRef } from './computed'
 import { ReactiveFlags, toRaw } from './reactive'
 import { trackRefValue, triggerRefValue } from './ref'
 
-const tick = Promise.resolve()
+const tick = /*#__PURE__*/ Promise.resolve()
 const queue: any[] = []
 let queued = false
 

packages/runtime-core/src/componentPublicInstance.ts

@@ -223,9 +223,10 @@ const getPublicInstance = (
   return getPublicInstance(i.parent)
 }
 
-export const publicPropertiesMap: PublicPropertiesMap = /*#__PURE__*/ extend(
-  Object.create(null),
-  {
+export const publicPropertiesMap: PublicPropertiesMap =
+  // Move PURE marker to new line to workaround compiler discarding it
+  // due to type annotation
+  /*#__PURE__*/ extend(Object.create(null), {
     $: i => i,
     $el: i => i.vnode.el,
     $data: i => i.data,
@@ -240,8 +241,7 @@ export const publicPropertiesMap: PublicPropertiesMap = /*#__PURE__*/ extend(
     $forceUpdate: i => () => queueJob(i.update),
     $nextTick: i => nextTick.bind(i.proxy!),
     $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP)
-  } as PublicPropertiesMap
-)
+  } as PublicPropertiesMap)
 
 if (__COMPAT__) {
   installCompatInstanceProperties(publicPropertiesMap)
@@ -456,8 +456,8 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   ) {
     if (descriptor.get != null) {
       // invalidate key cache of a getter based property #5417
-      target.$.accessCache[key] = 0;
-    } else if (hasOwn(descriptor,'value')) {
+      target.$.accessCache[key] = 0
+    } else if (hasOwn(descriptor, 'value')) {
       this.set!(target, key, descriptor.value, null)
     }
     return Reflect.defineProperty(target, key, descriptor)

packages/runtime-core/src/scheduler.ts

@@ -47,7 +47,7 @@ const pendingPostFlushCbs: SchedulerJob[] = []
 let activePostFlushCbs: SchedulerJob[] | null = null
 let postFlushIndex = 0
 
-const resolvedPromise: Promise<any> = Promise.resolve()
+const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>
 let currentFlushPromise: Promise<void> | null = null
 
 let currentPreFlushParentJob: SchedulerJob | null = null

packages/runtime-dom/src/index.ts

@@ -31,7 +31,7 @@ declare module '@vue/reactivity' {
   }
 }
 
-const rendererOptions = extend({ patchProp }, nodeOps)
+const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps)
 
 // lazy create the renderer - this makes core renderer logic tree-shakable
 // in case the user only imports reactivity utilities from Vue.

packages/runtime-dom/src/modules/events.ts

@@ -13,31 +13,32 @@ interface Invoker extends EventListener {
 type EventValue = Function | Function[]
 
 // Async edge case fix requires storing an event listener's attach timestamp.
-let _getNow: () => number = Date.now
-
-let skipTimestampCheck = false
-
-if (typeof window !== 'undefined') {
-  // Determine what event timestamp the browser is using. Annoyingly, the
-  // timestamp can either be hi-res (relative to page load) or low-res
-  // (relative to UNIX epoch), so in order to compare time we have to use the
-  // same timestamp type when saving the flush timestamp.
-  if (_getNow() > document.createEvent('Event').timeStamp) {
-    // if the low-res timestamp which is bigger than the event timestamp
-    // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
-    // and we need to use the hi-res version for event listeners as well.
-    _getNow = () => performance.now()
+const [_getNow, skipTimestampCheck] = /*#__PURE__*/ (() => {
+  let _getNow = Date.now
+  let skipTimestampCheck = false
+  if (typeof window !== 'undefined') {
+    // Determine what event timestamp the browser is using. Annoyingly, the
+    // timestamp can either be hi-res (relative to page load) or low-res
+    // (relative to UNIX epoch), so in order to compare time we have to use the
+    // same timestamp type when saving the flush timestamp.
+    if (Date.now() > document.createEvent('Event').timeStamp) {
+      // if the low-res timestamp which is bigger than the event timestamp
+      // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
+      // and we need to use the hi-res version for event listeners as well.
+      _getNow = () => performance.now()
+    }
+    // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
+    // and does not fire microtasks in between event propagation, so safe to exclude.
+    const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i)
+    skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53)
   }
-  // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
-  // and does not fire microtasks in between event propagation, so safe to exclude.
-  const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i)
-  skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53)
-}
+  return [_getNow, skipTimestampCheck]
+})()
 
 // To avoid the overhead of repeatedly calling performance.now(), we cache
 // and use the same timestamp for all event listeners attached in the same tick.
 let cachedNow: number = 0
-const p = Promise.resolve()
+const p = /*#__PURE__*/ Promise.resolve()
 const reset = () => {
   cachedNow = 0
 }

packages/runtime-dom/src/nodeOps.ts

@@ -4,7 +4,7 @@ export const svgNS = 'http://www.w3.org/2000/svg'
 
 const doc = (typeof document !== 'undefined' ? document : null) as Document
 
-const templateContainer = doc && doc.createElement('template')
+const templateContainer = doc && /*#__PURE__*/ doc.createElement('template')
 
 export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
   insert: (child, parent, anchor) => {