[Idea] Invisible routing component

[zaydek]

In order to make page-based routing work the way we want it to, we probably want to transform source files here. In development, we can use the render or hydrate technique we used previously:

import App from "./App"
import React from "react"
import ReactDOM from "react-dom"
import routes from "./routes"
import { BrowserRouter as Router } from "react-router-dom"

if (process.env.NODE_ENV === "development" || !routes[window.location.pathname]) {
  console.log("[Zazen] ReactDOM.render")
  ReactDOM.render(
    <Router>
      <App />
    </Router>,
    document.getElementById("root"),
  )
} else {
  console.log("[Zazen] ReactDOM.hydrate")
  ReactDOM.hydrate(
    <Router>
      <App />
    </Router>,
    document.getElementById("root"),
  )
}

Our current code looks like this:

    const transformed = transformSync(
      `
import React from "react"
import ReactDOM from "react-dom"

import Page from "../pages/${basename}"
import props from "./props.generated.json"

ReactDOM.hydrate(
  <Page {...props[${JSON.stringify(basename)}]} />,
  document.getElementById("root"),
)
`,
      {
        loader: "tsx",
      },
    )

So the idea is that we use this invisible component to control top-level routing (users can also <Document> to customize top-level app stuff).