Awesome
WMR
<img src="./docs/public/assets/wmr.svg" alt="wmr logo" width="400">[!WARNING] WMR is unfortunately no longer maintained. In its place, we'd recommend Vite with
@preactjs/preset-vite
. It offers many of the same features (like the prerendering API) but is much more robust and up to date. Thanks to all contributors and users over the years!
The tiny all-in-one development tool for modern web apps, in a single 2mb file with no dependencies.
All the features you'd expect and more, from development to production:
🔨 No entry points or pages to configure - just HTML files with <script type=module>
<br>
🦦 Safely import "packages"
from npm without installation<br>
📦 Smart bundling and caching for npm dependencies<br>
↻ Hot reloading for modules, Preact components and CSS<br>
⚡️ Lightning-fast JSX support that you can debug in the browser<br>
💄 Import CSS files and CSS Modules (*.module.css
)<br>
🔩 Out-of-the-box support for TypeScript<br>
📂 Static file serving with hot reloading of CSS and images<br>
🗜 Highly optimized Rollup-based production output (wmr build
)<br>
📑 Crawls and pre-renders your app's pages to static HTML at build time<br>
🏎 Built-in HTTP2 in dev and prod (wmr serve --http2
)<br>
🔧 Supports Rollup plugins, even in development where Rollup isn't used
Quickstart (recommended)
Create a new project in seconds using create-wmr:
<strong><code>npm init wmr your-project-name</code></strong>
or
<strong><code>yarn create wmr your-project-name</code></strong>
<p> <img width="400" src="https://user-images.githubusercontent.com/105127/100917537-4661e100-34a5-11eb-89bd-565b7bc31919.gif" alt="illustration of installation to build for wmr"> </p>💁 If you'd like ESLint to be set up for you, add
--eslint
to the command. Note: this will use 150mb of disk space.
Check out the docs to learn more
Packages
Package | Description | Version |
---|---|---|
wmr | Tiny all-in-one development tool for modern web apps | |
create-wmr | Create a new WMR project in seconds | |
@wmrjs/directory-import | Import a directory's files as an Array | |
@wmrjs/nomodule | Generate legacy fallback bundles for older browsers | |
@wmrjs/service-worker | Bundle service workers | |
preact-iso | Optimal code-splitting, hydration and routing for Preact |
Contributing
git clone git@github.com:preactjs/wmr.git
cd wmr
yarn
# run the demo (no compile)
yarn demo serve
# build and serve the demo for prod
yarn demo build:prod && yarn demo serve:prod
# build the single-file CLI:
yarn workspace wmr build
Adding a changeset
Don't forget to also include a changeset, by running this command at the root of the project:
yarn changeset
This will take you through a process of selecting the changed packages, the version updates and a description of the change. Afterwards, changesets
, will generate a .md
file inside a .changeset
directory. Please commit that file as well.
After all that, you are good to go. :+1: