Utils

Utility functions and helpers exported by Kimesh. All are auto-imported.

Route Definition

createFileRoute

Define route options including loaders, middleware, head, and search validation.

export const Route = createFileRoute('/posts/:id')({
  loader: async ({ params, context }) => {
    await context.queryClient.ensureQueryData(postQuery(params.id))
  },
  beforeLoad: async ({ params, context }) => {
    const permissions = await checkPermissions(params.id)
    return { permissions }
  },
  middleware: ['auth'],
  validateSearch: z.object({
    tab: z.enum(['overview', 'comments']).default('overview'),
  }),
  head: ({ loaderData }) => ({
    title: loaderData.post.title,
  }),
  pendingMs: 200,
  pendingMinMs: 500,
  transition: { name: 'fade' },
  viewTransition: true,
  keepalive: true,
})

Source: @kimesh/router-runtime

---

defineRoute

Alternative to createFileRoute for defining route options.

export const Route = defineRoute({
  meta: { title: 'About' },
  middleware: ['auth'],
})

Source: @kimesh/router-runtime

---

defineContext

Define context providers for routes and layouts.

export const Context = defineContext(() => {
  const user = useAuth()
  return { user }
})

Source: @kimesh/router-runtime

---

Middleware

defineKimeshMiddleware

Define a route middleware function.

// src/middleware/auth.global.ts
export default defineKimeshMiddleware((to, from, context) => {
  if (!context.app.user.isLoggedIn) {
    return navigateTo('/login')
  }
})

Source: @kimesh/router-runtime

---

navigateTo

Redirect helper for use in middleware and beforeLoad.

navigateTo('/login')
navigateTo('/login', { replace: true })
navigateTo({ name: 'dashboard', params: { id: '1' } })

Signature:

function navigateTo(
  to: string | RouteLocationRaw,
  options?: NavigateToOptions
): NavigationRedirect

Source: @kimesh/router-runtime

---

abortNavigation

Block navigation without redirecting. Use in middleware.

export default defineKimeshMiddleware((to, from) => {
  if (shouldBlock) {
    abortNavigation()
    return false
  }
})

Source: @kimesh/router-runtime

---

Runtime Plugins

defineKimeshRuntimePlugin

Define a runtime plugin that hooks into the app lifecycle.

export default defineKimeshRuntimePlugin({
  name: 'my-plugin',
  setup({ app, router, queryClient }) {
    app.use(myVuePlugin)
  },
  hooks: {
    'navigation:before'(ctx) { /* ... */ },
    'navigation:after'(ctx) { /* ... */ },
    'navigation:error'(ctx) { /* ... */ },
  },
})

Source: @kimesh/router-runtime

---

Query Utilities

defineQueryOptions

Define reusable query options for TanStack Query.

export const postsQuery = defineQueryOptions({
  key: ['posts'],
  query: () => fetch('/api/posts').then(r => r.json()),
  staleTime: 5 * 60 * 1000,
})

// Usage in loader and component
await queryClient.ensureQueryData(postsQuery)
const { data } = useQuery(postsQuery)

Source: @kimesh/query

---

defineQuery

Define a query with factory pattern.

export const usePostsQuery = defineQuery({
  key: ['posts'],
  query: fetchPosts,
})

Source: @kimesh/query

---

defineMutation

Define a reusable mutation.

export const useCreatePost = defineMutation({
  mutation: (newPost) => fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(newPost),
  }),
})

Source: @kimesh/query

---

createQueryKeyFactory

Create organized, type-safe query key factories.

export const postKeys = createQueryKeyFactory('posts', {
  list: null,                       // ['posts', 'list']
  detail: (id: string) => id,       // ['posts', 'detail', id]
  byAuthor: (authorId: string) => authorId,
})

postKeys.list()          // ['posts', 'list']
postKeys.detail('123')   // ['posts', 'detail', '123']

Source: @kimesh/query

---

defer

Start fetching queries without blocking navigation. Used with <KmDeferred>.

import { defer } from '@kimesh/query'

export const Route = createFileRoute('/users/:id')({
  loader: async ({ params, context }) => {
    // Block for critical data
    await context.queryClient.ensureQueryData(userQuery(params.id))
    // Don't block for non-critical
    defer(context.queryClient, activityQuery(params.id))
  },
})

Source: @kimesh/query

---

$fetch

Layer-aware fetch utility. Automatically uses the correct base URL for the current layer.

const data = await $fetch('/api/posts')
const result = await $fetch('/api/posts', {
  method: 'POST',
  body: { title: 'New Post' },
})

Source: @kimesh/query

---

createKmFetch

Create a custom fetch instance with base URL, headers, and interceptors.

const apiFetch = createKmFetch({
  baseURL: 'https://api.example.com',
  headers: { Authorization: 'Bearer ...' },
  onRequest({ options }) { /* ... */ },
  onResponse({ response }) { /* ... */ },
  onRequestError({ error }) { /* ... */ },
  onResponseError({ error }) { /* ... */ },
})

Source: @kimesh/query

---

Module & Config

defineKmConfig

Define Kimesh configuration with full TypeScript support.

// kimesh.config.ts
import { defineKmConfig } from '@kimesh/kit'

export default defineKmConfig({
  name: 'my-app',
  dev: { port: 3000 },
})

Source: @kimesh/kit

---

defineKimeshModule

Define a Kimesh module.

export default defineKimeshModule({
  name: 'my-module',
  setup(ctx, options) {
    ctx.addVitePlugin(myPlugin)
    ctx.addAlias('#my-module', '/path/to/generated')
  },
})

Source: @kimesh/kit

---

defineKimeshPlugin

Define a build-time plugin for Kimesh.

export default defineKimeshPlugin({
  name: 'my-plugin',
  setup(kimesh) {
    // Hook into build process
  },
})

Source: @kimesh/kit