style-unit - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

lib/index.js

@@ -8,10 +8,32 @@ "use strict";
 exports.setRpx = setRpx;
+exports.getViewportWidth = getViewportWidth;
+exports.setViewportWidth = setViewportWidth;
 exports.setDecimalPixelTransformer = setDecimalPixelTransformer;
 exports.convertUnit = convertUnit;
+
+var _universalEnv = require("universal-env");
+
 var RPX_REG = /[-+]?\d*\.?\d+rpx/g;
-var GLOBAL_RPX_UNIT = '__rpx_coefficient__';
-var global = typeof window === 'object' ? window : typeof global === 'object' ? global : {}; // Dedault decimal transformer.
+var GLOBAL_RPX_COEFFICIENT = '__rpx_coefficient__';
+var GLOBAL_VIEWPORT_WIDTH = '__viewport_width__';
+var global = typeof window === 'object' ? window : typeof global === 'object' ? global : {}; // convertUnit method targetPlatform
 
+var targetPlatform = _universalEnv.isWeb ? 'web' : _universalEnv.isWeex ? 'weex' : ''; // Init toFixed method
+
+var unitPrecision = 4;
+
+var toFixed = function toFixed(number, precision) {
+  var multiplier = Math.pow(10, precision + 1);
+  var wholeNumber = Math.floor(number * multiplier);
+  return Math.round(wholeNumber / 10) * 10 / multiplier;
+}; // Dedault decimal px transformer.
+
+
 var decimalPixelTransformer = function decimalPixelTransformer(rpx) {
   return parseFloat(rpx) * getRpx() + 'px';
+}; // Default decimal vw transformer.
+
+
+var decimalVWTransformer = function decimalVWTransformer(rpx) {
+  return toFixed(parseFloat(rpx) / (getViewportWidth() / 100), unitPrecision) + 'vw';
 }; // Default 1 rpx to 1 px
@@ -22,2 +44,7 @@
   setRpx(1);
+} // Viewport width, default to 750.
+
+
+if (getViewportWidth() === undefined) {
+  setViewportWidth(750);
 }
@@ -36,3 +63,3 @@ /**
 /**
- * Calculate rpx to pixels: '1.2rpx' => 1.2 * rpx
+ * Calculate rpx
  * @param {String} str
@@ -44,12 +71,32 @@ * @returns {String}
 function calcRpx(str) {
-  return str.replace(RPX_REG, decimalPixelTransformer);
+  if (targetPlatform === 'web') {
+    // In Web convert rpx to 'vw', same as driver-dom and driver-universal
+    // '375rpx' => '50vw'
+    return str.replace(RPX_REG, decimalVWTransformer);
+  } else if (targetPlatform === 'weex') {
+    // In Weex convert rpx to 'px'
+    // '375rpx' => 375 * rpx
+    return str.replace(RPX_REG, decimalPixelTransformer);
+  } else {
+    // Other platform return original value, like Mini-App and WX Mini-Program ...
+    // '375rpx' => '375rpx'
+    return str;
+  }
 }
 
 function getRpx() {
-  return global[GLOBAL_RPX_UNIT];
+  return global[GLOBAL_RPX_COEFFICIENT];
 }
 
 function setRpx(rpx) {
-  global[GLOBAL_RPX_UNIT] = rpx;
+  global[GLOBAL_RPX_COEFFICIENT] = rpx;
 }
+
+function getViewportWidth() {
+  return global[GLOBAL_VIEWPORT_WIDTH];
+}
+
+function setViewportWidth(viewport) {
+  global[GLOBAL_VIEWPORT_WIDTH] = viewport;
+}
 /**
@@ -71,9 +118,15 @@ * Set a function to transform unit of pixel,
  * @param prop
+ * @param platform
  * @return {String} Transformed value.
  */
 
-function convertUnit(value, prop) {
+function convertUnit(value, prop, platform) {
   var cacheKey = prop + "-" + value;
   var hit = cache[cacheKey];
 
+  if (platform) {
+    cacheKey += "-" + platform;
+    targetPlatform = platform;
+  }
+
   if (hit) {
@@ -80,0 +133,0 @@ return hit;

package.json

 {
   "name": "style-unit",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "style-unit",
@@ -17,3 +17,6 @@ "license": "BSD-3-Clause",
   },
-  "homepage": "https://github.com/alibaba/rax#readme"
+  "homepage": "https://github.com/alibaba/rax#readme",
+  "dependencies": {
+    "universal-env": "^2.0.0"
+  }
 }

README.md

 # style-unit
 
-> style-unit
+> Unit conversion for calculating dimensional css attributes, especially for rpx.
+
+## API
+
+convertUnit(value, prop, platform);
+
+| Property | Type          | Required | Description                                                  |
+| -------- | ------------- | -------- | ------------------------------------------------------------ |
+| value    | string/number | true     |                                                              |
+| prop     | string        | true     |                                                              |
+| platform | string        | false    | Different platforms have different rpx conversion. Details are as follows. |
+
+## Web 
+
+In Web, Calculate rpx to vw (relative to viewport width 750). 
+
+750rpx -> 100vw
+
+### setViewportWidth
+
+You can use `setViewportWidth` method update viewport width
+
+setViewportWidth(1500);
+
+750rpx -> 50vw
+
+
+## Weex 
+
+In Web, Calculate rpx to px (viewport width is 750). 
+
+750rpx -> 750px
+
+### setRpx
+
+You can use `setRpx` method update coefficient of 750
+
+setRpx(1500 / 750)
+
+750rpx -> 1500px
+
+## MiniApp
+
+rpx (responsive pixel): Adaptable to the screen width in MiniApp. The specified screen width is 750 rpx. If the screen width on iPhone6 is 375 px (750 physical pixels), then 750 rpx = 375 px = 750 physical pixels, i.e. 1 rpx = 0.5 px = 1 physical pixel.
+
+## Node.js
+
+Use Weex result:
+```
+convertUnit('500rpx', 'width', 'weex')
+```
+Use Web result:
+```
+convertUnit('500rpx', 'width', 'web')
+```

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

5206

increased by144.76%

Lines of code

104

increased by62.5%

Number of lines in readme file

57

increased by1325%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeduniversal-env@^2.0.0

• + Addeduniversal-env@2.0.0(transitive)