oak-gpui/tooling/xtask/src/tasks/web_examples.rs

#![allow(clippy::disallowed_methods, reason = "tooling is exempt")]

use std::io::Write;
use std::path::Path;
use std::process::Command;

use anyhow::{Context as _, Result, bail};
use clap::Parser;

#[derive(Parser)]
pub struct WebExamplesArgs {
    #[arg(long)]
    pub release: bool,
    #[arg(long, default_value = "8080")]
    pub port: u16,
    #[arg(long)]
    pub no_serve: bool,
}

fn check_program(binary: &str, install_hint: &str) -> Result<()> {
    match Command::new(binary).arg("--version").output() {
        Ok(output) if output.status.success() => Ok(()),
        _ => bail!("`{binary}` not found. Install with: {install_hint}"),
    }
}

fn discover_examples() -> Result<Vec<String>> {
    let examples_dir = Path::new("crates/gpui/examples");
    let mut names = Vec::new();

    for entry in std::fs::read_dir(examples_dir).context("failed to read crates/gpui/examples")? {
        let path = entry?.path();
        if path.extension().and_then(|e| e.to_str()) == Some("rs") {
            if let Some(stem) = path.file_stem().and_then(|s| s.to_str()) {
                names.push(stem.to_string());
            }
        }
    }

    if names.is_empty() {
        bail!("no examples found in crates/gpui/examples");
    }

    names.sort();
    Ok(names)
}

pub fn run_web_examples(args: WebExamplesArgs) -> Result<()> {
    let cargo = std::env::var("CARGO").unwrap_or_else(|_| "cargo".to_string());
    let profile = if args.release { "release" } else { "debug" };
    let out_dir = "target/web-examples";

    check_program("wasm-bindgen", "cargo install wasm-bindgen-cli")?;

    let examples = discover_examples()?;
    eprintln!(
        "Building {} example(s) for wasm32-unknown-unknown ({profile})...\n",
        examples.len()
    );

    std::fs::create_dir_all(out_dir).context("failed to create output directory")?;

    eprintln!("Building all examples...");

    let mut cmd = Command::new(&cargo);
    cmd.args([
        "build",
        "--target",
        "wasm32-unknown-unknown",
        "-p",
        "gpui",
        "--keep-going",
    ]);
    // 🙈
    cmd.env("RUSTC_BOOTSTRAP", "1");
    for name in &examples {
        cmd.args(["--example", name]);
    }
    if args.release {
        cmd.arg("--release");
    }

    let _ = cmd.status().context("failed to run cargo build")?;

    // Run wasm-bindgen on each .wasm that was produced.
    let mut succeeded: Vec<String> = Vec::new();
    let mut failed: Vec<String> = Vec::new();

    for name in &examples {
        let wasm_path = format!("target/wasm32-unknown-unknown/{profile}/examples/{name}.wasm");
        if !Path::new(&wasm_path).exists() {
            eprintln!("[{name}] SKIPPED (build failed)");
            failed.push(name.clone());
            continue;
        }

        eprintln!("[{name}] Running wasm-bindgen...");

        let example_dir = format!("{out_dir}/{name}");
        std::fs::create_dir_all(&example_dir)
            .with_context(|| format!("failed to create {example_dir}"))?;

        let status = Command::new("wasm-bindgen")
            .args([
                &wasm_path,
                "--target",
                "web",
                "--no-typescript",
                "--out-dir",
                &example_dir,
                "--out-name",
                name,
            ])
            // 🙈
            .env("RUSTC_BOOTSTRAP", "1")
            .status()
            .context("failed to run wasm-bindgen")?;
        if !status.success() {
            eprintln!("[{name}] SKIPPED (wasm-bindgen failed)");
            failed.push(name.clone());
            continue;
        }

        // Write per-example index.html.
        let html_path = format!("{example_dir}/index.html");
        std::fs::File::create(&html_path)
            .and_then(|mut file| file.write_all(make_example_html(name).as_bytes()))
            .with_context(|| format!("failed to write {html_path}"))?;

        eprintln!("[{name}] OK");
        succeeded.push(name.clone());
    }

    if succeeded.is_empty() {
        bail!("all {} examples failed to build", examples.len());
    }

    let example_names: Vec<&str> = succeeded.iter().map(|s| s.as_str()).collect();
    let index_path = format!("{out_dir}/index.html");
    std::fs::File::create(&index_path)
        .and_then(|mut file| file.write_all(make_gallery_html(&example_names).as_bytes()))
        .context("failed to write index.html")?;

    if args.no_serve {
        return Ok(());
    }

    // Serve with COEP/COOP headers required for WebGPU / SharedArrayBuffer.
    eprintln!("Serving on http://127.0.0.1:{}...", args.port);

    let server_script = format!(
        r#"
import http.server
class Handler(http.server.SimpleHTTPRequestHandler):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, directory="{out_dir}", **kwargs)
    def end_headers(self):
        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
        super().end_headers()
http.server.HTTPServer(("127.0.0.1", {port}), Handler).serve_forever()
"#,
        port = args.port,
    );

    let status = Command::new("python3")
        .args(["-c", &server_script])
        .status()
        .context("failed to run python3 http server (is python3 installed?)")?;
    if !status.success() {
        bail!("python3 http server exited with: {status}");
    }

    Ok(())
}

fn make_example_html(name: &str) -> String {
    format!(
        r#"<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPUI Web: {name}</title>
    <style>
        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
        html, body {{
            width: 100%; height: 100%; overflow: hidden;
            background: #1e1e2e; color: #cdd6f4;
            font-family: system-ui, -apple-system, sans-serif;
        }}
        canvas {{ display: block; width: 100%; height: 100%; }}
        #loading {{
            position: fixed; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; opacity: 0.6;
        }}
        #loading.hidden {{ display: none; }}
    </style>
</head>
<body>
    <div id="loading">Loading {name}…</div>
    <script type="module">
        import init from './{name}.js';
        await init();
        document.getElementById('loading').classList.add('hidden');
    </script>
</body>
</html>
"#
    )
}

fn make_gallery_html(examples: &[&str]) -> String {
    let mut buttons = String::new();
    for name in examples {
        buttons.push_str(&format!(
            "                <button class=\"example-btn\" data-name=\"{name}\">{name}</button>\n"
        ));
    }

    let first = examples.first().copied().unwrap_or("hello_web");

    format!(
        r##"<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPUI Web Examples</title>
    <style>
        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
        html, body {{
            width: 100%; height: 100%; overflow: hidden;
            background: #1e1e2e; color: #cdd6f4;
            font-family: system-ui, -apple-system, sans-serif;
        }}
        #app {{ display: flex; width: 100%; height: 100%; }}

        #sidebar {{
            width: 240px; min-width: 240px;
            background: #181825;
            border-right: 1px solid #313244;
            display: flex; flex-direction: column;
        }}
        #sidebar-header {{
            padding: 16px 14px 12px;
            font-size: 0.8rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.08em;
            color: #a6adc8; border-bottom: 1px solid #313244;
        }}
        #sidebar-header span {{
            font-size: 1rem; text-transform: none; letter-spacing: normal;
            color: #cdd6f4; display: block; margin-top: 2px;
        }}
        #example-list {{
            flex: 1; overflow-y: auto; padding: 8px 0;
        }}
        .example-btn {{
            display: block; width: 100%;
            padding: 8px 14px; border: none;
            background: transparent; color: #bac2de;
            font-size: 0.85rem; text-align: left;
            cursor: pointer;
            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
        }}
        .example-btn:hover {{ background: #313244; color: #cdd6f4; }}
        .example-btn.active {{ background: #45475a; color: #f5e0dc; font-weight: 600; }}

        #main {{ flex: 1; display: flex; flex-direction: column; min-width: 0; }}
        #toolbar {{
            height: 40px; display: flex; align-items: center;
            padding: 0 16px; gap: 12px;
            background: #1e1e2e; border-bottom: 1px solid #313244;
            font-size: 0.8rem; color: #a6adc8;
        }}
        #current-name {{
            font-weight: 600; color: #cdd6f4;
            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
        }}
        #open-tab {{
            margin-left: auto; padding: 4px 10px;
            border: 1px solid #585b70; border-radius: 4px;
            background: transparent; color: #a6adc8;
            font-size: 0.75rem; cursor: pointer;
            text-decoration: none;
        }}
        #open-tab:hover {{ background: #313244; color: #cdd6f4; }}
        #viewer {{ flex: 1; border: none; width: 100%; background: #11111b; }}
    </style>
</head>
<body>
    <div id="app">
        <div id="sidebar">
            <div id="sidebar-header">
                GPUI Examples
                <span>{count} available</span>
            </div>
            <div id="example-list">
{buttons}            </div>
        </div>
        <div id="main">
            <div id="toolbar">
                <span id="current-name">{first}</span>
                <a id="open-tab" href="./{first}/" target="_blank">Open in new tab ↗</a>
            </div>
            <iframe id="viewer" src="./{first}/"></iframe>
        </div>
    </div>
    <script>
        const buttons = document.querySelectorAll('.example-btn');
        const viewer  = document.getElementById('viewer');
        const nameEl  = document.getElementById('current-name');
        const openEl  = document.getElementById('open-tab');

        function select(name) {{
            buttons.forEach(b => b.classList.toggle('active', b.dataset.name === name));
            viewer.src = './' + name + '/';
            nameEl.textContent = name;
            openEl.href = './' + name + '/';
            history.replaceState(null, '', '#' + name);
        }}

        buttons.forEach(b => b.addEventListener('click', () => select(b.dataset.name)));

        const hash = location.hash.slice(1);
        if (hash && [...buttons].some(b => b.dataset.name === hash)) {{
            select(hash);
        }} else {{
            select('{first}');
        }}
    </script>
</body>
</html>
"##,
        count = examples.len(),
    )
}