QHTML WASM Signals Visual Test 04
Each section focuses on q-signal, on<signal> hooks, q-connect, q-class JavaScript signals, and property changed hooks.
1. on<signal>(param) lifecycle hook
q-component signal-lifecycle-card {
q-signal completed(message)
oncompleted(message) {
this.querySelector("#signal-lifecycle-out").textContent = String(message);
this.querySelector("#signal-lifecycle-out").className = "pass";
}
onready {
this.completed("PASSED");
}
div#signal-lifecycle-out { text { waiting } }
}
signal-lifecycle-card { }
2. object.<signal>(param) from JavaScript
q-component signal-object-call-card {
q-signal manual(message)
onmanual(message) {
this.querySelector("#object-call-out").textContent = String(message);
this.querySelector("#object-call-out").className = "pass";
}
onready {
this.manual("PASSED");
}
div#object-call-out { text { waiting } }
}
signal-object-call-card { }
3. q-connect direct in scope
q-component direct-sender {
q-signal sent(message)
function sendNow(message) {
this.sent(message);
}
}
q-component direct-receiver {
function accept(message) {
this.querySelector("#direct-connect-out").textContent = String(message);
this.querySelector("#direct-connect-out").className = "pass";
}
div#direct-connect-out { text { waiting } }
}
direct-sender directSender { }
direct-receiver directReceiver { }
q-connect { directSender.sent directReceiver.accept }
q-component direct-driver {
onready {
directSender.sendNow("PASSED");
}
}
direct-driver obj1 { }
4. q-connect with this.<signal>(param)
q-component internal-connect-card {
q-signal internalPing(message)
function mark(message) {
this.querySelector("#internal-connect-out").textContent = String(message);
this.querySelector("#internal-connect-out").className = "pass";
}
q-connect { this.internalPing this.mark }
onready {
this.internalPing("PASSED");
}
div#internal-connect-out { text { waiting } }
}
internal-connect-card { }
5. q-connect receiver through dot walking
q-class routeHolder {
routeHolder(target) {
this.target = target;
}
}
q-component dotwalk-sender {
q-signal routed(message)
function fire(message) {
this.routed(message);
}
}
q-component dotwalk-receiver {
function capture(message) {
this.querySelector("#dotwalk-connect-out").textContent = String(message);
this.querySelector("#dotwalk-connect-out").className = "pass";
}
div#dotwalk-connect-out { text { waiting } }
}
dotwalk-sender dotSender { }
dotwalk-receiver dotReceiver { }
routeHolder routes { target: dotReceiver }
q-connect { dotSender.routed routes.target.capture }
q-component dotwalk-driver {
onready {
dotSender.fire("PASSED");
}
}
dotwalk-driver { }
6. q-class JavaScript signal into QHTML JavaScript
q-class wasmSignalSource {
q-signal fromWasm(payload)
function emitFromWasm(payload) {
this.fromWasm(payload);
}
}
q-component wasm-signal-receiver {
function accept(payload) {
this.querySelector("#wasm-to-js-out").textContent = String(payload.message);
this.querySelector("#wasm-to-js-out").className = "pass";
}
div#wasm-to-js-out { text { waiting } }
}
wasmSignalSource wasmSource { }
wasm-signal-receiver wasmReceiver { }
q-connect { wasmSource.fromWasm wasmReceiver.accept }
q-component wasm-signal-driver {
onready {
wasmSource.emitFromWasm({ message: "PASSED" });
}
}
wasm-signal-driver { }
7. QHTML signal into q-class and back
q-class wasmRoundTrip {
q-signal completed(payload)
function receiveFromQhtml(payload) {
this.completed({ message: payload.message });
}
}
q-component qhtml-wasm-roundtrip-card {
q-signal toWasm(payload)
function acceptBack(payload) {
this.querySelector("#qhtml-wasm-roundtrip-out").textContent = String(payload.message);
this.querySelector("#qhtml-wasm-roundtrip-out").className = "pass";
}
div#qhtml-wasm-roundtrip-out { text { waiting } }
}
wasmRoundTrip wasmRoundTripBus { }
qhtml-wasm-roundtrip-card qhtmlRoundTrip { }
q-connect { qhtmlRoundTrip.toWasm wasmRoundTripBus.receiveFromQhtml }
q-connect { wasmRoundTripBus.completed qhtmlRoundTrip.acceptBack }
q-component qhtml-wasm-roundtrip-driver {
onready {
qhtmlRoundTrip.toWasm({ message: "PASSED" });
}
}
qhtml-wasm-roundtrip-driver { }
8. q-class signal connected to q-component function
q-class classSignalModel {
q-signal fired(message)
function fire(message) {
this.fired(message);
}
}
q-component class-signal-view {
function show(message) {
this.querySelector("#class-signal-out").textContent = String(message);
this.querySelector("#class-signal-out").className = "pass";
}
div#class-signal-out { text { waiting } }
}
classSignalModel classModel { }
class-signal-view classSignalView { }
q-connect { classModel.fired classSignalView.show }
q-component class-signal-driver {
onready {
classModel.fire("PASSED");
}
}
class-signal-driver { }
9. q-component signal connected to q-class function
q-class classSignalSink {
q-signal confirmed(message)
function receive(message) {
this.confirmed(message);
}
}
q-component component-signal-source {
q-signal submitted(message)
function complete(message) {
this.querySelector("#component-to-class-out").textContent = String(message);
this.querySelector("#component-to-class-out").className = "pass";
}
div#component-to-class-out { text { waiting } }
}
classSignalSink classSink { }
component-signal-source componentSource { }
q-connect { componentSource.submitted classSink.receive }
q-connect { classSink.confirmed componentSource.complete }
q-component component-to-class-driver {
onready {
componentSource.submitted("PASSED");
}
}
component-to-class-driver { }
10. on<q-property>changed(param)
q-component property-changed-signal-card {
q-property status: "waiting"
onstatuschanged(message) {
this.querySelector("#property-changed-out").textContent = String(message);
this.querySelector("#property-changed-out").className = "pass";
}
onready {
this.status = "PASSED";
}
div#property-changed-out { text { waiting } }
}
property-changed-signal-card { }