Solid 2: port to solid-js 2 + @solidjs/vite-plugin start mode (SSG, router 2, meta 1.0)

README.md

@@ -7,7 +7,7 @@ gt pul
 
 <div align="center">
 
-Fully featured, fully customisable static site generation for [SolidStart](https://start.solidjs.com)
+Fully featured, fully customisable static site generation for [Solid](https://www.solidjs.com)
 
 [![license](https://img.shields.io/badge/license-MIT-1890ff.svg)](https://github.com/kobaltedev/solidbase/blob/main/LICENSE)
 [![checks](https://img.shields.io/github/checks-status/kobaltedev/solidbase/main)](https://github.com/kobaltedev/solidbase/actions)

dev/package.json

@@ -8,18 +8,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@kobalte/core": "2.0.0-alpha.4",
     "@kobalte/solidbase": "workspace:*",
-    "@kobalte/core": "0.13.11",
-    "@solidjs/router": "^0.15.3",
-    "@solidjs/start": "https://pkg.pr.new/solidjs/solid-start/@solidjs/start@2080",
-    "nitro": "3.0.260311-beta",
-    "solid-js": "^1.9.9"
+    "@solidjs/meta": "1.0.0-next.2",
+    "@solidjs/router": "2.0.0-next.37",
+    "@solidjs/web": "2.0.0-rc.16",
+    "solid-js": "2.0.0-rc.16"
   },
   "engines": {
     "node": ">=22.12"
   },
   "devDependencies": {
     "@iconify-json/ri": "^1.2.5",
+    "@solidjs/vite-plugin": "3.0.0-next.47",
     "cross-env": "^7.0.3",
     "vite": "^8.0.0"
   }

dev/src/Document.tsx

@@ -0,0 +1,21 @@
+import { getHtmlProps } from "@kobalte/solidbase/server";
+import { HydrationScript } from "@solidjs/web";
+import type { ParentProps } from "solid-js";
+
+// Document shell for @solidjs/vite-plugin start mode: the app arrives as children and the
+// client entry script is injected into <head> automatically.
+export default function Document(props: ParentProps) {
+	return (
+		<html {...getHtmlProps()}>
+			<head>
+				<meta charset="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href={`${import.meta.env.BASE_URL}favicon.ico`} />
+				<HydrationScript />
+			</head>
+			<body>
+				<div id="app">{props.children}</div>
+			</body>
+		</html>
+	);
+}

dev/src/app.tsx

@@ -1,13 +1,21 @@
+import { pageRoutes } from "virtual:file-routes";
 import { SolidBaseRoot } from "@kobalte/solidbase/client";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
+import { createRouter } from "@solidjs/router";
+import { fileRoutes } from "@solidjs/router/fs";
 
 import "./app.css";
 
+const Router = createRouter({
+	routes: fileRoutes(pageRoutes),
+	// Vite's base ends with a slash ("/docs/"), which the router would keep when
+	// resolving links ("/docs//guide"), so pass it without one.
+	base: import.meta.env.BASE_URL.replace(/\/$/, ""),
+});
+
 export default function App() {
 	return (
-		<Router root={SolidBaseRoot}>
-			<FileRoutes />
+		<Router>
+			{(props) => <SolidBaseRoot>{props.children}</SolidBaseRoot>}
 		</Router>
 	);
 }

dev/src/global.d.ts

@@ -1 +1,2 @@
-/// <reference types="@solidjs/start/env" />
+/// <reference types="vite/client" />
+/// <reference types="@kobalte/solidbase/types" />

dev/src/routes/ec-file.mdx

@@ -16,13 +16,13 @@
 ```file=../app.css tab
 ```
 
-``` file=../entry-client.tsx tab
+``` file=../Document.tsx tab
 ```
 
-```file=../entry-server.tsx tab
+```file=../app.tsx tab
 ```
 
-```file=~/entry-server.tsx title="aliased import"
+```file=@dev/Document.tsx title="aliased import"
 ```
 
 ```file=./to-transform.tsx title=false

dev/src/solidbase-theme/mdx-components.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps } from "solid-js";
+import type { ComponentProps } from "@solidjs/web";
 
 export function h1(props: ComponentProps<"h1">) {
 	return <h1 {...props} style={{ color: "red" }} />;

dev/tsconfig.json

@@ -6,13 +6,16 @@
 		"allowSyntheticDefaultImports": true,
 		"esModuleInterop": true,
 		"jsx": "preserve",
-		"jsxImportSource": "solid-js",
+		"jsxImportSource": "@solidjs/web",
 		"allowJs": true,
 		"strict": true,
+		"skipLibCheck": true,
 		"noEmit": true,
 		"isolatedModules": true,
 		"paths": {
 			"~/*": ["./src/*"]
 		}
-	}
+	},
+	"include": ["src", "vite.config.mts"],
+	"exclude": ["dist", "node_modules"]
 }

dev/vite.config.mts

@@ -1,5 +1,5 @@
-import { solidStart } from "@solidjs/start/config";
-import { nitro } from "nitro/vite";
+import { fileURLToPath } from "node:url";
+import solid from "@solidjs/vite-plugin";
 import { defineConfig } from "vite";
 import Inspect from "vite-plugin-inspect";
 
@@ -33,6 +33,11 @@ function createDevSidebar(route: string, hiddenFolders: string[] = []) {
 }
 
 export default defineConfig({
+	resolve: {
+		alias: {
+			"@dev": fileURLToPath(new URL("./src", import.meta.url)),
+		},
+	},
 	plugins: [
 		Inspect(),
 		solidBase.plugin({
@@ -163,9 +168,7 @@ export default defineConfig({
 				},
 			},
 		}),
-		solidStart(solidBase.startConfig()),
-		nitro({
-			prerender: { crawlLinks: true },
-		}),
+		// @solidjs/vite-plugin start mode (SSR) replaces SolidStart + Nitro.
+		solid(solidBase.startConfig()),
 	],
 });

docs/package.json

@@ -9,17 +9,18 @@
   "dependencies": {
     "@kobalte/solidbase": "workspace:*",
     "@solid-mediakit/og": "0.4.1",
-    "@solidjs/router": "^0.15.3",
-    "@solidjs/start": "https://pkg.pr.new/solidjs/solid-start/@solidjs/start@2080",
-    "nitro": "3.0.260311-beta",
-    "solid-js": "^1.9.9",
+    "@solidjs/meta": "1.0.0-next.2",
+    "@solidjs/router": "2.0.0-next.37",
+    "@solidjs/web": "2.0.0-rc.16",
+    "solid-js": "2.0.0-rc.16",
     "vite": "8.0.0"
   },
   "engines": {
     "node": ">=22.12"
   },
   "devDependencies": {
     "@iconify-json/ri": "^1.2.5",
+    "@solidjs/vite-plugin": "3.0.0-next.47",
     "vite-plugin-arraybuffer": "^0.0.8"
   }
 }

docs/src/Document.tsx

@@ -0,0 +1,25 @@
+import { getFontPreloadLinkAttrs } from "@kobalte/solidbase/default-theme/fonts.js";
+import { getHtmlProps } from "@kobalte/solidbase/server";
+import { HydrationScript } from "@solidjs/web";
+import type { ParentProps } from "solid-js";
+
+// Document shell for @solidjs/vite-plugin start mode: the app arrives as children and the
+// client entry script is injected into <head> automatically.
+export default function Document(props: ParentProps) {
+	return (
+		<html {...getHtmlProps()}>
+			<head>
+				<meta charset="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				{getFontPreloadLinkAttrs().map((attrs) => (
+					<link {...attrs} />
+				))}
+				<link rel="icon" href={`${import.meta.env.BASE_URL}favicon.ico`} />
+				<HydrationScript />
+			</head>
+			<body>
+				<div id="app">{props.children}</div>
+			</body>
+		</html>
+	);
+}

docs/src/app.tsx

@@ -1,11 +1,19 @@
+import { pageRoutes } from "virtual:file-routes";
 import { SolidBaseRoot } from "@kobalte/solidbase/client";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
+import { createRouter } from "@solidjs/router";
+import { fileRoutes } from "@solidjs/router/fs";
+
+const Router = createRouter({
+	routes: fileRoutes(pageRoutes),
+	// Vite's base ends with a slash ("/docs/"), which the router would keep when
+	// resolving links ("/docs//guide"), so pass it without one.
+	base: import.meta.env.BASE_URL.replace(/\/$/, ""),
+});
 
 export default function App() {
 	return (
-		<Router root={SolidBaseRoot}>
-			<FileRoutes />
+		<Router>
+			{(props) => <SolidBaseRoot>{props.children}</SolidBaseRoot>}
 		</Router>
 	);
 }