feat: compatibility with modern web bundlers and browsers

.changeset/famous-glasses-march.md

@@ -0,0 +1,14 @@
+---
+'@react-pdf/fns': major
+'@react-pdf/pdfkit': major
+'@react-pdf/stylesheet': major
+'@react-pdf/yoga': major
+'@react-pdf/font': minor
+'@react-pdf/image': minor
+'@react-pdf/layout': minor
+'@react-pdf/png-js': minor
+'@react-pdf/renderer': minor
+'@react-pdf/textkit': minor
+---
+
+feat: compatibility with modern web bundlers and browsers

README.md

@@ -29,43 +29,6 @@ This package is used to _create_ PDFs using React. If you wish to _display_ exis
 yarn add @react-pdf/renderer
 ```
 
-### Webpack 5 
-
-Webpack 5 doesn't include node shims automatically anymore and we must opt-in to all shims we want. To do this we have to add a few dependencies to our project:
-
-```sh
-yarn add process browserify-zlib stream-browserify util buffer assert
-```
-
-after the modules are installed, we need to adjust our `webpack.config` file:
-
-```js
-const webpack = require("webpack");
-
-module.exports = {
-  /* ... */
-
-  resolve: {
-    fallback: {
-      process: require.resolve("process/browser"),
-      zlib: require.resolve("browserify-zlib"),
-      stream: require.resolve("stream-browserify"),
-      util: require.resolve("util"),
-      buffer: require.resolve("buffer"),
-      assert: require.resolve("assert"),
-    }
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      Buffer: ["buffer", "Buffer"],
-      process: "process/browser",
-    }),
-  ]
-
-  /* ... */
-}
-```
-
 ## How it works
 
 ```jsx

package.json

@@ -69,6 +69,7 @@
     "rollup": "^2.60.1",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-local-resolve": "^1.0.7",
+    "rollup-plugin-polyfill-node": "^0.9.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2"
   },

packages/fns/package.json

@@ -5,16 +5,17 @@
   "description": "React-pdf helper functions",
   "author": "Diego Muracciole <[email protected]>",
   "homepage": "https://github.com/diegomura/react-pdf#readme",
-  "main": "lib/index.js",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.es.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/diegomura/react-pdf.git",
     "directory": "packages/fns"
   },
   "scripts": {
     "test": "jest",
-    "build": "rimraf ./lib && babel src --out-dir lib",
-    "watch": "rimraf ./lib && babel src --out-dir lib --watch"
+    "build": "rimraf ./lib && rollup -c",
+    "watch": "rimraf ./lib && rollup -c -w"
   },
   "files": [
     "lib"

packages/fns/rollup.config.js

@@ -0,0 +1,38 @@
+import babel from '@rollup/plugin-babel';
+import pkg from './package.json';
+
+const cjs = {
+  exports: 'named',
+  format: 'cjs',
+};
+
+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 = () => [/@babel\/runtime/];
+
+const getPlugins = () => [
+  babel({
+    babelrc: true,
+    babelHelpers: 'runtime',
+    exclude: 'node_modules/**',
+  }),
+];
+
+const config = {
+  input,
+  output: [
+    getESM({ file: 'lib/index.es.js' }),
+    getCJS({ file: 'lib/index.cjs.js' }),
+  ],
+  external: getExternal(),
+  plugins: getPlugins(),
+};
+
+export default config;

packages/font/rollup.config.js

@@ -1,12 +1,10 @@
 import babel from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
-import sourceMaps from 'rollup-plugin-sourcemaps';
-
 import pkg from './package.json';
 
 const cjs = {
-  exports: 'named',
   format: 'cjs',
+  exports: 'named',
 };
 
 const esm = {
@@ -16,6 +14,12 @@ const esm = {
 const getCJS = override => Object.assign({}, cjs, override);
 const getESM = override => Object.assign({}, esm, override);
 
+const babelConfig = () => ({
+  babelrc: true,
+  exclude: 'node_modules/**',
+  babelHelpers: 'runtime',
+});
+
 const external = [
   '@babel/runtime/regenerator',
   '@babel/runtime/helpers/extends',
@@ -24,31 +28,8 @@ const external = [
   ...Object.keys(pkg.dependencies),
 ];
 
-const babelConfig = ({ browser }) => ({
-  babelrc: false,
-  exclude: 'node_modules/**',
-  babelHelpers: 'runtime',
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        loose: true,
-        modules: false,
-        ...(browser
-          ? { targets: { browsers: 'last 2 versions' } }
-          : { targets: { node: '12' } }),
-      },
-    ],
-  ],
-  plugins: [
-    ['@babel/plugin-transform-runtime', { version: '^7.16.4' }],
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ],
-});
-
 const getPlugins = ({ browser }) => [
-  sourceMaps(),
-  babel(babelConfig({ browser })),
+  babel(babelConfig()),
   replace({
     preventAssignment: true,
     values: {

packages/image/package.json

@@ -5,15 +5,17 @@
   "description": "Parses the images in png or jpeg format for react-pdf document",
   "author": "Diego Muracciole <[email protected]>",
   "homepage": "https://github.com/diegomura/react-pdf#readme",
-  "main": "lib/index.js",
+  "main": "./lib/index.cjs.js",
+  "module": "./lib/index.es.js",
+  "browser": {
+    "./lib/index.cjs.js": "./lib/index.browser.cjs.js",
+    "./lib/index.es.js": "./lib/index.browser.es.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/diegomura/react-pdf.git",
     "directory": "packages/image"
   },
-  "browser": {
-    "./lib/index.js": "./lib/index.browser.js"
-  },
   "scripts": {
     "test": "jest",
     "build": "rimraf ./lib && rollup -c",

packages/image/rollup.config.js

@@ -1,75 +1,70 @@
 import babel from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
 import ignore from 'rollup-plugin-ignore';
-import sourceMaps from 'rollup-plugin-sourcemaps';
-
 import pkg from './package.json';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+
+const cjs = {
+  format: 'cjs',
+  exports: 'named',
+};
+
+const esm = {
+  format: 'es',
+};
 
-const external = [
+const getCJS = override => Object.assign({}, cjs, override);
+const getESM = override => Object.assign({}, esm, override);
+
+const input = './src/index.js';
+
+const babelConfig = () => ({
+  babelrc: true,
+  exclude: 'node_modules/**',
+  babelHelpers: 'runtime',
+});
+
+const getExternal = ({ browser }) => [
   '@babel/runtime/helpers/asyncToGenerator',
   '@babel/runtime/regenerator',
   ...Object.keys(pkg.dependencies),
+  ...(browser ? [] : ['fs', 'path', 'url']),
 ];
 
-const babelConfig = ({ browser }) => ({
-  babelrc: false,
-  exclude: 'node_modules/**',
-  babelHelpers: 'runtime',
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        loose: true,
-        modules: false,
-        ...(browser
-          ? { targets: { browsers: 'last 2 versions' } }
-          : { targets: { node: '12' } }),
-      },
-    ],
-  ],
-  plugins: [
-    ['@babel/plugin-transform-runtime', { version: '^7.16.4' }],
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ],
-});
+const getPlugins = ({ browser }) => [
+  babel(babelConfig()),
+  replace({
+    preventAssignment: true,
+    values: { BROWSER: JSON.stringify(browser) },
+  }),
+  ...(browser
+    ? [
+        ignore(['fs', 'path', 'url']),
+        nodePolyfills({
+          include: [/node_modules\/.+\.js/, /\/image\/src\/.*\.js/],
+        }),
+      ]
+    : []),
+];
 
 const serverConfig = {
-  input: './src/index.js',
-  output: {
-    format: 'cjs',
-    file: 'lib/index.js',
-    exports: 'named',
-    sourcemap: true,
-  },
-  external: external.concat(['fs', 'path', 'url']),
-  plugins: [
-    sourceMaps(),
-    babel(babelConfig({ browser: false })),
-    replace({
-      preventAssignment: true,
-      values: { BROWSER: JSON.stringify(false) },
-    }),
+  input,
+  output: [
+    getESM({ file: 'lib/index.es.js' }),
+    getCJS({ file: 'lib/index.cjs.js' }),
   ],
+  external: getExternal({ browser: false }),
+  plugins: getPlugins({ browser: false }),
 };
 
 const browserConfig = {
-  input: './src/index.js',
-  output: {
-    format: 'cjs',
-    file: 'lib/index.browser.js',
-    exports: 'named',
-    sourcemap: true,
-  },
-  external,
-  plugins: [
-    sourceMaps(),
-    babel(babelConfig({ browser: true })),
-    replace({
-      preventAssignment: true,
-      values: { BROWSER: JSON.stringify(true) },
-    }),
-    ignore(['fs', 'path', 'url']),
+  input,
+  output: [
+    getESM({ file: 'lib/index.browser.es.js' }),
+    getCJS({ file: 'lib/index.browser.cjs.js' }),
   ],
+  external: getExternal({ browser: true }),
+  plugins: getPlugins({ browser: true }),
 };
 
 export default [serverConfig, browserConfig];

packages/layout/src/steps/resolvePageSizes.js

@@ -1,5 +1,4 @@
-import flatten from '@react-pdf/stylesheet/lib/flatten';
-
+import { flatten } from '@react-pdf/stylesheet';
 import getPageSize from '../page/getSize';
 
 /**

packages/pdfkit/babel.config.js

@@ -0,0 +1 @@
+module.exports = { extends: '../../babel.config.js' };

packages/pdfkit/package.json

@@ -2,8 +2,8 @@
   "name": "@react-pdf/pdfkit",
   "version": "2.4.0",
   "description": "A PDF generation library for Node.js",
-  "main": "lib/pdfkit.cjs.js",
-  "module": "lib/pdfkit.es.js",
+  "main": "./lib/pdfkit.cjs.js",
+  "module": "./lib/pdfkit.es.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/diegomura/react-pdf.git",
@@ -30,8 +30,10 @@
   "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"
+    "fontkit": "^2.0.2",
+    "vite-compatible-readable-stream": "^3.6.1"
   },
   "devDependencies": {
     "iconv-lite": "^0.4.13"