build: Dual export ESM and CJS

[sddonne]

Part of elastic/kibana#250514

Summary

After testing the installation of the package in Kibana here there are some changes in how the distributable is built so the package can be easily consumed.

Details

• We are now distributing an ESM version and a CJS version. The ESM version will be used by bundlers (i.e. Webpack in Kibana) and will allow to do an efficient tree shaking for code running in the browser.

  The CJS version will be used by Node applications (i.e. Kibana web server) that cannot handle ESM directly.

  (Which version to use is decided automatically by the client, when using require or import, they check the export rules to know which one to use)

"exports": {
    ".": {
      "types": "./lib/esm/index.d.ts",
      "import": "./lib/esm/index.js",
      "require": "./lib/cjs/index.js",
      "default": "./lib/cjs/index.js"
    }
  },

• @babel/runtime has been added as a dev dependency as it's needed to properly work with package using yarn link.

[stratoula]

I don't see this at EC, how are they doing this?

[sddonne]

They only export CJS, having the extensions is a requirement for exporting ESM, which is more modern and allows better tree shaking, I think having the extensions is a fare price to pay for having that.

[stratoula]

I don't like it at all tbh. I am pretty sure there are other ways to fix it. From a quick search I found some ideas. Let's do a research first to solve this because I personally find it very ugly and the differentiation from kibana is also bad

[sddonne]

I was in doubt about adding an extra tool in the building phase, but I'm glad we do this, added tsup to transpile the code so we can keep using the way of importing Kibana has.

[stratoula]

Looks great honestly

[stratoula]

❤️