diff --git a/.changeset/shy-rivers-punch.md b/.changeset/shy-rivers-punch.md
new file mode 100644
index 000000000..cc79bb7e4
--- /dev/null
+++ b/.changeset/shy-rivers-punch.md
@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+get ssr working for tanstack router example
diff --git a/examples/with-tanstack-router/app.config.ts b/examples/with-tanstack-router/app.config.ts
index 8a3cbfcf3..ffb1ca742 100644
--- a/examples/with-tanstack-router/app.config.ts
+++ b/examples/with-tanstack-router/app.config.ts
@@ -2,7 +2,6 @@ import { defineConfig } from "@solidjs/start/config";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
export default defineConfig({
- ssr: false,
vite: {
plugins: [TanStackRouterVite({ target: "solid" })]
}
diff --git a/examples/with-tanstack-router/src/app.tsx b/examples/with-tanstack-router/src/app.tsx
index c56fe1f91..1f66fb04d 100644
--- a/examples/with-tanstack-router/src/app.tsx
+++ b/examples/with-tanstack-router/src/app.tsx
@@ -1,23 +1,8 @@
-import { RouterProvider, createRouter } from "@tanstack/solid-router";
-import { routeTree } from "./routeTree.gen";
+import { router } from "./router";
+import { RouterProvider } from "@tanstack/solid-router";
import "./app.css";
-const router = createRouter({
- defaultErrorComponent: (err) => {err.error.stack}
,
- 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 ;
}
diff --git a/examples/with-tanstack-router/src/entry-client.tsx b/examples/with-tanstack-router/src/entry-client.tsx
index 0ca4e3c30..bbf80ec15 100644
--- a/examples/with-tanstack-router/src/entry-client.tsx
+++ b/examples/with-tanstack-router/src/entry-client.tsx
@@ -1,4 +1,4 @@
// @refresh reload
-import { mount, StartClient } from "@solidjs/start/client";
+import { mount, StartClientTanstack } from "@solidjs/start/client";
-mount(() => , document.getElementById("app")!);
+mount(() => , document.getElementById("app")!);
diff --git a/examples/with-tanstack-router/src/entry-server.tsx b/examples/with-tanstack-router/src/entry-server.tsx
index 401eff83f..e1f708bcd 100644
--- a/examples/with-tanstack-router/src/entry-server.tsx
+++ b/examples/with-tanstack-router/src/entry-server.tsx
@@ -1,21 +1,40 @@
// @refresh reload
-import { createHandler, StartServer } from "@solidjs/start/server";
+import { createHandler, FetchEvent, StartServer } from "@solidjs/start/server";
+import { createMemoryHistory } from "@tanstack/solid-router";
+import { router } from "./router";
-export default createHandler(() => (
- (
-
-
-
-
-
- {assets}
-
-
- {children}
- {scripts}
-
-
- )}
- />
-));
+const routerLoad = async (event: FetchEvent) => {
+ const url = new URL(event.request.url);
+ const path = url.href.replace(url.origin, "");
+
+ router.update({
+ history: createMemoryHistory({
+ initialEntries: [path]
+ })
+ });
+
+ await router.load();
+};
+
+export default createHandler(
+ () => (
+ (
+
+
+
+
+
+ {assets}
+
+
+ {children}
+ {scripts}
+
+
+ )}
+ />
+ ),
+ undefined,
+ routerLoad
+);
diff --git a/examples/with-tanstack-router/src/router.tsx b/examples/with-tanstack-router/src/router.tsx
new file mode 100644
index 000000000..7aed452a7
--- /dev/null
+++ b/examples/with-tanstack-router/src/router.tsx
@@ -0,0 +1,22 @@
+import { createRouter as createTanstackSolidRouter } from "@tanstack/solid-router";
+import { routeTree } from "./routeTree.gen";
+
+export function createRouter() {
+ const router = createTanstackSolidRouter({
+ defaultErrorComponent: err => {err.error.stack}
,
+ routeTree,
+ defaultPreload: "intent",
+ defaultStaleTime: 5000,
+ scrollRestoration: true
+ });
+ return router;
+}
+
+export const router = createRouter();
+
+// Register things for typesafety
+declare module "@tanstack/solid-router" {
+ interface Register {
+ router: ReturnType;
+ }
+}
diff --git a/packages/start/src/client/StartClient.tsx b/packages/start/src/client/StartClient.tsx
index 4a3888453..447c7a365 100644
--- a/packages/start/src/client/StartClient.tsx
+++ b/packages/start/src/client/StartClient.tsx
@@ -24,3 +24,13 @@ export function StartClient() {
);
}
+
+export function StartClientTanstack() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/packages/start/src/client/index.tsx b/packages/start/src/client/index.tsx
index dae4ebaf7..d4bf610a6 100644
--- a/packages/start/src/client/index.tsx
+++ b/packages/start/src/client/index.tsx
@@ -1,5 +1,5 @@
// @refresh skip
import "vinxi/client";
-export { StartClient } from "./StartClient";
+export { StartClient, StartClientTanstack } from "./StartClient";
export { mount } from "./mount";
diff --git a/packages/start/src/client/spa/index.tsx b/packages/start/src/client/spa/index.tsx
index 436fe8d19..f18442ff8 100644
--- a/packages/start/src/client/spa/index.tsx
+++ b/packages/start/src/client/spa/index.tsx
@@ -7,4 +7,4 @@ export function mount(fn: () => JSX.Element, el: MountableElement) {
render(fn, el);
}
-export { StartClient } from "../StartClient";
+export { StartClient, StartClientTanstack } from "../StartClient";
diff --git a/packages/start/src/server/handler.ts b/packages/start/src/server/handler.ts
index b068eccb2..effd00735 100644
--- a/packages/start/src/server/handler.ts
+++ b/packages/start/src/server/handler.ts
@@ -31,18 +31,24 @@ export function getExpectedRedirectStatus(response: ResponseStub): number {
export function createBaseHandler(
fn: (context: PageEvent) => unknown,
createPageEvent: (event: FetchEvent) => Promise,
- options: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise) = {}
+ options: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise) = {},
+ routerLoad?: (event: FetchEvent) => Promise
) {
return eventHandler({
handler: (e: HTTPEvent) => {
const event = getFetchEvent(e);
return provideRequestEvent(event, async () => {
+ if (routerLoad) {
+ await routerLoad(event);
+ }
+
// api
const match = matchAPIRoute(new URL(event.request.url).pathname, event.request.method);
if (match) {
const mod = await match.handler.import();
- const fn = event.request.method === "HEAD" ? mod["HEAD"] || mod["GET"] : mod[event.request.method];
+ const fn =
+ event.request.method === "HEAD" ? mod["HEAD"] || mod["GET"] : mod[event.request.method];
(event as APIEvent).params = match.params || {};
// @ts-ignore
sharedConfig.context = { event };
@@ -62,6 +68,7 @@ export function createBaseHandler(
const mode = resolvedOptions.mode || "stream";
// @ts-ignore
if (resolvedOptions.nonce) context.nonce = resolvedOptions.nonce;
+
if (mode === "sync" || !import.meta.env.START_SSR) {
const html = renderToString(() => {
(sharedConfig.context as any).event = context;
@@ -130,7 +137,8 @@ function handleStreamCompleteRedirect(context: PageEvent) {
*/
export function createHandler(
fn: (context: PageEvent) => unknown,
- options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise)
+ options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise),
+ routerLoad?: (event: FetchEvent) => Promise
) {
- return createBaseHandler(fn, createPageEvent, options);
+ return createBaseHandler(fn, createPageEvent, options, routerLoad);
}
diff --git a/packages/start/src/server/spa/handler.ts b/packages/start/src/server/spa/handler.ts
index 94d1f7208..bb0212b58 100644
--- a/packages/start/src/server/spa/handler.ts
+++ b/packages/start/src/server/spa/handler.ts
@@ -7,9 +7,10 @@ import { FetchEvent, HandlerOptions, PageEvent } from "../types";
*/
export function createHandler(
fn: (context: PageEvent) => unknown,
- options?: HandlerOptions | ((context: PageEvent) => HandlerOptions)
+ options?: HandlerOptions | ((context: PageEvent) => HandlerOptions),
+ routerLoad?: (event: FetchEvent) => Promise
) {
- return createBaseHandler(fn, createPageEvent, options);
+ return createBaseHandler(fn, createPageEvent, options, routerLoad);
}
export async function createPageEvent(ctx: FetchEvent) {