@tanstack/vue-router 0.0.1 → 1.140.0

package/src/matchContext.tsx

@@ -0,0 +1,41 @@
+import * as Vue from 'vue'
+
+// Create a typed injection key with support for undefined values
+// This is the primary match context used throughout the router
+export const matchContext = Symbol('TanStackRouterMatch') as Vue.InjectionKey<
+  Vue.Ref<string | undefined>
+>
+
+// Dummy match context for when we want to look up by explicit 'from' route
+export const dummyMatchContext = Symbol(
+  'TanStackRouterDummyMatch',
+) as Vue.InjectionKey<Vue.Ref<string | undefined>>
+
+/**
+ * Provides a match ID to child components
+ */
+export function provideMatch(matchId: string | undefined) {
+  Vue.provide(matchContext, Vue.ref(matchId))
+}
+
+/**
+ * Retrieves the match ID from the component tree
+ */
+export function injectMatch(): Vue.Ref<string | undefined> {
+  return Vue.inject(matchContext, Vue.ref(undefined))
+}
+
+/**
+ * Provides a dummy match ID to child components
+ */
+export function provideDummyMatch(matchId: string | undefined) {
+  Vue.provide(dummyMatchContext, Vue.ref(matchId))
+}
+
+/**
+ * Retrieves the dummy match ID from the component tree
+ * This only exists so we can conditionally inject a value when we are not interested in the nearest match
+ */
+export function injectDummyMatch(): Vue.Ref<string | undefined> {
+  return Vue.inject(dummyMatchContext, Vue.ref(undefined))
+}

package/src/not-found.tsx

@@ -0,0 +1,55 @@
+import * as Vue from 'vue'
+import { isNotFound } from '@tanstack/router-core'
+import { CatchBoundary } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import type { ErrorComponentProps, NotFoundError } from '@tanstack/router-core'
+
+export function CatchNotFound(props: {
+  fallback?: (error: NotFoundError) => Vue.VNode
+  onCatch?: (error: Error) => void
+  children: Vue.VNode
+}) {
+  // TODO: Some way for the user to programmatically reset the not-found boundary?
+  const resetKey = useRouterState({
+    select: (s) => `not-found-${s.location.pathname}-${s.status}`,
+  })
+
+  // Create a function that returns a VNode to match the SyncRouteComponent signature
+  const errorComponentFn = (componentProps: ErrorComponentProps) => {
+    const error = componentProps.error
+
+    if (isNotFound(error)) {
+      // If a fallback is provided, use it
+      if (props.fallback) {
+        return props.fallback(error as NotFoundError)
+      }
+      // Otherwise return a default not found message
+      return Vue.h('p', null, 'Not Found')
+    } else {
+      // Re-throw non-NotFound errors
+      throw error
+    }
+  }
+
+  return Vue.h(CatchBoundary, {
+    getResetKey: () => resetKey.value,
+    onCatch: (error: Error) => {
+      if (isNotFound(error)) {
+        if (props.onCatch) {
+          props.onCatch(error)
+        }
+      } else {
+        throw error
+      }
+    },
+    errorComponent: errorComponentFn,
+    children: props.children,
+  })
+}
+
+export const DefaultGlobalNotFound = Vue.defineComponent({
+  name: 'DefaultGlobalNotFound',
+  setup() {
+    return () => Vue.h('p', null, 'Not Found')
+  },
+})

package/src/renderRouteNotFound.tsx

@@ -0,0 +1,35 @@
+import * as Vue from 'vue'
+import warning from 'tiny-warning'
+import { DefaultGlobalNotFound } from './not-found'
+import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
+
+/**
+ * Renders a not found component for a route when no matching route is found.
+ *
+ * @param router - The router instance containing the route configuration
+ * @param route - The route that triggered the not found state
+ * @param data - Additional data to pass to the not found component
+ * @returns The rendered not found component or a default fallback component
+ */
+export function renderRouteNotFound(
+  router: AnyRouter,
+  route: AnyRoute,
+  data: any,
+): Vue.VNode {
+  if (!route.options.notFoundComponent) {
+    if (router.options.defaultNotFoundComponent) {
+      return Vue.h(router.options.defaultNotFoundComponent as any, data)
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      warning(
+        route.options.notFoundComponent,
+        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
+      )
+    }
+
+    return Vue.h(DefaultGlobalNotFound)
+  }
+
+  return Vue.h(route.options.notFoundComponent as any, data)
+}