v0.6.0 – Idiomorph

Overview

This release:

Makes it way simpler to use idiomorph with Hwy
Adds idiomorph as an option to getDefaultBodyProps
Adds new @hwy-js/client package, which allows us to drastically simplify the default client.entry.{js,ts} file
Includes idiomorph and new client helpers by default in new apps bootstrapped with create-hwy

Upgrade instructions

To upgrade your existing Hwy app to use idiomorph, do the following:

Step 1

npm i hwy@0.6.0
npm i -D @hwy-js/build@0.6.0 @hwy-js/client@0.6.0 @hwy-js/dev@0.6.0 idiomorph

Why is idiomorph a dev dependency? Because it's bundled into your client entry at build time (no need for idiomorph to live next to Hono/Hwy on your server other than as part of your static assets).

Step 2

Then, add { idiomorph: true } to your getDefaultBodyProps call (which returns the props you spread into your app's root body tag). For example:

<body {...getDefaultBodyProps({ idiomorph: true })}>

Or, if you're using NProgress, you can do this:

<body {...getDefaultBodyProps({ idiomorph: true, nProgress: true })}>

Step 3

Then, update your client.entry.{ts,js} file to the following:

import { initHtmx, initIdiomorph } from "@hwy-js/client";

initHtmx().then(initIdiomorph);

Or, if you're using NProgress, you can do this:

import { initHtmx, initIdiomorph, initNProgress } from "@hwy-js/client";

initHtmx().then(initIdiomorph).then(initNProgress);

New app instructions

Just run:

npx create-hwy@latest

Idiomorph will be included by default for new apps created with create-hwy.

Bonus

Adds @nsaunders's very cool CSS Hooks package (https://css-hooks.com) as an option alongside Tailwind and vanilla CSS when you bootstrap a new Hwy app using create-hwy! Closes #40.

sjc5 / hwy

v0.6.0 – Idiomorph #42