feat: add support for native ESM imports, make repository ESM-first (#…

…2409)

* Set "type": "module" and add "exports"

* Convert Babel config to ESM

* Add our own node-gyp so that canvas can be built

* Fix parse:afm command, remove useless babel-node

* Convert Jest config and CJS Jest tests to ESM

* Convert ESLint config to JSON

* Allow extraneous dependencies in test files

* Change .size-limit config extension to .cjs

* Fix build

* Add changeset

* Add types

* Fix faux ESM yoga-layout import

* Make ESLint happy

* Remove unnecessary eslint-disable

* Fix broken imports in browserify-zlib

See browserify/browserify-zlib#45

* Fix Jest command?

* Use .cjs and .js instead of .cjs.js and .es.js respectively, copy types for each outputted file separately

* Remove direct node-gyp dependency

* Move Yoga hack to a separate file

.changeset/lazy-news-laugh.md

@@ -0,0 +1,17 @@
+---
+'@react-pdf/primitives': minor
+'@react-pdf/stylesheet': minor
+'@react-pdf/examples': minor
+'@react-pdf/renderer': minor
+'@react-pdf/textkit': minor
+'@react-pdf/layout': minor
+'@react-pdf/pdfkit': minor
+'@react-pdf/png-js': minor
+'@react-pdf/render': minor
+'@react-pdf/svgkit': minor
+'@react-pdf/image': minor
+'@react-pdf/font': minor
+'@react-pdf/fns': minor
+---
+
+Add support for native ESM

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb",
+    "prettier",
+    "plugin:react/jsx-runtime"
+  ],
+  "globals": {
+    "URL": false,
+    "BROWSER": false,
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "jest"],
+  "rules": {
+    "func-names": 0,
+    "no-continue": 1,
+    "no-cond-assign": 1,
+    "react/prop-types": 0,
+    "prefer-destructuring": 1,
+    "no-use-before-define": 1,
+    "no-underscore-dangle": 0,
+    "prefer-object-spread": 0,
+    "import/no-named-as-default": 0,
+    "react/state-in-constructor": 0,
+    "react/jsx-filename-extension": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/destructuring-assignment": 0,
+    "import/no-unresolved": ["error", { "ignore": ["^yoga-layout"] }]
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.js", "**/tests/**/*.js", "setup.jest.js"],
+      "env": {
+        "jest": true
+      },
+      "rules": {
+        "import/no-extraneous-dependencies": 0
+      }
+    }
+  ]
+}

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   presets: [
     [
       '@babel/preset-env',

jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   projects: [
     '<rootDir>packages/fns',
     '<rootDir>packages/font',

package.json

@@ -5,6 +5,7 @@
   "license": "MIT",
   "author": "Diego Muracciole <[email protected]>",
   "homepage": "https://github.com/diegomura/react-pdf#readme",
+  "type": "module",
   "repository": "[email protected]:diegomura/react-pdf.git",
   "workspaces": [
     "packages/*"
@@ -16,7 +17,7 @@
     "bootstrap": "lerna bootstrap",
     "prepublish": "lerna run build",
     "lint": "eslint packages",
-    "test": "jest",
+    "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",
     "dev": "lerna run dev --scope @react-pdf/examples",
     "changeset": "changeset",
     "version-packages": "changeset version",
@@ -25,7 +26,6 @@
   "devDependencies": {
     "@babel/cli": "^7.20.7",
     "@babel/core": "^7.20.7",
-    "@babel/node": "^7.20.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.20.13",
     "@babel/plugin-proposal-optional-chaining": "^7.20.7",
@@ -34,6 +34,7 @@
     "@babel/preset-react": "^7.18.6",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.0",
+    "@jest/globals": "^29.5.0",
     "@rollup/plugin-alias": "^3.1.8",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -67,6 +68,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^2.6.3",
     "rollup": "^2.60.1",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-local-resolve": "^1.0.7",
     "rollup-plugin-polyfill-node": "^0.9.0",

packages/examples/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["../../.eslintrc.json", "plugin:react/recommended"],
+  "rules": {
+    "react/prop-types": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "react/jsx-one-expression-per-line": 0
+  }
+}

packages/fns/babel.config.js

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

packages/fns/jest.config.js

@@ -1,3 +1,3 @@
-module.exports = {
+export default {
   testRegex: 'tests/.*?(test)\\.js$',
 };

packages/fns/package.json

@@ -5,15 +5,23 @@
   "description": "React-pdf helper functions",
   "author": "Diego Muracciole <[email protected]>",
   "homepage": "https://github.com/diegomura/react-pdf#readme",
-  "main": "lib/index.cjs.js",
-  "module": "lib/index.es.js",
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "default": "./lib/index.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/diegomura/react-pdf.git",
     "directory": "packages/fns"
   },
   "scripts": {
-    "test": "jest",
+    "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",
     "build": "rimraf ./lib && rollup -c",
     "watch": "rimraf ./lib && rollup -c -w"
   },

packages/fns/rollup.config.js

@@ -27,10 +27,7 @@ const getPlugins = () => [
 
 const config = {
   input,
-  output: [
-    getESM({ file: 'lib/index.es.js' }),
-    getCJS({ file: 'lib/index.cjs.js' }),
-  ],
+  output: [getESM({ file: 'lib/index.js' }), getCJS({ file: 'lib/index.cjs' })],
   external: getExternal(),
   plugins: getPlugins(),
 };

packages/font/babel.config.js

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

packages/font/package.json

@@ -10,14 +10,22 @@
     "url": "https://github.com/diegomura/react-pdf.git",
     "directory": "packages/font"
   },
-  "main": "./lib/index.cjs.js",
-  "module": "./lib/index.es.js",
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
   "browser": {
-    "./lib/index.es.js": "./lib/index.browser.es.js",
-    "./lib/index.cjs.js": "./lib/index.browser.cjs.js"
+    "./lib/index.js": "./lib/index.browser.js",
+    "./lib/index.cjs": "./lib/index.browser.cjs"
+  },
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "default": "./lib/index.js"
+    }
   },
   "scripts": {
-    "test": "jest",
+    "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",
     "build": "rimraf ./lib && rollup -c",
     "watch": "rimraf ./lib && rollup -c -w"
   },

packages/font/rollup.config.js

@@ -34,19 +34,16 @@ const getPlugins = ({ browser }) => [
 
 const serverConfig = {
   input: './src/index.js',
-  output: [
-    getESM({ file: 'lib/index.es.js' }),
-    getCJS({ file: 'lib/index.cjs.js' }),
-  ],
+  output: [getESM({ file: 'lib/index.js' }), getCJS({ file: 'lib/index.cjs' })],
   external,
   plugins: getPlugins({ browser: false }),
 };
 
 const browserConfig = {
   input: './src/index.js',
   output: [
-    getESM({ file: 'lib/index.browser.es.js' }),
-    getCJS({ file: 'lib/index.browser.cjs.js' }),
+    getESM({ file: 'lib/index.browser.js' }),
+    getCJS({ file: 'lib/index.browser.cjs' }),
   ],
   external,
   plugins: getPlugins({ browser: true }),

packages/font/setupTests.js

@@ -1,6 +1,11 @@
 /* eslint-disable */
+import { jest } from '@jest/globals';
+import { createRequire } from 'module';
+
 import '../../polyfills';
 
+const require = createRequire(import.meta.url);
+
 global.BROWSER = false;
 
 const customGlobal = global;

packages/image/babel.config.js

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

packages/image/jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   automock: false,
   testRegex: 'tests/.*?(test)\\.js$',
   setupFiles: ['<rootDir>setupTests.js'],

packages/image/package.json

@@ -5,19 +5,27 @@
   "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.cjs.js",
-  "module": "./lib/index.es.js",
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
   "browser": {
-    "./lib/index.cjs.js": "./lib/index.browser.cjs.js",
-    "./lib/index.es.js": "./lib/index.browser.es.js"
+    "./lib/index.cjs": "./lib/index.browser.cjs",
+    "./lib/index.js": "./lib/index.browser.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "default": "./lib/index.js"
+    }
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/diegomura/react-pdf.git",
     "directory": "packages/image"
   },
   "scripts": {
-    "test": "jest",
+    "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",
     "build": "rimraf ./lib && rollup -c",
     "watch": "rimraf ./lib && rollup -c -w"
   },

packages/image/rollup.config.js

@@ -48,19 +48,16 @@ const getPlugins = ({ browser }) => [
 
 const serverConfig = {
   input,
-  output: [
-    getESM({ file: 'lib/index.es.js' }),
-    getCJS({ file: 'lib/index.cjs.js' }),
-  ],
+  output: [getESM({ file: 'lib/index.js' }), getCJS({ file: 'lib/index.cjs' })],
   external: getExternal({ browser: false }),
   plugins: getPlugins({ browser: false }),
 };
 
 const browserConfig = {
   input,
   output: [
-    getESM({ file: 'lib/index.browser.es.js' }),
-    getCJS({ file: 'lib/index.browser.cjs.js' }),
+    getESM({ file: 'lib/index.browser.js' }),
+    getCJS({ file: 'lib/index.browser.cjs' }),
   ],
   external: getExternal({ browser: true }),
   plugins: getPlugins({ browser: true }),

packages/image/setupTests.js

@@ -1,4 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import { jest } from '@jest/globals';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
 
 const customGlobal = global;
 customGlobal.fetch = require('jest-fetch-mock');

packages/image/tests/resolve.test.js

@@ -1,8 +1,11 @@
 import fs from 'fs';
 import path from 'path';
+import url from 'url';
 
 import resolveImage, { IMAGE_CACHE } from '../src/resolve';
 
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
 const jpgImageUrl = 'https://react-pdf.org/static/images/quijote1.jpg';
 const pngImageUrl = 'https://react-pdf.org/static/images/quijote2.png';
 const jpgLogalPath = path.join(__dirname, './assets/test.jpg');

packages/layout/babel.config.js

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