fix(examples): move the vpssr example to vike and vite 8

examples/vpssr-linaria-solid/check-vite-version.mjs

@@ -0,0 +1,42 @@
+// Fails while this example resolves a vite older than MIN_VITE in pnpm-lock.yaml.
+// Run it from this directory: node check-vite-version.mjs
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const MIN_VITE = '8.3.5';
+const IMPORTER = 'examples/vpssr-linaria-solid';
+
+const lockfile = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), '../../pnpm-lock.yaml'),
+  'utf8'
+).split('\n');
+
+// The lines under the `  <key>:` line at `indent`, up to the next line that is
+// indented as much or less.
+const entry = (lines, key, indent) => {
+  const start = lines.indexOf(`${' '.repeat(indent)}${key}:`);
+  if (start === -1) return [];
+  const end = lines.findIndex(
+    (line, i) => i > start && line.trim() && line.search(/\S/) <= indent
+  );
+  return lines.slice(start + 1, end === -1 ? lines.length : end);
+};
+
+const vite = entry(entry(lockfile, IMPORTER, 2), 'vite', 6);
+const resolved = vite
+  .map((line) => line.match(/^ {8}version: (\d+\.\d+\.\d+)/)?.[1])
+  .find(Boolean);
+
+const key = (version) =>
+  version.split('.').reduce((sum, part) => sum * 1000 + Number(part), 0);
+
+if (!resolved || key(resolved) < key(MIN_VITE)) {
+  console.error(
+    `${IMPORTER} resolves vite ${resolved ?? '(none)'} in pnpm-lock.yaml, ` +
+      `but vite ${MIN_VITE} or later is required`
+  );
+  process.exit(1);
+}
+
+console.log(`${IMPORTER} resolves vite ${resolved}`);

examples/vpssr-linaria-solid/package.json

@@ -2,10 +2,11 @@
   "name": "vpssr-linaria-solid-example",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "node ./server",
-    "build": "vite build",
-    "preview": "vite build && NODE_ENV=production node ./server"
+    "build": "vike build",
+    "preview": "vike build && NODE_ENV=production node ./server"
   },
   "author": "mrfoxpro",
   "license": "ISC",
@@ -16,9 +17,10 @@
     "compression": "^1.8.2",
     "express": "^4.20.0",
     "sirv": "^2.0.2",
-    "solid-js": "^1.9.4",
-    "vite": "^3.2.10",
-    "vite-plugin-solid": "^2.4.0",
-    "vite-plugin-ssr": "^0.4.54"
+    "solid-js": "^1.9.17",
+    "vike": "^0.4.268",
+    "vike-solid": "^0.8.8",
+    "vite": "^8.3.5",
+    "vite-plugin-solid": "^2.11.14"
   }
 }

examples/vpssr-linaria-solid/pages/+config.ts

@@ -0,0 +1,13 @@
+import type { Config } from 'vike/types'
+import vikeSolid from 'vike-solid/config'
+
+// The file names set where each page renders:
+// +Page.server.tsx renders to HTML only, +Page.client.tsx only in the browser,
+// +Page.tsx to HTML that is then hydrated in the browser.
+export default {
+	extends: [vikeSolid],
+	prerender: {
+		partial: true,
+		noExtraDir: true,
+	},
+} satisfies Config

examples/vpssr-linaria-solid/pages/html-js/_default.page.client.js → examples/vpssr-linaria-solid/pages/html-js/+client.js

@@ -1,5 +1,4 @@
-// We could also define `handleCounter()` in `index.page.client.js` instead of `_default.page.client.js`.
-// We define `_default.page.client.js` to showcase how to define the browser-side JavaScript for multiple pages.
+// The whole browser-side JavaScript of this page.
 
 handleCounter()
 

examples/vpssr-linaria-solid/pages/html-only/index.page.server.tsx → examples/vpssr-linaria-solid/pages/html-only/+Page.server.tsx

@@ -17,7 +17,7 @@ export function Page() {
 				>
 					orange text
 				</span>
-				, CSS can be loaded in <code>.page.server.js</code> files.
+				, CSS can be loaded in <code>+Page.server.tsx</code> files.
 			</p>
 			<p>
 				If needed, we can add a little bit of browser-side JavaScipt to implement bits of interactivity,

examples/vpssr-linaria-solid/pages/ssr/index.page.tsx → examples/vpssr-linaria-solid/pages/ssr/+Page.tsx

@@ -22,5 +22,3 @@ export function Page() {
 		</>
 	)
 }
-
-export const hydrate = true

examples/vpssr-linaria-solid/server.js

@@ -1,24 +1,20 @@
-const express = require("express");
-const compression = require("compression");
-const { renderPage } = require("vite-plugin-ssr");
+import express from "express";
+import compression from "compression";
+import { createDevMiddleware, renderPage } from "vike/server";
 
 const isProduction = process.env.NODE_ENV === "production";
+const root = import.meta.dirname;
 
 const app = express();
 app.use(compression());
 
 async function main () {
   if (isProduction) {
-    const sirv = require("sirv")
-    app.use(sirv(`${__dirname}/dist/client`));
+    const { default: sirv } = await import("sirv");
+    app.use(sirv(`${root}/dist/client`));
   } else {
-    const vite = require("vite");
-    const server = await vite.createServer({
-      root: __dirname,
-      configFile: './vite.config.js',
-      server: { middlewareMode: true },
-    })
-    app.use(server.middlewares);
+    const { devMiddleware } = await createDevMiddleware({ root });
+    app.use(devMiddleware);
   }
 
   app.get("*", async (req, res, next) => {
@@ -28,10 +24,11 @@ async function main () {
     const pageContext = await renderPage(pageContextInit);
     const { httpResponse } = pageContext;
     if (!httpResponse) return next();
-    const { statusCode, contentType, earlyHints } = httpResponse;
+    const { statusCode, headers, earlyHints } = httpResponse;
     if (res.writeEarlyHints)
       res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) });
-    res.status(statusCode).type(contentType);
+    headers.forEach(([name, value]) => res.setHeader(name, value));
+    res.status(statusCode);
     httpResponse.pipe(res);
   });
 

examples/vpssr-linaria-solid/vite.config.js

@@ -1,9 +1,8 @@
-import vite_ssr from 'vite-plugin-ssr/plugin';
+import vike from 'vike/plugin';
+import vikeSolid from 'vike-solid/vite';
 import vite_wyw from '@wyw-in-js/vite';
-import vite_solid from 'vite-plugin-solid';
 
-export default (/** @type import('vite').ConfigEnv */ { mode }) => {
-  const dev = mode === 'development';
+export default () => {
   /** @type import('vite').UserConfig */
   const config = {
     plugins: [
@@ -24,18 +23,8 @@ export default (/** @type import('vite').ConfigEnv */ { mode }) => {
         }),
         enforce: 'pre',
       },
-      vite_solid({
-        dev: dev,
-        hot: dev,
-        ssr: true,
-      }),
-      vite_ssr({
-        includeAssetsImportedByServer: true,
-        prerender: {
-          partial: true,
-          noExtraDir: true,
-        },
-      }),
+      vikeSolid(),
+      vike(),
     ],
   };
   return config;