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

Author: wojtekmaj

.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.js

@@ -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
+      }
+    }
+  ]
+}

.eslintrc.json

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

babel.config.js

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

jest.config.js

@@ -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",

package.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/examples/.eslintrc.js

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

packages/examples/.eslintrc.json

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