transform-parser - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

index.js

@@ -1,62 +0,79 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    const ignoredKeys = ['scale', 'scale3d', 'scaleX', 'scaleY', 'scaleZ'];
-    const parse = (transformString) => {
-        const transforms = transformString.split(/\) |\)/);
-        if (transforms.length === 1) {
-            return {
-                [transforms[0]]: true,
-            };
-        }
-        const parsePixelValues = (value) => {
-            if (value.endsWith('px'))
-                return parseFloat(value);
-            if (!Number.isNaN(Number(value)))
-                return Number(value);
-            return value;
-        };
-        return transforms.reduce((acc, transform) => {
-            if (!transform)
-                return acc;
-            const [name, transformValue] = transform.split('(');
-            const valueArray = transformValue.split(',');
-            const values = valueArray.map((val) => {
-                return parsePixelValues(val.endsWith(')') ? val.replace(')', '') : val.trim());
-            });
-            const value = values.length === 1 ? values[0] : values;
-            return {
-                ...acc, ...{ [name]: value },
-            };
-        }, {});
-    };
-    exports.parse = parse;
-    const stringify = (transformObject) => {
-        const resolveUnits = (key, val) => {
-            if (typeof val === 'number' && !ignoredKeys.includes(key)) {
-                return `${val}px`;
-            }
-            return val.toString();
-        };
-        return Object.keys(transformObject).reduce((acc, key) => {
-            const value = transformObject[key];
-            if (value === true)
-                return key;
-            if (value === false)
-                return acc;
-            if (Array.isArray(value)) {
-                return `${acc} ${key}(${value.map((val) => resolveUnits(key, val)).join(', ')})`.trim();
-            }
-            return `${acc} ${key}(${resolveUnits(key, value)})`.trim();
-        }, '');
-    };
-    exports.stringify = stringify;
-});
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = global || self, factory(global.transform = {}));
+}(this, function (exports) { 'use strict';
+
+  // List of transforms for which the value has to be numeral. Default px substitution for these
+  // transforms will be skipped.
+  const transformsWithNumeralValues = ['scale', 'scale3d', 'scaleX', 'scaleY', 'scaleZ'];
+  /**
+   * Returns a object representation of the transform string supplied. It parses the string and
+   * converts them to an object.
+   * @param transformString String containing the transforms
+   */
+  const parse = (transformString) => {
+      const transforms = transformString.trim().split(/\) |\)/);
+      // Handle "initial", "inherit", "unset".
+      if (transforms.length === 1) {
+          return {
+              [transforms[0]]: true,
+          };
+      }
+      /**
+       * Converts string values to number when the unit is pixel or parsable. Returns a string when the
+       * unit is not pixel or not parsable.
+       * @param value Value of a transform
+       */
+      const parsePixelValues = (value) => {
+          if (value.endsWith('px'))
+              return parseFloat(value);
+          if (!Number.isNaN(Number(value)))
+              return Number(value);
+          return value;
+      };
+      return transforms.reduce((acc, transform) => {
+          if (!transform)
+              return acc;
+          const [name, transformValue] = transform.split('(');
+          const valueArray = transformValue.split(',');
+          const values = valueArray.map((val) => {
+              return parsePixelValues(val.endsWith(')') ? val.replace(')', '') : val.trim());
+          });
+          const value = values.length === 1 ? values[0] : values;
+          return {
+              ...acc, ...{ [name]: value },
+          };
+      }, {});
+  };
+  /**
+   * Returns the transform string constructed from the transform object supplied.
+   * @param transformObject Object containing the transforms
+   */
+  const stringify = (transformObject) => {
+      const resolveUnits = (key, val) => {
+          if (typeof val === 'number' && !transformsWithNumeralValues.includes(key)) {
+              return `${val}px`;
+          }
+          return val.toString();
+      };
+      return Object.keys(transformObject).reduce((acc, key) => {
+          const value = transformObject[key];
+          if (value === true)
+              return key;
+          if (value === false)
+              return acc;
+          if (Array.isArray(value)) {
+              return `${acc} ${key}(${value.map((val) => resolveUnits(key, val)).join(', ')})`;
+          }
+          return `${acc} ${key}(${resolveUnits(key, value)})`;
+      }, '')
+          .trim();
+  };
+
+  exports.parse = parse;
+  exports.stringify = stringify;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package.json

 {
   "name": "transform-parser",
-  "version": "1.0.0",
-  "description": "Parses css transform string and returns an transform object using vanilla JS",
-  "main": "index.js",
+  "version": "1.0.1",
+  "description": "Converts css transform string to an object and vice versa",
+  "main": "index",
+  "typings": "index",
   "repository": "https://github.com/praneshr/transform-parser.git",
@@ -23,11 +24,14 @@ "author": "Pranesh Ravi <[e-mail]>",
     "mocha": "^6.2.0",
+    "rollup": "^1.20.2",
+    "rollup-plugin-typescript2": "^0.23.0",
     "ts-node": "^8.3.0",
+    "tslib": "^1.10.0",
     "typescript": "^3.5.3"
   },
   "scripts": {
-    "build": "tsc",
-    "build:watch": "tsc -w",
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
     "test": "mocha -r ts-node/register test/*.ts",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build && yarn test"
   }
 }

README.md

@@ -1,2 +0,56 @@
-# transform-parser
-Parses css transform string and returns an transform object using vanilla JS
+# Transform Parser
+
+A small utility which converts css transform string to an object and vice versa.
+
+## Install
+
+```bash
+npm i transform-parser
+
+# or
+
+yarn add transform-parser
+```
+
+You can also add`transform-parser` directly to your webpage and use it. The package will be available
+under `window.transform`.
+
+```html
+<script src="https://unpkg.com/transform-parser"></script>
+```
+
+## Usage
+
+Like React, the default unit is px(pixel). When a number is passed as value, it will be suffixed
+with `px` and vice verse. Of course, the substitution will be skipped for transforms which requires
+numeral values, like `scale3d()`.
+
+```javascript
+import { parse, stringify } from 'transform-parser';
+const transformString =
+	'translate3d(10px, 40px, 24px) scale3d(1.1, 1.1, 1.1) perspective(20px)';
+
+parse(transformString);
+// => {translate3d: [10, 40, 24], scale3d(1.1, 1.1, 1.1), perspective: 20}
+
+const transformObject = {
+	rotate3d: [1, 2.0, 3.0, '10deg'],
+	scale3d: [1.1, 1.1, 1.1],
+	skewX: '30deg',
+};
+
+stringify(transformObject);
+// => 'rotate3d(1, 2.0, 3.0, 10deg) scale3d(1.1, 1.1, 1.1) skewX(30deg)'
+```
+
+## Local Development
+
+```bash
+yarn install
+yarn build
+yarn test
+```
+
+## License
+
+MIT

tsconfig.json

@@ -5,4 +5,3 @@ {
     "target": "esnext",
-    "module": "umd",
-    "allowUmdGlobalAccess": true,
+    "declaration": true,
   },
@@ -9,0 +8,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

21302

increased by309.97%

Number of package files

54

increased by800%

Lines of code

175

increased by139.73%

Number of lines in readme file

57

increased by1800%

Worsened metrics

Dev dependency count

17

increased by21.43%

No dependency changes