- Published on
2026-第三十一周
- Authors

- Name
- AgedCoffee
- @__middle__child
该周报主要为各个地方内容的汇总整理
- 技术
- font-family 并不像你想的那样回退
- 您的单页应用正在泄漏内存。对它进行浸泡测试。
- SVG 滤镜文字效果:凸版印刷、墨迹增益、木活字
- 工具
- shadscan
- react-css-highlight
- open-connector
- pi-openai-server-compaction
- 滚动遮罩 Tailwind CSS 工具 — 蒂姆·威尔逊
- GitHub - izeigerman/claude-thermos: 为你保持 Claude 会话活跃 · GitHub
- querytuner
- fastapi-redis-sdk - Redis 官方 FastAPI 集成
- modern-tar
- Markdy — 开源动画 DSL 引擎
- GitHub - foxted/rsc-boundary: 用于可视化 Next.js App Router 中 React 服务端
- GitHub - clawkwork/clawk: 给 Coding Agent 一台一次性 Linux VM,而不是你的电脑
- GitHub - lightningpixel/modly: 使用本地 AI 将图片生成 3D 模型
- 更新
- ReactDOM browser() API
技术
font-family 并不像你想的那样回退
本文讨论了 font-family 的一个常见误区:在子元素上单独声明字体时,若该字体尚未加载,浏览器不会继承父元素的字体栈作为回退,而是直接使用浏览器默认字体(通常是 Times),导致出现难看的字体闪烁甚至布局偏移。解决方案是每次声明 font-family 时都提供完整的字体栈(至少包含通用字体族),以避免回退到不合适的默认字体。
- 🔍 关键问题:
font-family是自包含的,子元素声明只会从自身列表中回退,不会向上继承父元素的字体栈。 - ⚠️ 常见后果:仅指定单个 Web 字体时,加载期间会闪回 Times 或 Times New Roman,造成视觉突兀。
- 🛠️ 修复方法:所有自定义字体变量都要补全栈,例如
"Clan Pro", sans-serif,确保回退到同类字体。 - 📐 性能影响:字体回退若与目标字体尺寸/比例差异过大,真正加载替换时会导致 CLS(布局偏移)恶化。
- 💡 核心原则:既然某个
font-family值得覆盖默认值,就值得定义完整、正确的字体栈。
您的单页应用正在泄漏内存。对它进行浸泡测试。
这篇文章介绍了单页应用(SPA)内存泄漏的问题,并详细说明了如何用 Playwright 进行前端浸泡测试(Soak Test)来检测内存泄漏。文章解释了内存泄漏的成因、测试方法、关键代码实现,以及如何通过伪造时钟和网络来加速测试,使测试结果更贴近真实使用场景。
- 🔍 内存泄漏是 SPA 的常见问题:页面不刷新,监听器、定时器和缓存不断累积,最终导致浏览器标签页崩溃或卡顿。
- 🧪 后端团队早已用浸泡测试检测内存泄漏,前端同样需要此类测试,因为 SPA 长期运行,内存不会自动释放。
- 📊 一项对 500 个 React、Vue 和 Angular 仓库的分析发现,86% 的代码存在未移除的监听器、定时器或订阅。
- 🛠️ 使用 Playwright 构建前端浸泡测试:在单一浏览器上下文中重复运行同一用户流程,对比测试前后的内存指标。
- 📈 通过 Chrome DevTools 协议(CDP)收集页面指标,包括堆大小、DOM 节点数和监听器数量,用于判断是否存在泄漏。
- ⏳ 测试前需进行数次预热循环,避免首次加载代码和数据造成的假阳性;同时需执行两次垃圾回收以确保节点计数准确。
- 🔁 断言通常关注监听器数量不增长,以及 DOM 节点数的增长控制在允许范围内(例如 100 个节点)。
- ⏱️ 使用 Playwright 的时钟伪造功能模拟时间流逝,可在短时间内覆盖数小时的真实使用场景,从而检测定时器泄漏。
- 📡 还需模拟网络请求(如 API 响应和 WebSocket),确保定时器频率与真实情况一致,并避免真实网络延迟干扰测试。
- 🧩 若检测到泄漏,可通过 Chrome DevTools 的堆快照和“Detached”过滤器定位持有已删除 DOM 节点的引用。
- ✅ 浸泡测试应纳入夜间自动化任务,以便在问题进入生产环境前及时发现并修复,而不是等用户反馈后紧急处理。
SVG 滤镜文字效果:凸版印刷、墨迹增益、木活字
本文介绍了如何使用 SVG 滤镜在网页文字上复现传统印刷术的视觉效果(如油墨扩散、木刻阴影、金属凸起等),并详细演示了多种滤镜原语的组合应用。
- ✒️ 真实外描边:使用
feMorphology operator="dilate"让字形轮廓向外扩展,配合feFlood染色,得到完全在字体外部的描边(CSStext-stroke无法实现)。 - 💡 金属凸起特效:通过
feSpecularLighting将模糊的SourceAlpha视为高度图,模拟点光源下的金属字表面高光,支持鼠标交互移动光源。 - 🪵 阴影木活字:堆叠多个
feOffset生成阶梯状阴影,再用feComposite operator="out"切掉原字形,可自由控制阴影方向和颜色。 - 🖨️ 磨损印刷效果:
feTurbulence产生噪声,经feDisplacementMap扭曲字形,模拟老旧铅字边缘破损或油墨晕开,效果强弱可调。 - 🫧 粘稠融合:高模糊(
feGaussianBlur)后通过feColorMatrix设置陡峭的 alpha 阈值,使相邻字形融合成流动形状,适合表现液态感。 - 🌈 色差分裂:用三个
feColorMatrix分别提取 R、G、B 通道,将红蓝通道进行feOffset偏移后叠加,模拟印刷套版不准的彩色边缘。 - 💡 霓虹发光:先对
SourceAlpha染色,再用两个不同半径的模糊产生内亮外晕的效果,合并后叠加原文字,可制作管状发光文字。 - 🎨 镀金首字母:组合
feMorphology外描边、金色渐变填充与feSpecularLighting高光,配合shape-outside实现文字环绕,模拟中世纪手稿金箔装饰。 - ⚙️ 应用方式:SVG
<filter>既可直接用在 SVG<text>上,也可通过 CSSfilter: url(#id)应用于任意 HTML 元素;滤镜定义需放在可见但隐藏的内联 SVG 中(避免display:none)。 - ⚡ 性能与兼容:
feTurbulence、feDisplacementMap和feSpecularLighting较耗性能,建议用requestAnimationFrame驱动动画,并使用IntersectionObserver和prefers-reduced-motion优化;需扩展滤镜边界(x、y、width、height)以防像素裁剪。
工具
shadscan
Shadscan 是一个针对 React shadcn 应用的确定性 UI 审计工具,通过 59 条静态规则从 0 到 100 评分并展示每项发现的证据,支持本地命令行、CI 集成、AI Agent 工作流以及 Web 扫描,帮助开发团队发现容易被忽略的界面细节。
- 🔍 审计范围:检查命令菜单、主题快捷键、路由状态、无障碍控件、表单反馈、元数据和移动端行为等易被推迟的产品细节
- ⚡ 快速开始:通过
pnpm dlx @shadscan/cli、npx或bunx即可运行,默认扫描当前目录,也可指定目标路径 - 🛡️ 安全默认:扫描是确定性且只读的,不启动应用、不修改文件、不调用 AI 模型、不上传源码,也无需应用密钥
- 📋 报告格式:支持交互式、JSON、prompt、CI 等输出模式,报告分为修复(Fixes)、决策(Decisions)、建议(Advisories)和不适用(Not applicable)四类
- 🚀 GitHub Action:可直接作为复合 Action 使用,写入 job summary、强制分数下限,并可创建或更新包含 AI 修复方案的 issue
- 🤖 Agent 交接:
--prompt生成粘贴即用的修复计划,包含优先级分组、规则 ID、证据、建议修复和验收标准;--apply可显式启动已安装的编码 Agent - 📊 评分模型:六类加权类别(基础、交互、状态、无障碍、表单与数据输入、生产优化),高/中置信度失败扣分,低置信度作为不影响分数的建议
- 🧩 框架兼容:支持 Next.js App Router、Pages Router、混合模式、React Router、TanStack Start、Laravel+Inertia、Astro、Vite React 及通用 React 应用
- 📦 Monorepo 支持:自动发现并审计工作区中所有 React 应用并合并评分,库包仅扫描不计分,支持 pnpm、npm、yarn、bun 等包管理器
- 🌐 Web 扫描与托管 API:通过 Web 扫描器可在浏览器中审计公共 GitHub 仓库,另有版本化托管 API 供 Agent 和服务集成
- 🔧 开发与许可证:仓库使用 Node.js 24 和 pnpm 11.15.1 开发,发布的 CLI 兼容 Node.js 18,项目基于 MIT 许可证
react-css-highlight
这是一个使用现代 CSS Custom Highlight API 的 React 文本高亮组件,基于 TreeWalker 实现高效 DOM 遍历,零依赖且框架无关。
- 🚀 性能极快:使用 TreeWalker 遍历,比传统方法快约 500 倍,无 DOM 突变,非阻塞(requestIdleCallback)
- 🧩 非侵入:不修改 DOM 结构或组件树,不注入
<mark>标签 - 🔧 使用灵活:提供组件(Ref-based / Wrapper)、Hook 和纯 JS 三种模式,支持 React、Vue、Svelte、Angular 等
- 🎨 样式可定制:通过 CSS 变量和预定义变体(primary / secondary / success / error 等)自定义高亮颜色
- 🌐 多词高亮:支持同时高亮多个搜索词,并为每个词分配不同样式
- 📊 字符串差异比较:内置
createCompareHighlight,实现位置差异高亮,支持自定义差异算法(如 word-level diff) - ⚡ 同步计数异步渲染:匹配数立即返回,高亮效果在浏览器空闲时应用,不阻塞交互
- 🛡 浏览器兼容:Chrome/Edge 105+、Safari 17.2+、Firefox 140+(Firefox 不支持 text-decoration / text-shadow)
- 📦 零依赖:纯 React + 现代浏览器 API,TypeScript 完整类型支持
- 🧪 调试友好:提供
isSupported、onError、onHighlightChange等用于检测和容错
open-connector
OpenConnector 是一个开源连接器网关,专为 AI 智能体设计,提供超过 1000 个服务商和 10000+ 预构建 Action,支持多种部署方式与开发工具,旨在让智能体安全、可审计地访问用户已有的应用账户。
- 🔌 核心定位:作为 Pipedream/Composio 的替代品,通过统一网关连接用户应用账户,向智能体暴露共享的服务目录与 Action 契约。
- 📦 丰富目录:内置 GitHub、Gmail、Notion、BigQuery、Slack 等主流服务连接器,支持 API Key、OAuth2、自定义凭证及无认证模式。
- 🛠️ 多形态接入:提供 Connector SDK、oo CLI、MCP、HTTP/OpenAPI 和 Web 控制台,适配不同客户端与智能体宿主。
- 🔐 安全边界:凭证、作用域、策略与运行日志保留在可检查的运行时内,智能体只获所需元数据和执行结果,避免泄露提供商密钥。
- 🚀 灵活部署:支持本地 Docker/Node.js、Fly.io(持久化 SQLite)、Cloudflare Workers(D1/R2/静态资源)以及 OOMOL 托管运行时。
- 📜 可检查契约:每个 Action 都有请求/响应 Schema、必需作用域和惰性加载的执行源码,便于调试与审计。
- 🧩 策略控制:提供连接身份、运行时令牌、Action 允许/阻止策略、临时文件传输及脱敏运行日志等管理能力。
- 🌐 统一接口:开源与商业 SaaS 部署共用相同的 provider ID、Action ID、Schema 和契约,便于迁移与混合部署。
- ⚡ 快速开始:通过
docker compose up启动,打开本地控制台(localhost:3000),即可运行如 Hacker News 等无认证 Action 验证。 - 🔗 OAuth 示例:GitHub 可使用个人访问令牌快速连接,OAuth2 流程、加密凭证和令牌刷新详见文档。
- ☁️ Cloudflare 支持:支持 Workers 运行时 + D1 状态 + R2 传输文件 + Static Assets 控制台,并有视频教程。
- 🛫 Fly.io 支持:提供 Node Docker 运行时 + Fly volume 持久化 SQLite,支持 TLS、健康检查与自定义域名。
- 🖥️ 本地 Dashboard:可浏览连接器、配置凭证、创建运行时令牌、检查 Action Schema 并查看运行日志。
- 📚 文档丰富:包含快速入门、开发者工具、OAuth 教程、运行时 API、部署指南、配置与凭证说明、目录格式等。
- 🤖 生态协作:与桌面 Agent 项目 Wanta 搭配,可使用本地模型或托管服务,支持自定义和二次开发。
pi-openai-server-compaction
概述:这是一个 Pi 扩展,为 OpenAI 模型引入 Codex 风格的服务端压缩机制,在保留 Pi 原有功能的同时提升跨压缩边界的连续性;实测其原生压缩策略在默认配置下召回率更高,但代价是更大的上下文消耗和输出成本,且存在可靠性波动。扩展目前为实验性状态,支持项目级安装、配置开关和故障回退。
- 🧩 扩展用途:在 Pi 的压缩流程中并行调用 OpenAI Responses 压缩协议,生成不透明的服务端压缩产物,同时保留 Pi 的文本摘要,兼顾高保真连续性与可移植性。
- ⚖️ 基准结论:默认配置下,该扩展的原生策略精确召回 78.0%,Pi 默认压缩器为 48.0%,完整上下文为 100%;但原生策略输出压缩 token 多 4.58 倍,下游计费上下文大 29%。
- 📉 可靠性波动:大工件几乎全部完美保留,三个小工件表现较差,说明服务端压缩并不总能稳定检测并分配足够的容量。
- 🔄 对比限定:该结果对比的是本扩展重建的 Codex 风格压缩,而非完整 Codex CLI;早期“匹配容量”基准因方法不对称已被新报告取代。
- 🔐 安全与数据:扩展会设置 store: true,对话会发送到 OpenAI 压缩协议;不透明压缩产物保存在本地会话 JSONL 中,且不可人类阅读。
- 🛠 安装方式:推荐项目级安装
pi install -l git:github.com/algal/pi-openai-server-compaction,也可全局安装或一次性运行;要求 Node >=22、Pi >=0.80.9 < 0.81.0。 - ⚙️ 配置要点:通过全局或项目级 JSON 配置,支持
enabled、thresholdRatio、usePreviousResponseId、notify等;也可用PI_OPENAI_SERVER_COMPACTION_ENABLED等环境变量覆盖。 - 🚫 故障排查:快速禁用可设环境变量为 0,或使用
--no-extensions绕过;可用/reload重新初始化,pi remove卸载,并检查 JSONL 中的details.remoteCompaction。 - 🧪 测试方式:提供离线
npm run smoke和真实后端npm run test:live;支持通过PI_OPENAI_SERVER_COMPACTION_TEST_MODEL指定测试模型。 - 📌 已知限制:Pi 本地 JSONL 树仍为权威;远程压缩产物仅用于兼容的 OpenAI Responses 模型;跨模型切换会回退到文本摘要;压缩成本尚未纳入
get_session_stats()。 - 📁 项目结构:包含扩展入口、远程压缩逻辑、WebSocket 流、配置/状态管理、测试脚本、基准目录、架构文档和许可证说明。
滚动遮罩 Tailwind CSS 工具 — 蒂姆·威尔逊
scroll-mask 是一个基于 Tailwind CSS 的工具集,利用 animation-timeline: scroll() 和 mask-image 实现滚动容器边缘淡出效果,无需 JavaScript。它提供了多种轴方向和自定义淡出范围的实用类。
- 📜 集合了 Tailwind CSS 实用程序,用于根据滚动位置淡出滚动容器的边缘。
- 🎨 使用
animation-timeline: scroll()和mask-image的线性渐变来实现动画,无需 JavaScript。 - 🛠️ 安装只需将提供的 CSS 添加到 Tailwind CSS v4 样式表中。
- 🔄 提供
scroll-mask-y和scroll-mask-x分别控制垂直和水平滚动的淡出。 - 🔽 提供
scroll-mask-t、scroll-mask-b、scroll-mask-l、scroll-mask-r分别控制上、下、左、右单边淡出。 - ⚙️ 通过
-from-*后缀自定义渐变不透明停止位置,类似 Tailwind 的mask-*体系。 - 📐 支持自定义长度和百分比值,如
scroll-mask-b-from-80%或scroll-mask-r-from-[calc(100%-2rem)]。 - 🌐 需要浏览器支持
animation-timeline: scroll()。
GitHub - izeigerman/claude-thermos: 为你保持 Claude 会话活跃 · GitHub
claude-thermos 是一款工具,用于在 Claude Code 主代理等待子代理时自动保持其缓存活跃,避免因缓存过期导致的高昂重新编码费用,可节省约 22% 的成本。它通过本地反向代理监控流量,在主代理空闲且子代理活跃时发送轻量热身请求,并支持命令行和守护进程模式。
- 🔥 解决主代理等待子代理超 5 分钟导致的缓存过期问题,节省约 22% 的费用
- 🚀 通过
uvx claude-thermos直接替代claude命令,自动在后台执行热身 - ⏱ 可自定义空闲等待时间、热身间隔、最大循环数等参数(如
--idle和--interval) - 🌐 守护进程模式(
serve)为 IDE 和多个终端共享一个热身代理,通过设置环境变量接入 - 💰 热身仅消耗缓存读取成本(0.1x),避免昂贵的缓存写入(1.25x),大幅降低费用
- 📊 生成事件日志和汇总报告(
summary.json),清晰显示节省的 token 和费用
querytuner
QueryTuner 是一个 AI 驱动的 SQL 查询诊断工具,无需连接数据库即可分析并优化 SQL 性能,面向非 DBA 开发者群体,支持 5 种数据库方言,提供启发式引擎和可选的 AI 分析层。
- 🗄️ 支持 PostgreSQL、MySQL、Oracle、SQL Server、SQLite 五种数据库方言
- ⚡ 启发式引擎内置 12 条确定性规则,无需外部 API,可即时检测常见性能反模式
- 🗂️ 可粘贴建表 DDL,让索引建议从“估计”升级为“确认”,基于真实表名列名分析
- 🔧 生成方言正确的索引 DDL(如 PostgreSQL 的 CREATE INDEX CONCURRENTLY)
- 🤖 双 AI 提供者可选:HuggingFace(默认免费)或 OpenAI,输出结构化 JSON 或可读文本
- 🔍 结果按严重性分级:Critical → High → Medium → Low
- 📋 输出可直接运行的优化 SQL 改写
- 🔗 每个分析生成永久分享链接(/report/:id)
- 📈 集成 Google Analytics 4 事件跟踪
- 🛡️ 检测 SQL 注入模式和危险结构
- 📊 提供可读性评分,用于代码审查
- 🔒 客户端查询脱敏器:替换专有表名列名,分析后可一键恢复,映射仅存于浏览器内存
- 🔌 提供 REST API,可集成到 CI/CD 流水线
- 🚫 完全基于粘贴的查询文本工作,无需数据库连接(DDL 可选用于确认模式)
- 🏗️ 后端:Python FastAPI + Pydantic + sqlparse + LangChain;前端:React + Tailwind CSS
- 🧩 支持本地运行,环境变量配置 HuggingFace/OpenAI API 密钥
- 📄 包括清晰的目录结构、路线图及已知限制说明
fastapi-redis-sdk - Redis 官方 FastAPI 集成
fastapi-redis-sdk 是 Redis 官方提供的 FastAPI SDK,将连接池生命周期、依赖注入式缓存、缓存失效和分布式限流整合为 FastAPI 原生的 Depends() 工作流。它适合希望避免自行拼装 Redis 客户端、缓存装饰器和限流中间件的服务端项目。
- 🚀 链式初始化:
FastAPIRedis(app).lifespan().caching()将连接池挂接到 FastAPI lifespan;也可单独启用限流能力。 - 🗃️ 依赖注入缓存:
cache()、cache_evict()与cache_put()可直接作为Depends()工厂使用,分别处理读取缓存、失效和 write-through;复杂场景可使用CacheBackend命令式读写或按分组删除。 - 🌐 HTTP 缓存语义:缓存响应自带
ETag、Cache-Control与X-Redis-Cache: HIT/MISS,并支持304 Not Modified,适合 API 响应直接复用浏览器和代理缓存机制。 - ⏱️ 分布式限流:
rate_limit("10/second")以依赖形式保护端点;可在同一接口叠加短窗口和长窗口限制,并返回429、Retry-After及X-RateLimit-*响应头。 - 🧩 多实例一致性:缓存键、失效组和限流计数都存于 Redis,因此多个 worker 或 Pod 共享同一套缓存与配额状态。
- 🧪 测试友好:完整支持 FastAPI 的
dependency_overrides,无需通过 monkey patch 替换 Redis 依赖。 - ⚙️ 配置方式:基于 Pydantic 校验配置,可从
.env或REDIS_*环境变量读取连接地址、TLS、连接池、Cluster、键前缀和默认 TTL 等设置。 - 📦 依赖要求:支持 Python 3.10–3.14、FastAPI 0.115+、redis-py 6.0+、Pydantic 2.0+ 与 Redis Server 7.4+;采用 MIT 许可证。
modern-tar
modern-tar 是一个零依赖、跨平台、基于 Web Streams API 的流式 tar 归档库,支持所有主流 JavaScript 运行时(浏览器、Node.js、Cloudflare Workers 等),并提供完善的 USTAR/PAX 格式兼容、gzip 压缩/解压和 TypeScript 类型支持。
- 🚀 流式架构:支持大文件归档,无需将全部数据加载到内存
- 📋 标准兼容:完整支持 USTAR 格式与 PAX 扩展,兼容 GNU/BSD tar
- 🗜️ 压缩支持:内置 gzip 压缩/解压,利用原生压缩流
- 📝 TypeScript 优先:全类型安全,附带详细 TypeDoc 文档
- ⚡ 零依赖:无外部依赖,极小的包体积
- 🌐 跨平台:浏览器、Node.js、Cloudflare Workers 等均可运行
- 📁 Node.js 集成:提供高阶文件系统 API,支持目录打包与解包
- 📦 核心 API:
packTar/unpackTar用于简单打包/解包,createTarDecoder/createTarPacker用于流式处理 - 🗂️ Node.js 文件系统:支持过滤、映射、剥离目录、权限控制等高级选项
- 🏗️ 多源打包:可混合文件、目录、内容字符串、流等多种输入源
- ⚖️ 高性能:小文件归档速度远超同类库,大文件接近 I/O 瓶颈
- 🌟 兼容性:Node.js 18+,浏览器 Chrome 85+/Edge 85+/Firefox 102+/Safari 14.1+
Markdy — 开源动画 DSL 引擎
Markdy 是一个轻量级、零依赖的动画场景脚本语言和渲染引擎,基于纯 TypeScript 和 Web Animations API,适合 AI 生成、框架无关,并提供丰富的生态系统与交互式学习工具。
- 📦 核心特性:零依赖、纯 TypeScript 解析器;基于 Web Animations API 和 CSS 变换的原生渲染;AI 友好的结构化 DSL;框架无关,支持 Astro 组件。
- 🧩 轻量包体系:
@markdy/core(解析器+AST,~12KB)和@markdy/renderer-dom(浏览器渲染器,~22KB)为必需,Astro、MDX、CLI 为可选扩展。 - 🛠 工具与插件:语言服务器(LSP)提供诊断、自动补全;可选 actor 包(stdlib-systems)用于系统架构图;CLI 支持终端渲染与预览。
- 🎮 交互式示例与编辑器:提供多个真实示例(如爱情故事、战斗场面),内置编辑器支持自动补全和实时预览,可一键运行。
- 📚 学习指南:从场景设置(画布、帧率)、角色定位与修饰符、时间线和动作(进入、移动、淡入淡出)、说话与效果(气泡、抖动)、表情与肢体控制(关节旋转、拳打脚踢),到资产加载、变量模板和序列封装,逐步进阶。
- 🤖 AI 友好设计:通过
AGENT.md完整文档让 AI 理解语法,用户用自然语言描述场景即可生成合法脚本,支持 Claude、ChatGPT 等 AI 工具。 - 🌐 社区与案例:已有真实项目在生产中使用,如 Astro 场景、安全漏洞演示等。
GitHub - foxted/rsc-boundary: 用于可视化 Next.js App Router 中 React 服务端
RSC Boundary 是一款轻量级开发工具,用于在 React Server Component 应用中直观显示服务端组件与客户端组件的边界,支持 Next.js 和 TanStack Start,开发模式下提供彩色轮廓和标签,生产模式零开销。
- 🧩 轻量级开发工具,直接在浏览器中展示 React Server Component 与 Client Component 的边界,无需在每个文件添加标注。
- 🎨 开发模式下显示橙色虚线轮廓(客户端组件根)和蓝色虚线轮廓(服务端区域),并附带组件名称和来源的标签面板。
- 🚀 生产构建时提供透传,无额外 DOM 或运行时成本,仅开发模式启用。
- 📦 支持 Next.js (App Router) 和 TanStack Start,通过安装
@rsc-boundary/next或@rsc-boundary/start并包裹根布局即可使用。 - 🔄 旧版无作用域包
rsc-boundary已废弃,需迁移至新包名,安装后自动包含核心依赖。 - 🏗️ 包结构清晰:
@rsc-boundary/core(框架无关引擎)、@rsc-boundary/next(Next.js 适配器)、@rsc-boundary/start(TanStack Start 适配器)。 - 🤖 提供编码代理技能,可快速执行安装步骤(如
npx skills add foxted/rsc-boundary --skill install-next)。 - 📜 版本号统一,使用 Changesets 管理发布,遵循 MIT 许可证,包含贡献指南和安全策略。
GitHub - clawkwork/clawk: 给 Coding Agent 一台一次性 Linux VM,而不是你的电脑
clawk 是一个面向本地 Coding Agent 的隔离运行环境。进入项目目录运行 clawk,即可让 Claude Code、Codex 或 Shell 在独立、可销毁的 Linux VM 中工作;代码和 Agent 会话保留在宿主机,系统环境则可随时重建。
- 🛡️ 以 VM 作为安全边界:Agent 在独立 Linux 内核中以 root 权限运行,宿主机文件系统、钥匙串和未挂载内容默认不可见,隔离不依赖提示词或进程级权限规则。
- 🌐 默认限制出站网络:通过 VM 外部的 DNS 感知白名单过滤网络请求,常用代码仓库和包管理服务预先放行,也可按项目添加域名并查看被拒绝的访问记录。
- ♻️ 环境可随时销毁重建:执行
clawk destroy && clawk即可获得全新 VM;代码、Git 分支以及 Claude/Codex 的会话和记忆保存在宿主机,不会随 VM 磁盘一起删除。 - 📦 直接使用 OCI 镜像:无需 Docker、QEMU、Dockerfile 或 devcontainer 配置,clawk 会将任意 OCI 镜像转换为 VM 根文件系统,并通过写时复制降低多沙箱的磁盘成本。
- 🤖 支持多种 Agent:默认可运行 Claude Code,也可通过
clawk run codex、clawk run opencode或clawk run shell启动其他工具;外部沙箱允许 Agent 免逐条确认执行命令,也提供--safe模式恢复确认提示。 - 🔑 密钥留在宿主机:通过转发 SSH Agent 完成 Git 签名和推送,私钥本身不会进入 VM;但已挂载文件和白名单目标仍可能被 Agent 读取或发送,需要遵循最小共享原则。
- 🧰 覆盖完整开发工作流:支持端口转发、环境变量与文件共享、启动钩子、暂停/恢复、内存快照,以及每项目独立的
clawk.mod配置。 - 🎫 支持多仓库工单模式:可按 Ticket 为多个仓库创建协调的 worktree、分支和沙箱,并在完成后批量推送和创建相互关联的 PR。
- 💻 平台与成熟度限制:目前主要支持 Apple silicon 上的 macOS 14+,Linux Firecracker 仍属实验性,暂不支持 Intel Mac 和 Windows;项目处于 1.0 之前的快速迭代阶段,可能出现破坏性变更。
GitHub - lightningpixel/modly: 使用本地 AI 将图片生成 3D 模型
Modly 是一款开源桌面应用,可将照片转换为 3D 网格模型。模型推理完全在本地 GPU 上运行,无需把图片上传到云端,并支持 Windows、Linux 和 Apple Silicon Mac。
- 🖼️ 图片转 3D:通过“Image → Generate Mesh → Add to Scene”工作流,把单张图片生成可继续编辑和导出的 3D 模型。
- 🔒 本地 AI 推理:模型在用户自己的 GPU 上运行,素材和生成过程留在本机,兼顾隐私与离线使用。
- 🧩 可扩展模型系统:支持从 GitHub 安装外部扩展,官方扩展覆盖 Hunyuan3D 2 Mini、TripoSG 和 Trellis2 GGUF 等模型及其变体。
- 🔗 节点式工作流:可组合图像、网格生成和场景处理节点;运行前会校验连接关系,并在界面中展示日志和错误。
- 🛠️ 内置网格优化:导入的网格可直接在应用中执行平滑和减面,优化结果会写回当前工作区。
- 🤖 面向 Agent 的 CLI:脚本或 Coding Agent 可通过命令行查询模型、启动与取消工作流、检查运行状态,并将结果导出为 GLB,无需操作桌面 UI。
- 💻 跨平台桌面端:可直接下载 Windows、Linux 和 Apple Silicon macOS 安装包,也支持克隆仓库后通过启动脚本运行。
- 📜 开源许可:项目采用 MIT 许可证,二次开发和分发时需要保留对 Modly 与原作者 Lightning Pixel 的署名。
更新
ReactDOM browser() API
React 核心团队合入了一个新 PR,为 react-dom 新增 browser() API,用于表达“组件应在服务端挂起、在浏览器中渲染”的意图,从而规范化“仅浏览器”渲染模式。
- 🆕 新增
browser()API:从react-dom导入,返回一个“可用”(usable)对象,在 SSR 渲染时会报错,在浏览器渲染时正常解析。 - 💻 客户端专用特性:此 API 在
react-server环境中不可用,因为“浏览器”概念不适用于通用 React,因此归属于react-dom。 - 🔄 典型用法:通过
use(browser())配合Suspense,让组件在服务端进入挂起状态,并在浏览器端渲染实际内容,避免服务端渲染无关组件。 - ⚠️ 使用限制:
use(browser())必须在 Suspense 边界内使用,否则会因其无法从根恢复而报错,未来可能放宽该限制。 - 🧠 实现机制:将该场景建模为“可恢复错误”,同时刻意抑制错误日志;也支持
abort(browser())以中止服务端流式渲染,且不会在浏览器水合时记录错误。 - 🔖 设计权衡:选择“可用的对象”而非
useBrowser()hook,是为了支持按条件调用;也避免了直接抛出导致被任意捕获的风险。 - 🚦 特性开关:实现带有 kill switch,可在稳定版发布前快速禁用;目前以无前缀形式进入代码库。
- 📦 体积影响:PR 包含 sizebot 报告,多个 bundle(如 react-dom 生产版)有 0.02%–3.78% 不等的体积增加。