From 2bd6ad84a86110af253a726a8637211aa8632612 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Horv=C3=A1th=20D=C3=A1niel?= Date: Fri, 26 Jul 2024 18:34:22 +0200 Subject: [PATCH] example --- examples/express-react/.gitignore | 2 + examples/express-react/package.json | 18 +++ examples/express-react/pages/+config.js | 11 ++ examples/express-react/pages/Layout.css | 14 ++ examples/express-react/pages/Layout.jsx | 67 ++++++++++ examples/express-react/pages/about/+Page.jsx | 12 ++ examples/express-react/pages/index/+Page.jsx | 19 +++ .../express-react/pages/index/Counter.jsx | 12 ++ examples/express-react/readme.md | 8 ++ examples/express-react/server/index.js | 11 ++ examples/express-react/vite.config.js | 7 + package.json | 4 +- packages/vike-node/package.json | 16 +-- pnpm-lock.yaml | 125 ++++++++++++++---- pnpm-workspace.yaml | 1 + test/vike-node/package.json | 30 ++--- 16 files changed, 303 insertions(+), 54 deletions(-) create mode 100644 examples/express-react/.gitignore create mode 100644 examples/express-react/package.json create mode 100644 examples/express-react/pages/+config.js create mode 100644 examples/express-react/pages/Layout.css create mode 100644 examples/express-react/pages/Layout.jsx create mode 100644 examples/express-react/pages/about/+Page.jsx create mode 100644 examples/express-react/pages/index/+Page.jsx create mode 100644 examples/express-react/pages/index/Counter.jsx create mode 100644 examples/express-react/readme.md create mode 100644 examples/express-react/server/index.js create mode 100644 examples/express-react/vite.config.js diff --git a/examples/express-react/.gitignore b/examples/express-react/.gitignore new file mode 100644 index 0000000..b0a5c34 --- /dev/null +++ b/examples/express-react/.gitignore @@ -0,0 +1,2 @@ +/node_modules/ +/dist/ diff --git a/examples/express-react/package.json b/examples/express-react/package.json new file mode 100644 index 0000000..49e9eb0 --- /dev/null +++ b/examples/express-react/package.json @@ -0,0 +1,18 @@ +{ + "scripts": { + "dev": "vite dev", + "build": "vite build", + "prod": "NODE_ENV=production node dist/server/index.mjs" + }, + "dependencies": { + "@vitejs/plugin-react": "^4.3.1", + "express": "^4.19.2", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "vike": "^0.4.181", + "vike-node": "^0.1.0", + "vike-react": "^0.4.18", + "vite": "^5.3.5" + }, + "type": "module" +} diff --git a/examples/express-react/pages/+config.js b/examples/express-react/pages/+config.js new file mode 100644 index 0000000..29768d0 --- /dev/null +++ b/examples/express-react/pages/+config.js @@ -0,0 +1,11 @@ +export { config } + +import vikeReact from 'vike-react/config' +import { Layout } from './Layout' + +const config = { + // https://vike.dev/Layout + Layout: Layout, + // https://vike.dev/extends + extends: vikeReact +} diff --git a/examples/express-react/pages/Layout.css b/examples/express-react/pages/Layout.css new file mode 100644 index 0000000..8c53088 --- /dev/null +++ b/examples/express-react/pages/Layout.css @@ -0,0 +1,14 @@ +body { + margin: 0; + font-family: sans-serif; +} +* { + box-sizing: border-box; +} +a { + text-decoration: none; +} + +.navitem { + padding: 3px; +} diff --git a/examples/express-react/pages/Layout.jsx b/examples/express-react/pages/Layout.jsx new file mode 100644 index 0000000..074be95 --- /dev/null +++ b/examples/express-react/pages/Layout.jsx @@ -0,0 +1,67 @@ +export { Layout } + +import React from 'react' +import './Layout.css' + +function Layout({ children }) { + return ( + + + + Home + + + About + + + {children} + + ) +} + +function PageLayout({ children }) { + return ( +
+ {children} +
+ ) +} + +function Sidebar({ children }) { + return ( +
+ {children} +
+ ) +} + +function Content({ children }) { + return ( +
+ {children} +
+ ) +} diff --git a/examples/express-react/pages/about/+Page.jsx b/examples/express-react/pages/about/+Page.jsx new file mode 100644 index 0000000..fa55b76 --- /dev/null +++ b/examples/express-react/pages/about/+Page.jsx @@ -0,0 +1,12 @@ +export default Page + +import React from 'react' + +function Page() { + return ( + <> +

About

+

Example of using Vike.

+ + ) +} diff --git a/examples/express-react/pages/index/+Page.jsx b/examples/express-react/pages/index/+Page.jsx new file mode 100644 index 0000000..ab51282 --- /dev/null +++ b/examples/express-react/pages/index/+Page.jsx @@ -0,0 +1,19 @@ +export default Page + +import React from 'react' +import { Counter } from './Counter' + +function Page() { + return ( + <> +

Welcome

+ This page is: + + + ) +} diff --git a/examples/express-react/pages/index/Counter.jsx b/examples/express-react/pages/index/Counter.jsx new file mode 100644 index 0000000..a3c5747 --- /dev/null +++ b/examples/express-react/pages/index/Counter.jsx @@ -0,0 +1,12 @@ +export { Counter } + +import React, { useState } from 'react' + +function Counter() { + const [count, setCount] = useState(0) + return ( + + ) +} diff --git a/examples/express-react/readme.md b/examples/express-react/readme.md new file mode 100644 index 0000000..753d2ce --- /dev/null +++ b/examples/express-react/readme.md @@ -0,0 +1,8 @@ +Minimal example of using `vike-node` and `vike-react`. + +```bash +git clone git@github.com:vikejs/vike-node +cd vike-node/examples/vike-react/ +npm install +npm run dev +``` diff --git a/examples/express-react/server/index.js b/examples/express-react/server/index.js new file mode 100644 index 0000000..de7b6bc --- /dev/null +++ b/examples/express-react/server/index.js @@ -0,0 +1,11 @@ +import express from 'express' +import vike from 'vike-node/connect' + +startServer() + +function startServer() { + const app = express() + app.use(vike()) + const port = process.env.PORT || 3000 + app.listen(port, () => console.log(`Server running at http://localhost:${port}`)) +} diff --git a/examples/express-react/vite.config.js b/examples/express-react/vite.config.js new file mode 100644 index 0000000..80b4da3 --- /dev/null +++ b/examples/express-react/vite.config.js @@ -0,0 +1,7 @@ +import react from '@vitejs/plugin-react' +import vike from 'vike/plugin' +import vikeNode from 'vike-node/plugin' + +export default { + plugins: [react(), vike(), vikeNode('server/index.js')] +} diff --git a/package.json b/package.json index a31db7d..30394db 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "devDependencies": { "@biomejs/biome": "^1.8.3", "@brillout/test-e2e": "^0.5.33", - "@brillout/test-types": "^0.1.13", - "playwright": "^1.45.0", + "@brillout/test-types": "^0.1.15", + "playwright": "^1.45.3", "prettier": "^3.3.3" }, "pnpm": { diff --git a/packages/vike-node/package.json b/packages/vike-node/package.json index 927fd49..cb389f9 100644 --- a/packages/vike-node/package.json +++ b/packages/vike-node/package.json @@ -16,11 +16,11 @@ "release:commit": "release-me commit" }, "dependencies": { - "@brillout/picocolors": "^1.0.10", + "@brillout/picocolors": "^1.0.14", "@nitedani/shrink-ray-current": "^4.2.0", - "@vercel/nft": "^0.26.4", - "esbuild": "^0.19.0", - "sirv": "^2.0.0" + "@vercel/nft": "^0.26.5", + "esbuild": "^0.19.12", + "sirv": "^2.0.4" }, "peerDependencies": { "vike": "^0.4.181", @@ -28,12 +28,12 @@ }, "devDependencies": { "@brillout/release-me": "^0.4.0", - "@types/node": "^20.11.19", - "fastify": "^4.26.1", + "@types/node": "^20.14.12", + "fastify": "^4.28.1", "hono": "^4.5.1", "typescript": "^5.5.4", - "vike": "^0.4.162", - "vite": "^5.0.10" + "vike": "^0.4.181", + "vite": "^5.3.5" }, "typesVersions": { "*": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3c3526b..8e289da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,41 +18,68 @@ importers: specifier: ^0.5.33 version: 0.5.33 '@brillout/test-types': - specifier: ^0.1.13 + specifier: ^0.1.15 version: 0.1.15(typescript@5.5.4) playwright: - specifier: ^1.45.0 + specifier: ^1.45.3 version: 1.45.3 prettier: specifier: ^3.3.3 version: 3.3.3 + examples/express-react: + dependencies: + '@vitejs/plugin-react': + specifier: ^4.3.1 + version: 4.3.1(vite@5.3.5(@types/node@20.14.12)) + express: + specifier: ^4.19.2 + version: 4.19.2 + react: + specifier: ^18.3.1 + version: 18.3.1 + react-dom: + specifier: ^18.3.1 + version: 18.3.1(react@18.3.1) + vike: + specifier: ^0.4.181 + version: 0.4.181(react-streaming@0.3.42)(vite@5.3.5(@types/node@20.14.12)) + vike-node: + specifier: link:../../packages/vike-node + version: link:../../packages/vike-node + vike-react: + specifier: ^0.4.18 + version: 0.4.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vike@0.4.181(react-streaming@0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@5.3.5(@types/node@20.14.12)))(vite@5.3.5(@types/node@20.14.12)) + vite: + specifier: ^5.3.5 + version: 5.3.5(@types/node@20.14.12) + packages/vike-node: dependencies: '@brillout/picocolors': - specifier: ^1.0.10 + specifier: ^1.0.14 version: 1.0.14 '@nitedani/shrink-ray-current': specifier: ^4.2.0 version: 4.2.0 '@vercel/nft': - specifier: ^0.26.4 + specifier: ^0.26.5 version: 0.26.5 esbuild: - specifier: ^0.19.0 + specifier: ^0.19.12 version: 0.19.12 sirv: - specifier: ^2.0.0 + specifier: ^2.0.4 version: 2.0.4 devDependencies: '@brillout/release-me': specifier: ^0.4.0 version: 0.4.0 '@types/node': - specifier: ^20.11.19 + specifier: ^20.14.12 version: 20.14.12 fastify: - specifier: ^4.26.1 + specifier: ^4.28.1 version: 4.28.1 hono: specifier: ^4.5.1 @@ -61,10 +88,10 @@ importers: specifier: ^5.5.4 version: 5.5.4 vike: - specifier: ^0.4.162 - version: 0.4.181(vite@5.3.5(@types/node@20.14.12)) + specifier: ^0.4.181 + version: 0.4.181(react-streaming@0.3.42)(vite@5.3.5(@types/node@20.14.12)) vite: - specifier: ^5.0.10 + specifier: ^5.3.5 version: 5.3.5(@types/node@20.14.12) test/vike-node: @@ -73,61 +100,61 @@ importers: specifier: ^1.12.0 version: 1.12.0 '@node-rs/argon2': - specifier: ^1.7.2 + specifier: ^1.8.3 version: 1.8.3 '@prisma/client': - specifier: ^5.9.1 + specifier: ^5.17.0 version: 5.17.0(prisma@5.17.0) '@types/express': specifier: ^4.17.21 version: 4.17.21 '@types/react': - specifier: ^18.2.55 + specifier: ^18.3.3 version: 18.3.3 '@types/react-dom': - specifier: ^18.2.19 + specifier: ^18.3.0 version: 18.3.0 '@vitejs/plugin-react': - specifier: ^4.2.1 + specifier: ^4.3.1 version: 4.3.1(vite@5.3.5(@types/node@20.14.12)) cross-env: specifier: ^7.0.3 version: 7.0.3 express: - specifier: ^4.18.2 + specifier: ^4.19.2 version: 4.19.2 fastify: - specifier: ^4.26.1 + specifier: ^4.28.1 version: 4.28.1 hono: specifier: ^4.5.1 version: 4.5.1 prisma: - specifier: ^5.9.1 + specifier: ^5.17.0 version: 5.17.0 react: - specifier: ^18.2.0 + specifier: ^18.3.1 version: 18.3.1 react-dom: - specifier: ^18.2.0 + specifier: ^18.3.1 version: 18.3.1(react@18.3.1) sharp: - specifier: ^0.33.2 + specifier: ^0.33.4 version: 0.33.4 telefunc: - specifier: ^0.1.71 - version: 0.1.76(@babel/core@7.24.9)(@babel/parser@7.24.8)(@babel/types@7.24.9)(react@18.3.1) + specifier: ^0.1.76 + version: 0.1.76(@babel/core@7.24.9)(@babel/parser@7.24.8)(@babel/types@7.24.9)(react-streaming@0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) typescript: specifier: ^5.5.4 version: 5.5.4 vike: - specifier: ^0.4.161 - version: 0.4.181(vite@5.3.5(@types/node@20.14.12)) + specifier: ^0.4.181 + version: 0.4.181(react-streaming@0.3.42)(vite@5.3.5(@types/node@20.14.12)) vike-node: specifier: link:../../packages/vike-node version: link:../../packages/vike-node vite: - specifier: ^5.0.10 + specifier: ^5.3.5 version: 5.3.5(@types/node@20.14.12) packages: @@ -1844,6 +1871,10 @@ packages: isarray@1.0.0: resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==} + isbot-fast@1.2.0: + resolution: {integrity: sha512-twjuQzy2gKMDVfKGQyQqrx6Uy4opu/fiVUTTpdqtFsd7OQijIp5oXvb27n5EemYXaijh5fomndJt/SPRLsEdSg==} + engines: {node: '>=6.0.0'} + isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} @@ -2211,6 +2242,12 @@ packages: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} + react-streaming@0.3.42: + resolution: {integrity: sha512-HiJYIB9RgSB0iC7PuJLRn/a4qGo92ZkWooLdpLRbo5lRJwC9xriVTKZ8xz5EXiS/43O3wvnefrV8dS8oDtll9w==} + peerDependencies: + react: '>=18' + react-dom: '>=18' + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -2525,6 +2562,14 @@ packages: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} + vike-react@0.4.18: + resolution: {integrity: sha512-S7HTVvdU138vu7LZw94SUqHsDew4+lSj/jVbvpCgKPL4YEYfuNIo+1SMNxy7747bJ7W/rResc1B80UB9YCiRpw==} + peerDependencies: + react: '>=18.0.0' + react-dom: '>=18.0.0' + vike: '>=0.4.178' + vite: '>=4.3.8' + vike@0.4.181: resolution: {integrity: sha512-pGhTonZ67yx3t4isx2UEKqx+ZhKJk1ZrwXBHfmy0Rs8T/u4JOIB58OahNDbVu1k4cvFeNzSqxcpI1BBVfaF5ZA==} engines: {node: '>=18.0.0'} @@ -4217,6 +4262,8 @@ snapshots: isarray@1.0.0: {} + isbot-fast@1.2.0: {} + isexe@2.0.0: {} js-tokens@4.0.0: {} @@ -4514,6 +4561,15 @@ snapshots: react-refresh@0.14.2: {} + react-streaming@0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@brillout/import': 0.2.3 + '@brillout/json-serializer': 0.5.13 + '@brillout/picocolors': 1.0.14 + isbot-fast: 1.2.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 @@ -4778,7 +4834,7 @@ snapshots: mkdirp: 1.0.4 yallist: 4.0.0 - telefunc@0.1.76(@babel/core@7.24.9)(@babel/parser@7.24.8)(@babel/types@7.24.9)(react@18.3.1): + telefunc@0.1.76(@babel/core@7.24.9)(@babel/parser@7.24.8)(@babel/types@7.24.9)(react-streaming@0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1): dependencies: '@brillout/import': 0.2.3 '@brillout/json-serializer': 0.5.13 @@ -4792,6 +4848,7 @@ snapshots: '@babel/parser': 7.24.8 '@babel/types': 7.24.9 react: 18.3.1 + react-streaming: 0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1) text-extensions@2.4.0: {} @@ -4860,7 +4917,15 @@ snapshots: vary@1.1.2: {} - vike@0.4.181(vite@5.3.5(@types/node@20.14.12)): + vike-react@0.4.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vike@0.4.181(react-streaming@0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(vite@5.3.5(@types/node@20.14.12)))(vite@5.3.5(@types/node@20.14.12)): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-streaming: 0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + vike: 0.4.181(react-streaming@0.3.42)(vite@5.3.5(@types/node@20.14.12)) + vite: 5.3.5(@types/node@20.14.12) + + vike@0.4.181(react-streaming@0.3.42)(vite@5.3.5(@types/node@20.14.12)): dependencies: '@brillout/import': 0.2.3 '@brillout/json-serializer': 0.5.13 @@ -4876,6 +4941,8 @@ snapshots: sirv: 2.0.4 source-map-support: 0.5.21 vite: 5.3.5(@types/node@20.14.12) + optionalDependencies: + react-streaming: 0.3.42(react-dom@18.3.1(react@18.3.1))(react@18.3.1) vite@5.3.5(@types/node@20.14.12): dependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 92a5978..cb7c5cf 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,3 +1,4 @@ packages: - 'test/*' - 'packages/*' + - 'examples/*' diff --git a/test/vike-node/package.json b/test/vike-node/package.json index c722701..e31732c 100644 --- a/test/vike-node/package.json +++ b/test/vike-node/package.json @@ -7,25 +7,25 @@ }, "dependencies": { "@hono/node-server": "^1.12.0", - "hono": "^4.5.1", - "@node-rs/argon2": "^1.7.2", - "@prisma/client": "^5.9.1", + "@node-rs/argon2": "^1.8.3", + "@prisma/client": "^5.17.0", "@types/express": "^4.17.21", - "@types/react": "^18.2.55", - "@types/react-dom": "^18.2.19", - "@vitejs/plugin-react": "^4.2.1", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "@vitejs/plugin-react": "^4.3.1", "cross-env": "^7.0.3", - "express": "^4.18.2", - "fastify": "^4.26.1", - "prisma": "^5.9.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "sharp": "^0.33.2", - "telefunc": "^0.1.71", + "express": "^4.19.2", + "fastify": "^4.28.1", + "hono": "^4.5.1", + "prisma": "^5.17.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "sharp": "^0.33.4", + "telefunc": "^0.1.76", "typescript": "^5.5.4", - "vike": "^0.4.161", + "vike": "^0.4.181", "vike-node": "^0.1.0", - "vite": "^5.0.10" + "vite": "^5.3.5" }, "type": "module" }