add vike-react-zustand

examples/zustand/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/

examples/zustand/layouts/HeadDefault.tsx

@@ -0,0 +1,11 @@
+export default HeadDefault
+
+import React from 'react'
+
+function HeadDefault() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </>
+  )
+}

examples/zustand/layouts/LayoutDefault.tsx

@@ -0,0 +1,72 @@
+export default LayoutDefault
+
+import './style.css'
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+
+function LayoutDefault({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxWidth: 900,
+        margin: 'auto'
+      }}
+    >
+      <Sidebar>
+        <Logo />
+      </Sidebar>
+      <Content>{children}</Content>
+    </div>
+  )
+}
+
+function Sidebar({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      id="sidebar"
+      style={{
+        padding: 20,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        lineHeight: '1.8em',
+        borderRight: '2px solid #eee'
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+function Content({ children }: { children: React.ReactNode }) {
+  return (
+    <div id="page-container">
+      <div
+        id="page-content"
+        style={{
+          padding: 20,
+          paddingBottom: 50,
+          minHeight: '100vh'
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Logo() {
+  return (
+    <div
+      style={{
+        marginTop: 20,
+        marginBottom: 10
+      }}
+    >
+      <a href="/">
+        <img src={logoUrl} height={64} width={64} />
+      </a>
+    </div>
+  )
+}

examples/zustand/layouts/style.css

@@ -0,0 +1,29 @@
+/* Links */
+a {
+  text-decoration: none;
+}
+#sidebar a {
+  padding: 2px 10px;
+  margin-left: -10px;
+}
+#sidebar a.is-active {
+  background-color: #eee;
+}
+
+/* Reset */
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* Page Transition Anmiation */
+#page-content {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+body.page-is-transitioning #page-content {
+  opacity: 0;
+}

examples/zustand/package.json

@@ -0,0 +1,23 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "immer": "^10.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "^5.3.3",
+    "vike": "^0.4.168",
+    "vike-react": "^0.4.15",
+    "vike-react-zustand": "^0.0.1",
+    "vite": "^5.0.10",
+    "zustand": "^4.4.7"
+  },
+  "type": "module"
+}

examples/zustand/pages/+config.ts

@@ -0,0 +1,17 @@
+export { config }
+
+import type { Config } from 'vike/types'
+import vikeReact from 'vike-react/config'
+import vikeReactZustand from 'vike-react-zustand/config'
+
+// Default configs (can be overridden by pages)
+const config = {
+  // <title>
+  title: 'My Vike + React App',
+  // https://vike.dev/stream
+  stream: true,
+  // https://vike.dev/ssr - this line can be removed since `true` is the default
+  ssr: true,
+  // https://vike.dev/extends
+  extends: [vikeReact, vikeReactZustand]
+} satisfies Config

examples/zustand/pages/_error/+Page.tsx

@@ -0,0 +1,22 @@
+export default Page
+
+import React from 'react'
+
+function Page({ is404, errorInfo }: { is404: boolean; errorInfo?: string }) {
+  if (is404) {
+    return (
+      <>
+        <h1>404 Page Not Found</h1>
+        <p>This page could not be found.</p>
+        <p>{errorInfo}</p>
+      </>
+    )
+  } else {
+    return (
+      <>
+        <h1>500 Internal Server Error</h1>
+        <p>Something went wrong.</p>
+      </>
+    )
+  }
+}

examples/zustand/pages/index/+Page.tsx

@@ -0,0 +1,32 @@
+export default Page
+
+import React, { useEffect } from 'react'
+import { Counter } from './Counter'
+import { useStore } from '../../store'
+import { useStoreApi } from 'vike-react-zustand'
+
+function Page() {
+  const nodeVersion = useStore((s) => s.nodeVersion)
+  const storeApi = useStoreApi(useStore)
+  useEffect(
+    () =>
+      storeApi.subscribe((state) => {
+        console.log(state)
+      }),
+    []
+  )
+
+  return (
+    <>
+      <h1>My Vike + React app</h1>
+      This page is:
+      <ul>
+        <li>Rendered to HTML.</li>
+        <li>
+          Interactive while loading. <Counter />
+        </li>
+      </ul>
+      <div>Node version from server: {nodeVersion}</div>
+    </>
+  )
+}

examples/zustand/pages/index/Counter.tsx

@@ -0,0 +1,10 @@
+export { Counter }
+
+import React from 'react'
+import { useStore } from '../../store'
+
+function Counter() {
+  const { counter, setCounter } = useStore()
+
+  return <button onClick={() => setCounter(counter + 1)}>Counter {counter}</button>
+}

examples/zustand/readme.md

@@ -0,0 +1,8 @@
+Example of using `vike-react-zustand`.
+
+```bash
+git clone git@github.com:vikejs/vike-react
+cd vike-react/examples/zustand/
+npm install
+npm run dev
+```

examples/zustand/store.ts

@@ -0,0 +1,30 @@
+export { useStore }
+
+import { serverOnly, create, withPageContext } from 'vike-react-zustand'
+import { immer } from 'zustand/middleware/immer'
+
+interface Store {
+  counter: number
+  setCounter: (value: number) => void
+  nodeVersion: string
+}
+
+const useStore = create<Store>()(
+  // the devtools middleware is included by default
+  withPageContext((pageContext) =>
+    immer((set, get) => ({
+      counter: Math.floor(10000 * Math.random()),
+      setCounter(value) {
+        set((state) => {
+          state.counter = value
+        })
+      },
+
+      // the function passed to serverOnly only runs on the server
+      // the return value is available on client/server
+      ...serverOnly(() => ({
+        nodeVersion: process.version
+      }))
+    }))
+  )
+)

examples/zustand/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "ES2020",
+    "moduleResolution": "Node",
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "jsx": "react",
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  }
+}

examples/zustand/vite.config.ts

@@ -0,0 +1,8 @@
+import react from '@vitejs/plugin-react'
+import vike from 'vike/plugin'
+import type { UserConfig } from 'vite'
+import { vikeReactZustand } from 'vike-react-zustand/plugin'
+
+export default {
+  plugins: [react(), vike(), vikeReactZustand()]
+} satisfies UserConfig

package.json

@@ -26,7 +26,8 @@
   "pnpm": {
     "overrides": {
       "vike-react": "link:./packages/vike-react/",
-      "vike-react-query": "link:./packages/vike-react-query/"
+      "vike-react-query": "link:./packages/vike-react-query/",
+      "vike-react-zustand": "link:./packages/vike-react-zustand/"
     }
   },
   "devDependencies": {

packages/vike-react-zustand/.gitignore

@@ -0,0 +1,2 @@
+/node_modules/
+/dist/