Max f115e6d782 Update Documentation for SUI Structure and Locale Handling

- Revised the README and agent-sui documentation to clarify the directory structure, including the addition of __data.json and __locales directories for global and page-level data.
- Enhanced explanations of the pages directory, emphasizing the organization of global and assistant-specific pages.
- Updated the i18n documentation to detail locale detection and the importance of server-side rendering for translations, including a code snippet for changing locales via JavaScript.

2026-01-03 15:06:32 +08:00

3.2 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
├── __data.json             # Global data (accessible via $global)
├── __assets/               # Static assets (reference via @assets/)
├── __locales/              # Locale files
└── pages/                  # All pages go here
    └── <page>/             # Route = folder name (can be nested)
        ├── <page>.html     # HTML template (filename must match folder)
        ├── <page>.css      # Styles
        ├── <page>.ts       # Frontend script
        ├── <page>.json     # Data configuration
        ├── <page>.config   # Page configuration
        ├── <page>.backend.ts  # Backend script
        └── __locales/      # Page-level locale files

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 (shared)
│       ├── __document.html
│       ├── __data.json
│       ├── __assets/
│       └── pages/             # Global pages (401, 404, etc.)
│           └── <page>/
└── assistants/
    └── <name>/
        └── pages/             # Assistant pages → /agents/<name>/<route>
            └── <page>/

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.

3.2 KiB Raw Blame History