07-Migration Guide: Hikari to Tairitsu

Overview

This guide documents the migration of Hikari's core infrastructure to the Tairitsu build chain. It covers the completed phases and provides technical details for each migration.

Table of Contents

Phase 2: CSS Infrastructure Migration

Status: Completed

Objectives

Migrate CSS infrastructure from internal implementation to tairitsu-style, a shared utility library.

Completed Work

1. StyleStringBuilder and CssProperty Migration

Before:

rust
1
2
3
4
5
6
7
// packages/animation/src/properties.rs
pub enum CssProperty {
    Display,
    Width,
    Height,
    // ... ~50 properties manually defined
}

After:

rust
1
2
3
4
5
// packages/animation/src/style/mod.rs
// Re-export from tairitsu_style
pub use tairitsu_style::{StyleStringBuilder, CssProperty, Property};

// Now provides 403 W3C standard properties

Migration Steps:

  1. 1
    Added tairitsu-style dependency to hikari-animation:
toml
1
2
3
   # packages/animation/Cargo.toml
   [dependencies]
   tairitsu-style = { path = "../../../tairitsu/packages/style" }
  1. 1
    Updated hikari-animation/src/style/mod.rs:
rust
1
2
3
   pub use tairitsu_style::{StyleStringBuilder, CssProperty, Property};

   // Keep StyleBuilder (HtmlElement version) for web-sys integration
  1. 1
    Deleted packages/animation/src/properties.rs (635 lines removed)
  1. 1
    Updated all imports across the codebase:
rust
1
2
3
4
5
   // Before
   use hikari_animation::style::CssProperty;

   // After (automatic due to re-export)
   use hikari_animation::style::CssProperty;

Benefits

Phase 3: Props Macro Migration

Status: Completed

Objectives

Migrate all component Props from the old #[derive(Clone, PartialEq, Props)] to the new #[define_props] macro.

Migration Pattern

Before:

rust
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#[derive(Clone, PartialEq, Props)]
pub struct ButtonProps {
    #[props(default)]
    pub variant: ButtonVariant,

    pub onclick: Option<EventHandler<MouseEvent>>,

    #[props(default)]
    pub disabled: bool,
}

impl Default for ButtonProps {
    fn default() -> Self {
        Self {
            variant: ButtonVariant::Primary,
            onclick: None,
            disabled: false,
        }
    }
}

After:

rust
1
2
3
4
5
6
7
8
9
10
11
12
#[define_props]
pub struct ButtonProps {
    #[default(ButtonVariant::Primary)]
    pub variant: ButtonVariant,

    pub onclick: Option<EventHandler<MouseEvent>>,

    #[default(false)]
    pub disabled: bool,
}

// Default implementation auto-generated by #[define_props]

Key Changes

  1. 1
    Macro Change: #[derive(Clone, PartialEq, Props)] → #[define_props]
  2. 2
    Attribute Change: #[props(default)] → #[default(...)]
  3. 3
    Remove Manual Default: Delete impl Default for ... blocks
  4. 4
    Explicit Values: Provide concrete default values for all fields

Migration Rules

TypeDefault ValueExample
StringString::default() or "".to_string()#[default(String::default())]
boolfalse or true#[default(false)]
u32/i32/i640 or other number#[default(0)] or #[default(10)]
Vec<T>Vec::new() or vec![]#[default(Vec::new())]
ElementVNode::empty()#[default(VNode::empty())]
Option<T>No default needed (impls Default)-
Enum (with Default)No default needed-
EventHandler`EventHandler::new(\_ {} )``#[default(EventHandler::new(\_ {}))]`

Completed Migrations

Basic Components

Layout Components

Feedback Components

Navigation Components

Display Components

Entry Components

Data Components

Production Components

Icon Components

Benefits

Architecture Decisions

ClassesBuilder and UtilityClass Retention

Decision: ClassesBuilder and UtilityClass trait remain in hikari-palette.

Reasons:

  1. 1
    Different Purposes:
  1. 1
    API Incompatibility:
  1. 1
    Component Coupling:

Architecture:

mermaid

Migration Results

Code Metrics

MetricBeforeAfterChange
CSS Properties~50403+706%
Properties Code Lines6350-100%
Components Migrated047-
Manual Default Impls470-100%

Compilation Status

Test Updates

Pagination Test Fix:

Modified tests to use individual field assertions instead of whole-struct assertions:

rust
1
2
3
4
5
6
7
// Before
assert_eq!(props1, props2);

// After
assert!(props1.current == props2.current);
assert!(props1.page_size == props2.page_size);
// ... etc

This avoids requiring the Debug trait on Props generated by #[define_props].

Future Work

Phase 4: Documentation Updates

Translation

All documentation updates should be translated to all supported languages:

Conclusion

The migration to Tairitsu build chain has been successfully completed for:

  1. 1
    Phase 2: CSS Infrastructure - 403 W3C CSS properties integrated
  2. 2
    Phase 3: Props Macro - All 47 components migrated to #[define_props]

All code compiles, tests pass, and the codebase is ready for the next phase of development.