solid: `Link` gets children outside of createRoot

[Huliiiiii]

Which project does this relate to?

Router

Describe the bug

Minimal reproduction:

const NumberContext = createContext<number>()
function Reproduction() {
  return (
    <NumberContext.Provider value={123}>
      <Link >
        <Button />
      </Link>
    </NumberContext.Provider>
  )
}

function Button() {
  const context = useContext(NumberContext)
  if (!context) {
    throw new Error("No context")
  }
  return <button onClick={() => console.log("Context value", context)}>Print</button>
}

When I click the button it shows:

Context value 123
computations created outside a `createRoot` or `render` will never be disposed
Uncaught Error: No context

Obviously, Link gets children outside of createRoot.

If I comment out useLinkProps, everything works fine. So I think the issue is in the useLinkProps function.

Your Example Website or App

https://stackblitz.com/edit/github-1deax8jh?file=src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

Click Print

Expected behavior

No error throws

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 136.0.7103.93

Additional context

No response

[Abdelrahmanaman]

Any luck?

[schiller-manuel]

cc @birkskyum

[Woyken]

Ran into this issue myself.

Looks like props are being spread out few times, this causes multiple rerenders outside root.
Also, props.children is being accessed few times.

My quick workaround fix using pnpm patch

diff --git a/dist/source/link.jsx b/dist/source/link.jsx
index 8f842a47b89071b5dae57aee8f7a3675cb649a63..c8ad7ad49e222632ec7d5d7e223b2bb7460dae1c 100644
--- a/dist/source/link.jsx
+++ b/dist/source/link.jsx
@@ -94,8 +94,9 @@ export function useLinkProps(options) {
     const from = useMatches({
         select: (matches) => options.from ?? matches[matches.length - 1]?.fullPath,
     });
+    const [ignoreOptionsWithChildren, localOptions] = Solid.splitProps(options, ['children'])
     const _options = () => ({
-        ...options,
+        ...localOptions,
         from: from(),
     });
     const next = Solid.createMemo(() => {
@@ -315,13 +316,16 @@ export function createLink(Comp) {
 export const Link = (props) => {
     const [local, rest] = Solid.splitProps(props, ['_asChild']);
     const [_, linkProps] = Solid.splitProps(useLinkProps(rest), ['type', 'children']);
-    const children = () => typeof rest.children === 'function'
-        ? rest.children({
-            get isActive() {
-                return linkProps['data-status'] === 'active';
-            },
-        })
-        : rest.children;
+    const children = () => {
+        const ch = rest.children;
+        return typeof ch === 'function'
+            ? ch({
+                get isActive() {
+                    return linkProps['data-status'] === 'active';
+                },
+            })
+            : ch;
+    };
     return (<Dynamic component={local._asChild ? local._asChild : 'a'} {...linkProps}>
       {children}
     </Dynamic>);

[schiller-manuel]

@Woyken can you create a PR for this?

[Woyken]

Created pull request with some fixes.
Wanted to do more components (noticed a bunch of props spreading in other places), but that would require quite a bit of time to clean up

[schiller-manuel]

this is released now