@vue/runtime-dom - npm Package Compare versions

Comparing version 3.0.0-beta.20 to 3.0.0-beta.21

dist/runtime-dom.cjs.js

@@ -199,2 +199,3 @@ 'use strict';
         el[key] = '';
+        el.removeAttribute(key);
     }
@@ -243,38 +244,31 @@ else {
 function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
-    const name = rawName.slice(2).toLowerCase();
-    const prevOptions = prevValue && 'options' in prevValue && prevValue.options;
-    const nextOptions = nextValue && 'options' in nextValue && nextValue.options;
     const invoker = prevValue && prevValue.invoker;
-    const value = nextValue && 'handler' in nextValue ? nextValue.handler : nextValue;
-    if (prevOptions || nextOptions) {
-        const prev = prevOptions || shared.EMPTY_OBJ;
-        const next = nextOptions || shared.EMPTY_OBJ;
-        if (prev.capture !== next.capture ||
-            prev.passive !== next.passive ||
-            prev.once !== next.once) {
-            if (invoker) {
-                removeEventListener(el, name, invoker, prev);
-            }
-            if (nextValue && value) {
-                const invoker = createInvoker(value, instance);
-                nextValue.invoker = invoker;
-                addEventListener(el, name, invoker, next);
-            }
-            return;
-        }
+    if (nextValue && invoker) {
+        prevValue.invoker = null;
+        invoker.value = nextValue;
+        nextValue.invoker = invoker;
     }
-    if (nextValue && value) {
-        if (invoker) {
-            prevValue.invoker = null;
-            invoker.value = value;
-            nextValue.invoker = invoker;
-            invoker.lastUpdated = getNow();
+    else {
+        const [name, options] = parseName(rawName);
+        if (nextValue) {
+            addEventListener(el, name, createInvoker(nextValue, instance), options);
         }
-        else {
-            addEventListener(el, name, createInvoker(value, instance), nextOptions || void 0);
+        else if (invoker) {
+            // remove
+            removeEventListener(el, name, invoker, options);
         }
     }
-    else if (invoker) {
-        removeEventListener(el, name, invoker, prevOptions || void 0);
+}
+const optionsModifierRE = /(?:Once|Passive|Capture)$/;
+function parseName(name) {
+    let options;
+    if (optionsModifierRE.test(name)) {
+        options = {};
+        let m;
+        while ((m = name.match(optionsModifierRE))) {
+            name = name.slice(0, name.length - m[0].length);
+            options[m[0].toLowerCase()] = true;
+        }
     }
+    return [name.slice(2).toLowerCase(), options];
 }
@@ -290,3 +284,3 @@ function createInvoker(initialValue, instance) {
         const timeStamp = e.timeStamp || _getNow();
-        if (timeStamp >= invoker.lastUpdated - 1) {
+        if (timeStamp >= invoker.attached - 1) {
             runtimeCore.callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]);
@@ -297,3 +291,3 @@ }
     initialValue.invoker = invoker;
-    invoker.lastUpdated = getNow();
+    invoker.attached = getNow();
     return invoker;
@@ -385,2 +379,56 @@ }
 
+function useCssModule(name = '$style') {
+    {
+        const instance = runtimeCore.getCurrentInstance();
+        if (!instance) {
+             runtimeCore.warn(`useCSSModule must be called inside setup()`);
+            return shared.EMPTY_OBJ;
+        }
+        const modules = instance.type.__cssModules;
+        if (!modules) {
+             runtimeCore.warn(`Current instance does not have CSS modules injected.`);
+            return shared.EMPTY_OBJ;
+        }
+        const mod = modules[name];
+        if (!mod) {
+            
+                runtimeCore.warn(`Current instance does not have CSS module named "${name}".`);
+            return shared.EMPTY_OBJ;
+        }
+        return mod;
+    }
+}
+
+function useCssVars(getter, scoped = false) {
+    const instance = runtimeCore.getCurrentInstance();
+    if (!instance) {
+        
+            runtimeCore.warn(`useCssVars is called without current active component instance.`);
+        return;
+    }
+    const prefix = scoped && instance.type.__scopeId
+        ? `${instance.type.__scopeId.replace(/^data-v-/, '')}-`
+        : ``;
+    runtimeCore.onMounted(() => {
+        runtimeCore.watchEffect(() => {
+            setVarsOnVNode(instance.subTree, getter(instance.proxy), prefix);
+        });
+    });
+}
+function setVarsOnVNode(vnode, vars, prefix) {
+    // drill down HOCs until it's a non-component vnode
+    while (vnode.component) {
+        vnode = vnode.component.subTree;
+    }
+    if (vnode.shapeFlag & 1 /* ELEMENT */ && vnode.el) {
+        const style = vnode.el.style;
+        for (const key in vars) {
+            style.setProperty(`--${prefix}${key}`, vars[key]);
+        }
+    }
+    else if (vnode.type === runtimeCore.Fragment) {
+        vnode.children.forEach(c => setVarsOnVNode(c, vars, prefix));
+    }
+}
+
 const TRANSITION = 'transition';
@@ -1190,2 +1238,4 @@ const ANIMATION = 'animation';
 exports.render = render;
+exports.useCssModule = useCssModule;
+exports.useCssVars = useCssVars;
 exports.vModelCheckbox = vModelCheckbox;
@@ -1192,0 +1242,0 @@ exports.vModelDynamic = vModelDynamic;

dist/runtime-dom.cjs.prod.js

@@ -199,2 +199,3 @@ 'use strict';
         el[key] = '';
+        el.removeAttribute(key);
     }
@@ -239,38 +240,31 @@ else {
 function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
-    const name = rawName.slice(2).toLowerCase();
-    const prevOptions = prevValue && 'options' in prevValue && prevValue.options;
-    const nextOptions = nextValue && 'options' in nextValue && nextValue.options;
     const invoker = prevValue && prevValue.invoker;
-    const value = nextValue && 'handler' in nextValue ? nextValue.handler : nextValue;
-    if (prevOptions || nextOptions) {
-        const prev = prevOptions || shared.EMPTY_OBJ;
-        const next = nextOptions || shared.EMPTY_OBJ;
-        if (prev.capture !== next.capture ||
-            prev.passive !== next.passive ||
-            prev.once !== next.once) {
-            if (invoker) {
-                removeEventListener(el, name, invoker, prev);
-            }
-            if (nextValue && value) {
-                const invoker = createInvoker(value, instance);
-                nextValue.invoker = invoker;
-                addEventListener(el, name, invoker, next);
-            }
-            return;
-        }
+    if (nextValue && invoker) {
+        prevValue.invoker = null;
+        invoker.value = nextValue;
+        nextValue.invoker = invoker;
     }
-    if (nextValue && value) {
-        if (invoker) {
-            prevValue.invoker = null;
-            invoker.value = value;
-            nextValue.invoker = invoker;
-            invoker.lastUpdated = getNow();
+    else {
+        const [name, options] = parseName(rawName);
+        if (nextValue) {
+            addEventListener(el, name, createInvoker(nextValue, instance), options);
         }
-        else {
-            addEventListener(el, name, createInvoker(value, instance), nextOptions || void 0);
+        else if (invoker) {
+            // remove
+            removeEventListener(el, name, invoker, options);
         }
     }
-    else if (invoker) {
-        removeEventListener(el, name, invoker, prevOptions || void 0);
+}
+const optionsModifierRE = /(?:Once|Passive|Capture)$/;
+function parseName(name) {
+    let options;
+    if (optionsModifierRE.test(name)) {
+        options = {};
+        let m;
+        while ((m = name.match(optionsModifierRE))) {
+            name = name.slice(0, name.length - m[0].length);
+            options[m[0].toLowerCase()] = true;
+        }
     }
+    return [name.slice(2).toLowerCase(), options];
 }
@@ -286,3 +280,3 @@ function createInvoker(initialValue, instance) {
         const timeStamp = e.timeStamp || _getNow();
-        if (timeStamp >= invoker.lastUpdated - 1) {
+        if (timeStamp >= invoker.attached - 1) {
             runtimeCore.callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]);
@@ -293,3 +287,3 @@ }
     initialValue.invoker = invoker;
-    invoker.lastUpdated = getNow();
+    invoker.attached = getNow();
     return invoker;
@@ -381,2 +375,50 @@ }
 
+function useCssModule(name = '$style') {
+    {
+        const instance = runtimeCore.getCurrentInstance();
+        if (!instance) {
+            return shared.EMPTY_OBJ;
+        }
+        const modules = instance.type.__cssModules;
+        if (!modules) {
+            return shared.EMPTY_OBJ;
+        }
+        const mod = modules[name];
+        if (!mod) {
+            return shared.EMPTY_OBJ;
+        }
+        return mod;
+    }
+}
+
+function useCssVars(getter, scoped = false) {
+    const instance = runtimeCore.getCurrentInstance();
+    if (!instance) {
+        return;
+    }
+    const prefix = scoped && instance.type.__scopeId
+        ? `${instance.type.__scopeId.replace(/^data-v-/, '')}-`
+        : ``;
+    runtimeCore.onMounted(() => {
+        runtimeCore.watchEffect(() => {
+            setVarsOnVNode(instance.subTree, getter(instance.proxy), prefix);
+        });
+    });
+}
+function setVarsOnVNode(vnode, vars, prefix) {
+    // drill down HOCs until it's a non-component vnode
+    while (vnode.component) {
+        vnode = vnode.component.subTree;
+    }
+    if (vnode.shapeFlag & 1 /* ELEMENT */ && vnode.el) {
+        const style = vnode.el.style;
+        for (const key in vars) {
+            style.setProperty(`--${prefix}${key}`, vars[key]);
+        }
+    }
+    else if (vnode.type === runtimeCore.Fragment) {
+        vnode.children.forEach(c => setVarsOnVNode(c, vars, prefix));
+    }
+}
+
 const TRANSITION = 'transition';
@@ -1152,2 +1194,4 @@ const ANIMATION = 'animation';
 exports.render = render;
+exports.useCssModule = useCssModule;
+exports.useCssVars = useCssVars;
 exports.vModelCheckbox = vModelCheckbox;
@@ -1154,0 +1198,0 @@ exports.vModelDynamic = vModelDynamic;

dist/runtime-dom.d.ts

 import { BaseTransitionProps } from '@vue/runtime-core';
+import { ComponentPublicInstance } from '@vue/runtime-core';
 import { CreateAppFunction } from '@vue/runtime-core';
@@ -56,2 +57,6 @@ import { FunctionalComponent } from '@vue/runtime-core';
 
+export declare function useCssModule(name?: string): Record<string, string>;
+
+export declare function useCssVars(getter: (ctx: ComponentPublicInstance) => Record<string, string>, scoped?: boolean): void;
+
 export declare const vModelCheckbox: ModelDirective<HTMLInputElement>;
@@ -90,4 +95,2 @@
 
-import { Ref, ComponentPublicInstance } from '@vue/runtime-core'
-
 // This code is based on react definition in DefinitelyTyped published under the MIT license.
@@ -1397,5 +1400,12 @@ //      Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
 
+// use namespace import to avoid collision with generated types which use
+// named imports.
+import * as RuntimeCore from '@vue/runtime-core'
+
 type ReservedProps = {
   key?: string | number
-  ref?: string | Ref | ((ref: Element | ComponentPublicInstance | null) => void)
+  ref?:
+    | string
+    | RuntimeCore.Ref
+    | ((ref: Element | RuntimeCore.ComponentInternalInstance | null) => void)
 }
@@ -1402,0 +1412,0 @@

dist/runtime-dom.esm-bundler.js

@@ -1,4 +0,4 @@
-import { camelize, warn, callWithAsyncErrorHandling, h, BaseTransition, getCurrentInstance, useTransitionState, onUpdated, Fragment, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, createVNode, createRenderer, createHydrationRenderer } from '@vue/runtime-core';
+import { camelize, warn, callWithAsyncErrorHandling, getCurrentInstance, onMounted, watchEffect, Fragment, h, BaseTransition, useTransitionState, onUpdated, getTransitionRawChildren, setTransitionHooks, resolveTransitionHooks, createVNode, createRenderer, createHydrationRenderer } from '@vue/runtime-core';
 export * from '@vue/runtime-core';
-import { isString, hyphenate, capitalize, isSpecialBooleanAttr, isArray, EMPTY_OBJ, isOn, isFunction, extend, isObject, toNumber, invokeArrayFns, looseIndexOf, looseEqual, isHTMLTag, isSVGTag } from '@vue/shared';
+import { isString, hyphenate, capitalize, isSpecialBooleanAttr, isArray, isOn, isFunction, EMPTY_OBJ, extend, isObject, toNumber, invokeArrayFns, looseIndexOf, looseEqual, isHTMLTag, isSVGTag } from '@vue/shared';
 
@@ -196,2 +196,3 @@ const svgNS = 'http://www.w3.org/2000/svg';
         el[key] = '';
+        el.removeAttribute(key);
     }
@@ -240,38 +241,31 @@ else {
 function patchEvent(el, rawName, prevValue, nextValue, instance = null) {
-    const name = rawName.slice(2).toLowerCase();
-    const prevOptions = prevValue && 'options' in prevValue && prevValue.options;
-    const nextOptions = nextValue && 'options' in nextValue && nextValue.options;
     const invoker = prevValue && prevValue.invoker;
-    const value = nextValue && 'handler' in nextValue ? nextValue.handler : nextValue;
-    if (prevOptions || nextOptions) {
-        const prev = prevOptions || EMPTY_OBJ;
-        const next = nextOptions || EMPTY_OBJ;
-        if (prev.capture !== next.capture ||
-            prev.passive !== next.passive ||
-            prev.once !== next.once) {
-            if (invoker) {
-                removeEventListener(el, name, invoker, prev);
-            }
-            if (nextValue && value) {
-                const invoker = createInvoker(value, instance);
-                nextValue.invoker = invoker;
-                addEventListener(el, name, invoker, next);
-            }
-            return;
-        }
+    if (nextValue && invoker) {
+        prevValue.invoker = null;
+        invoker.value = nextValue;
+        nextValue.invoker = invoker;
     }
-    if (nextValue && value) {
-        if (invoker) {
-            prevValue.invoker = null;
-            invoker.value = value;
-            nextValue.invoker = invoker;
-            invoker.lastUpdated = getNow();
+    else {
+        const [name, options] = parseName(rawName);
+        if (nextValue) {
+            addEventListener(el, name, createInvoker(nextValue, instance), options);
         }
-        else {
-            addEventListener(el, name, createInvoker(value, instance), nextOptions || void 0);
+        else if (invoker) {
+            // remove
+            removeEventListener(el, name, invoker, options);
         }
     }
-    else if (invoker) {
-        removeEventListener(el, name, invoker, prevOptions || void 0);
+}
+const optionsModifierRE = /(?:Once|Passive|Capture)$/;
+function parseName(name) {
+    let options;
+    if (optionsModifierRE.test(name)) {
+        options = {};
+        let m;
+        while ((m = name.match(optionsModifierRE))) {
+            name = name.slice(0, name.length - m[0].length);
+            options[m[0].toLowerCase()] = true;
+        }
     }
+    return [name.slice(2).toLowerCase(), options];
 }
@@ -287,3 +281,3 @@ function createInvoker(initialValue, instance) {
         const timeStamp = e.timeStamp || _getNow();
-        if (timeStamp >= invoker.lastUpdated - 1) {
+        if (timeStamp >= invoker.attached - 1) {
             callWithAsyncErrorHandling(patchStopImmediatePropagation(e, invoker.value), instance, 5 /* NATIVE_EVENT_HANDLER */, [e]);
@@ -294,3 +288,3 @@ }
     initialValue.invoker = invoker;
-    invoker.lastUpdated = getNow();
+    invoker.attached = getNow();
     return invoker;
@@ -382,2 +376,56 @@ }
 
+function useCssModule(name = '$style') {
+    {
+        const instance = getCurrentInstance();
+        if (!instance) {
+            (process.env.NODE_ENV !== 'production') && warn(`useCSSModule must be called inside setup()`);
+            return EMPTY_OBJ;
+        }
+        const modules = instance.type.__cssModules;
+        if (!modules) {
+            (process.env.NODE_ENV !== 'production') && warn(`Current instance does not have CSS modules injected.`);
+            return EMPTY_OBJ;
+        }
+        const mod = modules[name];
+        if (!mod) {
+            (process.env.NODE_ENV !== 'production') &&
+                warn(`Current instance does not have CSS module named "${name}".`);
+            return EMPTY_OBJ;
+        }
+        return mod;
+    }
+}
+
+function useCssVars(getter, scoped = false) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        (process.env.NODE_ENV !== 'production') &&
+            warn(`useCssVars is called without current active component instance.`);
+        return;
+    }
+    const prefix = scoped && instance.type.__scopeId
+        ? `${instance.type.__scopeId.replace(/^data-v-/, '')}-`
+        : ``;
+    onMounted(() => {
+        watchEffect(() => {
+            setVarsOnVNode(instance.subTree, getter(instance.proxy), prefix);
+        });
+    });
+}
+function setVarsOnVNode(vnode, vars, prefix) {
+    // drill down HOCs until it's a non-component vnode
+    while (vnode.component) {
+        vnode = vnode.component.subTree;
+    }
+    if (vnode.shapeFlag & 1 /* ELEMENT */ && vnode.el) {
+        const style = vnode.el.style;
+        for (const key in vars) {
+            style.setProperty(`--${prefix}${key}`, vars[key]);
+        }
+    }
+    else if (vnode.type === Fragment) {
+        vnode.children.forEach(c => setVarsOnVNode(c, vars, prefix));
+    }
+}
+
 const TRANSITION = 'transition';
@@ -1153,2 +1201,2 @@ const ANIMATION = 'animation';
 
-export { Transition, TransitionGroup, createApp, createSSRApp, hydrate, render, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers };
+export { Transition, TransitionGroup, createApp, createSSRApp, hydrate, render, useCssModule, useCssVars, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers };

package.json

 {
   "name": "@vue/runtime-dom",
-  "version": "3.0.0-beta.20",
+  "version": "3.0.0-beta.21",
   "description": "@vue/runtime-dom",
@@ -37,6 +37,6 @@ "main": "index.js",
   "dependencies": {
-    "@vue/shared": "3.0.0-beta.20",
-    "@vue/runtime-core": "3.0.0-beta.20",
+    "@vue/shared": "3.0.0-beta.21",
+    "@vue/runtime-core": "3.0.0-beta.21",
     "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

929950

increased by0.98%

Lines of code

21756

increased by1.27%

Worsened metrics

Number of low supply chain risk alerts

12

increased by50%

Dependency changes

• + Added@vue/reactivity@3.0.0-beta.21(transitive)

• + Added@vue/runtime-core@3.0.0-beta.21(transitive)

• + Added@vue/shared@3.0.0-beta.21(transitive)

• - Removed@vue/reactivity@3.0.0-beta.20(transitive)

• - Removed@vue/runtime-core@3.0.0-beta.20(transitive)

• - Removed@vue/shared@3.0.0-beta.20(transitive)

• Updated@vue/runtime-core@3.0.0-beta.21

• Updated@vue/shared@3.0.0-beta.21