feat: add support for native ESM imports, make repository ESM-first (diegomura#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

Diff for: babel.config.js

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

Diff for: jest.config.js

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

Diff for: 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"
   },

Diff for: 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(),
 };