Add support for React Compiler

[L-Qun]

Now the users can enable the react compiler by adding a new field reactCompiler: true in the waku.config.ts file.

Let's take a look at the effects before and after enabling react compiler optimization.

const Child = () => {
  console.log("render");
  return <div>Child</div>;
};

export const Counter = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => setCount((c) => c + 1);

  return (
    <section className="border-blue-400 -mx-4 mt-4 rounded border border-dashed p-4">
      <div>Count: {count}</div>
      <button
        onClick={handleIncrement}
        className="rounded-sm bg-black px-2 py-0.5 text-sm text-white"
      >
        Increment
      </button>
      <Child />
    </section>
  );
};

When the Child component re-renders, it will console "render".

before enabling the react compiler:

after enabling the react compiler:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
waku	✅ Ready (Inspect)	Visit Preview	Aug 28, 2024 3:27pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[L-Qun]

Accordingly, update the React documentation. reactjs/react.dev#7133

[dai-shi]

We don't do this at least for now.
You can create vite.config.ts instead. See: https://x.com/dai_shi/status/1794171384761094385

Now, may I ask you to add ./docs/guides/react-compiler.mdx for the instruction? That would be helpful.

[L-Qun]

#857

[dai-shi]

Now, I wonder how you made it work without "annotation". 🤔