tmk241/hemx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(api): streamline generated app authoring

Browse Source 
Move the canonical examples toward generated component-root helpers, typed form decoding, async/state handler registration, and derive-driven app/component registry wiring. Tighten requirements and diagnostics for the server-first, selectorless authoring path.

Verified with cargo run -p slhx-xtask -- test, cargo check --workspace, redgate list, redgate refs, redgate health --strict, and git diff --check.

req: canonical/001

req: canonical/003

req: canonical/004

req: dx/002

req: derive_app/001

req: component/003

req: form/004

req: axum_integration/003
This commit is contained in:
slhx agent
2026-06-05 06:33:41 +02:00
parent eb6086616c
commit d4e865ef92
34 changed files with 4573 additions and 1156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/techdemo/src/lib.rs
+14 -17
View File
@@ -3,11 +3,11 @@ pub mod ui {}
#[cfg(test)]
mod tests {
use super::ui::control_center::{forms, handles, slots, targets};
use super::ui::issue_card::handles as card_handles;
use super::ui::control_center::{hero_metrics, launch_work, launch_work_form, notice};
use super::ui::issue_card::advance_work;
use super::ui::issue_lane::events as lane_events;
use hemplate::Hemplate;
use slhx::{Effect, IntoEffect, Payload};
use slhx::IntoEffect;
use slhx_test::inspect;
#[derive(Hemplate)]
@@ -30,14 +30,14 @@ mod tests {
fn techdemo_uses_generated_slots_for_multi_target_updates() {
fn update() -> impl IntoEffect {
(
targets::hero_metrics.put(&FastMetric { label: "fast" }),
slots::notice.text("typed"),
hero_metrics.put(&FastMetric { label: "fast" }),
notice.text("typed"),
)
}
let batch = inspect(update());
assert!(batch.has_slot(slots::hero_metrics));
assert!(batch.has_slot(slots::notice));
assert!(batch.has_target(hero_metrics));
assert!(batch.has_target(notice));
}
// req: examples/001 req: form/001 req: form/004 req: form/006 req: derive_handler/003
@@ -45,22 +45,21 @@ mod tests {
fn techdemo_form_handler_is_checked_against_hemplate_form() {
#[slhx::handler]
fn launch_work(_form: slhx::Form<LaunchWork>) -> impl IntoEffect {
slots::notice.text("queued")
notice.text("queued")
}
let batch = inspect(launch_work(LaunchWork::FORM));
assert!(batch.has_slot(slots::notice));
assert!(matches!(batch.ops(), [Effect::Put { payload: Payload::Text(_), .. }]));
assert!(batch.updates_text(notice));
}
// req: examples/001 req: form/002 req: codegen/003
#[test]
fn techdemo_exports_form_and_interaction_handles() {
assert_ne!(handles::launch_work.id(), card_handles::advance_work.id());
assert_ne!(launch_work.id(), advance_work.id());
assert_eq!(
forms::launch_work.field("title").resource,
forms::launch_work.id()
launch_work_form.field("title").resource,
launch_work_form.id()
);
}
@@ -68,9 +67,7 @@ mod tests {
#[test]
fn techdemo_exports_generated_event_constants() {
assert_eq!(lane_events::drop.as_str(), "drop");
assert!(matches!(
slhx::event(lane_events::drop, "card-1"),
Effect::Emit { name, payload } if name == "drop" && payload == "card-1"
));
let event = inspect(lane_events::drop.emit("card-1"));
assert!(event.emits("drop", "card-1"));
}
}
examples/techdemo/src/main.rs
+197 -79
View File
@@ -1,18 +1,18 @@
use axum::extract::{Query, State};
use axum::http::StatusCode;
use axum::response::IntoResponse;
use axum::routing::get;
use axum::Router;
use futures_util::{stream, StreamExt};
use hemplate::Hemplate;
use slhx::{CssClass, CssClasses, IntoEffect, SafeHtml};
use slhx::{CssClass, CssClasses, EventName, Html, IntoEffect};
use slhx_axum::{
interactions, runtime_js, sse, DispatchRegistry, DispatchRejection, EffectResponse,
InteractionRequest, PageRequest,
};
use slhx_techdemo::ui;
use slhx_techdemo::ui::control_center::{classes, forms, handles, slots, targets};
use slhx_techdemo::ui::issue_card::handles as card_handles;
use slhx_techdemo::ui::issue_lane::handles as lane_handles;
use slhx_techdemo::ui::control_center::{self as control, classes};
use slhx_techdemo::ui::{issue_card as card_control, issue_lane as lane_control};
use std::collections::{BTreeMap, VecDeque};
use std::convert::Infallible;
use std::net::SocketAddr;
@@ -24,6 +24,7 @@ const LANES: [(&str, &str, &str); 3] = [
("runtime", "Runtime", "typed updates → DOM"),
("product", "Product", "Native UX, zero app JS"),
];
const ISLAND_ORBIT: EventName = EventName::new("slhx:island-orbit");
#[derive(Clone)]
struct WorkItem {
@@ -73,9 +74,27 @@ impl Default for DemoState {
let mut state = Self {
next_id: 4,
work: vec![
WorkItem { id: 1, title: "Compile checked handles".into(), lane: 0, impact: 9, stage: Stage::Shipped },
WorkItem { id: 2, title: "Stream typed presence".into(), lane: 1, impact: 7, stage: Stage::Active },
WorkItem { id: 3, title: "Replace dashboard widgets".into(), lane: 2, impact: 8, stage: Stage::Draft },
WorkItem {
id: 1,
title: "Compile checked handles".into(),
lane: 0,
impact: 9,
stage: Stage::Shipped,
},
WorkItem {
id: 2,
title: "Stream typed presence".into(),
lane: 1,
impact: 7,
stage: Stage::Active,
},
WorkItem {
id: 3,
title: "Replace dashboard widgets".into(),
lane: 2,
impact: 8,
stage: Stage::Draft,
},
],
activity: VecDeque::new(),
spotlight: "No selectors. Generated resources address every target.".into(),
@@ -128,22 +147,22 @@ struct BoardLanes {
#[derive(Hemplate)]
struct ControlCenter {
hero: SafeHtml,
board: SafeHtml,
inspector: SafeHtml,
activity: SafeHtml,
hero: Html,
board: Html,
inspector: Html,
activity: Html,
island_snapshot: String,
}
#[derive(Hemplate)]
struct AppShell {
body: SafeHtml,
body: Html,
}
#[derive(Hemplate)]
#[hemplate = "partials"]
struct InspectorPanel {
selected: SafeHtml,
selected: Html,
spotlight: String,
}
@@ -199,11 +218,14 @@ struct HeroMetrics {
#[tokio::main]
async fn main() {
let state = Arc::new(Shared { demo: Mutex::new(DemoState::default()) });
let state = Arc::new(Shared {
demo: Mutex::new(DemoState::default()),
});
let app = Router::new()
.route("/", get(home).post(interact))
.route("/architecture", get(architecture))
.route("/events", get(events))
.route("/favicon.ico", get(favicon))
.route("/slhx.js", get(runtime))
.route("/app.css", get(app_css))
.route("/control_center.css", get(control_center_css))
@@ -247,16 +269,29 @@ async fn runtime() -> impl IntoResponse {
runtime_js()
}
async fn favicon() -> StatusCode {
StatusCode::NO_CONTENT
}
async fn app_css() -> impl IntoResponse {
([("content-type", "text/css; charset=utf-8")], include_str!("../templates/app_shell.css"))
(
[("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"))
(
[("content-type", "text/css; charset=utf-8")],
include_str!("../templates/control_center.css"),
)
}
async fn island_js() -> impl IntoResponse {
([("content-type", "text/javascript; charset=utf-8")], include_str!("../templates/island.js"))
(
[("content-type", "text/javascript; charset=utf-8")],
include_str!("../templates/island.js"),
)
}
async fn interact(
@@ -269,14 +304,20 @@ async fn interact(
// req: push/001 req: push/003 req: examples/001
async fn events(Query(params): Query<BTreeMap<String, String>>) -> impl IntoResponse {
if params.contains_key("once") {
let effect = targets::live_feed.put(&LiveFeed { tick: 1 });
return sse(stream::iter([Ok::<_, Infallible>(effect.into_batch(ui::BUILD_FINGERPRINT))]).boxed());
let effect = control::live_feed.put(&LiveFeed { tick: 1 });
return sse(stream::iter([Ok::<_, Infallible>(
effect.into_batch(ui::BUILD_FINGERPRINT),
)])
.boxed());
}
let batches = stream::unfold(1_u64, |tick| async move {
tokio::time::sleep(Duration::from_secs(4)).await;
let effect = targets::live_feed.put(&LiveFeed { tick });
Some((Ok::<_, Infallible>(effect.into_batch(ui::BUILD_FINGERPRINT)), tick + 1))
let effect = control::live_feed.put(&LiveFeed { tick });
Some((
Ok::<_, Infallible>(effect.into_batch(ui::BUILD_FINGERPRINT)),
tick + 1,
))
})
.boxed();
sse(batches)
@@ -284,7 +325,7 @@ async fn events(Query(params): Query<BTreeMap<String, String>>) -> impl IntoResp
fn registry(shared: Arc<Shared>) -> impl DispatchRegistry {
interactions(ui::BUILD_FINGERPRINT)
.on(handles::launch_work, {
.on(control::launch_work, {
let shared = shared.clone();
move |form| {
// req: form/002 req: examples/001
@@ -303,7 +344,7 @@ fn registry(shared: Arc<Shared>) -> impl DispatchRegistry {
demo_effects(&demo, "Launch accepted · 4 targets updated")
}
})
.on(card_handles::advance_work, {
.on(card_control::advance_work, {
let shared = shared.clone();
move |form| {
// req: list/003 req: examples/001
@@ -321,7 +362,7 @@ fn registry(shared: Arc<Shared>) -> impl DispatchRegistry {
demo_effects(&demo, "Pipeline advanced")
}
})
.on(lane_handles::move_to_lane, {
.on(lane_control::move_to_lane, {
let shared = shared.clone();
move |form| {
// req: list/003 req: examples/001
@@ -343,7 +384,7 @@ fn registry(shared: Arc<Shared>) -> impl DispatchRegistry {
demo_effects(&demo, "Drag-and-drop move persisted")
}
})
.on(card_handles::delete_work, {
.on(card_control::delete_work, {
let shared = shared.clone();
move |form| {
// req: list/003 req: examples/001
@@ -362,7 +403,7 @@ fn registry(shared: Arc<Shared>) -> impl DispatchRegistry {
demo_effects(&demo, "Card removed")
}
})
.on(card_handles::spotlight_work, {
.on(card_control::spotlight_work, {
let shared = shared.clone();
move |form| {
// req: examples/001
@@ -377,23 +418,23 @@ fn registry(shared: Arc<Shared>) -> impl DispatchRegistry {
demo_effects(&demo, "Inspector focused")
}
})
.on(handles::simulate_push, {
.on(control::simulate_push, {
let shared = shared.clone();
move |_| {
// req: push/003 req: examples/001
let mut demo = shared.demo.lock().unwrap();
demo.log("Simulated push event produced the same generated update shape");
(
targets::live_feed.put(&LiveFeed {
control::live_feed.put(&LiveFeed {
tick: demo.activity.len() as u64,
}),
targets::activity.put(&activity_view(&demo)),
slots::notice.text("Push simulated · no client app code"),
slhx::event("slhx:island-orbit", island_snapshot(&demo)),
control::activity.put(&activity_view(&demo)),
control::notice.text("Push simulated · no client app code"),
ISLAND_ORBIT.emit(island_snapshot(&demo)),
)
}
})
.on(handles::reset_demo, {
.on(control::reset_demo, {
let shared = shared.clone();
move |_| {
// req: examples/001
@@ -404,7 +445,11 @@ fn registry(shared: Arc<Shared>) -> impl DispatchRegistry {
})
}
fn update_work(demo: &mut DemoState, id: Option<u64>, update: impl FnOnce(&mut WorkItem)) -> Option<String> {
fn update_work(
demo: &mut DemoState,
id: Option<u64>,
update: impl FnOnce(&mut WorkItem),
) -> Option<String> {
let id = id?;
let item = demo.work.iter_mut().find(|item| item.id == id)?;
let title = item.title.clone();
@@ -414,26 +459,37 @@ fn update_work(demo: &mut DemoState, id: Option<u64>, update: impl FnOnce(&mut W
fn demo_effects(demo: &DemoState, notice: &'static str) -> impl IntoEffect {
(
targets::hero_metrics.put(&hero_view(demo)),
targets::board.put(&board_view(demo)),
targets::activity.put(&activity_view(demo)),
targets::inspector.put(&inspector_view(demo)),
slots::notice.text(notice),
forms::launch_work.clear("title"),
slhx::event("slhx:island-orbit", island_snapshot(demo)),
control::hero_metrics.put(&hero_view(demo)),
control::board.put(&board_view(demo)),
control::activity.put(&activity_view(demo)),
control::inspector.put(&inspector_view(demo)),
control::notice.text(notice),
control::launch_work_form.clear(),
ISLAND_ORBIT.emit(island_snapshot(demo)),
)
}
fn parse_lane(value: Option<&str>) -> usize {
let value = value.unwrap_or(LANES[0].0);
LANES.iter().position(|(id, _, _)| *id == value).unwrap_or(0)
LANES
.iter()
.position(|(id, _, _)| *id == value)
.unwrap_or(0)
}
fn island_snapshot(demo: &DemoState) -> String {
// Opaque leaf-widget bridge: compact server snapshot in, native CustomEvent out.
// req: interop/001 req: examples/001
let active = demo.work.iter().filter(|item| item.stage == Stage::Active).count();
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 shipped = demo
.work
.iter()
.filter(|item| item.stage == Stage::Shipped)
.count();
let impact: u64 = demo.work.iter().map(|item| item.impact as u64).sum();
format!(
"{}|{}|{}|{} active · {} shipped · {} activity rows",
@@ -446,7 +502,7 @@ fn island_snapshot(demo: &DemoState) -> String {
)
}
fn page_html(demo: &DemoState) -> SafeHtml {
fn page_html(demo: &DemoState) -> Html {
// req: html_safety/002 req: view/001
render_control_center(ControlCenter {
hero: render_hero(demo),
@@ -457,15 +513,23 @@ fn page_html(demo: &DemoState) -> SafeHtml {
})
}
fn shell(body: SafeHtml) -> SafeHtml {
fn shell(body: Html) -> Html {
// req: html_safety/001 req: html_safety/002 req: axum_integration/001 req: component/003
ui::app_shell::render(&AppShell { body })
}
fn hero_view(demo: &DemoState) -> HeroMetrics {
// 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 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();
HeroMetrics {
resource_count: 13,
@@ -475,7 +539,7 @@ fn hero_view(demo: &DemoState) -> HeroMetrics {
}
}
fn render_hero(demo: &DemoState) -> SafeHtml {
fn render_hero(demo: &DemoState) -> Html {
// req: html_safety/002 req: view/001 req: component/003
ui::render(&hero_view(demo))
}
@@ -519,7 +583,7 @@ fn activity_view(demo: &DemoState) -> ActivityFeed {
}
}
fn render_activity(demo: &DemoState) -> SafeHtml {
fn render_activity(demo: &DemoState) -> Html {
// req: html_safety/002 req: view/001 req: component/003
ui::render(&activity_view(demo))
}
@@ -546,32 +610,32 @@ fn inspector_view(demo: &DemoState) -> InspectorPanel {
}
}
fn render_inspector(demo: &DemoState) -> SafeHtml {
fn render_inspector(demo: &DemoState) -> Html {
// req: html_safety/002 req: view/001 req: component/003
ui::render(&inspector_view(demo))
}
fn architecture_hero() -> SafeHtml {
fn architecture_hero() -> Html {
// req: html_safety/002 req: view/001
ui::render(&ArchitectureHero)
}
fn architecture_board() -> SafeHtml {
fn architecture_board() -> Html {
// req: html_safety/002 req: view/001
ui::render(&ArchitectureBoard)
}
fn architecture_inspector() -> SafeHtml {
fn architecture_inspector() -> Html {
// req: html_safety/002 req: view/001
ui::render(&ArchitectureInspector)
}
fn architecture_activity() -> SafeHtml {
fn architecture_activity() -> Html {
// req: html_safety/002 req: view/001
ui::render(&ArchitectureActivity)
}
fn render_control_center(page: ControlCenter) -> SafeHtml {
fn render_control_center(page: ControlCenter) -> Html {
// req: html_safety/002 req: view/001 req: component/003
ui::render(&page)
}
@@ -597,11 +661,36 @@ mod tests {
.map(|title| title.text().collect::<String>()),
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_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("{+="));
}
@@ -615,13 +704,29 @@ mod tests {
assert!(!html.contains("__ACTIVITY__"));
let document = Html::parse_fragment(html.as_str());
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("[data-slhx-root=\"techdemo\"]"))
.count(),
1
);
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);
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
@@ -629,7 +734,9 @@ mod tests {
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::<Vec<_>>();
let metrics = document
.select(&selector(".metrics > .metric"))
.collect::<Vec<_>>();
assert_eq!(metrics.len(), 4);
assert_eq!(
metrics[0]
@@ -638,9 +745,10 @@ mod tests {
.map(|span| span.text().collect::<String>()),
Some("generated resources on this page".to_owned())
);
assert!(metrics
.iter()
.any(|metric| metric.text().collect::<String>().contains("aggregate impact score")));
assert!(metrics.iter().any(|metric| metric
.text()
.collect::<String>()
.contains("aggregate impact score")));
}
// req: style/001 req: style/002 req: style/003 req: test/005
@@ -652,7 +760,10 @@ mod tests {
assert_eq!(classes::is_selected.as_str(), "is-selected");
let document = Html::parse_fragment(board.as_str());
assert_eq!(document.select(&selector(".lanes > section.lane")).count(), 3);
assert_eq!(
document.select(&selector(".lanes > section.lane")).count(),
3
);
let lane = document
.select(&selector(r#"section.lane[data-lane="compiler"]"#))
.next()
@@ -663,7 +774,10 @@ mod tests {
.select(&selector(r#"article.work-card.is-selected[data-key="2"]"#))
.next()
.expect("selected work card renders");
assert_eq!(selected_card.value().attr("class"), Some("work-card is-selected"));
assert_eq!(
selected_card.value().attr("class"),
Some("work-card is-selected")
);
}
// req: html_safety/002 req: view/001 req: test/005
@@ -684,7 +798,7 @@ mod tests {
assert_eq!(document.select(&selector(".inspector-row")).count(), 3);
assert!(document
.select(&selector("code"))
.any(|code| code.text().collect::<String>().contains("targets::*")));
.any(|code| code.text().collect::<String>().contains("control::*")));
}
// req: html_safety/002 req: view/001 req: test/005
@@ -698,16 +812,16 @@ mod tests {
.expect("live feed row renders");
let text = row.text().collect::<String>();
assert!(text.contains("SSE tick #7"));
assert!(row
.select(&selector("code"))
.any(|code| code.text().collect::<String>() == "slots::live_feed"));
assert!(text.contains("live feed target"));
assert_eq!(row.select(&selector("code")).count(), 0);
}
// req: html_safety/002 req: view/001 req: test/005
#[test]
fn activity_payload_is_rendered_by_a_hemplate_view() {
let mut demo = DemoState::default();
demo.activity.push_back("<b>escaped activity</b>".to_owned());
demo.activity
.push_back("<b>escaped activity</b>".to_owned());
let html = render_activity(&demo);
let document = Html::parse_fragment(html.as_str());
@@ -753,7 +867,9 @@ mod tests {
.next()
.expect("architecture inspector row renders");
assert_eq!(
row.select(&selector("b")).next().map(|b| b.text().collect::<String>()),
row.select(&selector("b"))
.next()
.map(|b| b.text().collect::<String>()),
Some("Page swap".to_owned())
);
assert!(row
@@ -786,7 +902,9 @@ mod tests {
fn architecture_board_is_rendered_by_a_hemplate_view() {
let html = architecture_board();
let document = Html::parse_fragment(html.as_str());
let lanes = document.select(&selector(".lanes > section.lane")).collect::<Vec<_>>();
let lanes = document
.select(&selector(".lanes > section.lane"))
.collect::<Vec<_>>();
assert_eq!(lanes.len(), 3);
assert_eq!(
lanes[0]