# 💧 Liquid Framework

[![Build Status](https://img.shields.io/badge/build-passing-brightgreen.svg)](#)
[![Platforms](https://img.shields.io/badge/platforms-JS%20%7C%20Rust%20%7C%20iOS%20%7C%20Android%20%7C%20Windows-blue.svg)](#)
[![License](https://img.shields.io/badge/license-MIT-green.svg)](#)

Liquid is a revolutionary, lightweight multi-platform declarative UI framework. With a single codebase, you can transpile native, reactive UIs for five targets: **pure Javascript (Web)**, **Rust/WASM (Web)**, **SwiftUI (iOS)**, **Jetpack Compose (Android)**, and **WinUI 3/C# (Windows Desktop)**.

---

## 🚀 Key Features

*   **Unified AST & Transpiler**: Write once in the declarative `Liquid` DSL, and compile directly to highly optimized target-native code.
*   **Reactive Global State**: Standardized `Store` mechanism utilizing platform-specific publishers/delegates (`ObservableObject` in SwiftUI, `mutableStateOf` in Compose, `INotifyPropertyChanged` in WinUI).
*   **Declarative Conditional Rendering (`If`)**: Conditional UI flow built natively into code generators.
*   **Custom Components with Props**: Sub-component instantiation and property parameter passing.
*   **Dynamic Lists (`For`)**: Declarative dynamic array looping across all generators.
*   **Interactive Input (`TextField`)**: Native Two-Way data bindings with focus guards.
*   **Flexible Layouts (`Container`)**: Style borders, margins, colors, and rounding consistently.
*   **Standard Lifecycle Hooks**: Native view hook bindings (`onInit` and `onDispose`).
*   **Unified Local Storage**: Fast, persistent storage bridge (`Storage.set` & `Storage.get`).
*   **Unified Network Client (`Http`)**: Asynchronous network fetch request helpers.
*   **Unified Native Device Bridges**: System-level bridges for Geolocation (`Location.current`) and Local Notifications (`Notification.show`).

---

## 🌟 Advanced Features (Roadmap)

We have successfully expanded the core framework with advanced cross-platform capabilities:

### 1. Declarative Conditional UI (`If` Widget)
Supports conditional branches natively in declarative UI trees:
```dart
If(
    condition: isLoggedIn,
    child: DashboardView(),
    fallback: LoginView()
)
```

### 2. Custom Components with Properties (Props)
Standardizes component composition, allowing custom components to receive dynamic inputs:
```dart
class UserCard extends Component {
    String username = "";
    @override
    Widget build() {
        return Text("User: $username");
    }
}
// Parent instantiation:
UserCard(username: "Antigravity")
```

### 3. Computed Getters & Return Statements
Methods inside components or stores can compute and return dynamic values:
```dart
int getFactor() {
    return factor;
}
```

### 4. Unified Networking (`Http`)
Asynchronous networking utilizing platform-native callbacks:
```dart
Http.get("https://api.example.com/user", handleResponse);
```

### 5. Native OS Device Bridges
Unified hooks for Geolocation coordinates and OS Push Notifications:
```dart
Location.current(handleLocation);
Notification.show("Alert", "Critical state updated!");
```

---

## 📦 DSL Syntax Guide

Liquid files use a clean, bracket-based class structure representing components and stores.

### 1. Counter App Example
```dart
import "liquid:ui";

class AppStore extends Store {
    int count = 0;
    
    void increment() {
        count++;
    }
}

class CounterApp extends Component {
    void handleIncrement() {
        appStore.increment();
    }

    @override
    Widget build() {
        return Column(
            alignment: Alignment.center,
            spacing: 16.0,
            children: [
                Text(
                    "Count: $appStore.count",
                    style: TextStyle(
                        fontSize: 24.0,
                        weight: FontWeight.bold
                    )
                ),
                Button(
                    label: "Increment",
                    onPressed: handleIncrement
                )
            ]
        );
    }
}
```

---

## 🛠️ Platform Transpilation Details

```mermaid
graph TD
    A[Liquid DSL Code] --> B(Parser & Optimizer)
    B --> C{Platform Code Generators}
    C -->|JS| D[Javascript DOM Code]
    C -->|Rust/WASM| E[yew-like Rust WASM]
    C -->|SwiftUI| F[iOS Swift View]
    C -->|Compose| G[Android Jetpack Compose]
    C -->|WinUI 3| H[C# Code-Behind + XAML]
```

### 1. Unified Storage Target Mapping
*   **JS Web**: maps to `localStorage.setItem` / `getItem`
*   **Rust WASM**: maps to `web_sys` `local_storage().set_item` / `get_item`
*   **SwiftUI**: maps to `UserDefaults.standard.set` / `string`
*   **Kotlin Compose**: maps to persistent `Storage` helper
*   **WinUI 3 (C#)**: maps to C# static Dictionary storage backup

### 2. Layouts & Styles
*   **Container**:
    *   JS/Rust Web: CSS properties `padding`, `background-color`, `border-radius`.
    *   SwiftUI: `.padding(...)`, `.background(...)`, `.cornerRadius(...)`.
    *   Compose: `Modifier.padding(...)`, `.background(...)`.
    *   WinUI XAML: `<Border Padding="..." Background="..." CornerRadius="..." />`.

---

## 🏃 Run & Test

Ensure you have Rust installed. To avoid Windows file-locking or toolchain conflicts, use the custom test executor:

```cmd
.\run_tests.bat --target-dir target_unique_name
```

---

## 💡 Developer CLI Reference

You can use the built-in compiler command directly:

*   **Create a new project**:
    ```bash
    liquid create my_project
    ```
*   **Run Development Server & Preview**:
    ```bash
    liquid dev
    ```
*   **Production Build**:
    ```bash
    liquid build
    ```

---

*Created by Panca Nugraha.*
