The discussion focuses on bundling ESM and CommonJS JavaScript into a Discourse theme component. balupton shares their experience with creating a YouTube timestamps component, which imports an npm package using ESM and is then bundled into a single file using a build.bash script. The component’s JavaScript file is converted into a common/header.html file for Discourse, and the process is automated using an npm script. This approach could be useful for other theme component developers, and balupton plans to add support for Discourse theme components to boundation in the future.
Which does an ESM import of the npm package extract-timestmap, which was scaffolded using boundation which generates a CommonJS edition for Node.js, and a ESM edition for browsers.
The theme component javascript source/index.js imports the dependency extract-timestamp like so:
Which uses this build.bash file to turn the source/index.js file that contains our theme component logic, into a common/header.html for discourse:
Which is run by doing bash ./build.bash or if you are using a npm scripts workflow, via npm run build with:
Which results in a common/header.html file that is packaged into a single file (bundling the imports from earlier):
This could be useful to others developing their own theme components.
I’ll probably add first-class scaffolding support for discourse theme components to boundation at a later stage, to automate this guide.