This sounds fun

my unhelpful take is that I like both

<3

Nit: 212kb, the rest is a YouTube embed that I seem to recall is loaded lazily.

We are working on a new renderer that started out life as a way of addressing the specific corner cases that can lead to this. It will be released in early 2021.

It already does this. Only for .cjs files and things in node_modules.

It's built-in, just change the file extension to `.tsx` or create a new file with that extension.

I tried renaming public/index.js to public/index.tsx and get "./public/index.js - File not found" in the build watcher. Of course the index.html is still referencing the index.js file - what do I need to do?

Edit: It does work for e.g. pages/about/index.js to rename to index.tsx - so maybe it's just the main index that won't work as Typescript?

Also it looks like there is no default definition provided for imported CSS modules - the import resolves to a string so "styles.about" doesn't compile

You need to change the HTML to point to the tsx file too:

<script type="module" src="./index.tsx"></script>

There are ambient TS definitions for CSS Modules, it just had a bug in 1.0.0 - fix is merged and will be released shortly.

Thank you!

It's designed for rapid prototyping. You can just use npm or yarn and ignore this feature though, it's entirely optional.

FWIW the surface area for security issues here is far smaller than npx or similar tools, because WMR only writes JS/CSS/TS files to disk, and doesn't execute package scripts (where most vulnerabilities reside).

Hmm - it's not actually specific to Preact, it's just built by the Preact team and we use Preact in the docs. We are missing a bunch of documentation that would have made this clearer though, which I apologize for. While there are some optimizations for Preact in WMR, it can be used for vanilla JavaScript / Lit / Vue / Svelte / etc just fine.

Can you talk more about how WMR fits into the morass of Snowpack, Vite, Rome, Parcel etc.? The self-contained aspect looks great, but I'm at a loss as to how this doesn't also add more entropy into the pool of "next-gen" JS build tools (and thus more analysis paralysis for webdevs)...

The tooling space isn't broad enough to allow for differentiation across the board, so we have a number of tools that are working to validate/popularize a subset of functionality on top of the basics.

WMR's unique take is basically to be instant in every possible way, and to provide an ideal substrate for us to build and show Preact features that rely on bundler semantics. We have maintained a Webpack-based build tool for Preact for a while, and wanted to explore what a total re-think would look like. We also spent a while building out new pieces of the bundler that fit this model better than repurposing existing generalized tooling. This is one of the reasons WMR builds as fast as it does despite doing so much optimization work - it's designed around a singular goal and we allowed for very limited compromise.

I think that after a few years we will see a corresponding consolidation of the tools you mentioned, as the dust settles on this newer dev/prod split paradigm and it's effect on the bundler plugin ecosystem.

I assume features like prerendering HTML must only work for Preact though, right? That requires some significant assumptions about the codebase (compared to tools like Babel and Webpack). Also, hot reloading seems to only work for Preact components (based on the wording)

We've only shipped a helper library for Preact, but the Prerendering is actually generic. Some folks are working on helpers for other frameworks. The "API" is just a function exported from your first script tag:

export async function prerender(data) { return { html: "<h1>hi</h1>", links: ["/other-page"] } }

Hot reloading is a similar story, it's the same API as Vite and Snowpack:

if (import.meta.hot) import.meta.hot.accept(({ module }) => { do stuff }));

tbh I think a good chunk of that size is babel-parser, which we're looking into removing from the preact ESLint preset. Still quite a difference though.

Still, that's just a parser, right? An entire Python installation can fit in that space - parser, interpreter, stdlib and package manager. (and I'm sure many others too, python is just what I'm familiar with)

Oh I totally agree it's strange, haha. The cost tends to be magnified in Node land since everything is a million files.