前端周刊 #52：Meta Astryx 开源、Hydration 拖垮 LCP、TypeScript 7 与 Expo SDK 57
本周焦点：Meta 开源 Astryx（React + StyleX、150+ 组件、MCP/CLI Agent 就绪）；Ivan Akulov 揭示 hydration mismatch + 字体 swap 如何把 LCP 从绿区打进红区；VS Code 渐进式迁移 TypeScript 7（tsc 36s→5s、watch 80s→20s）；Jake Archibald calc-size() 定制 select 高度；React Compiler 生产踩坑实录；Next.js 用 @vercel/otel 导出 OpenTelemetry 到 Sentry；Drizzle 触顶 npm packument 100MB 限额；mapcn、shadcn Chat、termcn、Nub、Gea；Expo SDK 57（RN 0.86）、React Router 8.1、Ant Design 6.5、AI SDK v7、npm 12 pre.2。示例：`calc-size(fit-content, min(size, 12em))`、`registerOTel('next-app')`、`npx expo install expo@^57.0.0 --fix`。
本周快讯
- 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、消费者只需预编译 CSS。
150+ 可访问组件、十种主题、npx astryx CLI 与 MCP Server 面向 Agent 协作。
正迁 StyleX 的团队与 AI 辅助 UI 开发的公开样本。
npm install @astryxdesign/core @astryxdesign/theme-neutral
# 预编译 CSS，无需 StyleX 构建链Hydration Mismatch 的隐藏代价：一次不匹配如何把 LCP 打进红区
3perf.com，Ivan Akulov 6 月 27 日把 hydration mismatch、字体 swap、LCP 拼成完整因果链。
mismatch 触发整页 remount 后，字体 swap 变大的文字节点被当作全新 LCP 候选，典型 4G 页面可拖到 5 秒以上。
DevTools LCP 正常而真实用户慢时，先查 mismatch 日志。
VS Code 渐进式拥抱 TypeScript 7：六个月把 tsc 从 36 秒压到 5 秒
VS Code 官方博客，6 月 26 日详述渐进式拥抱 TypeScript 7 的六个月迁移 playbook。
tsc --noEmit 从 36s → 5s，watch 从 80s → 20s，小步快跑每步可回滚。
大型 monorepo 与 Agent 编码场景的可操作 TS 7 落地参考。
# TS 6.0
tsc --noEmit -p src/tsconfig.json # 36 seconds
# TS 7
tsgo --noEmit -p src/tsconfig.json # 5 secondscalc-size() 解决原生 select 下拉高度的「金发姑娘」问题
Jake Archibald 6 月文章直面可样式化 <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 分层回退策略。
React Compiler 生产实录：哪些 useMemo 能删、哪些删了会炸
LogRocket 博客，Isaac Okoro 6 月 29 日记录 Next.js 开启 reactCompiler: true 全过程。
RHF watch() 需 "use no memo"，Chart.js onClick 删 useCallback 会出现陈旧数据。
大部分 memo 可删，跨 React 边界的 imperative 集成必须留档说明。
Next.js 已有 OpenTelemetry 追踪：用 @vercel/otel 导出到 Sentry
Sentry 博客，Kyle Tryon 指出 Next.js 配合 @vercel/otel 可导出 OTLP 到 Sentry。
只需 registerOTel('next-app') 加两个环境变量，无需完整迁移 Sentry SDK。
已有 OTel 管线只想在 Sentry Trace Explorer 看瀑布图的轻路径。
// 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}Drizzle ORM 一个月无法发版：npm packument 100MB 上限的教训
vlt.io 博客，Evert Pot 6 月 23 日拆解 Drizzle 触顶 npm packument 100MB 未压缩上限。
每个版本元数据约 131KB，763 个 release 即可触顶，registry 直接拒绝新 publish。
高频发版 monorepo 必须在 CI 监控 packument 体积，否则发布通道被物理堵死。
CSS 伪类正在接管多少「本该由 JS 监听」的交互状态
Daniel Schwarz 盘点 :hover、:focus-visible、:checked、:user-valid 等可替代 JS 监听的场景。
前瞻实验性 event-trigger 让 CSS 直接响应「某元素发生某类事件」。
追求零 JS 交互层、降低 hydration 负担的 2026 更新清单。
工具推荐
mapcn：shadcn 风格的 React 地图组件套件
Cloudflare 设计工程师 Anmoldeep Singh 发布 mapcn，MapLibre + Tailwind，shadcn 式复制分发。
标记、弹窗、图层控制等常见地图 UI，避免在 React 项目里再包重型 SDK 胶水代码。
嵌入式地图且希望与设计系统 token 统一的 SaaS 仪表盘场景。
shadcn/ui 新增 Chat 组件：Message、Bubble、Attachment
shadcn 本周补齐 AI 聊天界面刚需：MessageScroller、Message、Bubble、Attachment。
copy-paste 分发，与现有 shadcn 主题和 Radix 基础无缝拼接。
用 Vercel AI SDK 或自研 SSE 流式接口的省数天起点。
termcn：基于 Ink 的终端 UI 组件库
Aniket Pawar 的 termcn 把 shadcn 哲学搬进终端，基于 Ink 与 OpenTUI。
shadcn CLI 安装，提供表格、进度条、选择器等 TUI 原语。
CLI 工具、运维面板、Agent 命令行界面的快速搭建。
Nub：Zod 作者出品的 Node.js 增强工具包
Colin McDonnell（Zod 作者）Nub 不替代 Bun/Deno，在 Node 上叠加现代 DX。
更完整 TS 支持、更快包安装、改进 .env、Web 标准 Worker 等能力。
短期无法切换运行时、又希望逐步获得现代 DX 的渐进路径。
Gea：编译优先、无 VDOM 的响应式 UI 框架
Armagan Amcalar 的 Gea 走编译优先路线，JSX 编译为字符串模板，无 VDOM。
proxy store 驱动外科手术式 DOM patch，构建产物体积极小。
bundle 极敏感、逻辑线性场景的技术尝鲜，生态仍早期。
Storybook 9.1：TanStack Router/Start/Query 一等公民集成
Storybook 9.1 为 TanStack Router/Start/Query 提供官方集成路径。
Router 上下文、Start 服务端约定、Query Provider 可在 Story 层正确包裹。
TanStack Start 全栈应用「故事书断层」的标准答案。
版本发布
Expo SDK 57：React Native 0.86 无破坏性升级
Expo 官方 changelog，7 月 SDK 57 把 RN 从 0.85 升到 0.86，无用户可见破坏性变更。
expo prebuild 默认清空重建、expo-image 新增缓存 API、Reanimated 升至 4.5。
npx expo install expo@^57.0.0 --fix 即可跟上 RN patch 线。
npx expo install expo@^57.0.0 --fix
npx expo-doctor@latestReact Router 8.1：create-react-router 可安装 Agent Skill
React Router changelog，8.1 小版本有两项前端工程向更新。
create-react-router 支持安装 Agent Skill，instrumentation 新增 OTel 元数据字段。
降低 Agent 生成错误路由结构的概率。
Ant Design 6.5：包体缩小与新图标集
Ant Design changelog，6.5 聚焦体积与 Agent 友好，bundle 瘦身并新增图标。
发布 DESIGN.md 供 AI Agent 读取设计规范，与 Meta Astryx MCP 思路形成对照。
中后台项目低风险补丁升级，DESIGN.md 值得纳入 RAG 知识库。
Vercel AI SDK v7：统一多模型 Provider 抽象
Vercel 发布 AI SDK v7，在 v6 流式与 Tool Calling 基础上统一多 Provider 接口。
简化 OpenAI、Anthropic、Google 等模型切换与结构化输出。
Next.js 全栈 + AI 功能评估从自研 fetch 迁移的节点。
npm 12.0.0-pre.2：更严格的 .npmrc 与 install script 默认策略
npm/cli GitHub release，12.0.0-pre.2 继续推进默认更安全路线。
未识别 .npmrc key 直接报错。install script 默认禁用进入 pre 阶段。
CI 用 npm@12 提前修 .npmrc 拼写与 allowScripts 白名单。
Downshift 9.4：修复 React Compiler 兼容性
Downshift 9.4 专门修复与 React Compiler 的兼容问题。
无头 autocomplete/combobox/select 原语库计划开启 Compiler 的阻塞项补丁。
依赖 Downshift 构建可访问下拉且计划开 Compiler 的项目应评估升级。