QHTML WASM Components Visual Test 02
Each section mirrors one feature item from doc/03-components/index.html. A visible green PASSED marker is enough for human review.
1. Basic component structure
q-component basic-structure {
div.pass { text { PASSED } }
}
basic-structure obj { }
2. Instantiation
q-component instantiatedcard {
div.pass { text { PASSED } }
}
instantiatedcard obj { }
3. Named instances
q-component named-card {
q-property label: "PASSED"
div.pass { text { ${label} } }
}
named-card card1 { }
4. q-properties
q-component property-card {
q-property title: "PASSED"
div.pass { text { ${title} } }
}
property-card obj3 { }
5. Accessing q-properties from JavaScript
q-component js-property-card {
q-property count: 0
oncountchanged(value) {
if (Number(value) !== 1) {
throw new Error("Expected count to change to 1, got " + value);
}
this.querySelector("#count-out").textContent = "PASSED";
this.querySelector("#count-out").className = "pass";
}
onready {
this.count = this.count + 1;
console.log("count is" + this.count)
}
div#count-out { text { waiting } }
}
js-property-card obj4 { }
6a. Scope and context
q-component comp-a {
q-property value: "PASSED"
}
comp-a rootA { }
q-component comp-b {
q-property fromRoot: rootA.value
div.pass { text { ${fromRoot} } }
}
comp-b { }
6b. Named references declaratively
q-component source-box {
q-property title: "PASSED"
}
source-box source1 { }
q-component target-box {
q-property copiedTitle: source1.title
div.pass { text { ${copiedTitle} } }
}
target-box { }
6c. Dot walking
q-component catalog-store {
q-property title: "PASSED"
q-property currency: "USD"
}
catalog-store store1 { }
div.pass { text { ${store1.title} (${store1.currency}) } }
7. Dynamic components with a slot
q-component panel-box {
div.slot-shell {
h3 { text { Panel shell } }
slot { body }
}
}
panel-box {
body {
div.pass { text { PASSED } }
}
}
7b. Slot defaults
q-component notice-card {
q-slot-default body {
div.pass { text { PASSED default } }
}
article {
slot { body }
}
}
div.notice-row {
notice-card { }
notice-card { body { div.pass { text { PASSED custom } } } }
notice-card { body { } }
div.pass { text { PASSED empty slot } }
}
8. q-signals
q-component signal-declaration-card {
q-signal sent(message)
onready {
this.sent("PASSED");
this.querySelector("#signal-declared").textContent = "PASSED";
this.querySelector("#signal-declared").className = "pass";
}
div#signal-declared { text { waiting } }
}
signal-declaration-card { }
9. on<signal> handlers
q-component signal-handler-card {
q-signal sent(message)
onsent(message) {
this.querySelector("#signal-out").textContent = String(message);
this.querySelector("#signal-out").className = "pass";
}
onready {
this.sent("PASSED");
}
div#signal-out { text { waiting } }
}
signal-handler-card { }
10. q-connect
q-component connect-sender {
q-signal sent(message)
function sendNow(message) {
this.sent(message);
}
}
q-component connect-receiver {
q-property value: "waiting"
function onMessage(message) {
this.value = message;
}
onvaluechanged(value) {
this.querySelector("#connect-out").textContent = String(value);
this.querySelector("#connect-out").className = "pass";
}
div#connect-out { text { waiting } }
}
connect-sender sender1 { }
connect-receiver receiver1 { }
q-connect { sender1.sent receiver1.onMessage }
q-component connect-driver {
onready {
sender1.sendNow("PASSED");
}
}
connect-driver { }
11. on<property>changed { }
q-component changed-hook-card {
q-property count: 0
oncountchanged(value) {
if (Number(value) !== 1) {
throw new Error("Expected changed hook value 1, got " + value);
}
this.querySelector("#changed-out").textContent = "PASSED";
this.querySelector("#changed-out").className = "pass";
}
onready {
this.count = 1;
}
div#changed-out { text { waiting } }
}
changed-hook-card { }
12. onready
q-component ready-card {
onready {
this.querySelector("#ready-out").textContent = "PASSED";
this.querySelector("#ready-out").className = "pass";
}
div#ready-out { text { waiting } }
}
ready-card { }