Spry/demo/Components/DemoHostComponent.vala

using Spry;
using Inversion;
using Invercargill.DataStructures;

/**
 * DemoHostComponent - A component that hosts demo implementations with source/demo toggle
 * 
 * This component provides a frame for demo content with the ability to toggle
 * between viewing the demo and viewing the source code.
 * 
 * Usage:
 *   var host = factory.create<DemoHostComponent>();
 *   host.demo_component_name = "SimpleCounterDemo";
 *   host.source_file = "demo/DemoComponents/SimpleCounterDemo.vala";
 */
public class DemoHostComponent : Component {
    
    private ComponentFactory factory = inject<ComponentFactory>();
    
    /// Name of the demo component to create and display
    public string demo_component_name { get; set; }
    
    /// Path to the source file to display (relative to project root)
    public string source_file { get; set; default = ""; }
    
    /// Toggle state - true when showing source code
    public bool showing_source { get; set; default = false; }
    
    /// The loaded source code content (cached after first load)
    private string? _source_content = null;
    
    public override string markup { get {
        return """
        <spry-context property="demo_component_name"/>
        <spry-context property="source_file"/>
        <div class="demo-host" sid="host" hx-swap="outerHTML">
            <div class="demo-header">
                <span class="demo-title" sid="title">Demo</span>
                <div class="demo-toggle-group">
                    <button class="demo-toggle-btn" spry-action=":ShowDemo" spry-target="host" 
                            class-active-expr="!this.showing_source">Demo</button>
                    <button class="demo-toggle-btn" spry-action=":ShowSource" spry-target="host"
                            class-active-expr="this.showing_source">Source</button>
                </div>
            </div>
            <div class="demo-content" sid="content">
                <div spry-if="this.showing_source">
                    <pre class="demo-source"><code sid="source-code"></code></pre>
                </div>
                <div spry-else>
                    <spry-outlet sid="demo-outlet"/>
                </div>
            </div>
        </div>
        """;
    }}
    
    public override async void prepare() throws Error {
        // Update the title with the demo component name
        if (demo_component_name != null) {
            this["title"].text_content = demo_component_name;
        }
        
        // Create the demo component and add it to the outlet when showing demo
        if (!showing_source && source_file != null) {
            var demo = factory.create_by_name(demo_component_name);
            var series = new Series<Renderable>();
            series.add(demo);
            set_outlet_children("demo-outlet", series);
        }
        
        // Update the source code display if we're showing source
        if (showing_source && _source_content != null) {
            this["source-code"].text_content = _source_content;
        }
    }
    
    public async override void handle_action(string action) throws Error {
        switch (action) {
            case "ShowDemo":
                showing_source = false;
                break;
            case "ShowSource":
                if (_source_content == null) {
                    _source_content = yield load_source_file();
                }
                showing_source = true;
                break;
        }
    }
    
    /**
     * Load the source file from disk and escape HTML entities
     */
    private async string load_source_file() {
        try {
            var path = source_file;
            // Try to read from the project root (relative path)
            var file = File.new_for_path(path);
            
            if (!file.query_exists()) {
                return @"Error: Source file not found: $path";
            }
            
            uint8[] contents;
            string etag_out;
            yield file.load_contents_async(null, out contents, out etag_out);
            
            var source = (string)contents;
            return escape_html(source);
        } catch (Error e) {
            return @"Error loading source file: $(e.message)";
        }
    }
    
    /**
     * Escape HTML entities for safe display in <pre><code> blocks
     */
    private string escape_html(string input) {
        var result = input
            .replace("&", "&amp;")
            .replace("<", "&lt;")
            .replace(">", "&gt;")
            .replace("\"", "&quot;")
            .replace("'", "&#39;");
        return result;
    }
}