Max aa01ea216c Update Documentation for Frontend API and Event Handling Enhancements

- Expanded the README to include CUI integration details in the Frontend API section, clarifying communication methods with the CUI host.
- Added new examples for frontend scripting styles, including Direct and Component styles, to improve user understanding of event handling and form submissions.
- Updated event handling documentation to reflect changes in handler signatures and data structures, enhancing clarity on event data usage.
- Revised component documentation to standardize method naming conventions and improve consistency across examples.

2026-01-03 11:31:15 +08:00

2.8 KiB

Raw Blame History

SUI - Simple User Interface

SUI is a full-stack web development framework that allows you to create web applications using HTML, CSS, and TypeScript/JavaScript without complex build tools.

Features

Page as Component: Every page is a component, unifying the development model
Template Syntax: Intuitive data binding, conditionals, and loops
Backend Scripts: Server-side logic with TypeScript
Scoped Styles: Automatic CSS scoping per component
i18n Support: Built-in internationalization
Agent SUI: Special configuration for AI Agent applications

Quick Start

Directory Structure

/templates/<template_name>/
├── __document.html         # Global document template
├── __assets/               # Static assets
├── __locales/              # Locale files
└── <route>/                # Pages
    └── <page>/
        ├── <page>.html     # HTML template
        ├── <page>.css      # Styles
        ├── <page>.ts       # Frontend script
        ├── <page>.json     # Data configuration
        ├── <page>.config   # Page configuration
        └── <page>.backend.ts  # Backend script

Basic Page

/home/home.html:

<div class="home">
  <h1>{{ title }}</h1>
  <p s:if="{{ showMessage }}">{{ message }}</p>
</div>

/home/home.json:

{
  "title": "Welcome",
  "showMessage": true,
  "message": "Hello, World!"
}

Commands

# Build templates
yao sui build <sui> [template]

# Watch for changes
yao sui watch <sui> [template]

# Build Agent SUI
yao sui build agent

# Watch Agent SUI
yao sui watch agent

Documentation

Template Syntax - Data binding, conditionals, loops
Components - Page as component, props, slots
Backend Scripts - Server-side logic
Data Binding - Built-in variables and functions
Event Handling - Event binding and state management
Internationalization - Translation and localization
Frontend API - Component query, backend calls, render API, CUI integration
Agent SUI - AI Agent application setup

Agent SUI

Agent SUI is designed for AI Agent applications with automatic page loading from assistants:

<app>/
├── agent/
│   └── template/              # Agent SUI template
│       ├── __document.html
│       ├── __assets/
│       └── pages/
└── assistants/
    └── <name>/
        └── pages/             # Assistant pages

Build with: yao sui build agent

See Agent SUI Documentation for details.

License

This project is part of the Yao App Engine and follows the Yao Open Source License.

2.8 KiB Raw Blame History