chore: add tanstack router example with ssr false (#1821)

Author: Brenley Dueck

examples/pnpm-lock.yaml

@@ -0,0 +1,30 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.

examples/with-tanstack-router/README.md

@@ -0,0 +1,9 @@
+import { defineConfig } from "@solidjs/start/config";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+
+export default defineConfig({
+  ssr: false,
+  vite: {
+    plugins: [TanStackRouterVite({ target: "solid" })]
+  }
+});

examples/with-tanstack-router/app.config.ts

@@ -0,0 +1,20 @@
+{
+  "name": "with-tanstack-router",
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start",
+    "version": "vinxi version"
+  },
+  "dependencies": {
+    "@tanstack/solid-router": "^1.108.0",
+    "@tanstack/router-plugin": "^1.108.0",
+    "@solidjs/start": "^1.1.0",
+    "solid-js": "^1.9.2",
+    "vinxi": "^0.5.3"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

examples/with-tanstack-router/package.json

@@ -0,0 +1,39 @@
+body {
+  font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+a {
+  margin-right: 1rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #335d92;
+  text-transform: uppercase;
+  font-size: 4rem;
+  font-weight: 100;
+  line-height: 1.1;
+  margin: 4rem auto;
+  max-width: 14rem;
+}
+
+p {
+  max-width: 14rem;
+  margin: 2rem auto;
+  line-height: 1.35;
+}
+
+@media (min-width: 480px) {
+  h1 {
+    max-width: none;
+  }
+
+  p {
+    max-width: none;
+  }
+}

examples/with-tanstack-router/public/favicon.ico

@@ -0,0 +1,22 @@
+import { RouterProvider, createRouter } from "@tanstack/solid-router";
+import { routeTree } from "./routeTree.gen";
+
+import "./app.css";
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  defaultStaleTime: 5000,
+  scrollRestoration: true
+});
+
+// Register things for typesafety
+declare module "@tanstack/solid-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+export default function App() {
+  return <RouterProvider router={router} />;
+}

examples/with-tanstack-router/src/app.css

@@ -0,0 +1,21 @@
+.increment {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 1em 2em;
+  color: #335d92;
+  background-color: rgba(68, 107, 158, 0.1);
+  border-radius: 2em;
+  border: 2px solid rgba(68, 107, 158, 0);
+  outline: none;
+  width: 200px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.increment:focus {
+  border: 2px solid #335d92;
+}
+
+.increment:active {
+  background-color: rgba(68, 107, 158, 0.2);
+}

examples/with-tanstack-router/src/app.tsx

@@ -0,0 +1,11 @@
+import { createSignal } from "solid-js";
+import "./Counter.css";
+
+export default function Counter() {
+  const [count, setCount] = createSignal(0);
+  return (
+    <button class="increment" onClick={() => setCount(count() + 1)} type="button">
+      Clicks: {count()}
+    </button>
+  );
+}

examples/with-tanstack-router/src/components/Counter.css

@@ -0,0 +1,4 @@
+// @refresh reload
+import { mount, StartClient } from "@solidjs/start/client";
+
+mount(() => <StartClient />, document.getElementById("app")!);