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

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 =