driver-dom - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/driver-dom.js

@@ -10,2 +10,4 @@ (function (global, factory) {
    **/
+  var IS_RPX_REG = /\d+rpx/;
+  var RPX_REG = /[-+]?\d*\.?\d+(rpx)/g;
   var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
@@ -43,2 +45,5 @@ var CLASS_NAME = 'className';
     fontWeight: TRUE,
+    // Main-stream browsers(like chrome) will not remove webkit prefix in the short term.
+    // ref: CSSOM webkit-based attribute: https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit-cased-attribute
+    webkitLineClamp: TRUE,
     lineClamp: TRUE,
@@ -58,2 +63,39 @@ lineHeight: TRUE,
   var isHydrating = false;
+  var viewportWidth = 750;
+  var unitPrecision = 4;
+  /**
+   * Set viewport width.
+   * @param viewport {Number} Viewport width, default to 750.
+   */
+
+  function setViewportWidth(viewport) {
+    viewportWidth = viewport;
+  }
+  /**
+   * Set unit precision.
+   * @param n {Number} Unit precision, default to 4.
+   */
+
+  function setUnitPrecision(n) {
+    unitPrecision = n;
+  }
+
+  function unitTransformer(n) {
+    return toFixed(parseFloat(n) / (viewportWidth / 100), unitPrecision) + 'vw';
+  }
+
+  function toFixed(number, precision) {
+    var multiplier = Math.pow(10, precision + 1);
+    var wholeNumber = Math.floor(number * multiplier);
+    return Math.round(wholeNumber / 10) * 10 / multiplier;
+  }
+
+  function calcRpxToVw(value) {
+    return value.replace(RPX_REG, unitTransformer);
+  }
+
+  function convertUnit(value) {
+    return IS_RPX_REG.test(value) ? calcRpxToVw(value) : value;
+  }
+
   function setTagNamePrefix(prefix) {
@@ -296,3 +338,3 @@ tagNamePrefix = prefix;
       var propValue = style[prop];
-      nodeStyle[prop] = typeof propValue === 'number' && !UNITLESS_NUMBER_PROPS[prop] ? propValue + 'px' : propValue;
+      nodeStyle[prop] = typeof propValue === 'number' && !UNITLESS_NUMBER_PROPS[prop] ? propValue + 'px' : convertUnit(propValue);
     }
@@ -307,3 +349,3 @@ }
     var nativeLength = hydrationParent.childNodes.length;
-    var vdomLength = hydrationParent[HYDRATION_INDEX];
+    var vdomLength = hydrationParent[HYDRATION_INDEX] || 0;
 
@@ -331,2 +373,4 @@ if (nativeLength - vdomLength > 0) {
 
+  exports.setViewportWidth = setViewportWidth;
+  exports.setUnitPrecision = setUnitPrecision;
   exports.setTagNamePrefix = setTagNamePrefix;
@@ -333,0 +377,0 @@ exports.createBody = createBody;

dist/driver-dom.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).DriverDOM={})}(this,function(e){"use strict";var o="dangerouslySetInnerHTML",p="className",h="class",x="style",i="textContent",y=/^on[A-Z]/,b="http://www.w3.org/2000/svg",t=!0,l="__i",g="__a",a={animationIterationCount:t,borderImageOutset:t,borderImageSlice:t,borderImageWidth:t,boxFlex:t,boxFlexGroup:t,boxOrdinalGroup:t,columnCount:t,flex:t,flexGrow:t,flexPositive:t,flexShrink:t,flexNegative:t,flexOrder:t,gridRow:t,gridColumn:t,fontWeight:t,lineClamp:t,lineHeight:t,opacity:t,order:t,orphans:t,tabSize:t,widows:t,zIndex:t,zoom:t},C="",N=!1,T=!1;function _(e){return null==e[l]&&(e[l]=0),e.childNodes[e[l]++]}function u(e,t){if(!T||e[g])return t.appendChild(e)}function w(e,t,n){(n=n||t.parentNode).replaceChild(e,t)}function f(e,t,n){(n=n||t.parentNode).insertBefore(e,t)}function L(e,t,n){return e.addEventListener(t,n)}function E(t,n,r){if(n===o){var e=r.__html;if(t.innerHTML!==e)return t.innerHTML=e}if(n===p&&(n=h),n in t)try{t[n]=r}catch(e){t.setAttribute(n,r)}else t.setAttribute(n,r)}function A(e,t){var n=e.style;for(var r in t){var o=t[r];n[r]="number"!=typeof o||a[r]?o:o+"px"}}e.setTagNamePrefix=function(e){C=e},e.createBody=function(){return document.body},e.createEmpty=function(e){var t,n=e._parent;if(T){var r=_(n);if(r){if(8===r.nodeType)return r;w(t=document.createComment(""),r,n)}else(t=document.createComment(""))[g]=!0}else t=document.createComment("");return t},e.createText=function(e,t){var n,r=t._parent;if(T){var o=_(r);if(o){if(3===o.nodeType)return e!==o[i]&&(o[i]=e),o;w(n=document.createTextNode(e),o,r)}else(n=document.createTextNode(e))[g]=!0}else n=document.createTextNode(e);return n},e.updateText=function(e,t){e[i]=t},e.createElement=function(t,e,n){var r,o=n._parent;N="svg"===t||o&&o.namespaceURI===b;var i=null;function l(){if(N)r=document.createElementNS(b,t);else if(C){var e="function"==typeof e?e(t):e;r=document.createElement(e+t)}else r=document.createElement(t)}if(T)if(i=_(o))if(t===i.nodeName.toLowerCase()){for(var a=i.attributes,u=a.length;u--;){var f=a[u].name,c=e[f];if(f===h&&null==e[p]&&null==c||f===x&&(null==c||0===Object.keys(c).length)||f!==h&&f!==x&&null==c)i.removeAttribute(f);else if(f===x)for(var d=0;d<i.style.length;d++){var s=i.style[d];c[s]||(i.style[s]="")}}r=i}else l(),w(r,i,o);else l(),r[g]=!0;else l();for(var m in e){var v=e[m];"children"!==m&&null!=v&&(m===x?A(r,v):y.test(m)?L(r,m.slice(2).toLowerCase(),v):E(r,m,v))}return r},e.appendChild=u,e.removeChild=function(e,t){(t=t||e.parentNode)&&t.removeChild(e)},e.replaceChild=w,e.insertAfter=function(e,t,n){n=n||t.parentNode;var r=t.nextSibling;r?r!==e&&f(e,r,n):u(e,n)},e.insertBefore=f,e.addEventListener=L,e.removeEventListener=function(e,t,n){return e.removeEventListener(t,n)},e.removeAttribute=function(e,t){if(t===o)return e.innerHTML=null;if(t===p&&(t=h),t in e)try{e[t]=null}catch(e){}e.removeAttribute(t)},e.setAttribute=E,e.setStyle=A,e.beforeRender=function(e){T=e.hydrate},e.afterRender=function(e){T&&(function e(t){var n=t.childNodes.length,r=t[l];if(0<n-r)for(var o=n-1;r<=o;o--)t.removeChild(t.childNodes[o]);for(var i=t.childNodes.length-1;0<=i;i--)e(t.childNodes[i])}(e.container),T=!1)},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).DriverDOM={})}(this,function(e){"use strict";var t=/\d+rpx/,n=/[-+]?\d*\.?\d+(rpx)/g,o="dangerouslySetInnerHTML",p="className",h="class",x="style",i="textContent",y=/^on[A-Z]/,b="http://www.w3.org/2000/svg",r=!0,a="__i",g="__a",l={animationIterationCount:r,borderImageOutset:r,borderImageSlice:r,borderImageWidth:r,boxFlex:r,boxFlexGroup:r,boxOrdinalGroup:r,columnCount:r,flex:r,flexGrow:r,flexPositive:r,flexShrink:r,flexNegative:r,flexOrder:r,gridRow:r,gridColumn:r,fontWeight:r,webkitLineClamp:r,lineClamp:r,lineHeight:r,opacity:r,order:r,orphans:r,tabSize:r,widows:r,zIndex:r,zoom:r},C="",N=!1,w=!1,u=750,f=4;function c(e){return 10*Math.round(Math.floor(parseFloat(e)/(u/100)*(t=Math.pow(10,f+1)))/10)/t+"vw";var t}function d(e){return t.test(e)?e.replace(n,c):e}function T(e){return null==e[a]&&(e[a]=0),e.childNodes[e[a]++]}function s(e,t){if(!w||e[g])return t.appendChild(e)}function L(e,t,n){(n=n||t.parentNode).replaceChild(e,t)}function m(e,t,n){(n=n||t.parentNode).insertBefore(e,t)}function _(e,t,n){return e.addEventListener(t,n)}function E(t,n,r){if(n===o){var e=r.__html;if(t.innerHTML!==e)return t.innerHTML=e}if(n===p&&(n=h),n in t)try{t[n]=r}catch(e){t.setAttribute(n,r)}else t.setAttribute(n,r)}function M(e,t){var n=e.style;for(var r in t){var o=t[r];n[r]="number"!=typeof o||l[r]?d(o):o+"px"}}e.setViewportWidth=function(e){u=e},e.setUnitPrecision=function(e){f=e},e.setTagNamePrefix=function(e){C=e},e.createBody=function(){return document.body},e.createEmpty=function(e){var t,n=e._parent;if(w){var r=T(n);if(r){if(8===r.nodeType)return r;L(t=document.createComment(""),r,n)}else(t=document.createComment(""))[g]=!0}else t=document.createComment("");return t},e.createText=function(e,t){var n,r=t._parent;if(w){var o=T(r);if(o){if(3===o.nodeType)return e!==o[i]&&(o[i]=e),o;L(n=document.createTextNode(e),o,r)}else(n=document.createTextNode(e))[g]=!0}else n=document.createTextNode(e);return n},e.updateText=function(e,t){e[i]=t},e.createElement=function(t,e,n){var r,o=n._parent;N="svg"===t||o&&o.namespaceURI===b;var i=null;function a(){if(N)r=document.createElementNS(b,t);else if(C){var e="function"==typeof e?e(t):e;r=document.createElement(e+t)}else r=document.createElement(t)}if(w)if(i=T(o))if(t===i.nodeName.toLowerCase()){for(var l=i.attributes,u=l.length;u--;){var f=l[u].name,c=e[f];if(f===h&&null==e[p]&&null==c||f===x&&(null==c||0===Object.keys(c).length)||f!==h&&f!==x&&null==c)i.removeAttribute(f);else if(f===x)for(var d=0;d<i.style.length;d++){var s=i.style[d];c[s]||(i.style[s]="")}}r=i}else a(),L(r,i,o);else a(),r[g]=!0;else a();for(var m in e){var v=e[m];"children"!==m&&null!=v&&(m===x?M(r,v):y.test(m)?_(r,m.slice(2).toLowerCase(),v):E(r,m,v))}return r},e.appendChild=s,e.removeChild=function(e,t){(t=t||e.parentNode)&&t.removeChild(e)},e.replaceChild=L,e.insertAfter=function(e,t,n){n=n||t.parentNode;var r=t.nextSibling;r?r!==e&&m(e,r,n):s(e,n)},e.insertBefore=m,e.addEventListener=_,e.removeEventListener=function(e,t,n){return e.removeEventListener(t,n)},e.removeAttribute=function(e,t){if(t===o)return e.innerHTML=null;if(t===p&&(t=h),t in e)try{e[t]=null}catch(e){}e.removeAttribute(t)},e.setAttribute=E,e.setStyle=M,e.beforeRender=function(e){w=e.hydrate},e.afterRender=function(e){w&&(function e(t){var n=t.childNodes.length,r=t[a]||0;if(0<n-r)for(var o=n-1;r<=o;o--)t.removeChild(t.childNodes[o]);for(var i=t.childNodes.length-1;0<=i;i--)e(t.childNodes[i])}(e.container),w=!1)},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=driver-dom.min.js.map

lib/index.js

 "use strict";
 
 exports.__esModule = true;
+exports.setViewportWidth = setViewportWidth;
+exports.setUnitPrecision = setUnitPrecision;
 exports.setTagNamePrefix = setTagNamePrefix;
@@ -26,2 +28,4 @@ exports.createBody = createBody;
  **/
+var IS_RPX_REG = /\d+rpx/;
+var RPX_REG = /[-+]?\d*\.?\d+(rpx)/g;
 var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
@@ -59,2 +63,5 @@ var CLASS_NAME = 'className';
   fontWeight: TRUE,
+  // Main-stream browsers(like chrome) will not remove webkit prefix in the short term.
+  // ref: CSSOM webkit-based attribute: https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit-cased-attribute
+  webkitLineClamp: TRUE,
   lineClamp: TRUE,
@@ -74,3 +81,40 @@ lineHeight: TRUE,
 var isHydrating = false;
+var viewportWidth = 750;
+var unitPrecision = 4;
+/**
+ * Set viewport width.
+ * @param viewport {Number} Viewport width, default to 750.
+ */
 
+function setViewportWidth(viewport) {
+  viewportWidth = viewport;
+}
+/**
+ * Set unit precision.
+ * @param n {Number} Unit precision, default to 4.
+ */
+
+
+function setUnitPrecision(n) {
+  unitPrecision = n;
+}
+
+function unitTransformer(n) {
+  return toFixed(parseFloat(n) / (viewportWidth / 100), unitPrecision) + 'vw';
+}
+
+function toFixed(number, precision) {
+  var multiplier = Math.pow(10, precision + 1);
+  var wholeNumber = Math.floor(number * multiplier);
+  return Math.round(wholeNumber / 10) * 10 / multiplier;
+}
+
+function calcRpxToVw(value) {
+  return value.replace(RPX_REG, unitTransformer);
+}
+
+function convertUnit(value) {
+  return IS_RPX_REG.test(value) ? calcRpxToVw(value) : value;
+}
+
 function setTagNamePrefix(prefix) {
@@ -327,3 +371,3 @@ tagNamePrefix = prefix;
     var propValue = style[prop];
-    nodeStyle[prop] = typeof propValue === 'number' && !UNITLESS_NUMBER_PROPS[prop] ? propValue + 'px' : propValue;
+    nodeStyle[prop] = typeof propValue === 'number' && !UNITLESS_NUMBER_PROPS[prop] ? propValue + 'px' : convertUnit(propValue);
   }
@@ -339,3 +383,3 @@ }
   var nativeLength = hydrationParent.childNodes.length;
-  var vdomLength = hydrationParent[HYDRATION_INDEX];
+  var vdomLength = hydrationParent[HYDRATION_INDEX] || 0;
 
@@ -342,0 +386,0 @@ if (nativeLength - vdomLength > 0) {

package.json

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

src/index.js

 /**
  * Driver for Web DOM
  **/
+const IS_RPX_REG = /\d+rpx/;
+const RPX_REG = /[-+]?\d*\.?\d+(rpx)/g;
 const DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
@@ -36,2 +38,5 @@ const CLASS_NAME = 'className';
   fontWeight: TRUE,
+  // Main-stream browsers(like chrome) will not remove webkit prefix in the short term.
+  // ref: CSSOM webkit-based attribute: https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit-cased-attribute
+  webkitLineClamp: TRUE,
   lineClamp: TRUE,
@@ -52,3 +57,42 @@ lineHeight: TRUE,
 let isHydrating = false;
+let viewportWidth = 750;
+let unitPrecision = 4;
 
+/**
+ * Set viewport width.
+ * @param viewport {Number} Viewport width, default to 750.
+ */
+export function setViewportWidth(viewport) {
+  viewportWidth = viewport;
+}
+
+/**
+ * Set unit precision.
+ * @param n {Number} Unit precision, default to 4.
+ */
+export function setUnitPrecision(n) {
+  unitPrecision = n;
+}
+
+function unitTransformer(n) {
+  return toFixed(parseFloat(n) / (viewportWidth / 100), unitPrecision) + 'vw';
+}
+
+function toFixed(number, precision) {
+  const multiplier = Math.pow(10, precision + 1);
+  const wholeNumber = Math.floor(number * multiplier);
+
+  return Math.round(wholeNumber / 10) * 10 / multiplier;
+}
+
+function calcRpxToVw(value) {
+  return value.replace(RPX_REG, unitTransformer);
+}
+
+function convertUnit(value) {
+  return IS_RPX_REG.test(value)
+    ? calcRpxToVw(value)
+    : value;
+}
+
 export function setTagNamePrefix(prefix) {
@@ -130,3 +174,2 @@ tagNamePrefix = prefix;
   isSVGMode = type === 'svg' || parent && parent.namespaceURI === SVG_NS;
-
   let node;
@@ -301,6 +344,8 @@ let hydrationChild = null;
 export function setStyle(node, style) {
-  let nodeStyle = node.style;
+  const nodeStyle = node.style;
   for (let prop in style) {
-    let propValue = style[prop];
-    nodeStyle[prop] = typeof propValue === 'number' && !UNITLESS_NUMBER_PROPS[prop] ? propValue + 'px' : propValue;
+    const propValue = style[prop];
+    nodeStyle[prop] = typeof propValue === 'number' && !UNITLESS_NUMBER_PROPS[prop]
+      ? propValue + 'px'
+      : convertUnit(propValue);
   }
@@ -315,3 +360,3 @@ }
   const nativeLength = hydrationParent.childNodes.length;
-  const vdomLength = hydrationParent[HYDRATION_INDEX];
+  const vdomLength = hydrationParent[HYDRATION_INDEX] || 0;
   if (nativeLength - vdomLength > 0) {
@@ -318,0 +363,0 @@ for (let i = nativeLength - 1; i >= vdomLength; i-- ) {

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

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

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

105903

increased by10.06%

Lines of code

1366

increased by3.96%

Worsened metrics

Number of package files

11

decreased by-8.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes