0.8.0 • Published 2d ago

@rue-js/swc-plugin-rue

Licence

MIT

Version

0.8.0

Deps

Size

5.3 MB

Vulns

Weekly

662

Summary Dependency Versions

后悔药 Rue.js

Rue.js（发音 /ruː/，中文名后悔药.js）是一个面向 JSX/TSX 的轻量前端框架，追求简单直观的开发体验，同时提供默认 Block / Vapor 渲染路径、路由、基于 Rust / WebAssembly 的运行时扩展，以及 Rust 实现的响应式系统与原生 DOM 编译能力。

它适合希望保留 React 风格 JSX 开发方式，同时获得 Vue 式响应式 API 与更贴近真实 DOM 更新模型的项目。

特性

轻量、直观的 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.ts
import { 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')) },
  ],
})

文档

仓库中也包含可直接运行的文档站与示例页面，位于 app 和 app/pages 下。

Packages

这是一个基于 pnpm workspace 的 monorepo，主要包包括：

@rue-js/rue：框架核心与 JSX 入口
@rue-js/router：官方路由
@rue-js/runtime-vapor：Rust / WebAssembly 运行时实现
@rue-js/design：设计系统与组件库
@rue-js/vite-plugin-rue：Vite 集成
@rue-js/swc-plugin-rue：SWC JSX 转换插件
@rue-js/jsx-runtime / @rue-js/jsx-dev-runtime：JSX 运行时入口

本地开发

本仓库使用 pnpm 管理依赖。

make dev
pnpm install
pnpm run app-dev
pnpm run app-build
pnpm run app-preview
pnpm run dev

常用命令：

pnpm run build
pnpm run test
pnpm run check
pnpm run release-check

如果你在开发 runtime-vapor，还可以进入对应包执行 Rust / Wasm 相关命令：

cd packages/runtime-vapor
npm test

贡献

欢迎通过 Issue 和 Pull Request 参与 Rue 的开发。提交改动前，建议至少运行以下检查：

pnpm run check
pnpm run test

如果改动涉及构建、发布或 Wasm 运行时，请补充对应包级验证。

许可证

MIT

Keywords

@rue-js/swc-plugin-rue jsx swc swc-plugin