@clevertree/themed-styler

A high-performance styling engine for Relay that supports dynamic theme switching and consistent rendering across Web and Native platforms.

Vision

As part of the Relay project vision, we believe that design systems should be platform-agnostic and runtime-efficient. @clevertree/themed-styler allows developers to define themes once in YAML or JSON and have them applied consistently across Web (generating CSS) and React Native (generating StyleSheets).

By offloading the style computation to a shared Rust core, we achieve:

1. Consistency: Exact same styling logic on all platforms.
2. Performance: Minimal overhead for style resolution, especially critical for complex themes in React Native.
3. Dynamic Themes: Real-time theme switching without full re-renders or CSS flashes.

Usage

Web (WASM)

Initializes the WASM module and sets up global hooks for the shared style manager.

import { initThemedStyler } from '@clevertree/themed-styler';

async function startApp() {
  await initThemedStyler();
  // StyleManager in @clevertree/client-shared will now use the WASM core
}

React Native

Provides themed versions of standard components and a runtime for style resolution.

import { initThemedStyler, TSDiv, View, Text } from '@clevertree/themed-styler';

// In your App initialization
useEffect(() => {
  initThemedStyler();
}, []);

// Usage in components
const MyComponent = () => (
  <TSDiv tag="div" className="p-4 bg-surface text-primary">
    <Text>Hello Relay!</Text>
  </TSDiv>
);

Key Components

• TSDiv: A versatile themed component that maps to appropriate native views (View, ScrollView, SafeAreaView, etc.) based on the tag and className.
• styled: A utility for creating themed components, similar to styled-components but powered by the Relay Rust core.
• Themed Primitives: Re-exports of View, Text, TouchableOpacity, etc., that are aware of the Relay theme system.

Platform Support

• Web: Compiles to WASM. Generates optimized CSS at runtime.
• Android: JNI binding to Rust core via TurboModule.
• iOS: (Coming soon) C-FFI binding to Rust core via TurboModule.