vikejs · magne4000 · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024
diff --git a/examples/auth/package.json b/examples/auth/package.json
@@ -17,7 +17,7 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.0.2",
     "vike": "0.4.177",
-    "vike-react": "^0.4.6",
+    "vike-react": "^0.4.15",
     "vite": "^5.0.10"
   },
   "type": "module"

diff --git a/examples/bati-app/.gitignore b/examples/bati-app/.gitignore
@@ -0,0 +1,132 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# firebase-admin service-account
+firebase
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/examples/bati-app/README.md b/examples/bati-app/README.md
@@ -0,0 +1,35 @@
+This app has been created with [Bati](https://batijs.dev) using the following flags: `--react --express --tailwindcss`
+
+# About this app
+This app is ready to start. It's powered by [Vike](https://vike.dev) and [React](https://react.dev/learn).
+
+### `/pages/+config.ts`
+
+Such `+` files are [the interface](https://vike.dev/config) between Vike and your code. It defines:
+- A default [`<Layout>` component](https://vike.dev/Layout) (that wraps your [`<Page>` components](https://vike.dev/Page)).
+- A default [`title`](https://vike.dev/head).
+- Default [`<head>` tags](https://vike.dev/head).
+
+### Routing
+
+[Vike's built-in router](https://vike.dev/routing) lets you choose between:
+ - [Filesystem Routing](https://vike.dev/filesystem-routing) (the URL of a page is determined based on where its `+Page.jsx` file is located on the filesystem)
+ - [Route Strings](https://vike.dev/route-string)
+ - [Route Functions](https://vike.dev/route-function)
+
+### `/pages/_error/+Page.jsx`
+
+The [error page](https://vike.dev/error-page) which is rendered when errors occur.
+
+### `/pages/+onPageTransitionStart.ts` and `/pages/+onPageTransitionEnd.ts`
+
+The [`onPageTransitionStart()` hook](https://vike.dev/onPageTransitionStart), together with [`onPageTransitionEnd()`](https://vike.dev/onPageTransitionEnd), enables you to implement page transition animations.
+
+### SSR
+
+SSR is enabled by default. You can [disable it](https://vike.dev/ssr) for all your pages or only for some pages.
+
+### HTML Streaming
+
+You can enable/disable [HTML streaming](https://vike.dev/streaming) for all your pages, or only for some pages while still using it for others.
+
diff --git a/examples/bati-app/assets/logo.svg b/examples/bati-app/assets/logo.svg
diff --git a/examples/bati-app/components/Link.tsx b/examples/bati-app/components/Link.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+
+export 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>
+  )
+}
diff --git a/examples/bati-app/database/todoItems.ts b/examples/bati-app/database/todoItems.ts
@@ -0,0 +1,10 @@
+interface TodoItem {
+  text: string
+}
+
+const todos = {
+  todo: [{ text: 'Buy milk' }, { text: 'Buy strawberries' }]
+}
+
+export { todos }
+export type { TodoItem }
diff --git a/examples/bati-app/express-entry.ts b/examples/bati-app/express-entry.ts
@@ -0,0 +1,77 @@
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { createTodoHandler } from './server/create-todo-handler'
+import { vikeHandler } from './server/vike-handler'
+import { createMiddleware } from '@universal-middleware/express'
+import express from 'express'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const isProduction = process.env.NODE_ENV === 'production'
+const root = __dirname
+const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000
+const hmrPort = process.env.HMR_PORT ? parseInt(process.env.HMR_PORT, 10) : 24678
+
+interface Middleware<Context extends Record<string | number | symbol, unknown>> {
+  (request: Request, context: Context): Response | void | Promise<Response> | Promise<void>
+}
+
+export function handlerAdapter<Context extends Record<string | number | symbol, unknown>>(
+  handler: Middleware<Context>
+) {
+  return createMiddleware(
+    async (context) => {
+      const rawRequest = context.platform.request as unknown as Record<string, unknown>
+      rawRequest.context ??= {}
+      const response = await handler(context.request, rawRequest.context as Context)
+
+      if (!response) {
+        context.passThrough()
+        return new Response('', {
+          status: 404
+        })
+      }
+
+      return response
+    },
+    {
+      alwaysCallNext: false
+    }
+  )
+}
+
+startServer()
+
+async function startServer() {
+  const app = express()
+
+  if (isProduction) {
+    app.use(express.static(`${root}/dist/client`))
+  } else {
+    // Instantiate Vite's development server and integrate its middleware to our server.
+    // ⚠️ We should instantiate it *only* in development. (It isn't needed in production
+    // and would unnecessarily bloat our server in production.)
+    const vite = await import('vite')
+    const viteDevMiddleware = (
+      await vite.createServer({
+        root,
+        server: { middlewareMode: true, hmr: { port: hmrPort } }
+      })
+    ).middlewares
+    app.use(viteDevMiddleware)
+  }
+
+  app.post('/api/todo/create', handlerAdapter(createTodoHandler))
+
+  /**
+   * Vike route
+   *
+   * @link {@see https://vike.dev}
+   **/
+  app.all('*', handlerAdapter(vikeHandler))
+
+  app.listen(port, () => {
+    console.log(`Server listening on http://localhost:${port}`)
+  })
+}
diff --git a/examples/bati-app/layouts/HeadDefault.tsx b/examples/bati-app/layouts/HeadDefault.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+
+// Default <head> (can be overridden by pages)
+
+export default function HeadDefault() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="description" content="Demo showcasing Vike" />
+      <link rel="icon" href={logoUrl} />
+    </>
+  )
+}
diff --git a/examples/bati-app/layouts/LayoutDefault.tsx b/examples/bati-app/layouts/LayoutDefault.tsx
@@ -0,0 +1,52 @@
+import './style.css'
+
+import './tailwind.css'
+import React from 'react'
+import logoUrl from '../assets/logo.svg'
+import { Link } from '../components/Link.js'
+
+export default function LayoutDefault({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="flex max-w-5xl m-auto">
+      <Sidebar>
+        <Logo />
+        <Link href="/">Welcome</Link>
+        <Link href="/todo">Todo</Link>
+        <Link href="/star-wars">Data Fetching</Link>
+      </Sidebar>
+      <Content>{children}</Content>
+    </div>
+  )
+}
+
+function Sidebar({ children }: { children: React.ReactNode }) {
+  return (
+    <div id="sidebar" className="p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200">
+      {children}
+    </div>
+  )
+}
+
+function Content({ children }: { children: React.ReactNode }) {
+  return (
+    <div id="page-container">
+      <div id="page-content" className="p-5 pb-12 min-h-screen">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function Logo() {
+  return (
+    <div className="p-5 mb-2">
+      <a href="/">
+        <img src={logoUrl} height={64} width={64} alt="logo" />
+      </a>
+    </div>
+  )
+}