driver-dom - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8-0

dist/driver-dom.js

@@ -40,2 +40,3 @@ (function () {
   var HYDRATION_APPEND = '__a';
+  var DOCUMENT = document;
   var tagNamePrefix = EMPTY; // Flag indicating if the diff is currently within an SVG
@@ -116,3 +117,3 @@
   function createBody() {
-    return document.body;
+    return DOCUMENT.body;
   }
@@ -130,11 +131,11 @@ function createEmpty(component) {
         } else {
-          node = document[CREATE_COMMENT](EMPTY);
+          node = DOCUMENT[CREATE_COMMENT](EMPTY);
           replaceChild(node, hydrationChild, parent);
         }
       } else {
-        node = document[CREATE_COMMENT](EMPTY);
+        node = DOCUMENT[CREATE_COMMENT](EMPTY);
         node[HYDRATION_APPEND] = true;
       }
     } else {
-      node = document[CREATE_COMMENT](EMPTY);
+      node = DOCUMENT[CREATE_COMMENT](EMPTY);
     }
@@ -159,11 +160,11 @@
         } else {
-          node = document[CREATE_TEXT_NODE](text);
+          node = DOCUMENT[CREATE_TEXT_NODE](text);
           replaceChild(node, hydrationChild, parent);
         }
       } else {
-        node = document[CREATE_TEXT_NODE](text);
+        node = DOCUMENT[CREATE_TEXT_NODE](text);
         node[HYDRATION_APPEND] = true;
       }
     } else {
-      node = document[CREATE_TEXT_NODE](text);
+      node = DOCUMENT[CREATE_TEXT_NODE](text);
     }
@@ -184,16 +185,4 @@
   }
-  /**
-   * @param {string} type node type
-   * @param {object} props elemement properties
-   * @param {object} component component instance
-   * @param {boolean} __shouldConvertUnitlessToRpx should add unit when missing
-   * @param {boolean} __shouldConvertRpxToVw should transfrom rpx to vw
-   */
 
-
-  function createElement(type, props, component, __shouldConvertUnitlessToRpx, __shouldConvertRpxToVw) {
-    if (__shouldConvertRpxToVw === void 0) {
-      __shouldConvertRpxToVw = true;
-    }
-
+  function createElement(type, props, component) {
     var parent = component._parent;
@@ -206,9 +195,9 @@ isSVGMode = type === 'svg' || parent && parent.namespaceURI === SVG_NS;
       if (isSVGMode) {
-        node = document.createElementNS(SVG_NS, type);
+        node = DOCUMENT.createElementNS(SVG_NS, type);
       } else if (tagNamePrefix) {
         var _tagNamePrefix = typeof _tagNamePrefix === 'function' ? _tagNamePrefix(type) : _tagNamePrefix;
 
-        node = document[CREATE_ELEMENT](_tagNamePrefix + type);
+        node = DOCUMENT[CREATE_ELEMENT](_tagNamePrefix + type);
       } else {
-        node = document[CREATE_ELEMENT](type);
+        node = DOCUMENT[CREATE_ELEMENT](type);
       }
@@ -266,3 +255,3 @@ }
         if (prop === STYLE) {
-          setStyle(node, value, __shouldConvertUnitlessToRpx, __shouldConvertRpxToVw);
+          setStyle(node, value);
         } else if (isEventProp(prop)) {
@@ -352,14 +341,3 @@ addEventListener(node, prop.slice(2).toLowerCase(), value);
   }
-  /**
-   * @param {object} node target node
-   * @param {object} style target node style value
-   * @param {boolean} __shouldConvertUnitlessToRpx
-   * @param {boolean} __shouldConvertRpxToVw should transfrom rpx to vw
-   */
-
-  function setStyle(node, style, __shouldConvertUnitlessToRpx, __shouldConvertRpxToVw) {
-    if (__shouldConvertRpxToVw === void 0) {
-      __shouldConvertRpxToVw = true;
-    }
-
+  function setStyle(node, style) {
     for (var prop in style) {
@@ -370,14 +348,5 @@ var value = style[prop];
       if (typeof value === 'number' && isDimensionalProp(prop)) {
-        if (__shouldConvertUnitlessToRpx) {
-          convertedValue = value + 'rpx';
-
-          if (__shouldConvertRpxToVw) {
-            // Transfrom rpx to vw
-            convertedValue = convertUnit(convertedValue);
-          }
-        } else {
-          convertedValue = value + 'px';
-        }
+        convertedValue = value + 'px';
       } else {
-        convertedValue = __shouldConvertRpxToVw ? convertUnit(value) : value;
+        convertedValue = convertUnit(value);
       } // Support CSS custom properties (variables) like { --main-color: "black" }
@@ -433,3 +402,3 @@
 
-  var DriverDOM = {
+  var DriverDOM = ({
     __proto__: null,
@@ -458,3 +427,3 @@ setViewportWidth: setViewportWidth,
     removeChildren: removeChildren
-  };
+  });
 
@@ -461,0 +430,0 @@ if (typeof module !== 'undefined') module.exports = DriverDOM;else self.DriverDOM = DriverDOM;

dist/driver-dom.min.js

@@ -1,2 +0,2 @@
-!function(){var n=/[-+]?\d*\.?\d+(rpx)/g,t=/opa|ntw|ne[ch]|ex(?:s|g|n|p|$)|^ord|zoo|grid|orp|ows|mnc|^columns$|bs|erim|onit/i,r=/^on[A-Z]/,i="dangerouslySetInnerHTML",e="__html",o="innerHTML",y="className",_="class",b="style",u="textContent",g="createElement",f="createComment",c="createTextNode",l="setAttribute",w="removeAttribute",T="http://www.w3.org/2000/svg",A="",a="__i",C="__a",E=A,M=!1,L=!1,s=750,v=4;function d(e){return 10*Math.round(Math.floor(parseFloat(e)/(s/100)*(n=Math.pow(10,v+1)))/10)/n+"vw";var n}function m(n){var t=Object.create(null);return function(e){return t[e]||(t[e]=n(e))}}var p=m(function(e){return n.test(e)?e.replace(n,d):e}),h=m(function(e){return!t.test(e)}),N=m(function(e){return r.test(e)});function P(e){return null==e[a]&&(e[a]=0),e.childNodes[e[a]++]}function x(e,n){if(!L||e[C])return n.appendChild(e)}function j(e,n,t){(t=t||n.parentNode).replaceChild(e,n)}function B(e,n,t){(t=t||n.parentNode).insertBefore(e,n)}function H(e,n,t){return e.addEventListener(n,t)}function O(n,t,r){if(t===i&&n[o]!==r[e])return n[o]=r[e];if(t===y&&(t=_),t in n)try{n[t]=r}catch(e){n[l](t,r)}else n[l](t,r)}function R(e,n,t,r){for(var i in void 0===r&&(r=!0),n){var o=n[i],u=void 0;"number"==typeof o&&h(i)?t?(u=o+"rpx",r&&(u=p(u))):u=o+"px":u=r?p(o):o,"-"===i[0]&&"-"===i[1]?e.style.setProperty(i,u):e.style[i]=u}}var S={__proto__:null,setViewportWidth:function(e){s=e},setUnitPrecision:function(e){v=e},setDecimalPixelTransformer:function(){},setTagNamePrefix:function(e){E=e},createBody:function(){return document.body},createEmpty:function(e){var n,t=e._parent;if(L){var r=P(t);if(r){if(8===r.nodeType)return r;j(n=document[f](A),r,t)}else(n=document[f](A))[C]=!0}else n=document[f](A);return n},createText:function(e,n){var t,r=n._parent;if(L){var i=P(r);if(i){if(3===i.nodeType)return e!==i[u]&&(i[u]=e),i;j(t=document[c](e),i,r)}else(t=document[c](e))[C]=!0}else t=document[c](e);return t},updateText:function(e,n){e[u]=n},createElement:function(n,e,t,r,i){void 0===i&&(i=!0);var o,u=t._parent;M="svg"===n||u&&u.namespaceURI===T;var f=null;function c(){if(M)o=document.createElementNS(T,n);else if(E){var e="function"==typeof e?e(n):e;o=document[g](e+n)}else o=document[g](n)}if(L)if(f=P(u))if(n===f.nodeName.toLowerCase()){for(var l=f.attributes,a=l.length;a--;){var s=l[a].name,v=e[s];if(s===_&&null==e[y]&&null==v||s===b&&(null==v||0===Object.keys(v).length)||s!==_&&s!==b&&null==v)f[w](s);else if(s===b)for(var d=0,m=f.style.length;d<m;d++){var p=f.style[d];v[p]||(f.style[p]=A)}}o=f}else c(),j(o,f,u);else c(),o[C]=!0;else c();for(var h in e){var x=e[h];"children"!==h&&null!=x&&(h===b?R(o,x,r,i):N(h)?H(o,h.slice(2).toLowerCase(),x):O(o,h,x))}return o},appendChild:x,removeChild:function(e,n){(n=n||e.parentNode)&&n.removeChild(e)},replaceChild:j,insertAfter:function(e,n,t){t=t||n.parentNode;var r=n.nextSibling;r?r!==e&&B(e,r,t):x(e,t)},insertBefore:B,addEventListener:H,removeEventListener:function(e,n,t){return e.removeEventListener(n,t)},removeAttribute:function(e,n){if(n===i)return e[o]=null;if(n===y&&(n=_),n in e)try{e[n]=null}catch(e){}e[w](n)},setAttribute:O,setStyle:R,beforeRender:function(e){L=e.hydrate},afterRender:function(e){L&&(!function e(n){var t=n.childNodes.length,r=n[a]||0;if(0<t-r)for(var i=t-1;r<=i;i--)n.removeChild(n.childNodes[i]);for(var o=n.childNodes.length-1;0<=o;o--)e(n.childNodes[o])}(e.container),L=!1)},removeChildren:function(e){e.textContent=A}};"undefined"!=typeof module?module.exports=S:self.DriverDOM=S}();
+!function(){var n=/[-+]?\d*\.?\d+(rpx)/g,t=/opa|ntw|ne[ch]|ex(?:s|g|n|p|$)|^ord|zoo|grid|orp|ows|mnc|^columns$|bs|erim|onit/i,r=/^on[A-Z]/,i="dangerouslySetInnerHTML",e="__html",u="innerHTML",h="className",y="class",_="style",o="textContent",b="createElement",f="createComment",c="createTextNode",l="setAttribute",x="removeAttribute",g="http://www.w3.org/2000/svg",w="",a="__i",T="__a",A=document,C=w,E=!1,M=!1,s=750,v=4;function d(e){return function(e,n){var t=Math.pow(10,n+1);return 10*Math.round(Math.floor(e*t)/10)/t}(parseFloat(e)/(s/100),v)+"vw"}function m(n){var t=Object.create(null);return function(e){return t[e]||(t[e]=n(e))}}var p=m(function(e){return function(e){return n.test(e)}(e)?function(e){return e.replace(n,d)}(e):e}),L=m(function(e){return!t.test(e)}),N=m(function(e){return r.test(e)});function P(e){return null==e[a]&&(e[a]=0),e.childNodes[e[a]++]}function j(e,n){if(!M||e[T])return n.appendChild(e)}function B(e,n,t){(t=t||n.parentNode).replaceChild(e,n)}function H(e,n,t){(t=t||n.parentNode).insertBefore(e,n)}function O(e,n,t){return e.addEventListener(n,t)}function R(n,t,r){if(t===i&&n[u]!==r[e])return n[u]=r[e];if(t===h&&(t=y),t in n)try{n[t]=r}catch(e){n[l](t,r)}else n[l](t,r)}function S(e,n){for(var t in n){var r=n[t],i=void 0;i="number"==typeof r&&L(t)?r+"px":p(r),"-"===t[0]&&"-"===t[1]?e.style.setProperty(t,i):e.style[t]=i}}var $={__proto__:null,setViewportWidth:function(e){s=e},setUnitPrecision:function(e){v=e},setDecimalPixelTransformer:function(){},setTagNamePrefix:function(e){C=e},createBody:function(){return A.body},createEmpty:function(e){var n,t=e._parent;if(M){var r=P(t);if(r){if(8===r.nodeType)return r;B(n=A[f](w),r,t)}else(n=A[f](w))[T]=!0}else n=A[f](w);return n},createText:function(e,n){var t,r=n._parent;if(M){var i=P(r);if(i){if(3===i.nodeType)return e!==i[o]&&(i[o]=e),i;B(t=A[c](e),i,r)}else(t=A[c](e))[T]=!0}else t=A[c](e);return t},updateText:function(e,n){e[o]=n},createElement:function(n,e,t){var r,i=t._parent;E="svg"===n||i&&i.namespaceURI===g;var u=null;function o(){if(E)r=A.createElementNS(g,n);else if(C){var e="function"==typeof e?e(n):e;r=A[b](e+n)}else r=A[b](n)}if(M)if(u=P(i))if(n===u.nodeName.toLowerCase()){for(var f=u.attributes,c=f.length;c--;){var l=f[c].name,a=e[l];if(l===y&&null==e[h]&&null==a||l===_&&(null==a||0===Object.keys(a).length)||l!==y&&l!==_&&null==a)u[x](l);else if(l===_)for(var s=0,v=u.style.length;s<v;s++){var d=u.style[s];a[d]||(u.style[d]=w)}}r=u}else o(),B(r,u,i);else o(),r[T]=!0;else o();for(var m in e){var p=e[m];"children"!==m&&null!=p&&(m===_?S(r,p):N(m)?O(r,m.slice(2).toLowerCase(),p):R(r,m,p))}return r},appendChild:j,removeChild:function(e,n){(n=n||e.parentNode)&&n.removeChild(e)},replaceChild:B,insertAfter:function(e,n,t){t=t||n.parentNode;var r=n.nextSibling;r?r!==e&&H(e,r,t):j(e,t)},insertBefore:H,addEventListener:O,removeEventListener:function(e,n,t){return e.removeEventListener(n,t)},removeAttribute:function(e,n){if(n===i)return e[u]=null;if(n===h&&(n=y),n in e)try{e[n]=null}catch(e){}e[x](n)},setAttribute:R,setStyle:S,beforeRender:function(e){M=e.hydrate},afterRender:function(e){M&&(!function e(n){var t=n.childNodes.length,r=n[a]||0;if(0<t-r)for(var i=t-1;r<=i;i--)n.removeChild(n.childNodes[i]);for(var u=n.childNodes.length-1;0<=u;u--)e(n.childNodes[u])}(e.container),M=!1)},removeChildren:function(e){e.textContent=w}};"undefined"!=typeof module?module.exports=$:self.DriverDOM=$}();
 //# sourceMappingURL=driver-dom.min.js.map

dist/driver-dom.umd.js

@@ -44,2 +44,3 @@ (function (global, factory) {
   var HYDRATION_APPEND = '__a';
+  var DOCUMENT = document;
   var tagNamePrefix = EMPTY; // Flag indicating if the diff is currently within an SVG
@@ -120,3 +121,3 @@
   function createBody() {
-    return document.body;
+    return DOCUMENT.body;
   }
@@ -134,11 +135,11 @@ function createEmpty(component) {
         } else {
-          node = document[CREATE_COMMENT](EMPTY);
+          node = DOCUMENT[CREATE_COMMENT](EMPTY);
           replaceChild(node, hydrationChild, parent);
         }
       } else {
-        node = document[CREATE_COMMENT](EMPTY);
+        node = DOCUMENT[CREATE_COMMENT](EMPTY);
         node[HYDRATION_APPEND] = true;
       }
     } else {
-      node = document[CREATE_COMMENT](EMPTY);
+      node = DOCUMENT[CREATE_COMMENT](EMPTY);
     }
@@ -163,11 +164,11 @@
         } else {
-          node = document[CREATE_TEXT_NODE](text);
+          node = DOCUMENT[CREATE_TEXT_NODE](text);
           replaceChild(node, hydrationChild, parent);
         }
       } else {
-        node = document[CREATE_TEXT_NODE](text);
+        node = DOCUMENT[CREATE_TEXT_NODE](text);
         node[HYDRATION_APPEND] = true;
       }
     } else {
-      node = document[CREATE_TEXT_NODE](text);
+      node = DOCUMENT[CREATE_TEXT_NODE](text);
     }
@@ -188,16 +189,4 @@
   }
-  /**
-   * @param {string} type node type
-   * @param {object} props elemement properties
-   * @param {object} component component instance
-   * @param {boolean} __shouldConvertUnitlessToRpx should add unit when missing
-   * @param {boolean} __shouldConvertRpxToVw should transfrom rpx to vw
-   */
 
-
-  function createElement(type, props, component, __shouldConvertUnitlessToRpx, __shouldConvertRpxToVw) {
-    if (__shouldConvertRpxToVw === void 0) {
-      __shouldConvertRpxToVw = true;
-    }
-
+  function createElement(type, props, component) {
     var parent = component._parent;
@@ -210,9 +199,9 @@ isSVGMode = type === 'svg' || parent && parent.namespaceURI === SVG_NS;
       if (isSVGMode) {
-        node = document.createElementNS(SVG_NS, type);
+        node = DOCUMENT.createElementNS(SVG_NS, type);
       } else if (tagNamePrefix) {
         var _tagNamePrefix = typeof _tagNamePrefix === 'function' ? _tagNamePrefix(type) : _tagNamePrefix;
 
-        node = document[CREATE_ELEMENT](_tagNamePrefix + type);
+        node = DOCUMENT[CREATE_ELEMENT](_tagNamePrefix + type);
       } else {
-        node = document[CREATE_ELEMENT](type);
+        node = DOCUMENT[CREATE_ELEMENT](type);
       }
@@ -270,3 +259,3 @@ }
         if (prop === STYLE) {
-          setStyle(node, value, __shouldConvertUnitlessToRpx, __shouldConvertRpxToVw);
+          setStyle(node, value);
         } else if (isEventProp(prop)) {
@@ -356,14 +345,3 @@ addEventListener(node, prop.slice(2).toLowerCase(), value);
   }
-  /**
-   * @param {object} node target node
-   * @param {object} style target node style value
-   * @param {boolean} __shouldConvertUnitlessToRpx
-   * @param {boolean} __shouldConvertRpxToVw should transfrom rpx to vw
-   */
-
-  function setStyle(node, style, __shouldConvertUnitlessToRpx, __shouldConvertRpxToVw) {
-    if (__shouldConvertRpxToVw === void 0) {
-      __shouldConvertRpxToVw = true;
-    }
-
+  function setStyle(node, style) {
     for (var prop in style) {
@@ -374,14 +352,5 @@ var value = style[prop];
       if (typeof value === 'number' && isDimensionalProp(prop)) {
-        if (__shouldConvertUnitlessToRpx) {
-          convertedValue = value + 'rpx';
-
-          if (__shouldConvertRpxToVw) {
-            // Transfrom rpx to vw
-            convertedValue = convertUnit(convertedValue);
-          }
-        } else {
-          convertedValue = value + 'px';
-        }
+        convertedValue = value + 'px';
       } else {
-        convertedValue = __shouldConvertRpxToVw ? convertUnit(value) : value;
+        convertedValue = convertUnit(value);
       } // Support CSS custom properties (variables) like { --main-color: "black" }
@@ -388,0 +357,0 @@

es/index.js

@@ -235,7 +235,9 @@ /**
             // Remove invalid style prop, and direct reset style to child avoid diff style
-            for (var _i = 0, l = hydrationChild.style.length; _i < l; _i++) {
-              var stylePropName = hydrationChild.style[_i];
+            for (var _i = 0, l = hydrationChild.style.length; 0 < l; l--) {
+              // Prop name get from node style is hyphenated, eg: background-color
+              var stylePropName = hydrationChild.style[l - 1];
+              var camelcasedStyleName = camelcaseStyleName(stylePropName);
 
-              if (!propValue[stylePropName]) {
-                hydrationChild.style[stylePropName] = EMPTY;
+              if (propValue[camelcasedStyleName] != null) {
+                hydrationChild.style[camelcasedStyleName] = EMPTY;
               }
@@ -276,2 +278,14 @@ }
 }
+/**
+ * camelcased CSS property name, for example:
+ * 'backgroundColor'< "background-color"
+ * 'webkitTransition' < "-webkit-transition"
+ */
+
+function camelcaseStyleName(name) {
+  return name.replace(/^-/, '').replace(/-([a-z])/gi, function (s, g) {
+    return g.toUpperCase();
+  });
+}
+
 export function appendChild(node, parent) {
@@ -278,0 +292,0 @@ if (!isHydrating || node[HYDRATION_APPEND]) {

lib/index.js

@@ -268,7 +268,9 @@ "use strict";
             // Remove invalid style prop, and direct reset style to child avoid diff style
-            for (var _i = 0, l = hydrationChild.style.length; _i < l; _i++) {
-              var stylePropName = hydrationChild.style[_i];
+            for (var _i = 0, l = hydrationChild.style.length; 0 < l; l--) {
+              // Prop name get from node style is hyphenated, eg: background-color
+              var stylePropName = hydrationChild.style[l - 1];
+              var camelcasedStyleName = camelcaseStyleName(stylePropName);
 
-              if (!propValue[stylePropName]) {
-                hydrationChild.style[stylePropName] = EMPTY;
+              if (propValue[camelcasedStyleName] != null) {
+                hydrationChild.style[camelcasedStyleName] = EMPTY;
               }
@@ -309,3 +311,15 @@ }
 }
+/**
+ * camelcased CSS property name, for example:
+ * 'backgroundColor'< "background-color"
+ * 'webkitTransition' < "-webkit-transition"
+ */
 
+
+function camelcaseStyleName(name) {
+  return name.replace(/^-/, '').replace(/-([a-z])/gi, function (s, g) {
+    return g.toUpperCase();
+  });
+}
+
 function appendChild(node, parent) {
@@ -312,0 +326,0 @@ if (!isHydrating || node[HYDRATION_APPEND]) {

package.json

 {
   "name": "driver-dom",
-  "version": "2.0.7",
+  "version": "2.0.8-0",
   "description": "DOM driver for Rax",
@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

src/index.js

@@ -229,6 +229,8 @@ /**
             // Remove invalid style prop, and direct reset style to child avoid diff style
-            for (let i = 0, l = hydrationChild.style.length; i < l; i++) {
-              let stylePropName = hydrationChild.style[i];
-              if (!propValue[stylePropName]) {
-                hydrationChild.style[stylePropName] = EMPTY;
+            for (let i = 0, l = hydrationChild.style.length; 0 < l; l--) {
+              // Prop name get from node style is hyphenated, eg: background-color
+              let stylePropName = hydrationChild.style[l - 1];
+              let camelcasedStyleName = camelcaseStyleName(stylePropName);
+              if (propValue[camelcasedStyleName] != null) {
+                hydrationChild.style[camelcasedStyleName] = EMPTY;
               }
@@ -270,2 +272,15 @@ }
 
+/**
+ * camelcased CSS property name, for example:
+ * 'backgroundColor'< "background-color"
+ * 'webkitTransition' < "-webkit-transition"
+ */
+function camelcaseStyleName(name) {
+  return name
+    .replace(/^-/, '')
+    .replace(/-([a-z])/gi, function(s, g) {
+      return g.toUpperCase();
+    });
+}
+
 export function appendChild(node, parent) {
@@ -272,0 +287,0 @@ if (!isHydrating || node[HYDRATION_APPEND]) {

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

175893

decreased by-4.33%

Lines of code

2478

decreased by-1.59%

Number of low quality alerts

1

increased byInfinity%

No dependency changes