svg-path-properties - npm Package Compare versions

Comparing version 0.5.2 to 1.0.0

package.json

 {
   "name": "svg-path-properties",
-  "version": "0.5.2",
+  "version": "1.0.0",
   "description": "Calculate the length for an SVG path, to use it with node or a Canvas element",
@@ -13,5 +13,6 @@ "keywords": [
   "homepage": "http://geoexamples.com/path-properties/",
-  "main": "build/path-properties.js",
-  "types": "./path-properties.d.ts",
-  "jsnext:main": "index",
+  "main": "dist/svg-path-properties.cjs.js",
+  "module": "dist/svg-path-properties.esm.js",
+  "browser": "dist/svg-path-properties.min.js",
+  "types": "dist/types/index.d.ts",
   "repository": {
@@ -22,7 +23,10 @@ "type": "git",
   "scripts": {
-    "pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -f umd -n spp -o build/path-properties.js -- index.js",
-    "test": "tape 'test/*-test.js' && eslint index.js src",
-    "postpublish": "git push && git push --tags",
-    "preversion": "npm run uglify && git add build && git commit --allow-empty -am \"new version\"",
-    "uglify": "uglifyjs --preamble \"$(preamble)\" build/path-properties.js -c -m -o build/path-properties.min.js"
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:js": "rollup -c",
+    "build": "npm run build:types && npm run build:js",
+    "test": "ts-node --skip-project node_modules/tape/bin/tape test/**/*-test.ts",
+    "preversion": "npm run build && git add dist && git commit --allow-empty -am \"new version\"",
+    "postpublish": "git push && git push --tags"
   },
@@ -36,8 +40,20 @@ "author": {
   "devDependencies": {
-    "eslint": "^6.1.0",
-    "package-preamble": "0.1.0",
-    "rollup": "1.14",
-    "tape": "4.10",
-    "uglify-js": "3.6"
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-typescript": "^7.7.2",
+    "@types/tape": "^4.2.33",
+    "babel6-plugin-strip-class-callcheck": "^6.0.0",
+    "eslint": "^6.6.0",
+    "prettier": "^1.19.1",
+    "rollup": "^1.27.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.2",
+    "tape": "^4.11.0",
+    "ts-node": "^8.5.2",
+    "typescript": "^3.7.2"
   }
 }

README.md

@@ -5,31 +5,65 @@ [![Build Status](https://travis-ci.org/rveciana/svg-path-properties.svg?branch=master)](https://travis-ci.org/rveciana/svg-path-properties)
 # svg-path-properties
-Pure Javascript alternative to getPointAtLength(t) and getTotalLength() functions. Works with Canvas and Node
 
+Pure Javascript alternative to getPointAtLength(t) and getTotalLength() functions. Works with Canvas objects and when Node
+
 JavaScript can access to path elements properties in a browser, such as its length and the point at a given length. Unfortunately, this can't be achieved using a Canvas element or when working with node. This library can be used to replace this need. It has no dependencies on other JavaScript libraries.
 
-INSTALL
-=======
+# INSTALL
 
 To use with npm, just type
 
-  npm install svg-path-properties
+    npm install svg-path-properties
 
-USAGE
-=====
+You can use it int he browser directly by including _svg-path-properties.min.js_ from the dist directory
 
-    var path = require("svg-path-properties");
-    var properties = path.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
-    var length = properties.getTotalLength();
-    var point = properties.getPointAtLength(200);
-    var tangent = properties.getTangentAtLength(200);
-    var allProperties = properties.getPropertiesAtLength(200);
-    var parts = properties.getParts(); --> Gets an array with the different sections of the path, each element containing the initial and final points, the length and the curve function
+    <script src="svg-path-properties.min.js"></script>
 
-[Check this block](http://bl.ocks.org/rveciana/209fa7efeb01f05fa4a544a76ac8ed91) to see how it works with the browser.
+# USAGE
 
-The TypeScript declaration file is available too, since version 0.5
+The available methods are:
 
-CREDITS
-=======
+    const path = require("svg-path-properties");
+    const properties = new path.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
+    const length = properties.getTotalLength();
+    const point = properties.getPointAtLength(200);
+    const tangent = properties.getTangentAtLength(200);
+    const allProperties = properties.getPropertiesAtLength(200);
+    const parts = properties.getParts();
 
+## Node:
+
+    const path = require("svg-path-properties");
+    const properties = new path.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
+
+## Including it from an import:
+
+    import { svgPathProperties } from "../src/index";
+    const properties = new svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
+
+## Including the script in the browser
+
+Once the _script_ tag has been included,
+
+    const properties = new svgPathProperties.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
+
+## Using _new_
+
+Since _svgPathProperties_ is a class, using _new_ is the correct way to initilize it. For backwards compatibility reasons, the object can be get without it:
+
+    const properties = svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
+
+# Some usage examples
+
+- [Drawing an animated path](http://bl.ocks.org/rveciana/209fa7efeb01f05fa4a544a76ac8ed91)
+- [Label positioning](http://bl.ocks.org/rveciana/bef48021e38a77a520109d2088bff9eb)
+- [Drawing stramlines arrows](http://bl.ocks.org/rveciana/edb1dd43f3edc5d16ecaf4839c032dec)
+- [Using it to get a length when in node instead of the browser](https://github.com/veltman/flubber/blob/master/src/svg.js), as in the [Flubber library](https://github.com/veltman/flubber)
+- [SVG animations in React Native](https://bitbucket.org/ingenuityph/react-native-svg-animations/src/master/)
+
+# Typescript
+
+The TypeScript declaration file is available too, since version 0.5.0 From version 1.0.0, the whole library has been rewritten using TypeScript, and the types are auto-generated.
+
+# CREDITS
+
 Some parts of the code are taken from other libraries or questions at StackOverflow:
@@ -39,9 +73,9 @@
 
-* http://bl.ocks.org/hnakamur/e7efd0602bfc15f66fc5, https://gist.github.com/tunght13488/6744e77c242cc7a94859
-* http://stackoverflow.com/questions/11854907/calculate-the-length-of-a-segment-of-a-quadratic-bezier
-* http://pomax.github.io/bezierinfo
-* Arc elements calculation: https://github.com/MadLittleMods/svg-curve-lib/tree/f07d6008a673816f4cb74a3269164b430c3a95cb
+- http://bl.ocks.org/hnakamur/e7efd0602bfc15f66fc5, https://gist.github.com/tunght13488/6744e77c242cc7a94859
+- http://stackoverflow.com/questions/11854907/calculate-the-length-of-a-segment-of-a-quadratic-bezier
+- http://pomax.github.io/bezierinfo
+- Arc elements calculation: https://github.com/MadLittleMods/svg-curve-lib/tree/f07d6008a673816f4cb74a3269164b430c3a95cb
 
 For path parsing:
 
-* https://github.com/jkroso/parse-svg-path
+- https://github.com/jkroso/parse-svg-path

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

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

Improved metrics

Total package byte prevSize

196853

increased by72.83%

Number of package files

40

increased by185.71%

Lines of code

3345

increased by101.63%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

80

increased by73.91%

Worsened metrics

Dev dependency count

17

increased by240%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes