@tanstack/solid-router 2.0.0-beta.15 → 2.0.0-beta.17

package/dist/source/ssr/RouterClient.d.ts

@@ -1,4 +1,4 @@
 import type { AnyRouter } from '@tanstack/router-core';
 export declare function RouterClient(props: {
     router: AnyRouter;
-}): import("solid-js").JSX.Element;
+}): import("solid-js/web").JSX.Element;

package/dist/source/ssr/RouterServer.d.ts

@@ -1,4 +1,4 @@
 import type { AnyRouter } from '@tanstack/router-core';
 export declare function RouterServer<TRouter extends AnyRouter>(props: {
     router: TRouter;
-}): import("solid-js").JSX.Element;
+}): import("solid-js/web").JSX.Element;

package/dist/source/ssr/renderRouterToStream.d.ts

@@ -1,8 +1,8 @@
-import type { JSXElement } from 'solid-js';
 import type { AnyRouter } from '@tanstack/router-core';
+import type { JSX } from '@solidjs/web';
 export declare const renderRouterToStream: ({ request, router, responseHeaders, children, }: {
     request: Request;
     router: AnyRouter;
     responseHeaders: Headers;
-    children: () => JSXElement;
+    children: () => JSX.Element;
 }) => Promise<Response>;

package/dist/source/ssr/renderRouterToString.d.ts

@@ -1,7 +1,7 @@
 import type { AnyRouter } from '@tanstack/router-core';
-import type { JSXElement } from 'solid-js';
+import type { JSX } from '@solidjs/web';
 export declare const renderRouterToString: ({ router, responseHeaders, children, }: {
     router: AnyRouter;
     responseHeaders: Headers;
-    children: () => JSXElement;
+    children: () => JSX.Element;
 }) => Response;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-router",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.17",
   "description": "Modern and scalable routing for Solid applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -89,27 +89,27 @@
   "dependencies": {
     "@solid-devtools/logger": "^0.9.4",
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/web": "2.0.0-beta.8",
+    "@solidjs/web": "2.0.0-beta.10",
     "isbot": "^5.1.22",
     "@tanstack/history": "1.161.6",
     "@tanstack/router-core": "1.168.9"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
+    "@solidjs/web": "2.0.0-beta.10",
     "@tanstack/intent": "^0.0.14",
     "@testing-library/jest-dom": "^6.6.3",
+    "@types/node": ">=20",
     "combinate": "^1.1.11",
     "eslint-plugin-solid": "^0.14.5",
-    "solid-js": "2.0.0-beta.8",
-    "@solidjs/web": "2.0.0-beta.8",
+    "solid-js": "2.0.0-beta.10",
     "vite": "*",
     "vite-plugin-solid": "^3.0.0-next.5",
-    "zod": "^3.23.8",
-    "@types/node": ">=20"
+    "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "solid-js": ">=2.0.0-0 <3.0.0",
-    "@solidjs/web": ">=2.0.0-0 <3.0.0"
+    "@solidjs/web": ">=2.0.0-0 <3.0.0",
+    "solid-js": ">=2.0.0-0 <3.0.0"
   },
   "bin": {
     "intent": "./bin/intent.js"

package/src/Asset.tsx

@@ -2,7 +2,7 @@ import { isServer } from '@tanstack/router-core/isServer'
 import { createEffect } from 'solid-js'
 import { useRouter } from './useRouter'
 import type { RouterManagedTag } from '@tanstack/router-core'
-import type { JSX } from 'solid-js'
+import type { JSX } from '@solidjs/web'
 
 export function Asset({
   tag,

package/src/CatchBoundary.tsx

@@ -1,11 +1,12 @@
 import * as Solid from 'solid-js'
 import { Dynamic } from '@solidjs/web'
 import type { ErrorRouteComponent } from './route'
+import type { JSX } from '@solidjs/web'
 
 export function CatchBoundary(
   props: {
     getResetKey: () => number | string
-    children: Solid.JSX.Element
+    children: JSX.Element
     errorComponent?: ErrorRouteComponent
     onCatch?: (error: Error) => void
   } & Solid.ParentProps,

package/src/ClientOnly.tsx

@@ -1,14 +1,15 @@
 import * as Solid from 'solid-js'
+import type { JSX } from '@solidjs/web'
 
 export interface ClientOnlyProps {
   /**
    * The children to render when the JS is loaded.
    */
-  children: Solid.JSX.Element
+  children: JSX.Element
   /**
    * The fallback component to render if the JS is not yet loaded.
    */
-  fallback?: Solid.JSX.Element
+  fallback?: JSX.Element
 }
 
 /**

package/src/HeadContent.tsx

@@ -1,5 +1,5 @@
 import { For } from 'solid-js'
-import { Portal, isServer } from '@solidjs/web'
+import { HydrationScript, Portal, isServer } from '@solidjs/web'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import { useTags } from './headContentUtils'
@@ -20,17 +20,23 @@ export function HeadContent(props: HeadContentProps) {
   const router = useRouter()
 
   const content = () => (
-    <For each={tags()}>
-      {(tag) => {
-        const t = tag() as any
-        return <Asset tag={t.tag} attrs={t.attrs} children={t.children} />
-      }}
-    </For>
+    <>
+      <HydrationScript />
+      <For each={tags()}>
+        {(tag) => {
+          const t = tag() as any
+          return <Asset tag={t.tag} attrs={t.attrs} children={t.children} />
+        }}
+      </For>
+    </>
   )
 
   return (isServer ?? router.isServer) ? (
     content()
   ) : (
-    <Portal mount={document.head}>{content()}</Portal>
+    <>
+      <HydrationScript />
+      <Portal mount={document.head}>{content()}</Portal>
+    </>
   )
 }

package/src/Matches.tsx

@@ -24,6 +24,7 @@ import type {
   RouteByPath,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
+import type { JSX } from '@solidjs/web'
 
 const NearestMatchContext = nearestMatchContext as unknown as Solid.Component<{
   value: any
@@ -32,11 +33,11 @@ const NearestMatchContext = nearestMatchContext as unknown as Solid.Component<{
 
 declare module '@tanstack/router-core' {
   export interface RouteMatchExtensions {
-    meta?: Array<Solid.JSX.IntrinsicElements['meta'] | undefined>
-    links?: Array<Solid.JSX.IntrinsicElements['link'] | undefined>
-    scripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
-    styles?: Array<Solid.JSX.IntrinsicElements['style'] | undefined>
-    headScripts?: Array<Solid.JSX.IntrinsicElements['script'] | undefined>
+    meta?: Array<JSX.IntrinsicElements['meta'] | undefined>
+    links?: Array<JSX.IntrinsicElements['link'] | undefined>
+    scripts?: Array<JSX.IntrinsicElements['script'] | undefined>
+    styles?: Array<JSX.IntrinsicElements['style'] | undefined>
+    headScripts?: Array<JSX.IntrinsicElements['script'] | undefined>
   }
 }
 
@@ -183,8 +184,8 @@ export type MakeMatchRouteOptions<
           TRouter['routeTree'],
           ResolveRelativePath<TFrom, NoInfer<TTo>>
         >['types']['allParams'],
-      ) => Solid.JSX.Element)
-    | Solid.JSX.Element
+      ) => JSX.Element)
+    | JSX.Element
 }
 
 export function MatchRoute<

package/src/RouterProvider.tsx

@@ -7,6 +7,7 @@ import type {
   RegisteredRouter,
   RouterOptions,
 } from '@tanstack/router-core'
+import type { JSX } from '@solidjs/web'
 
 const RouterContext = routerContext as unknown as Solid.Component<{
   value: any
@@ -21,7 +22,7 @@ export function RouterContextProvider<
   children,
   ...rest
 }: RouterProps<TRouter, TDehydrated> & {
-  children: () => Solid.JSX.Element
+  children: () => JSX.Element
 }) {
   if (Object.keys(rest).length > 0) {
     Solid.runWithOwner(null, () => {

package/src/link.tsx

@@ -27,6 +27,7 @@ import type {
   ValidateLinkOptions,
   ValidateLinkOptionsArray,
 } from './typePrimitives'
+import type { ComponentProps, JSX, ValidComponent } from '@solidjs/web'
 
 function mergeRefs<T>(
   ...refs: Array<((el: T) => void) | undefined>
@@ -63,7 +64,7 @@ export function useLinkProps<
   TMaskTo extends string = '',
 >(
   options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
-): Solid.ComponentProps<'a'> {
+): ComponentProps<'a'> {
   const router = useRouter()
   const [isTransitioning, setIsTransitioning] = Solid.createSignal(false)
   const shouldHydrateHash = !isServer && !!router.options.ssr
@@ -417,8 +418,8 @@ export function useLinkProps<
     handleTouchStart,
   )
 
-  type ResolvedLinkStateProps = Omit<Solid.ComponentProps<'a'>, 'style'> & {
-    style?: Solid.JSX.CSSProperties
+  type ResolvedLinkStateProps = Omit<ComponentProps<'a'>, 'style'> & {
+    style?: JSX.CSSProperties
   }
 
   const resolvedProps = Solid.createMemo(() => {
@@ -500,7 +501,7 @@ const STATIC_TRANSITIONING_ATTRIBUTES = {
 /** Call a JSX.EventHandlerUnion with the event. */
 function callHandler<T, TEvent extends Event>(
   event: TEvent & { currentTarget: T; target: Element },
-  handler: Solid.JSX.EventHandlerUnion<T, TEvent>,
+  handler: JSX.EventHandlerUnion<T, TEvent>,
 ) {
   if (typeof handler === 'function') {
     handler(event)
@@ -511,7 +512,7 @@ function callHandler<T, TEvent extends Event>(
 }
 
 function createComposedHandler<T, TEvent extends Event>(
-  getHandler: () => Solid.JSX.EventHandlerUnion<T, TEvent> | undefined,
+  getHandler: () => JSX.EventHandlerUnion<T, TEvent> | undefined,
   fallback: (event: TEvent) => void,
 ) {
   return (event: TEvent & { currentTarget: T; target: Element }) => {
@@ -527,7 +528,7 @@ export type UseLinkPropsOptions<
   TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
   TMaskTo extends string = '.',
 > = ActiveLinkOptions<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
-  Omit<Solid.ComponentProps<'a'>, 'style'> & { style?: Solid.JSX.CSSProperties }
+  Omit<ComponentProps<'a'>, 'style'> & { style?: JSX.CSSProperties }
 
 export type ActiveLinkOptions<
   TComp = 'a',
@@ -571,15 +572,12 @@ export type LinkProps<
 export interface LinkPropsChildren {
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
-    | Solid.JSX.Element
-    | ((state: {
-        isActive: boolean
-        isTransitioning: boolean
-      }) => Solid.JSX.Element)
+    | JSX.Element
+    | ((state: { isActive: boolean; isTransitioning: boolean }) => JSX.Element)
 }
 
-type LinkComponentSolidProps<TComp> = TComp extends Solid.ValidComponent
-  ? Omit<Solid.ComponentProps<TComp>, keyof CreateLinkProps>
+type LinkComponentSolidProps<TComp> = TComp extends ValidComponent
+  ? Omit<ComponentProps<TComp>, keyof CreateLinkProps>
   : never
 
 export type LinkComponentProps<
@@ -612,7 +610,7 @@ export type LinkComponent<
   const TMaskTo extends string = '',
 >(
   props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
-) => Solid.JSX.Element
+) => JSX.Element
 
 export interface LinkComponentRoute<
   in out TDefaultFrom extends string = string,
@@ -631,11 +629,11 @@ export interface LinkComponentRoute<
       this['defaultFrom'],
       TMaskTo
     >,
-  ): Solid.JSX.Element
+  ): JSX.Element
 }
 
 export function createLink<const TComp>(
-  Comp: Constrain<TComp, any, (props: CreateLinkProps) => Solid.JSX.Element>,
+  Comp: Constrain<TComp, any, (props: CreateLinkProps) => JSX.Element>,
 ): LinkComponent<TComp> {
   return (props) => <Link {...props} _asChild={Comp} />
 }
@@ -653,9 +651,7 @@ export const Link: LinkComponent<'a'> = (props) => {
   // Resolve children once using Solid.children to avoid
   // re-accessing the children getter (which in Solid 2.0 would
   // re-invoke createComponent each time for JSX children).
-  const resolvedChildren = Solid.children(
-    () => local.children as Solid.JSX.Element,
-  )
+  const resolvedChildren = Solid.children(() => local.children as JSX.Element)
 
   const children = () => {
     const ch = resolvedChildren()
@@ -687,7 +683,7 @@ export const Link: LinkComponent<'a'> = (props) => {
   }
 
   return (
-    <Dynamic component={local._asChild as Solid.ValidComponent} {...linkProps}>
+    <Dynamic component={local._asChild as ValidComponent} {...linkProps}>
       {children()}
     </Dynamic>
   )

package/src/not-found.tsx

@@ -3,6 +3,7 @@ import * as Solid from 'solid-js'
 import { CatchBoundary } from './CatchBoundary'
 import { useRouter } from './useRouter'
 import type { NotFoundError } from '@tanstack/router-core'
+import type { JSX } from '@solidjs/web'
 
 // Solid wraps non-Error throws in an Error and stores the original thrown value
 // on `cause`, so component-thrown `notFound()` needs one extra unwrapping step.
@@ -21,9 +22,9 @@ export function getNotFound(
 }
 
 export function CatchNotFound(props: {
-  fallback?: (error: NotFoundError) => Solid.JSX.Element
+  fallback?: (error: NotFoundError) => JSX.Element
   onCatch?: (error: NotFoundError) => void
-  children: Solid.JSX.Element
+  children: JSX.Element
 }) {
   const router = useRouter()
   // TODO: Some way for the user to programmatically reset the not-found boundary?

package/src/route.tsx

@@ -44,9 +44,9 @@ import type { UseMatchRoute } from './useMatch'
 import type { UseLoaderDepsRoute } from './useLoaderDeps'
 import type { UseParamsRoute } from './useParams'
 import type { UseSearchRoute } from './useSearch'
-import type * as Solid from 'solid-js'
 import type { UseRouteContextRoute } from './useRouteContext'
 import type { LinkComponentRoute } from './link'
+import type { JSX } from '@solidjs/web'
 
 declare module '@tanstack/router-core' {
   export interface UpdatableRouteOptionsExtensions {
@@ -57,11 +57,7 @@ declare module '@tanstack/router-core' {
   }
 
   export interface RootRouteOptionsExtensions {
-    shellComponent?: ({
-      children,
-    }: {
-      children: Solid.JSX.Element
-    }) => Solid.JSX.Element
+    shellComponent?: ({ children }: { children: JSX.Element }) => JSX.Element
   }
 
   export interface RouteExtensions<
@@ -537,7 +533,7 @@ export function createRouteMask<
   return opts as any
 }
 
-export type SolidNode = Solid.JSX.Element
+export type SolidNode = JSX.Element
 
 export interface DefaultRouteTypes<TProps> {
   component: (props: TProps) => any

package/src/router.ts

@@ -12,7 +12,7 @@ import type {
   NotFoundRouteComponent,
   RouteComponent,
 } from './route'
-import type { JSX } from 'solid-js'
+import type { JSX } from '@solidjs/web'
 
 declare module '@tanstack/router-core' {
   export interface RouterOptionsExtensions {

package/src/ssr/renderRouterToStream.tsx

@@ -2,9 +2,9 @@ import * as Solid from '@solidjs/web'
 import { isbot } from 'isbot'
 import { transformReadableStreamWithRouter } from '@tanstack/router-core/ssr/server'
 import { makeSsrSerovalPlugin } from '@tanstack/router-core'
-import type { JSXElement } from 'solid-js'
 import type { ReadableStream } from 'node:stream/web'
 import type { AnyRouter } from '@tanstack/router-core'
+import type { JSX } from '@solidjs/web'
 
 export const renderRouterToStream = async ({
   request,
@@ -15,7 +15,7 @@ export const renderRouterToStream = async ({
   request: Request
   router: AnyRouter
   responseHeaders: Headers
-  children: () => JSXElement
+  children: () => JSX.Element
 }) => {
   const { writable, readable } = new TransformStream()
 

package/src/ssr/renderRouterToString.tsx

@@ -1,7 +1,7 @@
 import * as Solid from '@solidjs/web'
 import { makeSsrSerovalPlugin } from '@tanstack/router-core'
 import type { AnyRouter } from '@tanstack/router-core'
-import type { JSXElement } from 'solid-js'
+import type { JSX } from '@solidjs/web'
 
 export const renderRouterToString = ({
   router,
@@ -10,7 +10,7 @@ export const renderRouterToString = ({
 }: {
   router: AnyRouter
   responseHeaders: Headers
-  children: () => JSXElement
+  children: () => JSX.Element
 }) => {
   try {
     const serializationAdapters =