Max 097fb73416 Refactor SUI Command Arguments and Enhance Default Template Handling

- Updated the `build` and `watch` commands to accept a single argument for `<sui>` and made the `<template>` argument optional, improving usability.
- Introduced a default template assignment for the `agent` SUI, ensuring a more intuitive setup for users.
- Enhanced error messages for command usage to provide clearer guidance on expected input format.
- Added new OpenAPI file to the bindata, improving the framework's capabilities for API integration.

2026-01-01 10:28:45 +08:00

2.7 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
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

Apache-2.0

2.7 KiB Raw Blame History