Make Yasml more Next.js 13 compatible

[jsheely]

Goal

Make it so that the developer experience for using Yasml in Next 13 is more seemless

🟦 Codegen

• [ ] Need to figure out how to hook into SWC compiler to do the same codegen we do for vite so folks don't have to use the ESLint rule or manually add the specific properties they want to watch

🟩Context

• [x] It looks like the use client is needed for anything that uses React.Context in Next 13 since it is doing much of the rendering on the server.
• [x] Can we still use React Context and pivot depending on if Next.js is doing the compilation?
• [ ] Can we switch out React Context for a another state hydration process all together?
• [ ] Are Signals the way to go?

Updates

• 🟩 Okay so it looks like use client is fine with Yasml and everything fully server side renders fine so there is no need to do anything special for this technically.
• 🟩 We could create an ESLint rule to warn folks that using Yasml Provider or useSelector will need to be marked as use client
• 🟩 Because Yasml is built to take initial props to the state function. I think if the server fetches the data and just simply passes it as an initial state prop it can handle the hand off from server to client seemlessly without needing a proxy component to handle that
• 🟦 Next.js still uses babel for plugins so we could probably create a plugin that taps into the pipeline to do the file transformation we do like with Vite. See babel/docs/plugins. Though that appears to disable SWC. May need to look into SWC Plugins.
• 🟦 Can't get the application to run at all using a blank .babelrc file. SWC it is...

  Syntax error: Unexpected token, expected ","
  11 | export default function RootLayout({
  12 |   children,
  > 13 | }: {
   |  ^
  14 |   children: React.ReactNode
  15 | }) {
  16 |   return (

• 🟦 Looks like we'll have to write the plugin in Rust and convert to WASM to handle the transformation. Not sure how this will effect our usage of eslint_d. Will probably need to find a rust crate that can do the similar tree walk. See: swc/ecmascript/getting-started