@tanstack/solid-router 1.108.0

package/dist/esm/useRouter.js

@@ -0,0 +1,12 @@
+import * as Solid from "solid-js";
+import warning from "tiny-warning";
+import { getRouterContext } from "./routerContext.js";
+function useRouter(opts) {
+  const value = Solid.useContext(getRouterContext());
+  warning(!(((opts == null ? void 0 : opts.warn) ?? true) && !value), "useRouter must be used inside a <RouterProvider> component!");
+  return value;
+}
+export {
+  useRouter
+};
+//# sourceMappingURL=useRouter.js.map

package/dist/esm/useRouter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouter.js","sources":["../../src/useRouter.tsx"],"sourcesContent":["import * as Solid from 'solid-js'\nimport warning from 'tiny-warning'\nimport { getRouterContext } from './routerContext'\nimport type { AnyRouter, RegisteredRouter } from './router'\n\nexport function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {\n  warn?: boolean\n}): TRouter {\n  const value = Solid.useContext(getRouterContext() as any)\n  warning(\n    !((opts?.warn ?? true) && !value),\n    'useRouter must be used inside a <RouterProvider> component!',\n  )\n  return value as any\n}\n"],"names":["useRouter","opts","value","Solid","useContext","getRouterContext","warning","warn"],"mappings":";;;AAKO,SAASA,UAAwDC,MAE5D;AACV,QAAMC,QAAQC,MAAMC,WAAWC,iBAAAA,CAAyB;AACxDC,UACE,IAAGL,6BAAMM,SAAQ,SAAS,CAACL,QAC3B,6DACF;AACOA,SAAAA;AACT;"}

package/dist/esm/useRouterState.d.ts

@@ -0,0 +1,8 @@
+import { AnyRouter, RegisteredRouter, RouterState } from './router.js';
+import { Accessor } from 'solid-js';
+export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {
+    router?: TRouter;
+    select?: (state: RouterState<TRouter['routeTree']>) => TSelected;
+};
+export type UseRouterStateResult<TRouter extends AnyRouter, TSelected> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected;
+export declare function useRouterState<TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown>(opts?: UseRouterStateOptions<TRouter, TSelected>): Accessor<UseRouterStateResult<TRouter, TSelected>>;

package/dist/esm/useRouterState.js

@@ -0,0 +1,16 @@
+import { useStore } from "@tanstack/solid-store";
+import { useRouter } from "./useRouter.js";
+function useRouterState(opts) {
+  const contextRouter = useRouter({
+    warn: (opts == null ? void 0 : opts.router) === void 0
+  });
+  const router = (opts == null ? void 0 : opts.router) || contextRouter;
+  return useStore(router.__store, (state) => {
+    if (opts == null ? void 0 : opts.select) return opts.select(state);
+    return state;
+  });
+}
+export {
+  useRouterState
+};
+//# sourceMappingURL=useRouterState.js.map

package/dist/esm/useRouterState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRouterState.js","sources":["../../src/useRouterState.tsx"],"sourcesContent":["import { useStore } from '@tanstack/solid-store'\nimport { useRouter } from './useRouter'\nimport type { AnyRouter, RegisteredRouter, RouterState } from './router'\nimport type { Accessor } from 'solid-js'\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  return useStore(router.__store, (state) => {\n    if (opts?.select) return opts.select(state)\n\n    return state\n  }) as Accessor<UseRouterStateResult<TRouter, TSelected>>\n}\n"],"names":["useRouterState","opts","contextRouter","useRouter","warn","router","undefined","useStore","__store","state","select"],"mappings":";;AAeO,SAASA,eAIdC,MACoD;AACpD,QAAMC,gBAAgBC,UAAmB;AAAA,IACvCC,OAAMH,6BAAMI,YAAWC;AAAAA,EAAAA,CACxB;AACKD,QAAAA,UAASJ,6BAAMI,WAAUH;AAExBK,SAAAA,SAASF,OAAOG,SAAUC,CAAU,UAAA;AACzC,QAAIR,6BAAMS,OAAeT,QAAAA,KAAKS,OAAOD,KAAK;AAEnCA,WAAAA;AAAAA,EAAAA,CACR;AACH;"}

package/dist/esm/useSearch.d.ts

@@ -0,0 +1,15 @@
+import { ThrowConstraint } from './useMatch.js';
+import { Accessor } from 'solid-js';
+import { FullSearchSchema, RouteById } from './routeInfo.js';
+import { AnyRouter, RegisteredRouter } from './router.js';
+import { StrictOrFrom } from './utils.js';
+import { Expand, ThrowOrOptional } from '@tanstack/router-core';
+export interface UseSearchBaseOptions<TRouter extends AnyRouter, TFrom, TStrict extends boolean, TThrow extends boolean, TSelected> {
+    select?: (state: ResolveSearch<TRouter, TFrom, TStrict>) => TSelected;
+    shouldThrow?: TThrow;
+}
+export type UseSearchOptions<TRouter extends AnyRouter, TFrom, TStrict extends boolean, TThrow extends boolean, TSelected> = StrictOrFrom<TRouter, TFrom, TStrict> & UseSearchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>;
+export type UseSearchResult<TRouter extends AnyRouter, TFrom, TStrict extends boolean, TSelected> = unknown extends TSelected ? ResolveSearch<TRouter, TFrom, TStrict> : TSelected;
+export type ResolveSearch<TRouter extends AnyRouter, TFrom, TStrict extends boolean> = TStrict extends false ? FullSearchSchema<TRouter['routeTree']> : Expand<RouteById<TRouter['routeTree'], TFrom>['types']['fullSearchSchema']>;
+export type UseSearchRoute<out TFrom> = <TRouter extends AnyRouter = RegisteredRouter, TSelected = unknown>(opts?: UseSearchBaseOptions<TRouter, TFrom, true, true, TSelected>) => Accessor<UseSearchResult<TRouter, TFrom, true, TSelected>>;
+export declare function useSearch<TRouter extends AnyRouter = RegisteredRouter, const TFrom extends string | undefined = undefined, TStrict extends boolean = true, TThrow extends boolean = true, TSelected = unknown>(opts: UseSearchOptions<TRouter, TFrom, TStrict, ThrowConstraint<TStrict, TThrow>, TSelected>): Accessor<ThrowOrOptional<UseSearchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>>;

package/dist/esm/useSearch.js

@@ -0,0 +1,15 @@
+import { useMatch } from "./useMatch.js";
+function useSearch(opts) {
+  return useMatch({
+    from: opts.from,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: (match) => {
+      return opts.select ? opts.select(match.search) : match.search;
+    }
+  });
+}
+export {
+  useSearch
+};
+//# sourceMappingURL=useSearch.js.map

package/dist/esm/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","sources":["../../src/useSearch.tsx"],"sourcesContent":["import { useMatch } from './useMatch'\nimport type { ThrowConstraint } from './useMatch'\nimport type { Accessor } from 'solid-js'\nimport type { FullSearchSchema, RouteById } from './routeInfo'\nimport type { AnyRouter, RegisteredRouter } from './router'\nimport type { StrictOrFrom } from './utils'\nimport type { Expand, ThrowOrOptional } from '@tanstack/router-core'\n\nexport interface UseSearchBaseOptions<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TThrow extends boolean,\n  TSelected,\n> {\n  select?: (state: ResolveSearch<TRouter, TFrom, TStrict>) => TSelected\n  shouldThrow?: TThrow\n}\n\nexport type UseSearchOptions<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TThrow extends boolean,\n  TSelected,\n> = StrictOrFrom<TRouter, TFrom, TStrict> &\n  UseSearchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>\n\nexport type UseSearchResult<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n  TSelected,\n> = unknown extends TSelected\n  ? ResolveSearch<TRouter, TFrom, TStrict>\n  : TSelected\n\nexport type ResolveSearch<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean,\n> = TStrict extends false\n  ? FullSearchSchema<TRouter['routeTree']>\n  : Expand<RouteById<TRouter['routeTree'], TFrom>['types']['fullSearchSchema']>\n\nexport type UseSearchRoute<out TFrom> = <\n  TRouter extends AnyRouter = RegisteredRouter,\n  TSelected = unknown,\n>(\n  opts?: UseSearchBaseOptions<\n    TRouter,\n    TFrom,\n    /* TStrict */ true,\n    /* TThrow */ true,\n    TSelected\n  >,\n) => Accessor<UseSearchResult<TRouter, TFrom, true, TSelected>>\n\nexport function useSearch<\n  TRouter extends AnyRouter = RegisteredRouter,\n  const TFrom extends string | undefined = undefined,\n  TStrict extends boolean = true,\n  TThrow extends boolean = true,\n  TSelected = unknown,\n>(\n  opts: UseSearchOptions<\n    TRouter,\n    TFrom,\n    TStrict,\n    ThrowConstraint<TStrict, TThrow>,\n    TSelected\n  >,\n): Accessor<\n  ThrowOrOptional<UseSearchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>\n> {\n  return useMatch({\n    from: opts.from!,\n    strict: opts.strict,\n    shouldThrow: opts.shouldThrow,\n    select: (match: any) => {\n      return opts.select ? opts.select(match.search) : match.search\n    },\n  }) as any\n}\n"],"names":["useSearch","opts","useMatch","from","strict","shouldThrow","select","match","search"],"mappings":";AA0DO,SAASA,UAOdC,MASA;AACA,SAAOC,SAAS;AAAA,IACdC,MAAMF,KAAKE;AAAAA,IACXC,QAAQH,KAAKG;AAAAA,IACbC,aAAaJ,KAAKI;AAAAA,IAClBC,QAAQA,CAACC,UAAe;AACtB,aAAON,KAAKK,SAASL,KAAKK,OAAOC,MAAMC,MAAM,IAAID,MAAMC;AAAAA,IAAAA;AAAAA,EACzD,CACD;AACH;"}

package/dist/esm/utils.d.ts

@@ -0,0 +1,44 @@
+import { RouteIds } from './routeInfo.js';
+import { AnyRouter } from './router.js';
+import { ConstrainLiteral } from '@tanstack/router-core';
+import * as Solid from 'solid-js';
+export type StrictOrFrom<TRouter extends AnyRouter, TFrom, TStrict extends boolean = true> = TStrict extends false ? {
+    from?: never;
+    strict: TStrict;
+} : {
+    from: ConstrainLiteral<TFrom, RouteIds<TRouter['routeTree']>>;
+    strict?: TStrict;
+};
+export declare const useLayoutEffect: typeof Solid.createRenderEffect;
+export declare const usePrevious: (fn: () => boolean) => Solid.Accessor<{
+    current: boolean | null;
+    previous: boolean | null;
+}>;
+/**
+ * React hook to wrap `IntersectionObserver`.
+ *
+ * This hook will create an `IntersectionObserver` and observe the ref passed to it.
+ *
+ * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.
+ *
+ * @param ref - The ref to observe
+ * @param intersectionObserverOptions - The options to pass to the IntersectionObserver
+ * @param options - The options to pass to the hook
+ * @param callback - The callback to call when the intersection changes
+ * @returns The IntersectionObserver instance
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ * const ref = React.useRef<HTMLDivElement>(null)
+ * useIntersectionObserver(
+ *  ref,
+ *  (entry) => { doSomething(entry) },
+ *  { rootMargin: '10px' },
+ *  { disabled: false }
+ * )
+ * return <div ref={ref} />
+ * ```
+ */
+export declare function useIntersectionObserver<T extends Element>(ref: Solid.Accessor<T | null>, callback: (entry: IntersectionObserverEntry | undefined) => void, intersectionObserverOptions?: IntersectionObserverInit, options?: {
+    disabled?: boolean;
+}): Solid.Accessor<IntersectionObserver | null>;

package/dist/esm/utils.js

@@ -0,0 +1,41 @@
+import * as Solid from "solid-js";
+const useLayoutEffect = typeof window !== "undefined" ? Solid.createRenderEffect : Solid.createEffect;
+const usePrevious = (fn) => {
+  return Solid.createMemo(
+    (prev = {
+      current: null,
+      previous: null
+    }) => {
+      const current = fn();
+      if (prev.current !== current) {
+        prev.previous = prev.current;
+        prev.current = current;
+      }
+      return prev;
+    }
+  );
+};
+function useIntersectionObserver(ref, callback, intersectionObserverOptions = {}, options = {}) {
+  const isIntersectionObserverAvailable = typeof IntersectionObserver === "function";
+  let observerRef = null;
+  Solid.createEffect(() => {
+    const r = ref();
+    if (!r || !isIntersectionObserverAvailable || options.disabled) {
+      return;
+    }
+    observerRef = new IntersectionObserver(([entry]) => {
+      callback(entry);
+    }, intersectionObserverOptions);
+    observerRef.observe(r);
+    Solid.onCleanup(() => {
+      observerRef == null ? void 0 : observerRef.disconnect();
+    });
+  });
+  return () => observerRef;
+}
+export {
+  useIntersectionObserver,
+  useLayoutEffect,
+  usePrevious
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as Solid from 'solid-js'\nimport type { RouteIds } from './routeInfo'\nimport type { AnyRouter } from './router'\nimport type { ConstrainLiteral } from '@tanstack/router-core'\n\nexport type StrictOrFrom<\n  TRouter extends AnyRouter,\n  TFrom,\n  TStrict extends boolean = true,\n> = TStrict extends false\n  ? {\n      from?: never\n      strict: TStrict\n    }\n  : {\n      from: ConstrainLiteral<TFrom, RouteIds<TRouter['routeTree']>>\n      strict?: TStrict\n    }\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? Solid.createRenderEffect : 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        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":[],"mappings":";AAmBO,MAAM,kBACX,OAAO,WAAW,cAAc,MAAM,qBAAqB,MAAM;AAEtD,MAAA,cAAc,CAAC,OAAsB;AAChD,SAAO,MAAM;AAAA,IACX,CACE,OAA8D;AAAA,MAC5D,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,MAET;AACH,YAAM,UAAU,GAAG;AAEf,UAAA,KAAK,YAAY,SAAS;AAC5B,aAAK,WAAW,KAAK;AACrB,aAAK,UAAU;AAAA,MAAA;AAGV,aAAA;AAAA,IAAA;AAAA,EAEX;AACF;AA2BgB,SAAA,wBACd,KACA,UACA,8BAAwD,CACxD,GAAA,UAAkC,IACW;AACvC,QAAA,kCACJ,OAAO,yBAAyB;AAClC,MAAI,cAA2C;AAE/C,QAAM,aAAa,MAAM;AACvB,UAAM,IAAI,IAAI;AACd,QAAI,CAAC,KAAK,CAAC,mCAAmC,QAAQ,UAAU;AAC9D;AAAA,IAAA;AAGF,kBAAc,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AAClD,eAAS,KAAK;AAAA,OACb,2BAA2B;AAE9B,gBAAY,QAAQ,CAAC;AAErB,UAAM,UAAU,MAAM;AACpB,iDAAa;AAAA,IAAW,CACzB;AAAA,EAAA,CACF;AAED,SAAO,MAAM;AACf;"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@tanstack/solid-router",
+  "version": "1.108.0",
+  "description": "Modern and scalable routing for Solid applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/router.git",
+    "directory": "packages/solid-router"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "solidjs",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@solid-devtools/logger": "^0.9.4",
+    "@solid-primitives/refs": "^1.0.8",
+    "@tanstack/solid-store": "^0.7.0",
+    "jsesc": "^3.0.2",
+    "tiny-invariant": "^1.3.3",
+    "tiny-warning": "^1.0.3",
+    "@tanstack/history": "1.99.13",
+    "@tanstack/router-core": "1.108.0"
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/jsesc": "^3.0.3",
+    "combinate": "^1.1.11",
+    "eslint-plugin-solid": "^0.14.5",
+    "solid-js": "^1",
+    "vite-plugin-solid": "^2.11.2",
+    "zod": "^3.23.8"
+  },
+  "peerDependencies": {
+    "solid-js": "^1"
+  },
+  "scripts": {}
+}

package/src/Asset.tsx

@@ -0,0 +1,23 @@
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export function Asset({ tag, attrs, children }: RouterManagedTag): any {
+  switch (tag) {
+    case 'title':
+      return <title {...attrs}>{children}</title>
+    case 'meta':
+      return <meta {...attrs} />
+    case 'link':
+      return <link {...attrs} />
+    case 'style':
+      return <style {...attrs} innerHTML={children} />
+    case 'script':
+      if ((attrs as any) && (attrs as any).src) {
+        return <script {...attrs} />
+      }
+      if (typeof children === 'string')
+        return <script {...attrs} innerHTML={children} />
+      return null
+    default:
+      return null
+  }
+}

package/src/CatchBoundary.tsx

@@ -0,0 +1,78 @@
+import * as Solid from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import type { ErrorRouteComponent } from './route'
+
+export function CatchBoundary(
+  props: {
+    getResetKey: () => number | string
+    children: Solid.JSX.Element
+    errorComponent?: ErrorRouteComponent
+    onCatch?: (error: Error) => void
+  } & Solid.ParentProps,
+) {
+  return (
+    <Solid.ErrorBoundary
+      fallback={(error, reset) => {
+        props.onCatch?.(error)
+
+        Solid.createEffect(
+          Solid.on([props.getResetKey], () => reset(), { defer: true }),
+        )
+
+        return (
+          <Dynamic
+            component={props.errorComponent ?? ErrorComponent}
+            error={error}
+            reset={reset}
+          />
+        )
+      }}
+    >
+      {props.children}
+    </Solid.ErrorBoundary>
+  )
+}
+
+export function ErrorComponent({ error }: { error: any }) {
+  const [show, setShow] = Solid.createSignal(
+    process.env.NODE_ENV !== 'production',
+  )
+
+  return (
+    <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',
+          }}
+          onClick={() => setShow((d) => !d)}
+        >
+          {show() ? 'Hide Error' : 'Show Error'}
+        </button>
+      </div>
+      <div style={{ height: '.25rem' }} />
+      {show() ? (
+        <div>
+          <pre
+            style={{
+              'font-size': '.7em',
+              border: '1px solid red',
+              'border-radius': '.25rem',
+              padding: '.3rem',
+              color: 'red',
+              overflow: 'auto',
+            }}
+          >
+            {error.message ? <code>{error.message}</code> : null}
+          </pre>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/HeadContent.tsx

@@ -0,0 +1,146 @@
+import * as Solid from 'solid-js'
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+export const useTags = () => {
+  const router = useRouter()
+
+  const routeMeta = useRouterState({
+    select: (state) => {
+      return state.matches.map((match) => match.meta!).filter(Boolean)
+    },
+  })
+
+  const meta: Solid.Accessor<Array<RouterManagedTag>> = Solid.createMemo(() => {
+    const resultMeta: Array<RouterManagedTag> = []
+    const metaByAttribute: Record<string, true> = {}
+    let title: RouterManagedTag | undefined
+    ;[...routeMeta()].reverse().forEach((metas) => {
+      ;[...metas].reverse().forEach((m) => {
+        if (!m) return
+
+        if (m.title) {
+          if (!title) {
+            title = {
+              tag: 'title',
+              children: m.title,
+            }
+          }
+        } else {
+          const attribute = m.name ?? m.property
+          if (attribute) {
+            if (metaByAttribute[attribute]) {
+              return
+            } else {
+              metaByAttribute[attribute] = true
+            }
+          }
+
+          resultMeta.push({
+            tag: 'meta',
+            attrs: {
+              ...m,
+            },
+          })
+        }
+      })
+    })
+
+    if (title) {
+      resultMeta.push(title)
+    }
+
+    resultMeta.reverse()
+
+    return resultMeta
+  }, [routeMeta])
+
+  const links = useRouterState({
+    select: (state) =>
+      state.matches
+        .map((match) => match.links!)
+        .filter(Boolean)
+        .flat(1)
+        .map((link) => ({
+          tag: 'link',
+          attrs: {
+            ...link,
+          },
+        })) as Array<RouterManagedTag>,
+  })
+
+  const preloadMeta = useRouterState({
+    select: (state) => {
+      const preloadMeta: Array<RouterManagedTag> = []
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          router.ssr?.manifest?.routes[route.id]?.preloads
+            ?.filter(Boolean)
+            .forEach((preload) => {
+              preloadMeta.push({
+                tag: 'link',
+                attrs: {
+                  rel: 'modulepreload',
+                  href: preload,
+                },
+              })
+            }),
+        )
+
+      return preloadMeta
+    },
+  })
+
+  const headScripts = useRouterState({
+    select: (state) =>
+      (
+        state.matches
+          .map((match) => match.headScripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+        },
+        children,
+      })),
+  })
+
+  return uniqBy(
+    [
+      ...meta(),
+      ...preloadMeta(),
+      ...links(),
+      ...headScripts(),
+    ] as Array<RouterManagedTag>,
+    (d) => {
+      return JSON.stringify(d)
+    },
+  )
+}
+
+/**
+ * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
+ * It should be rendered in the `<head>` of your document.
+ */
+export function HeadContent() {
+  const tags = useTags()
+  return tags.map((tag) => <Asset {...tag} />)
+}
+
+function uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {
+  const seen = new Set<string>()
+  return arr.filter((item) => {
+    const key = fn(item)
+    if (seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  })
+}