feat(hooks): bundle as es-module (#3232)

Haroenv · web-flow · commit ae4df8a7dec3 · 2022-01-05T11:20:15.000+01:00
* feat(hooks): package as a real es-module

* replace es to cjs paths in cjs build

* replace wholesale extensions

* make jest resolve

* make replaced files compatible with linux

* suppress lint errors

* fix some more import errors

* fix ts

* lint

* move lint rules

* remove comment

* es: import instantsearch from /es too, to make it explicitly the module

* not a module

* diff with babel plugin instead

* remove all extensions

* Apply suggestions from code review

* babel: resolve packages too

* remove no longer needed extensions

* undo change

* test: add an assertion to make sure it actually exports a module

* pin devdep

* consolidate script

* changes in configuration

* add comment

* update instantsearch

* make importStartsWith a configuration

* fix extension test

* feat(deps): update helper requirement

* chore(deps): update instantsearch with es fix

* node 14 for esm test

* fix typo
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -29,6 +29,8 @@ version: 2
 jobs:
   test_build:
     <<: *defaults
+    docker:
+      - image: cimg/node:14.18.2
     steps:
       - checkout
       - run: *install_yarn_version
@@ -38,6 +40,20 @@ jobs:
       - run:
           name: Build & Test packages size
           command: yarn test:build
+      - store_artifacts:
+          path: packages/react-instantsearch/dist
+      - store_artifacts:
+          path: packages/react-instantsearch-core/dist
+      - store_artifacts:
+          path: packages/react-instantsearch-dom/dist
+      - store_artifacts:
+          path: packages/react-instantsearch-dom-maps/dist
+      - store_artifacts:
+          path: packages/react-instantsearch-hooks/dist
+      - store_artifacts:
+          path: packages/react-instantsearch-hooks-server/dist
+      - store_artifacts:
+          path: packages/react-instantsearch-native/dist
 
   test_unit:
     <<: *defaults
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -143,6 +143,12 @@ const config = {
             pathGroupsExcludedImportTypes: ['builtin'],
           },
         ],
+        'import/extensions': ['error', 'never'],
+      },
+      settings: {
+        'import/parsers': {
+          '@typescript-eslint/parser': ['.ts', '.tsx'],
+        },
       },
     },
     {
diff --git a/babel.config.js b/babel.config.js
@@ -1,4 +1,5 @@
 const wrapWarningWithDevCheck = require('./scripts/babel/wrap-warning-with-dev-check');
+const extensionResolver = require('./scripts/babel/extension-resolver');
 
 const isES = process.env.BABEL_ENV === 'es';
 const isRollup = process.env.BABEL_ENV === 'rollup';
@@ -40,6 +41,18 @@ module.exports = (api) => {
           },
         },
       ],
+      isES && [
+        extensionResolver,
+        {
+          // For verification, see test/module/packages-are-es-modules.mjs
+          modulesToResolve: [
+            // InstantSearch.js/es is an ES Module, so needs complete paths,
+            'instantsearch.js',
+            // React-DOM also fails if the paths are incomplete
+            'react-dom',
+          ],
+        },
+      ],
     ]),
     overrides: [
       {
diff --git a/examples/hooks/package.json b/examples/hooks/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "algoliasearch": "4.10.5",
-    "instantsearch.js": "4.34.0",
+    "instantsearch.js": "4.37.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-instantsearch-hooks": "6.18.0"
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "test:e2e:saucelabs": "wdio wdio.saucelabs.conf.js",
     "test:integration": "NODE_ENV=development yarn test:regressions && yarn test:argos",
     "test:examples": "node scripts/test-examples.js",
-    "test:build": "yarn build && yarn test:size",
+    "test:build": "yarn build && yarn test:size && node ./test/module/packages-are-es-modules.mjs",
     "test:regressions": "webpack --config integration/webpack.config.js && node integration/runTest.js",
     "test:argos": "argos upload integration/screenshots --token $ARGOS_TOKEN || true",
     "test:size": "bundlesize",
@@ -93,6 +93,7 @@
     "eslint": "6.8.0",
     "eslint-config-algolia": "16.0.0",
     "eslint-config-prettier": "6.15.0",
+    "eslint-import-resolver-typescript": "2.5.0",
     "eslint-plugin-eslint-comments": "3.2.0",
     "eslint-plugin-import": "2.24.2",
     "eslint-plugin-jest": "24.4.2",
diff --git a/packages/react-instantsearch-core/package.json b/packages/react-instantsearch-core/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "algoliasearch-helper": "^3.6.2",
+    "algoliasearch-helper": "^3.7.0",
     "prop-types": "^15.6.2",
     "react-fast-compare": "^3.0.0"
   },
diff --git a/packages/react-instantsearch-dom/package.json b/packages/react-instantsearch-dom/package.json
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "algoliasearch-helper": "^3.6.2",
+    "algoliasearch-helper": "^3.7.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.2",
     "react-fast-compare": "^3.0.0",
diff --git a/packages/react-instantsearch-hooks-server/package.json b/packages/react-instantsearch-hooks-server/package.json
@@ -6,6 +6,13 @@
   "types": "dist/es/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
   "sideEffects": false,
   "license": "MIT",
   "homepage": "https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/",
@@ -30,14 +37,14 @@
     "clean": "rm -rf dist",
     "watch": "yarn build:cjs --watch",
     "build": "yarn build:cjs && yarn build:es && yarn build:umd && yarn build:types",
-    "build:cjs": "babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet",
+    "build:cjs": "babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/replace-import-for-cjs.sh",
     "build:es": "BABEL_ENV=es babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet",
     "build:umd": "BABEL_ENV=rollup rollup -c rollup.config.js",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/es"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "instantsearch.js": "^4.34.0",
+    "instantsearch.js": "^4.37.1",
     "react-instantsearch-hooks": "6.18.0"
   },
   "peerDependencies": {
diff --git a/packages/react-instantsearch-hooks/package.json b/packages/react-instantsearch-hooks/package.json
@@ -6,6 +6,13 @@
   "types": "dist/es/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
   "sideEffects": false,
   "license": "MIT",
   "homepage": "https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/",
@@ -33,16 +40,16 @@
     "clean": "rm -rf dist",
     "watch": "yarn build:cjs --watch",
     "build": "yarn build:cjs && yarn build:es && yarn build:umd && yarn build:types",
-    "build:cjs": "babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet",
+    "build:cjs": "babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/replace-import-for-cjs.sh",
     "build:es": "BABEL_ENV=es babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet",
     "build:umd": "BABEL_ENV=rollup rollup -c rollup.config.js",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/es"
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "algoliasearch-helper": "^3.6.2",
+    "algoliasearch-helper": "^3.7.0",
     "dequal": "^2.0.0",
-    "instantsearch.js": "^4.34.0"
+    "instantsearch.js": "^4.37.1"
   },
   "peerDependencies": {
     "algoliasearch": ">= 3.1 < 5",
diff --git a/packages/react-instantsearch-hooks/src/__tests__/compat.test.tsx b/packages/react-instantsearch-hooks/src/__tests__/compat.test.tsx
@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react';
 import React from 'react';
+import { InstantSearch as InstantSearchCore } from 'react-instantsearch-core';
 
 import { createSearchClient } from '../../../../test/mock';
-import { InstantSearch as InstantSearchCore } from '../../../react-instantsearch-core';
 import { useSearchBox } from '../useSearchBox';
 import { noop } from '../utils';
 
diff --git a/packages/react-instantsearch-hooks/src/useInstantSearch.ts b/packages/react-instantsearch-hooks/src/useInstantSearch.ts
@@ -1,4 +1,4 @@
-import instantsearch from 'instantsearch.js';
+import instantsearch from 'instantsearch.js/es';
 import { useEffect, useMemo, version as ReactVersion } from 'react';
 
 import { useForceUpdate } from './useForceUpdate';
diff --git a/scripts/babel/__mocks__/fs.js b/scripts/babel/__mocks__/fs.js
@@ -0,0 +1,29 @@
+const fs = jest.requireActual('fs');
+
+let mockFiles = new Set();
+function __setMockFiles(newMockFiles) {
+  mockFiles = new Set(newMockFiles);
+}
+
+const realStatSync = fs.statSync;
+function statSync(pathName, ...args) {
+  try {
+    return realStatSync(pathName, ...args);
+  } catch (e) {
+    if (e && (e.code === 'ENOENT' || e.code === 'ENOTDIR')) {
+      if (mockFiles.has(pathName)) {
+        return {
+          isFile() {
+            return true;
+          },
+        };
+      }
+    }
+    throw e;
+  }
+}
+
+fs.__setMockFiles = __setMockFiles;
+fs.statSync = statSync;
+
+module.exports = fs;
diff --git a/scripts/babel/__tests__/extension-resolver.test.js b/scripts/babel/__tests__/extension-resolver.test.js
@@ -0,0 +1,168 @@
+import { transformAsync } from '@babel/core';
+
+import plugin from '../extension-resolver';
+import fs from 'fs';
+jest.mock('fs');
+
+describe('babel-plugin-extension-resolver', () => {
+  const pluginOptions = {
+    modulesToResolve: ['instantsearch.js'],
+  };
+  const options = {
+    filename: '/path/to/src/file.js',
+    configFile: false,
+    babelrc: false,
+    plugins: [[plugin, pluginOptions]],
+  };
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('name=babel-plugin-extension-resolver', () =>
+    expect(plugin({ types: {} }, {}).name).toStrictEqual(
+      'babel-plugin-extension-resolver'
+    ));
+
+  it('ignores empty code', async () => {
+    expect(await transformAsync('', options)).toHaveProperty('code', '');
+  });
+
+  it('ignores module imports', async () => {
+    expect(
+      await transformAsync('import path from "path";', options)
+    ).toHaveProperty('code', 'import path from "path";');
+  });
+
+  it('finds .js files', async () => {
+    fs.__setMockFiles([
+      '/path/to/src/other.js',
+      '/path/to/src/other.ts',
+      '/path/to/src/other.tsx',
+    ]);
+
+    expect(
+      await transformAsync('import other from "./other";', options)
+    ).toHaveProperty('code', 'import other from "./other.js";');
+  });
+
+  it('finds .ts files', async () => {
+    fs.__setMockFiles(['/path/to/src/other.ts', '/path/to/src/other.tsx']);
+
+    expect(
+      await transformAsync('import other from "./other";', options)
+    ).toHaveProperty('code', 'import other from "./other.js";');
+  });
+
+  it('finds .tsx files', async () => {
+    fs.__setMockFiles(['/path/to/src/other.tsx']);
+
+    expect(
+      await transformAsync('import other from "./other";', options)
+    ).toHaveProperty('code', 'import other from "./other.js";');
+  });
+
+  it('finds files in parent directory', async () => {
+    fs.__setMockFiles(['/path/to/other.js', '/path/to/src/other.js']);
+
+    expect(
+      await transformAsync('import other from "../other";', options)
+    ).toHaveProperty('code', 'import other from "../other.js";');
+  });
+
+  it('finds files in child directory', async () => {
+    fs.__setMockFiles(['/path/to/src/other.js', '/path/to/src/child/other.js']);
+
+    expect(
+      await transformAsync('import other from "./child/other";', options)
+    ).toHaveProperty('code', 'import other from "./child/other.js";');
+  });
+
+  it('uses index file', async () => {
+    fs.__setMockFiles(['/path/to/src/other/index.js']);
+
+    expect(
+      await transformAsync('import other from "./other";', options)
+    ).toHaveProperty('code', 'import other from "./other/index.js";');
+  });
+
+  it('uses modulesToResolve', async () => {
+    fs.__setMockFiles(['/path/to/src/other/index.js']);
+
+    expect(
+      await transformAsync(
+        'import index from "instantsearch.js/es/widgets/index/index";\n' +
+          'import root from "instantsearch.js";\n' +
+          'import other from "different-module/other";',
+        options
+      )
+    ).toHaveProperty(
+      'code',
+      'import index from "instantsearch.js/es/widgets/index/index.js";\n' +
+        'import root from "instantsearch.js";\n' +
+        'import other from "different-module/other";'
+    );
+  });
+
+  it('works with multiple imports', async () => {
+    fs.__setMockFiles(['/path/to/src/other.js', '/path/to/src/another.js']);
+
+    expect(
+      await transformAsync(
+        'import other from "./other";\nimport another from "./another";',
+        options
+      )
+    ).toHaveProperty(
+      'code',
+      'import other from "./other.js";\nimport another from "./another.js";'
+    );
+  });
+
+  it('works with export from', async () => {
+    fs.__setMockFiles(['/path/to/src/other.js']);
+
+    expect(
+      await transformAsync('export * from "./other"', options)
+    ).toHaveProperty('code', 'export * from "./other.js";');
+  });
+
+  it('ignores require()', async () => {
+    fs.__setMockFiles(['/path/to/src/other.js', '/path/to/src/another.js']);
+
+    expect(await transformAsync('require("./other");', options)).toHaveProperty(
+      'code',
+      'require("./other");'
+    );
+  });
+
+  it('ignores other function calls', async () => {
+    fs.__setMockFiles(['/path/to/src/other.js']);
+
+    expect(
+      await transformAsync('requireOOPS("./other");', options)
+    ).toHaveProperty('code', 'requireOOPS("./other");');
+  });
+
+  it('errors if file not found', async () => {
+    fs.__setMockFiles([]);
+
+    await expect(() =>
+      transformAsync('import other from "./other";', options)
+    ).rejects.toThrow(
+      '/path/to/src/file.js: import for "./other" could not be resolved'
+    );
+  });
+
+  it('errors if module file not found', async () => {
+    fs.__setMockFiles([]);
+
+    await expect(() =>
+      transformAsync(
+        'import other from "instantsearch.js/non-existing-folder-this-can-never-exist/qsdf/gh/jklm";',
+        options
+      )
+    ).rejects.toThrow(
+      "/path/to/src/file.js: Cannot find module 'instantsearch.js/non-existing-folder-this-can-never-exist/qsdf/gh/jklm' from 'scripts/babel/extension-resolver.js'"
+    );
+  });
+});
diff --git a/scripts/babel/extension-resolver.js b/scripts/babel/extension-resolver.js
diff --git a/scripts/jest/setupTests.ts b/scripts/jest/setupTests.ts
diff --git a/scripts/replace-import-for-cjs.sh b/scripts/replace-import-for-cjs.sh
diff --git a/test/module/packages-are-es-modules.mjs b/test/module/packages-are-es-modules.mjs
diff --git a/yarn.lock b/yarn.lock
