chore: prepare demos for Vercel

Author: universse

README.md

@@ -204,3 +204,141 @@ await themeStore.restore() // restore persisted theme selection
 themeStore.sync() // useful for syncing theme selection across tabs and windows
 themeStore.subscribe((themes, resolvedThemes) => { /* ... */ }) // return unsubscribe function
 ```
+
+## React Integration
+
+### Client-only persistence
+
+Ensure that you have initialized Palettez as per instructions under [Basic Usage](#basic-usage). As theme selection is only known on the client, you should only render component with `usePalettez` once the app has mounted.
+
+```tsx
+import * as React from 'react'
+import { usePalettez } from 'palettez/react'
+
+function Component() {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+      setMounted(true)
+  }, [])
+
+  return mounted ? <ThemeSelect /> : null
+}
+
+function ThemeSelect() {
+  const { 
+    themesAndOptions,
+    themes,
+    setThemes,
+    
+    getResolvedThemes,
+    restore,
+    sync,
+    subscribe,
+  } = usePalettez(window.palettez.getThemeStore())
+
+  return themesAndOptions.map((theme) => (
+    <div key={theme.key}>
+      <label htmlFor={theme.key}>{theme.label}</label>
+      <select
+        id={theme.key}
+        name={theme.key}
+        onChange={(e) => {
+          setThemes({ [theme.key]: e.target.value })
+        }}
+        value={themes[theme.key]}
+      >
+        {theme.options.map((option) => (
+          <option key={option.key} value={option.key}>
+            {option.value}
+          </option>
+        ))}
+      </select>
+    </div>
+  ))
+}
+```
+
+### Server-side persistence
+
+If you are storing theme selection on the server, you can choose to use `memoryStorageAdapter` to avoid storing any data client-side. There's no need to initialize Palettez in a synchronous script. Ensure you pass the persisted theme selection when initializing Palettez as `initialThemes`.
+
+```tsx
+import { createThemeStore, memoryStorageAdapter } from 'palettez'
+import { usePalettez } from 'palettez/react'
+import * as React from 'react'
+
+export function ThemeSelect({
+	persistedServerThemes,
+}: { persistedServerThemes: Record<string, string> }) {
+	const [themeStore] = React.useState(() =>
+		createThemeStore({
+			config: {
+				colorScheme: {
+					label: 'Color scheme',
+					options: {
+						system: {
+							value: 'System',
+							isDefault: true,
+							media: {
+								query: '(prefers-color-scheme: dark)',
+								ifMatch: 'dark',
+								ifNotMatch: 'light',
+							},
+						},
+						light: { value: 'Light' },
+						dark: { value: 'Dark' },
+					},
+				},
+				contrast: {
+					label: 'Contrast',
+					options: {
+						standard: { value: 'Standard', isDefault: true },
+						high: { value: 'High' },
+					},
+				},
+			},
+			initialThemes: persistedServerThemes,
+			storage: memoryStorageAdapter(),
+		}),
+	)
+
+	const { themesAndOptions, themes, setThemes, subscribe } = usePalettez(themeStore)
+
+	React.useEffect(() => {
+		const unsubscribe = subscribe((_, resolvedThemes) => {
+			for (const [theme, optionKey] of Object.entries(resolvedThemes)) {
+				;(
+					(document.querySelector('.theme') as
+						| HTMLElementTagNameMap['main']
+						| null) || document.documentElement
+				).dataset[theme] = optionKey
+			}
+		})
+
+		return () => {
+			unsubscribe()
+		}
+	}, [subscribe])
+
+	return themesAndOptions.map((theme) => (
+		<div key={theme.key}>
+			<label htmlFor={theme.key}>{theme.label}</label>{' '}
+			<select
+				id={theme.key}
+				name={theme.key}
+				onChange={(e) => {
+					setThemes({ [theme.key]: e.target.value })
+				}}
+				value={themes[theme.key]}
+			>
+				{theme.options.map((option) => (
+					<option key={option.key} value={option.key}>
+						{option.value}
+					</option>
+				))}
+			</select>
+		</div>
+	))
+}
+```

demos/astro/astro.config.js

@@ -1,11 +1,9 @@
-import node from '@astrojs/node'
 import react from '@astrojs/react'
+import vercel from '@astrojs/vercel/serverless'
 import { defineConfig } from 'astro/config'
 
 export default defineConfig({
-	adapter: node({
-		mode: 'standalone',
-	}),
+	adapter: vercel(),
 	integrations: [react()],
 	output: 'hybrid',
 })

demos/astro/package.json

@@ -12,8 +12,8 @@
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
-		"@astrojs/node": "8.3.3",
 		"@astrojs/react": "3.6.2",
+		"@astrojs/vercel": "7.7.2",
 		"@types/react": "18.3.3",
 		"@types/react-dom": "18.3.0",
 		"typescript": "5.5.4"

demos/remix/app/entry.client.tsx

@@ -1,5 +1,4 @@
-import type { MetaFunction } from '@remix-run/node'
-import { Outlet } from '@remix-run/react'
+import { type MetaFunction, Outlet } from '@remix-run/react'
 import type * as React from 'react'
 import './style.css'
 

demos/remix/app/entry.server.tsx

@@ -1,15 +1,15 @@
-import {
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	json,
-} from '@remix-run/node'
 import {
 	Links,
 	Meta,
 	Scripts,
 	useActionData,
 	useLoaderData,
 } from '@remix-run/react'
+import {
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+	json,
+} from '@vercel/remix'
 import { getThemeAndOptions } from 'palettez'
 import palettez from 'palettez/raw?raw'
 import { createStoresScript } from '../multi-store-scripts'

demos/remix/app/root.tsx

@@ -1,15 +1,15 @@
-import {
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	json,
-} from '@remix-run/node'
 import {
 	Links,
 	Meta,
 	Scripts,
 	useActionData,
 	useLoaderData,
 } from '@remix-run/react'
+import {
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+	json,
+} from '@vercel/remix'
 import { getThemeAndOptions } from 'palettez'
 import { ThemeSelect } from '../theme-select'
 import { ThemeStoreProvider } from '../theme-store-provider'