@vue/runtime-core 3.5.0-alpha.5 → 3.5.0-beta.2

package/README.md

@@ -13,7 +13,7 @@ const { render, createApp } = createRenderer({
   patchProp,
   insert,
   remove,
-  createElement
+  createElement,
   // ...
 })
 

package/dist/runtime-core.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-core v3.5.0-alpha.5
+* @vue/runtime-core v3.5.0-beta.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -554,6 +554,9 @@ function reload(id, newComp) {
         "[HMR] Root or manually mounted instance modified. Full reload required."
       );
     }
+    if (instance.root.ce && instance !== instance.root) {
+      instance.root.ce._removeChildStyle(oldComp);
+    }
   }
   queuePostFlushCb(() => {
     hmrDirtyComponents.clear();
@@ -633,9 +636,7 @@ function devtoolsInitApp(app, version) {
 function devtoolsUnmountApp(app) {
   emit$1("app:unmount" /* APP_UNMOUNT */, app);
 }
-const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
-  "component:added" /* COMPONENT_ADDED */
-);
+const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */);
 const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
 const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
   "component:removed" /* COMPONENT_REMOVED */
@@ -659,12 +660,8 @@ function createDevtoolsComponentHook(hook) {
     );
   };
 }
-const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
-  "perf:start" /* PERFORMANCE_START */
-);
-const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
-  "perf:end" /* PERFORMANCE_END */
-);
+const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */);
+const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */);
 function createDevtoolsPerformanceHook(hook) {
   return (component, type, time) => {
     emit$1(hook, component.appContext.app, component.uid, component, type, time);
@@ -1567,6 +1564,7 @@ const logMismatchError = () => {
 const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
 const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
 const getContainerType = (container) => {
+  if (container.nodeType !== 1) return void 0;
   if (isSVGContainer(container)) return "svg";
   if (isMathMLContainer(container)) return "mathml";
   return void 0;
@@ -1842,6 +1840,7 @@ Server rendered element contains more child nodes than client vdom.`
       }
       if (props) {
         {
+          const isCustomElement = el.tagName.includes("-");
           for (const key in props) {
             if (// #11189 skip if this node has directives that have created hooks
             // as it could have mutated the DOM in any possible way
@@ -1849,7 +1848,7 @@ Server rendered element contains more child nodes than client vdom.`
               logMismatchError();
             }
             if (forcePatch && (key.endsWith("value") || key === "indeterminate") || shared.isOn(key) && !shared.isReservedProp(key) || // force hydrate v-bind with .prop modifiers
-            key[0] === ".") {
+            key[0] === "." || isCustomElement) {
               patchProp(el, key, null, props[key], void 0, parentComponent);
             }
           }
@@ -2174,24 +2173,19 @@ function isMismatchAllowed(el, allowedType) {
   }
 }
 
-const hydrateOnIdle = () => (hydrate) => {
-  const id = requestIdleCallback(hydrate);
+const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
+  const id = requestIdleCallback(hydrate, { timeout });
   return () => cancelIdleCallback(id);
 };
-const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
-  const ob = new IntersectionObserver(
-    (entries) => {
-      for (const e of entries) {
-        if (!e.isIntersecting) continue;
-        ob.disconnect();
-        hydrate();
-        break;
-      }
-    },
-    {
-      rootMargin: shared.isString(margin) ? margin : margin + "px"
+const hydrateOnVisible = (opts) => (hydrate, forEach) => {
+  const ob = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      ob.disconnect();
+      hydrate();
+      break;
     }
-  );
+  }, opts);
   forEach((el) => ob.observe(el));
   return () => ob.disconnect();
 };
@@ -2499,14 +2493,14 @@ const KeepAliveImpl = {
     function pruneCache(filter) {
       cache.forEach((vnode, key) => {
         const name = getComponentName(vnode.type);
-        if (name && (!filter || !filter(name))) {
+        if (name && !filter(name)) {
           pruneCacheEntry(key);
         }
       });
     }
     function pruneCacheEntry(key) {
       const cached = cache.get(key);
-      if (!current || !isSameVNodeType(cached, current)) {
+      if (cached && (!current || !isSameVNodeType(cached, current))) {
         unmount(cached);
       } else if (current) {
         resetShapeFlag(current);
@@ -2568,6 +2562,10 @@ const KeepAliveImpl = {
         return rawVNode;
       }
       let vnode = getInnerChild(rawVNode);
+      if (vnode.type === Comment) {
+        current = null;
+        return vnode;
+      }
       const comp = vnode.type;
       const name = getComponentName(
         isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -2614,6 +2612,7 @@ function matches(pattern, name) {
   } else if (shared.isString(pattern)) {
     return pattern.split(",").includes(name);
   } else if (shared.isRegExp(pattern)) {
+    pattern.lastIndex = 0;
     return pattern.test(name);
   }
   return false;
@@ -2697,17 +2696,19 @@ const createHook = (lifecycle) => (hook, target = currentInstance) => {
 };
 const onBeforeMount = createHook("bm");
 const onMounted = createHook("m");
-const onBeforeUpdate = createHook("bu");
+const onBeforeUpdate = createHook(
+  "bu"
+);
 const onUpdated = createHook("u");
-const onBeforeUnmount = createHook("bum");
-const onUnmounted = createHook("um");
-const onServerPrefetch = createHook("sp");
-const onRenderTriggered = createHook(
-  "rtg"
+const onBeforeUnmount = createHook(
+  "bum"
 );
-const onRenderTracked = createHook(
-  "rtc"
+const onUnmounted = createHook("um");
+const onServerPrefetch = createHook(
+  "sp"
 );
+const onRenderTriggered = createHook("rtg");
+const onRenderTracked = createHook("rtc");
 function onErrorCaptured(hook, target = currentInstance) {
   injectHook("ec", hook, target);
 }
@@ -2834,9 +2835,14 @@ function createSlots(slots, dynamicSlots) {
 }
 
 function renderSlot(slots, name, props = {}, fallback, noSlotted) {
-  if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
+  if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
     if (name !== "default") props.name = name;
-    return createVNode("slot", props, fallback && fallback());
+    return openBlock(), createBlock(
+      Fragment,
+      null,
+      [createVNode("slot", props, fallback && fallback())],
+      64
+    );
   }
   let slot = slots[name];
   if (slot && slot.length > 1) {
@@ -2909,6 +2915,7 @@ const publicPropertiesMap = (
     $refs: (i) => reactivity.shallowReadonly(i.refs) ,
     $parent: (i) => getPublicInstance(i.parent),
     $root: (i) => getPublicInstance(i.root),
+    $host: (i) => i.ce,
     $emit: (i) => i.emit,
     $options: (i) => resolveMergedOptions(i) ,
     $forceUpdate: (i) => i.f || (i.f = () => {
@@ -3060,29 +3067,25 @@ const PublicInstanceProxyHandlers = {
     return Reflect.ownKeys(target);
   };
 }
-const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ shared.extend(
-  {},
-  PublicInstanceProxyHandlers,
-  {
-    get(target, key) {
-      if (key === Symbol.unscopables) {
-        return;
-      }
-      return PublicInstanceProxyHandlers.get(target, key, target);
-    },
-    has(_, key) {
-      const has = key[0] !== "_" && !shared.isGloballyAllowed(key);
-      if (!has && PublicInstanceProxyHandlers.has(_, key)) {
-        warn$1(
-          `Property ${JSON.stringify(
-            key
-          )} should not start with _ which is a reserved prefix for Vue internals.`
-        );
-      }
-      return has;
+const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ shared.extend({}, PublicInstanceProxyHandlers, {
+  get(target, key) {
+    if (key === Symbol.unscopables) {
+      return;
     }
+    return PublicInstanceProxyHandlers.get(target, key, target);
+  },
+  has(_, key) {
+    const has = key[0] !== "_" && !shared.isGloballyAllowed(key);
+    if (!has && PublicInstanceProxyHandlers.has(_, key)) {
+      warn$1(
+        `Property ${JSON.stringify(
+          key
+        )} should not start with _ which is a reserved prefix for Vue internals.`
+      );
+    }
+    return has;
   }
-);
+});
 function createDevRenderContext(instance) {
   const target = {};
   Object.defineProperty(target, `_`, {
@@ -3784,7 +3787,7 @@ function createAppAPI(render, hydrate) {
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
             );
           }
-          const vnode = createVNode(rootComponent, rootProps);
+          const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
           vnode.appContext = context;
           if (namespace === true) {
             namespace = "svg";
@@ -3886,7 +3889,7 @@ function provide(key, value) {
 function inject(key, defaultValue, treatDefaultAsFactory = false) {
   const instance = currentInstance || currentRenderingInstance;
   if (instance || currentApp) {
-    const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
+    const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
     if (provides && key in provides) {
       return provides[key];
     } else if (arguments.length > 1) {
@@ -4091,6 +4094,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
       } else {
         value = defaultValue;
       }
+      if (instance.ce) {
+        instance.ce._setProp(key, value);
+      }
     }
     if (opt[0 /* shouldCast */]) {
       if (isAbsent && !hasDefault) {
@@ -5089,8 +5095,8 @@ function baseCreateRenderer(options, createHydrationFns) {
     const componentUpdateFn = () => {
       if (!instance.isMounted) {
         let vnodeHook;
-        const { el, props, type } = initialVNode;
-        const { bm, m, parent } = instance;
+        const { el, props } = initialVNode;
+        const { bm, m, parent, root, type } = instance;
         const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
         toggleRecurse(instance, false);
         if (bm) {
@@ -5133,6 +5139,9 @@ function baseCreateRenderer(options, createHydrationFns) {
             hydrateSubTree();
           }
         } else {
+          if (root.ce) {
+            root.ce._injectChildStyle(type);
+          }
           {
             startMeasure(instance, `render`);
           }
@@ -5806,13 +5815,13 @@ function baseCreateRenderer(options, createHydrationFns) {
         namespace
       );
     }
+    container._vnode = vnode;
     if (!isFlushing) {
       isFlushing = true;
       flushPreFlushCbs();
       flushPostFlushCbs();
       isFlushing = false;
     }
-    container._vnode = vnode;
   };
   const internals = {
     p: patch,
@@ -5986,14 +5995,9 @@ function doWatch(source, cb, {
     const _cb = cb;
     cb = (...args) => {
       _cb(...args);
-      unwatch();
+      watchHandle();
     };
   }
-  if (deep !== void 0 && typeof deep === "number") {
-    warn$1(
-      `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
-    );
-  }
   if (!cb) {
     if (immediate !== void 0) {
       warn$1(
@@ -6019,10 +6023,12 @@ function doWatch(source, cb, {
     );
   };
   const instance = currentInstance;
-  const reactiveGetter = (source2) => deep === true ? source2 : (
-    // for deep: false, only traverse root-level properties
-    traverse(source2, deep === false ? 1 : void 0)
-  );
+  const reactiveGetter = (source2) => {
+    if (deep) return source2;
+    if (reactivity.isShallow(source2) || deep === false || deep === 0)
+      return traverse(source2, 1);
+    return traverse(source2);
+  };
   let getter;
   let forceTrigger = false;
   let isMultiSource = false;
@@ -6068,7 +6074,8 @@ function doWatch(source, cb, {
   }
   if (cb && deep) {
     const baseGetter = getter;
-    getter = () => traverse(baseGetter());
+    const depth = deep === true ? Infinity : deep;
+    getter = () => traverse(baseGetter(), depth);
   }
   let cleanup;
   let onCleanup = (fn) => {
@@ -6093,7 +6100,12 @@ function doWatch(source, cb, {
       const ctx = useSSRContext();
       ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
     } else {
-      return shared.NOOP;
+      const watchHandle2 = () => {
+      };
+      watchHandle2.stop = shared.NOOP;
+      watchHandle2.resume = shared.NOOP;
+      watchHandle2.pause = shared.NOOP;
+      return watchHandle2;
     }
   }
   let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -6123,7 +6135,6 @@ function doWatch(source, cb, {
   const effect = new reactivity.ReactiveEffect(getter);
   let scheduler;
   if (flush === "sync") {
-    effect.flags |= 64;
     scheduler = job;
   } else if (flush === "post") {
     scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
@@ -6134,12 +6145,15 @@ function doWatch(source, cb, {
   }
   effect.scheduler = scheduler;
   const scope = reactivity.getCurrentScope();
-  const unwatch = () => {
+  const watchHandle = () => {
     effect.stop();
     if (scope) {
       shared.remove(scope.effects, effect);
     }
   };
+  watchHandle.pause = effect.pause.bind(effect);
+  watchHandle.resume = effect.resume.bind(effect);
+  watchHandle.stop = watchHandle;
   {
     effect.onTrack = onTrack;
     effect.onTrigger = onTrigger;
@@ -6158,8 +6172,8 @@ function doWatch(source, cb, {
   } else {
     effect.run();
   }
-  if (ssrCleanup) ssrCleanup.push(unwatch);
-  return unwatch;
+  if (ssrCleanup) ssrCleanup.push(watchHandle);
+  return watchHandle;
 }
 function instanceWatch(source, value, options) {
   const publicThis = this.proxy;
@@ -6249,7 +6263,8 @@ function useModel(props, name, options = shared.EMPTY_OBJ) {
         return options.get ? options.get(localValue) : localValue;
       },
       set(value) {
-        if (!shared.hasChanged(value, localValue) && !(prevSetValue !== shared.EMPTY_OBJ && shared.hasChanged(value, prevSetValue))) {
+        const emittedValue = options.set ? options.set(value) : value;
+        if (!shared.hasChanged(emittedValue, localValue) && !(prevSetValue !== shared.EMPTY_OBJ && shared.hasChanged(value, prevSetValue))) {
           return;
         }
         const rawProps = i.vnode.props;
@@ -6258,7 +6273,6 @@ function useModel(props, name, options = shared.EMPTY_OBJ) {
           localValue = value;
           trigger();
         }
-        const emittedValue = options.set ? options.set(value) : value;
         i.emit(`update:${name}`, emittedValue);
         if (shared.hasChanged(value, emittedValue) && shared.hasChanged(value, prevSetValue) && !shared.hasChanged(emittedValue, prevEmittedValue)) {
           trigger();
@@ -6296,9 +6310,9 @@ function emit(instance, event, ...rawArgs) {
     } = instance;
     if (emitsOptions) {
       if (!(event in emitsOptions) && true) {
-        if (!propsOptions || !(shared.toHandlerKey(event) in propsOptions)) {
+        if (!propsOptions || !(shared.toHandlerKey(shared.camelize(event)) in propsOptions)) {
           warn$1(
-            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${shared.toHandlerKey(event)}" prop.`
+            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${shared.toHandlerKey(shared.camelize(event))}" prop.`
           );
         }
       } else {
@@ -8122,11 +8136,16 @@ function useTemplateRef(key) {
   const r = reactivity.shallowRef(null);
   if (i) {
     const refs = i.refs === shared.EMPTY_OBJ ? i.refs = {} : i.refs;
-    Object.defineProperty(refs, key, {
-      enumerable: true,
-      get: () => r.value,
-      set: (val) => r.value = val
-    });
+    let desc;
+    if ((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
+      warn$1(`useTemplateRef('${key}') already exists.`);
+    } else {
+      Object.defineProperty(refs, key, {
+        enumerable: true,
+        get: () => r.value,
+        set: (val) => r.value = val
+      });
+    }
   } else {
     warn$1(
       `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -8360,7 +8379,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.0-alpha.5";
+const version = "3.5.0-beta.2";
 const warn = warn$1 ;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools = devtools$1 ;
@@ -8372,7 +8391,8 @@ const _ssrUtils = {
   setCurrentRenderingInstance,
   isVNode: isVNode,
   normalizeVNode,
-  getComponentPublicInstance
+  getComponentPublicInstance,
+  ensureValidVNode
 };
 const ssrUtils = _ssrUtils ;
 const resolveFilter = null;