# Vanilla .EUIX Engine (`euixjs`) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Build Tool: Vite](https://img.shields.io/badge/Build%20Tool-Vite-646CFF.svg)](https://vitejs.dev/) [![Test Suite: Vitest](https://img.shields.io/badge/Vitest-100%25%20Passed-brightgreen.svg)]() [![E2E Suite: Playwright](https://img.shields.io/badge/Playwright-100%25%20Passed-brightgreen.svg)]() > **Minimal by default, powerful by opt-in.** > An ultra-lightweight, zero Virtual DOM declarative UI engine that turns markup, reactive state, and declarative actions directly into fast DOM updates without requiring a build step or bundler. --- ## 💡 What is EUIX? EUIX brings modern declarative reactivity to any HTML page—including server-rendered applications (Laravel Blade, WordPress, Django, Rails, Go templates) and static sites: - ⚡ **Zero Virtual DOM Overhead**: Direct fine-grained DOM node mutations batched automatically via `queueMicrotask`. - 🏝️ **Declarative Island Architecture**: Drop reactive components anywhere in your HTML with `
``` ### 2. `counter.xml` (Component Specification) Here is the `/counter.xml` component file referenced in Example 1 above: ```xml 0

{props.title || "Interactive Counter"}

{data.count}
``` --- ## 🎛️ Programmatic Global API (`window.euix`) For dynamic applications or integration into existing JavaScript controllers: ```javascript // Scan any DOM container for newly added [data-euix] elements await window.euix.scan(document.body); // Mount a specific element imperatively const engine = await window.euix.mountElement(document.querySelector('#my-island')); // Dynamically update component props without re-mounting engine.setProps({ title: 'New Title', step: 5 }); // Retrieve the engine instance by selector or DOM element const inst = window.euix.get('#my-island'); // Cleanly unmount element and clear all listeners window.euix.unmount(document.querySelector('#my-island')); ``` --- ## ⚡ Action Shorthands Reference Perform common state operations directly inside XML attributes: | Shorthand | Example | Description | | :--- | :--- | :--- | | **`on_click:set`** | `on_click:set="count={data.count + 1}"` | Sets state with numeric expressions, strings, or ternaries | | **`on_click:toggle`** | `on_click:toggle="is_open"` | Toggles a boolean state between `true` and `false` | | **`on_click:mutate`** | `on_click:mutate="items.PUSH({id: 1, text: 'Task'})"` | Mutates arrays (`PUSH`, `REMOVE where id={item.id}`, `CLEAR`) | | **`on_click:revalidate`** | `on_click:revalidate="get_users"` | Revalidates an SWR REST API endpoint | | **`on_click:call`** | `on_click:call="saveUser"` | Calls a registered JavaScript business logic handler | --- ## 🩺 EUIX Doctor (Static Verification) EUIX includes `@euix/doctor` to statically analyze your markup, state flow, and components without needing a browser: ```bash # Analyze all EUIX components in your project npx euix doctor # Scan a specific file or directory npx euix doctor apps/playground # Automatically wrap JS scripts in CDATA (EUIX0001) npx euix doctor path/to/App.xml --fix ``` --- ## 🧩 Modular Plugin Ecosystem Extend EUIX dynamically with tree-shakeable plugins: - **`euixjs/api`**: SWR data fetching, offline queuing, focus revalidation - **`euixjs/router`**: Single-Page App (SPA) hash/path router with nested outlets - **`euixjs/composer`**: Multi-step transactional client workflows & sagas - **`euixjs/storage`**: LocalStorage & SessionStorage state persistence - **`euixjs/dialog`**: Declarative modal dialogs and overlays - **`euixjs/webmcp`**: Zero-dependency browser-native agent tool integration --- ## 📄 License MIT © [litepacks](https://github.com/litepacks)