@vue/runtime-dom 3.2.44 → 3.2.46

package/dist/runtime-dom.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var runtimeCore = require('@vue/runtime-core');
 var shared = require('@vue/shared');
 
@@ -107,9 +105,6 @@ function patchStyle(el, prev, next) {
     const style = el.style;
     const isCssString = shared.isString(next);
     if (next && !isCssString) {
-        for (const key in next) {
-            setStyle(style, key, next[key]);
-        }
         if (prev && !shared.isString(prev)) {
             for (const key in prev) {
                 if (next[key] == null) {
@@ -117,6 +112,9 @@ function patchStyle(el, prev, next) {
                 }
             }
         }
+        for (const key in next) {
+            setStyle(style, key, next[key]);
+        }
     }
     else {
         const currentDisplay = style.display;
@@ -479,12 +477,21 @@ class VueElement extends BaseClass {
                     `defined as hydratable. Use \`defineSSRCustomElement\`.`);
             }
             this.attachShadow({ mode: 'open' });
+            if (!this._def.__asyncLoader) {
+                // for sync component defs we can immediately resolve props
+                this._resolveProps(this._def);
+            }
         }
     }
     connectedCallback() {
         this._connected = true;
         if (!this._instance) {
-            this._resolveDef();
+            if (this._resolved) {
+                this._update();
+            }
+            else {
+                this._resolveDef();
+            }
         }
     }
     disconnectedCallback() {
@@ -500,9 +507,6 @@ class VueElement extends BaseClass {
      * resolve inner component definition (handle possible async component)
      */
     _resolveDef() {
-        if (this._resolved) {
-            return;
-        }
         this._resolved = true;
         // set initial attrs
         for (let i = 0; i < this.attributes.length; i++) {
@@ -514,38 +518,26 @@ class VueElement extends BaseClass {
                 this._setAttr(m.attributeName);
             }
         }).observe(this, { attributes: true });
-        const resolve = (def) => {
-            const { props = {}, styles } = def;
-            const hasOptions = !shared.isArray(props);
-            const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
+        const resolve = (def, isAsync = false) => {
+            const { props, styles } = def;
             // cast Number-type props set before resolve
             let numberProps;
-            if (hasOptions) {
-                for (const key in this._props) {
+            if (props && !shared.isArray(props)) {
+                for (const key in props) {
                     const opt = props[key];
                     if (opt === Number || (opt && opt.type === Number)) {
-                        this._props[key] = shared.toNumber(this._props[key]);
-                        (numberProps || (numberProps = Object.create(null)))[key] = true;
+                        if (key in this._props) {
+                            this._props[key] = shared.toNumber(this._props[key]);
+                        }
+                        (numberProps || (numberProps = Object.create(null)))[shared.camelize(key)] = true;
                     }
                 }
             }
             this._numberProps = numberProps;
-            // check if there are props set pre-upgrade or connect
-            for (const key of Object.keys(this)) {
-                if (key[0] !== '_') {
-                    this._setProp(key, this[key], true, false);
-                }
-            }
-            // defining getter/setters on prototype
-            for (const key of rawKeys.map(shared.camelize)) {
-                Object.defineProperty(this, key, {
-                    get() {
-                        return this._getProp(key);
-                    },
-                    set(val) {
-                        this._setProp(key, val);
-                    }
-                });
+            if (isAsync) {
+                // defining getter/setters on prototype
+                // for sync defs, this already happened in the constructor
+                this._resolveProps(def);
             }
             // apply CSS
             this._applyStyles(styles);
@@ -554,12 +546,33 @@ class VueElement extends BaseClass {
         };
         const asyncDef = this._def.__asyncLoader;
         if (asyncDef) {
-            asyncDef().then(resolve);
+            asyncDef().then(def => resolve(def, true));
         }
         else {
             resolve(this._def);
         }
     }
+    _resolveProps(def) {
+        const { props } = def;
+        const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
+        // check if there are props set pre-upgrade or connect
+        for (const key of Object.keys(this)) {
+            if (key[0] !== '_' && declaredPropKeys.includes(key)) {
+                this._setProp(key, this[key], true, false);
+            }
+        }
+        // defining getter/setters on prototype
+        for (const key of declaredPropKeys.map(shared.camelize)) {
+            Object.defineProperty(this, key, {
+                get() {
+                    return this._getProp(key);
+                },
+                set(val) {
+                    this._setProp(key, val);
+                }
+            });
+        }
+    }
     _setAttr(key) {
         let value = this.getAttribute(key);
         const camelKey = shared.camelize(key);
@@ -615,27 +628,31 @@ class VueElement extends BaseClass {
                             this._styles.length = 0;
                         }
                         this._applyStyles(newStyles);
-                        // if this is an async component, ceReload is called from the inner
-                        // component so no need to reload the async wrapper
-                        if (!this._def.__asyncLoader) {
-                            // reload
-                            this._instance = null;
-                            this._update();
-                        }
+                        this._instance = null;
+                        this._update();
                     };
                 }
-                // intercept emit
-                instance.emit = (event, ...args) => {
+                const dispatch = (event, args) => {
                     this.dispatchEvent(new CustomEvent(event, {
                         detail: args
                     }));
                 };
+                // intercept emit
+                instance.emit = (event, ...args) => {
+                    // dispatch both the raw and hyphenated versions of an event
+                    // to match Vue behavior
+                    dispatch(event, args);
+                    if (shared.hyphenate(event) !== event) {
+                        dispatch(shared.hyphenate(event), args);
+                    }
+                };
                 // locate nearest Vue custom element parent for provide/inject
                 let parent = this;
                 while ((parent =
                     parent && (parent.parentNode || parent.host))) {
                     if (parent instanceof VueElement) {
                         instance.parent = parent._instance;
+                        instance.provides = parent._instance.provides;
                         break;
                     }
                 }
@@ -839,18 +856,10 @@ function normalizeDuration(duration) {
 }
 function NumberOf(val) {
     const res = shared.toNumber(val);
-    validateDuration(res);
-    return res;
-}
-function validateDuration(val) {
-    if (typeof val !== 'number') {
-        runtimeCore.warn(`<transition> explicit duration is not a valid number - ` +
-            `got ${JSON.stringify(val)}.`);
-    }
-    else if (isNaN(val)) {
-        runtimeCore.warn(`<transition> explicit duration is NaN - ` +
-            'the duration expression might be incorrect.');
+    {
+        runtimeCore.assertNumber(res, '<transition> explicit duration');
     }
+    return res;
 }
 function addTransitionClass(el, cls) {
     cls.split(/\s+/).forEach(c => c && el.classList.add(c));
@@ -1047,6 +1056,14 @@ const TransitionGroupImpl = {
         };
     }
 };
+/**
+ * TransitionGroup does not support "mode" so we need to remove it from the
+ * props declarations, but direct delete operation is considered a side effect
+ * and will make the entire transition feature non-tree-shakeable, so we do it
+ * in a function and mark the function's invocation as pure.
+ */
+const removeMode = (props) => delete props.mode;
+/*#__PURE__*/ removeMode(TransitionGroupImpl.props);
 const TransitionGroup = TransitionGroupImpl;
 function callPendingCbs(c) {
     const el = c.el;
@@ -1122,7 +1139,7 @@ const vModelText = {
                 domValue = domValue.trim();
             }
             if (castToNumber) {
-                domValue = shared.toNumber(domValue);
+                domValue = shared.looseToNumber(domValue);
             }
             el._assign(domValue);
         });
@@ -1157,7 +1174,8 @@ const vModelText = {
             if (trim && el.value.trim() === value) {
                 return;
             }
-            if ((number || el.type === 'number') && shared.toNumber(el.value) === value) {
+            if ((number || el.type === 'number') &&
+                shared.looseToNumber(el.value) === value) {
                 return;
             }
         }
@@ -1246,7 +1264,7 @@ const vModelSelect = {
         addEventListener(el, 'change', () => {
             const selectedVal = Array.prototype.filter
                 .call(el.options, (o) => o.selected)
-                .map((o) => number ? shared.toNumber(getValue(o)) : getValue(o));
+                .map((o) => number ? shared.looseToNumber(getValue(o)) : getValue(o));
             el._assign(el.multiple
                 ? isSetModel
                     ? new Set(selectedVal)
@@ -1619,9 +1637,6 @@ const initDirectivesForSSR = () => {
     }
     ;
 
-Object.keys(runtimeCore).forEach(function (k) {
-  if (k !== 'default') exports[k] = runtimeCore[k];
-});
 exports.Transition = Transition;
 exports.TransitionGroup = TransitionGroup;
 exports.VueElement = VueElement;
@@ -1642,3 +1657,6 @@ exports.vModelText = vModelText;
 exports.vShow = vShow;
 exports.withKeys = withKeys;
 exports.withModifiers = withModifiers;
+Object.keys(runtimeCore).forEach(function(k) {
+  if (k !== 'default') exports[k] = runtimeCore[k];
+});

package/dist/runtime-dom.cjs.prod.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var runtimeCore = require('@vue/runtime-core');
 var shared = require('@vue/shared');
 
@@ -107,9 +105,6 @@ function patchStyle(el, prev, next) {
     const style = el.style;
     const isCssString = shared.isString(next);
     if (next && !isCssString) {
-        for (const key in next) {
-            setStyle(style, key, next[key]);
-        }
         if (prev && !shared.isString(prev)) {
             for (const key in prev) {
                 if (next[key] == null) {
@@ -117,6 +112,9 @@ function patchStyle(el, prev, next) {
                 }
             }
         }
+        for (const key in next) {
+            setStyle(style, key, next[key]);
+        }
     }
     else {
         const currentDisplay = style.display;
@@ -464,12 +462,21 @@ class VueElement extends BaseClass {
         }
         else {
             this.attachShadow({ mode: 'open' });
+            if (!this._def.__asyncLoader) {
+                // for sync component defs we can immediately resolve props
+                this._resolveProps(this._def);
+            }
         }
     }
     connectedCallback() {
         this._connected = true;
         if (!this._instance) {
-            this._resolveDef();
+            if (this._resolved) {
+                this._update();
+            }
+            else {
+                this._resolveDef();
+            }
         }
     }
     disconnectedCallback() {
@@ -485,9 +492,6 @@ class VueElement extends BaseClass {
      * resolve inner component definition (handle possible async component)
      */
     _resolveDef() {
-        if (this._resolved) {
-            return;
-        }
         this._resolved = true;
         // set initial attrs
         for (let i = 0; i < this.attributes.length; i++) {
@@ -499,38 +503,26 @@ class VueElement extends BaseClass {
                 this._setAttr(m.attributeName);
             }
         }).observe(this, { attributes: true });
-        const resolve = (def) => {
-            const { props = {}, styles } = def;
-            const hasOptions = !shared.isArray(props);
-            const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
+        const resolve = (def, isAsync = false) => {
+            const { props, styles } = def;
             // cast Number-type props set before resolve
             let numberProps;
-            if (hasOptions) {
-                for (const key in this._props) {
+            if (props && !shared.isArray(props)) {
+                for (const key in props) {
                     const opt = props[key];
                     if (opt === Number || (opt && opt.type === Number)) {
-                        this._props[key] = shared.toNumber(this._props[key]);
-                        (numberProps || (numberProps = Object.create(null)))[key] = true;
+                        if (key in this._props) {
+                            this._props[key] = shared.toNumber(this._props[key]);
+                        }
+                        (numberProps || (numberProps = Object.create(null)))[shared.camelize(key)] = true;
                     }
                 }
             }
             this._numberProps = numberProps;
-            // check if there are props set pre-upgrade or connect
-            for (const key of Object.keys(this)) {
-                if (key[0] !== '_') {
-                    this._setProp(key, this[key], true, false);
-                }
-            }
-            // defining getter/setters on prototype
-            for (const key of rawKeys.map(shared.camelize)) {
-                Object.defineProperty(this, key, {
-                    get() {
-                        return this._getProp(key);
-                    },
-                    set(val) {
-                        this._setProp(key, val);
-                    }
-                });
+            if (isAsync) {
+                // defining getter/setters on prototype
+                // for sync defs, this already happened in the constructor
+                this._resolveProps(def);
             }
             // apply CSS
             this._applyStyles(styles);
@@ -539,12 +531,33 @@ class VueElement extends BaseClass {
         };
         const asyncDef = this._def.__asyncLoader;
         if (asyncDef) {
-            asyncDef().then(resolve);
+            asyncDef().then(def => resolve(def, true));
         }
         else {
             resolve(this._def);
         }
     }
+    _resolveProps(def) {
+        const { props } = def;
+        const declaredPropKeys = shared.isArray(props) ? props : Object.keys(props || {});
+        // check if there are props set pre-upgrade or connect
+        for (const key of Object.keys(this)) {
+            if (key[0] !== '_' && declaredPropKeys.includes(key)) {
+                this._setProp(key, this[key], true, false);
+            }
+        }
+        // defining getter/setters on prototype
+        for (const key of declaredPropKeys.map(shared.camelize)) {
+            Object.defineProperty(this, key, {
+                get() {
+                    return this._getProp(key);
+                },
+                set(val) {
+                    this._setProp(key, val);
+                }
+            });
+        }
+    }
     _setAttr(key) {
         let value = this.getAttribute(key);
         const camelKey = shared.camelize(key);
@@ -591,18 +604,27 @@ class VueElement extends BaseClass {
             vnode.ce = instance => {
                 this._instance = instance;
                 instance.isCE = true;
-                // intercept emit
-                instance.emit = (event, ...args) => {
+                const dispatch = (event, args) => {
                     this.dispatchEvent(new CustomEvent(event, {
                         detail: args
                     }));
                 };
+                // intercept emit
+                instance.emit = (event, ...args) => {
+                    // dispatch both the raw and hyphenated versions of an event
+                    // to match Vue behavior
+                    dispatch(event, args);
+                    if (shared.hyphenate(event) !== event) {
+                        dispatch(shared.hyphenate(event), args);
+                    }
+                };
                 // locate nearest Vue custom element parent for provide/inject
                 let parent = this;
                 while ((parent =
                     parent && (parent.parentNode || parent.host))) {
                     if (parent instanceof VueElement) {
                         instance.parent = parent._instance;
+                        instance.provides = parent._instance.provides;
                         break;
                     }
                 }
@@ -993,6 +1015,14 @@ const TransitionGroupImpl = {
         };
     }
 };
+/**
+ * TransitionGroup does not support "mode" so we need to remove it from the
+ * props declarations, but direct delete operation is considered a side effect
+ * and will make the entire transition feature non-tree-shakeable, so we do it
+ * in a function and mark the function's invocation as pure.
+ */
+const removeMode = (props) => delete props.mode;
+/*#__PURE__*/ removeMode(TransitionGroupImpl.props);
 const TransitionGroup = TransitionGroupImpl;
 function callPendingCbs(c) {
     const el = c.el;
@@ -1068,7 +1098,7 @@ const vModelText = {
                 domValue = domValue.trim();
             }
             if (castToNumber) {
-                domValue = shared.toNumber(domValue);
+                domValue = shared.looseToNumber(domValue);
             }
             el._assign(domValue);
         });
@@ -1103,7 +1133,8 @@ const vModelText = {
             if (trim && el.value.trim() === value) {
                 return;
             }
-            if ((number || el.type === 'number') && shared.toNumber(el.value) === value) {
+            if ((number || el.type === 'number') &&
+                shared.looseToNumber(el.value) === value) {
                 return;
             }
         }
@@ -1192,7 +1223,7 @@ const vModelSelect = {
         addEventListener(el, 'change', () => {
             const selectedVal = Array.prototype.filter
                 .call(el.options, (o) => o.selected)
-                .map((o) => number ? shared.toNumber(getValue(o)) : getValue(o));
+                .map((o) => number ? shared.looseToNumber(getValue(o)) : getValue(o));
             el._assign(el.multiple
                 ? isSetModel
                     ? new Set(selectedVal)
@@ -1507,9 +1538,6 @@ const initDirectivesForSSR = () => {
     }
     ;
 
-Object.keys(runtimeCore).forEach(function (k) {
-  if (k !== 'default') exports[k] = runtimeCore[k];
-});
 exports.Transition = Transition;
 exports.TransitionGroup = TransitionGroup;
 exports.VueElement = VueElement;
@@ -1530,3 +1558,6 @@ exports.vModelText = vModelText;
 exports.vShow = vShow;
 exports.withKeys = withKeys;
 exports.withModifiers = withModifiers;
+Object.keys(runtimeCore).forEach(function(k) {
+  if (k !== 'default') exports[k] = runtimeCore[k];
+});

package/dist/runtime-dom.d.ts

@@ -142,6 +142,7 @@ export declare class VueElement extends BaseClass {
      * resolve inner component definition (handle possible async component)
      */
     private _resolveDef;
+    private _resolveProps;
     protected _setAttr(key: string): void;
     /* Excluded from this release type: _getProp */
     /* Excluded from this release type: _setProp */
@@ -480,6 +481,17 @@ export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
   is?: string
 }
 
+type HTMLAttributeReferrerPolicy =
+  | ''
+  | 'no-referrer'
+  | 'no-referrer-when-downgrade'
+  | 'origin'
+  | 'origin-when-cross-origin'
+  | 'same-origin'
+  | 'strict-origin'
+  | 'strict-origin-when-cross-origin'
+  | 'unsafe-url'
+
 export interface AnchorHTMLAttributes extends HTMLAttributes {
   download?: any
   href?: string
@@ -489,7 +501,7 @@ export interface AnchorHTMLAttributes extends HTMLAttributes {
   rel?: string
   target?: string
   type?: string
-  referrerpolicy?: string
+  referrerpolicy?: HTMLAttributeReferrerPolicy
 }
 
 export interface AreaHTMLAttributes extends HTMLAttributes {
@@ -499,6 +511,7 @@ export interface AreaHTMLAttributes extends HTMLAttributes {
   href?: string
   hreflang?: string
   media?: string
+  referrerpolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   shape?: string
   target?: string
@@ -597,7 +610,7 @@ export interface IframeHTMLAttributes extends HTMLAttributes {
   marginheight?: Numberish
   marginwidth?: Numberish
   name?: string
-  referrerpolicy?: string
+  referrerpolicy?: HTMLAttributeReferrerPolicy
   sandbox?: string
   scrolling?: string
   seamless?: Booleanish
@@ -611,6 +624,7 @@ export interface ImgHTMLAttributes extends HTMLAttributes {
   crossorigin?: 'anonymous' | 'use-credentials' | ''
   decoding?: 'async' | 'auto' | 'sync'
   height?: Numberish
+  referrerpolicy?: HTMLAttributeReferrerPolicy
   sizes?: string
   src?: string
   srcset?: string
@@ -685,6 +699,7 @@ export interface LinkHTMLAttributes extends HTMLAttributes {
   hreflang?: string
   integrity?: string
   media?: string
+  referrerpolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   sizes?: string
   type?: string
@@ -785,6 +800,7 @@ export interface ScriptHTMLAttributes extends HTMLAttributes {
   defer?: Booleanish
   integrity?: string
   nomodule?: Booleanish
+  referrerpolicy?: HTMLAttributeReferrerPolicy
   nonce?: string
   src?: string
   type?: string
@@ -1472,7 +1488,9 @@ export interface Events {
 }
 
 type EventHandlers<E> = {
-  [K in keyof E]?: E[K] extends (...args: any) => any ? E[K] : (payload: E[K]) => void
+  [K in keyof E]?: E[K] extends (...args: any) => any
+    ? E[K]
+    : (payload: E[K]) => void
 }
 
 // use namespace import to avoid collision with generated types which use