Web前端周刊2026W35 | Bun 1.4 发布、pnpm 12 Rust 重写、Solid 2.0 RC 冻结、Next.js 修复两 RCE

本周 Web 开发热点纷呈：Angular 新表单与样式实践、React/Vue/Svelte 数据网格性能对比、TanStack Router 可靠预取展现框架活力；Bun 1.4 与 Solid 2.0 RC 推动运行时与响应式革新；Cloudflare 自研 WordPress 替代方案引关注；CSS 的 DPIP 小部件、animation-trigger 与 Goodgrowth 作品集丰富 HTML/CSS 区；pnpm 12 用 Rust 重写、SVGO 4.1 优化工具链；GDC 2026 聚焦跨 Web 数字身份互操作。

🎨 HTML/CSS

使用 Document Picture-in-Picture API 创建 Web 小部件

基本思路是：我们创建一个 Document Picture-in-Picture 窗口（DPIP 窗口），然后向其中放入 HTML、CSS 和 JavaScript。本文《使用 Document Picture-in-Picture API 创建 Web 小部件》最初由作者在 CSS-Tricks 亲手撰写并带着热爱发布。你真的应该订阅这份新闻通讯。

Goodgrowth：启动序列、旋转光盘与作品集的艺术

探索 Goodgrowth 背后的创作过程，从受控制台启发的概念，到让这一体验鲜活起来的 3D、动效、声音与技术细节。

animation-trigger

CSS 的 animation-trigger 属性允许你将 CSS 动画的开始延迟到某个特定触发器发生时。本文 animation-trigger 最初由作者在 CSS-Tricks 亲手撰写并带着热爱发布。你真的也应该订阅这份新闻通讯。

重新思考数据可视化：一种真正驱动决策的仪表盘 UX 方法

在当今的组织中，数据从未像现在这样触手可及。几乎每个职能——销售、产品、营销、运营——都有仪表盘和绩效报告，而构建它们的工具也从未如此易得。然而，在每周站会和季度评审中，同样的事情却不断发生。

MicroLighter：语法高亮器

为代码块提供语法高亮，无需复杂的标记、span、类和臃肿的 JavaScript，由 Uncle Dave 提供。本文 MicroLighter：语法高亮器 最初由作者在 CSS-Tricks 亲手撰写并带着热爱发布。你真的也应该订阅这份新闻通讯。

用 Three.js 和 GLSL 构建鼠标跟随的方形透镜效果

一篇分步教程，讲解如何使用 Three.js 和 GLSL 创建鼠标跟随的方形透镜效果，包含图像扭曲、RGB 偏移以及动画着色器效果。

为什么你的网站永远不该停止变化

本文由 Fimo 赞助。每个网站在其上线的那天都是最好的状态。最终的分支合并了，站点完全按设计上线，并且短暂地完美无缺。它永远不会再这么好了。不是因为有什么东西坏掉。站点仍在运转。但市场在移动，信息传递也在变化。

WordPress 仅用 PHP 的区块注册

在区块进入核心七年后，WordPress 引入了一种无需 React 和构建流水线即可构建区块的方式。你只需要 PHP。本文 WordPress 仅用 PHP 的区块注册 最初由作者在 CSS-Tricks 亲手撰写并带着热爱发布。你真的也应该订阅这份新闻通讯。

Blender 到 Three.js 再回来：优化工作流的 10 个技巧

一份实用技巧合集，讲解如何结合 AI、Blender 和 Blender MCP 来简化你的 Three.js 工作流。

🟨 JavaScript/TypeScript

Bun 1.4：如今比以往更兼容 Node.js

在最初预期发布数周之后，Bun 从 Zig 用 Rust 重写这一重大 AI 驱动版本终于到来，并配有传统的 ▶️ 发布视频。大量精力投入于兼容性，不仅是与 Node，还有 Next.js、Playwright、Vitest 和 Nuxt。吞吐量与 CPU/内存占用也……

Solid 2.0 RC：重大〈揭晓〉

异步现在存在于响应式图中，因此异步数据流经普通的 memo。createResource、batch 和 startTransition 已被移除。SolidStart 退役为 Vite 插件上的一个 start: true 标志，API 现已冻结。

翻译后的标题

MicroLighter：一个不碰 DOM 的 2KB 语法高亮器

一个小型的客户端语法高亮器，利用 CSS 自定义高亮（Custom Highlights）API。无依赖，并提供亮色与暗色主题。主页上有一些实时演示。

Formisch 1.0：框架无关的基于 Schema 的表单库

一个无头（headless）表单库，由 Valibot schema 驱动类型与校验，并跨八个框架工作。v1 新增 Angular 和 React Native 支持、面向 TanStack Form/React Hook Form/Formik 用户的迁移指南，以及供智能体使用的 Markdown 文档。

Stryker Mutator 10.0：用变异测试检验你的测试

Stryker 对你的代码做微小、有意为之的改动，并检查你的测试套件是否捕获了它们。如果没有，你的测试可能过于宽松，需要改进。以下是入门方法。

Aviv Keller 回顾 Node.js Interactive 2026 的全部内容

Aviv Keller 回顾了两周前在亚特兰大举行的 Node.js Interactive 2026 的全部内容。

🤖 TanStack AI 进入 RC 阶段，回顾历程与主要功能集

🤖 TanStack AI 已进入 RC 阶段，回顾了迄今为止的历程及其主要功能集。

获得 React Compiler 支持

Oxlint 已获得 React Compiler 支持。

Electron 44

尚无发布文章，但它已放弃 32 位支持，要求 macOS 13 及以上，剪贴板现已与 W3C Clipboard API 对齐，并新增了 net.WebSocket 以及在 Linux 上设置窗口透明度的能力。

SvelteKit 3 候选发布

SvelteKit 3 完全弃用了长期存在的 svelte.config.js 文件，将配置移入 Vite 插件，使工具能够同步读取配置，而无需等待异步解析。这一破坏性变更——加上移除 $lib 别名约定——颠覆了许多团队围绕其构建大型代码库的模式。文章通过 sv migrate 讲解了 RC 迁移、标记陈旧代码的诊断警告，以及这次精简为 SvelteKit 未来演进所释放的空间。

Ionic Framework v9

这款面向 React、Angular 和 Vue 的移动优先 UI 工具包在时隔两年后回归，带来 React Router 6 支持、Angular 21+ 中的无 zone 变更检测等。还提供了面向 v8 用户的升级指南。

Papa Parse 5.7

快速、灵活的 CSV 转 JSON 与 JSON 转 CSV 库。

MapLibre GL JS 6.6

用于在浏览器中渲染交互式地图的 GPU 加速矢量瓦片渲染库。

Plotly.js 4.0

用于创建交互式数据可视化的独立库。

GTKX 1.3

用 React 创建由原生 GTK 驱动的 Linux 桌面应用。

YouTube.js 18.0

面向 YouTube 内部 API 的 JavaScript 客户端。

在 Reddit 上做了 AMA（Ask Me Anything）

上周 Next.js 团队在 Reddit 上做了 AMA（Ask Me Anything），该帖子中充满了回答与见解。

关于 Firefox 即将支持 JPEG XL 的更新

🖼️ Jake Archibald 发布了一则关于 Firefox 即将支持 JPEG XL 的更新，Chrome 也计划很快支持。

CSS-in-JS Arena

📊 Gajus Kuizinas 整理了一个 CSS-in-JS Arena，在同一个 React Router 8 应用上对比 StyleX、Panda CSS 以及他自己全新的 Bamboo CSS。

现已成为单条命令

你知道吗？拆分 git 提交现在只需单条命令（Git 2.54+）？git history split <ref> 会逐块遍历变更，并提示输入提交信息。

一个用 JavaScript 写的 N64 模拟器

🕹️ 一个用 JavaScript 写的 N64 模拟器。如果你有可用的 ROM 文件，可以在此处试玩。

🧩 框架

样式精通与声明式表单提交

Angular 生态持续演进，带来了强大的新表单原语、样式最佳实践以及 AI 辅助工作流。本周，我们全球社区的专家们带我们深入探究了组件 CSS 与声明式表单处理。查看本周由专家主导的资源：精通组件 CSS 与声明式表单处理。

我们在 React、Vue 和 Svelte 中构建数据网格的收获

SVAR 为 React、Vue 和 Svelte 提供相同的数据网格，因此他们很清楚框架之间的差异。但这些差异会影响性能吗？几乎不会。文章并未宣布赢家，因为“一个快速数据网格中昂贵的那部分几乎完全与框架无关”。

使用 TanStack Router 实现可靠的查询预取

在 loader 中预取，意味着你要写两遍查询，而这两份副本会随时间逐渐偏离。Dominik 的修复方案将 queryOptions 放入路由上下文，使 loader 和组件使用同一份定义，子路由也能继承它们。

用 Next.js 16.3 构建类应用体验

务实审视即时导航（Instant Navigations）、缓存组件（Cache Components）与部分预取（Partial Prefetching），并通过四个可克隆的开源应用进行演示。

Oxlint 获得 React Compiler 支持

Oxlint 现包含 22 条规则，运行 React Compiler 自身的校验流程以捕获违反 React 规则的行为。Oxc 还发布了一个包，可自动应用记忆化，声称比 Babel 插件快 10 倍以上。

Waku 1.0 RC：极简 React 框架冻结其 API

围绕服务端组件构建的极简 React 框架已进入候选发布阶段，因此公开 API 现已固定，这是提交影响最终 v1 版本反馈的最后机会。

Rifm 1.0：React 输入格式化与遮罩

一个无依赖的小型 hook 组件，用于构建带格式的遮罩输入，且不会丢失光标位置。

⚠️ 影响 Next.js 的两个严重未授权 RCE 漏洞已修复

⚠️ 影响 Next.js 的两个严重未授权远程代码执行（RCE）漏洞已修复。请酌情升级到 16.3.3 或 15.5.24。

并行过渡现已在 Canary 构建中默认开启

并行过渡现已在 Canary 构建中默认开启，包含 React Native。已在 Meta 投入生产使用，并可能进入 React 19.3。如果你不熟悉这个概念，可在此处了解更多。

Better Auth 1.7 发布基于标准的 OAuth 服务器

一次重大的 OAuth 提供方发布，包含 DPoP、按 API 的令牌规则以及设备代码流，此外 MCP 认证也作为独立包提供。破坏性变更使得升级指南成为必读内容。

GTKX：用 Node、GTK 和 React 构建 Linux 桌面应用

使用真正的 GTK4 和 Adwaita 控件构建 Linux 桌面应用，不涉及任何 webview。编写 JSX，即可在普通 Node 进程中获得真正的控件，并支持 npm 包与快速刷新（Fast Refresh）。

🌐 浏览器

让数字身份在整个 Web 上运作：GDC 2026

当不同社群需要相互沟通并让各自系统协同工作时，全球数字基础设施的互操作性便成为现实。在数字身份方面，政府、标准组织、开源社区、私营部门和公民社会……

🛠 工具链

pnpm 12：用 Rust 重写，命令与锁文件不变

Rust 重写已稳定，但 v11 的所有命令、标志和锁文件格式都延续下来，仅有少量改动。全局 node 现在也会遵循你项目所固定的版本。请注意 npm 的 latest 标签仍指向 pnpm 11，因此你需要执行 pnpm self-update next-12 来升级。

SVGO 4.1：由 Node 驱动的 SVG 优化器

SVG 通常包含冗余信息。你可以将 SVGO 作为 CLI 工具或 Node 库来精简它们。v4.1 具有更严格的 XML 校验与安全性改进。

往期精选

阅读原文

扫码关注「右耳朵猫AI」

扫码关注「右耳朵猫AI」

posted @ 2026-09-01 11:40  右耳朵猫AI  阅读(20)  评论(0)    收藏  举报