mcpField
W
wayfinder

wayfinder

github.com/markhamsquareventures开发046 次安装42 周前更新
代码仓库

关于 wayfinder

Wayfinder 为 Laravel 路由和控制器生成 TypeScript 函数与类型，适合需要在客户端代码中调用后端路由的团队。它提供类型安全的路由调用，并使生成代码与路由定义保持同步。

主要功能

  1. 01生成类型安全的 TypeScript 路由函数
  2. 02导入控制器和命名路由
  3. 03获取 HTTP 方法与 URL
  4. 04处理路由参数和查询参数
  5. 05生成 HTML 表单属性

适用场景

  1. 01在客户端代码中调用 Laravel 路由
  2. 02使用路由生成表单的 action 和 method
  3. 03路由变更后同步前端调用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/markhamsquareventures/essentials --skill wayfinder

安装后在 Claude Code 中输入/wayfinder确认已加载。

详细介绍

Wayfinder

说明

Wayfinder 可为 Laravel 控制器和路由生成 TypeScript 函数和类型，供客户端代码导入。它提供类型安全，并自动同步后端路由与前端代码。

开发指南
  • 始终优先使用命名导入，以便进行摇树优化（例如，import { show } from '@/actions/...'）
  • 避免默认导入控制器（以免影响摇树优化）
  • 如果遇到错误，请在路由发生更改后运行 php artisan wayfinder:generate
功能概览
  • 表单支持：使用 .form() 和 --with-form 标志生成 HTML 表单属性——<form {...store.form()}> → action="/posts" method="post"
  • HTTP 方法：调用 .get()、.post()、.patch()、.put()、.delete() 指定方法——show.head(1) → { url: "/posts/1", method: "head" }
  • 可调用控制器：直接导入并作为函数调用。例如，import StorePost from '@/actions/.../StorePostController'; StorePost()
  • 命名路由：从 @/routes/ 导入非控制器路由。例如，路由名称为 post.show 时，使用 import { show } from '@/routes/post'; show(1)
  • 参数绑定：识别路由键（例如，{post:slug}），并接受匹配的对象属性——show("my-post") 或 show({ slug: "my-post" })
  • 查询合并：使用 mergeQuery 与 window.location.search 合并；将值设为 null 即可移除——show(1, { mergeQuery: { page: 2, sort: null } })
  • 查询参数：在选项中传入 { query: {...} } 以追加参数——show(1, { query: { page: 1 } }) → "/posts/1?page=1"
  • 路由对象：函数返回 { url, method } 结构的对象——show(1) → { url: "/posts/1", method: "get" }
  • 提取 URL：使用 .url() 获取 URL 字符串——show.url(1) → "/posts/1"

示例

// 导入控制器方法（可进行摇树优化） import { show, store, update } from '@/actions/App/Http/Controllers/PostController' 
// 获取包含 URL 和方法的路由对象...
show(1) // { url: "/posts/1", method: "get" }

// 仅获取 URL...
show.url(1) // "/posts/1"

// 使用指定的 HTTP 方法...
show.get(1) // { url: "/posts/1", method: "get" }
show.head(1) // { url: "/posts/1", method: "head" }

// 导入命名路由...
import { show as postShow } from '@/routes/post' // 路由名称为 'post.show'
postShow(1) // { url: "/posts/1", method: "get" }
Wayfinder + Inertia

如果你的应用使用 Inertia 的 <Form> 组件，可以使用 Wayfinder 自动生成表单操作地址和方法。

评论

支持 Markdown