{post.title}
+{post.body}
+{'client-only module rendered'}
+} diff --git a/e2e/octane-start/basic/src/deferred-hydration-proof.css b/e2e/octane-start/basic/src/deferred-hydration-proof.css new file mode 100644 index 0000000000..81194cac33 --- /dev/null +++ b/e2e/octane-start/basic/src/deferred-hydration-proof.css @@ -0,0 +1,3 @@ +.octane-start-deferred-hydration-proof { + color: rgb(12, 34, 56); +} diff --git a/e2e/octane-start/basic/src/deferred-hydration-proof.tsrx b/e2e/octane-start/basic/src/deferred-hydration-proof.tsrx new file mode 100644 index 0000000000..0f72915dbb --- /dev/null +++ b/e2e/octane-start/basic/src/deferred-hydration-proof.tsrx @@ -0,0 +1,24 @@ +import { useState } from 'octane'; +import './deferred-hydration-proof.css'; + +const browserProof = globalThis as typeof globalThis & { + __octaneStartDeferredHydrationModuleLoaded?: boolean; +}; + +if (typeof document !== 'undefined') { + browserProof.__octaneStartDeferredHydrationModuleLoaded = true; +} + +export function DeferredHydrationProof() @{ + const [clicks, setClicks] = useState(0); + + +} diff --git a/e2e/octane-start/basic/src/routeTree.gen.ts b/e2e/octane-start/basic/src/routeTree.gen.ts new file mode 100644 index 0000000000..b3f86c5f7c --- /dev/null +++ b/e2e/octane-start/basic/src/routeTree.gen.ts @@ -0,0 +1,267 @@ +/* eslint-disable */ + +// @ts-nocheck + +// noinspection JSUnusedGlobalSymbols + +// This file was automatically generated by TanStack Router. +// You should NOT make any changes in this file as it will be overwritten. +// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. + +import { Route as rootRouteImport } from './routes/__root.tsrx' +import { Route as IndexRouteImport } from './routes/index.tsrx' +import { Route as AboutRouteImport } from './routes/about.tsrx' +import { Route as DeferredRouteImport } from './routes/deferred.tsrx' +import { Route as DeferredErrorRouteImport } from './routes/deferred-error.tsrx' +import { Route as HydrateRouteImport } from './routes/hydrate.tsrx' +import { Route as PostsRouteImport } from './routes/posts.tsrx' +import { Route as RedirectRouteImport } from './routes/redirect.tsrx' +import { Route as ServerFunctionRouteImport } from './routes/server-function.tsrx' +import { Route as PostsIndexRouteImport } from './routes/posts.index.tsrx' +import { Route as PostsPostIdRouteImport } from './routes/posts.$postId.tsrx' + +const IndexRoute = IndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => rootRouteImport, +} as any) +const AboutRoute = AboutRouteImport.update({ + id: '/about', + path: '/about', + getParentRoute: () => rootRouteImport, +} as any) +const DeferredRoute = DeferredRouteImport.update({ + id: '/deferred', + path: '/deferred', + getParentRoute: () => rootRouteImport, +} as any) +const DeferredErrorRoute = DeferredErrorRouteImport.update({ + id: '/deferred-error', + path: '/deferred-error', + getParentRoute: () => rootRouteImport, +} as any) +const HydrateRoute = HydrateRouteImport.update({ + id: '/hydrate', + path: '/hydrate', + getParentRoute: () => rootRouteImport, +} as any) +const PostsRoute = PostsRouteImport.update({ + id: '/posts', + path: '/posts', + getParentRoute: () => rootRouteImport, +} as any) +const RedirectRoute = RedirectRouteImport.update({ + id: '/redirect', + path: '/redirect', + getParentRoute: () => rootRouteImport, +} as any) +const ServerFunctionRoute = ServerFunctionRouteImport.update({ + id: '/server-function', + path: '/server-function', + getParentRoute: () => rootRouteImport, +} as any) +const PostsIndexRoute = PostsIndexRouteImport.update({ + id: '/', + path: '/', + getParentRoute: () => PostsRoute, +} as any) +const PostsPostIdRoute = PostsPostIdRouteImport.update({ + id: '/$postId', + path: '/$postId', + getParentRoute: () => PostsRoute, +} as any) + +export interface FileRoutesByFullPath { + '/': typeof IndexRoute + '/about': typeof AboutRoute + '/deferred': typeof DeferredRoute + '/deferred-error': typeof DeferredErrorRoute + '/hydrate': typeof HydrateRoute + '/posts': typeof PostsRouteWithChildren + '/redirect': typeof RedirectRoute + '/server-function': typeof ServerFunctionRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute +} +export interface FileRoutesByTo { + '/': typeof IndexRoute + '/about': typeof AboutRoute + '/deferred': typeof DeferredRoute + '/deferred-error': typeof DeferredErrorRoute + '/hydrate': typeof HydrateRoute + '/redirect': typeof RedirectRoute + '/server-function': typeof ServerFunctionRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts': typeof PostsIndexRoute +} +export interface FileRoutesById { + __root__: typeof rootRouteImport + '/': typeof IndexRoute + '/about': typeof AboutRoute + '/deferred': typeof DeferredRoute + '/deferred-error': typeof DeferredErrorRoute + '/hydrate': typeof HydrateRoute + '/posts': typeof PostsRouteWithChildren + '/redirect': typeof RedirectRoute + '/server-function': typeof ServerFunctionRoute + '/posts/$postId': typeof PostsPostIdRoute + '/posts/': typeof PostsIndexRoute +} +export interface FileRouteTypes { + fileRoutesByFullPath: FileRoutesByFullPath + fullPaths: + | '/' + | '/about' + | '/deferred' + | '/deferred-error' + | '/hydrate' + | '/posts' + | '/redirect' + | '/server-function' + | '/posts/$postId' + | '/posts/' + fileRoutesByTo: FileRoutesByTo + to: + | '/' + | '/about' + | '/deferred' + | '/deferred-error' + | '/hydrate' + | '/redirect' + | '/server-function' + | '/posts/$postId' + | '/posts' + id: + | '__root__' + | '/' + | '/about' + | '/deferred' + | '/deferred-error' + | '/hydrate' + | '/posts' + | '/redirect' + | '/server-function' + | '/posts/$postId' + | '/posts/' + fileRoutesById: FileRoutesById +} +export interface RootRouteChildren { + IndexRoute: typeof IndexRoute + AboutRoute: typeof AboutRoute + DeferredRoute: typeof DeferredRoute + DeferredErrorRoute: typeof DeferredErrorRoute + HydrateRoute: typeof HydrateRoute + PostsRoute: typeof PostsRouteWithChildren + RedirectRoute: typeof RedirectRoute + ServerFunctionRoute: typeof ServerFunctionRoute +} + +declare module '@tanstack/octane-router' { + interface FileRoutesByPath { + '/': { + id: '/' + path: '/' + fullPath: '/' + preLoaderRoute: typeof IndexRouteImport + parentRoute: typeof rootRouteImport + } + '/about': { + id: '/about' + path: '/about' + fullPath: '/about' + preLoaderRoute: typeof AboutRouteImport + parentRoute: typeof rootRouteImport + } + '/deferred': { + id: '/deferred' + path: '/deferred' + fullPath: '/deferred' + preLoaderRoute: typeof DeferredRouteImport + parentRoute: typeof rootRouteImport + } + '/deferred-error': { + id: '/deferred-error' + path: '/deferred-error' + fullPath: '/deferred-error' + preLoaderRoute: typeof DeferredErrorRouteImport + parentRoute: typeof rootRouteImport + } + '/hydrate': { + id: '/hydrate' + path: '/hydrate' + fullPath: '/hydrate' + preLoaderRoute: typeof HydrateRouteImport + parentRoute: typeof rootRouteImport + } + '/posts': { + id: '/posts' + path: '/posts' + fullPath: '/posts' + preLoaderRoute: typeof PostsRouteImport + parentRoute: typeof rootRouteImport + } + '/redirect': { + id: '/redirect' + path: '/redirect' + fullPath: '/redirect' + preLoaderRoute: typeof RedirectRouteImport + parentRoute: typeof rootRouteImport + } + '/server-function': { + id: '/server-function' + path: '/server-function' + fullPath: '/server-function' + preLoaderRoute: typeof ServerFunctionRouteImport + parentRoute: typeof rootRouteImport + } + '/posts/': { + id: '/posts/' + path: '/' + fullPath: '/posts/' + preLoaderRoute: typeof PostsIndexRouteImport + parentRoute: typeof PostsRoute + } + '/posts/$postId': { + id: '/posts/$postId' + path: '/$postId' + fullPath: '/posts/$postId' + preLoaderRoute: typeof PostsPostIdRouteImport + parentRoute: typeof PostsRoute + } + } +} + +interface PostsRouteChildren { + PostsPostIdRoute: typeof PostsPostIdRoute + PostsIndexRoute: typeof PostsIndexRoute +} + +const PostsRouteChildren: PostsRouteChildren = { + PostsPostIdRoute: PostsPostIdRoute, + PostsIndexRoute: PostsIndexRoute, +} + +const PostsRouteWithChildren = PostsRoute._addFileChildren(PostsRouteChildren) + +const rootRouteChildren: RootRouteChildren = { + IndexRoute: IndexRoute, + AboutRoute: AboutRoute, + DeferredRoute: DeferredRoute, + DeferredErrorRoute: DeferredErrorRoute, + HydrateRoute: HydrateRoute, + PostsRoute: PostsRouteWithChildren, + RedirectRoute: RedirectRoute, + ServerFunctionRoute: ServerFunctionRoute, +} +export const routeTree = rootRouteImport + ._addFileChildren(rootRouteChildren) + ._addFileTypes{props.error instanceof Error ? props.error.message : String(props.error)}
+{String(value)}
} +{data.person.name + ' ' + data.person.kind}
++ {person.name + ' ' + person.kind} +
} ++ {value.date.toISOString() + ' ' + value.map.get('state')} +
} +{'eager route content'}
+{'loader ran on ' + data.run}
+{data.date.toISOString()}
+{data.map.get('framework') + ' ' + data.map.get('pipeline')}
+ +{post.body}
+{'Select a post'}
+} diff --git a/e2e/octane-start/basic/src/routes/posts.tsrx b/e2e/octane-start/basic/src/routes/posts.tsrx new file mode 100644 index 0000000000..07830f73fc --- /dev/null +++ b/e2e/octane-start/basic/src/routes/posts.tsrx @@ -0,0 +1,39 @@ +import { useState } from 'octane'; +import { Link, Outlet, createFileRoute } from '@tanstack/octane-router'; +import { fetchPosts } from '../utils/posts.ts'; + +export const Route = createFileRoute('/posts')({ + loader: async () => fetchPosts(), + component: PostsLayout, +}); + +function PostsLayout() @{ + const posts = Route.useLoaderData(); + const [count, setCount] = useState(0); + +{result}
+
+ @if (props.error?.message) {
+
+ {props.error.message as string}
+
+ }
+
+ Not Found
` (the +// upstream dev-only console.warn is not ported — repo policy: functional outcomes +// only). Rendered from two places, mirroring react-router: `Not Found
+ } +} diff --git a/packages/octane-router/src/RouterProvider.tsrx b/packages/octane-router/src/RouterProvider.tsrx new file mode 100644 index 0000000000..eb8cd81c62 --- /dev/null +++ b/packages/octane-router/src/RouterProvider.tsrx @@ -0,0 +1,37 @@ +// Places the router into context and renders the active match tree. Mirrors +// react-router's RouterProvider.tsx: `RouterContextProvider` is the low-level +// provider — it forwards any extra props into `router.update()` (so +// `Not Found
+} diff --git a/packages/octane-router/src/not-found.tsrx.d.ts b/packages/octane-router/src/not-found.tsrx.d.ts new file mode 100644 index 0000000000..6df2de5b6b --- /dev/null +++ b/packages/octane-router/src/not-found.tsrx.d.ts @@ -0,0 +1,11 @@ +import type { ComponentBody } from 'octane' +import type { NotFoundError } from '@tanstack/router-core' + +export interface CatchNotFoundProps { + fallback?: (error: NotFoundError) => unknown + onCatch?: (error: Error, errorInfo: { componentStack: string }) => void + children?: unknown +} + +export declare const CatchNotFound: ComponentBody