后悔药 Rue.js 玩了都年前端，捣鼓了很长一段时间的项目，好玩。 Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。 它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。 相关链接 https://github.com/hunzhiwange/ruejs https://ruejs.huododo.com/ 特性 轻量、直观的 API ，适合渐进式接入 默认 Block / Vapor 渲染路径，围绕真实 DOM 做最小更新 JSX / TSX 一等支持，无需额外模板语法 类似 Vue 的响应式 API ，支持 ref 、 reactive 、 computed 提供基于 Rust / WebAssembly 的运行时，可扩展 Vapor 渲染能力 提供 Rust 实现的响应式系统，覆盖信号、依赖追踪与调度能力 提供 Rust / Wasm 原生 DOM 编译器，将 JSX 转换为更贴近真实 DOM 的产物 官方路由、设计组件库与构建插件协同工作 提供 @rue-js/runtime-vapor 与 @rue-js/swc-plugin-rue Rust 侧核心能力 快速开始 Rue 提供官方脚手架，也支持接入现有 Vite 项目。 创建新项目 前置条件：Node.js >= 22.12.0 pnpm create rue@latest npm create rue@latest bun create rue@latest yarn dlx create-rue@latest 进入项目后安装依赖并启动开发服务器： cd your-project-name pnpm install pnpm run dev 接入现有项目 pnpm add @rue-js/rue @rue-js/router 在 Vite 配置中启用 Rue 的 JSX： // vite.config.tsimport { defineConfig } from 'vite' export default defineConfig({esbuild: { jsxImportSource: '@rue-js/rue' },}) 示例 下面是一个最小 Rue 应用示例： import { type FC, ref, useApp, useError } from '@rue-js/rue' const Counter: FC = () => {const count = ref(0) return <button onClick={() => count.value++}>点击次数：{count.value}</button>} useError({ overlay: true, console: true })useApp(Counter).mount('#app') 如果你需要页面级路由，可以继续接入 @rue-js/router ： import { useComponent } from '@rue-js/rue'import { createRouter } from '@rue-js/router' export default createRouter({history: 'hash',routes: [ { path: '/', component: useComponent(() => import('./pages/Home')) }, { path: '/about', component: useComponent(() => import('./pages/About')) },],})
后悔药 Rue.js 玩了都年前端，捣鼓了很长一段时间的项目，好玩。 Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。 它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。 相关链接 https://github.com/hunzhiwange/ruejs https://ruejs.huododo.com/ 特性 轻量、直观的 API ，适合渐进式接入 默认 Block / Vapor 渲染路径，围绕真实 DOM 做最小更新 JSX / TSX 一等支持，无需额外模板语法 类似 Vue 的响应式 API ，支持 ref 、 reactive 、 computed 提供基于 Rust / WebAssembly 的运行时，可扩展 Vapor 渲染能力 提供 Rust 实现的响应式系统，覆盖信号、依赖追踪与调度能力 提供 Rust / Wasm 原生 DOM 编译器，将 JSX 转换为更贴近真实 DOM 的产物 官方路由、设计组件库与构建插件协同工作 提供 @rue-js/runtime-vapor 与 @rue-js/swc-plugin-rue Rust 侧核心能力 快速开始 Rue 提供官方脚手架，也支持接入现有 Vite 项目。 创建新项目 前置条件：Node.js >= 22.12.0 pnpm create rue@latest npm create rue@latest bun create rue@latest yarn dlx create-rue@latest 进入项目后安装依赖并启动开发服务器： cd your-project-name pnpm install pnpm run dev 接入现有项目 pnpm add @rue-js/rue @rue-js/router 在 Vite 配置中启用 Rue 的 JSX： // vite.config.tsimport { defineConfig } from 'vite' export default defineConfig({esbuild: { jsxImportSource: '@rue-js/rue' },}) 示例 下面是一个最小 Rue 应用示例： import { type FC, ref, useApp, useError } from '@rue-js/rue' const Counter: FC = () => {const count = ref(0) return <button onClick={() => count.value++}>点击次数：{count.value}</button>} useError({ overlay: true, console: true })useApp(Counter).mount('#app') 如果你需要页面级路由，可以继续接入 @rue-js/router ： import { useComponent } from '@rue-js/rue'import { createRouter } from '@rue-js/router' export default createRouter({history: 'hash',routes: [ { path: '/', component: useComponent(() => import('./pages/Home')) }, { path: '/about', component: useComponent(() => import('./pages/About')) },],})
后悔药 Rue.js 玩了都年前端，捣鼓了很长一段时间的项目，好玩。 Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。 它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。 相关链接 https://github.com/hunzhiwange/ruejs https://ruejs.huododo.com/ 特性 轻量、直观的 API ，适合渐进式接入 默认 Block / Vapor 渲染路径，围绕真实 DOM 做最小更新 JSX / TSX 一等支持，无需额外模板语法 类似 Vue 的响应式 API ，支持 ref 、 reactive 、 computed 提供基于 Rust / WebAssembly 的运行时，可扩展 Vapor 渲染能力 提供 Rust 实现的响应式系统，覆盖信号、依赖追踪与调度能力 提供 Rust / Wasm 原生 DOM 编译器，将 JSX 转换为更贴近真实 DOM 的产物 官方路由、设计组件库与构建插件协同工作 提供 @rue-js/runtime-vapor 与 @rue-js/swc-plugin-rue Rust 侧核心能力 快速开始 Rue 提供官方脚手架，也支持接入现有 Vite 项目。 创建新项目 前置条件：Node.js >= 22.12.0 pnpm create rue@latest npm create rue@latest bun create rue@latest yarn dlx create-rue@latest 进入项目后安装依赖并启动开发服务器： cd your-project-name pnpm install pnpm run dev 接入现有项目 pnpm add @rue-js/rue @rue-js/router 在 Vite 配置中启用 Rue 的 JSX： // vite.config.tsimport { defineConfig } from 'vite' export default defineConfig({esbuild: { jsxImportSource: '@rue-js/rue' },}) 示例 下面是一个最小 Rue 应用示例： import { type FC, ref, useApp, useError } from '@rue-js/rue' const Counter: FC = () => {const count = ref(0) return <button onClick={() => count.value++}>点击次数：{count.value}</button>} useError({ overlay: true, console: true })useApp(Counter).mount('#app') 如果你需要页面级路由，可以继续接入 @rue-js/router ： import { useComponent } from '@rue-js/rue'import { createRouter } from '@rue-js/router' export default createRouter({history: 'hash',routes: [ { path: '/', component: useComponent(() => import('./pages/Home')) }, { path: '/about', component: useComponent(() => import('./pages/About')) },],})
后悔药 Rue.js 玩了都年前端，捣鼓了很长一段时间的项目，好玩。 Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。 它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。 相关链接 https://github.com/hunzhiwange/ruejs https://ruejs.huododo.com/ 特性 轻量、直观的 API ，适合渐进式接入 默认 Block / Vapor 渲染路径，围绕真实 DOM 做最小更新 JSX / TSX 一等支持，无需额外模板语法 类似 Vue 的响应式 API ，支持 ref 、 reactive 、 computed 提供基于 Rust / WebAssembly 的运行时，可扩展 Vapor 渲染能力 提供 Rust 实现的响应式系统，覆盖信号、依赖追踪与调度能力 提供 Rust / Wasm 原生 DOM 编译器，将 JSX 转换为更贴近真实 DOM 的产物 官方路由、设计组件库与构建插件协同工作 提供 @rue-js/runtime-vapor 与 @rue-js/swc-plugin-rue Rust 侧核心能力 快速开始 Rue 提供官方脚手架，也支持接入现有 Vite 项目。 创建新项目 前置条件：Node.js >= 22.12.0 pnpm create rue@latest npm create rue@latest bun create rue@latest yarn dlx create-rue@latest 进入项目后安装依赖并启动开发服务器： cd your-project-name pnpm install pnpm run dev 接入现有项目 pnpm add @rue-js/rue @rue-js/router 在 Vite 配置中启用 Rue 的 JSX： // vite.config.tsimport { defineConfig } from 'vite' export default defineConfig({esbuild: { jsxImportSource: '@rue-js/rue' },}) 示例 下面是一个最小 Rue 应用示例： import { type FC, ref, useApp, useError } from '@rue-js/rue' const Counter: FC = () => {const count = ref(0) return <button onClick={() => count.value++}>点击次数：{count.value}</button>} useError({ overlay: true, console: true })useApp(Counter).mount('#app') 如果你需要页面级路由，可以继续接入 @rue-js/router ： import { useComponent } from '@rue-js/rue'import { createRouter } from '@rue-js/router' export default createRouter({history: 'hash',routes: [ { path: '/', component: useComponent(() => import('./pages/Home')) }, { path: '/about', component: useComponent(() => import('./pages/About')) },],})
后悔药 Rue.js 玩了都年前端，捣鼓了很长一段时间的项目，好玩。 Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。 它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。 相关链接 https://github.com/hunzhiwange/ruejs https://ruejs.huododo.com/ 特性 轻量、直观的 API ，适合渐进式接入 默认 Block / Vapor 渲染路径，围绕真实 DOM 做最小更新 JSX / TSX 一等支持，无需额外模板语法 类似 Vue 的响应式 API ，支持 ref 、 reactive 、 computed 提供基于 Rust / WebAssembly 的运行时，可扩展 Vapor 渲染能力 提供 Rust 实现的响应式系统，覆盖信号、依赖追踪与调度能力 提供 Rust / Wasm 原生 DOM 编译器，将 JSX 转换为更贴近真实 DOM 的产物 官方路由、设计组件库与构建插件协同工作 提供 @rue-js/runtime-vapor 与 @rue-js/swc-plugin-rue Rust 侧核心能力 快速开始 Rue 提供官方脚手架，也支持接入现有 Vite 项目。 创建新项目 前置条件：Node.js >= 22.12.0 pnpm create rue@latest npm create rue@latest bun create rue@latest yarn dlx create-rue@latest 进入项目后安装依赖并启动开发服务器： cd your-project-name pnpm install pnpm run dev 接入现有项目 pnpm add @rue-js/rue @rue-js/router 在 Vite 配置中启用 Rue 的 JSX： // vite.config.tsimport { defineConfig } from 'vite' export default defineConfig({esbuild: { jsxImportSource: '@rue-js/rue' },}) 示例 下面是一个最小 Rue 应用示例： import { type FC, ref, useApp, useError } from '@rue-js/rue' const Counter: FC = () => {const count = ref(0) return <button onClick={() => count.value++}>点击次数：{count.value}</button>} useError({ overlay: true, console: true })useApp(Counter).mount('#app') 如果你需要页面级路由，可以继续接入 @rue-js/router ： import { useComponent } from '@rue-js/rue'import { createRouter } from '@rue-js/router' export default createRouter({history: 'hash',routes: [ { path: '/', component: useComponent(() => import('./pages/Home')) }, { path: '/about', component: useComponent(() => import('./pages/About')) },],})
后悔药 Rue.js 玩了都年前端，捣鼓了很长一段时间的项目，好玩。 Rue.js （发音 /ruː/，中文名后悔药.js ）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。 它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。 相关链接 https://github.com/hunzhiwange/ruejs https://ruejs.huododo.com/ 特性 轻量、直观的 API ，适合渐进式接入 默认 Block / Vapor 渲染路径，围绕真实 DOM 做最小更新 JSX / TSX 一等支持，无需额外模板语法 类似 Vue 的响应式 API ，支持 ref 、 reactive 、 computed 提供基于 Rust / WebAssembly 的运行时，可扩展 Vapor 渲染能力 提供 Rust 实现的响应式系统，覆盖信号、依赖追踪与调度能力 提供 Rust / Wasm 原生 DOM 编译器，将 JSX 转换为更贴近真实 DOM 的产物 官方路由、设计组件库与构建插件协同工作 提供 @rue-js/runtime-vapor 与 @rue-js/swc-plugin-rue Rust 侧核心能力 快速开始 Rue 提供官方脚手架，也支持接入现有 Vite 项目。 创建新项目 前置条件：Node.js >= 22.12.0 pnpm create rue@latest npm create rue@latest bun create rue@latest yarn dlx create-rue@latest 进入项目后安装依赖并启动开发服务器： cd your-project-name pnpm install pnpm run dev 接入现有项目 pnpm add @rue-js/rue @rue-js/router 在 Vite 配置中启用 Rue 的 JSX： // vite.config.tsimport { defineConfig } from 'vite' export default defineConfig({esbuild: { jsxImportSource: '@rue-js/rue' },}) 示例 下面是一个最小 Rue 应用示例： import { type FC, ref, useApp, useError } from '@rue-js/rue' const Counter: FC = () => {const count = ref(0) return <button onClick={() => count.value++}>点击次数：{count.value}</button>} useError({ overlay: true, console: true })useApp(Counter).mount('#app') 如果你需要页面级路由，可以继续接入 @rue-js/router ： import { useComponent } from '@rue-js/rue'import { createRouter } from '@rue-js/router' export default createRouter({history: 'hash',routes: [ { path: '/', component: useComponent(() => import('./pages/Home')) }, { path: '/about', component: useComponent(() => import('./pages/About')) },],})
最近在做一个终端 UI 的 flex 布局引擎,叫 Pilates 。纯 TypeScript,零运行时依赖,跟 Ink 用的 WASM Yoga(Facebook 的 flex 引擎,C++ 编译成 WASM)对照过 33 个 oracle fixture 加一个结构化 fuzzer 。 本周发的 2.0 想分享一下:在我跑的 9 个基准场景里,纯 TS 引擎都比 WASM Yoga 快。包括 hot-structural(每帧 append + remove 一行),这个场景一周前 Yoga 还领先 5×,现在反过来 Pilates 快 1.7×。 中位延迟,win32-x64,Node 22: 场景 Pilates Yoga 比率 tiny (10 节点) 4.5µs 19.0µs 4.2× realistic (~100) 121µs 328µs 2.7× stress (~1000) 601µs 1.94ms 3.2× big (~5000) 3.32ms 9.17ms 2.8× huge (~10000) 8.62ms 18.5ms 2.1× hot-relayout 16.3µs 83.0µs 5.1× hot-relayout + boundaries 15.8µs 77.8µs 4.9× hot-relayout (文本变更) 8.9µs 90.6µs 10× hot-structural 71.3µs 118.3µs 1.7× 提前说一下:9 个场景是我自己挑的,不能代表所有 workload 。复现 pnpm bench ,5 分钟。 这周做的两件事让 hot-structural 从 ~450µs 降到 ~70µs: flex 分配规则之前每个 cell 都依赖前面所有兄弟的尺寸,一行 100 cell 就有 ~300 条依赖边。改成线性递推,每个 cell 只读前一个 cell 的位置和尺寸。 大概一半的 grammar input field 永远停留在默认值上(margin 0, minWidth 0 那种)。在 grammar 构建期把它们 fold 成常量,每个 cell 的字段数从 ~15 降到 ~7 。 公开 API 跟 1.x 字节级一致,calculateLayout() 没变,升级就有提速。 仓库(MIT): https://github.com/pilatesjs/pilates npm: https://www.npmjs.com/package/@pilates/core 欢迎对抗性 benchmark,如果有 workload 是这个方案破解不了的,我很想看看。
https://blog.cloudflare.com/artifacts-git-for-agents-beta/ entire git protocol engine is written in pure Zig (no libc), compiled to a ~100KB WASM binary. Support for both v1 and v2 of the git protocol. support capabilities including ls-refs, shallow clones (deepen, deepen-since, deepen-relative), and incremental fetch with have/want negotiation. 有人知道这玩意开源不？不开源能扒出来别的地方用不？
https://blog.cloudflare.com/artifacts-git-for-agents-beta/ entire git protocol engine is written in pure Zig (no libc), compiled to a ~100KB WASM binary. Support for both v1 and v2 of the git protocol. support capabilities including ls-refs, shallow clones (deepen, deepen-since, deepen-relative), and incremental fetch with have/want negotiation. 有人知道这玩意开源不？不开源能扒出来别的地方用不？
https://blog.cloudflare.com/artifacts-git-for-agents-beta/ entire git protocol engine is written in pure Zig (no libc), compiled to a ~100KB WASM binary. Support for both v1 and v2 of the git protocol. support capabilities including ls-refs, shallow clones (deepen, deepen-since, deepen-relative), and incremental fetch with have/want negotiation. 有人知道这玩意开源不？不开源能扒出来别的地方用不？
https://blog.cloudflare.com/artifacts-git-for-agents-beta/ entire git protocol engine is written in pure Zig (no libc), compiled to a ~100KB WASM binary. Support for both v1 and v2 of the git protocol. support capabilities including ls-refs, shallow clones (deepen, deepen-since, deepen-relative), and incremental fetch with have/want negotiation. 有人知道这玩意开源不？不开源能扒出来别的地方用不？
https://blog.cloudflare.com/artifacts-git-for-agents-beta/ entire git protocol engine is written in pure Zig (no libc), compiled to a ~100KB WASM binary. Support for both v1 and v2 of the git protocol. support capabilities including ls-refs, shallow clones (deepen, deepen-since, deepen-relative), and incremental fetch with have/want negotiation. 有人知道这玩意开源不？不开源能扒出来别的地方用不？
之前用的WASMER也被封了，现在就CF抽风用用，每次下载稍大的文件就挂，还有免费自助的容器或vps可以申请的么？请问各位大佬 6 个帖子 - 4 位参与者 阅读完整话题