@vue/runtime-dom - npm Package Compare versions

Comparing version 3.0.4 to 3.0.5

dist/runtime-dom.cjs.js

@@ -498,9 +498,9 @@ 'use strict';
             onBeforeEnter && onBeforeEnter(el);
+            addTransitionClass(el, enterFromClass);
             addTransitionClass(el, enterActiveClass);
-            addTransitionClass(el, enterFromClass);
         },
         onBeforeAppear(el) {
             onBeforeAppear && onBeforeAppear(el);
+            addTransitionClass(el, appearFromClass);
             addTransitionClass(el, appearActiveClass);
-            addTransitionClass(el, appearFromClass);
         },
@@ -511,13 +511,7 @@ onEnter: makeEnterHook(false),
             const resolve = () => finishLeave(el, done);
+            addTransitionClass(el, leaveFromClass);
+            // force reflow so *-leave-from classes immediately take effect (#2593)
+            forceReflow();
             addTransitionClass(el, leaveActiveClass);
-            addTransitionClass(el, leaveFromClass);
-            // ref #2531, #2593
-            // disabling the transition before nextFrame ensures styles from
-            // *-leave-from and *-enter-from classes are applied instantly before
-            // the transition starts. This is applied for enter transition as well
-            // so that it accounts for `visibility: hidden` cases.
-            const cachedTransition = el.style.transitionProperty;
-            el.style.transitionProperty = 'none';
             nextFrame(() => {
-                el.style.transitionProperty = cachedTransition;
                 removeTransitionClass(el, leaveFromClass);
@@ -689,2 +683,6 @@ addTransitionClass(el, leaveToClass);
 }
+// synchronously force layout to put elements into a certain state
+function forceReflow() {
+    return document.body.offsetHeight;
+}
 
@@ -789,6 +787,2 @@ const positionMap = new WeakMap();
 }
-// this is put in a dedicated function to avoid the line from being treeshaken
-function forceReflow() {
-    return document.body.offsetHeight;
-}
 function hasCSSTransform(el, root, moveClass) {
@@ -1231,4 +1225,6 @@ // Detect whether an element with the move class applied has
         const proxy = mount(container);
-        container.removeAttribute('v-cloak');
-        container.setAttribute('data-v-app', '');
+        if (container instanceof Element) {
+            container.removeAttribute('v-cloak');
+            container.setAttribute('data-v-app', '');
+        }
         return proxy;
@@ -1264,6 +1260,11 @@ };
         if ( !res) {
-            runtimeCore.warn(`Failed to mount app: mount target selector returned null.`);
+            runtimeCore.warn(`Failed to mount app: mount target selector "${container}" returned null.`);
         }
         return res;
     }
+    if (
+        container instanceof ShadowRoot &&
+        container.mode === 'closed') {
+        runtimeCore.warn(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`);
+    }
     return container;
@@ -1270,0 +1271,0 @@ }

dist/runtime-dom.cjs.prod.js

@@ -490,9 +490,9 @@ 'use strict';
             onBeforeEnter && onBeforeEnter(el);
+            addTransitionClass(el, enterFromClass);
             addTransitionClass(el, enterActiveClass);
-            addTransitionClass(el, enterFromClass);
         },
         onBeforeAppear(el) {
             onBeforeAppear && onBeforeAppear(el);
+            addTransitionClass(el, appearFromClass);
             addTransitionClass(el, appearActiveClass);
-            addTransitionClass(el, appearFromClass);
         },
@@ -503,13 +503,7 @@ onEnter: makeEnterHook(false),
             const resolve = () => finishLeave(el, done);
+            addTransitionClass(el, leaveFromClass);
+            // force reflow so *-leave-from classes immediately take effect (#2593)
+            forceReflow();
             addTransitionClass(el, leaveActiveClass);
-            addTransitionClass(el, leaveFromClass);
-            // ref #2531, #2593
-            // disabling the transition before nextFrame ensures styles from
-            // *-leave-from and *-enter-from classes are applied instantly before
-            // the transition starts. This is applied for enter transition as well
-            // so that it accounts for `visibility: hidden` cases.
-            const cachedTransition = el.style.transitionProperty;
-            el.style.transitionProperty = 'none';
             nextFrame(() => {
-                el.style.transitionProperty = cachedTransition;
                 removeTransitionClass(el, leaveFromClass);
@@ -670,2 +664,6 @@ addTransitionClass(el, leaveToClass);
 }
+// synchronously force layout to put elements into a certain state
+function forceReflow() {
+    return document.body.offsetHeight;
+}
 
@@ -767,6 +765,2 @@ const positionMap = new WeakMap();
 }
-// this is put in a dedicated function to avoid the line from being treeshaken
-function forceReflow() {
-    return document.body.offsetHeight;
-}
 function hasCSSTransform(el, root, moveClass) {
@@ -1203,4 +1197,6 @@ // Detect whether an element with the move class applied has
         const proxy = mount(container);
-        container.removeAttribute('v-cloak');
-        container.setAttribute('data-v-app', '');
+        if (container instanceof Element) {
+            container.removeAttribute('v-cloak');
+            container.setAttribute('data-v-app', '');
+        }
         return proxy;
@@ -1207,0 +1203,0 @@ };

dist/runtime-dom.esm-bundler.js

@@ -528,9 +528,9 @@ import { camelize, warn, callWithAsyncErrorHandling, getCurrentInstance, onMounted, watchEffect, onUpdated, Fragment, h, BaseTransition, useTransitionState, toRaw, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, createVNode, createRenderer, createHydrationRenderer } from '@vue/runtime-core';
             onBeforeEnter && onBeforeEnter(el);
+            addTransitionClass(el, enterFromClass);
             addTransitionClass(el, enterActiveClass);
-            addTransitionClass(el, enterFromClass);
         },
         onBeforeAppear(el) {
             onBeforeAppear && onBeforeAppear(el);
+            addTransitionClass(el, appearFromClass);
             addTransitionClass(el, appearActiveClass);
-            addTransitionClass(el, appearFromClass);
         },
@@ -541,13 +541,7 @@ onEnter: makeEnterHook(false),
             const resolve = () => finishLeave(el, done);
+            addTransitionClass(el, leaveFromClass);
+            // force reflow so *-leave-from classes immediately take effect (#2593)
+            forceReflow();
             addTransitionClass(el, leaveActiveClass);
-            addTransitionClass(el, leaveFromClass);
-            // ref #2531, #2593
-            // disabling the transition before nextFrame ensures styles from
-            // *-leave-from and *-enter-from classes are applied instantly before
-            // the transition starts. This is applied for enter transition as well
-            // so that it accounts for `visibility: hidden` cases.
-            const cachedTransition = el.style.transitionProperty;
-            el.style.transitionProperty = 'none';
             nextFrame(() => {
-                el.style.transitionProperty = cachedTransition;
                 removeTransitionClass(el, leaveFromClass);
@@ -720,2 +714,6 @@ addTransitionClass(el, leaveToClass);
 }
+// synchronously force layout to put elements into a certain state
+function forceReflow() {
+    return document.body.offsetHeight;
+}
 
@@ -820,6 +818,2 @@ const positionMap = new WeakMap();
 }
-// this is put in a dedicated function to avoid the line from being treeshaken
-function forceReflow() {
-    return document.body.offsetHeight;
-}
 function hasCSSTransform(el, root, moveClass) {
@@ -1231,4 +1225,6 @@ // Detect whether an element with the move class applied has
         const proxy = mount(container);
-        container.removeAttribute('v-cloak');
-        container.setAttribute('data-v-app', '');
+        if (container instanceof Element) {
+            container.removeAttribute('v-cloak');
+            container.setAttribute('data-v-app', '');
+        }
         return proxy;
@@ -1264,6 +1260,11 @@ };
         if ((process.env.NODE_ENV !== 'production') && !res) {
-            warn(`Failed to mount app: mount target selector returned null.`);
+            warn(`Failed to mount app: mount target selector "${container}" returned null.`);
         }
         return res;
     }
+    if ((process.env.NODE_ENV !== 'production') &&
+        container instanceof ShadowRoot &&
+        container.mode === 'closed') {
+        warn(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`);
+    }
     return container;
@@ -1270,0 +1271,0 @@ }

package.json

 {
   "name": "@vue/runtime-dom",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "@vue/runtime-dom",
@@ -38,6 +38,6 @@ "main": "index.js",
   "dependencies": {
-    "@vue/shared": "3.0.4",
-    "@vue/runtime-core": "3.0.4",
+    "@vue/shared": "3.0.5",
+    "@vue/runtime-core": "3.0.5",
     "csstype": "^2.6.8"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1039940

increased by0.01%

Lines of code

24151

increased by0.06%

Worsened metrics

Number of low supply chain risk alerts

13

increased by8.33%

Dependency changes

• + Added@vue/reactivity@3.0.5(transitive)

• + Added@vue/runtime-core@3.0.5(transitive)

• + Added@vue/shared@3.0.5(transitive)

• - Removed@vue/reactivity@3.0.4(transitive)

• - Removed@vue/runtime-core@3.0.4(transitive)

• - Removed@vue/shared@3.0.4(transitive)

• Updated@vue/runtime-core@3.0.5

• Updated@vue/shared@3.0.5