@vue/compat 3.5.0-beta.2 → 3.5.0-beta.3

package/dist/vue.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compat v3.5.0-beta.2
+* @vue/compat v3.5.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -1061,14 +1061,14 @@ function iterator(self, method, wrapValue) {
 const arrayProto = Array.prototype;
 function apply(self, method, fn, thisArg, wrappedRetFn, args) {
   const arr = shallowReadArray(self);
-  let methodFn;
-  if ((methodFn = arr[method]) !== arrayProto[method]) {
-    return methodFn.apply(arr, args);
+  const needsWrap = arr !== self && !isShallow(self);
+  const methodFn = arr[method];
+  if (methodFn !== arrayProto[method]) {
+    const result2 = methodFn.apply(arr, args);
+    return needsWrap ? toReactive(result2) : result2;
   }
-  let needsWrap = false;
   let wrappedFn = fn;
   if (arr !== self) {
-    needsWrap = !isShallow(self);
     if (needsWrap) {
       wrappedFn = function(item, index) {
         return fn.call(this, toReactive(item), index, self);
@@ -1862,6 +1862,202 @@ const TriggerOpTypes = {
   "CLEAR": "clear"
 };
 
+const INITIAL_WATCHER_VALUE = {};
+const cleanupMap = /* @__PURE__ */ new WeakMap();
+let activeWatcher = void 0;
+function getCurrentWatcher() {
+  return activeWatcher;
+}
+function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
+  if (owner) {
+    let cleanups = cleanupMap.get(owner);
+    if (!cleanups) cleanupMap.set(owner, cleanups = []);
+    cleanups.push(cleanupFn);
+  }
+}
+function watch$1(source, cb, options = EMPTY_OBJ) {
+  const { immediate, deep, once, scheduler, augmentJob, call } = options;
+  const reactiveGetter = (source2) => {
+    if (deep) return source2;
+    if (isShallow(source2) || deep === false || deep === 0)
+      return traverse(source2, 1);
+    return traverse(source2);
+  };
+  let effect;
+  let getter;
+  let cleanup;
+  let boundCleanup;
+  let forceTrigger = false;
+  let isMultiSource = false;
+  if (isRef(source)) {
+    getter = () => source.value;
+    forceTrigger = isShallow(source);
+  } else if (isReactive(source)) {
+    getter = () => reactiveGetter(source);
+    forceTrigger = true;
+  } else if (isArray(source)) {
+    isMultiSource = true;
+    forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
+    getter = () => source.map((s) => {
+      if (isRef(s)) {
+        return s.value;
+      } else if (isReactive(s)) {
+        return reactiveGetter(s);
+      } else if (isFunction(s)) {
+        return call ? call(s, 2) : s();
+      } else ;
+    });
+  } else if (isFunction(source)) {
+    if (cb) {
+      getter = call ? () => call(source, 2) : source;
+    } else {
+      getter = () => {
+        if (cleanup) {
+          pauseTracking();
+          try {
+            cleanup();
+          } finally {
+            resetTracking();
+          }
+        }
+        const currentEffect = activeWatcher;
+        activeWatcher = effect;
+        try {
+          return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
+        } finally {
+          activeWatcher = currentEffect;
+        }
+      };
+    }
+  } else {
+    getter = NOOP;
+  }
+  if (cb && deep) {
+    const baseGetter = getter;
+    const depth = deep === true ? Infinity : deep;
+    getter = () => traverse(baseGetter(), depth);
+  }
+  if (once) {
+    if (cb) {
+      const _cb = cb;
+      cb = (...args) => {
+        _cb(...args);
+        effect.stop();
+      };
+    } else {
+      const _getter = getter;
+      getter = () => {
+        _getter();
+        effect.stop();
+      };
+    }
+  }
+  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+  const job = (immediateFirstRun) => {
+    if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
+      return;
+    }
+    if (cb) {
+      const newValue = effect.run();
+      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
+        if (cleanup) {
+          cleanup();
+        }
+        const currentWatcher = activeWatcher;
+        activeWatcher = effect;
+        try {
+          const args = [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+            boundCleanup
+          ];
+          call ? call(cb, 3, args) : (
+            // @ts-expect-error
+            cb(...args)
+          );
+          oldValue = newValue;
+        } finally {
+          activeWatcher = currentWatcher;
+        }
+      }
+    } else {
+      effect.run();
+    }
+  };
+  if (augmentJob) {
+    augmentJob(job);
+  }
+  effect = new ReactiveEffect(getter);
+  effect.scheduler = scheduler ? () => scheduler(job, false) : job;
+  boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
+  cleanup = effect.onStop = () => {
+    const cleanups = cleanupMap.get(effect);
+    if (cleanups) {
+      if (call) {
+        call(cleanups, 4);
+      } else {
+        for (const cleanup2 of cleanups) cleanup2();
+      }
+      cleanupMap.delete(effect);
+    }
+  };
+  if (cb) {
+    if (immediate) {
+      job(true);
+    } else {
+      oldValue = effect.run();
+    }
+  } else if (scheduler) {
+    scheduler(job.bind(null, true), true);
+  } else {
+    effect.run();
+  }
+  const scope = getCurrentScope();
+  const watchHandle = () => {
+    effect.stop();
+    if (scope) {
+      remove(scope.effects, effect);
+    }
+  };
+  watchHandle.pause = effect.pause.bind(effect);
+  watchHandle.resume = effect.resume.bind(effect);
+  watchHandle.stop = watchHandle;
+  return watchHandle;
+}
+function traverse(value, depth = Infinity, seen) {
+  if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
+    return value;
+  }
+  seen = seen || /* @__PURE__ */ new Set();
+  if (seen.has(value)) {
+    return value;
+  }
+  seen.add(value);
+  depth--;
+  if (isRef(value)) {
+    traverse(value.value, depth, seen);
+  } else if (isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      traverse(value[i], depth, seen);
+    }
+  } else if (isSet(value) || isMap(value)) {
+    value.forEach((v) => {
+      traverse(v, depth, seen);
+    });
+  } else if (isPlainObject(value)) {
+    for (const key in value) {
+      traverse(value[key], depth, seen);
+    }
+    for (const key of Object.getOwnPropertySymbols(value)) {
+      if (Object.prototype.propertyIsEnumerable.call(value, key)) {
+        traverse(value[key], depth, seen);
+      }
+    }
+  }
+  return value;
+}
+
 function assertNumber(val, type) {
   return;
 }
@@ -1871,12 +2067,6 @@ const ErrorCodes = {
   "0": "SETUP_FUNCTION",
   "RENDER_FUNCTION": 1,
   "1": "RENDER_FUNCTION",
-  "WATCH_GETTER": 2,
-  "2": "WATCH_GETTER",
-  "WATCH_CALLBACK": 3,
-  "3": "WATCH_CALLBACK",
-  "WATCH_CLEANUP": 4,
-  "4": "WATCH_CLEANUP",
   "NATIVE_EVENT_HANDLER": 5,
   "5": "NATIVE_EVENT_HANDLER",
   "COMPONENT_EVENT_HANDLER": 6,
@@ -2013,7 +2203,7 @@ function nextTick(fn) {
   return fn ? p.then(this ? fn.bind(this) : fn) : p;
 }
 function findInsertionIndex(id) {
-  let start = flushIndex + 1;
+  let start = isFlushing ? flushIndex + 1 : 0;
   let end = queue.length;
   while (start < end) {
     const middle = start + end >>> 1;
@@ -2029,15 +2219,13 @@ function findInsertionIndex(id) {
 }
 function queueJob(job) {
   if (!(job.flags & 1)) {
-    if (job.id == null) {
-      queue.push(job);
-    } else if (
-      // fast path when the job id is larger than the tail
-      !(job.flags & 2) && job.id >= (queue[queue.length - 1] && queue[queue.length - 1].id || 0)
-    ) {
+    const jobId = getId(job);
+    const lastJob = queue[queue.length - 1];
+    if (!lastJob || // fast path when the job id is larger than the tail
+    !(job.flags & 2) && jobId >= getId(lastJob)) {
       queue.push(job);
     } else {
-      queue.splice(findInsertionIndex(job.id), 0, job);
+      queue.splice(findInsertionIndex(jobId), 0, job);
     }
     if (!(job.flags & 4)) {
       job.flags |= 1;
@@ -2051,12 +2239,6 @@ function queueFlush() {
     currentFlushPromise = resolvedPromise.then(flushJobs);
   }
 }
-function invalidateJob(job) {
-  const i = queue.indexOf(job);
-  if (i > flushIndex) {
-    queue.splice(i, 1);
-  }
-}
 function queuePostFlushCb(cb) {
   if (!isArray(cb)) {
     if (activePostFlushCbs && cb.id === -1) {
@@ -2106,21 +2288,10 @@ function flushPostFlushCbs(seen) {
     postFlushIndex = 0;
   }
 }
-const getId = (job) => job.id == null ? Infinity : job.id;
-const comparator = (a, b) => {
-  const diff = getId(a) - getId(b);
-  if (diff === 0) {
-    const isAPre = a.flags & 2;
-    const isBPre = b.flags & 2;
-    if (isAPre && !isBPre) return -1;
-    if (isBPre && !isAPre) return 1;
-  }
-  return diff;
-};
+const getId = (job) => job.id == null ? job.flags & 2 ? -1 : Infinity : job.id;
 function flushJobs(seen) {
   isFlushPending = false;
   isFlushing = true;
-  queue.sort(comparator);
   try {
     for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
       const job = queue[flushIndex];
@@ -2263,7 +2434,7 @@ function on(instance, event, fn) {
 function once(instance, event, fn) {
   const wrapped = (...args) => {
     off(instance, event, wrapped);
-    fn.call(instance.proxy, ...args);
+    fn.apply(instance.proxy, args);
   };
   wrapped.fn = fn;
   on(instance, event, wrapped);
@@ -5301,21 +5472,41 @@ function callHook$1(hook, instance, type) {
   );
 }
 function createWatcher(raw, ctx, publicThis, key) {
-  const getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];
+  let getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];
+  const options = {};
+  {
+    const instance = currentInstance && getCurrentScope() === currentInstance.scope ? currentInstance : null;
+    const newValue = getter();
+    if (isArray(newValue) && isCompatEnabled$1("WATCH_ARRAY", instance)) {
+      options.deep = true;
+    }
+    const baseGetter = getter;
+    getter = () => {
+      const val = baseGetter();
+      if (isArray(val) && checkCompatEnabled$1("WATCH_ARRAY", instance)) {
+        traverse(val);
+      }
+      return val;
+    };
+  }
   if (isString(raw)) {
     const handler = ctx[raw];
     if (isFunction(handler)) {
-      watch(getter, handler);
+      {
+        watch(getter, handler, options);
+      }
     }
   } else if (isFunction(raw)) {
-    watch(getter, raw.bind(publicThis));
+    {
+      watch(getter, raw.bind(publicThis), options);
+    }
   } else if (isObject(raw)) {
     if (isArray(raw)) {
       raw.forEach((r) => createWatcher(r, ctx, publicThis, key));
     } else {
       const handler = isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
       if (isFunction(handler)) {
-        watch(getter, handler, raw);
+        watch(getter, handler, extend$1(raw, options) );
       }
     }
   } else ;
@@ -5506,7 +5697,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.5.0-beta.2"}`;
+  Vue.version = `2.6.14-compat:${"3.5.0-beta.3"}`;
   Vue.config = singletonApp.config;
   Vue.use = (plugin, ...options) => {
     if (plugin && isFunction(plugin.install)) {
@@ -5800,7 +5991,7 @@ function defineReactive(obj, key, val) {
     if (isArray(val)) {
       methodsToPatch.forEach((m) => {
         val[m] = (...args) => {
-          Array.prototype[m].call(reactiveVal, ...args);
+          Array.prototype[m].apply(reactiveVal, args);
         };
       });
     } else {
@@ -6698,7 +6889,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     }
     if (parentComponent) {
       let subTree = parentComponent.subTree;
-      if (vnode === subTree) {
+      if (vnode === subTree || isSuspense(subTree.type) && (subTree.ssContent === vnode || subTree.ssFallback === vnode)) {
         const parentVNode = parentComponent.vnode;
         setScopeId(
           el,
@@ -6997,7 +7188,6 @@ function baseCreateRenderer(options, createHydrationFns) {
         return;
       } else {
         instance.next = n2;
-        invalidateJob(instance.update);
         instance.update();
       }
     } else {
@@ -7840,178 +8030,57 @@ function watchSyncEffect(effect, options) {
     { flush: "sync" }
   );
 }
-const INITIAL_WATCHER_VALUE = {};
 function watch(source, cb, options) {
   return doWatch(source, cb, options);
 }
-function doWatch(source, cb, {
-  immediate,
-  deep,
-  flush,
-  once,
-  onTrack,
-  onTrigger
-} = EMPTY_OBJ) {
-  if (cb && once) {
-    const _cb = cb;
-    cb = (...args) => {
-      _cb(...args);
-      watchHandle();
-    };
-  }
-  const instance = currentInstance;
-  const reactiveGetter = (source2) => {
-    if (deep) return source2;
-    if (isShallow(source2) || deep === false || deep === 0)
-      return traverse(source2, 1);
-    return traverse(source2);
-  };
-  let getter;
-  let forceTrigger = false;
-  let isMultiSource = false;
-  if (isRef(source)) {
-    getter = () => source.value;
-    forceTrigger = isShallow(source);
-  } else if (isReactive(source)) {
-    getter = () => reactiveGetter(source);
-    forceTrigger = true;
-  } else if (isArray(source)) {
-    isMultiSource = true;
-    forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
-    getter = () => source.map((s) => {
-      if (isRef(s)) {
-        return s.value;
-      } else if (isReactive(s)) {
-        return reactiveGetter(s);
-      } else if (isFunction(s)) {
-        return callWithErrorHandling(s, instance, 2);
-      } else ;
-    });
-  } else if (isFunction(source)) {
-    if (cb) {
-      getter = () => callWithErrorHandling(source, instance, 2);
-    } else {
-      getter = () => {
-        if (cleanup) {
-          cleanup();
-        }
-        return callWithAsyncErrorHandling(
-          source,
-          instance,
-          3,
-          [onCleanup]
-        );
-      };
-    }
-  } else {
-    getter = NOOP;
-  }
-  if (cb && !deep) {
-    const baseGetter = getter;
-    getter = () => {
-      const val = baseGetter();
-      if (isArray(val) && checkCompatEnabled$1("WATCH_ARRAY", instance)) {
-        traverse(val);
-      }
-      return val;
-    };
-  }
-  if (cb && deep) {
-    const baseGetter = getter;
-    const depth = deep === true ? Infinity : deep;
-    getter = () => traverse(baseGetter(), depth);
-  }
-  let cleanup;
-  let onCleanup = (fn) => {
-    cleanup = effect.onStop = () => {
-      callWithErrorHandling(fn, instance, 4);
-      cleanup = effect.onStop = void 0;
-    };
-  };
+function doWatch(source, cb, options = EMPTY_OBJ) {
+  const { immediate, deep, flush, once } = options;
+  const baseWatchOptions = extend$1({}, options);
   let ssrCleanup;
   if (isInSSRComponentSetup) {
-    onCleanup = NOOP;
-    if (!cb) {
-      getter();
-    } else if (immediate) {
-      callWithAsyncErrorHandling(cb, instance, 3, [
-        getter(),
-        isMultiSource ? [] : void 0,
-        onCleanup
-      ]);
-    }
     if (flush === "sync") {
       const ctx = useSSRContext();
       ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
+    } else if (!cb || immediate) {
+      baseWatchOptions.once = true;
     } else {
-      const watchHandle2 = () => {
+      return {
+        stop: NOOP,
+        resume: NOOP,
+        pause: NOOP
       };
-      watchHandle2.stop = NOOP;
-      watchHandle2.resume = NOOP;
-      watchHandle2.pause = NOOP;
-      return watchHandle2;
     }
   }
-  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
-  const job = (immediateFirstRun) => {
-    if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
-      return;
-    }
-    if (cb) {
-      const newValue = effect.run();
-      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || isArray(newValue) && isCompatEnabled$1("WATCH_ARRAY", instance)) {
-        if (cleanup) {
-          cleanup();
-        }
-        callWithAsyncErrorHandling(cb, instance, 3, [
-          newValue,
-          // pass undefined as the old value when it's changed for the first time
-          oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
-          onCleanup
-        ]);
-        oldValue = newValue;
+  const instance = currentInstance;
+  baseWatchOptions.call = (fn, type, args) => callWithAsyncErrorHandling(fn, instance, type, args);
+  let isPre = false;
+  if (flush === "post") {
+    baseWatchOptions.scheduler = (job) => {
+      queuePostRenderEffect(job, instance && instance.suspense);
+    };
+  } else if (flush !== "sync") {
+    isPre = true;
+    baseWatchOptions.scheduler = (job, isFirstRun) => {
+      if (isFirstRun) {
+        job();
+      } else {
+        queueJob(job);
       }
-    } else {
-      effect.run();
-    }
-  };
-  if (cb) job.flags |= 4;
-  const effect = new ReactiveEffect(getter);
-  let scheduler;
-  if (flush === "sync") {
-    scheduler = job;
-  } else if (flush === "post") {
-    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
-  } else {
-    job.flags |= 2;
-    if (instance) job.id = instance.uid;
-    scheduler = () => queueJob(job);
+    };
   }
-  effect.scheduler = scheduler;
-  const scope = getCurrentScope();
-  const watchHandle = () => {
-    effect.stop();
-    if (scope) {
-      remove(scope.effects, effect);
+  baseWatchOptions.augmentJob = (job) => {
+    if (cb) {
+      job.flags |= 4;
     }
-  };
-  watchHandle.pause = effect.pause.bind(effect);
-  watchHandle.resume = effect.resume.bind(effect);
-  watchHandle.stop = watchHandle;
-  if (cb) {
-    if (immediate) {
-      job(true);
-    } else {
-      oldValue = effect.run();
+    if (isPre) {
+      job.flags |= 2;
+      if (instance) {
+        job.id = instance.uid;
+        job.i = instance;
+      }
     }
-  } else if (flush === "post") {
-    queuePostRenderEffect(
-      effect.run.bind(effect),
-      instance && instance.suspense
-    );
-  } else {
-    effect.run();
-  }
+  };
+  const watchHandle = watch$1(source, cb, baseWatchOptions);
   if (ssrCleanup) ssrCleanup.push(watchHandle);
   return watchHandle;
 }
@@ -8040,38 +8109,6 @@ function createPathGetter(ctx, path) {
     return cur;
   };
 }
-function traverse(value, depth = Infinity, seen) {
-  if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
-    return value;
-  }
-  seen = seen || /* @__PURE__ */ new Set();
-  if (seen.has(value)) {
-    return value;
-  }
-  seen.add(value);
-  depth--;
-  if (isRef(value)) {
-    traverse(value.value, depth, seen);
-  } else if (isArray(value)) {
-    for (let i = 0; i < value.length; i++) {
-      traverse(value[i], depth, seen);
-    }
-  } else if (isSet(value) || isMap(value)) {
-    value.forEach((v) => {
-      traverse(v, depth, seen);
-    });
-  } else if (isPlainObject(value)) {
-    for (const key in value) {
-      traverse(value[key], depth, seen);
-    }
-    for (const key of Object.getOwnPropertySymbols(value)) {
-      if (Object.prototype.propertyIsEnumerable.call(value, key)) {
-        traverse(value[key], depth, seen);
-      }
-    }
-  }
-  return value;
-}
 
 function useModel(props, name, options = EMPTY_OBJ) {
   const i = getCurrentInstance();
@@ -9796,7 +9833,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.0-beta.2";
+const version = "3.5.0-beta.3";
 const warn$1 = NOOP;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools = void 0;
@@ -11598,6 +11635,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   effectScope: effectScope,
   getCurrentInstance: getCurrentInstance,
   getCurrentScope: getCurrentScope,
+  getCurrentWatcher: getCurrentWatcher,
   getTransitionRawChildren: getTransitionRawChildren,
   guardReactiveProps: guardReactiveProps,
   h: h,
@@ -11640,6 +11678,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   onServerPrefetch: onServerPrefetch,
   onUnmounted: onUnmounted,
   onUpdated: onUpdated,
+  onWatcherCleanup: onWatcherCleanup,
   openBlock: openBlock,
   popScopeId: popScopeId,
   provide: provide,
@@ -13153,6 +13192,9 @@ const isStaticProperty = (node) => node && (node.type === "ObjectProperty" || no
 const isStaticPropertyKey = (node, parent) => isStaticProperty(parent) && parent.key === node;
 function isReferenced(node, parent, grandparent) {
   switch (parent.type) {
+    // yes: PARENT[NODE]
+    // yes: NODE.child
+    // no: parent.NODE
     case "MemberExpression":
     case "OptionalMemberExpression":
       if (parent.property === node) {
@@ -13161,12 +13203,23 @@ function isReferenced(node, parent, grandparent) {
       return parent.object === node;
     case "JSXMemberExpression":
       return parent.object === node;
+    // no: let NODE = init;
+    // yes: let id = NODE;
     case "VariableDeclarator":
       return parent.init === node;
+    // yes: () => NODE
+    // no: (NODE) => {}
     case "ArrowFunctionExpression":
       return parent.body === node;
+    // no: class { #NODE; }
+    // no: class { get #NODE() {} }
+    // no: class { #NODE() {} }
+    // no: class { fn() { return this.#NODE; } }
     case "PrivateName":
       return false;
+    // no: class { NODE() {} }
+    // yes: class { [NODE]() {} }
+    // no: class { foo(NODE) {} }
     case "ClassMethod":
     case "ClassPrivateMethod":
     case "ObjectMethod":
@@ -13174,11 +13227,18 @@ function isReferenced(node, parent, grandparent) {
         return !!parent.computed;
       }
       return false;
+    // yes: { [NODE]: "" }
+    // no: { NODE: "" }
+    // depends: { NODE }
+    // depends: { key: NODE }
     case "ObjectProperty":
       if (parent.key === node) {
         return !!parent.computed;
       }
       return !grandparent;
+    // no: class { NODE = value; }
+    // yes: class { [NODE] = value; }
+    // yes: class { key = NODE; }
     case "ClassProperty":
       if (parent.key === node) {
         return !!parent.computed;
@@ -13186,47 +13246,80 @@ function isReferenced(node, parent, grandparent) {
       return true;
     case "ClassPrivateProperty":
       return parent.key !== node;
+    // no: class NODE {}
+    // yes: class Foo extends NODE {}
     case "ClassDeclaration":
     case "ClassExpression":
       return parent.superClass === node;
+    // yes: left = NODE;
+    // no: NODE = right;
     case "AssignmentExpression":
       return parent.right === node;
+    // no: [NODE = foo] = [];
+    // yes: [foo = NODE] = [];
     case "AssignmentPattern":
       return parent.right === node;
+    // no: NODE: for (;;) {}
     case "LabeledStatement":
       return false;
+    // no: try {} catch (NODE) {}
     case "CatchClause":
       return false;
+    // no: function foo(...NODE) {}
     case "RestElement":
       return false;
     case "BreakStatement":
     case "ContinueStatement":
       return false;
+    // no: function NODE() {}
+    // no: function foo(NODE) {}
     case "FunctionDeclaration":
     case "FunctionExpression":
       return false;
+    // no: export NODE from "foo";
+    // no: export * as NODE from "foo";
     case "ExportNamespaceSpecifier":
     case "ExportDefaultSpecifier":
       return false;
+    // no: export { foo as NODE };
+    // yes: export { NODE as foo };
+    // no: export { NODE as foo } from "foo";
     case "ExportSpecifier":
       return parent.local === node;
+    // no: import NODE from "foo";
+    // no: import * as NODE from "foo";
+    // no: import { NODE as foo } from "foo";
+    // no: import { foo as NODE } from "foo";
+    // no: import NODE from "bar";
     case "ImportDefaultSpecifier":
     case "ImportNamespaceSpecifier":
     case "ImportSpecifier":
       return false;
+    // no: import "foo" assert { NODE: "json" }
     case "ImportAttribute":
       return false;
+    // no: <div NODE="foo" />
     case "JSXAttribute":
       return false;
+    // no: [NODE] = [];
+    // no: ({ NODE }) = [];
     case "ObjectPattern":
     case "ArrayPattern":
       return false;
+    // no: new.NODE
+    // no: NODE.target
     case "MetaProperty":
       return false;
+    // yes: type X = { someProperty: NODE }
+    // no: type X = { NODE: OtherType }
     case "ObjectTypeProperty":
       return parent.key !== node;
+    // yes: enum X { Foo = NODE }
+    // no: enum X { NODE }
     case "TSEnumMember":
       return parent.id !== node;
+    // yes: { [NODE]: value }
+    // no: { NODE: value }
     case "TSPropertySignature":
       if (parent.key === node) {
         return !!parent.computed;
@@ -13814,7 +13907,9 @@ const tokenizer = new Tokenizer(stack, {
         case 17:
         case 18:
         case 19:
+        // "
         case 20:
+        // '
         case 21:
           emitError(9, end);
           break;
@@ -14784,6 +14879,7 @@ function traverseNode(node, context) {
         context.helper(TO_DISPLAY_STRING);
       }
       break;
+    // for container types, further traverse downwards
     case 9:
       for (let i2 = 0; i2 < node.branches.length; i2++) {
         traverseNode(node.branches[i2], context);
@@ -15260,6 +15356,7 @@ function genNode(node, context) {
     case 21:
       genNodeList(node.body, context, true, false);
       break;
+    // SSR only types
     case 22:
       genTemplateLiteral(node, context);
       break;
@@ -17633,27 +17730,35 @@ function parseFilter(node, context) {
         case 34:
           inDouble = true;
           break;
+        // "
         case 39:
           inSingle = true;
           break;
+        // '
         case 96:
           inTemplateString = true;
           break;
+        // `
         case 40:
           paren++;
           break;
+        // (
         case 41:
           paren--;
           break;
+        // )
         case 91:
           square++;
           break;
+        // [
         case 93:
           square--;
           break;
+        // ]
         case 123:
           curly++;
           break;
+        // {
         case 125:
           curly--;
           break;