PRNext 0.1.17:开发者工具和持久缓存
PRNext 0.1.17 可让您检查组件、为助手提供上下文并在手机或平板电脑尺寸下测试界面,而无需离开当前页面。开发工具将控制台、请求和编译信息整合在一起。
此版本还减少了编辑之间的工作。编译器专注于开放路由,在重新启动后重用有效的转换,并应用兼容的 CSS 更改,而无需重新启动应用程序。以下是这些变化如何影响日常开发,以及使这些变化成为可能的引擎改进。
页面内的开发工具
浮动 PRNext 徽标上的菜单可让您访问控制台和检查工具。客户端和服务器消息共享一个视图,您可以按源和级别进行过滤。请求、路由和编译测量可帮助您调查刷新缓慢或失败的页面。
手机和平板电脑预览为应用程序提供相应的视口尺寸。它自己的媒体查询决定了布局。您可以更改方向,而无需重新创建显示的会话,并通过拖动指针滚动支持的内容。
面板按需加载,而消息捕获尽早开始以保留启动日志。您可以将指示器移动到另一个角落或在单独的窗口中打开控制台和设备预览。
为您的助手提供组件上下文
选择 AI 的选择元素,然后选择页面上的一个元素。检查员在代码中找到它的位置,并可以将文件、行、相关代码、计算样式和屏幕截图附加到您的请求中。您的助手有一个已识别的组件,可以帮助它了解您想要的更改。
使用工具提供的 MCP 配置连接 Codex、Cursor、Claude 或其他兼容客户端。从面板提交后,助手即可从您的开发会话中检索上下文。复制配置准备连接;交换上下文和验证更改需要活动连接。
进行更改后,助手可以检查浏览器是否确实显示新的编译。结果将观察到的纠正与失败或不确定的检查区分开来。项目权限在整个工作中继续适用。
编译您打开的路线
当您只使用其中的几个页面时,大型项目可以包含许多页面。 PRNext 编译请求的路由及其布局、错误组件和依赖项。 Rust 中的反向索引将更改的文件连接到依赖于它们的打开路由。
如果两个打开的页面共享一个标头,则编辑该标头会重新编译两个页面的受影响部分。尚未打开的页面可以等待其首次访问。中间件、自定义处理程序和不确定的依赖项仍然使用完整编译。
持久转换还可以避免重新启动后重复有效的工作。开发和生产版本保留单独的缓存。重用取决于内容和编译设置; a missing or invalid entry is simply recompiled.这些缓存存储编译器工作,而不是个性化的应用程序响应。
调整样式,同时保持页面状态
您可以围绕已填写的表单调整间距、颜色或版式。兼容的 CSS 更改可以发布新样式,而无需重建 JavaScript 或重新启动应用程序工作线程。浏览器在应用它们时会保留其文档和 React 状态。
每一代的样式表文件保持不可变,因此选项卡可以完成其资源的加载,而其内容在此过程中不会发生变化。对 CSS 模块导出、Sass 或自定义处理的更改可能会影响更多依赖项并返回到完整编译器。
Rust 引擎中的重复工作较少
索引动态路由和 pstart 代理减少了应用程序工作人员的工作。接受的 HTTP 连接禁用小数据包的延迟。持久连接继续支持流式传输并允许完成正在进行的请求。
资产重用其经过验证的 gzip 和 Brotli 文件。压缩缓存索引可以避免每次发布文件时重新扫描整个目录,并且捆绑分析可以重用已知的压缩大小。
预渲染独立生产路线使用的工人数量有限。这会准备多个路由,而无需为每个页面创建进程,同时保留请求隔离、确定性输出和错误页面所需的排序。
编译期间准备下一个worker
下一个开发人员可以在编译过程中开始准备。一旦准备就绪,在准备就绪检查和经过身份验证的切换之后,它就会接管。前一个工人有时间完成正在进行的工作。
编译器回收响应内存压力、持续增长和会话限制。它取代了每个 24 编译的自动重新启动。当无法进行早期工作准备时,将使用正常的启动路径。
兼容性和诊断
对于携带 React 服务器或客户端指令的 TypeScript 模块,请使用 .ts 或 .tsx。在激活构建之前,无论是在源代码中还是在加载程序转换之后,不支持的 .mts 和 .cts 边界都会被拒绝。普通 TypeScript 助手仍受支持。
为了调查刷新问题, prnext dev --safe 使用新编译器进行完整编译。它禁用持久转换和早期工作准备,同时保留兼容的快速刷新。诊断可识别触发工作的原因:打开路线、编辑代码、更改配置或更新 CSS。
Next.js 兼容性仍然是部分的。检查生产版本中特定于您的应用程序的页面、表单、服务器操作和集成。
更新并尝试新工具
版本 0.1.17-alpha 在 npm 上可用。从 PRNext 项目目录中,更新包并重新启动开发服务器。
npm install @thomas.f/prnext
npx --no-install prnext dev .打开终端中显示的地址,然后打开浮动 PRNext 徽标上的菜单。选择客户端控制台来检查消息、检查页面信息或选择手机或平板电脑预览来测试您的布局。
要与您的助手合作,请选择选择 AI 元素,选择一个组件并打开客户端的配置。将提供的 MCP 设置复制到客户端,保持开发服务器运行并等待工具确认连接。描述面板中的更改并选择将上下文发送到 AI,然后要求您的助手使用该 PRNext 上下文。