feat: new extension vike-react-redux (closes #87)

examples/redux/.gitignore

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

examples/redux/.test-dev.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('pnpm run dev')

examples/redux/.test-preview.test.ts

@@ -0,0 +1,2 @@
+import { testRun } from './.testRun'
+testRun('pnpm run preview')

examples/redux/.testRun.ts

@@ -0,0 +1,39 @@
+export { testRun }
+
+import { test, expect, run, page, getServerUrl, autoRetry } from '@brillout/test-e2e'
+
+function testRun(cmd: `pnpm run ${'dev' | 'preview'}`) {
+  run(cmd)
+
+  const content1 = 'This page is'
+  const content2 = 'The counter value is'
+
+  test('The store persists across page navigation', async () => {
+    let body: string | null
+
+    await page.goto(getServerUrl() + '/')
+    body = await page.textContent('body')
+
+    expect(body).toContain(content1)
+    await testCounter()
+
+    await page.click('a:has-text("About")')
+    await page.click('button')
+
+    body = await page.textContent('body')
+    expect(body).toContain(content2)
+    expect(await page.textContent('button')).toContain('Counter 2')
+  })
+}
+
+async function testCounter() {
+  // autoRetry() for awaiting client-side code loading & executing
+  await autoRetry(
+    async () => {
+      expect(await page.textContent('button')).toBe('Counter 0')
+      await page.click('button')
+      expect(await page.textContent('button')).toContain('Counter 1')
+    },
+    { timeout: 5 * 1000 },
+  )
+}

examples/redux/components/Counter.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { useAppDispatch, useAppSelector } from '../lib/hooks'
+import { increment, selectCount } from '../lib/features/counter/counterSlice'
+
+export function Counter() {
+  const dispatch = useAppDispatch()
+  const count = useAppSelector(selectCount)
+
+  return (
+    <button type="button" onClick={() => dispatch(increment())}>
+      Counter {count}
+    </button>
+  )
+}

examples/redux/components/Link.tsx

@@ -0,0 +1,15 @@
+export { Link }
+
+import { usePageContext } from 'vike-react/usePageContext'
+import React from 'react'
+
+function Link({ href, children }: { href: string; children: string }) {
+  const pageContext = usePageContext()
+  const { urlPathname } = pageContext
+  const isActive = href === '/' ? urlPathname === href : urlPathname.startsWith(href)
+  return (
+    <a href={href} className={isActive ? 'is-active' : undefined}>
+      {children}
+    </a>
+  )
+}

examples/redux/global.d.ts

@@ -0,0 +1,12 @@
+import { AppStore, RootState } from './pages/+redux'
+
+declare global {
+  namespace Vike {
+    interface PageContext {
+      reduxStore?: AppStore
+      reduxState?: RootState
+    }
+  }
+}
+
+export {}

examples/redux/layouts/HeadDefault.tsx

@@ -0,0 +1,14 @@
+export default HeadDefault
+
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+
+function HeadDefault() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="description" content="Demo showcasing Vike + React" />
+      <link rel="icon" href={logoUrl} />
+    </>
+  )
+}

examples/redux/layouts/LayoutDefault.tsx

@@ -0,0 +1,75 @@
+export default LayoutDefault
+
+import './style.css'
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+import { Link } from '../components/Link'
+
+function LayoutDefault({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        maxWidth: 900,
+        margin: 'auto',
+      }}
+    >
+      <Sidebar>
+        <Logo />
+        <Link href="/">Welcome</Link>
+        <Link href="/about">About</Link>
+      </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/redux/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/redux/lib/features/counter/counterSlice.ts

@@ -0,0 +1,38 @@
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+
+export interface CounterSliceState {
+  value: number
+}
+
+const initialState: CounterSliceState = {
+  value: 0,
+}
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment: (state) => {
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+    initializeCount: (state, action: PayloadAction<number>) => {
+      state.value = action.payload
+    },
+  },
+  selectors: {
+    selectCount: (counter) => counter.value,
+  },
+})
+
+export const { selectCount } = counterSlice.selectors
+
+export const { increment, decrement, incrementByAmount, initializeCount } = counterSlice.actions
+
+export default counterSlice.reducer

examples/redux/lib/hooks.ts

@@ -0,0 +1,8 @@
+// This file serves as a central hub for re-exporting pre-typed Redux hooks.
+import { useDispatch, useSelector, useStore } from 'react-redux'
+import type { AppDispatch, AppStore, RootState } from '../pages/+redux'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppStore = useStore.withTypes<AppStore>()

examples/redux/package.json

@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite build && vite preview"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.5.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.2.0",
+    "typescript": "^5.3.3",
+    "vike": "^0.4.211",
+    "vike-react": "^0.5.12",
+    "vike-react-redux": "^0.0.0",
+    "vite": "^5.4.0"
+  },
+  "type": "module"
+}

examples/redux/pages/+config.ts

@@ -0,0 +1,15 @@
+import type { Config } from 'vike/types'
+import Layout from '../layouts/LayoutDefault'
+import Head from '../layouts/HeadDefault'
+import vikeReact from 'vike-react/config'
+import vikeReactRedux from 'vike-react-redux/config'
+
+// Default configs (can be overridden by pages)
+export default {
+  Layout,
+  Head,
+  // <title>
+  title: 'My Vike + React App',
+  extends: [vikeReact, vikeReactRedux],
+  passToClient: ['routeParams'],
+} satisfies Config

examples/redux/pages/+redux.ts

@@ -0,0 +1,18 @@
+export const redux = {
+  createStore,
+}
+
+export type AppStore = ReturnType<typeof createStore>
+export type RootState = ReturnType<AppStore['getState']>
+export type AppDispatch = AppStore['dispatch']
+
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import counterReducer from '../lib/features/counter/counterSlice'
+const rootReducer = combineReducers({ counter: counterReducer })
+
+function createStore(preloadedState: any) {
+  return configureStore({
+    reducer: rootReducer,
+    preloadedState,
+  })
+}

examples/redux/pages/about/+Page.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Counter } from '../../components/Counter'
+
+export default function Page() {
+  return (
+    <>
+      <h1>About</h1>
+      <p>The counter value is the same as on the Welcome page.</p>
+      <Counter />
+    </>
+  )
+}

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Counter } from '../../components/Counter'
+
+export default function Page() {
+  return (
+    <>
+      <h1>My Vike app</h1>
+      This page is:
+      <ul>
+        <li>Rendered to HTML.</li>
+        <li>
+          Interactive. <Counter />
+        </li>
+      </ul>
+    </>
+  )
+}

examples/redux/readme.md

@@ -0,0 +1,8 @@
+Example of using `vike-react-redux`.
+
+```bash
+git clone [email protected]:vikejs/vike-react
+cd vike-react/examples/redux/
+npm install
+npm run dev
+```