@rschristian/twind-wmr

@rschristian/twind-wmr is a (slightly) opinionated integration for Twind v1 with WMR. Twind's own WMR integration is built for v0 and requires you to do a bit more work if you don't want to hydrate with Twind in production.

Install

$ yarn add @rschristian/twind-wmr

Usage

import {
     LocationProvider,
     Router,
     Route,
     lazy,
     ErrorBoundary,
-    hydrate,
-    prerender as ssr
 } from 'preact-iso';
+import { withTwind } from '@rschristian/twind-wmr';
 import Home from './pages/home/index.js';
 import NotFound from './pages/_404.js';
 import Header from './header.js';

 const About = lazy(() => import('./pages/about/index.js'));

 export function App() {
     return (
         <LocationProvider>
             <div class="app">
                 <Header />
                 <ErrorBoundary>
                     <Router>
                         <Route path="/" component={Home} />
                         <Route path="/about" component={About} />
                         <Route default component={NotFound} />
                     </Router>
                 </ErrorBoundary>
             </div>
         </LocationProvider>
     );
 }

+const { hydrate, prerender } = withTwind(
+    () => import('./twind.config'),
+    (data) => <App {...data} />,
+    import.meta.env.NODE_ENV != 'production',
+);

hydrate(<App />);

-export async function prerender(data) {
-    return await ssr(<App {...data} />);
-}
+ export { prerender };

API

config

Type: () => Promise<{ twindConfig: TwindConfig | TwindUserConfig }>

Provide your Twind config via a callback function that returns a Promise containing your config upon the twindConfig key. While this is a tad cumbersome, it's done to ensure that no pieces of Twind are dragged into your client-side bundles when you choose not to hydrate with it.

prerenderCallback

Type: (data: any) => VNode

Argument passed to preact-iso's prerender. Pass a callback target for prerendering your app.

hydrateWithTwind

Type: boolean
Default: import.meta.env.NODE_ENV !== 'production'

Whether Twind should be allowed to run client-side, effectively. By default it's disabled in prod.

If you're using grouped classes, I suggest you look at wmr-plugin-tailwind-grouping to expand the groups in your JS bundles. Without Twind to translate grouped classes client-side, hydrating with them will result in broken styling.

Acknowledgements

This is massively based upon the excellent @twind/wmr by github.com/sastan. I was wanting to extract out my config (as I've written this dozens of times now) and wanted to support Twind v1, which the official Twind integration hasn't been updated for.

License

MIT © Ryan Christian