기능

Vais Playground Features

Comprehensive guide to all features available in the Vais Playground.

Editor Features

Syntax Highlighting

The Monaco editor provides rich syntax highlighting for Vais:

Keywords: F, S, E, I, L, M, T, U, R, C, O
Types: i8, i16, i32, i64, u8, u16, u32, u64, f32, f64, bool, char, str
Operators: @, :=, =>, &&, ||, ==, !=, etc.
Comments: Single-line (#) and multi-line (/* */)
Strings: Double-quoted with escape sequences
Numbers: Integers, floats, hex, binary

Code Completion

Press Ctrl+Space or start typing to see intelligent suggestions:

Keyword Snippets

F → Function template with parameters and return type
S → Struct definition template
E → Enum definition template
I → If-else expression
L → Loop with range
M → Match expression

Built-in Functions

puts("text") → Print string
putchar(65) → Print character
printf("format", args) → Formatted output

Common Patterns

main → Complete main function
fn → Generic function template

Keyboard Shortcuts

Shortcut	Action
`Ctrl/Cmd + Enter`	Run code
`Ctrl/Cmd + S`	Format code
`Ctrl + Space`	Trigger suggestions
`Ctrl/Cmd + /`	Toggle comment
`Ctrl/Cmd + [`	Decrease indentation
`Ctrl/Cmd + ]`	Increase indentation
`Alt + Up/Down`	Move line up/down
`Shift + Alt + Up/Down`	Copy line up/down
`Ctrl/Cmd + D`	Select next occurrence
`Ctrl/Cmd + F`	Find
`Ctrl/Cmd + H`	Replace
`F11`	Toggle fullscreen

Editor Configuration

Customizable settings in the editor:

Font size: 14px
Font family: Monaco, Menlo, Consolas
Tab size: 4 spaces
Line numbers: Enabled
Minimap: Enabled
Bracket pair colorization: Enabled
Word wrap: Disabled (configurable)

Example Programs

1. Hello World

Simple program demonstrating basic output.

F main()->i64 {
    puts("Hello, Vais!")
    0
}

2. Fibonacci

Recursive function using self-recursion operator @.

F fib(n:i64)->i64 = n<2 ? n : @(n-1) + @(n-2)
F main()->i64 = fib(10)

3. Generics

Type-generic functions with type inference.

F identity<T>(x: T) -> T = x

F main() -> i64 {
    a := identity(42)
    0
}

4. Control Flow

If-else expressions and loop constructs.

F main()->i64 {
    x := 10
    result := I x > 5 {
        puts("Greater than 5")
        1
    } E {
        puts("Not greater")
        0
    }

    L i:0..5 {
        putchar(i + 48)
    }
    0
}

5. Structs

Struct definitions with methods.

S Point {
    x: f64,
    y: f64
}

I Point {
    F distance_from_origin() -> f64 {
        sqrt(@.x * @.x + @.y * @.y)
    }
}

6. Enums

Algebraic data types with pattern matching.

E Option<T> {
    Some(T),
    None
}

F get_value(opt: Option<i64>) -> i64 {
    M opt {
        Some(v) => v,
        None => 0
    }
}

7. Pattern Matching

Exhaustive pattern matching with bindings.

F classify(n: i64) -> i64 {
    M n {
        0 => 0,
        1 => 1,
        _ => -1
    }
}

8. Loops

Range-based and while-style loops.

F main() -> i64 {
    # Range loop
    L i:0..10 {
        putchar(i + 48)
    }

    # While-style with break
    counter := 0
    L {
        I counter >= 5 { break }
        counter += 1
    }

    0
}

9. Self-Recursion

Using @ operator for recursive calls.

F factorial(n: i64) -> i64 =
    I n <= 1 { 1 } E { n * @(n - 1) }

10. Type Inference

Automatic type deduction.

F main() -> i64 {
    x := 42          # Inferred as i64
    y := 3.14        # Inferred as f64
    z := add(10, 20) # Inferred from return type
    0
}

F add(a: i64, b: i64) -> i64 = a + b

UI Components

Examples List: Quick access to all example programs
Active Indicator: Shows currently loaded example
Keyboard Shortcuts: Reference card for common actions

Example Dropdown: Alternative way to select examples
Format Button: Auto-format code
Clear Button: Clear output panel
Run Button: Compile and execute code

Output Panel

Status Indicator: Shows compilation/execution state
- 🔵 Ready
- 🟡 Running (animated)
- 🟢 Success
- 🔴 Error
Output Types:
- Regular output (white)
- Success messages (green)
- Warnings (yellow)
- Errors (red)
- Info messages (blue)

Status Bar

Real-time status updates:

"Ready" - Waiting for input
"Compiling..." - Compilation in progress
"Compilation successful" - No errors
"Execution completed" - Finished running
"Compilation failed" - Errors found

Compilation Features

Mock Compiler (Current)

The playground includes a demonstration compiler:

Syntax Validation
- Checks for empty files
- Validates brace matching
- Detects missing main function
Error Reporting
- Line and column numbers
- Descriptive error messages
- Multiple error display
Warning System
- Non-fatal issues
- Best practice suggestions
IR Generation
- Mock LLVM IR output
- Shows compilation structure

Real Compiler (Future)

When integrated with WASM:

Full Compilation Pipeline
- Lexical analysis
- Parsing
- Type checking
- Code generation
Advanced Diagnostics
- Precise error locations
- Suggested fixes
- Type mismatch details
Optimization
- Constant folding
- Dead code elimination
- Inline expansion
Execution
- Direct WASM execution
- Real stdout/stderr capture
- Exit code reporting

Theme

Dark Theme (Default)

Optimized for reduced eye strain:

Background: #0f172a
Surface: #1e293b
Editor: #1e1e1e
Primary: #6366f1 (Indigo)
Success: #22c55e (Green)
Error: #ef4444 (Red)
Warning: #f59e0b (Amber)

Syntax Colors

Keywords: Purple (#C586C0)
Types: Teal (#4EC9B0)
Strings: Orange (#CE9178)
Numbers: Light green (#B5CEA8)
Comments: Green (#6A9955)
Operators: White (#D4D4D4)

Responsive Design

Desktop (1200px+)

┌─────────────────────────────────────┐
│          Header                     │
├──────┬──────────────────┬──────────┤
│      │                  │          │
│ Side │     Editor       │  Output  │
│ bar  │                  │          │
│      │                  │          │
└──────┴──────────────────┴──────────┘

Tablet (768px - 1199px)

┌─────────────────────────────────────┐
│          Header                     │
├──────┬──────────────────────────────┤
│ Side │                              │
│ bar  │         Editor               │
├──────┴──────────────────────────────┤
│          Output                     │
└─────────────────────────────────────┘

Mobile (< 768px)

┌───────────────────────┐
│      Header           │
├───────────────────────┤
│   Example Select      │
├───────────────────────┤
│                       │
│      Editor           │
│                       │
├───────────────────────┤
│      Output           │
└───────────────────────┘

Browser Support

Fully Supported

Chrome 90+ ✅
Edge 90+ ✅
Firefox 88+ ✅
Safari 14+ ✅
Opera 76+ ✅

Minimum Requirements

ES6+ support
WebAssembly support (for real compiler)
Local Storage API
Web Workers (for background compilation)

Feature Detection

The playground checks for:

WebAssembly availability
Service Worker support
Local Storage access

Performance

Optimization Techniques

Lazy Loading
- Monaco editor loaded on demand
- WASM module loaded when needed
- Examples loaded incrementally
Code Splitting
- Separate chunks for editor and examples
- Vendor bundle optimization
Caching
- Service Worker for offline access
- Browser cache headers
- WASM module caching
Minification
- JavaScript minification
- CSS minification
- WASM optimization