前端周刊 #55：Next.js 16.3、供应链蠕虫与 Flue 2.0

本周快讯

keyv 供应链蠕虫假 6.0 版本植入凭证窃取蠕虫，已波及 400+ npm 包，依赖 install scripts 传播。
SvelteKit 3 预览版 Svelte 团队发布 SvelteKit 3 首个预览，面向下一代全栈应用架构。
Vite 8.2 发布构建工具链持续迭代，与 Rolldown 生态进一步整合。
React Router v9 讨论开启 v8 刚落地，v9 路线图已开放社区意见征集。
npm 发布时恶意软件扫描 GitHub 对每次 npm 发布做实时扫描，严重情况会延迟或拦截安装。

技术文章

Next.js 16.3 正式发布：Instant Navigations 与开发内存最高降 90%

8 月 3 日 Next.js 团队发布 16.3，Dan Abramov 与 Pete Hunt 加入后的首个大版本，面向所有现有项目零代码改动即可获益。

Turbopack 开发服务器默认开启磁盘缓存与内存驱逐，长会话 RAM 最高降 90%；next build 重复构建读缓存，CI 部分项目提速 5.5×。可选 TypeScript 7 类型检查，App Router SSR 换用原生 Node Streams，高负载请求吞吐提升约 22%。

Instant Navigations 套件（Partial Prefetching、use cache、Instant Insights）让服务端驱动应用拥有 SPA 级切换体验，需两个 config 标志显式开启。

npm install next@latest
pnpm add -D typescript@^7  # 可选：启用 TS7 类型检查

从零重写 htmx：40 行代码拆解声明式增强的本质

Serge Zaitsev 继「最差 React/Vue」系列后，用约 40 行 JS 实现 htmx 克隆 x.js，核心循环为 SSS：scan 扫描 DOM → send 发请求 → swap 替换内容。

支持全部 HTTP 方法、x-target/x-swap 目标选择、自定义 trigger（delay、once、changed）及 HX-Trigger 等服务端响应头。插件架构用 x:beforeSend/x:beforeSwap 事件扩展，无需改核心循环即可实现 confirm、boost、push-url 等能力。

对后端开发者想理解 htmx 设计哲学，这是比读源码更友好的教学式拆解。完整代码在 GitHub。

cdnjs 全面迁移至 Cloudflare Developer Platform：日 90 亿请求

Cloudflare 将 cdnjs——覆盖约 12% 网站、日请求 90 亿 的开源 JS CDN——整体迁至自家 Developer Platform，R2 为文件唯一数据源，Workers + Workflows 驱动发布管线。

迁移中触发平台瓶颈：Worker subrequest 上限从 1,000 提至 1000 万，Workflow 步骤从 1,024 扩至 25,000，惠及所有 Cloudflare 用户。98.6% 缓存命中率，SRI 哈希迁移采用「原样复制」策略避免压缩非确定性破坏客户端契约。

对评估边缘计算承载大规模静态分发的团队，这是平台能力的生产级背书。

你的 JSON 在骗你：JSON.parse/stringify 的隐性数据损坏

Gabor Koos 撰文指出，JSON.parse(JSON.stringify(x)) 远非无损克隆：大整数被四舍五入、undefined 键被丢弃、Date 变字符串、NaN/Infinity 变 null，且全程不抛错。

const original = { id: 9007199254740993n, missing: undefined, score: NaN };
JSON.parse(JSON.stringify(original));
// { id: 9007199254740992, score: null } — BigInt 变 number，undefined 消失

文章建议把 JSON 视为独立的数据模型，序列化前定义显式 wire shape，解析后用 Zod 等工具校验。对 API 边界和状态持久化场景，这是常被忽视的隐患清单。

2026 State of CSS：锚点定位成开发者最爱新特性

Devographics 发布年度 CSS 调查，anchor positioning 获「最爱新特性」榜首，但浏览器支持不足仍是最大阻碍。

实际使用率最高的是 :has()、aspect-ratio 和 CSS nesting；调查还覆盖 AI 工具采纳率、框架选型与 Grid 学习曲线。Josh Comeau 上月发布的锚点定位入门文被多次引用，值得配合阅读。

对做设计系统或布局方案选型的前端，这是一份把握社区共识的年度快照。

Flue 2.0：Fred K. Schott 的 TypeScript Agent 框架引入 React 风格 Hooks

Astro 作者 Fred K. Schott 发布 Flue 2.0 稳定版，用 Agent Hooks（useModel、useTool、useSkill、useSandbox 等 16 个内置 hook）重构代理架构。

与 React 不同，Agent 每次模型调用前会重跑 hooks，因此工具和资源可条件性挂载——代理能在运行时动态解锁能力。支持自定义 hook 组合（如 useGitHub()），200+ 修复落地首个稳定 release。

对构建自主编码代理或 MCP 工作流的团队，这是「React 心智模型 + TypeScript harness」的新选项。

'use agent';
import { useModel, useTool, useSkill } from '@flue/runtime';

export default function triage() {
  useModel('anthropic/claude-sonnet-4-6');
  useSkill(triageSkill);
  useTool(searchCode);
  return 'Analyze the issue and propose a fix.';
}

工具推荐

TanStack Table v9：可 Tree-shake 的无头表格新基座

距 v8 四年后再更新，TanStack Table v9 将状态迁至 TanStack Store，实现细粒度响应式，大数据集内存占用显著下降。

架构改为按需注册：纯分页表格不再打包过滤/分组代码。框架无关设计延续 headless 定位，与 React、Vue、Solid 等生态兼容。

对需要复杂表格又在意 bundle 体积的项目，v9 是值得规划的升级路径。

TanStack Charts：声明式图表语法新方案

TanStack 家族新成员，用框架无关的 DSL 声明式描述图表，输出 SVG 或 Canvas，样式完全自控。

目前处于快速迭代 pre-alpha，官方提供与 Chart.js、Recharts 等的对比表。与 Table v9 同期发布，体现 TanStack 向数据可视化层扩展的布局。

适合不想被重型图表库绑定、又需要统一 TanStack 技术栈的团队提前关注。

vlt 1.0：带 CSS 选择器查询的 npm 替代方案

Darcy Clarke 两年后正式发布 vlt 1.0，vlt query 支持 60+ CSS 风格选择器扫描依赖图，其中半数面向安全审计。

默认阻止 install scripts（正是本周 keyv 蠕虫的传播机制），提供托管私有 registry，npm 协议完全兼容。官方称 Top 10k 包安装带宽比传统 registry 减少约 70%。

在供应链攻击频发的背景下，这是值得评估的 package manager + registry 一体化方案。

anydoc：14 种办公文档格式转 Markdown 的 Rust 库

Firecrawl 开源 anydoc，纯 Rust 实现，支持 Word/PPT/Excel/PDF/EPUB 等 14 种格式统一输出 GitHub-Flavored Markdown，中位转换 <5ms。

提供 Node.js、Python、WASM 浏览器绑定与 CLI；npx @firecrawl/anydoc report.docx 即可使用。还附带 Agent Skill，npx skills add firecrawl/anydoc 让编码代理直接读办公文档。

对 RAG 管道、文档导入和 AI 预处理场景，这是本周最实用的格式转换工具之一。

npx @firecrawl/anydoc slides.pptx -o slides.md
npm install @firecrawl/anydoc

use-webmcp-tool：将 WebMCP 标准封装为 React Hook

Google Chrome Labs 的 Sarah Drasner 发布 React Hook，把 document.modelContext.registerTool 的 imperative API 转为声明式，组件挂载注册、卸载自动注销。

支持 inputSchema、结果规范化、enabled 条件注册和 onError 回调。工具列表与屏幕内容保持同步，Agent 只看到当前页面实际暴露的能力。

对探索 WebMCP 标准（让 AI Agent 调用页面 JS 函数）的 React 应用，这是目前最完整的官方封装。

const { supported, registered } = useWebMCP({
  name: 'add-todo',
  description: 'Add a new item to the todo list',
  async execute({ text }) { addTodo(text); return `Added: ${text}`; },
});

版本发布

Node.js 26.7.0：测试覆盖率增强与 Perfetto 追踪

8 月 5 日发布，距 26.6 仅隔两天。新增 --test-coverage-include-all，覆盖率报告可包含测试未触及的文件。

FFI 与 SQLite 多项崩溃修复落地；底层加入 Perfetto 追踪支持（需自定义构建启用）。ModuleHooks 实现 Symbol.dispose，crypto 支持 STORE loader 加载私钥。

对使用 Node 原生 test runner 做覆盖率门禁的团队，26.7 值得尽快跟进。

Astro 7.2：实验性增量静态构建

Astro 7.2 headline 功能是 incremental static builds：通过 getStaticPaths() 返回 cacheKey，跳过代码与数据均未变更的预渲染页面。

路由模块图哈希 + 内容 digest 双重校验，缓存存于 node_modules/.astro/。同时新增 session: false 剔除未使用 session 的运行时代码，astro preview --background 支持后台预览模式。

对数千页文档站或内容驱动站点，这是缩短 CI 构建时间的实验性选项。

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
    cacheKey: post.digest,
  }));
}

Vite 8.2 发布：构建工具链持续演进

Vite 8.2 随本周多个周刊源一并发布，延续 Vite 8 + Rolldown 时代的性能与 DX 改进。

与 Astro 7、Next.js 16.3 等同期升级窗口叠加，建议关注 Release Notes 中的 breaking changes 再批量升级。

pnpm add -D vite@^8.2

SvelteKit 3 预览版：下一代全栈框架初探

Svelte 团队发布 SvelteKit 3 首个预览版，标志着全栈框架进入新一轮架构演进。

具体 API 变更与迁移路径见官方博客，建议通过独立分支或 npx sv create 新项目体验，生产环境暂勿直接升级。

对 Svelte 生态关注者，这是下半年最值得跟踪的框架大版本动向。