@tanstack/solid-router 1.166.7 → 2.0.0-alpha.2

package/dist/cjs/useNavigate.cjs

@@ -32,7 +32,7 @@ function Navigate(props) {
   const {
     navigate
   } = useRouter.useRouter();
-  Solid__namespace.onMount(() => {
+  Solid__namespace.onSettled(() => {
     navigate({
       ...props
     });

package/dist/cjs/useNavigate.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigate.cjs","sources":["../../src/useNavigate.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { useRouter } from './useRouter'\nimport type {\n  AnyRouter,\n  FromPathOption,\n  NavigateOptions,\n  RegisteredRouter,\n  UseNavigateResult,\n} from '@tanstack/router-core'\n\nexport function useNavigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDefaultFrom extends string = string,\n>(_defaultOpts?: {\n  from?: FromPathOption<TRouter, TDefaultFrom>\n}): UseNavigateResult<TDefaultFrom> {\n  const router = useRouter()\n\n  return ((options: NavigateOptions) => {\n    return router.navigate({\n      ...options,\n      from: options.from ?? _defaultOpts?.from,\n    })\n  }) as UseNavigateResult<TDefaultFrom>\n}\n\nexport function Navigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  const TFrom extends string = string,\n  const TTo extends string | undefined = undefined,\n  const TMaskFrom extends string = TFrom,\n  const TMaskTo extends string = '',\n>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {\n  const { navigate } = useRouter()\n\n  Solid.onMount(() => {\n    navigate({\n      ...props,\n    })\n  })\n\n  return null\n}\n"],"names":["useNavigate","_defaultOpts","router","useRouter","options","navigate","from","Navigate","props","Solid","onMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,YAGdC,cAEkC;AAClC,QAAMC,SAASC,UAAAA,UAAAA;AAEf,UAAQ,CAACC,YAA6B;AACpC,WAAOF,OAAOG,SAAS;AAAA,MACrB,GAAGD;AAAAA,MACHE,MAAMF,QAAQE,QAAQL,cAAcK;AAAAA,IAAAA,CACrC;AAAA,EACH;AACF;AAEO,SAASC,SAMdC,OAAuE;AACvE,QAAM;AAAA,IAAEH;AAAAA,EAAAA,IAAaF,oBAAAA;AAErBM,mBAAMC,QAAQ,MAAM;AAClBL,aAAS;AAAA,MACP,GAAGG;AAAAA,IAAAA,CACJ;AAAA,EACH,CAAC;AAED,SAAO;AACT;;;"}
+{"version":3,"file":"useNavigate.cjs","sources":["../../src/useNavigate.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { useRouter } from './useRouter'\nimport type {\n  AnyRouter,\n  FromPathOption,\n  NavigateOptions,\n  RegisteredRouter,\n  UseNavigateResult,\n} from '@tanstack/router-core'\n\nexport function useNavigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TDefaultFrom extends string = string,\n>(_defaultOpts?: {\n  from?: FromPathOption<TRouter, TDefaultFrom>\n}): UseNavigateResult<TDefaultFrom> {\n  const router = useRouter()\n\n  return ((options: NavigateOptions) => {\n    return router.navigate({\n      ...options,\n      from: options.from ?? _defaultOpts?.from,\n    })\n  }) as UseNavigateResult<TDefaultFrom>\n}\n\nexport function Navigate<\n  TRouter extends AnyRouter = RegisteredRouter,\n  const TFrom extends string = string,\n  const TTo extends string | undefined = undefined,\n  const TMaskFrom extends string = TFrom,\n  const TMaskTo extends string = '',\n>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {\n  const { navigate } = useRouter()\n\n  Solid.onSettled(() => {\n    navigate({\n      ...props,\n    })\n  })\n\n  return null\n}\n"],"names":["useNavigate","_defaultOpts","router","useRouter","options","navigate","from","Navigate","props","Solid","onSettled"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,YAGdC,cAEkC;AAClC,QAAMC,SAASC,UAAAA,UAAAA;AAEf,UAAQ,CAACC,YAA6B;AACpC,WAAOF,OAAOG,SAAS;AAAA,MACrB,GAAGD;AAAAA,MACHE,MAAMF,QAAQE,QAAQL,cAAcK;AAAAA,IAAAA,CACrC;AAAA,EACH;AACF;AAEO,SAASC,SAMdC,OAAuE;AACvE,QAAM;AAAA,IAAEH;AAAAA,EAAAA,IAAaF,oBAAAA;AAErBM,mBAAMC,UAAU,MAAM;AACpBL,aAAS;AAAA,MACP,GAAGG;AAAAA,IAAAA,CACJ;AAAA,EACH,CAAC;AAED,SAAO;AACT;;;"}

package/dist/cjs/useRouterState.cjs

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const solidStore = require("@tanstack/solid-store");
+const Solid = require("solid-js");
 const isServer = require("@tanstack/router-core/isServer");
 const useRouter = require("./useRouter.cjs");
 function deepEqual(a, b) {
   if (Object.is(a, b)) return true;
+  if (isPromiseLike(a) || isPromiseLike(b)) return false;
   if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
     return false;
   }
@@ -17,6 +18,9 @@ function deepEqual(a, b) {
   }
   return true;
 }
+function isPromiseLike(value) {
+  return !!value && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+}
 function useRouterState(opts) {
   const contextRouter = useRouter.useRouter({
     warn: opts?.router === void 0
@@ -25,18 +29,24 @@ function useRouterState(opts) {
   const _isServer = isServer.isServer ?? router.isServer;
   if (_isServer) {
     const state = router.state;
-    const selected = opts?.select ? opts.select(state) : state;
-    return (() => selected);
+    const selected2 = Solid.createMemo(() => opts?.select ? opts.select(state) : state);
+    return selected2;
   }
-  return solidStore.useStore(router.__store, (state) => {
+  const selector = (state) => {
     if (opts?.select) return opts.select(state);
     return state;
-  }, {
-    // Use deep equality to match behavior of solid-store 0.7.0 which used
-    // reconcile(). This ensures updates work correctly when selectors
-    // return new object references but with the same values.
-    equal: deepEqual
+  };
+  const [storeState, setStoreState] = Solid.createSignal(router.__store.get());
+  const unsub = router.__store.subscribe((s) => {
+    setStoreState(s);
+  }).unsubscribe;
+  Solid.onCleanup(() => {
+    unsub();
+  });
+  const selected = Solid.createMemo(() => selector(storeState()), void 0, {
+    equals: (a, b) => deepEqual(a, b)
   });
+  return selected;
 }
 exports.useRouterState = useRouterState;
 //# sourceMappingURL=useRouterState.cjs.map

package/dist/cjs/useRouterState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useRouterState.cjs","sources":["../../src/useRouterState.tsx"],"sourcesContent":["import { useStore } from '@tanstack/solid-store'\nimport { isServer } from '@tanstack/router-core/isServer'\nimport { useRouter } from './useRouter'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterState,\n} from '@tanstack/router-core'\nimport type { Accessor } from 'solid-js'\n\n// Deep equality check to match behavior of solid-store 0.7.0's reconcile()\nfunction deepEqual(a: any, b: any): boolean {\n  if (Object.is(a, b)) return true\n\n  if (\n    typeof a !== 'object' ||\n    a === null ||\n    typeof b !== 'object' ||\n    b === null\n  ) {\n    return false\n  }\n\n  const keysA = Object.keys(a)\n  const keysB = Object.keys(b)\n\n  if (keysA.length !== keysB.length) return false\n\n  for (const key of keysA) {\n    if (!Object.prototype.hasOwnProperty.call(b, key)) return false\n    if (!deepEqual(a[key], b[key])) return false\n  }\n\n  return true\n}\n\nexport type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {\n  router?: TRouter\n  select?: (state: RouterState<TRouter['routeTree']>) => TSelected\n}\n\nexport type UseRouterStateResult<\n  TRouter extends AnyRouter,\n  TSelected,\n> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected\n\nexport function useRouterState<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n>(\n  opts?: UseRouterStateOptions<TRouter, TSelected>,\n): Accessor<UseRouterStateResult<TRouter, TSelected>> {\n  const contextRouter = useRouter<TRouter>({\n    warn: opts?.router === undefined,\n  })\n  const router = opts?.router || contextRouter\n\n  // During SSR we render exactly once and do not need reactivity.\n  // Avoid subscribing to the store on the server since the server store\n  // implementation does not provide subscribe() semantics.\n  const _isServer = isServer ?? router.isServer\n  if (_isServer) {\n    const state = router.state as RouterState<TRouter['routeTree']>\n    const selected = (\n      opts?.select ? opts.select(state) : state\n    ) as UseRouterStateResult<TRouter, TSelected>\n    return (() => selected) as Accessor<\n      UseRouterStateResult<TRouter, TSelected>\n    >\n  }\n\n  return useStore(\n    router.__store,\n    (state) => {\n      if (opts?.select) return opts.select(state)\n\n      return state\n    },\n    {\n      // Use deep equality to match behavior of solid-store 0.7.0 which used\n      // reconcile(). This ensures updates work correctly when selectors\n      // return new object references but with the same values.\n      equal: deepEqual,\n    },\n  ) as Accessor<UseRouterStateResult<TRouter, TSelected>>\n}\n"],"names":["deepEqual","a","b","Object","is","keysA","keys","keysB","length","key","prototype","hasOwnProperty","call","useRouterState","opts","contextRouter","useRouter","warn","router","undefined","_isServer","isServer","state","selected","select","useStore","__store","equal"],"mappings":";;;;;AAWA,SAASA,UAAUC,GAAQC,GAAiB;AAC1C,MAAIC,OAAOC,GAAGH,GAAGC,CAAC,EAAG,QAAO;AAE5B,MACE,OAAOD,MAAM,YACbA,MAAM,QACN,OAAOC,MAAM,YACbA,MAAM,MACN;AACA,WAAO;AAAA,EACT;AAEA,QAAMG,QAAQF,OAAOG,KAAKL,CAAC;AAC3B,QAAMM,QAAQJ,OAAOG,KAAKJ,CAAC;AAE3B,MAAIG,MAAMG,WAAWD,MAAMC,OAAQ,QAAO;AAE1C,aAAWC,OAAOJ,OAAO;AACvB,QAAI,CAACF,OAAOO,UAAUC,eAAeC,KAAKV,GAAGO,GAAG,EAAG,QAAO;AAC1D,QAAI,CAACT,UAAUC,EAAEQ,GAAG,GAAGP,EAAEO,GAAG,CAAC,EAAG,QAAO;AAAA,EACzC;AAEA,SAAO;AACT;AAYO,SAASI,eAIdC,MACoD;AACpD,QAAMC,gBAAgBC,UAAAA,UAAmB;AAAA,IACvCC,MAAMH,MAAMI,WAAWC;AAAAA,EAAAA,CACxB;AACD,QAAMD,SAASJ,MAAMI,UAAUH;AAK/B,QAAMK,YAAYC,qBAAYH,OAAOG;AACrC,MAAID,WAAW;AACb,UAAME,QAAQJ,OAAOI;AACrB,UAAMC,WACJT,MAAMU,SAASV,KAAKU,OAAOF,KAAK,IAAIA;AAEtC,YAAQ,MAAMC;AAAAA,EAGhB;AAEA,SAAOE,oBACLP,OAAOQ,SACNJ,CAAAA,UAAU;AACT,QAAIR,MAAMU,OAAQ,QAAOV,KAAKU,OAAOF,KAAK;AAE1C,WAAOA;AAAAA,EACT,GACA;AAAA;AAAA;AAAA;AAAA,IAIEK,OAAO3B;AAAAA,EAAAA,CAEX;AACF;;"}
+{"version":3,"file":"useRouterState.cjs","sources":["../../src/useRouterState.tsx"],"sourcesContent":["import { createMemo, createSignal, onCleanup } from 'solid-js'\nimport { isServer } from '@tanstack/router-core/isServer'\nimport { useRouter } from './useRouter'\nimport type {\n  AnyRouter,\n  RegisteredRouter,\n  RouterState,\n} from '@tanstack/router-core'\nimport type { Accessor } from 'solid-js'\n\nfunction deepEqual(a: any, b: any): boolean {\n  if (Object.is(a, b)) return true\n\n  if (isPromiseLike(a) || isPromiseLike(b)) return false\n\n  if (\n    typeof a !== 'object' ||\n    a === null ||\n    typeof b !== 'object' ||\n    b === null\n  ) {\n    return false\n  }\n\n  const keysA = Object.keys(a)\n  const keysB = Object.keys(b)\n\n  if (keysA.length !== keysB.length) return false\n\n  for (const key of keysA) {\n    if (!Object.prototype.hasOwnProperty.call(b, key)) return false\n    if (!deepEqual(a[key], b[key])) return false\n  }\n\n  return true\n}\n\nfunction isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n  return (\n    !!value &&\n    (typeof value === 'object' || typeof value === 'function') &&\n    typeof (value as PromiseLike<unknown>).then === 'function'\n  )\n}\n\nexport type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {\n  router?: TRouter\n  select?: (state: RouterState<TRouter['routeTree']>) => TSelected\n}\n\nexport type UseRouterStateResult<\n  TRouter extends AnyRouter,\n  TSelected,\n> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected\n\nexport function useRouterState<\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n>(\n  opts?: UseRouterStateOptions<TRouter, TSelected>,\n): Accessor<UseRouterStateResult<TRouter, TSelected>> {\n  const contextRouter = useRouter<TRouter>({\n    warn: opts?.router === undefined,\n  })\n  const router = opts?.router || contextRouter\n\n  // During SSR we render exactly once and do not need reactivity.\n  // Avoid subscribing to the store on the server since the server store\n  // implementation does not provide subscribe() semantics.\n  const _isServer = isServer ?? router.isServer\n  if (_isServer) {\n    const state = router.state as RouterState<TRouter['routeTree']>\n    const selected = createMemo(() =>\n      opts?.select ? opts.select(state) : state,\n    ) as Accessor<UseRouterStateResult<TRouter, TSelected>>\n    return selected\n  }\n\n  const selector = (state: any) => {\n    if (opts?.select) return opts.select(state)\n\n    return state\n  }\n\n  // Track the latest store state in a signal that updates via subscription.\n  // We store the full state so that the selector (which may read reactive\n  // props like props.matchId) re-runs inside a Solid tracking scope (the\n  // createMemo below) rather than inside the store subscriber callback\n  // where reactive reads would be untracked.\n  const [storeState, setStoreState] = createSignal(router.__store.get())\n\n  const unsub = router.__store.subscribe((s) => {\n    setStoreState(s)\n  }).unsubscribe\n\n  onCleanup(() => {\n    unsub()\n  })\n\n  // Run the selector inside a memo so that:\n  // 1. Reactive values read by the selector (e.g. props.matchId) are tracked\n  // 2. The result is memoized and only updates when the selected value changes\n  const selected = createMemo(() => selector(storeState()), undefined, {\n    equals: (a: any, b: any) => deepEqual(a, b),\n  })\n\n  return selected as Accessor<UseRouterStateResult<TRouter, TSelected>>\n}\n"],"names":["deepEqual","a","b","Object","is","isPromiseLike","keysA","keys","keysB","length","key","prototype","hasOwnProperty","call","value","then","useRouterState","opts","contextRouter","useRouter","warn","router","undefined","_isServer","isServer","state","selected","createMemo","select","selector","storeState","setStoreState","createSignal","__store","get","unsub","subscribe","s","unsubscribe","onCleanup","equals"],"mappings":";;;;;AAUA,SAASA,UAAUC,GAAQC,GAAiB;AAC1C,MAAIC,OAAOC,GAAGH,GAAGC,CAAC,EAAG,QAAO;AAE5B,MAAIG,cAAcJ,CAAC,KAAKI,cAAcH,CAAC,EAAG,QAAO;AAEjD,MACE,OAAOD,MAAM,YACbA,MAAM,QACN,OAAOC,MAAM,YACbA,MAAM,MACN;AACA,WAAO;AAAA,EACT;AAEA,QAAMI,QAAQH,OAAOI,KAAKN,CAAC;AAC3B,QAAMO,QAAQL,OAAOI,KAAKL,CAAC;AAE3B,MAAII,MAAMG,WAAWD,MAAMC,OAAQ,QAAO;AAE1C,aAAWC,OAAOJ,OAAO;AACvB,QAAI,CAACH,OAAOQ,UAAUC,eAAeC,KAAKX,GAAGQ,GAAG,EAAG,QAAO;AAC1D,QAAI,CAACV,UAAUC,EAAES,GAAG,GAAGR,EAAEQ,GAAG,CAAC,EAAG,QAAO;AAAA,EACzC;AAEA,SAAO;AACT;AAEA,SAASL,cAAcS,OAA+C;AACpE,SACE,CAAC,CAACA,UACD,OAAOA,UAAU,YAAY,OAAOA,UAAU,eAC/C,OAAQA,MAA+BC,SAAS;AAEpD;AAYO,SAASC,eAIdC,MACoD;AACpD,QAAMC,gBAAgBC,UAAAA,UAAmB;AAAA,IACvCC,MAAMH,MAAMI,WAAWC;AAAAA,EAAAA,CACxB;AACD,QAAMD,SAASJ,MAAMI,UAAUH;AAK/B,QAAMK,YAAYC,qBAAYH,OAAOG;AACrC,MAAID,WAAW;AACb,UAAME,QAAQJ,OAAOI;AACrB,UAAMC,YAAWC,iBAAW,MAC1BV,MAAMW,SAASX,KAAKW,OAAOH,KAAK,IAAIA,KACtC;AACA,WAAOC;AAAAA,EACT;AAEA,QAAMG,WAAWA,CAACJ,UAAe;AAC/B,QAAIR,MAAMW,OAAQ,QAAOX,KAAKW,OAAOH,KAAK;AAE1C,WAAOA;AAAAA,EACT;AAOA,QAAM,CAACK,YAAYC,aAAa,IAAIC,MAAAA,aAAaX,OAAOY,QAAQC,KAAK;AAErE,QAAMC,QAAQd,OAAOY,QAAQG,UAAWC,CAAAA,MAAM;AAC5CN,kBAAcM,CAAC;AAAA,EACjB,CAAC,EAAEC;AAEHC,QAAAA,UAAU,MAAM;AACdJ,UAAAA;AAAAA,EACF,CAAC;AAKD,QAAMT,WAAWC,MAAAA,WAAW,MAAME,SAASC,WAAAA,CAAY,GAAGR,QAAW;AAAA,IACnEkB,QAAQA,CAACvC,GAAQC,MAAWF,UAAUC,GAAGC,CAAC;AAAA,EAAA,CAC3C;AAED,SAAOwB;AACT;;"}

package/dist/cjs/utils.cjs

@@ -26,8 +26,7 @@ const usePrevious = (fn) => {
     }) => {
       const current = fn();
       if (prev.current !== current) {
-        prev.previous = prev.current;
-        prev.current = current;
+        return { previous: prev.current, current };
       }
       return prev;
     }
@@ -36,8 +35,7 @@ const usePrevious = (fn) => {
 function useIntersectionObserver(ref, callback, intersectionObserverOptions = {}, options = {}) {
   const isIntersectionObserverAvailable = typeof IntersectionObserver === "function";
   let observerRef = null;
-  Solid__namespace.createEffect(() => {
-    const r = ref();
+  Solid__namespace.createEffect(ref, (r) => {
     if (!r || !isIntersectionObserverAvailable || options.disabled) {
       return;
     }

package/dist/cjs/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import * as Solid from 'solid-js'\n\nexport const usePrevious = (fn: () => boolean) => {\n  return Solid.createMemo(\n    (\n      prev: { current: boolean | null; previous: boolean | null } = {\n        current: null,\n        previous: null,\n      },\n    ) => {\n      const current = fn()\n\n      if (prev.current !== current) {\n        prev.previous = prev.current\n        prev.current = current\n      }\n\n      return prev\n    },\n  )\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: Solid.Accessor<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n): Solid.Accessor<IntersectionObserver | null> {\n  const isIntersectionObserverAvailable =\n    typeof IntersectionObserver === 'function'\n  let observerRef: IntersectionObserver | null = null\n\n  Solid.createEffect(() => {\n    const r = ref()\n    if (!r || !isIntersectionObserverAvailable || options.disabled) {\n      return\n    }\n\n    observerRef = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observerRef.observe(r)\n\n    Solid.onCleanup(() => {\n      observerRef?.disconnect()\n    })\n  })\n\n  return () => observerRef\n}\n"],"names":["Solid"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEO,MAAM,cAAc,CAAC,OAAsB;AAChD,SAAOA,iBAAM;AAAA,IACX,CACE,OAA8D;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,MAET;AACH,YAAM,UAAU,GAAA;AAEhB,UAAI,KAAK,YAAY,SAAS;AAC5B,aAAK,WAAW,KAAK;AACrB,aAAK,UAAU;AAAA,MACjB;AAEA,aAAO;AAAA,IACT;AAAA,EAAA;AAEJ;AA2BO,SAAS,wBACd,KACA,UACA,8BAAwD,CAAA,GACxD,UAAkC,IACW;AAC7C,QAAM,kCACJ,OAAO,yBAAyB;AAClC,MAAI,cAA2C;AAE/CA,mBAAM,aAAa,MAAM;AACvB,UAAM,IAAI,IAAA;AACV,QAAI,CAAC,KAAK,CAAC,mCAAmC,QAAQ,UAAU;AAC9D;AAAA,IACF;AAEA,kBAAc,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AAClD,eAAS,KAAK;AAAA,IAChB,GAAG,2BAA2B;AAE9B,gBAAY,QAAQ,CAAC;AAErBA,qBAAM,UAAU,MAAM;AACpB,mBAAa,WAAA;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AAED,SAAO,MAAM;AACf;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import * as Solid from 'solid-js'\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? Solid.createEffect : Solid.createEffect\n\nexport const usePrevious = (fn: () => boolean) => {\n  return Solid.createMemo(\n    (\n      prev: { current: boolean | null; previous: boolean | null } = {\n        current: null,\n        previous: null,\n      },\n    ) => {\n      const current = fn()\n\n      if (prev.current !== current) {\n        return { previous: prev.current, current }\n      }\n\n      return prev\n    },\n  )\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: Solid.Accessor<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n): Solid.Accessor<IntersectionObserver | null> {\n  const isIntersectionObserverAvailable =\n    typeof IntersectionObserver === 'function'\n  let observerRef: IntersectionObserver | null = null\n\n  Solid.createEffect(ref, (r) => {\n    if (!r || !isIntersectionObserverAvailable || options.disabled) {\n      return\n    }\n\n    observerRef = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observerRef.observe(r)\n\n    Solid.onCleanup(() => {\n      observerRef?.disconnect()\n    })\n  })\n\n  return () => observerRef\n}\n"],"names":["Solid"],"mappings":";;;;;;;;;;;;;;;;;;;;AAKO,MAAM,cAAc,CAAC,OAAsB;AAChD,SAAOA,iBAAM;AAAA,IACX,CACE,OAA8D;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,MAET;AACH,YAAM,UAAU,GAAA;AAEhB,UAAI,KAAK,YAAY,SAAS;AAC5B,eAAO,EAAE,UAAU,KAAK,SAAS,QAAA;AAAA,MACnC;AAEA,aAAO;AAAA,IACT;AAAA,EAAA;AAEJ;AA2BO,SAAS,wBACd,KACA,UACA,8BAAwD,CAAA,GACxD,UAAkC,IACW;AAC7C,QAAM,kCACJ,OAAO,yBAAyB;AAClC,MAAI,cAA2C;AAE/CA,mBAAM,aAAa,KAAK,CAAC,MAAM;AAC7B,QAAI,CAAC,KAAK,CAAC,mCAAmC,QAAQ,UAAU;AAC9D;AAAA,IACF;AAEA,kBAAc,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AAClD,eAAS,KAAK;AAAA,IAChB,GAAG,2BAA2B;AAE9B,gBAAY,QAAQ,CAAC;AAErBA,qBAAM,UAAU,MAAM;AACpB,mBAAa,WAAA;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AAED,SAAO,MAAM;AACf;;;"}

package/dist/cjs/utils.d.cts

@@ -1,4 +1,5 @@
 import * as Solid from 'solid-js';
+export declare const useLayoutEffect: typeof import('@solidjs/signals').createEffect;
 export declare const usePrevious: (fn: () => boolean) => Solid.Accessor<{
     current: boolean | null;
     previous: boolean | null;

package/dist/esm/Asset.js

@@ -1,9 +1,8 @@
-import { createComponent, mergeProps, template, spread } from "solid-js/web";
-import { Style, Link, Meta, Title } from "@solidjs/meta";
-import { onMount, onCleanup } from "solid-js";
+import { createComponent, template, spread, mergeProps, insert } from "@solidjs/web";
 import { isServer } from "@tanstack/router-core/isServer";
+import { createEffect, onCleanup } from "solid-js";
 import { useRouter } from "./useRouter.js";
-var _tmpl$ = /* @__PURE__ */ template(`<script>`);
+var _tmpl$ = /* @__PURE__ */ template(`<meta>`), _tmpl$2 = /* @__PURE__ */ template(`<link>`), _tmpl$3 = /* @__PURE__ */ template(`<style>`), _tmpl$4 = /* @__PURE__ */ template(`<title>`), _tmpl$5 = /* @__PURE__ */ template(`<script>`);
 function Asset({
   tag,
   attrs,
@@ -11,17 +10,37 @@ function Asset({
 }) {
   switch (tag) {
     case "title":
-      return createComponent(Title, mergeProps(attrs, {
+      return createComponent(Title, {
+        attrs,
         children
-      }));
+      });
     case "meta":
-      return createComponent(Meta, attrs);
+      return (() => {
+        var _el$ = _tmpl$();
+        spread(_el$, attrs, false, false);
+        return _el$;
+      })();
     case "link":
-      return createComponent(Link, attrs);
+      return (() => {
+        var _el$2 = _tmpl$2();
+        spread(_el$2, attrs, false, false);
+        return _el$2;
+      })();
     case "style":
-      return createComponent(Style, mergeProps(attrs, {
-        children
-      }));
+      if (typeof children === "string") {
+        return (() => {
+          var _el$3 = _tmpl$3();
+          spread(_el$3, mergeProps(attrs, {
+            "innerHTML": children
+          }), false, false);
+          return _el$3;
+        })();
+      }
+      return (() => {
+        var _el$4 = _tmpl$3();
+        spread(_el$4, attrs, false, false);
+        return _el$4;
+      })();
     case "script":
       return createComponent(Script, {
         attrs,
@@ -31,97 +50,121 @@ function Asset({
       return null;
   }
 }
-function Script({
-  attrs,
-  children
-}) {
+function Title(props) {
   const router = useRouter();
+  const attrs = props.attrs;
+  const children = props.children;
+  if (isServer ?? router.isServer) {
+    return (() => {
+      var _el$5 = _tmpl$4();
+      spread(_el$5, attrs, false, true);
+      insert(_el$5, children);
+      return _el$5;
+    })();
+  }
+  createEffect(() => children, (titleText) => {
+    document.title = typeof titleText === "string" ? titleText : "";
+  });
+  return (() => {
+    var _el$6 = _tmpl$4();
+    spread(_el$6, attrs, false, true);
+    insert(_el$6, children);
+    return _el$6;
+  })();
+}
+function Script(props) {
+  const router = useRouter();
+  const attrs = props.attrs;
+  const children = props.children;
   const dataScript = typeof attrs?.type === "string" && attrs.type !== "" && attrs.type !== "text/javascript" && attrs.type !== "module";
-  onMount(() => {
-    if (dataScript) return;
+  if (isServer ?? router.isServer) {
     if (attrs?.src) {
+      return (() => {
+        var _el$7 = _tmpl$5();
+        spread(_el$7, attrs, false, false);
+        return _el$7;
+      })();
+    }
+    if (typeof children === "string") {
+      return (() => {
+        var _el$8 = _tmpl$5();
+        spread(_el$8, mergeProps(attrs, {
+          "innerHTML": children
+        }), false, false);
+        return _el$8;
+      })();
+    }
+    return null;
+  }
+  if (dataScript && typeof children === "string") {
+    return (() => {
+      var _el$9 = _tmpl$5();
+      spread(_el$9, mergeProps(attrs, {
+        "innerHTML": children
+      }), false, false);
+      return _el$9;
+    })();
+  }
+  createEffect(() => ({
+    attrs,
+    children,
+    dataScript
+  }), ({
+    attrs: attrs2,
+    children: children2,
+    dataScript: dataScript2
+  }) => {
+    if (dataScript2) return;
+    let script;
+    if (attrs2?.src) {
       const normSrc = (() => {
         try {
           const base = document.baseURI || window.location.href;
-          return new URL(attrs.src, base).href;
+          return new URL(attrs2.src, base).href;
         } catch {
-          return attrs.src;
+          return attrs2.src;
         }
       })();
       const existingScript = Array.from(document.querySelectorAll("script[src]")).find((el) => el.src === normSrc);
       if (existingScript) {
         return;
       }
-      const script = document.createElement("script");
-      for (const [key, value] of Object.entries(attrs)) {
+      script = document.createElement("script");
+      for (const [key, value] of Object.entries(attrs2)) {
         if (value !== void 0 && value !== false) {
           script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
         }
       }
       document.head.appendChild(script);
-      onCleanup(() => {
-        if (script.parentNode) {
-          script.parentNode.removeChild(script);
-        }
-      });
-    }
-    if (typeof children === "string") {
-      const typeAttr = typeof attrs?.type === "string" ? attrs.type : "text/javascript";
-      const nonceAttr = typeof attrs?.nonce === "string" ? attrs.nonce : void 0;
+    } else if (typeof children2 === "string") {
+      const typeAttr = typeof attrs2?.type === "string" ? attrs2.type : "text/javascript";
+      const nonceAttr = typeof attrs2?.nonce === "string" ? attrs2.nonce : void 0;
       const existingScript = Array.from(document.querySelectorAll("script:not([src])")).find((el) => {
         if (!(el instanceof HTMLScriptElement)) return false;
         const sType = el.getAttribute("type") ?? "text/javascript";
         const sNonce = el.getAttribute("nonce") ?? void 0;
-        return el.textContent === children && sType === typeAttr && sNonce === nonceAttr;
+        return el.textContent === children2 && sType === typeAttr && sNonce === nonceAttr;
       });
       if (existingScript) {
         return;
       }
-      const script = document.createElement("script");
-      script.textContent = children;
-      if (attrs) {
-        for (const [key, value] of Object.entries(attrs)) {
+      script = document.createElement("script");
+      script.textContent = children2;
+      if (attrs2) {
+        for (const [key, value] of Object.entries(attrs2)) {
           if (value !== void 0 && value !== false) {
             script.setAttribute(key, typeof value === "boolean" ? "" : String(value));
           }
         }
       }
       document.head.appendChild(script);
-      onCleanup(() => {
-        if (script.parentNode) {
-          script.parentNode.removeChild(script);
-        }
-      });
     }
+    onCleanup(() => {
+      if (script?.parentNode) {
+        script.parentNode.removeChild(script);
+      }
+    });
   });
-  if (!(isServer ?? router.isServer)) {
-    if (dataScript && typeof children === "string") {
-      return (() => {
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(attrs, {
-          "innerHTML": children
-        }), false, false);
-        return _el$;
-      })();
-    }
-    return null;
-  }
-  if (attrs?.src && typeof attrs.src === "string") {
-    return (() => {
-      var _el$2 = _tmpl$();
-      spread(_el$2, attrs, false, false);
-      return _el$2;
-    })();
-  }
-  if (typeof children === "string") {
-    return (() => {
-      var _el$3 = _tmpl$();
-      spread(_el$3, mergeProps(attrs, {
-        "innerHTML": children
-      }), false, false);
-      return _el$3;
-    })();
-  }
   return null;
 }
 export {

package/dist/esm/Asset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import { Link, Meta, Style, Title } from '@solidjs/meta'\nimport { onCleanup, onMount } from 'solid-js'\nimport { isServer } from '@tanstack/router-core/isServer'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\nimport type { JSX } from 'solid-js'\n\nexport function Asset({\n  tag,\n  attrs,\n  children,\n}: RouterManagedTag): JSX.Element | null {\n  switch (tag) {\n    case 'title':\n      return <Title {...attrs}>{children}</Title>\n    case 'meta':\n      return <Meta {...attrs} />\n    case 'link':\n      return <Link {...attrs} />\n    case 'style':\n      return <Style {...attrs}>{children}</Style>\n    case 'script':\n      return <Script attrs={attrs}>{children}</Script>\n    default:\n      return null\n  }\n}\n\ninterface ScriptAttrs {\n  [key: string]: string | boolean | undefined\n  src?: string\n}\n\nfunction Script({\n  attrs,\n  children,\n}: {\n  attrs?: ScriptAttrs\n  children?: string\n}): JSX.Element | null {\n  const router = useRouter()\n  const dataScript =\n    typeof attrs?.type === 'string' &&\n    attrs.type !== '' &&\n    attrs.type !== 'text/javascript' &&\n    attrs.type !== 'module'\n\n  onMount(() => {\n    if (dataScript) return\n\n    if (attrs?.src) {\n      const normSrc = (() => {\n        try {\n          const base = document.baseURI || window.location.href\n          return new URL(attrs.src, base).href\n        } catch {\n          return attrs.src\n        }\n      })()\n      const existingScript = Array.from(\n        document.querySelectorAll('script[src]'),\n      ).find((el) => (el as HTMLScriptElement).src === normSrc)\n\n      if (existingScript) {\n        return\n      }\n\n      const script = document.createElement('script')\n\n      for (const [key, value] of Object.entries(attrs)) {\n        if (value !== undefined && value !== false) {\n          script.setAttribute(\n            key,\n            typeof value === 'boolean' ? '' : String(value),\n          )\n        }\n      }\n\n      document.head.appendChild(script)\n\n      onCleanup(() => {\n        if (script.parentNode) {\n          script.parentNode.removeChild(script)\n        }\n      })\n    }\n\n    if (typeof children === 'string') {\n      const typeAttr =\n        typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'\n      const nonceAttr =\n        typeof attrs?.nonce === 'string' ? attrs.nonce : undefined\n      const existingScript = Array.from(\n        document.querySelectorAll('script:not([src])'),\n      ).find((el) => {\n        if (!(el instanceof HTMLScriptElement)) return false\n        const sType = el.getAttribute('type') ?? 'text/javascript'\n        const sNonce = el.getAttribute('nonce') ?? undefined\n        return (\n          el.textContent === children &&\n          sType === typeAttr &&\n          sNonce === nonceAttr\n        )\n      })\n\n      if (existingScript) {\n        return\n      }\n\n      const script = document.createElement('script')\n      script.textContent = children\n\n      if (attrs) {\n        for (const [key, value] of Object.entries(attrs)) {\n          if (value !== undefined && value !== false) {\n            script.setAttribute(\n              key,\n              typeof value === 'boolean' ? '' : String(value),\n            )\n          }\n        }\n      }\n\n      document.head.appendChild(script)\n\n      onCleanup(() => {\n        if (script.parentNode) {\n          script.parentNode.removeChild(script)\n        }\n      })\n    }\n  })\n\n  if (!(isServer ?? router.isServer)) {\n    if (dataScript && typeof children === 'string') {\n      return <script {...attrs} innerHTML={children} />\n    }\n\n    // render an empty script on the client just to avoid hydration errors\n    return null\n  }\n\n  if (attrs?.src && typeof attrs.src === 'string') {\n    return <script {...attrs} />\n  }\n\n  if (typeof children === 'string') {\n    return <script {...attrs} innerHTML={children} />\n  }\n\n  return null\n}\n"],"names":["Asset","tag","attrs","children","_$createComponent","Title","_$mergeProps","Meta","Link","Style","Script","router","useRouter","dataScript","type","onMount","src","normSrc","base","document","baseURI","window","location","href","URL","existingScript","Array","from","querySelectorAll","find","el","script","createElement","key","value","Object","entries","undefined","setAttribute","String","head","appendChild","onCleanup","parentNode","removeChild","typeAttr","nonceAttr","nonce","HTMLScriptElement","sType","getAttribute","sNonce","textContent","isServer","_el$","_tmpl$","_$spread","_el$2","_el$3"],"mappings":"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"}
+{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import { isServer } from '@tanstack/router-core/isServer'\nimport { createEffect, onCleanup } from 'solid-js'\nimport { useRouter } from './useRouter'\nimport type { RouterManagedTag } from '@tanstack/router-core'\nimport type { JSX } from 'solid-js'\n\nexport function Asset({\n  tag,\n  attrs,\n  children,\n}: RouterManagedTag): JSX.Element | null {\n  switch (tag) {\n    case 'title':\n      return <Title attrs={attrs} children={children} />\n    case 'meta':\n      return <meta {...attrs} />\n    case 'link':\n      return <link {...attrs} />\n    case 'style':\n      if (typeof children === 'string') {\n        return <style {...attrs} innerHTML={children} />\n      }\n      return <style {...attrs} />\n    case 'script':\n      return <Script attrs={attrs} children={children} />\n    default:\n      return null\n  }\n}\n\nfunction Title(props: {\n  attrs?: Record<string, any>\n  children?: unknown\n}): JSX.Element | null {\n  const router = useRouter()\n  const attrs = props.attrs\n  const children = props.children\n\n  // Server: render <title> normally\n  if (isServer ?? router.isServer) {\n    return <title {...attrs}>{children as string}</title>\n  }\n\n  // Client: imperatively set document.title so it updates during\n  // client-side navigation (JSX <title> in <head> doesn't reliably\n  // update the browser's document.title).\n  createEffect(\n    () => children,\n    (titleText) => {\n      document.title = typeof titleText === 'string' ? titleText : ''\n    },\n  )\n\n  // Still render the <title> element in the DOM for consistency,\n  // but the imperative assignment above is what actually drives the update.\n  return <title {...attrs}>{children as string}</title>\n}\n\nfunction Script(props: {\n  attrs?: Record<string, any>\n  children?: unknown\n}): JSX.Element | null {\n  const router = useRouter()\n  const attrs = props.attrs\n  const children = props.children\n\n  const dataScript =\n    typeof attrs?.type === 'string' &&\n    attrs.type !== '' &&\n    attrs.type !== 'text/javascript' &&\n    attrs.type !== 'module'\n\n  // --- Server rendering ---\n  if (isServer ?? router.isServer) {\n    if (attrs?.src) {\n      return <script {...attrs} />\n    }\n\n    if (typeof children === 'string') {\n      return <script {...attrs} innerHTML={children} />\n    }\n\n    return null\n  }\n\n  // --- Client rendering ---\n\n  // Data scripts (e.g. application/ld+json) are rendered in the tree;\n  // they don't need to execute.\n  if (dataScript && typeof children === 'string') {\n    return <script {...attrs} innerHTML={children} />\n  }\n\n  // For executable scripts, use imperative DOM injection so the browser\n  // actually executes them during client-side navigation.\n  createEffect(\n    () => ({ attrs, children, dataScript }) as const,\n    ({ attrs, children, dataScript }) => {\n      if (dataScript) return\n\n      let script: HTMLScriptElement | undefined\n\n      if (attrs?.src) {\n        const normSrc = (() => {\n          try {\n            const base = document.baseURI || window.location.href\n            return new URL(attrs.src, base).href\n          } catch {\n            return attrs.src\n          }\n        })()\n        const existingScript = Array.from(\n          document.querySelectorAll('script[src]'),\n        ).find((el) => (el as HTMLScriptElement).src === normSrc)\n\n        if (existingScript) {\n          return\n        }\n\n        script = document.createElement('script')\n\n        for (const [key, value] of Object.entries(attrs)) {\n          if (value !== undefined && value !== false) {\n            script.setAttribute(\n              key,\n              typeof value === 'boolean' ? '' : String(value),\n            )\n          }\n        }\n\n        document.head.appendChild(script)\n      } else if (typeof children === 'string') {\n        const typeAttr =\n          typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'\n        const nonceAttr =\n          typeof attrs?.nonce === 'string' ? attrs.nonce : undefined\n        const existingScript = Array.from(\n          document.querySelectorAll('script:not([src])'),\n        ).find((el) => {\n          if (!(el instanceof HTMLScriptElement)) return false\n          const sType = el.getAttribute('type') ?? 'text/javascript'\n          const sNonce = el.getAttribute('nonce') ?? undefined\n          return (\n            el.textContent === children &&\n            sType === typeAttr &&\n            sNonce === nonceAttr\n          )\n        })\n\n        if (existingScript) {\n          return\n        }\n\n        script = document.createElement('script')\n        script.textContent = children\n\n        if (attrs) {\n          for (const [key, value] of Object.entries(attrs)) {\n            if (value !== undefined && value !== false) {\n              script.setAttribute(\n                key,\n                typeof value === 'boolean' ? '' : String(value),\n              )\n            }\n          }\n        }\n\n        document.head.appendChild(script)\n      }\n\n      onCleanup(() => {\n        if (script?.parentNode) {\n          script.parentNode.removeChild(script)\n        }\n      })\n    },\n  )\n\n  return null\n}\n"],"names":["Asset","tag","attrs","children","_$createComponent","Title","_el$","_tmpl$","_$spread","_el$2","_tmpl$2","_el$3","_tmpl$3","_$mergeProps","_el$4","Script","props","router","useRouter","isServer","_el$5","_tmpl$4","_$insert","createEffect","titleText","document","title","_el$6","dataScript","type","src","_el$7","_tmpl$5","_el$8","_el$9","script","normSrc","base","baseURI","window","location","href","URL","existingScript","Array","from","querySelectorAll","find","el","createElement","key","value","Object","entries","undefined","setAttribute","String","head","appendChild","typeAttr","nonceAttr","nonce","HTMLScriptElement","sType","getAttribute","sNonce","textContent","onCleanup","parentNode","removeChild"],"mappings":"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"}

package/dist/esm/CatchBoundary.js

@@ -1,13 +1,13 @@
-import { createComponent, Dynamic, template, insert, memo, delegateEvents } from "solid-js/web";
+import { createComponent, Dynamic, template, insert, memo, delegateEvents } from "@solidjs/web";
 import * as Solid from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template(`<div style=padding:.5rem;max-width:100%><div style=display:flex;align-items:center;gap:.5rem><strong style=font-size:1rem>Something went wrong!</strong><button style="appearance:none;font-size:.6em;border:1px solid currentColor;padding:.1rem .2rem;font-weight:bold;border-radius:.25rem"></button></div><div style=height:.25rem>`), _tmpl$2 = /* @__PURE__ */ template(`<div><pre style="font-size:.7em;border:1px solid red;border-radius:.25rem;padding:.3rem;color:red;overflow:auto">`), _tmpl$3 = /* @__PURE__ */ template(`<code>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div style=padding:.5rem;max-width:100%><div style=display:flex;align-items:center;gap:.5rem>∂<strong style=font-size:1rem>Something went wrong!</strong><button style="appearance:none;font-size:.6em;border:1px solid currentColor;padding:.1rem .2rem;font-weight:bold;border-radius:.25rem"></button></div><div style=height:.25rem>`), _tmpl$2 = /* @__PURE__ */ template(`<div><pre style="font-size:.7em;border:1px solid red;border-radius:.25rem;padding:.3rem;color:red;overflow:auto">`), _tmpl$3 = /* @__PURE__ */ template(`<code>`);
 function CatchBoundary(props) {
-  return createComponent(Solid.ErrorBoundary, {
+  return createComponent(Solid.Errored, {
     fallback: (error, reset) => {
       props.onCatch?.(error);
-      Solid.createEffect(Solid.on([props.getResetKey], () => reset(), {
-        defer: true
-      }));
+      Solid.createEffect(props.getResetKey, () => {
+        reset();
+      });
       return createComponent(Dynamic, {
         get component() {
           return props.errorComponent ?? ErrorComponent;
@@ -26,23 +26,23 @@ function ErrorComponent({
 }) {
   const [show, setShow] = Solid.createSignal(process.env.NODE_ENV !== "production");
   return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
     _el$2.nextSibling;
-    _el$4.$$click = () => setShow((d) => !d);
-    insert(_el$4, () => show() ? "Hide Error" : "Show Error");
+    _el$5.$$click = () => setShow((d) => !d);
+    insert(_el$5, () => show() ? "Hide Error" : "Show Error");
     insert(_el$, (() => {
       var _c$ = memo(() => !!show());
       return () => _c$() ? (() => {
-        var _el$6 = _tmpl$2(), _el$7 = _el$6.firstChild;
-        insert(_el$7, (() => {
+        var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild;
+        insert(_el$8, (() => {
           var _c$2 = memo(() => !!error.message);
           return () => _c$2() ? (() => {
-            var _el$8 = _tmpl$3();
-            insert(_el$8, () => error.message);
-            return _el$8;
+            var _el$9 = _tmpl$3();
+            insert(_el$9, () => error.message);
+            return _el$9;
           })() : null;
         })());
-        return _el$6;
+        return _el$7;
       })() : null;
     })(), null);
     return _el$;

package/dist/esm/CatchBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport type { ErrorRouteComponent } from './route'\n\nexport function CatchBoundary(\n  props: {\n    getResetKey: () => number | string\n    children: Solid.JSX.Element\n    errorComponent?: ErrorRouteComponent\n    onCatch?: (error: Error) => void\n  } & Solid.ParentProps,\n) {\n  return (\n    <Solid.ErrorBoundary\n      fallback={(error, reset) => {\n        props.onCatch?.(error)\n\n        Solid.createEffect(\n          Solid.on([props.getResetKey], () => reset(), { defer: true }),\n        )\n\n        return (\n          <Dynamic\n            component={props.errorComponent ?? ErrorComponent}\n            error={error}\n            reset={reset}\n          />\n        )\n      }}\n    >\n      {props.children}\n    </Solid.ErrorBoundary>\n  )\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n  const [show, setShow] = Solid.createSignal(\n    process.env.NODE_ENV !== 'production',\n  )\n\n  return (\n    <div style={{ padding: '.5rem', 'max-width': '100%' }}>\n      <div style={{ display: 'flex', 'align-items': 'center', gap: '.5rem' }}>\n        <strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>\n        <button\n          style={{\n            appearance: 'none',\n            'font-size': '.6em',\n            border: '1px solid currentColor',\n            padding: '.1rem .2rem',\n            'font-weight': 'bold',\n            'border-radius': '.25rem',\n          }}\n          onClick={() => setShow((d) => !d)}\n        >\n          {show() ? 'Hide Error' : 'Show Error'}\n        </button>\n      </div>\n      <div style={{ height: '.25rem' }} />\n      {show() ? (\n        <div>\n          <pre\n            style={{\n              'font-size': '.7em',\n              border: '1px solid red',\n              'border-radius': '.25rem',\n              padding: '.3rem',\n              color: 'red',\n              overflow: 'auto',\n            }}\n          >\n            {error.message ? <code>{error.message}</code> : null}\n          </pre>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["CatchBoundary","props","_$createComponent","Solid","ErrorBoundary","fallback","error","reset","onCatch","createEffect","on","getResetKey","defer","Dynamic","component","errorComponent","ErrorComponent","children","show","setShow","createSignal","process","env","NODE_ENV","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","$$click","d","_$insert","_c$","_$memo","_el$6","_tmpl$2","_el$7","_c$2","message","_el$8","_tmpl$3","_$delegateEvents"],"mappings":";;;AAIO,SAASA,cACdC,OAMA;AACA,SAAAC,gBACGC,MAAMC,eAAa;AAAA,IAClBC,UAAUA,CAACC,OAAOC,UAAU;AAC1BN,YAAMO,UAAUF,KAAK;AAErBH,YAAMM,aACJN,MAAMO,GAAG,CAACT,MAAMU,WAAW,GAAG,MAAMJ,SAAS;AAAA,QAAEK,OAAO;AAAA,MAAA,CAAM,CAC9D;AAEA,aAAAV,gBACGW,SAAO;AAAA,QAAA,IACNC,YAAS;AAAA,iBAAEb,MAAMc,kBAAkBC;AAAAA,QAAc;AAAA,QACjDV;AAAAA,QACAC;AAAAA,MAAAA,CAAY;AAAA,IAGlB;AAAA,IAAC,IAAAU,WAAA;AAAA,aAEAhB,MAAMgB;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;AAEO,SAASD,eAAe;AAAA,EAAEV;AAAsB,GAAG;AACxD,QAAM,CAACY,MAAMC,OAAO,IAAIhB,MAAMiB,aAC5BC,QAAQC,IAAIC,aAAa,YAC3B;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE;AAAAJ,UAAAI;AAAAD,UAAAE,UAaiB,MAAMZ,QAASa,CAAAA,MAAM,CAACA,CAAC;AAACC,WAAAJ,OAAA,MAEhCX,KAAAA,IAAS,eAAe,YAAY;AAAAe,WAAAT,OAAA,MAAA;AAAA,UAAAU,MAAAC,KAAA,MAAA,CAAA,CAIxCjB,MAAM;AAAA,aAAA,MAANgB,IAAAA,KAAA,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAT;AAAAM,eAAAK,QAAA,MAAA;AAAA,cAAAC,OAAAJ,KAAA,MAAA,CAAA,CAYM7B,MAAMkC,OAAO;AAAA,iBAAA,MAAbD,KAAAA,KAAA,MAAA;AAAA,gBAAAE,QAAAC,QAAAA;AAAAT,mBAAAQ,OAAA,MAAuBnC,MAAMkC,OAAO;AAAA,mBAAAC;AAAAA,UAAA,OAAW;AAAA,QAAI,IAAA;AAAA,eAAAL;AAAAA,MAAA,OAGtD;AAAA,IAAI,GAAA,GAAA,IAAA;AAAA,WAAAZ;AAAAA,EAAA,GAAA;AAGd;AAACmB,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport { Dynamic } from '@solidjs/web'\nimport type { ErrorRouteComponent } from './route'\n\nexport function CatchBoundary(\n  props: {\n    getResetKey: () => number | string\n    children: Solid.JSX.Element\n    errorComponent?: ErrorRouteComponent\n    onCatch?: (error: Error) => void\n  } & Solid.ParentProps,\n) {\n  return (\n    <Solid.Errored\n      fallback={(error, reset) => {\n        props.onCatch?.(error)\n\n        Solid.createEffect(props.getResetKey, () => {\n          // We trigger reset here. For a fully deferred effect we might need usePrevious,\n          // but calling reset on key change is the main goal.\n          reset()\n        })\n\n        return (\n          <Dynamic\n            component={props.errorComponent ?? ErrorComponent}\n            error={error}\n            reset={reset}\n          />\n        )\n      }}\n    >\n      {props.children}\n    </Solid.Errored>\n  )\n}\n\nexport function ErrorComponent({ error }: { error: any }) {\n  const [show, setShow] = Solid.createSignal(\n    process.env.NODE_ENV !== 'production',\n  )\n\n  return (\n    <div style={{ padding: '.5rem', 'max-width': '100%' }}>\n      <div style={{ display: 'flex', 'align-items': 'center', gap: '.5rem' }}>\n        ∂<strong style={{ 'font-size': '1rem' }}>Something went wrong!</strong>\n        <button\n          style={{\n            appearance: 'none',\n            'font-size': '.6em',\n            border: '1px solid currentColor',\n            padding: '.1rem .2rem',\n            'font-weight': 'bold',\n            'border-radius': '.25rem',\n          }}\n          onClick={() => setShow((d) => !d)}\n        >\n          {show() ? 'Hide Error' : 'Show Error'}\n        </button>\n      </div>\n      <div style={{ height: '.25rem' }} />\n      {show() ? (\n        <div>\n          <pre\n            style={{\n              'font-size': '.7em',\n              border: '1px solid red',\n              'border-radius': '.25rem',\n              padding: '.3rem',\n              color: 'red',\n              overflow: 'auto',\n            }}\n          >\n            {error.message ? <code>{error.message}</code> : null}\n          </pre>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["CatchBoundary","props","_$createComponent","Solid","Errored","fallback","error","reset","onCatch","createEffect","getResetKey","Dynamic","component","errorComponent","ErrorComponent","children","show","setShow","createSignal","process","env","NODE_ENV","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","$$click","d","_$insert","_c$","_$memo","_el$7","_tmpl$2","_el$8","_c$2","message","_el$9","_tmpl$3","_$delegateEvents"],"mappings":";;;AAIO,SAASA,cACdC,OAMA;AACA,SAAAC,gBACGC,MAAMC,SAAO;AAAA,IACZC,UAAUA,CAACC,OAAOC,UAAU;AAC1BN,YAAMO,UAAUF,KAAK;AAErBH,YAAMM,aAAaR,MAAMS,aAAa,MAAM;AAG1CH,cAAAA;AAAAA,MACF,CAAC;AAED,aAAAL,gBACGS,SAAO;AAAA,QAAA,IACNC,YAAS;AAAA,iBAAEX,MAAMY,kBAAkBC;AAAAA,QAAc;AAAA,QACjDR;AAAAA,QACAC;AAAAA,MAAAA,CAAY;AAAA,IAGlB;AAAA,IAAC,IAAAQ,WAAA;AAAA,aAEAd,MAAMc;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;AAEO,SAASD,eAAe;AAAA,EAAER;AAAsB,GAAG;AACxD,QAAM,CAACU,MAAMC,OAAO,IAAId,MAAMe,aAC5BC,QAAQC,IAAIC,aAAa,YAC3B;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAF,MAAAC;AAAAJ,UAAAI;AAAAC,UAAAC,UAaiB,MAAMb,QAASc,CAAAA,MAAM,CAACA,CAAC;AAACC,WAAAH,OAAA,MAEhCb,KAAAA,IAAS,eAAe,YAAY;AAAAgB,WAAAV,OAAA,MAAA;AAAA,UAAAW,MAAAC,KAAA,MAAA,CAAA,CAIxClB,MAAM;AAAA,aAAA,MAANiB,IAAAA,KAAA,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAV;AAAAO,eAAAK,QAAA,MAAA;AAAA,cAAAC,OAAAJ,KAAA,MAAA,CAAA,CAYM5B,MAAMiC,OAAO;AAAA,iBAAA,MAAbD,KAAAA,KAAA,MAAA;AAAA,gBAAAE,QAAAC,QAAAA;AAAAT,mBAAAQ,OAAA,MAAuBlC,MAAMiC,OAAO;AAAA,mBAAAC;AAAAA,UAAA,OAAW;AAAA,QAAI,IAAA;AAAA,eAAAL;AAAAA,MAAA,OAGtD;AAAA,IAAI,GAAA,GAAA,IAAA;AAAA,WAAAb;AAAAA,EAAA,GAAA;AAGd;AAACoB,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/ClientOnly.js

@@ -1,4 +1,4 @@
-import { createComponent, memo } from "solid-js/web";
+import { createComponent, memo } from "@solidjs/web";
 import * as Solid from "solid-js";
 function ClientOnly(props) {
   const hydrated = useHydrated();
@@ -16,7 +16,7 @@ function ClientOnly(props) {
 }
 function useHydrated() {
   const [hydrated, setHydrated] = Solid.createSignal(false);
-  Solid.onMount(() => {
+  Solid.createEffect(() => true, () => {
     setHydrated(true);
   });
   return hydrated;

package/dist/esm/ClientOnly.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when the JS is loaded.\n   */\n  children: Solid.JSX.Element\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: Solid.JSX.Element\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n *   <ClientOnly fallback={<FakeChart />}>\n *     <Chart />\n *   </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly(props: ClientOnlyProps) {\n  const hydrated = useHydrated()\n  return (\n    <Solid.Show when={hydrated()} fallback={props.fallback ?? null}>\n      <>{props.children}</>\n    </Solid.Show>\n  )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * const hydrated = useHydrated()\n * return (\n *   <button type=\"button\" disabled={!hydrated()} onClick={doSomethingCustom}>\n *     Click me\n *   </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): Solid.Accessor<boolean> {\n  const [hydrated, setHydrated] = Solid.createSignal(false)\n  Solid.onMount(() => {\n    setHydrated(true)\n  })\n  return hydrated\n}\n"],"names":["ClientOnly","props","hydrated","useHydrated","_$createComponent","Solid","Show","when","fallback","children","_$memo","setHydrated","createSignal","onMount"],"mappings":";;AA8BO,SAASA,WAAWC,OAAwB;AACjD,QAAMC,WAAWC,YAAAA;AACjB,SAAAC,gBACGC,MAAMC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEL,SAAAA;AAAAA,IAAU;AAAA,IAAA,IAAEM,WAAQ;AAAA,aAAEP,MAAMO,YAAY;AAAA,IAAI;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAAC,KAAA,MACzDT,MAAMQ,QAAQ;AAAA,IAAA;AAAA,EAAA,CAAA;AAGvB;AAqBO,SAASN,cAAuC;AACrD,QAAM,CAACD,UAAUS,WAAW,IAAIN,MAAMO,aAAa,KAAK;AACxDP,QAAMQ,QAAQ,MAAM;AAClBF,gBAAY,IAAI;AAAA,EAClB,CAAC;AACD,SAAOT;AACT;"}
+{"version":3,"file":"ClientOnly.js","sources":["../../src/ClientOnly.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\n\nexport interface ClientOnlyProps {\n  /**\n   * The children to render when the JS is loaded.\n   */\n  children: Solid.JSX.Element\n  /**\n   * The fallback component to render if the JS is not yet loaded.\n   */\n  fallback?: Solid.JSX.Element\n}\n\n/**\n * Render the children only after the JS has loaded client-side. Use an optional\n * fallback component if the JS is not yet loaded.\n *\n * @example\n * Render a Chart component if JS loads, renders a simple FakeChart\n * component server-side or if there is no JS. The FakeChart can have only the\n * UI without the behavior or be a loading spinner or skeleton.\n *\n * ```tsx\n * return (\n *   <ClientOnly fallback={<FakeChart />}>\n *     <Chart />\n *   </ClientOnly>\n * )\n * ```\n */\nexport function ClientOnly(props: ClientOnlyProps) {\n  const hydrated = useHydrated()\n  return (\n    <Solid.Show when={hydrated()} fallback={props.fallback ?? null}>\n      <>{props.children}</>\n    </Solid.Show>\n  )\n}\n\n/**\n * Return a boolean indicating if the JS has been hydrated already.\n * When doing Server-Side Rendering, the result will always be false.\n * When doing Client-Side Rendering, the result will always be false on the\n * first render and true from then on. Even if a new component renders it will\n * always start with true.\n *\n * @example\n * ```tsx\n * // Disable a button that needs JS to work.\n * const hydrated = useHydrated()\n * return (\n *   <button type=\"button\" disabled={!hydrated()} onClick={doSomethingCustom}>\n *     Click me\n *   </button>\n * )\n * ```\n * @returns True if the JS has been hydrated already, false otherwise.\n */\nexport function useHydrated(): Solid.Accessor<boolean> {\n  const [hydrated, setHydrated] = Solid.createSignal(false)\n\n  Solid.createEffect(\n    () => true,\n    () => {\n      setHydrated(true)\n    },\n  )\n\n  return hydrated\n}\n"],"names":["ClientOnly","props","hydrated","useHydrated","_$createComponent","Solid","Show","when","fallback","children","_$memo","setHydrated","createSignal","createEffect"],"mappings":";;AA8BO,SAASA,WAAWC,OAAwB;AACjD,QAAMC,WAAWC,YAAAA;AACjB,SAAAC,gBACGC,MAAMC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEL,SAAAA;AAAAA,IAAU;AAAA,IAAA,IAAEM,WAAQ;AAAA,aAAEP,MAAMO,YAAY;AAAA,IAAI;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAAC,KAAA,MACzDT,MAAMQ,QAAQ;AAAA,IAAA;AAAA,EAAA,CAAA;AAGvB;AAqBO,SAASN,cAAuC;AACrD,QAAM,CAACD,UAAUS,WAAW,IAAIN,MAAMO,aAAa,KAAK;AAExDP,QAAMQ,aACJ,MAAM,MACN,MAAM;AACJF,gBAAY,IAAI;AAAA,EAClB,CACF;AAEA,SAAOT;AACT;"}

package/dist/esm/HeadContent.dev.js

@@ -1,5 +1,4 @@
-import { createComponent } from "solid-js/web";
-import { MetaProvider } from "@solidjs/meta";
+import { createComponent } from "@solidjs/web";
 import { createEffect, createMemo, For } from "solid-js";
 import { Asset } from "./Asset.js";
 import { useHydrated } from "./ClientOnly.js";
@@ -8,8 +7,8 @@ const DEV_STYLES_ATTR = "data-tanstack-router-dev-styles";
 function HeadContent() {
   const tags = useTags();
   const hydrated = useHydrated();
-  createEffect(() => {
-    if (hydrated()) {
+  createEffect(() => [hydrated()], ([hydrated2]) => {
+    if (hydrated2) {
       document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((el) => el.remove());
     }
   });
@@ -19,13 +18,22 @@ function HeadContent() {
     }
     return tags();
   });
-  return createComponent(MetaProvider, {
-    get children() {
-      return createComponent(For, {
-        get each() {
-          return filteredTags();
+  return createComponent(For, {
+    get each() {
+      return filteredTags();
+    },
+    children: (tag) => {
+      const t = tag();
+      return createComponent(Asset, {
+        get tag() {
+          return t.tag;
+        },
+        get attrs() {
+          return t.attrs;
         },
-        children: (tag) => createComponent(Asset, tag)
+        get children() {
+          return t.children;
+        }
       });
     }
   });

package/dist/esm/HeadContent.dev.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeadContent.dev.js","sources":["../../src/HeadContent.dev.tsx"],"sourcesContent":["import { MetaProvider } from '@solidjs/meta'\nimport { For, createEffect, createMemo } from 'solid-js'\nimport { Asset } from './Asset'\nimport { useHydrated } from './ClientOnly'\nimport { useTags } from './headContentUtils'\n\nconst DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'\n\n/**\n * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.\n * When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`\n * to ensure it's part of the reactive tree and updates correctly during client-side navigation.\n * The component uses portals internally to render content into the `<head>` element.\n *\n * Development version: filters out dev styles link after hydration and\n * includes a fallback cleanup effect for hydration mismatch cases.\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const hydrated = useHydrated()\n\n  // Fallback cleanup for hydration mismatch cases\n  // Runs when hydration completes to remove any orphaned dev styles links from DOM\n  createEffect(() => {\n    if (hydrated()) {\n      document\n        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)\n        .forEach((el) => el.remove())\n    }\n  })\n\n  // Filter out dev styles after hydration\n  const filteredTags = createMemo(() => {\n    if (hydrated()) {\n      return tags().filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])\n    }\n    return tags()\n  })\n\n  return (\n    <MetaProvider>\n      <For each={filteredTags()}>{(tag) => <Asset {...tag} />}</For>\n    </MetaProvider>\n  )\n}\n"],"names":["DEV_STYLES_ATTR","HeadContent","tags","useTags","hydrated","useHydrated","createEffect","document","querySelectorAll","forEach","el","remove","filteredTags","createMemo","filter","tag","attrs","_$createComponent","MetaProvider","children","For","each","Asset"],"mappings":";;;;;;AAMA,MAAMA,kBAAkB;AAWjB,SAASC,cAAc;AAC5B,QAAMC,OAAOC,QAAAA;AACb,QAAMC,WAAWC,YAAAA;AAIjBC,eAAa,MAAM;AACjB,QAAIF,YAAY;AACdG,eACGC,iBAAiB,QAAQR,eAAe,GAAG,EAC3CS,QAASC,CAAAA,OAAOA,GAAGC,OAAAA,CAAQ;AAAA,IAChC;AAAA,EACF,CAAC;AAGD,QAAMC,eAAeC,WAAW,MAAM;AACpC,QAAIT,YAAY;AACd,aAAOF,KAAAA,EAAOY,OAAQC,CAAAA,QAAQ,CAACA,IAAIC,QAAQhB,eAAe,CAAC;AAAA,IAC7D;AACA,WAAOE,KAAAA;AAAAA,EACT,CAAC;AAED,SAAAe,gBACGC,cAAY;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAAF,gBACVG,KAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAET,aAAAA;AAAAA,QAAc;AAAA,QAAAO,UAAIJ,CAAAA,QAAGE,gBAAMK,OAAUP,GAAG;AAAA,MAAA,CAAI;AAAA,IAAA;AAAA,EAAA,CAAA;AAG7D;"}
+{"version":3,"file":"HeadContent.dev.js","sources":["../../src/HeadContent.dev.tsx"],"sourcesContent":["import { For, createEffect, createMemo } from 'solid-js'\nimport { Asset } from './Asset'\nimport { useHydrated } from './ClientOnly'\nimport { useTags } from './headContentUtils'\n\nconst DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'\n\n/**\n * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.\n * When using full document hydration (hydrating from `<html>`), this component should be rendered in the `<body>`\n * to ensure it's part of the reactive tree and updates correctly during client-side navigation.\n * The component uses portals internally to render content into the `<head>` element.\n *\n * Development version: filters out dev styles link after hydration and\n * includes a fallback cleanup effect for hydration mismatch cases.\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const hydrated = useHydrated()\n\n  // Fallback cleanup for hydration mismatch cases\n  // Runs when hydration completes to remove any orphaned dev styles links from DOM\n  createEffect(\n    () => [hydrated()] as const,\n    ([hydrated]) => {\n      if (hydrated) {\n        document\n          .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)\n          .forEach((el) => el.remove())\n      }\n    },\n  )\n\n  // Filter out dev styles after hydration\n  const filteredTags = createMemo(() => {\n    if (hydrated()) {\n      return tags().filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])\n    }\n    return tags()\n  })\n\n  return (\n    <For each={filteredTags()}>\n      {(tag) => {\n        const t = tag() as any\n        return <Asset tag={t.tag} attrs={t.attrs} children={t.children} />\n      }}\n    </For>\n  )\n}\n"],"names":["DEV_STYLES_ATTR","HeadContent","tags","useTags","hydrated","useHydrated","createEffect","document","querySelectorAll","forEach","el","remove","filteredTags","createMemo","filter","tag","attrs","_$createComponent","For","each","children","t","Asset"],"mappings":";;;;;AAKA,MAAMA,kBAAkB;AAWjB,SAASC,cAAc;AAC5B,QAAMC,OAAOC,QAAAA;AACb,QAAMC,WAAWC,YAAAA;AAIjBC,eACE,MAAM,CAACF,SAAAA,CAAU,GACjB,CAAC,CAACA,SAAQ,MAAM;AACd,QAAIA,WAAU;AACZG,eACGC,iBAAiB,QAAQR,eAAe,GAAG,EAC3CS,QAASC,CAAAA,OAAOA,GAAGC,OAAAA,CAAQ;AAAA,IAChC;AAAA,EACF,CACF;AAGA,QAAMC,eAAeC,WAAW,MAAM;AACpC,QAAIT,YAAY;AACd,aAAOF,KAAAA,EAAOY,OAAQC,CAAAA,QAAQ,CAACA,IAAIC,QAAQhB,eAAe,CAAC;AAAA,IAC7D;AACA,WAAOE,KAAAA;AAAAA,EACT,CAAC;AAED,SAAAe,gBACGC,KAAG;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEP,aAAAA;AAAAA,IAAc;AAAA,IAAAQ,UACrBL,CAAAA,QAAQ;AACR,YAAMM,IAAIN,IAAAA;AACV,aAAAE,gBAAQK,OAAK;AAAA,QAAA,IAACP,MAAG;AAAA,iBAAEM,EAAEN;AAAAA,QAAG;AAAA,QAAA,IAAEC,QAAK;AAAA,iBAAEK,EAAEL;AAAAA,QAAK;AAAA,QAAA,IAAEI,WAAQ;AAAA,iBAAEC,EAAED;AAAAA,QAAQ;AAAA,MAAA,CAAA;AAAA,IAChE;AAAA,EAAA,CAAC;AAGP;"}