Open juniorbotelho opened 1 year ago
Still working on an updated example.
any progress on this?
Is there any news? We rely heavily on the shim approach, and would love to see this happening.
Any updates on this?
Hello @sastan!
Could you maybe share some overall ideas so we can try to implement it ourselves and potentially open a PR? I tried different approaches with no success. If you have something in mind or protocode it would help a lot 🚀
For those willing just to try it, a hideous way to do so which only works in client components is this one:
///useTwind.ts
import {useState, useEffect} from 'react';
import { defineConfig } from '@twind/core';
import presetAutoprefix from '@twind/preset-autoprefix';
import presetTailwind from '@twind/preset-tailwind';
import {setup} from '@twind/core';
export const config = defineConfig({
presets: [presetAutoprefix(), presetTailwind()],
});
export const useTwind = () => {
const [isLoaded, setIsLoaded] = useState(null);
useEffect(() => {
const asyncFn = async () => {
setup(config);
setIsLoaded(true);
};
asyncFn();
}, []);
return isLoaded;
};
And then in your client components:
'use client';
import { useState, useEffect, lazy } from 'react';
import { useTwind } from '../../hooks/useTwind';
export const Counter = () => {
const [value, setValue] = useState(0);
const isLoaded = useTwind();
if (!isLoaded) {
return <div>Loading...</div>;
}
return (
<div className='m-10'>
<h1 className={`mt-2`}>Count: {value}</h1>
<button onClick={() => setValue((prev) => prev + 1)}>
Increment
</button>
</div>
);
};
Btw I saw a considerable performance drop with v1 (Yes, I'm running the setup onMount so obviously it has a bigger impact in this ugly code, but I wonder what made the setup slower).
Also for inspiration, this is how kuma-ui fixes it for ssr https://www.kuma-ui.com/docs/install
https://github.com/poteboy/kuma-ui/blob/main/packages/next-plugin/src/registry.tsx
How to setup twind-next with new "app" folder from next.js 13?