@tanstack/vue-router 0.0.1 → 1.140.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,66 @@
-# @tanstack/vue-router
-
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@tanstack/vue-router`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+<img src="https://static.scarf.sh/a.png?x-pxid=d988eb79-b0fc-4a2b-8514-6a1ab932d188" />
+
+# TanStack Solid Router
+
+![TanStack Router Header](https://github.com/tanstack/router/raw/main/media/header.png)
+
+🤖 Type-safe router w/ built-in caching & URL state management for Solid!
+
+<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
+</a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
+</a><a href="https://npmjs.com/package/@tanstack/solid-router" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/router.svg" />
+</a><a href="https://bundlephobia.com/result?p=@tanstack/solid-router" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/solid-router" />
+</a><a href="#badge">
+    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+  </a><a href="https://github.com/tanstack/router/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
+</a><a href="https://bestofjs.org/projects/router"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=tanstack%2Frouter%26since=daily" /></a><a href="https://github.com/tanstack/router" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/tanstack/router.svg?style=social&label=Star" />
+</a><a href="https://twitter.com/tan_stack" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social&label=Follow @TanStack" />
+</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow @TannerLinsley" />
+</a>
+
+## Visit [tanstack.com/router](https://tanstack.com/router) for docs, guides, API and more!
+
+## File-Based Routing Conventions
+
+| Suffix/Pattern                      | Purpose                                                  |
+| ----------------------------------- | -------------------------------------------------------- |
+| `.route.ts`                         | Route configuration (loader, validateSearch, head, etc.) |
+| `.component.vue`                    | The component rendered for the route                     |
+| `.errorComponent.vue`               | Error boundary component for the route                   |
+| `.notFoundComponent.vue`            | Not found component for the route                        |
+| `.lazy.ts`                          | Lazy-loaded route configuration                          |
+| `_layout` prefix                    | Layout routes that wrap child routes                     |
+| `_` suffix (e.g., `posts_.$postId`) | Unnested routes (break out of parent layout)             |
+| `(groupName)` directory             | Route groups (organizational, don't affect URL)          |
+| `$param`                            | Dynamic route parameters                                 |
+
+### Examples from e2e/basic-file-routes/ project
+
+```
+src/routes/
+├── __root.ts                   # Root route config
+├── __root.component.vue        # Root layout component
+├── __root.notFoundComponent.vue # Global not found component
+├── index.route.ts              # "/" route config
+├── index.component.vue         # "/" component
+├── posts.route.ts              # "/posts" route config
+├── posts.component.vue         # "/posts" layout component
+├── posts.index.component.vue   # "/posts" index component
+├── posts.$postId.route.ts      # "/posts/:postId" route config
+├── posts.$postId.component.vue # "/posts/:postId" component
+├── posts.$postId.errorComponent.vue  # Error boundary for post
+├── posts_.$postId.edit.route.ts      # "/posts/:postId/edit" (unnested)
+├── (group)/                    # Route group (no URL impact)
+│   ├── _layout.route.ts        # Layout for group
+│   ├── _layout.component.vue
+│   └── inside.component.vue    # "/inside"
+└── 대한민국.component.vue        # Unicode routes supported
+```

package/dist/esm/Asset.d.ts

@@ -0,0 +1,2 @@
+import { RouterManagedTag } from '@tanstack/router-core';
+export declare function Asset({ tag, attrs, children }: RouterManagedTag): any;

package/dist/esm/Asset.js

@@ -0,0 +1,33 @@
+import { createVNode, mergeProps } from "vue";
+function Asset({
+  tag,
+  attrs,
+  children
+}) {
+  switch (tag) {
+    case "title":
+      return createVNode("title", attrs, [children]);
+    case "meta":
+      return createVNode("meta", attrs, null);
+    case "link":
+      return createVNode("link", attrs, null);
+    case "style":
+      return createVNode("style", mergeProps(attrs, {
+        "innerHTML": children
+      }), null);
+    case "script":
+      if (attrs && attrs.src) {
+        return createVNode("script", attrs, null);
+      }
+      if (typeof children === "string") return createVNode("script", mergeProps(attrs, {
+        "innerHTML": children
+      }), null);
+      return null;
+    default:
+      return null;
+  }
+}
+export {
+  Asset
+};
+//# sourceMappingURL=Asset.js.map

package/dist/esm/Asset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Asset.js","sources":["../../src/Asset.tsx"],"sourcesContent":["import type { RouterManagedTag } from '@tanstack/router-core'\n\nexport function Asset({ tag, attrs, children }: RouterManagedTag): any {\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} innerHTML={children} />\n    case 'script':\n      if ((attrs as any) && (attrs as any).src) {\n        return <script {...attrs} />\n      }\n      if (typeof children === 'string')\n        return <script {...attrs} innerHTML={children} />\n      return null\n    default:\n      return null\n  }\n}\n"],"names":["Asset","tag","attrs","children","_createVNode","_mergeProps","src"],"mappings":";AAEO,SAASA,MAAM;AAAA,EAAEC;AAAAA,EAAKC;AAAAA,EAAOC;AAA2B,GAAQ;AACrE,UAAQF,KAAG;AAAA,IACT,KAAK;AACH,aAAAG,YAAA,SAAkBF,OAAK,CAAGC,QAAQ,CAAA;AAAA,IACpC,KAAK;AACH,aAAAC,oBAAiBF,OAAK,IAAA;AAAA,IACxB,KAAK;AACH,aAAAE,oBAAiBF,OAAK,IAAA;AAAA,IACxB,KAAK;AACH,aAAAE,YAAA,SAAAC,WAAkBH,OAAK;AAAA,QAAA,aAAaC;AAAAA,MAAQ,CAAA,GAAA,IAAA;AAAA,IAC9C,KAAK;AACH,UAAKD,SAAkBA,MAAcI,KAAK;AACxC,eAAAF,sBAAmBF,OAAK,IAAA;AAAA,MAC1B;AACA,UAAI,OAAOC,aAAa,SACtB,QAAAC,YAAA,UAAAC,WAAmBH,OAAK;AAAA,QAAA,aAAaC;AAAAA,MAAQ,CAAA,GAAA,IAAA;AAC/C,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;"}

package/dist/esm/CatchBoundary.d.ts

@@ -0,0 +1,19 @@
+import { ErrorRouteComponent } from './route.js';
+import * as Vue from 'vue';
+export declare function CatchBoundary(props: {
+    getResetKey: () => number | string;
+    children: Vue.VNode;
+    errorComponent?: ErrorRouteComponent;
+    onCatch?: (error: Error) => void;
+}): Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>;
+export declare const ErrorComponent: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    error: ObjectConstructor;
+    reset: FunctionConstructor;
+}>, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    error: ObjectConstructor;
+    reset: FunctionConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/CatchBoundary.js

@@ -0,0 +1,135 @@
+import * as Vue from "vue";
+const VueErrorBoundary = Vue.defineComponent({
+  name: "VueErrorBoundary",
+  props: {
+    onError: Function,
+    resetKey: [String, Number]
+  },
+  emits: ["catch"],
+  setup(props, {
+    slots
+  }) {
+    const error = Vue.ref(null);
+    const resetFn = Vue.ref(null);
+    const reset = () => {
+      error.value = null;
+    };
+    Vue.watch(() => props.resetKey, (newKey, oldKey) => {
+      if (newKey !== oldKey && error.value) {
+        reset();
+      }
+    });
+    Vue.onErrorCaptured((err) => {
+      if (err instanceof Promise || err && typeof err.then === "function") {
+        return false;
+      }
+      error.value = err;
+      resetFn.value = reset;
+      if (props.onError) {
+        props.onError(err);
+      }
+      return false;
+    });
+    return () => {
+      if (error.value && slots.fallback) {
+        return slots.fallback({
+          error: error.value,
+          reset
+        });
+      }
+      return slots.default && slots.default();
+    };
+  }
+});
+function CatchBoundary(props) {
+  const CatchBoundaryWrapper = Vue.defineComponent({
+    name: "CatchBoundaryWrapper",
+    inheritAttrs: false,
+    setup() {
+      const resetKey = Vue.computed(() => props.getResetKey());
+      return () => {
+        const defaultErrorComponent = ErrorComponent;
+        return Vue.h(VueErrorBoundary, {
+          resetKey: resetKey.value,
+          onError: props.onCatch
+        }, {
+          default: () => props.children,
+          fallback: ({
+            error,
+            reset
+          }) => {
+            if (props.errorComponent) {
+              return Vue.h(props.errorComponent, {
+                error,
+                reset
+              });
+            } else {
+              return Vue.h(defaultErrorComponent, {
+                error,
+                reset
+              });
+            }
+          }
+        });
+      };
+    }
+  });
+  return Vue.h(CatchBoundaryWrapper);
+}
+const ErrorComponent = Vue.defineComponent({
+  name: "ErrorComponent",
+  props: {
+    error: Object,
+    reset: Function
+  },
+  setup(props) {
+    const show = Vue.ref(process.env.NODE_ENV !== "production");
+    const toggleShow = () => {
+      show.value = !show.value;
+    };
+    return () => Vue.h("div", {
+      style: {
+        padding: ".5rem",
+        maxWidth: "100%"
+      }
+    }, [Vue.h("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: ".5rem"
+      }
+    }, [Vue.h("strong", {
+      style: {
+        fontSize: "1rem"
+      }
+    }, "Something went wrong!"), Vue.h("button", {
+      style: {
+        appearance: "none",
+        fontSize: ".6em",
+        border: "1px solid currentColor",
+        padding: ".1rem .2rem",
+        fontWeight: "bold",
+        borderRadius: ".25rem"
+      },
+      onClick: toggleShow
+    }, show.value ? "Hide Error" : "Show Error")]), Vue.h("div", {
+      style: {
+        height: ".25rem"
+      }
+    }), show.value ? Vue.h("div", {}, [Vue.h("pre", {
+      style: {
+        fontSize: ".7em",
+        border: "1px solid red",
+        borderRadius: ".25rem",
+        padding: ".3rem",
+        color: "red",
+        overflow: "auto"
+      }
+    }, [props.error?.message ? Vue.h("code", {}, props.error.message) : null])]) : null]);
+  }
+});
+export {
+  CatchBoundary,
+  ErrorComponent
+};
+//# sourceMappingURL=CatchBoundary.js.map

package/dist/esm/CatchBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CatchBoundary.js","sources":["../../src/CatchBoundary.tsx"],"sourcesContent":["import * as Vue from 'vue'\nimport type { ErrorRouteComponent } from './route'\n\n// Define the error component props interface\ninterface ErrorComponentProps {\n  error: Error\n  reset: () => void\n}\n\n// Create a Vue error boundary component\nconst VueErrorBoundary = Vue.defineComponent({\n  name: 'VueErrorBoundary',\n  props: {\n    onError: Function,\n    resetKey: [String, Number],\n  },\n  emits: ['catch'],\n  setup(props, { slots }) {\n    const error = Vue.ref<Error | null>(null)\n    const resetFn = Vue.ref<(() => void) | null>(null)\n\n    const reset = () => {\n      error.value = null\n    }\n\n    // Watch for changes in the reset key\n    Vue.watch(\n      () => props.resetKey,\n      (newKey, oldKey) => {\n        if (newKey !== oldKey && error.value) {\n          reset()\n        }\n      },\n    )\n\n    // Capture errors from child components\n    Vue.onErrorCaptured((err: Error) => {\n      // If the error is a Promise (thrown for Suspense), don't treat it as an error\n      // Just ignore it - Suspense will handle it\n      if (\n        err instanceof Promise ||\n        (err && typeof (err as any).then === 'function')\n      ) {\n        return false // Prevent from propagating as an error, but don't set error state\n      }\n\n      error.value = err\n      resetFn.value = reset\n\n      // Call the onError callback if provided\n      if (props.onError) {\n        props.onError(err)\n      }\n\n      // Prevent the error from propagating further\n      return false\n    })\n\n    return () => {\n      // If there's an error, render the fallback\n      if (error.value && slots.fallback) {\n        return slots.fallback({\n          error: error.value,\n          reset,\n        })\n      }\n\n      // Otherwise render the default slot\n      return slots.default && slots.default()\n    }\n  },\n})\n\n// Main CatchBoundary component\nexport function CatchBoundary(props: {\n  getResetKey: () => number | string\n  children: Vue.VNode\n  errorComponent?: ErrorRouteComponent\n  onCatch?: (error: Error) => void\n}) {\n  // Create a component to use in the template\n  const CatchBoundaryWrapper = Vue.defineComponent({\n    name: 'CatchBoundaryWrapper',\n    inheritAttrs: false,\n    setup() {\n      const resetKey = Vue.computed(() => props.getResetKey())\n\n      return () => {\n        // Always use our default component as a safe fallback\n        const defaultErrorComponent = ErrorComponent\n\n        return Vue.h(\n          VueErrorBoundary,\n          {\n            resetKey: resetKey.value,\n            onError: props.onCatch,\n          },\n          {\n            default: () => props.children,\n            fallback: ({ error, reset }: ErrorComponentProps) => {\n              // Safely render the error component - either the provided one or the default\n              if (props.errorComponent) {\n                // Use the provided error component\n                return Vue.h(props.errorComponent, { error, reset })\n              } else {\n                // Use the default error component\n                return Vue.h(defaultErrorComponent, { error, reset })\n              }\n            },\n          },\n        )\n      }\n    },\n  })\n\n  return Vue.h(CatchBoundaryWrapper)\n}\n\n// Error component\nexport const ErrorComponent = Vue.defineComponent({\n  name: 'ErrorComponent',\n  props: {\n    error: Object,\n    reset: Function,\n  },\n  setup(props) {\n    const show = Vue.ref(process.env.NODE_ENV !== 'production')\n\n    const toggleShow = () => {\n      show.value = !show.value\n    }\n\n    return () =>\n      Vue.h('div', { style: { padding: '.5rem', maxWidth: '100%' } }, [\n        Vue.h(\n          'div',\n          { style: { display: 'flex', alignItems: 'center', gap: '.5rem' } },\n          [\n            Vue.h(\n              'strong',\n              { style: { fontSize: '1rem' } },\n              'Something went wrong!',\n            ),\n            Vue.h(\n              'button',\n              {\n                style: {\n                  appearance: 'none',\n                  fontSize: '.6em',\n                  border: '1px solid currentColor',\n                  padding: '.1rem .2rem',\n                  fontWeight: 'bold',\n                  borderRadius: '.25rem',\n                },\n                onClick: toggleShow,\n              },\n              show.value ? 'Hide Error' : 'Show Error',\n            ),\n          ],\n        ),\n        Vue.h('div', { style: { height: '.25rem' } }),\n        show.value\n          ? Vue.h('div', {}, [\n              Vue.h(\n                'pre',\n                {\n                  style: {\n                    fontSize: '.7em',\n                    border: '1px solid red',\n                    borderRadius: '.25rem',\n                    padding: '.3rem',\n                    color: 'red',\n                    overflow: 'auto',\n                  },\n                },\n                [\n                  props.error?.message\n                    ? Vue.h('code', {}, props.error.message)\n                    : null,\n                ],\n              ),\n            ])\n          : null,\n      ])\n  },\n})\n"],"names":["VueErrorBoundary","Vue","defineComponent","name","props","onError","Function","resetKey","String","Number","emits","setup","slots","error","ref","resetFn","reset","value","watch","newKey","oldKey","onErrorCaptured","err","Promise","then","fallback","default","CatchBoundary","CatchBoundaryWrapper","inheritAttrs","computed","getResetKey","defaultErrorComponent","ErrorComponent","h","onCatch","children","errorComponent","Object","show","process","env","NODE_ENV","toggleShow","style","padding","maxWidth","display","alignItems","gap","fontSize","appearance","border","fontWeight","borderRadius","onClick","height","color","overflow","message"],"mappings":"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"}

package/dist/esm/ClientOnly.d.ts

@@ -0,0 +1,67 @@
+import * as Vue from 'vue';
+export interface ClientOnlyProps {
+    /**
+     * The children to render when the JS is loaded.
+     */
+    children?: Vue.VNode;
+    /**
+     * The fallback component to render if the JS is not yet loaded.
+     */
+    fallback?: Vue.VNode;
+}
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * @example
+ * Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ *
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     <Chart />
+ *   </ClientOnly>
+ * )
+ * ```
+ */
+export declare const ClientOnly: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    fallback: {
+        type: Vue.PropType<Vue.VNode>;
+        default: null;
+    };
+}>, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}> | Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    fallback: {
+        type: Vue.PropType<Vue.VNode>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    fallback: Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+        [key: string]: any;
+    }>;
+}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * When doing Server-Side Rendering, the result will always be false.
+ * When doing Client-Side Rendering, the result will always be false on the
+ * first render and true from then on. Even if a new component renders it will
+ * always start with true.
+ *
+ * @example
+ * ```tsx
+ * // Disable a button that needs JS to work.
+ * const hydrated = useHydrated()
+ * return (
+ *   <button type="button" disabled={!hydrated.value} onClick={doSomethingCustom}>
+ *     Click me
+ *   </button>
+ * )
+ * ```
+ * @returns True if the JS has been hydrated already, false otherwise.
+ */
+export declare function useHydrated(): Vue.Ref<boolean>;

package/dist/esm/HeadContent.d.ts

@@ -0,0 +1,10 @@
+import { RouterManagedTag } from '@tanstack/router-core';
+import * as Vue from 'vue';
+export declare const useTags: () => () => RouterManagedTag[];
+/**
+ * @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 declare const HeadContent: Vue.DefineComponent<{}, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;

package/dist/esm/HeadContent.js

@@ -0,0 +1,116 @@
+import * as Vue from "vue";
+import { Asset } from "./Asset.js";
+import { useRouter } from "./useRouter.js";
+import { useRouterState } from "./useRouterState.js";
+const useTags = () => {
+  const router = useRouter();
+  const routeMeta = useRouterState({
+    select: (state) => {
+      return state.matches.map((match) => match.meta).filter(Boolean);
+    }
+  });
+  const meta = Vue.computed(() => {
+    const resultMeta = [];
+    const metaByAttribute = {};
+    let title;
+    [...routeMeta.value].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;
+  });
+  const links = useRouterState({
+    select: (state) => state.matches.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
+      tag: "link",
+      attrs: {
+        ...link
+      }
+    }))
+  });
+  const preloadMeta = useRouterState({
+    select: (state) => {
+      const preloadMeta2 = [];
+      state.matches.map((match) => router.looseRoutesById[match.routeId]).forEach((route) => router.ssr?.manifest?.routes[route.id]?.preloads?.filter(Boolean).forEach((preload) => {
+        preloadMeta2.push({
+          tag: "link",
+          attrs: {
+            rel: "modulepreload",
+            href: preload
+          }
+        });
+      }));
+      return preloadMeta2;
+    }
+  });
+  const headScripts = useRouterState({
+    select: (state) => state.matches.map((match) => match.headScripts).flat(1).filter(Boolean).map(({
+      children,
+      ...script
+    }) => ({
+      tag: "script",
+      attrs: {
+        ...script
+      },
+      children
+    }))
+  });
+  return () => uniqBy([...meta.value, ...preloadMeta.value, ...links.value, ...headScripts.value], (d) => {
+    return JSON.stringify(d);
+  });
+};
+const HeadContent = Vue.defineComponent({
+  name: "HeadContent",
+  setup() {
+    const tags = useTags();
+    return () => {
+      return tags().map((tag) => Vue.h(Asset, {
+        ...tag,
+        key: `tsr-meta-${JSON.stringify(tag)}`
+      }));
+    };
+  }
+});
+function uniqBy(arr, fn) {
+  const seen = /* @__PURE__ */ new Set();
+  return arr.filter((item) => {
+    const key = fn(item);
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+}
+export {
+  HeadContent,
+  useTags
+};
+//# sourceMappingURL=HeadContent.js.map

package/dist/esm/HeadContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as Vue from 'vue'\n\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\nexport const useTags = () => {\n  const router = useRouter()\n\n  const routeMeta = useRouterState({\n    select: (state) => {\n      return state.matches.map((match) => match.meta!).filter(Boolean)\n    },\n  })\n\n  const meta: Vue.Ref<Array<RouterManagedTag>> = Vue.computed(() => {\n    const resultMeta: Array<RouterManagedTag> = []\n    const metaByAttribute: Record<string, true> = {}\n    let title: RouterManagedTag | undefined\n    ;[...routeMeta.value].reverse().forEach((metas) => {\n      ;[...metas].reverse().forEach((m) => {\n        if (!m) return\n\n        if (m.title) {\n          if (!title) {\n            title = {\n              tag: 'title',\n              children: m.title,\n            }\n          }\n        } else {\n          const attribute = m.name ?? m.property\n          if (attribute) {\n            if (metaByAttribute[attribute]) {\n              return\n            } else {\n              metaByAttribute[attribute] = true\n            }\n          }\n\n          resultMeta.push({\n            tag: 'meta',\n            attrs: {\n              ...m,\n            },\n          })\n        }\n      })\n    })\n\n    if (title) {\n      resultMeta.push(title)\n    }\n\n    resultMeta.reverse()\n\n    return resultMeta\n  })\n\n  const links = useRouterState({\n    select: (state) =>\n      state.matches\n        .map((match) => match.links!)\n        .filter(Boolean)\n        .flat(1)\n        .map((link) => ({\n          tag: 'link',\n          attrs: {\n            ...link,\n          },\n        })) as Array<RouterManagedTag>,\n  })\n\n  const preloadMeta = useRouterState({\n    select: (state) => {\n      const preloadMeta: Array<RouterManagedTag> = []\n\n      state.matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          router.ssr?.manifest?.routes[route.id]?.preloads\n            ?.filter(Boolean)\n            .forEach((preload) => {\n              preloadMeta.push({\n                tag: 'link',\n                attrs: {\n                  rel: 'modulepreload',\n                  href: preload,\n                },\n              })\n            }),\n        )\n\n      return preloadMeta\n    },\n  })\n\n  const headScripts = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.headScripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n        },\n        children,\n      })),\n  })\n\n  return () =>\n    uniqBy(\n      [\n        ...meta.value,\n        ...preloadMeta.value,\n        ...links.value,\n        ...headScripts.value,\n      ] as Array<RouterManagedTag>,\n      (d) => {\n        return JSON.stringify(d)\n      },\n    )\n}\n\n/**\n * @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.\n * It should be rendered in the `<head>` of your document.\n */\nexport const HeadContent = Vue.defineComponent({\n  name: 'HeadContent',\n  setup() {\n    const tags = useTags()\n\n    return () => {\n      return tags().map((tag) =>\n        Vue.h(Asset, {\n          ...tag,\n          key: `tsr-meta-${JSON.stringify(tag)}`,\n        }),\n      )\n    }\n  },\n})\n\nfunction uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n  const seen = new Set<string>()\n  return arr.filter((item) => {\n    const key = fn(item)\n    if (seen.has(key)) {\n      return false\n    }\n    seen.add(key)\n    return true\n  })\n}\n"],"names":["useTags","router","useRouter","routeMeta","useRouterState","select","state","matches","map","match","meta","filter","Boolean","Vue","computed","resultMeta","metaByAttribute","title","value","reverse","forEach","metas","m","tag","children","attribute","name","property","push","attrs","links","flat","link","preloadMeta","looseRoutesById","routeId","route","ssr","manifest","routes","id","preloads","preload","rel","href","headScripts","script","uniqBy","d","JSON","stringify","HeadContent","defineComponent","setup","tags","h","Asset","key","arr","fn","seen","Set","item","has","add"],"mappings":"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"}

package/dist/esm/Match.d.ts

@@ -0,0 +1,25 @@
+import { VNode } from 'vue';
+import * as Vue from 'vue';
+export declare const Match: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    matchId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => VNode, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    matchId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;
+export declare const MatchInner: Vue.DefineComponent<Vue.ExtractPropTypes<{
+    matchId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => VNode | null, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
+    matchId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;
+export declare const Outlet: Vue.DefineComponent<{}, () => VNode | null, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;