Now vibe coding, so learning hammer FE ?
《Mirage:AI Agent的统一虚拟文件系统》
标签:#AI_Tools #AI_Agent #文件系统 #Python #TypeScript #SDK #S3 #Slack #GitHub #Redis #缓存 #OpenAI #Vercel_AI_SDK #LangChain
总结:
Mirage 是一个专为 AI Agent 设计的统一虚拟文件系统,它将 S3、Google Drive、Slack、Gmail、Redis 等数十种后端服务挂载到同一棵文件树下。Agent 只需用熟悉的 Unix/bash 工具(如 grep、cat、cp)就能跨服务读写数据,无需学习 N 个 SDK 或 MCP。支持 Python/TypeScript SDK 和 CLI,可嵌入 FastAPI、Express 等应用,并内置双层缓存(索引缓存 + 文件缓存)减少网络开销,兼容 OpenAI Agents SDK、Vercel AI SDK、LangChain 等主流框架。
文章要点:
- 统一挂载,万物皆文件:把 S3、GDrive、Slack、GitHub、MongoDB、Redis 等后端并排挂载到同一个根目录下,Agent 看到的始终只有一棵树
- 零学习成本:任何懂 bash 的 LLM 都能直接上手,用
- 双层缓存省流量:自带索引缓存(目录列表)和文件缓存(对象字节),默认用内存,也可切 Redis 共享给多进程/多机器
- 多语言 SDK + CLI:提供 Python 和 TypeScript(Node / Browser / Core)SDK,以及轻量 CLI,可嵌入你的 FastAPI、Express 或浏览器应用
- 主流框架即插即用:已适配 OpenAI Agents SDK、Vercel AI SDK、LangChain、Pydantic AI、CAMEL、OpenHands 等
- 工作空间可移植:支持克隆、快照、版本化管理,Agent 运行环境能在机器间迁移而不必重新配置
文章URL:https://github.com/strukto-ai/mirage
标签:#AI_Tools #AI_Agent #文件系统 #Python #TypeScript #SDK #S3 #Slack #GitHub #Redis #缓存 #OpenAI #Vercel_AI_SDK #LangChain
总结:
Mirage 是一个专为 AI Agent 设计的统一虚拟文件系统,它将 S3、Google Drive、Slack、Gmail、Redis 等数十种后端服务挂载到同一棵文件树下。Agent 只需用熟悉的 Unix/bash 工具(如 grep、cat、cp)就能跨服务读写数据,无需学习 N 个 SDK 或 MCP。支持 Python/TypeScript SDK 和 CLI,可嵌入 FastAPI、Express 等应用,并内置双层缓存(索引缓存 + 文件缓存)减少网络开销,兼容 OpenAI Agents SDK、Vercel AI SDK、LangChain 等主流框架。
文章要点:
- 统一挂载,万物皆文件:把 S3、GDrive、Slack、GitHub、MongoDB、Redis 等后端并排挂载到同一个根目录下,Agent 看到的始终只有一棵树
- 零学习成本:任何懂 bash 的 LLM 都能直接上手,用
grep、cat、cp、wc 这些经典命令跨服务操作,不用记新 API- 双层缓存省流量:自带索引缓存(目录列表)和文件缓存(对象字节),默认用内存,也可切 Redis 共享给多进程/多机器
- 多语言 SDK + CLI:提供 Python 和 TypeScript(Node / Browser / Core)SDK,以及轻量 CLI,可嵌入你的 FastAPI、Express 或浏览器应用
- 主流框架即插即用:已适配 OpenAI Agents SDK、Vercel AI SDK、LangChain、Pydantic AI、CAMEL、OpenHands 等
- 工作空间可移植:支持克隆、快照、版本化管理,Agent 运行环境能在机器间迁移而不必重新配置
文章URL:https://github.com/strukto-ai/mirage
《Optique:TypeScript 类型安全的 CLI 解析器》
标签:#CLI #TypeScript #ShellCompletion #ParserCombinator #NodeJS #Deno #Bun
总结:
Optique 是一款面向 TypeScript 的类型安全 CLI 解析器库,灵感源自 Haskell 的 optparse-applicative 与 TypeScript 的 Zod。它采用函数式组合子(combinator)架构,通过组合小型类型安全解析器构建复杂 CLI,TypeScript 自动推断解析结果类型。支持标志、选项、子命令、选项间依赖、环境变量绑定、交互式提示、配置文件集成、Shell 补全及 man 手册生成,并可在 Deno、Node.js 与 Bun 上运行。1.0.0 版本新增
文章要点:
- 类型安全组合子架构:用函数式组合子拼装小型解析器,TypeScript 自动推断解析结果类型,编译时保证安全,解析器结构本身即运行时校验规则 。
- 零重复定义的智能 Shell 补全:支持 Bash、zsh、fish、PowerShell、Nushell 五大 Shell,补全逻辑直接复用解析器结构,无需额外维护补全定义,选项、参数与
- 灵活的集成扩展:提供
- 1.0 正式版成熟稳定:2026 年 4 月发布的 1.0.0 完成 API 清理,新增
文章URL:https://optique.dev/
标签:#CLI #TypeScript #ShellCompletion #ParserCombinator #NodeJS #Deno #Bun
总结:
Optique 是一款面向 TypeScript 的类型安全 CLI 解析器库,灵感源自 Haskell 的 optparse-applicative 与 TypeScript 的 Zod。它采用函数式组合子(combinator)架构,通过组合小型类型安全解析器构建复杂 CLI,TypeScript 自动推断解析结果类型。支持标志、选项、子命令、选项间依赖、环境变量绑定、交互式提示、配置文件集成、Shell 补全及 man 手册生成,并可在 Deno、Node.js 与 Bun 上运行。1.0.0 版本新增
@optique/env 环境变量包与 @optique/prompt 交互式提示包,同时修复了 Shell 补全、帮助输出与值解析中的数百项问题 。文章要点:
- 类型安全组合子架构:用函数式组合子拼装小型解析器,TypeScript 自动推断解析结果类型,编译时保证安全,解析器结构本身即运行时校验规则 。
- 零重复定义的智能 Shell 补全:支持 Bash、zsh、fish、PowerShell、Nushell 五大 Shell,补全逻辑直接复用解析器结构,无需额外维护补全定义,选项、参数与
choice() 值自动同步 。- 灵活的集成扩展:提供
@optique/env 环境变量回退、@optique/config 配置文件级联、@optique/prompt 交互式提示、@optique/zod 与 @optique/valibot 桥接,以及 @optique/temporal 日期时间解析等生态包 。- 1.0 正式版成熟稳定:2026 年 4 月发布的 1.0.0 完成 API 清理,新增
fail<T>() 解析器、validateValue() 校验、normalize() 规范化与细粒度 hidden 控制,并修复了数百项补全、帮助与解析问题 。文章URL:https://optique.dev/
《2026年JavaScript生态全景指南》
标签:#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结:
本文全面梳理了2026年JavaScript生态系统的最新发展,涵盖ECMAScript 2025(迭代器助手、Set方法、Promise.try等)和2026预期特性(Temporal API、资源管理),React/Vue/Svelte框架动态,Node.js原生TypeScript支持、Bun和Deno运行时竞争,Vite 8与Turbopack构建工具演进,TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要,特别是在AI辅助编程时代,架构能力和代码品味尤为关键。
文章要点:
- **ECMAScript 2025超实用新玩具**:迭代器终于能链式调用`.map()
- **2026年最期待的Temporal API**:Date对象终于被拯救了!处理时区和日期计算不会再莫名其妙多出几天,浏览器原生支持即将到来,告别 moment.js 大礼包的时代要来啦~
- **框架圈的大新闻**:React 19的Server Components和Compiler还在消化中,Vue 3.6祭出Vapor Mode性能大招,Svelte 5的Runes API让响应式更细粒度; Next.js 16默认切到Turbopack,Astro被Cloudflare抱走,Remix正在酝酿去React化的大胆实验~
- **运行时三国杀**:Node.js 22+能直接跑.ts文件啦(虽然只是剥离类型),Bun被Anthropic(Claude家)收编后1.3版本速速飞起,Deno 2稳如老狗主打安全牌,三足鼎立格局越来越有意思~
- **TypeScript登顶GitHub第一**:v6严格模式默认开启,v7要用Go重写编译器提速10倍;92%的开发者都在用AI写代码,但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀!
文章URL:https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
标签:#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结:
本文全面梳理了2026年JavaScript生态系统的最新发展,涵盖ECMAScript 2025(迭代器助手、Set方法、Promise.try等)和2026预期特性(Temporal API、资源管理),React/Vue/Svelte框架动态,Node.js原生TypeScript支持、Bun和Deno运行时竞争,Vite 8与Turbopack构建工具演进,TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要,特别是在AI辅助编程时代,架构能力和代码品味尤为关键。
文章要点:
- **ECMAScript 2025超实用新玩具**:迭代器终于能链式调用`.map()
和.filter()`啦,而且是惰性求值不耗内存;Set之间可以玩集合运算,轻松找出技能交集和差集;`Promise.try()`让同步异步错误一网打尽;还有`RegExp.escape()`终于解决了用户搜索时特殊字符炸正则的问题~- **2026年最期待的Temporal API**:Date对象终于被拯救了!处理时区和日期计算不会再莫名其妙多出几天,浏览器原生支持即将到来,告别 moment.js 大礼包的时代要来啦~
- **框架圈的大新闻**:React 19的Server Components和Compiler还在消化中,Vue 3.6祭出Vapor Mode性能大招,Svelte 5的Runes API让响应式更细粒度; Next.js 16默认切到Turbopack,Astro被Cloudflare抱走,Remix正在酝酿去React化的大胆实验~
- **运行时三国杀**:Node.js 22+能直接跑.ts文件啦(虽然只是剥离类型),Bun被Anthropic(Claude家)收编后1.3版本速速飞起,Deno 2稳如老狗主打安全牌,三足鼎立格局越来越有意思~
- **TypeScript登顶GitHub第一**:v6严格模式默认开启,v7要用Go重写编译器提速10倍;92%的开发者都在用AI写代码,但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀!
文章URL:https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
《TypeScript 6.0 正式发布:迈向原生编译器的重要桥梁》
标签:#前端 #TypeScript #TS6 #TS7 #ESM #NodeJS #Compiler
总结:
TypeScript 6.0 是连接 5.9 与即将发布的 Go 语言重写版 7.0 的关键过渡版本,也是基于当前 JavaScript 代码库的最后一个主要版本。本次更新带来多项实用新特性,包括更智能的无
文章要点:
- 过渡版本定位**:TS 6.0 是基于 JS 代码库的最后一个版本,TS 7.0(Go 重写版)已接近完成,6.0 的改动主要为 7.0 铺路
- **类型推断更聪明**:不再把未使用 `this` 的方法语法函数视为上下文敏感函数,让属性顺序不影响类型推导,写代码更随心所欲
- **子路径导入更简洁**:终于支持 `#/*` 这种干净的别名写法,告别之前必须写 `#root/*` 的冗余,和打包工具里的 `@/` 习惯更接近了
- **全新内置类型**:Temporal API 正式入驻(处理日期时间更靠谱),Map 新增 `getOrInsert` 和 `getOrInsertComputed` 方法,告别繁琐的"有则取无则设"模式
- **配置默认值现代化**:`strict` 默认开启,`module` 默认 `esnext`,`target` 默认当前年份(es2025),新项目开箱即用更严格、更现代
- **性能优化相关**:`types` 默认改为空数组(需显式声明如 `["node"]`),`libReplacement` 默认关闭,构建速度有望提升 20-50%
- **大量废弃项需留意**:`target: es5`、`baseUrl`、`moduleResolution node`、AMD/UMD/SystemJS 模块、`outFile`、`module` 关键字声明命名空间等都将退出历史舞台,建议尽早迁移
- **迁移辅助工具**:提供 `--stableTypeOrdering` 标志帮助对比 6.0 与 7.0 的差异,`ts5to6` 工具可自动调整 `baseUrl` 和 `rootDir` 配置
**文章URL:
https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/
标签:#前端 #TypeScript #TS6 #TS7 #ESM #NodeJS #Compiler
总结:
TypeScript 6.0 是连接 5.9 与即将发布的 Go 语言重写版 7.0 的关键过渡版本,也是基于当前 JavaScript 代码库的最后一个主要版本。本次更新带来多项实用新特性,包括更智能的无
this 函数类型推断、支持 #/ 开头的子路径导入、内置 Temporal API 类型、Map 的 getOrInsert 方法等。同时,大量旧配置项被标记为废弃(如 target: es5`、`baseUrl`、AMD/UMD 模块等),`strict 和 module 等选项的默认值也更现代化。这些调整旨在帮助开发者提前适配 TypeScript 7.0 的全新架构。文章要点:
- 过渡版本定位**:TS 6.0 是基于 JS 代码库的最后一个版本,TS 7.0(Go 重写版)已接近完成,6.0 的改动主要为 7.0 铺路
- **类型推断更聪明**:不再把未使用 `this` 的方法语法函数视为上下文敏感函数,让属性顺序不影响类型推导,写代码更随心所欲
- **子路径导入更简洁**:终于支持 `#/*` 这种干净的别名写法,告别之前必须写 `#root/*` 的冗余,和打包工具里的 `@/` 习惯更接近了
- **全新内置类型**:Temporal API 正式入驻(处理日期时间更靠谱),Map 新增 `getOrInsert` 和 `getOrInsertComputed` 方法,告别繁琐的"有则取无则设"模式
- **配置默认值现代化**:`strict` 默认开启,`module` 默认 `esnext`,`target` 默认当前年份(es2025),新项目开箱即用更严格、更现代
- **性能优化相关**:`types` 默认改为空数组(需显式声明如 `["node"]`),`libReplacement` 默认关闭,构建速度有望提升 20-50%
- **大量废弃项需留意**:`target: es5`、`baseUrl`、`moduleResolution node`、AMD/UMD/SystemJS 模块、`outFile`、`module` 关键字声明命名空间等都将退出历史舞台,建议尽早迁移
- **迁移辅助工具**:提供 `--stableTypeOrdering` 标志帮助对比 6.0 与 7.0 的差异,`ts5to6` 工具可自动调整 `baseUrl` 和 `rootDir` 配置
**文章URL:
https://devblogs.microsoft.com/typescript/announcing-typescript-6-0/
《人生苦短,何必手写 API 类型:OpenAPI 驱动的 React 开发》
标签:#前端 #React #OpenAPI #TypeScript #Hey_API #MSW #Nanoquery #Contract_First
总结
本文是 Evil Martians 团队"契约优先"系列第三篇,介绍如何通过 OpenAPI 规范驱动 React 前端开发。核心思路是将 OpenAPI Spec 作为单一事实来源,利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式,配合 Nanostores 与 Nanoquery 实现类型安全的状态管理,并使用 MSW 在浏览器层面拦截网络请求进行模拟,实现前后端并行开发。当后端契约变更时,重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方,避免生产环境出现类型不匹配错误。
文章要点:
- **手写 API 类型的痛点**:类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现
- **Hey API 自动生成**:通过
- **Nanostores + Nanoquery 状态管理**:将 API 数据视为全局状态存储在组件外,支持缓存、自动重取、跨组件共享,避免传统 Hooks 的数据获取陷阱
- **MSW 网络层模拟**:在浏览器层面拦截真实 HTTP 请求返回模拟数据,支持随机延迟、分页、过滤、错误场景,实现不依赖后端的功能开发
- **完整实战示例**:包含酒店管理系统代码,展示表单验证、CRUD 操作、路由集成、环境配置切换等完整开发流程
- **契约优先工作流**:后端更新 Spec → 前端重新生成 → TypeScript 报错定位 → 修复代码,确保集成一次成功
文章URL:https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react
标签:#前端 #React #OpenAPI #TypeScript #Hey_API #MSW #Nanoquery #Contract_First
总结
本文是 Evil Martians 团队"契约优先"系列第三篇,介绍如何通过 OpenAPI 规范驱动 React 前端开发。核心思路是将 OpenAPI Spec 作为单一事实来源,利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式,配合 Nanostores 与 Nanoquery 实现类型安全的状态管理,并使用 MSW 在浏览器层面拦截网络请求进行模拟,实现前后端并行开发。当后端契约变更时,重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方,避免生产环境出现类型不匹配错误。
文章要点:
- **手写 API 类型的痛点**:类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现
- **Hey API 自动生成**:通过
openapi-ts 从 OpenAPI Spec 生成 TypeScript 类型、SDK 函数、Zod 验证模式和客户端配置,实现编译时与运行时双重安全- **Nanostores + Nanoquery 状态管理**:将 API 数据视为全局状态存储在组件外,支持缓存、自动重取、跨组件共享,避免传统 Hooks 的数据获取陷阱
- **MSW 网络层模拟**:在浏览器层面拦截真实 HTTP 请求返回模拟数据,支持随机延迟、分页、过滤、错误场景,实现不依赖后端的功能开发
- **完整实战示例**:包含酒店管理系统代码,展示表单验证、CRUD 操作、路由集成、环境配置切换等完整开发流程
- **契约优先工作流**:后端更新 Spec → 前端重新生成 → TypeScript 报错定位 → 修复代码,确保集成一次成功
文章URL:https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react
TypeScript 泛型趣味实践
标签:#TypeScript #泛型 #函数重载 #TanStack #条件类型
文章深入探讨了如何利用 TypeScript 泛型、条件类型和函数重载,为 TanStack Start 的 Server Function 构建一个完全类型安全的查询选项封装函数。通过一个真实的场景——确保带参数和不带参数的 Server Function 都能被正确推断返回类型和参数类型——展示了从基础泛型约束到复杂类型体操的完整实现路径,最终解决了可选参数与类型推断的冲突问题。
文章要点:
- 通过为 TanStack Start 的 Server Function 封装
- 初始方案使用泛型约束
- 利用条件类型
- 通过 TypeScript 函数重载(Overloading)定义两个签名:一个用于带参数的 Server Function,一个用于无参函数,从而精确控制参数的可选性
- 展示了泛型、条件类型与函数重载结合使用的高级技巧,实现编译时严格的类型检查和完美的类型推断
链接:https://frontendmasters.com/blog/fun-with-typescript-generics/
标签:#TypeScript #泛型 #函数重载 #TanStack #条件类型
文章深入探讨了如何利用 TypeScript 泛型、条件类型和函数重载,为 TanStack Start 的 Server Function 构建一个完全类型安全的查询选项封装函数。通过一个真实的场景——确保带参数和不带参数的 Server Function 都能被正确推断返回类型和参数类型——展示了从基础泛型约束到复杂类型体操的完整实现路径,最终解决了可选参数与类型推断的冲突问题。
文章要点:
- 通过为 TanStack Start 的 Server Function 封装
refetchedQueryOptions 工具函数,解决查询数据返回类型为 any 的类型安全问题- 初始方案使用泛型约束
<T extends (arg: { data: any }) => Promise<any>> 提取参数和返回类型,但无法处理无参函数的可选参数场景- 利用条件类型
infer 关键字创建类型工具 ServerFnArgs 来提取函数参数类型,并判断函数是否有参数- 通过 TypeScript 函数重载(Overloading)定义两个签名:一个用于带参数的 Server Function,一个用于无参函数,从而精确控制参数的可选性
- 展示了泛型、条件类型与函数重载结合使用的高级技巧,实现编译时严格的类型检查和完美的类型推断
链接:https://frontendmasters.com/blog/fun-with-typescript-generics/
#React 学习如何使用 React Three Fiber 创建一个简化版的移动游戏《跳跳路》的克隆版。#ReactThreeFiber #Threejs #JavaScript #TypeScript
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road