instructions on how to use preact as a module in ES6+ client side codebases?

I’m writing a minimal, unbundled PoC in which the browser just gets <script src="index.js" type="module"></script> after which it discovers all the imports and does what it needs to do without a need for webpack or a large babel config.

Instead I only use babel to convert JSX to regular JS (no ES5 conversions, just straight up “only convert the JSX, thanks”) and then let the browser deal with the rest. However, that leaves me with code that looks like:

import { h, render, Component } from 'preact';
import { router } from "../router/router.js";
import { Pattern } from "./pattern.js";

class Arranger extends Component {
    constructor(top) {
        this.pattern = new Pattern(this, top);
        render(this, top);
    }

    render() {
        return React.createElement(
            "div",
            { className: "controls" },
            React.createElement(
                "button",
                { onClick: evt => this.stop() },
                "\u25FC"
            ),
            React.createElement(
                "button",
                { onClick: evt => this.play() },
                "\u25B6"
            ),
            React.createElement(
                "label",
                { className: "bpm" },
                React.createElement("input", { type: "number", min: "1", max: "400", value: "120", onChange: evt => this.setBPM(evt.target.value) }),
                "BPM"
            ),
            React.createElement(
                "button",
                { onClick: evt => this.demo() },
                "demo"
            )
        );
    }

    setBPM(bpm) {
        this.player.setBPM(bpm | 0);
    }

    demo() {
        this.pattern.demo();
        this.play();
    }

    play() {
        this.player.play();
    }

    stop() {
        this.pattern.stop();
        this.player.stop();
    }
}

export { Arranger };

but without a way to load preact as a normal javascript module. The CDN link mentioned on the website (<script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script>) doesn’t export anything, so is there a module version of preact available off of CDN, and if so, can the link for that be added to the docs?

[pl12133]

Good idea, the docs are over at preact-www so I’ve opened a PR there.

[pl12133]

Can you try with the .mjs built copy? https://cdn.jsdelivr.net/npm/preact/dist/preact.mjs