riot.esm.js

[jbrozek]

I see that riot.ems.js was removed when moving into 7.0.0. Is the intention to just stay with 6.1.2 if we use riot this way or have I just not see the solution?

[GianlucaGuarini]

riot.esm.js was moved into its own folder to improve the tree shaking of its dependencies.
You can load it in your browser here or just use it by installing Riot.js via npm and bundling it by yourselves with webpack or rollup. npm init riot sets up everything you need for you.

[GianlucaGuarini]

You can compare the lib dependencies (and tree shaking results) between the two versions: https://bundlephobia.com/package/riot@7.0.6 vs https://bundlephobia.com/package/riot@6.1.2

[jbrozek]

We don't use node as our back end (exclusively), so it was easy for us to just use the existing esm file directly in the browser along with riot cli. Let me attempt building the esm file as you suggest.

[GianlucaGuarini]

The link above provided works just fine https://plnkr.co/edit/kOSQOlHobPzPan5L?open=lib%2Fscript.js

[jbrozek]

So if I install riot via npm how do I use the riot/esm folder via webpack? I don't want to link to a 3rd party site, and I want to generate a single file (local). Not running a SPA, so instead of multiple webpack entries, I just want one to generate this file and use it as above.

[GianlucaGuarini]

You don't need to generate anything. A simple importmap config should be enough in your case:
https://plnkr.co/edit/AKWZkZbHOwC3Lsr2?open=lib%2Fscript.js

[jbrozek]

esbuild allowed me to create an riot.esm.js, below is an example if anyone would be assisted by this

npm install esbuild
.\node_modules\.bin\esbuild .\node_modules\riot\esm\riot.js --bundle --format=esm --outfile=riot.esm.js

that outfile can be directly used in the browser

<script type='module'>
    import * as riot from '/js/lib/riot.esm.js'; //generated from esbuild
    import raw from '/js/module-dist/riot/raw.js'; //generated from riot cli
    riot.component(raw)(document.querySelector('module'), { html: "<p class='container'>Raw Test</p>" });
</script>

where raw.riot is (pre riot cli)

<raw>
  <script>
    export default {
      setInnerHTML() {
        this.root.innerHTML = this.props.html
      },
      onMounted() {
        this.setInnerHTML()
      },
      onUpdated() {
        this.setInnerHTML()
      }
    }
  </script>
</raw>