System Architecture Overview

The Hikari framework adopts a modular design, consisting of multiple independent packages, each responsible for specific functional domains.

Core Systems

1. Palette System (hikari-palette)

Rust implementation of the traditional Chinese color system.

Responsibilities:

Core Features:

rust
1
2
3
4
5
6
7
8
9
10
11
12
use hikari_palette::{Color, opacity};

// Use traditional colors
let red = Color::Cinnabar;
let blue = Color::Azurite;

// Opacity handling
let semi_red = opacity(red, 0.5);

// Theme system
let theme = Hikari::default();
println!("Primary: {}", theme.primary.hex());

Design Philosophy:

2. Theme System (hikari-theme)

Theme context and style injection system.

Responsibilities:

Core Features:

rust
1
2
3
4
5
6
7
8
use hikari_theme::ThemeProvider;

rsx! {
    ThemeProvider { initial_palette: "hikari" } {
        // Application content
        App {}
    }
}

Supported Themes:

3. Animation System (hikari-animation)

High-performance declarative animation system.

Responsibilities:

Core Features:

rust
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
use hikari_animation::{AnimationBuilder, AnimationContext};
use hikari_animation::style::CssProperty;

// Static animation
AnimationBuilder::new(&elements)
    .add_style("button", CssProperty::Opacity, "0.8")
    .apply_with_transition("300ms", "ease-in-out");

// Dynamic animation (mouse following)
AnimationBuilder::new(&elements)
    .add_style_dynamic("button", CssProperty::Transform, |ctx| {
        let x = ctx.mouse_x();
        let y = ctx.mouse_y();
        format!("translate({}px, {}px)", x, y)
    })
    .apply_with_transition("150ms", "ease-out");

Architecture Components:

Performance Features:

4. Icon System (hikari-icons)

Icon management and rendering system.

Responsibilities:

Core Features:

rust
1
2
3
4
5
6
7
8
9
use hikari_icons::{Icon, MdiIcon};

rsx! {
    Icon {
        icon: MdiIcon::Search,
        size: 24,
        color: "var(--hi-primary)"
    }
}

Icon Sources:

5. Component Library (hikari-components)

Complete UI component library.

Responsibilities:

Component Categories:

  1. 1
    Basic Components (feature: "basic")
  1. 1
    Feedback Components (feature: "feedback")
  1. 1
    Navigation Components (feature: "navigation")
  1. 1
    Layout Components (always available)
  1. 1
    Data Components (feature: "data")

Modular Design:

mermaid

Style System:

6. Icon Build System

Compile-time code generation and SCSS compilation.

Responsibilities:

Build Process:

mermaid

Usage:

rust
1
2
3
4
// build.rs
fn main() {
    tairitsu-icons build system::build().expect("Build failed");
}

Generated Files:

7. Render Service (tairitsu-packager)

Server-side rendering and static asset serving.

Responsibilities:

Core Features:

rust
1
2
3
4
5
6
7
use hikari_render_service::HikariRenderServicePlugin;

let app = HikariRenderServicePlugin::new()
    .component_style_registry(registry)
    .static_assets("./dist", "/static")
    .add_route("/api/health", get(health_check))
    .build()?;

Architecture Modules:

8. Extra Components Library (hikari-extra-components)

Advanced UI components for complex interaction scenarios.

Responsibilities:

Core Components:

  1. 1
    Collapsible - Collapsible panel
  1. 1
    DragLayer - Drag layer
  1. 1
    ZoomControls - Zoom controls

Core Features:

rust
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
use hikari_extra_components::{Collapsible, DragLayer, ZoomControls};

// Collapsible panel
Collapsible {
    title: "Settings".to_string(),
    expanded: true,
    position: CollapsiblePosition::Right,
    div { "Content" }
}

// Drag layer
DragLayer {
    initial_x: 100.0,
    initial_y: 100.0,
    constraints: DragConstraints {
        min_x: Some(0.0),
        max_x: Some(500.0),
        ..Default::default()
    },
    div { "Drag me" }
}

// Zoom controls
ZoomControls {
    zoom: 1.0,
    on_zoom_change: move |z| println!("Zoom: {}", z)
}

Architecture Principles

1. Modular Design

Each package is independent and can be used separately:

toml
1
2
3
4
5
6
7
8
9
10
11
12
# Use only palette
[dependencies]
hikari-palette = "0.1"

# Use components and theme
[dependencies]
hikari-components = "0.1"
hikari-theme = "0.1"

# Use animation system
[dependencies]
hikari-animation = "0.1"

2. Layered Architecture

mermaid

3. Unidirectional Data Flow

mermaid

4. Type Safety

All APIs are type-safe:

5. Performance First

Build Process

Development Mode

bash
1
cargo run

Production Build

bash
1
2
3
4
5
6
# 1. Build Rust code
cargo build --release

# 2. Build system automatically compiles SCSS
# 3. Generate CSS bundle
# 4. Bundle static assets

WASM Build

bash
1
trunk build --release

Dependencies

mermaid

Extensibility

Adding Custom Components

rust
1
2
3
4
5
6
7
8
9
use hikari_components::{StyledComponent, StyleRegistry};

pub struct MyComponent;

impl StyledComponent for MyComponent {
    fn register_styles(registry: &mut StyleRegistry) {
        registry.register("my-component", include_str!("my-component.scss"));
    }
}

Adding Custom Themes

rust
1
2
3
4
5
6
7
8
9
10
11
12
13
use hikari_palette::ThemePalette;

struct CustomTheme;

impl CustomTheme {
    pub fn palette() -> ThemePalette {
        ThemePalette {
            primary: "#FF0000",
            secondary: "#00FF00",
            // ...
        }
    }
}

Adding Custom Animation Presets

rust
1
2
3
4
5
6
7
8
9
10
11
12
use hikari_animation::{AnimationBuilder, AnimationContext};

pub fn fade_in(
    builder: AnimationBuilder,
    element: &str,
    duration: u32,
) -> AnimationBuilder {
    builder
        .add_style(element, CssProperty::Opacity, "0")
        .add_style(element, CssProperty::Opacity, "1")
        .apply_with_transition(&format!("{}ms", duration), "ease-out")
}

Performance Optimization

1. CSS Optimization

2. WASM Optimization

3. Runtime Optimization

4. Build Optimization

Testing Strategy

Unit Tests

Each module has complete unit tests:

rust
1
2
3
4
5
6
7
8
#[cfg(test)]
mod tests {
    #[test]
    fn test_color_conversion() {
        let color = Color::Cinnabar;
        assert_eq!(color.hex(), "#519A73");
    }
}

Integration Tests

Example applications in examples/ serve as integration tests

Visual Regression Testing

Use Percy or similar tools for UI snapshot testing

Next Steps