前端周刊 #52：Meta Astryx 开源、Hydration 拖垮 LCP、TypeScript 7 与 Expo SDK 57

本周快讯

Meta 开源 Astryx 设计系统八年内部打磨、驱动 13,000+ 应用的 React + StyleX 设计系统正式 Beta 开源，自带 CLI 与 MCP Server，面向 Agent 协作时代重构。
GPT-5.6 Sol/Terra/Luna 受限预览 OpenAI 发布三代闭源视觉语言模型，应美国政府要求首批仅向约 20 家获批机构开放 API/Codex，更广发布承诺数周内到来。
Vercel Services 多框架同项目部署 6 月 30 日上线，在单个 Vercel 项目内用 vercel.json 的 services 键编排 Next.js 前端与 Python/Go/Rust 后端，原子部署、共享预览、内网 bindings 通信。
Chrome 150 落地 text-fit 与原生渐变边框 Rachel Andrew 盘点 Chrome 150 新特性，含 text-fit 属性支持与无需伪元素的渐变边框方案。
Chrome 151 将上线 permission 元素替代 getUserMedia() 弹窗式权限请求，用户可在页内撤销已拒绝的摄像头/麦克风权限，无需深入浏览器设置。
npm 12 预览版收紧 .npmrc 校验第二预览版对 .npmrc 中无法识别的 key 直接 hard-error，高影响维护者账号改邮箱或 2FA 恢复后进入 72 小时只读锁定。
Storybook 一等公民支持 TanStack 生态 Storybook 9.1 为 TanStack Router、Start、Query 提供开箱即用的集成路径，降低全栈 TanStack 项目的组件隔离开发成本。

技术文章

Meta 开源 Astryx：八年打磨的 Agent 就绪 React 设计系统

Meta 6 月将内部使用了八年的设计系统 Astryx 以 Beta 形式开源——底层用 StyleX 编写样式，但消费者只需 import 预编译 CSS，无需 PostCSS/Babel 插件，可用 Tailwind、CSS Modules 或纯 CSS 通过 className 覆写。系统提供 150+ 可访问组件、十种可定制主题（CSS 变量级联）、页面模板，以及 npx astryx CLI 与 MCP Server，让 Agent 与人类共用同一套脚手架 API。哲学上，Astryx 刻意把「行为/可访问性/质量」锁在系统层，把「品牌视觉」交给主题 token——与 copy-paste 组件库各 fork 各维护的路径形成对比。对正从 styled-components 迁到 StyleX 的团队（Linear 上周刚分享迁移实录），Astryx 是 Meta 规模化实践的公开样本；对 AI 辅助 UI 开发，JSDoc 组合提示 + MCP 是目前设计系统领域少见的「原生 Agent 接口」。

npm install @astryxdesign/core @astryxdesign/theme-neutral
# 预编译 CSS，无需 StyleX 构建链

Hydration Mismatch 的隐藏代价：一次不匹配如何把 LCP 打进红区

性能顾问 Ivan Akulov 6 月 27 日把三个常被分开讨论的事实拼成完整因果链：Fact 1——React 18 起 hydration mismatch 不再就地 patch，而是在最近 Suspense 边界（或无边界时整页）销毁并重建 DOM；Fact 2——font-display: swap 下，系统字体与 Web 字体度量差导致文字块在字体加载后物理尺寸变化；Fact 3——LCP 只在新 DOM 节点加入时重新测量，已有节点变大不算数。三者叠加：用户肉眼看到文字早已出现，但 mismatch 触发整页 remount 后，浏览器把「字体 swap 后更大的文字节点」当作全新 LCP 候选，LCP 时间被推迟到 hydration 完成——典型 4G + React 页面可拖到 5 秒以上，从绿区跌入红区。解法直白：修 mismatch；若短期无法修，用 <Suspense> 包裹问题组件以限制 remount 范围。此文是 Core Web Vitals 与 RSC 架构评审的必读——DevTools 里 LCP 正常而真实用户慢，先查 mismatch 日志。

VS Code 渐进式拥抱 TypeScript 7：六个月把 tsc 从 36 秒压到 5 秒

VS Code 团队 6 月 26 日详述如何在 TypeScript 7（Go 重写、RC 阶段）尚未完工时就开始增量迁移：夏秋季用 @typescript/native-preview 对小型扩展 --noEmit 报 issue；秋季并行跑 TS 6 与 TS 7 CI；2026 年初逐个内置扩展从 tsc+webpack 切到 tsgo+esbuild；2 月将默认 watch 任务切到 TS 7。数字触目惊心：主代码库 tsc --noEmit 从 36s → 5s（7×），npm run watch 从 80s → 20s（4×），编辑器加载 tsconfig 项目从近 60s → 10s。团队强调「小步快跑、每步可回滚」——格式化差异曾是最常见的回退理由，说明工具链迁移中「开发者体感」细节与类型正确性同等重要。对大型 monorepo 与 Agent 辅助编码场景，此文是可操作的 TS 7 落地 playbook：先装 TypeScript Native Preview 扩展，再按子项目逐步切换 tsgo。

# TS 6.0
tsc --noEmit -p src/tsconfig.json   # 36 seconds
# TS 7
tsgo --noEmit -p src/tsconfig.json  # 5 seconds

calc-size() 解决原生 select 下拉高度的「金发姑娘」问题

可样式化 <select> 落地后，Jake Archibald 6 月文章直面下拉面板（::picker(select)）高度难题：希望至少展示若干选项、至多不超过视口、同时尊重内容固有尺寸——但 min() 不接受 fit-content 等固有值。解法是用 calc-size() 在第一个参数声明固有尺寸，第二个参数用 size 关键字做计算：

.custom-select::picker(select) {
  min-block-size: calc-size(fit-content, min(size, 12em));
  max-block-size: calc-size(stretch, min(size, 30em));
  margin-block-end: 1em;
}

Chrome 已支持；Firefox/Safari 尚无，Jake 给出 @supports 分层回退与 position-try-fallbacks 翻转策略。对正在用 Open UI 风格 select 替代第三方 dropdown 的团队，这是把「原生控件 + 设计系统」落到像素级可控的实用配方。

React Compiler 生产实录：哪些 useMemo 能删、哪些删了会炸

Isaac Okoro 6 月 29 日在 LogRocket 记录把 Next.js 生产代码库开启 experimental.reactCompiler: true 的全过程。亮点与坑并存：React Hook Form 的 watch() 因「内部可变性」被 linter 标为 incompatible-library，开启 Compiler 后实时预览冻结——需用 "use no memo" 包装 useForm 逃生；Chart.js 的 onClick 回调删掉 useCallback 后出现陈旧数据，说明 Compiler 的 memo 调度与 imperative 库的引用身份假设并不总对齐；直接 mutate props 的 orders.sort() 被 linter 抓住，但 DevTools 的 Memo ✨ 徽章仍亮——徽章只表示「Compiler 接入了」，不代表优化成功。迁移清单：先升 eslint-plugin-react-hooks v7+ 并启用 recommended；feature branch 上开启；用 E2E 而非单元测试抓时序 bug；对 RHF、TanStack Table、Canvas 类库预备 "use no memo"。结论务实：大部分 useMemo/useCallback 可删，但跨 React 边界的 imperative 集成必须留档说明。

Next.js 已有 OpenTelemetry 追踪：用 @vercel/otel 导出到 Sentry

Kyle Tryon 在 Sentry 博客指出：Next.js App Router 内置 instrumentation 钩子，配合 @vercel/otel 的 registerOTel() 即可把服务端 span 导出到任意 OTLP 后端——无需完整迁移到 Sentry SDK。只需两个环境变量指向 Sentry 的 OTLP 接入点：

// instrumentation.ts
import { registerOTel } from '@vercel/otel';

export function register() {
  registerOTel('next-app');
}

OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=https://o{ORG_ID}.ingest.us.sentry.io/api/{PROJECT_ID}/integration/otlp/v1/traces
OTEL_EXPORTER_OTLP_TRACES_HEADERS=x-sentry-auth=sentry sentry_key={YOUR_PUBLIC_KEY}

对已有 OpenTelemetry 管线、只想在 Sentry Trace Explorer 看瀑布图的全栈团队，这是比双开 SDK 更轻的路径；若还需要 Session Replay、错误分组与 source map，再评估完整 @sentry/nextjs——两者不要同时注册 OTel Provider。

Drizzle ORM 一个月无法发版：npm packument 100MB 上限的教训

Evert Pot 6 月 23 日拆解 Drizzle 团队触顶 npm 隐形天花板：packument（包元数据 JSON，每次 npm install 非 lockfile 场景都会完整下载）上限 100MB 未压缩。Drizzle 每个版本元数据约 131KB，加上从 git commit 自动发布的 snapshot 版本，累计 763 个 release 即可触顶——registry 直接拒绝新 publish。npm 政策禁止删除 72 小时外的版本，团队只能排队等 GitHub/npm 支持人工清理旧版。对高频发版、多 entry 的 monorepo 库，此文是供应链运维必读：定期 prune 历史版本、控制 snapshot 频率、在 CI 监控 packument 体积——否则不是代码质量问题，而是发布通道被物理堵死。

CSS 伪类正在接管多少「本该由 JS 监听」的交互状态

Daniel Schwarz 在 JS Weekly 与 Frontend Focus 双源推荐的文章，系统盘点 :hover、:focus-visible、:checked、:user-valid 等伪类可替代的 JS 事件监听场景，并前瞻实验性 event-trigger 语法——让 CSS 直接响应「某元素发生某类事件」而无需手写 addEventListener。对追求零 JS 交互层、降低 hydration 负担的组件库与营销页，这是 2026 年「能 CSS 就不 JS」的更新清单；注意 event-trigger 仍处实验阶段，需 @supports 分层。

工具推荐

mapcn：shadcn 风格的 React 地图组件套件

Cloudflare 设计工程师 Anmoldeep Singh 发布的 mapcn，基于 MapLibre + Tailwind，组件分发方式与 shadcn/ui 一致——复制到项目、完全拥有源码。提供标记、弹窗、图层控制等常见地图 UI 模式，避免在 React 项目里再包一层重型地图 SDK 胶水代码。适合需要嵌入式地图、又希望与设计系统 token 统一的 SaaS 仪表盘或物流追踪页。

shadcn/ui 新增 Chat 组件：Message、Bubble、Attachment

shadcn 团队本周补齐 AI 聊天界面刚需：MessageScroller 自动滚底、Message/Bubble 气泡布局、Attachment 文件预览、Marker 时间分隔——全部走 copy-paste 分发，与现有 shadcn 主题和 Radix 基础无缝拼接。对正在用 Vercel AI SDK 或自研 SSE 流式接口的前端，这是比从零写聊天 UI 省数天的起点；样式仍完全归你所有。

termcn：基于 Ink 的终端 UI 组件库

Aniket Pawar 的 termcn 把 shadcn 哲学搬进终端：基于 Ink 与 OpenTUI，通过 shadcn CLI 安装，提供表格、进度条、选择器等 TUI 原语。适合 CLI 工具、内部运维面板、Agent 命令行界面的快速搭建——让终端体验也有设计系统一致性，而非每个项目手写 ANSI 转义。

Nub：Zod 作者出品的 Node.js 增强工具包

Colin McDonnell（Zod 作者）的 Nub 不试图替代 Bun/Deno，而是在 Node 上叠加「本该内置」的能力：更完整的 TypeScript 支持、更快更安全的包安装、改进的 .env 处理、Web 标准 Worker 等。定位是「扩展 Node 而非 fork Node」，适合团队短期内无法切换运行时、又希望逐步获得现代 DX 的渐进路径。

Gea：编译优先、无 VDOM 的响应式 UI 框架

Armagan Amcalar 的 Gea 走极端编译路线：JSX 编译为字符串模板，proxy store 驱动「外科手术式」DOM patch，构建产物体积极小。与 Solid、Svelte 同属「编译掉框架」阵营，但 API 更贴近轻量 store + 模板思维。适合对 bundle 体积极度敏感、页面逻辑相对线性的场景；生态仍早期，适合技术尝鲜而非大规模生产押注。

Storybook 9.1：TanStack Router/Start/Query 一等公民集成

Storybook 9.1 为 TanStack 全栈栈提供官方集成路径——Router 的路由上下文、Start 的服务端约定、Query 的缓存 Provider 可在 Story 层正确包裹，不再手写一堆 decorator 模拟路由与数据层。对采用 TanStack Start 构建全栈应用的团队，组件开发与页面集成之间的「故事书断层」终于有标准答案。

版本发布

Expo SDK 57：React Native 0.86 无破坏性升级

Expo 7 月发布 SDK 57，核心是把 RN 从 0.85 升到 0.86（React 仍为 19.2）。RN 0.86 官方宣称相对 0.85 无用户可见破坏性变更，Expo 借此探索更小步、更频繁的 SDK 节奏——理想情况下开发者只需 npx expo install expo@^57.0.0 --fix 即可跟上 RN patch 线。同批落地：expo prebuild 默认清空重建原生目录（--no-clean 可保留增量）、expo-image 新增缓存读写 API、Reanimated 4.3→4.5。已知问题：Android 上 Hermes V1 + Reanimated 可能多占 25–30% 内存（SDK 56 亦有），可启用 worklets bundle mode 缓解。

npx expo install expo@^57.0.0 --fix
npx expo-doctor@latest