fix(esm): mark esm exports as type: module (#1111)

* chore: import consistently from util

* refactor(build): build both vue2 and vue3 with same rollup config

* use babel to resolve extension

* create package.json and cjs entry

* test in ci

* split up vue 2 and vue 3

* fix vue3 imports in test

* less strict test that doesn't depend on babel version

.circleci/config.yml

@@ -38,6 +38,19 @@ jobs:
       - run:
           name: Build & Test packages size
           command: yarn test:build
+      - run:
+          name: Test module format Vue 2
+          command: |
+            node test/modules/vue2/package-is-es-module.mjs
+            node test/modules/vue2/package-is-cjs-module.cjs
+      - run:
+          name: Install Vue 3
+          command: ./scripts/test-vue3.sh
+      - run:
+          name: Test module format Vue 3
+          command: |
+            node test/modules/vue3/package-is-es-module.mjs
+            node test/modules/vue3/package-is-cjs-module.cjs
 
   test_unit_vue2:
     <<: *defaults
@@ -59,12 +72,9 @@ jobs:
     steps:
       - checkout
       - run: *install_yarn_version
-      - restore_cache: *restore_yarn_cache
-      - run: *run_yarn_install
       - run:
-          name: Install Vue3
+          name: Install Vue 3
           command: ./scripts/test-vue3.sh
-      - save_cache: *save_yarn_cache
       - run:
           name: Lint & Code styles
           command: yarn lint
@@ -115,4 +125,3 @@ workflows:
             branches:
               only:
                 - master
-                - feat/vue3-compat

.gitignore

@@ -18,8 +18,8 @@ yarn-error.log
 coverage
 
 # published files
-vue2/
-vue3/
+/vue2/
+/vue3/
 
 # Test output
 /junit

package.json

@@ -28,9 +28,7 @@
   "repository": "https://github.com/algolia/vue-instantsearch",
   "scripts": {
     "prebuild": "rm -rf vue2 vue3",
-    "build": "yarn build:vue2 && yarn build:vue3",
-    "build:vue2": "./scripts/build-vue2.sh",
-    "build:vue3": "./scripts/build-vue3.sh",
+    "build": "rollup -c",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook:build": "build-storybook -c .storybook -o website/stories",
     "examples:build": "yarn build && ./examples/build.sh",
@@ -66,6 +64,7 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.17.0",
     "@storybook/addon-actions": "3.4.11",
     "@storybook/addon-knobs": "3.4.11",
     "@storybook/addon-options": "3.4.11",
@@ -105,6 +104,7 @@
     "lodash": "4.17.19",
     "prettier": "1.14.3",
     "rollup": "1.32.1",
+    "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-buble": "0.19.6",
     "rollup-plugin-commonjs": "10.0.1",
     "rollup-plugin-filesize": "9.0.0",

rollup.config.js

@@ -1,3 +1,4 @@
+import path from 'path';
 import vueV2 from 'rollup-plugin-vue2';
 import vueV3 from 'rollup-plugin-vue3';
 import buble from 'rollup-plugin-buble';
@@ -7,90 +8,156 @@ import commonjs from 'rollup-plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
 import replace from 'rollup-plugin-replace';
 import json from 'rollup-plugin-json';
-
-if (process.env.VUE_VERSION !== 'vue2' && process.env.VUE_VERSION !== 'vue3') {
-  throw new Error(
-    'The environment variable VUE_VERSION (`vue2` | `vue3`) is required.'
-  );
-}
+import babel from 'rollup-plugin-babel';
+import { extensionResolver } from './scripts/babel-plugin-extension-resolver';
 
 const processEnv = conf => ({
   // parenthesis to avoid syntax errors in places where {} is interpreted as a block
   'process.env': `(${JSON.stringify(conf)})`,
 });
 
-const vuePlugin = process.env.VUE_VERSION === 'vue3' ? vueV3 : vueV2;
-const outputDir = process.env.VUE_VERSION === 'vue3' ? 'vue3' : 'vue2';
+const createFile = (fileName, content) => ({
+  name: 'inject-package-json',
+  buildEnd() {
+    this.emitFile({
+      type: 'asset',
+      fileName,
+      source: content,
+    });
+  },
+});
 
-const plugins = [
-  vuePlugin({ compileTemplate: true, css: false }),
-  commonjs(),
-  json(),
-  buble({
-    transforms: {
-      dangerousForOf: true,
-    },
-  }),
-  replace(processEnv({ NODE_ENV: 'production' })),
-  terser({
-    sourcemap: true,
-  }),
-  filesize(),
-];
+const aliasVueCompat = vueVersion => ({
+  name: 'alias-vue-compat',
+  resolveId(source, fileName) {
+    if (source.includes('vue-compat')) {
+      const matchingVueCompatFile = `./index-${vueVersion}.js`;
 
-const external = id =>
-  ['algoliasearch-helper', 'instantsearch.js', 'vue', 'mitt'].some(
-    dep => id === dep || id.startsWith(`${dep}/`)
-  );
+      const compatFolder = path.resolve(
+        path.dirname(fileName),
+        // source is either './vue-compat' or './vue-compat/index.js'
+        source.replace(/\/index\.js$/, '/')
+      );
 
-export default [
-  {
-    input: 'src/instantsearch.js',
-    external,
-    output: [
-      {
-        sourcemap: true,
-        file: `${outputDir}/cjs/index.js`,
-        format: 'cjs',
-        exports: 'named',
-      },
-    ],
-    plugins: [...plugins],
+      return path.resolve(compatFolder, matchingVueCompatFile);
+    }
+    return null;
   },
-  {
-    input: 'src/instantsearch.js',
-    external,
-    output: [
-      {
-        sourcemap: true,
-        dir: `${outputDir}/es`,
-        format: 'es',
+});
+
+function outputs(vueVersion) {
+  const vuePlugin = vueVersion === 'vue3' ? vueV3 : vueV2;
+
+  const plugins = [
+    vuePlugin({ compileTemplate: true, css: false }),
+    commonjs(),
+    json(),
+    buble({
+      transforms: {
+        dangerousForOf: true,
       },
-    ],
-    preserveModules: true,
-    plugins: [...plugins],
-  },
-  {
-    input: 'src/instantsearch.umd.js',
-    external: ['vue'],
-    output: [
-      {
-        sourcemap: true,
-        file: `${outputDir}/umd/index.js`,
-        format: 'umd',
-        name: 'VueInstantSearch',
-        exports: 'named',
-        globals: {
-          vue: 'Vue',
+    }),
+    replace(processEnv({ NODE_ENV: 'production' })),
+    aliasVueCompat(vueVersion),
+    terser({
+      sourcemap: true,
+    }),
+  ];
+
+  const external = id =>
+    ['algoliasearch-helper', 'instantsearch.js', 'vue', 'mitt'].some(
+      dep => id === dep || id.startsWith(`${dep}/`)
+    );
+
+  return [
+    {
+      input: 'src/instantsearch.js',
+      external,
+      output: [
+        {
+          sourcemap: true,
+          file: `${vueVersion}/cjs/index.js`,
+          format: 'cjs',
+          exports: 'named',
         },
-      },
-    ],
-    plugins: [
-      ...plugins,
-      resolve({
-        browser: true,
-        preferBuiltins: false,
-      }),
-    ],
-  },
-];
+      ],
+      plugins: [
+        ...plugins,
+        replace({
+          'instantsearch.js/es': 'instantsearch.js/cjs',
+        }),
+        createFile(
+          'package.json',
+          JSON.stringify({ type: 'commonjs', sideEffects: true })
+        ),
+      ],
+    },
+    {
+      input: 'src/instantsearch.js',
+      external,
+      output: [
+        {
+          sourcemap: true,
+          dir: `${vueVersion}/es`,
+          format: 'es',
+        },
+      ],
+      preserveModules: true,
+      plugins: [
+        ...plugins,
+        createFile(
+          'index.js',
+          `import InstantSearch from './src/instantsearch.js';
+export default InstantSearch;
+export * from './src/instantsearch.js';`
+        ),
+        createFile(
+          'package.json',
+          JSON.stringify({ type: 'module', sideEffects: true })
+        ),
+        babel({
+          extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.vue'],
+          babelrc: false,
+          plugins: [
+            [
+              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',
+                ],
+              },
+            ],
+          ],
+        }),
+      ],
+    },
+    {
+      input: 'src/instantsearch.umd.js',
+      external: ['vue'],
+      output: [
+        {
+          sourcemap: true,
+          file: `${vueVersion}/umd/index.js`,
+          format: 'umd',
+          name: 'VueInstantSearch',
+          exports: 'named',
+          globals: {
+            vue: 'Vue',
+          },
+        },
+      ],
+      plugins: [
+        ...plugins,
+        resolve({
+          browser: true,
+          preferBuiltins: false,
+        }),
+        filesize(),
+      ],
+    },
+  ];
+}
+
+export default [...outputs('vue2'), ...outputs('vue3')];

scripts/__mocks__/fs.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-commonjs */
+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;