chore: fix stitches issues

pmndrs · May 11, 2024 · ef2d8b3 · ef2d8b3
1 parent 454a771
commit ef2d8b3
Show file tree

Hide file tree

Showing 9 changed files with 522 additions and 291 deletions.
diff --git a/docs/app/components/Feedback/Feedback.tsx b/docs/app/components/Feedback/Feedback.tsx
@@ -25,7 +25,6 @@ export const Feedback = ({ location }: FeedbackProps) => {
   const isDarkMode = useIsDarkTheme()
 
   const handleClick = (type: 'upvote' | 'downvote') => () => {
-    console.log('clicked!')
     setSelected(type)
 
     const name =
@@ -146,7 +145,7 @@ const FeedbackButton = ({
               <X />
             </PopoverClose>
           </PopoverHeader>
-          <Form ref={formRef} method="post" action="/api/feedback" replace>
+          <Form ref={formRef} method="post" action="/api/feedback">
             <HiddenInput
               name="variant"
               type="checkbox"

diff --git a/docs/app/entry.client.tsx b/docs/app/entry.client.tsx
@@ -1,5 +1,31 @@
+import { RemixBrowser } from '@remix-run/react'
+import * as React from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
-import { RemixBrowser } from '@remix-run/react'
+import { ClientStyleContext } from '~/styles/client.context'
+import { getCssText } from '~/styles/stitches.config'
+
+interface ClientCacheProviderProps {
+  children: React.ReactNode
+}
+
+function ClientCacheProvider({ children }: ClientCacheProviderProps) {
+  const [sheet, setSheet] = React.useState(getCssText())
+
+  const reset = React.useCallback(() => {
+    setSheet(getCssText())
+  }, [])
+
+  return (
+    <ClientStyleContext.Provider value={{ reset, sheet }}>
+      {children}
+    </ClientStyleContext.Provider>
+  )
+}
 
-hydrateRoot(document, <RemixBrowser />)
+hydrateRoot(
+  document,
+  <ClientCacheProvider>
+    <RemixBrowser />
+  </ClientCacheProvider>
+)
diff --git a/docs/app/entry.server.tsx b/docs/app/entry.server.tsx
@@ -10,9 +10,14 @@ export default function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  const markup = renderToString(
+  let markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />
-  ).replace(/<\/head>/, `<style id="stitches">${getCssText()}</style></head>`)
+  )
+
+  markup = markup.replace(
+    /<style id="stitches">.*<\/style>/g,
+    `<style id="stitches">${getCssText()}</style>`
+  )
 
   responseHeaders.set('Content-Type', 'text/html')
 

diff --git a/docs/app/root.tsx b/docs/app/root.tsx
@@ -1,3 +1,5 @@
+import * as React from 'react'
+
 import {
   MetaFunction,
   LinksFunction,
@@ -6,7 +8,6 @@ import {
 } from '@remix-run/node'
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
@@ -20,6 +21,7 @@ import { globalStyles } from './styles/global'
 import { WidgetTheme } from './components/Widgets/WidgetTheme'
 import { WidgetPlausible } from './components/Widgets/WidgetPlausible'
 import { SiteFooter } from './components/Site/SiteFooter'
+import { ClientStyleContext } from './styles/client.context'
 
 export const meta: MetaFunction = () => {
   return [
@@ -82,7 +84,15 @@ export const loader: LoaderFunction = () => {
 function Document({ children }: { children: React.ReactNode }) {
   globalStyles()
 
-  const data = useLoaderData()
+  const clientStyleData = React.useContext(ClientStyleContext)
+
+  // Only executed on client
+  React.useEffect(() => {
+    // reset cache to re-apply global styles
+    clientStyleData.reset()
+  }, [clientStyleData])
+
+  const data = useLoaderData<{ ENV: object }>()
 
   return (
     <html lang="en">
@@ -91,8 +101,13 @@ function Document({ children }: { children: React.ReactNode }) {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
+        <style
+          id="stitches"
+          dangerouslySetInnerHTML={{ __html: clientStyleData.sheet }}
+          suppressHydrationWarning
+        />
         <WidgetPlausible />
-        <WidgetTheme />
+        {/* <WidgetTheme /> */}
       </head>
       <body>
         {children}
@@ -103,7 +118,6 @@ function Document({ children }: { children: React.ReactNode }) {
           }}
         />
         <Scripts />
-        {process.env.NODE_ENV === 'development' && <LiveReload />}
       </body>
     </html>
   )

diff --git a/docs/app/styles/client.context.ts b/docs/app/styles/client.context.ts
@@ -0,0 +1,13 @@
+import { createContext } from 'react'
+
+export interface ClientStyleContextData {
+  reset: () => void
+  sheet: string
+}
+
+const ClientStyleContext = createContext<ClientStyleContextData>({
+  reset: () => {},
+  sheet: '',
+})
+
+export { ClientStyleContext }
diff --git a/docs/package.json b/docs/package.json
@@ -16,18 +16,18 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^1.20.9",
     "@docsearch/react": "^3.5.2",
-    "@mdx-js/react": "^3.0.0",
-    "@mdx-js/rollup": "^3.0.0",
+    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/rollup": "^3.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-spring/rafz": "workspace:^",
     "@react-spring/web": "9.7.3",
-    "@remix-run/node": "^2.5.1",
-    "@remix-run/react": "^2.5.1",
-    "@remix-run/serve": "^2.5.1",
+    "@remix-run/node": "^2.9.2",
+    "@remix-run/react": "^2.9.2",
+    "@remix-run/serve": "^2.9.2",
     "@stitches/react": "^1.2.8",
     "@supabase/supabase-js": "^2.39.3",
     "@use-gesture/react": "^10.2.24",
@@ -45,20 +45,21 @@
     "rehype-parse": "9.0.0",
     "rehype-slug": "6.0.0",
     "remark-directive": "3.0.0",
-    "remix": "^2.5.1",
+    "remix": "^2.9.2",
     "unified": "11.0.4",
     "unist-util-visit": "5.0.0",
-    "vite": "^5.0.12",
+    "vite": "^5.2.11",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@remix-run/v1-route-convention": "^0.1.4",
+    "@vercel/remix": "^2.9.2-patch.2",
     "chokidar": "^3.5.3",
     "concurrently": "^8.2.2",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
     "ts-node": "^10.9.2",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "sideEffects": false
 }
diff --git a/docs/vite.config.mts b/docs/vite.config.mts
@@ -1,10 +1,11 @@
-import { unstable_vitePlugin as remix } from '@remix-run/dev'
+import { vitePlugin as remix } from '@remix-run/dev'
 import { defineConfig } from 'vite'
 import path from 'node:path'
 import { createRoutesFromFolders } from '@remix-run/v1-route-convention'
 import { installGlobals } from '@remix-run/node'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import mdx from '@mdx-js/rollup'
+import { vercelPreset } from '@vercel/remix/vite'
 
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
@@ -22,25 +23,13 @@ export default defineConfig({
   ssr: {
     noExternal: ['@docsearch/react', /@algolia/, 'algoliasearch'],
   },
-  optimizeDeps: {
-    include: ['react/jsx-runtime'],
-    exclude: ['@react-spring/rafz', '@react-spring/web'],
-  },
   resolve: {
     alias: {
       '@react-spring/rafz': path.resolve(__dirname, '../packages/rafz/src'),
       '@react-spring/web': path.resolve(__dirname, '../targets/web/src'),
     },
   },
   plugins: [
-    remix({
-      ignoredRouteFiles: ['**/.*', '**/concepts/index.mdx', '**/api/index.mdx'],
-      async routes(defineRoutes) {
-        // uses the v1 convention, works in v1.15+ and v2
-        return createRoutesFromFolders(defineRoutes)
-      },
-    }),
-    tsconfigPaths(),
     // @ts-expect-error – TODO: fix mdx plugin failing with Vite types.
     mdx({
       providerImportSource: '@mdx-js/react',
@@ -57,5 +46,14 @@ export default defineConfig({
         parseCallouts,
       ],
     }),
+    remix({
+      ignoredRouteFiles: ['**/.*', '**/concepts/index.mdx', '**/api/index.mdx'],
+      presets: [vercelPreset()],
+      async routes(defineRoutes) {
+        // uses the v1 convention, works in v1.15+ and v2
+        return createRoutesFromFolders(defineRoutes)
+      },
+    }),
+    tsconfigPaths(),
   ],
 })
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@react-three/fiber": "^8.11.9",
-    "@remix-run/dev": "^2.5.1",
+    "@remix-run/dev": "^2.9.2",
     "@simonsmith/cypress-image-snapshot": "^9.0.1",
     "@swc/core": "^1.3.100",
     "@swc/jest": "^0.2.29",
@@ -105,7 +105,7 @@
     "tsup": "^6.7.0",
     "turbo": "^1.11.1",
     "typescript": "5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.2.11",
     "zdog": "^1.1.3"
   },
   "publishConfig": {