feat: added vike routegen as a default + more docs.

Author: Blankeos

.vscode/default.code-snippets

@@ -2,12 +2,8 @@
   "New SolidJS Page": {
     "prefix": "newsolidpage",
     "scope": "javascriptreact,typescriptreact",
-    "body": [
-      "export default function ${1:MyAwesome}Page() {",
-      "  return <></>;",
-      "}",
-    ],
-    "description": "Creates a new page in SolidJS.",
+    "body": ["export default function ${1:MyAwesome}Page() {", "  return <></>;", "}"],
+    "description": "Creates a new page in SolidJS."
   },
 
   "New SolidJS Component": {
@@ -23,9 +19,9 @@
       "",
       "  return <></>;",
       "}",
-      "",
+      ""
     ],
-    "description": "Creates a new SolidJS Component",
+    "description": "Creates a new SolidJS Component"
   },
 
   "New SolidJS Context File": {
@@ -36,7 +32,7 @@
       "import { createStrictContext } from '@/utils/create-strict-context';",
       "",
       "// ===========================================================================",
-      "// Context",
+      "// Context & Hook",
       "// ===========================================================================",
       "",
       "export type ${1:CounterContext}Value = {",
@@ -60,9 +56,9 @@
       "    </${1:CounterContext}Provider>",
       "  );",
       "};",
-      "",
+      ""
     ],
-    "description": "New SolidJS Context File",
+    "description": "New SolidJS Context File"
   },
 
   "Comment Headers (TS)": {
@@ -71,9 +67,9 @@
     "body": [
       "// ===========================================================================",
       "// ${1:Comment Headers}",
-      "// ===========================================================================",
+      "// ==========================================================================="
     ],
-    "description": "Makes a comment header to subsection the content in your files.",
+    "description": "Makes a comment header to subsection the content in your files."
   },
 
   // Vike
@@ -92,8 +88,8 @@
       "  return {",
       "    todo: data as { userId: number; id: number; title: string; completed: boolean },",
       "  };",
-      "}",
+      "}"
     ],
-    "description": "Vike +data.ts",
-  },
+    "description": "Vike +data.ts"
+  }
 }

README.md

@@ -15,6 +15,12 @@ If you want a more opinionated and fully-featured boilerplate instead: http://gi
 3. Bun (Can swap this with Node easily if you want).
 4. Tools: Biome
 
+## Features:
+
+- [x] 🦋 **Type-safe Routing** - Inspired by TanStack Router, I'm the author of [`vike-routegen`](https://github.com/blankeos/vike-routegen) which codegens typesafe page routing for you, and it's a breeze!
+- [x] ⚡️ **Super-fast dev server** - way faster than NextJS thanks to Vite. You need to feel it to believe it! It can also literally build your app in seconds.
+- [x] **🥊 Robust Error Practices** - I thoughtfully made sure there's a best practice for errors here already. You can throw errors in a consistent manner in the backend and display them consistently in the frontend.
+
 ## Quick Start
 
 1. Get template

biome.json

@@ -8,7 +8,7 @@
     "lineWidth": 100
   },
   "files": {
-    "includes": ["**", "!dist/**/*", "!**/*.js", "!**/*.cjs", "!**/*.mjs"]
+    "includes": ["**", "!dist/**/*", "!**/*.js", "!**/*.cjs", "!**/*.mjs", "!src/route-tree.gen.ts"]
   },
   "linter": {
     "enabled": true,

bun.lock

@@ -17,6 +17,7 @@
   "author": "",
   "devDependencies": {
     "@biomejs/biome": "^2.3.2",
+    "@blankeos/vike-routegen": "^0.0.3",
     "@types/bun": "^1.3.1",
     "typescript": "^5.9.3",
     "vite": "^7.1.12",

package.json

@@ -1,5 +1,6 @@
 import { createSignal, type FlowProps } from "solid-js"
 import { useMetadata } from "vike-metadata-solid"
+import { getRoute } from "@/route-tree.gen"
 import getTitle from "@/utils/get-title"
 
 useMetadata.setGlobalDefaults({
@@ -12,9 +13,9 @@ export default function RootLayout(props: FlowProps) {
     <>
       <div>
         <nav>
-          <a href="/">Home</a>
+          <a href={getRoute("/")}>Home</a>
           <span>{" | "}</span>
-          <a href="/dashboard">Dashboard</a>
+          <a href={getRoute("/dashboard")}>Dashboard</a>
           <span>{" | "}</span>
           <Counter />
         </nav>

src/pages/+Layout.tsx

@@ -1,12 +1,13 @@
 import { createSignal, type FlowProps } from "solid-js"
+import { getRoute } from "@/route-tree.gen"
 
 export default function DashboardLayout(props: FlowProps) {
   return (
     <div>
       <aside>
-        <a href="/dashboard">Dashboard</a>
+        <a href={getRoute("/dashboard")}>Dashboard</a>
         <span>{" | "}</span>
-        <a href="/dashboard/settings">Settings</a>
+        <a href={getRoute("/dashboard/settings")}>Settings</a>
         <span>{" | "}</span>
         <Counter />
       </aside>

src/pages/dashboard/+Layout.tsx

@@ -0,0 +1,156 @@
+// /* eslint-disable */
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+//// Automatically generated by Vike (routegen).
+//// - Used for typesafe routing.
+//// - DO NOT make any changes.
+//// - Make sure to exclude from linter/formatter.
+
+export { pageRoutes, getRoute, useParams };
+export type { PageRoute, UseParamsResult };
+
+const pageRoutes = [
+  "/",
+  "/dashboard",
+  "/dashboard/settings"
+] as const;
+
+type PageRoute = typeof pageRoutes[number];
+
+/* For regular routes with named parameters. But it has a minor issue, it gets "" as a property, so this is prefixed with '_' */
+type _ExtractNamedParams<T extends string> = T extends `${string}@${infer Param}/${infer Rest}`
+? { [K in Param | keyof ExtractNamedParams<Rest>]: string }
+: T extends `${string}@${infer Param}`
+? { [K in Param]: string }
+: {};
+
+/** Minor utility to prevent typescript from wrapping types. */
+type Prettify<T> = {
+  [K in keyof T]: T[K];
+} & {};
+
+/* For regular routes with named parameters */
+type ExtractNamedParams<T extends string> = Prettify<Omit<_ExtractNamedParams<T>, "">>;
+
+/* Helper to determine if a route ends with a catch-all segment */
+type EndsWithCatchall<T extends string> = T extends `${string}/@` ? true : false;
+
+/* Conditional type helper for determining if a route is a catchall/splat route */
+type IsCatchallRoute<T extends string> = EndsWithCatchall<T>;
+
+/* Return type for UseParams */
+type UseParamsResult<T extends PageRoute> =
+IsCatchallRoute<T> extends true
+? ExtractNamedParams<T> & { '@': string[], '_@': string }
+: ExtractNamedParams<T>;
+
+/* Conditional type helper for determining if a route has parameters */
+type HasParams<T extends string> =
+IsCatchallRoute<T> extends true
+? true
+: T extends `${string}@${string}`
+? true
+: false;
+
+/* Type for the options of the getRoute function. */
+type GetRouteOptions<T extends PageRoute> = HasParams<T> extends true
+? IsCatchallRoute<T> extends true
+? {
+params: ExtractNamedParams<T> & { '@': string[] | string };
+search?: Record<string, string>;
+}
+: {
+params: ExtractNamedParams<T>;
+search?: Record<string, string>;
+}
+: {
+params?: never;
+search?: Record<string, string>;
+};
+
+/* Typesafe helper to generate a route URL based on Vike pages folder. */
+function getRoute<T extends PageRoute>(
+route: T,
+...args: HasParams<T> extends true
+? [options: GetRouteOptions<T>]
+: [options?: GetRouteOptions<T>]
+): string {
+const options = args[0] || {};
+
+// Handle both regular named parameters and catchall routes
+let result: string = route;
+
+if (options.params) {
+// Handle named parameters first
+const params = { ...options.params };
+Object.entries(params).forEach(([key, value]) => {
+if (key !== '@') {
+result = result.replace(`@${key}`, String(value));
+}
+});
+
+// Then handle catchall if present
+if (route.endsWith('/@') && '@' in params) {
+const catchallValue = params['@'];
+// Remove the trailing /@ from the result
+result = result.substring(0, result.length - 2);
+
+if (Array.isArray(catchallValue)) {
+// If array, join with slashes
+result += `/${catchallValue.join('/')}`;
+} else if (typeof catchallValue === 'string') {
+// If string, add directly (with leading slash if needed)
+const prefix = catchallValue.startsWith('/') ? '' : '/';
+result += `${prefix}${catchallValue}`;
+}
+}
+}
+
+if (options.search) {
+const searchParams = new URLSearchParams(options.search);
+result += `?${searchParams.toString()}`;
+}
+
+return result;
+}
+
+import { usePageContext } from 'vike-solid/usePageContext'
+import { createMemo } from 'solid-js'
+function useParams<T extends PageRoute>(params: { from: T }): () => UseParamsResult<T> {
+const pageContext = usePageContext();
+
+return createMemo(() => {
+const routeParams = pageContext.routeParams as Record<string, string>;
+
+// Check if this is a catch-all route
+if (params.from.endsWith("/@") && routeParams && "*" in routeParams) {
+const catchAllPath = routeParams["*"] as string;
+const segments = catchAllPath.split("/").filter(Boolean);
+
+// Extract named parameters from the route
+const namedParams: Record<string, string> = {};
+const routeParts = params.from.split("/");
+const urlParts = pageContext.urlPathname.split("/");
+
+for (let i = 0; i < routeParts.length - 1; i++) {
+const routePart = routeParts[i];
+if (routePart.startsWith("@")) {
+const paramName = routePart.slice(1);
+namedParams[paramName] = urlParts[i];
+}
+}
+
+// Combine named parameters with catch-all segments
+return {
+...namedParams,
+"@": segments,
+"_@": catchAllPath.startsWith("/") ? catchAllPath : `/${catchAllPath}`,
+} as unknown as UseParamsResult<T>;
+}
+
+// Handle regular dynamic routes without catch-all
+return routeParams as UseParamsResult<T>;
+});
+}

src/route-tree.gen.ts

@@ -1,10 +1,11 @@
+import vikeRoutegen from "@blankeos/vike-routegen"
 import vike from "vike/plugin"
 import vikeSolid from "vike-solid/vite"
 import { defineConfig } from "vite"
 import tsConfigPaths from "vite-tsconfig-paths"
 
 export default defineConfig({
-  plugins: [tsConfigPaths(), vike(), vikeSolid()],
+  plugins: [tsConfigPaths(), vike(), vikeSolid(), vikeRoutegen()],
   server: { port: 3000 },
   preview: { port: 3000 },
   envPrefix: ["PUBLIC_"],