@tanstack/solid-router 1.121.0 → 1.121.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-router",
-  "version": "1.121.0",
+  "version": "1.121.3",
   "description": "Modern and scalable routing for Solid applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -61,7 +61,7 @@
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.120.17",
-    "@tanstack/router-core": "1.121.0"
+    "@tanstack/router-core": "1.121.2"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",

package/src/Matches.tsx

@@ -170,12 +170,12 @@ export function MatchRoute<
       {(_) => {
         const matchRoute = useMatchRoute()
         const params = matchRoute(props as any)() as boolean
-
-        if (typeof props.children === 'function') {
-          return (props.children as any)(params)
+        const child = props.children
+        if (typeof child === 'function') {
+          return (child as any)(params)
         }
 
-        return params ? props.children : null
+        return params ? child : null
       }}
     </Solid.Show>
   )

package/src/link.tsx

@@ -62,7 +62,6 @@ export function useLinkProps<
       'startTransition',
       'resetScroll',
       'viewTransition',
-      'children',
       'target',
       'disabled',
       'style',
@@ -250,7 +249,6 @@ export function useLinkProps<
         },
       },
       Solid.splitProps(local, [
-        'children',
         'target',
         'disabled',
         'style',
@@ -294,7 +292,7 @@ export function useLinkProps<
         startTransition: local.startTransition,
         viewTransition: local.viewTransition,
         ignoreBlocker: local.ignoreBlocker,
-      } as any)
+      })
     }
   }
 
@@ -545,29 +543,37 @@ export interface LinkComponentRoute<
 export function createLink<const TComp>(
   Comp: Constrain<TComp, any, (props: CreateLinkProps) => Solid.JSX.Element>,
 ): LinkComponent<TComp> {
-  return (props) => <Link {...(props as any)} _asChild={Comp} />
+  return (props) => <Link {...props} _asChild={Comp} />
 }
 
-export const Link: LinkComponent<'a'> = (props: any) => {
-  const [local, rest] = Solid.splitProps(props, ['_asChild'])
+export const Link: LinkComponent<'a'> = (props) => {
+  const [local, rest] = Solid.splitProps(
+    props as typeof props & { _asChild: any },
+    ['_asChild', 'children'],
+  )
 
   const [_, linkProps] = Solid.splitProps(
     useLinkProps(rest as unknown as any),
-    ['type', 'children'],
+    ['type'],
   )
 
-  const children = () =>
-    typeof rest.children === 'function'
-      ? rest.children({
-          get isActive() {
-            return (linkProps as any)['data-status'] === 'active'
-          },
-        })
-      : rest.children
+  const children = Solid.createMemo(() => {
+    const ch = local.children
+    if (typeof ch === 'function') {
+      return ch({
+        get isActive() {
+          return (linkProps as any)['data-status'] === 'active'
+        },
+        isTransitioning: false,
+      })
+    }
+
+    return ch satisfies Solid.JSX.Element
+  })
 
   return (
     <Dynamic component={local._asChild ? local._asChild : 'a'} {...linkProps}>
-      {children}
+      {children()}
     </Dynamic>
   )
 }

package/src/useBlocker.tsx

@@ -112,20 +112,25 @@ function _resolveBlockerOpts(
     }
   }
 
-  const shouldBlock = Boolean(opts.condition ?? true)
-  const fn = opts.blockerFn
+  const shouldBlock = Solid.createMemo(() => Boolean(opts.condition ?? true))
 
   const _customBlockerFn = async () => {
-    if (shouldBlock && fn !== undefined) {
-      return await fn()
+    if (shouldBlock() && opts.blockerFn !== undefined) {
+      return await opts.blockerFn()
     }
-    return shouldBlock
+    return shouldBlock()
   }
 
   return {
-    shouldBlockFn: _customBlockerFn,
-    enableBeforeUnload: shouldBlock,
-    withResolver: fn === undefined,
+    get shouldBlockFn() {
+      return _customBlockerFn
+    },
+    get enableBeforeUnload() {
+      return shouldBlock()
+    },
+    get withResolver() {
+      return opts.blockerFn === undefined
+    },
   }
 }
 
@@ -155,15 +160,16 @@ export function useBlocker(
   opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
   condition?: boolean | any,
 ): Solid.Accessor<BlockerResolver> | void {
-  const {
-    shouldBlockFn,
-    enableBeforeUnload = true,
-    disabled = false,
-    withResolver = false,
-  } = _resolveBlockerOpts(opts, condition)
+  const props = Solid.mergeProps(
+    {
+      enableBeforeUnload: true,
+      disabled: false,
+      withResolver: false,
+    },
+    _resolveBlockerOpts(opts, condition),
+  )
 
   const router = useRouter()
-  const { history } = router
 
   const [resolver, setResolver] = Solid.createSignal<BlockerResolver>({
     status: 'idle',
@@ -199,12 +205,12 @@ export function useBlocker(
       const current = getLocation(blockerFnArgs.currentLocation)
       const next = getLocation(blockerFnArgs.nextLocation)
 
-      const shouldBlock = await shouldBlockFn({
+      const shouldBlock = await props.shouldBlockFn({
         action: blockerFnArgs.action,
         current,
         next,
       })
-      if (!withResolver) {
+      if (!props.withResolver) {
         return shouldBlock
       }
 
@@ -236,9 +242,14 @@ export function useBlocker(
       return canNavigateAsync
     }
 
-    return disabled
+    const disposeBlock = props.disabled
       ? undefined
-      : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload })
+      : router.history.block({
+          blockerFn: blockerFnComposed,
+          enableBeforeUnload: props.enableBeforeUnload,
+        })
+
+    Solid.onCleanup(() => disposeBlock?.())
   })
 
   return resolver
@@ -248,23 +259,26 @@ const _resolvePromptBlockerArgs = (
   props: PromptProps | LegacyPromptProps,
 ): UseBlockerOpts => {
   if ('shouldBlockFn' in props) {
-    return { ...props }
+    return props
   }
 
-  const shouldBlock = Boolean(props.condition ?? true)
-  const fn = props.blockerFn
+  const shouldBlock = Solid.createMemo(() => Boolean(props.condition ?? true))
 
   const _customBlockerFn = async () => {
-    if (shouldBlock && fn !== undefined) {
-      return await fn()
+    if (shouldBlock() && props.blockerFn !== undefined) {
+      return await props.blockerFn()
     }
     return shouldBlock
   }
 
   return {
     shouldBlockFn: _customBlockerFn,
-    enableBeforeUnload: shouldBlock,
-    withResolver: fn === undefined,
+    get enableBeforeUnload() {
+      return shouldBlock()
+    },
+    get withResolver() {
+      return props.blockerFn === undefined
+    },
   }
 }
 
@@ -279,15 +293,17 @@ export function Block<
 export function Block(opts: LegacyPromptProps): SolidNode
 
 export function Block(opts: PromptProps | LegacyPromptProps): SolidNode {
-  const { children, ...rest } = opts
+  const [propsWithChildren, rest] = Solid.splitProps(opts, ['children'])
   const args = _resolvePromptBlockerArgs(rest)
 
   const resolver = useBlocker(args)
-  return children
-    ? typeof children === 'function'
-      ? children(resolver as any)
-      : children
-    : null
+  const children = Solid.createMemo(() => {
+    const child = propsWithChildren.children
+    if (resolver && typeof child === 'function') return child(resolver())
+    return child
+  })
+
+  return <>{children()}</>
 }
 
 type LegacyPromptProps = {