feat: esm and cjs builds for node and browser

.gitignore

@@ -2,4 +2,5 @@
 /node_modules/
 playground/
 .vscode
-coverage
+coverage
+lib

.nvmrc

@@ -0,0 +1 @@
+18

package.json

@@ -2,25 +2,57 @@
     "name": "png-js",
     "description": "A PNG decoder in JavaScript",
     "version": "1.0.0",
+    "type": "module",
+    "main": "./lib/png-js.cjs",
+    "module": "./lib/png-js.js",
+    "browser": {
+        "./lib/png-js.js": "./lib/png-js.browser.js",
+        "./lib/png-js.cjs": "./lib/png-js.browser.cjs"
+    },
+    "exports": {
+        ".": {
+            "node": {
+                "import": "./lib/png-js.js",
+                "require": "./lib/png-js.cjs"
+            },
+            "import": "./lib/png-js.browser.js",
+            "require": "./lib/png-js.browser.cjs"
+        }
+    },
     "author": {
         "name": "Devon Govett",
         "email": "[email protected]",
         "url": "http://badassjs.com/"
     },
+    "files": [
+        "lib",
+        "png.js",
+        "LICENSE",
+        "README.md"
+    ],
     "repository": {
         "type": "git",
         "url": "https://github.com/devongovett/png.js.git"
     },
     "bugs": "http://github.com/devongovett/png.js/issues",
+    "dependencies": {
+        "browserify-zlib": "^0.2.0"
+    },
     "devDependencies": {
-        "jest": "^24.1.0",
-        "prettier": "^1.16.4"
+        "@rollup/plugin-alias": "5.1.0",
+        "@rollup/plugin-node-resolve": "15.2.0",
+        "@rollup/plugin-replace": "5.0.0",
+        "jest": "24.1.0",
+        "prettier": "1.16.4",
+        "rimraf": "2.6.3",
+        "rollup": "4.9.0",
+        "rollup-plugin-ignore": "1.0.10"
     },
     "scripts": {
-        "test": "jest",
+        "test": "yarn build && jest",
+        "build": "rimraf ./lib && rollup -c",
         "prettier": "prettier test/**/*.js png-node.js png.js --write"
     },
-    "main": "png-node.js",
     "engine": [
         "node >= v0.6.0"
     ],

rollup.config.js

@@ -0,0 +1,67 @@
+import replace from '@rollup/plugin-replace';
+import ignore from 'rollup-plugin-ignore';
+import alias from '@rollup/plugin-alias';
+import nodeResolve from '@rollup/plugin-node-resolve';
+
+import pkg from './package.json' assert { type: 'json' };
+
+const cjs = {
+  exports: 'named',
+  format: 'cjs',
+  interop: 'compat',
+};
+
+const esm = {
+  format: 'es',
+};
+
+const getCJS = (override) => Object.assign({}, cjs, override);
+const getESM = (override) => Object.assign({}, esm, override);
+
+const input = 'src/index.js';
+
+
+const getExternal = ({ browser }) =>
+  browser
+    ? Object.keys(pkg.dependencies)
+    : ['fs', ...Object.keys(pkg.dependencies)];
+
+const getPlugins = ({ browser }) => [
+  ...(browser
+    ? [
+        ignore(['fs']),
+        alias({
+          entries: [{ find: 'zlib', replacement: 'browserify-zlib' }],
+        }),
+        nodeResolve({ browser, preferBuiltins: !browser }),
+      ]
+    : []),
+  replace({
+    preventAssignment: true,
+    values: {
+      BROWSER: JSON.stringify(browser),
+    },
+  }),
+];
+
+const serverConfig = {
+  input,
+  output: [
+    getESM({ file: 'lib/png-js.js' }),
+    getCJS({ file: 'lib/png-js.cjs' }),
+  ],
+  external: getExternal({ browser: false }),
+  plugins: getPlugins({ browser: false }),
+};
+
+const browserConfig = {
+  input,
+  output: [
+    getESM({ file: 'lib/png-js.browser.js' }),
+    getCJS({ file: 'lib/png-js.browser.cjs' }),
+  ],
+  external: getExternal({ browser: true }),
+  plugins: getPlugins({ browser: true }),
+};
+
+export default [serverConfig, browserConfig];

png-node.js → src/index.js

@@ -1,37 +1,25 @@
-/*
- * MIT LICENSE
- * Copyright (c) 2011 Devon Govett
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this
- * software and associated documentation files (the "Software"), to deal in the Software
- * without restriction, including without limitation the rights to use, copy, modify, merge,
- * publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons
- * to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or
- * substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
- * BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
- * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
- * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-const fs = require('fs');
-const zlib = require('zlib');
-
-module.exports = class PNG {
+import fs from 'fs';
+import zlib from 'zlib';
+
+class PNG {
   static decode(path, fn) {
-    return fs.readFile(path, function(err, file) {
-      const png = new PNG(file);
-      return png.decode(pixels => fn(pixels));
-    });
+    if (BROWSER) {
+      throw new Error('PNG.decode not available in browser build');
+    } else {
+      return fs.readFile(path, function(err, file) {
+        const png = new PNG(file);
+        return png.decode(pixels => fn(pixels));
+      });
+    }
   }
 
   static load(path) {
-    const file = fs.readFileSync(path);
-    return new PNG(file);
+    if (BROWSER) {
+      throw new Error('PNG.load not available in browser build');
+    } else {
+      const file = fs.readFileSync(path);
+      return new PNG(file);
+    }
   }
 
   constructor(data) {
@@ -140,7 +128,7 @@ module.exports = class PNG {
               break;
           }
 
-          this.imgData = new Buffer(this.imgData);
+          this.imgData = Buffer.from(this.imgData);
           return;
           break;
 
@@ -188,15 +176,15 @@ module.exports = class PNG {
       const { width, height } = this;
       const pixelBytes = this.pixelBitlength / 8;
 
-      const pixels = new Buffer(width * height * pixelBytes);
+      const pixels = Buffer.alloc(width * height * pixelBytes);
       const { length } = data;
       let pos = 0;
 
       function pass(x0, y0, dx, dy, singlePass = false) {
         const w = Math.ceil((width - x0) / dx);
         const h = Math.ceil((height - y0) / dy);
         const scanlineLength = pixelBytes * w;
-        const buffer = singlePass ? pixels : new Buffer(scanlineLength * h);
+        const buffer = singlePass ? pixels : Buffer.alloc(scanlineLength * h);
         let row = 0;
         let c = 0;
         while (row < h && pos < length) {
@@ -337,7 +325,7 @@ module.exports = class PNG {
     const { palette } = this;
     const { length } = palette;
     const transparency = this.transparency.indexed || [];
-    const ret = new Buffer(transparency.length + length);
+    const ret = Buffer.alloc(transparency.length + length);
     let pos = 0;
     let c = 0;
 
@@ -393,10 +381,12 @@ module.exports = class PNG {
   }
 
   decode(fn) {
-    const ret = new Buffer(this.width * this.height * 4);
+    const ret = Buffer.alloc(this.width * this.height * 4);
     return this.decodePixels(pixels => {
       this.copyToImageData(ret, pixels);
       return fn(ret);
     });
   }
-};
+}
+
+export default PNG;

test/imgdata.spec.js

@@ -1,5 +1,5 @@
-const PNGNode = require('../png-node');
 const fs = require('fs');
+const { default: PNGNode } = require('../lib/png-js.cjs')
 
 const files = fs.readdirSync('test/images');
 

test/metadata.spec.js

@@ -1,5 +1,5 @@
-const PNGNode = require('../png-node');
 const fs = require('fs');
+const { default: PNGNode } = require('../lib/png-js.cjs');
 
 const files = fs.readdirSync('test/images');
 

test/pixels.spec.js

@@ -1,5 +1,5 @@
-const PNGNode = require('../png-node');
 const fs = require('fs');
+const { default: PNGNode } = require('../lib/png-js.cjs');
 
 const files = fs.readdirSync('test/images');