Polyfill zlib in the browser

Author: carlobeltrame

packages/pdfkit/package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.4",
     "@react-pdf/png-js": "^2.1.0",
+    "browserify-zlib": "^0.2.0",
     "crypto-js": "^4.0.0",
     "fontkit": "^2.0.2",
     "vite-compatible-readable-stream": "^3.6.1"

packages/pdfkit/rollup.config.js

@@ -45,14 +45,13 @@ const babelConfig = ({ browser }) => ({
 const getExternal = ({ browser }) => [
   ...(Object.keys(pkg.dependencies)
       .filter(dep => 'crypto-js' !== dep)
-      .filter(dep => !browser || 'vite-compatible-readable-stream' !== dep)
+      .filter(dep => !browser || !['vite-compatible-readable-stream', 'browserify-zlib'].includes(dep))
   ),
   'crypto-js/md5',
   '@babel/runtime/helpers/inheritsLoose',
   '@babel/runtime/helpers/assertThisInitialized',
   '@babel/runtime/helpers/createForOfIteratorHelperLoose',
   '@babel/runtime/helpers/extends',
-  'zlib',
   ...(browser ? [] : ['fs']),
 ];
 

packages/png-js/package.json

@@ -19,10 +19,13 @@
     "url": "http://badassjs.com/"
   },
   "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c -w"
+    "build": "rimraf ./lib && rollup -c",
+    "watch": "rimraf ./lib && rollup -c -w"
   },
   "files": [
     "lib"
-  ]
+  ],
+  "dependencies": {
+    "browserify-zlib": "^0.2.0"
+  }
 }

packages/png-js/rollup.config.js

@@ -1,7 +1,11 @@
 import babel from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
 import ignore from 'rollup-plugin-ignore';
-import { terser } from 'rollup-plugin-terser';
+import alias from '@rollup/plugin-alias';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import pkg from './package.json';
+import commonjs from '@rollup/plugin-commonjs'
 
 const cjs = {
   exports: 'named',
@@ -15,81 +19,72 @@ const esm = {
 const getCJS = override => Object.assign({}, cjs, override);
 const getESM = override => Object.assign({}, esm, override);
 
-const configBase = {
-  input: 'src/index.js',
-  external: ['zlib'],
-  plugins: [
-    babel({
-      babelrc: false,
-      babelHelpers: 'runtime',
-      exclude: 'node_modules/**',
-      presets: [
-        [
-          '@babel/preset-env',
-          {
-            loose: true,
-            modules: false,
-            targets: { node: '12', browsers: 'last 2 versions' },
-          },
-        ],
-      ],
-      plugins: [['@babel/plugin-transform-runtime', { version: '^7.16.4' }]],
-    }),
-  ],
-};
+const input = 'src/index.js';
 
-const serverConfig = Object.assign({}, configBase, {
-  output: [
-    getESM({ file: 'lib/png-js.es.js' }),
-    getCJS({ file: 'lib/png-js.cjs.js' }),
-  ],
-  plugins: configBase.plugins.concat(
-    replace({
-      preventAssignment: true,
-      values: {
-        BROWSER: JSON.stringify(false),
+const babelConfig = ({ browser }) => ({
+  babelrc: false,
+  babelHelpers: 'runtime',
+  exclude: 'node_modules/**',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+        targets: { node: '12', browsers: 'last 2 versions' },
       },
-    }),
-  ),
-  external: ['fs'],
+    ],
+  ],
+  plugins: [['@babel/plugin-transform-runtime', { version: '^7.16.4' }]],
 });
 
-const serverProdConfig = Object.assign({}, serverConfig, {
+const getExternal = ({ browser }) => [
+  ...(browser ? [] : ['fs']),
+  ...(Object.keys(pkg.dependencies).filter(dep => !browser || 'browserify-zlib' !== dep)),
+];
+
+const getPlugins = ({ browser }) => [
+  ...(browser ? [
+    ignore(['fs']),
+    alias({
+      entries: [
+        { find: 'zlib', replacement: 'browserify-zlib' },
+      ]
+    }),
+    commonjs(),
+    nodeResolve({ browser, preferBuiltins: !browser }),
+    nodePolyfills({ include: [ /node_modules\/.+\.js/ ] }),
+  ] : []),
+  babel(babelConfig({ browser })),
+  replace({
+    preventAssignment: true,
+    values: {
+      BROWSER: JSON.stringify(browser),
+    },
+  }),
+];
+
+const serverConfig = {
+  input,
   output: [
-    getESM({ file: 'lib/png-js.es.min.js' }),
-    getCJS({ file: 'lib/png-js.cjs.min.js' }),
+    getESM({ file: 'lib/png-js.es.js' }),
+    getCJS({ file: 'lib/png-js.cjs.js' }),
   ],
-  plugins: serverConfig.plugins.concat(terser()),
-});
+  external: getExternal({ browser: false }),
+  plugins: getPlugins({ browser: false }),
+};
 
-const browserConfig = Object.assign({}, configBase, {
+const browserConfig = {
+  input,
   output: [
     getESM({ file: 'lib/png-js.browser.es.js' }),
     getCJS({ file: 'lib/png-js.browser.cjs.js' }),
   ],
-  plugins: configBase.plugins.concat(
-    replace({
-      preventAssignment: true,
-      values: {
-        BROWSER: JSON.stringify(true),
-        'png-js': 'png-js/png.js',
-      },
-    }),
-    ignore(['fs']),
-  ),
-});
-
-const browserProdConfig = Object.assign({}, browserConfig, {
-  output: [
-    getESM({ file: 'lib/png-js.browser.es.min.js' }),
-    getCJS({ file: 'lib/png-js.browser.cjs.min.js' }),
-  ],
-  plugins: browserConfig.plugins.concat(terser()),
-});
+  external: getExternal({ browser: true }),
+  plugins: getPlugins({ browser: true }),
+};
 
 export default [
   serverConfig,
-  serverProdConfig,
   browserConfig,
-  browserProdConfig,
 ];