feat(config): add dist-custom-elements-bundle output

[acstll]

#369

[acstll]

@nowseemee @eeegor 👀

Also, proposal for "export" keys in package.json:

{
  "main": "dist/index.cjs.js",
  "module": "dist/custom-elements/index.js",
  "unpkg": "dist/scale-components/scale-components.esm.js",
}

Consumers will be doing one of these

Stencil lazy-loading via bundler

import { defineCustomElements } from '@telekom/scale-components/loader'
defineCustomElements()

Manual loading ("custom elements" output) via bundler

import { defineCustomElements } from '@telekom/scale-components/dist/custom-elements'
defineCustomElements() // loads everything! almost 1 MB

Stencil lazy-loading via script tag (CDN)

<!-- https://unpkg.com/@telekom/scale-components -->
<script type="module" src="https://unpkg.com/@telekom/[email protected]/dist/scale-components/scale-components.esm.js"></script>

---

Except for the CDN option ("unpkg" key), these keys in package.json are not relevant since all imports are pointing to some explicit-ish path already.

Both Webpack and Rollup (as mainstream bundlers) support the "module" key. If we set "module" to point to the "custom elements" output, one could do this, which actually ends up making sense:

import { ScaleButton, ScaleCard } from '@telekom/scale-components'

customElements.define('scale-button', ScaleButton)
customElements.define('scale-card', ScaleCard)

Final thoughts

• "main" shouldn't be used for ESM, so I kept it as-is.
• "jsnext:main" is deprecated, superseded by "module".
• I believe "es2015" and "es2017" are Angular stuff, and they point by default to those "empty" index files. I say it's OK to just remove them.

---

Ref: https://2ality.com/2017/04/setting-up-multi-platform-packages.html