From 6f93c7d935852350c1572899ccccf8239bb61a8b Mon Sep 17 00:00:00 2001 From: slhx agent Date: Mon, 25 May 2026 21:09:39 +0200 Subject: [PATCH] refactor(techdemo): compose page with hemplate views Move the techdemo page shell and remaining board/inspector/hero boundaries to hemplate-owned views instead of Rust raw HTML or placeholder replacement. Keep rendered HTML assertions DOM-aware with scraper. req: html_safety/002 req: view/001 req: test/005 --- examples/techdemo/src/main.rs | 260 +++++++++++------- examples/techdemo/templates/app_shell.css | 53 ++++ examples/techdemo/templates/app_shell.heml | 12 + .../techdemo/templates/control_center.heml | 8 +- .../templates/partials/board_lanes.heml | 5 + .../templates/partials/hero_metrics.heml | 6 + slhx-core/src/lib.rs | 12 + 7 files changed, 247 insertions(+), 109 deletions(-) create mode 100644 examples/techdemo/templates/app_shell.css create mode 100644 examples/techdemo/templates/app_shell.heml create mode 100644 examples/techdemo/templates/partials/board_lanes.heml create mode 100644 examples/techdemo/templates/partials/hero_metrics.heml diff --git a/examples/techdemo/src/main.rs b/examples/techdemo/src/main.rs index 9bba662..486797a 100644 --- a/examples/techdemo/src/main.rs +++ b/examples/techdemo/src/main.rs @@ -121,6 +121,25 @@ struct IssueCard { delete_handle: u32, } +#[derive(Hemplate)] +#[hemplate = "partials"] +struct BoardLanes { + lanes: Vec, +} + +#[derive(Hemplate)] +struct ControlCenter { + hero: SafeHtml, + board: SafeHtml, + inspector: SafeHtml, + activity: SafeHtml, +} + +#[derive(Hemplate)] +struct AppShell { + body: SafeHtml, +} + #[derive(Hemplate)] #[hemplate = "partials"] struct InspectorPanel { @@ -169,6 +188,15 @@ struct ArchitectureHero; #[hemplate = "partials"] struct ArchitectureBoard; +#[derive(Hemplate)] +#[hemplate = "partials"] +struct HeroMetrics { + resource_count: u64, + active_count: usize, + shipped_count: usize, + impact_score: u64, +} + #[tokio::main] async fn main() { let state = Arc::new(Shared { demo: Mutex::new(DemoState::default()) }); @@ -177,6 +205,8 @@ async fn main() { .route("/architecture", get(architecture)) .route("/events", get(events)) .route("/slhx.js", get(runtime)) + .route("/app.css", get(app_css)) + .route("/control_center.css", get(control_center_css)) .with_state(state); let addr = std::env::var("SLHX_TECHDEMO_ADDR") @@ -199,11 +229,12 @@ async fn home(State(state): State>, request: PageRequest) -> impl In // req: page_swap/001 req: page_swap/002 req: examples/001 async fn architecture(request: PageRequest) -> impl IntoResponse { - let body = ui::control_center::lower_html(include_str!("../templates/control_center.heml")) - .replace("__HERO__", architecture_hero().as_str()) - .replace("__BOARD__", architecture_board().as_str()) - .replace("__INSPECTOR__", architecture_inspector().as_str()) - .replace("__ACTIVITY__", architecture_activity().as_str()); + let body = render_control_center(ControlCenter { + hero: architecture_hero(), + board: architecture_board(), + inspector: architecture_inspector(), + activity: architecture_activity(), + }); request .page(body, shell) .title("slhx Architecture") @@ -214,6 +245,14 @@ async fn runtime() -> impl IntoResponse { runtime_js() } +async fn app_css() -> impl IntoResponse { + ([("content-type", "text/css; charset=utf-8")], include_str!("../templates/app_shell.css")) +} + +async fn control_center_css() -> impl IntoResponse { + ([("content-type", "text/css; charset=utf-8")], include_str!("../templates/control_center.css")) +} + async fn interact( State(state): State>, form: InteractionForm, @@ -366,10 +405,10 @@ fn update_work(demo: &mut DemoState, id: Option<&str>, update: impl FnOnce(&mut fn demo_effects(demo: &DemoState, notice: &'static str) -> impl IntoEffect { ( - ui::control_center::slots::hero_metrics.html(SafeHtml::trusted(render_hero(demo))), - ui::control_center::slots::board.html(SafeHtml::trusted(render_board(demo))), + ui::control_center::slots::hero_metrics.html(render_hero(demo)), + ui::control_center::slots::board.html(render_board(demo)), ui::control_center::slots::activity.html(render_activity(demo)), - ui::control_center::slots::inspector.html(SafeHtml::trusted(render_inspector(demo))), + ui::control_center::slots::inspector.html(render_inspector(demo)), ui::control_center::slots::notice.text(notice), ui::control_center::forms::launch_work.clear("title"), ) @@ -381,104 +420,34 @@ fn parse_lane(value: Option<&str>) -> usize { } fn page_html(demo: &DemoState) -> String { - ui::control_center::lower_html(include_str!("../templates/control_center.heml")) - .replace("__HERO__", &render_hero(demo)) - .replace("__BOARD__", &render_board(demo)) - .replace("__INSPECTOR__", &render_inspector(demo)) - .replace("__ACTIVITY__", render_activity(demo).as_str()) + render_control_center(ControlCenter { + hero: render_hero(demo), + board: render_board(demo), + inspector: render_inspector(demo), + activity: render_activity(demo), + }) } fn shell(body: String) -> String { - let control_css = include_str!("../templates/control_center.css"); - format!( - r#" - - - - - slhx Techdemo - - - - -{body} -"# - ) + // req: html_safety/002 req: view/001 + render_template(&AppShell { body: SafeHtml::trusted(body) }) } -fn render_hero(demo: &DemoState) -> String { +fn render_hero(demo: &DemoState) -> SafeHtml { + // req: html_safety/002 req: view/001 let shipped = demo.work.iter().filter(|item| item.stage == Stage::Shipped).count(); let active = demo.work.iter().filter(|item| item.stage == Stage::Active).count(); let impact: u64 = demo.work.iter().map(|item| item.impact as u64).sum(); - format!( - r#"
-
{}generated resources on this page
-
{}active typed work items
-
{}shipped without app JS
-
{}aggregate impact score
-
"#, - 13, - active, - shipped, - impact, - ) + render_html(&HeroMetrics { + resource_count: 13, + active_count: active, + shipped_count: shipped, + impact_score: impact, + }) } -fn render_board(demo: &DemoState) -> String { +fn render_board(demo: &DemoState) -> SafeHtml { + // req: html_safety/002 req: view/001 let lanes = LANES .iter() .enumerate() @@ -497,12 +466,7 @@ fn render_board(demo: &DemoState) -> String { }) .collect::>(); - let mut out = String::from("
"); - for lane in lanes { - out.push_str(&render_template(&lane)); - } - out.push_str("
"); - out + render_html(&BoardLanes { lanes }) } fn issue_card(item: &WorkItem, selected: bool) -> IssueCard { @@ -532,7 +496,8 @@ fn render_activity(demo: &DemoState) -> SafeHtml { }) } -fn render_inspector(demo: &DemoState) -> String { +fn render_inspector(demo: &DemoState) -> SafeHtml { + // req: html_safety/002 req: view/001 let selected = demo .selected_id .and_then(|id| demo.work.iter().find(|item| item.id == id)); @@ -547,7 +512,7 @@ fn render_inspector(demo: &DemoState) -> String { }) }, ); - render_template(&InspectorPanel { + render_html(&InspectorPanel { selected, spotlight: demo.spotlight.clone(), }) @@ -578,6 +543,11 @@ fn architecture_activity() -> SafeHtml { render_html(&ArchitectureActivity) } +fn render_control_center(page: ControlCenter) -> String { + // req: html_safety/002 req: view/001 + ui::control_center::lower_html(render_template(&page)) +} + fn render_template(template: &impl Hemplate) -> String { template.render().expect("techdemo hemplate partial renders") } @@ -595,6 +565,64 @@ mod tests { Selector::parse(value).expect("test selector parses") } + // req: html_safety/002 req: view/001 req: test/005 + #[test] + fn shell_is_composed_by_a_hemplate_view() { + let html = shell(page_html(&DemoState::default())); + let document = Html::parse_document(&html); + assert_eq!( + document + .select(&selector("title")) + .next() + .map(|title| title.text().collect::()), + Some("slhx Techdemo".to_owned()) + ); + assert_eq!(document.select(&selector("script[src=\"/slhx.js\"]")).count(), 1); + assert_eq!(document.select(&selector("link[rel=\"stylesheet\"]")).count(), 2); + assert_eq!(document.select(&selector("link[href=\"/app.css\"]")).count(), 1); + assert_eq!(document.select(&selector("link[href=\"/control_center.css\"]")).count(), 1); + assert_eq!(document.select(&selector("main[data-slhx-root=\"techdemo\"]")).count(), 1); + assert!(!html.contains("{+=")); + } + + // req: html_safety/002 req: view/001 req: test/005 + #[test] + fn control_center_page_is_composed_by_hemplate_not_placeholders() { + let html = page_html(&DemoState::default()); + assert!(!html.contains("__HERO__")); + assert!(!html.contains("__BOARD__")); + assert!(!html.contains("__INSPECTOR__")); + assert!(!html.contains("__ACTIVITY__")); + + let document = Html::parse_fragment(&html); + assert_eq!(document.select(&selector("[data-slhx-root=\"techdemo\"]")).count(), 1); + assert!(document.select(&selector("[data-sid]")).count() >= 7); + assert!(document.select(&selector("[data-hid]")).count() >= 7); + assert_eq!(document.select(&selector(".hero-panel .metrics")).count(), 1); + assert_eq!(document.select(&selector(".board-card .lanes")).count(), 1); + assert_eq!(document.select(&selector(".glass-card .inspector-hero")).count(), 1); + assert_eq!(document.select(&selector(".glass-card ol.activity")).count(), 1); + } + + // req: html_safety/002 req: view/001 req: test/005 + #[test] + fn hero_metrics_are_rendered_by_a_hemplate_view() { + let html = render_hero(&DemoState::default()); + let document = Html::parse_fragment(html.as_str()); + let metrics = document.select(&selector(".metrics > .metric")).collect::>(); + assert_eq!(metrics.len(), 4); + assert_eq!( + metrics[0] + .select(&selector("span")) + .next() + .map(|span| span.text().collect::()), + Some("generated resources on this page".to_owned()) + ); + assert!(metrics + .iter() + .any(|metric| metric.text().collect::().contains("aggregate impact score"))); + } + // req: style/001 req: style/002 req: style/003 req: test/005 #[test] fn generated_css_class_flows_through_hemplate_dynamic_attribute() { @@ -603,7 +631,8 @@ mod tests { assert_eq!(ui::control_center::classes::work_card.as_str(), "work-card"); assert_eq!(ui::control_center::classes::is_selected.as_str(), "is-selected"); - let document = Html::parse_fragment(&board); + let document = Html::parse_fragment(board.as_str()); + assert_eq!(document.select(&selector(".lanes > section.lane")).count(), 3); let lane = document .select(&selector(r#"section.lane[data-lane="compiler"]"#)) .next() @@ -617,6 +646,27 @@ mod tests { assert_eq!(selected_card.value().attr("class"), Some("work-card is-selected")); } + // req: html_safety/002 req: view/001 req: test/005 + #[test] + fn inspector_payload_is_rendered_by_a_hemplate_view() { + let html = render_inspector(&DemoState::default()); + let document = Html::parse_fragment(html.as_str()); + let hero = document + .select(&selector(".inspector-hero")) + .next() + .expect("selected inspector hero renders"); + assert_eq!( + hero.select(&selector("span")) + .next() + .map(|span| span.text().collect::()), + Some("Selected issue".to_owned()) + ); + assert_eq!(document.select(&selector(".inspector-row")).count(), 3); + assert!(document + .select(&selector("code")) + .any(|code| code.text().collect::().contains("EffectBatch"))); + } + // req: html_safety/002 req: view/001 req: test/005 #[test] fn live_feed_payload_is_rendered_by_a_hemplate_view() { diff --git a/examples/techdemo/templates/app_shell.css b/examples/techdemo/templates/app_shell.css new file mode 100644 index 0000000..9521501 --- /dev/null +++ b/examples/techdemo/templates/app_shell.css @@ -0,0 +1,53 @@ +:root { color-scheme: dark; --bg:#070814; --panel:rgba(255,255,255,.08); --line:rgba(255,255,255,.16); --text:#f7f7ff; --muted:#aeb3d8; --hot:#ff4fd8; --cyan:#44e7ff; --lime:#b8ff5a; --amber:#ffd166; } +* { box-sizing:border-box; min-width:0; } +html { font-feature-settings:"cv02","cv03","cv04","ss01"; text-rendering:geometricPrecision; } +body { margin:0; min-height:100vh; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color:var(--text); background: radial-gradient(circle at 12% 8%, rgba(68,231,255,.28), transparent 28rem), radial-gradient(circle at 82% 4%, rgba(255,79,216,.22), transparent 24rem), radial-gradient(circle at 70% 70%, rgba(184,255,90,.08), transparent 30rem), linear-gradient(135deg, #070814 0%, #111534 55%, #080916 100%); overflow-x:hidden; } +body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, black, transparent); } +main { width:min(1180px, calc(100vw - 32px)); margin:0 auto; padding:38px 0 56px; } +.hero-shell { display:grid; grid-template-columns:1.35fr .85fr; gap:22px; align-items:stretch; } +.hero-copy, .hero-panel, .command-card, .board-card, .glass-card, .topology { border:1px solid var(--line); background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); box-shadow:0 24px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(22px) saturate(145%); border-radius:28px; } +.hero-copy { padding:34px; overflow:hidden; position:relative; } +.hero-copy::after { content:"EffectBatch"; position:absolute; right:-18px; bottom:8px; font-size:86px; font-weight:900; color:rgba(255,255,255,.045); } +.eyebrow { color:var(--cyan); text-transform:uppercase; letter-spacing:.2em; font-weight:800; font-size:12px; } +h1 { font-size:clamp(42px, 7vw, 84px); line-height:.88; letter-spacing:-.075em; margin:12px 0 18px; max-width:900px; text-wrap:balance; overflow-wrap:anywhere; } +h2 { margin:0 0 16px; letter-spacing:-.035em; } +.lede { color:var(--muted); font-size:19px; line-height:1.55; max-width:720px; } +.hero-panel { padding:24px; } +.metrics { display:grid; gap:14px; } +.metric { border:1px solid var(--line); border-radius:22px; padding:18px; background:rgba(0,0,0,.18); } +.metric strong { display:block; font-size:34px; line-height:1; } +.metric span { color:var(--muted); font-size:13px; } +.topology { display:flex; gap:10px; margin:18px 0; padding:10px; } +.topology a { color:var(--text); text-decoration:none; padding:12px 16px; border-radius:18px; background:rgba(255,255,255,.08); } +.workspace { display:grid; grid-template-columns:360px 1fr; gap:18px; } +.command-card, .board-card, .glass-card { padding:22px; } +label { display:grid; gap:8px; color:var(--muted); font-size:13px; margin:12px 0; } +input, select, button { width:100%; border:1px solid var(--line); border-radius:16px; color:var(--text); background:rgba(2,4,18,.55); padding:13px 14px; font:inherit; outline:none; transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } +input:focus, select:focus { border-color:rgba(68,231,255,.75); box-shadow:0 0 0 4px rgba(68,231,255,.11); } +button { cursor:pointer; font-weight:800; background:linear-gradient(135deg, rgba(68,231,255,.25), rgba(255,79,216,.22)); } +.primary-action { background:linear-gradient(135deg, var(--cyan), var(--hot)); color:#050610; border:0; box-shadow:0 16px 42px rgba(68,231,255,.24); } +button:hover { border-color:rgba(68,231,255,.7); transform:translateY(-1px); box-shadow:0 14px 40px rgba(0,0,0,.24); } +.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; } +.notice { color:var(--lime); min-height:1.4em; } +.section-heading { display:flex; justify-content:space-between; gap:12px; color:var(--muted); margin-bottom:14px; } +.section-heading strong { color:var(--cyan); } +.lanes { display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr)); gap:14px; align-items:start; } +.work-card header { display:flex; justify-content:space-between; gap:10px; align-items:start; } +.pill { display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:12px; color:var(--lime); } +.impact { height:7px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin:12px 0; } +.impact i { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--hot)); } +.card-actions { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } +.card-actions button { padding:9px 10px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.insight-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:18px; } +.glass-card { min-height:220px; } +.glow { box-shadow:0 0 0 1px rgba(184,255,90,.12), 0 24px 90px rgba(184,255,90,.08); } +.activity { display:grid; gap:10px; padding:0; margin:0; list-style:none; } +.activity li, .inspector-row, .live-row { border:1px solid var(--line); border-radius:16px; padding:12px; background:rgba(0,0,0,.18); color:var(--muted); overflow-wrap:anywhere; } +.inspector-hero { border:1px solid rgba(68,231,255,.35); border-radius:20px; padding:16px; margin-bottom:12px; background:linear-gradient(135deg, rgba(68,231,255,.15), rgba(255,79,216,.1)); } +.inspector-hero span { display:block; color:var(--cyan); font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:900; } +.inspector-hero strong { display:block; font-size:22px; letter-spacing:-.035em; margin-top:8px; overflow-wrap:anywhere; } +.inspector-hero em { display:block; color:var(--muted); font-style:normal; margin-top:6px; } +.inspector-row b { color:var(--text); } +.live-row strong { color:var(--lime); } +code { color:var(--cyan); } +@media (max-width: 920px) { .hero-shell,.workspace,.insight-grid { grid-template-columns:1fr; } .lanes { grid-template-columns:1fr; } } \ No newline at end of file diff --git a/examples/techdemo/templates/app_shell.heml b/examples/techdemo/templates/app_shell.heml new file mode 100644 index 0000000..d21bd63 --- /dev/null +++ b/examples/techdemo/templates/app_shell.heml @@ -0,0 +1,12 @@ + + + + + + slhx Techdemo + + + + +{+= self.body =+} + diff --git a/examples/techdemo/templates/control_center.heml b/examples/techdemo/templates/control_center.heml index fac86cf..bb72309 100644 --- a/examples/techdemo/templates/control_center.heml +++ b/examples/techdemo/templates/control_center.heml @@ -5,7 +5,7 @@

A Linear-class work system without a frontend framework.

Create, inspect, advance, and stream work through native HTML, generated typed resources, and compact EffectBatches. The UI feels app-grade; the model stays server-owned and boring.

-
__HERO__
+
{+= self.hero =+}