Remix migration

app/entry.client.tsx

@@ -0,0 +1,39 @@
+import { CacheProvider } from "@emotion/react";
+import { ClientStyleContext } from "./context.js";
+import createEmotionCache, { defaultCache } from "./createEmotionCache.js";
+import { hydrateRoot } from "react-dom/client";
+import { Integrations } from "@sentry/tracing";
+import { RemixBrowser } from "@remix-run/react";
+import * as Sentry from "@sentry/react";
+import { type ReactNode, StrictMode, useState } from "react";
+
+Sentry.init({
+  dsn:
+    document.querySelector("meta[name='dsn']")?.getAttribute("content") ??
+    undefined,
+  integrations: [new Integrations.BrowserTracing()],
+  tracesSampleRate: 0.1,
+});
+
+function ClientCacheProvider({ children }: { children: ReactNode }) {
+  const [cache, setCache] = useState(defaultCache);
+
+  function reset() {
+    setCache(createEmotionCache());
+  }
+
+  return (
+    <ClientStyleContext.Provider value={{ reset }}>
+      <CacheProvider value={cache}>{children}</CacheProvider>
+    </ClientStyleContext.Provider>
+  );
+}
+
+hydrateRoot(
+  document,
+  <StrictMode>
+    <ClientCacheProvider>
+      <RemixBrowser />
+    </ClientCacheProvider>
+  </StrictMode>
+);