# loomX

**Repository Path**: pauljoihn21/loom-x

## Basic Information

- **Project Name**: loomX
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-04
- **Last Updated**: 2026-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# loomX

Pure Rust Web UI framework — a streamlined fork of [Dioxus](https://dioxuslabs.com) 0.7, focused on Web and WeChat Mini Program.

## Why loomX?

Dioxus 0.7 is a powerful framework, but it carries significant complexity from its full-stack ambitions: CLI tooling, WASM splitting, SSR, subsecond hot-reload, and 80+ external dependencies. loomX strips away everything except the core virtual DOM, signals, and Web renderer — resulting in a lean, maintainable framework with **~30 dependencies** instead of 80+.

### Key differences from Dioxus 0.7

| Aspect | Dioxus 0.7 | loomX |
|--------|-----------|-------|
| Target platforms | Web, Desktop, Mobile, Fullstack, SSR | Web + WeChat Mini Program |
| Dependencies | 80+ | ~30 |
| Macro crates | 5 separate crates | 1 unified `loomx-macros` |
| Build tool | Custom CLI (`dx`) | `trunk` (standard Rust WASM tooling) |
| Hot reload | Subsecond (custom) | trunk file watching |
| Edition | 2021 | 2024 |
| `darling` | External dependency | Source integrated |
| `typed-builder` | Vendored (1679 lines) | Generated by `#[component]` macro |
| SCSS support | None | Built-in via `loomx-css` |
| Mini Program | None | Built-in via `loomx-miniapp` |

## 完整示例

### Web 示例：带路由和状态管理的仪表盘

`examples/` 目录下包含完整示例。运行方式：

```bash
# 构建并运行
cd examples/web-dashboard
trunk serve
```

**文件结构：**
```
web-dashboard/
├── Cargo.toml
├── index.html
└── src/
    ├── main.rs          # 入口 + Router
    ├── route.rs         # #[derive(Routable)]
    ├── store.rs         # #[derive(Store)]
    ├── api.rs           # use_resource 异步数据
    ├── components/      # 侧边栏、卡片、图表、表格
    ├── pages/           # Overview, Analytics, Settings
    └── style.rs         # #[style] + scss!
```

**核心特性：**
- `#[derive(Routable)]` — 多页面路由（/、/analytics、/settings）
- `#[derive(Store)]` — 全局状态共享（暗色模式、数据周期）
- `use_signal` / `use_memo` — 响应式状态
- `use_resource` — 异步 API 请求（模拟延迟 + 加载状态）
- `#[style]` + `scss!` — SCSS 样式编译
- 条件渲染、列表渲染

### 微信小程序示例：天气查询

```bash
cd examples/miniapp-weather
# 生成的 WXML 模板会被自动注册
```

**文件结构：**
```
miniapp-weather/
├── Cargo.toml
└── src/
    ├── main.rs
    ├── store.rs         # 城市列表状态
    ├── api.rs           # 天气 API（异步）
    └── pages/           #[miniapp] Home, Detail, About
```

**核心特性：**
- `#[miniapp]` — WXML 自动生成（rsx → WXML）
- 标签映射：div→view, span→text, img→image
- 事件映射：onclick→bindtap, oninput→bindinput
- `use_signal` — 城市选择响应式状态
- `use_resource` — 异步天气数据请求

### Web Application

```toml
[dependencies]
loomx = { version = "0.1", features = ["web"] }
```

```rust
use loomx::prelude::*;

fn main() {
    loomx::web::launch(App);
}

#[component]
fn App() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        div {
            h1 { "loomX Counter" }
            button {
                onclick: move |_| count += 1,
                "Click: {count}"
            }
        }
    }
}
```

### With Styling (Web)

```toml
[dependencies]
loomx = { version = "0.1", features = ["web", "style"] }
```

`#[style]` supports two macros: `css!` for plain CSS and `scss!` for SCSS
(variables, nesting, mixins). Class names become scoped bindings in scope.

```rust
use loomx::prelude::*;

#[style]
#[component]
fn App() -> Element {
    let mut count = use_signal(|| 0);

    scss! {
        $primary: #007bff;

        .counter {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            background: $primary;
            color: white;
        }
    }

    // counter, btn are in scope as &'static str
    rsx! {
        div { class: counter,
            button { class: btn, onclick: move |_| count += 1, "Count: {count}" }
        }
    }
}
```

Use `css!` for plain CSS (no SCSS features):

```rust,ignore
#[style]
#[component]
fn App() -> Element {
    css! {
        .counter { display: flex; }
        .btn { background: #007bff; color: white; }
    }
    rsx! { /* counter, btn are in scope */ }
}
```

### WeChat Mini Program

```toml
[dependencies]
loomx = { version = "0.1", features = ["miniapp"] }
```

`#[miniapp]` compiles `scss!` blocks to WXSS and generates WXML from `rsx!`
at compile time. Miniapp only supports `scss!` (not `css!`).

```rust
use loomx::prelude::*;

#[miniapp]
fn CounterPage() -> Element {
    let mut count = use_signal(|| 0);

    scss! {
        .container { padding: 20rpx; }
        .btn { background: #07c160; color: white; }
    }

    // container, btn are in scope as &'static str
    rsx! {
        div { class: container,
            button { class: btn, onclick: move |_| count += 1, "Tap: {count}" }
        }
    }
}
```
```

The `#[miniapp]` macro automatically:
- Converts HTML tags to WXML tags (`div` → `view`, `span` → `text`)
- Maps event handlers (`onclick` → `bindtap`)
- Generates WXML templates at compile time

## Feature Flags

| Feature | Description |
|---------|-------------|
| `web` | Web platform renderer (wasm-bindgen + web-sys) |
| `style` | SCSS/CSS compilation via `loomx-css` |
| `miniapp` | WeChat Mini Program renderer via `loomx-miniapp` |
| `router` | Client-side routing |
| `signals` | Reactive signals and stores |
| `hooks` | Standard hooks (`use_signal`, `use_effect`, etc.) |
| `html` | HTML element definitions |
| `document` | Document/head management |
| `logger` | WASM logging via `tracing-wasm` |
| `macro` | `#[component]`, `rsx!`, `#[derive(Props)]` macros |

Default features: `["launch", "logger", "lib"]`

## Architecture

```
loomx (umbrella crate)
├── loomx-core          — Virtual DOM, runtime, scopes, events
├── loomx-core-types    — Type definitions (no internal deps)
├── loomx-rsx           — RSX parser (AST)
├── loomx-macro-shared  — Shared diagnostic utilities
├── loomx-macros        — Unified proc-macros (component, rsx, store, router, html, style, miniapp)
├── loomx-signals       — Reactive signals
├── loomx-stores        — Global state stores
├── loomx-hooks         — Standard hooks
├── loomx-html          — HTML element & event definitions
├── loomx-interpreter   — Mutation interpreter (JS bindings)
├── loomx-web           — Web platform renderer
├── loomx-history       — History management
├── loomx-document      — Document/head management
├── loomx-router        — Client-side routing
├── loomx-logger        — WASM logging
├── loomx-css           — Pure Rust SCSS compiler (178 tests)
├── loomx-miniapp       — WeChat Mini Program renderer
├── darling             — Attribute parsing (source integrated)
└── lazy-js-bundle      — Build-time JS code generation
```

## Building

### Prerequisites

- Rust 1.97.0+ (Edition 2024)
- `wasm32-unknown-unknown` target: `rustup target add wasm32-unknown-unknown`
- [trunk](https://trunkrs.dev/): `cargo install trunk`

### Build

```bash
# Check compilation
cargo check --workspace

# Run tests
cargo test --workspace --lib

# Build for web
trunk build

# Serve for development
trunk serve
```

## Relationship to Dioxus

loomX is a fork of Dioxus 0.7. We are grateful to the Dioxus team for their excellent work. loomX differs by:

1. **Removing full-stack/server/SSR/desktop/mobile targets** — Web only
2. **Consolidating macro crates** — 5 crates → 1 unified `loomx-macros`
3. **Integrating external dependencies** — `darling` and `lazy-js-bundle` are source-integrated
4. **Adding SCSS compilation** — Pure Rust SCSS compiler (`loomx-css`)
5. **Adding WeChat Mini Program support** — `#[miniapp]` macro + `loomx-miniapp` renderer
6. **Upgrading to Edition 2024** — All code updated for Rust 2024

## License

MIT