Description
Goal
I want to be able to use build websites with preact with modern ES Modules as a single index.html page, ie. no bundler.
Problem
Right now the "browser" build of preact/hooks can be seen here: https://unpkg.com/[email protected]/hooks/dist/hooks.module.js
The problem is, its not browser compatible due to import{options as n}from"preact";
Current solutions
Use unpkg.com with ?module
First of all its a bundler, second of all it load its own un-versioned preact which wouldn't be the same preact I already loaded?
Use npm.reversehttp.com
Again, another bundler and it also always loads the latest version making it hard to build a stable app.
Desired solution: Make preact/hooks pluggable into preact
I like how htm and preact are independent ES Modules that can be wired together, as seen here
https://twitter.com/pyrolistical/status/1266264165317935104
We can even continue to layer on a styled component library
<html>
<body>
<script type="module">
import htm from 'https://unpkg.com/[email protected]/dist/htm.module.js'
import {h, render} from 'https://unpkg.com/[email protected]/dist/preact.mjs'
import {styled, setPragma} from 'https://unpkg.com/[email protected]/dist/goober.module.js'
const html = htm.bind(h)
setPragma(h)
const Banner = styled('h1')`
background-color: red;
`
render(html`<${Banner}>thank you @_developit<//>`, document.body)
</script>
</body>
</html>If preact exposed an plugin system of some sort we could do the following:
// fake code
import Preact, {h, render} from 'https://unpkg.com/[email protected]/dist/preact.mjs'
import Hooks, {useState} from 'https://unpkg.com/[email protected]/hooks/dist/hooks.module.js'
Preact.install(Hooks)Why not just use a cdn bundler? I don't think this scales well into larger projects. When everything is welded together with a bundler, its harder get in there and customize.
And its non-standard! We don't need npm/commonjs anymore now that we have ES Modules.