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

babel.config.js

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

jest.config.js

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

package.json

@@ -5,15 +5,23 @@
   "description": "Resolve overall document component's layout",
   "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/layout"
   },
   "scripts": {
-    "test": "jest",
+    "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",
     "build": "rimraf ./lib && rollup -c",
     "watch": "rimraf ./lib && rollup -c -w"
   },

rollup.config.js

@@ -29,10 +29,7 @@ const configBase = {
 };
 
 const config = Object.assign({}, configBase, {
-  output: [
-    getESM({ file: 'lib/index.es.js' }),
-    getCJS({ file: 'lib/index.cjs.js' }),
-  ],
+  output: [getESM({ file: 'lib/index.js' }), getCJS({ file: 'lib/index.cjs' })],
 });
 
 export default config;

setupTests.js

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

src/image/measureImage.js

@@ -1,4 +1,4 @@
-import Yoga from 'yoga-layout/sync';
+import Yoga from '../../yoga';
 
 import getRatio from './getRatio';
 import getMargin from '../node/getMargin';

src/node/getBorderWidth.js

@@ -1,4 +1,4 @@
-import Yoga from 'yoga-layout/sync';
+import Yoga from '../../yoga';
 
 const getComputedBorder = (yogaNode, edge) =>
   yogaNode ? yogaNode.getComputedBorder(edge) : 0;

src/node/getMargin.js

@@ -1,4 +1,4 @@
-import Yoga from 'yoga-layout/sync';
+import Yoga from '../../yoga';
 
 const getComputedMargin = (node, edge) => {
   const { yogaNode } = node;

src/node/getPadding.js

@@ -1,4 +1,4 @@
-import Yoga from 'yoga-layout/sync';
+import Yoga from '../../yoga';
 
 const getComputedPadding = (node, edge) => {
   const { yogaNode } = node;

src/node/setAlign.js

@@ -1,5 +1,5 @@
-import Yoga from 'yoga-layout/sync';
 import { upperFirst } from '@react-pdf/fns';
+import Yoga from '../../yoga';
 
 const ALIGN = {
   'flex-start': Yoga.ALIGN_FLEX_START,