path2d-polyfill - npm Package Compare versions

Comparing version 1.2.3 to 2.0.0-beta.0

package.json

 {
   "name": "path2d-polyfill",
-  "version": "1.2.3",
+  "version": "2.0.0-beta.0",
   "description": "Polyfills Path2D api for canvas rendering",
@@ -8,4 +8,7 @@ "scripts": {
     "start": "rollup -c -w",
-    "lint": "eslint src test",
-    "test": "nyc --reporter=html --reporter=text mocha",
+    "lint": "eslint .",
+    "check-types": "tsc --noEmit",
+    "test": "ts-mocha test/*.spec.ts",
+    "test:watch": "ts-mocha --watch test/*.spec.ts",
+    "test:coverage": "nyc --reporter=html --reporter=text --reporter=text-summary yarn test",
     "format:check": "prettier --check \"./**\"",
@@ -16,8 +19,8 @@ "format:write": "prettier --write \"./**\"",
   },
+  "browser": "dist/path2d-polyfill.min.js",
+  "module": "dist/path2d-polyfill.esm.js",
+  "main": "dist/path2d-polyfill.cjs.js",
   "files": [
-    "/dist",
-    "/src"
+    "dist"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
   "repository": {
@@ -39,27 +42,36 @@ "type": "git",
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.4",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@release-it/conventional-changelog": "^5.1.1",
-    "@rollup/plugin-babel": "^6.0.0",
-    "@rollup/plugin-commonjs": "^23.0.0",
-    "chai": "^4.3.6",
-    "eslint": "^8.25.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "mocha": "^10.0.0",
-    "nyc": "^15.1.0",
-    "prettier": "^2.7.1",
-    "release-it": "^15.5.0",
-    "rollup": "^2.79.1",
-    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-serve": "^2.0.1",
-    "rollup-plugin-terser": "7.0.2",
-    "sinon": "^14.0.1",
-    "sinon-chai": "^3.7.0"
+    "@babel/core": "7.20.7",
+    "@babel/preset-env": "7.20.2",
+    "@commitlint/cli": "17.3.0",
+    "@commitlint/config-conventional": "17.3.0",
+    "@release-it/conventional-changelog": "5.1.1",
+    "@rollup/plugin-terser": "0.2.1",
+    "@rollup/plugin-typescript": "10.0.1",
+    "@types/chai": "^4.3.4",
+    "@types/mocha": "^10.0.1",
+    "@types/sinon": "^10.0.13",
+    "@types/sinon-chai": "^3.2.9",
+    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/parser": "5.48.0",
+    "chai": "4.3.7",
+    "eslint": "8.31.0",
+    "eslint-config-prettier": "8.6.0",
+    "husky": "8.0.2",
+    "lint-staged": "13.1.0",
+    "mocha": "10.2.0",
+    "nyc": "15.1.0",
+    "prettier": "2.8.1",
+    "release-it": "15.6.0",
+    "rollup": "3.9.1",
+    "rollup-plugin-livereload": "2.0.5",
+    "rollup-plugin-serve": "2.0.2",
+    "sinon": "15.0.1",
+    "sinon-chai": "3.7.0",
+    "ts-mocha": "^10.0.0",
+    "typescript": "^4.9.4"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "engines": {
+    "node": ">=8"
+  }
 }

README.md

@@ -5,6 +5,4 @@ # path2d-polyfill
 
-Polyfills Path2D api for rendering SVG paths in canvas
+Polyfills `Path2D` api and `roundRect` for CanvasRenderingContext2D
 
-Use this to enable Path2D features in e.g. Internet Explorer.
-
 ## Usage
@@ -27,11 +25,56 @@
 ```javascript
-require("path2d-polyfill");
+import "path2d-polyfill";
 ```
 
-or with es2015+ modules
+This will polyfill the browser's window object with Path2D features and it will also polyfill roundRect if they are missing in both CanvasRenderingContexst and Path2D.
 
+Example of usage
+
 ```javascript
-import "path2d-polyfill";
+ctx.fill(new Path2D("M 80 80 A 45 45 0 0 0 125 125 L 125 80 Z"));
+ctx.stroke(new Path2D("M 80 80 A 45 45 0 0 0 125 125 L 125 80 Z"));
 ```
 
+## Usage in a node environment
+
+It is possible to use this library in a node environment as well. The package exports a few functions that can be used:
+
+- `Path2D` - class to create Path2D objects used by the polyfill methods
+- `polyfillPath2D` - function that adds Path2D to a "window like" object and polyfills CanvasRenderingContext2D to use Path2D
+- `polyfillRoundRect` - polyfills roundRect function on Path2D and CanvasRenderingContext2D (missing in firefox)
+- `parsePath` - function for parsing an SVG path string into canvas commands
+
+use any of these functions like:
+
+```js
+const { polyfillRoundRect } = require "path2d-polyfill";
+
+const windowlike = { CanvasRenderingContext2D, Path2D };
+
+polyfillRoundRect(windowLike);
+// roundRect functions has now been added if they were missing
+```
+
+### usage with node-canvas
+
+To get Path2D features with the [node-canvas library](https://github.com/Automattic/node-canvas) use the following pattern:
+
+```js
+const { createCanvas, CanvasRenderingContext2D } = require("canvas");
+const { polyfillPath2D } = require("path2d-polyfill/path2d");
+
+let polyfilled = { CanvasRenderingContext2D, Path2D: null };
+polyfillPath2D(polyfilled);
+const Path2D = polyfilled.Path2D;
+
+const canvas = createCanvas(200, 200);
+const ctx = canvas.getContext("2d");
+
+const p = new Path2D("M10 10 l 20 0 l 0 20 Z");
+ctx.fillStyle = "green";
+ctx.fill(p);
+```
+
+A working example of a node express server that serves an image drawn with canvas can be seen [here](https://gist.github.com/nilzona/e611c99336d8ea1f645bd391a459c24f)
+
 ## Support table
@@ -51,10 +94,4 @@
 | rect()               |    Yes    |
+| roundRect()          |    Yes    |
 
-Example of usage
-
-```javascript
-ctx.fill(new Path2D("M 80 80 A 45 45 0 0 0 125 125 L 125 80 Z"));
-ctx.stroke(new Path2D("M 80 80 A 45 45 0 0 0 125 125 L 125 80 Z"));
-```
-
 ## See it in action
@@ -61,0 +98,0 @@

New alerts

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

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

Lines of code

1785

increased by71.8%

Number of lines in readme file

108

increased by52.11%

Worsened metrics

Total package byte prevSize

76834

decreased by-27.35%

Dev dependency count

29

increased by26.09%

Number of package files

7

decreased by-36.36%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes