Numerous Pancakes Munched

    @rschristian/twind-wmr
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    @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

    Keywords

    Install

    npm i @rschristian/twind-wmr

    DownloadsWeekly Downloads

    2

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    8.01 kB

    Total Files

    5

    Last publish

    Collaborators

    • rschristian