QHTML Syntax Input / Output Board

QHTML Input

div { text { hello-world } }

Expected Output

<div>hello-world</div>

Actual Output + Status

QHTML Input

div#main.container,span.item { text { chain } }

Expected Output

<div id="main" class="container"><span class="item">chain</span></div>

Actual Output + Status

QHTML Input

button.btn#go { data-note: "a:b;c,d" aria-label: "Run" text { Click } }

Expected Output

<button class="btn" id="go" data-note="a:b;c,d" aria-label="Run">Click</button>

Actual Output + Status

QHTML Input

div { text { hello \} world } }

Expected Output

<div>hello } world</div>

Actual Output + Status

QHTML Input

div { text { hello ${"qhtml"} } }

Expected Output

<div>hello qhtml</div>

Actual Output + Status

QHTML Input

q-component bind-a {
  q-property divText: q-bind { return "bound-" + (2 + 3) }
  div { text { ${this.component.divText} } }
}
bind-a { }

Expected Output

<bind-a><div>bound-5</div></bind-a>

Actual Output + Status

QHTML Input

q-rewrite make-strong {
  slot { input }
  return { strong { q-script { return String(this.slot("input")); } } }
}
div { make-strong { rewrite-ok } }

Expected Output

<div><strong>rewrite-ok</strong></div>

Actual Output + Status

QHTML Input

q-macro badge {
  slot { label }
  return { span.badge { text { ${this.slot("label")} } } }
}
div { badge { label { macro-ok } } }

Expected Output

<div><span class="badge">macro-ok</span></div>

Actual Output + Status

QHTML Input

q-template shell {
  div.shell { slot { body } }
}
shell { body { p { text { templated } } } }

Expected Output

<div class="shell"><p>templated</p></div>

Actual Output + Status

QHTML Input

q-component card-a {
  q-property title: "CardTitle"
  div.card {
    h4 { text { ${this.component.title} } }
    slot { body }
  }
}
card-a { body { p { text { body-copy } } } }

Expected Output

contains: CardTitle, body-copy

Actual Output + Status

QHTML Input

q-component sig-a {
  q-signal ping(message)
  div { text { signal-ready } }
}
sig-a { }

Expected Output

contains: signal-ready

Actual Output + Status

QHTML Input

q-component alias-a {
  q-property p: "alias-ok"
  q-alias a { return this.p }
  div { text { ${this.component.a} } }
}
alias-a { }

Expected Output

contains: alias-ok

Actual Output + Status

QHTML Input

q-keyword component { q-component }
component tiny-a { div { text { alias-keyword } } }
tiny-a { }

Expected Output

contains: alias-keyword

Actual Output + Status

QHTML Input

q-style demo-style {
  backgroundColor: rgb(255, 232, 204)
  color: rgb(120, 53, 15)
}
q-theme demo-theme { .themed { demo-style } }
demo-theme { div.themed { text { themed-output } } }

Expected Output

contains: themed-output, background-color, color

Actual Output + Status

QHTML Input

section#s.one.two,ul.list,li.item { text { selector-stack } }

Expected Output

<section id="s" class="one two"><ul class="list"><li class="item">selector-stack</li></ul></section>

Actual Output + Status

QHTML Input

q-component my-comp {
  q-property jsonData: q-bind { return JSON.stringify({a:[1,2],b:true}) }
  div {
    text { ${this.component.jsonData} }
  }
}
my-comp { }

Expected Output

contains: my-comp, "a":[1,2], "b":true

Actual Output + Status

QHTML Input

q-component method-a {
  function myprop() { return "method-ok"; }
  q-property prop: q-bind { return this.myprop() }
  div { text { ${this.component.prop} } }
}
method-a { }

Expected Output

contains: method-ok

Actual Output + Status

QHTML Input

q-style panel-base {
  backgroundColor: rgb(254, 240, 220)
  color: rgb(120, 50, 30)
}
q-style panel-extend {
  border: 2px solid rgb(120, 50, 30)
}
q-default-theme fallback-theme {
  .theme-box { panel-base }
}
q-theme runtime-theme {
  fallback-theme { }
  .theme-box { panel-extend }
}
runtime-theme {
  div.theme-box { text { default-theme-ok } }
}

Expected Output

contains: default-theme-ok, background-color, border

Actual Output + Status

QHTML Input

div#script-box {
  data-note: q-script { return "n:" + (4 + 1) }
  text { q-script { return "script-inline"; } }
}

Expected Output

<div id="script-box" data-note="n:5">script-inline</div>

Actual Output + Status

QHTML Input

.class {
  div { hello }
  div { world }
}

Expected Output

.
hello
world

Actual Output + Status

QHTML Input

q-style style-a {
  backgroundColor: rgb(230, 240, 255)
  color: rgb(20, 30, 50)
}
q-style style-b {
  border: 1px solid rgb(20, 30, 50)
}
q-style style-c {
  color: rgb(10, 90, 20)
}
q-theme base-theme { .multi { style-a style-b } }
q-theme merged-theme {
  base-theme { }
  .multi { style-c }
}
merged-theme {
  div.multi { text { style-merge-ok } }
}

Expected Output

contains: style-merge-ok, background-color, border, color

Actual Output + Status

QHTML Input

q-component comp2 {
  div#ctx-in-comp2 { text { ${this.component.getAttribute("q-component")} } }
}
q-component qdom-context-case {
  function runCheck() {
    var nestedName = "";
    var result = "qdom-context-fail";
    try {
      var rootApi = this.qdom();
      var span = this.querySelector("#ctx-span");
      var spanApi = span && typeof span.qdom === "function" ? span.qdom() : null;
      var nested = this.querySelector("#ctx-in-comp2");
      var nestedComp = nested ? nested.component : null;
      nestedName = nestedComp && typeof nestedComp.getAttribute === "function" ? String(nestedComp.getAttribute("q-component") || "") : "";
      var nestedApi = nestedComp && typeof nestedComp.qdom === "function" ? nestedComp.qdom() : null;
      var ok = !!(rootApi && spanApi && nestedApi && nestedName === "comp2");
      result = ok ? "qdom-context-ok" : "qdom-context-fail";
    } catch (evt) { }
    this.setAttribute("data-result", result);
    this.setAttribute("data-nested-component", nestedName);
    var statusNode = this.querySelector("#qdom-context-status");
    if (statusNode) { statusNode.textContent = result; }
  }
  onReady { this.runCheck(); }
  div#ctx-span { text { span-ok } }
  comp2 { }
  div#qdom-context-status { text { pending } }
}
qdom-context-case { }

Expected Output

contains: qdom-context-ok, data-nested-component="comp2"

Actual Output + Status

QHTML Input

q-component qdom-mutate-case {
  onReady {
    try { var q = this.qdom(); q.setAttribute("data-flag", "1"); this.qhtmlRoot().update({ force: true, forceBindings: true }); q.setAttribute("data-result", this.getAttribute("data-flag") === "1" ? "qdom-mutate-update-ok" : "qdom-mutate-update-fail"); this.qhtmlRoot().update({ force: true, forceBindings: true }); } catch (evt) { this.setAttribute("data-result", "qdom-mutate-update-fail"); }
  }
  div#mut-target { text { before } }
}
qdom-mutate-case { }

Expected Output

contains: qdom-mutate-update-ok, data-flag="1"

Actual Output + Status

QHTML Input

onReady {
  var self = this;
  try {
    var api = this.qdom();
    var target = api && typeof api.find === "function" ? api.find("#host-qdom-target") : null;
    if (target && typeof target.setAttribute === "function") {
      target.setAttribute("data-host-mut", "1");
    }
    this.update({ force: true, forceBindings: true });
    setTimeout(function () {
      var domTarget = self.querySelector("#host-qdom-target");
      var ok = !!(domTarget && domTarget.getAttribute("data-host-mut") === "1");
      var result = ok ? "host-qdom-update-ok" : "host-qdom-update-fail";
      self.setAttribute("data-result", result);
      var statusNode = self.querySelector("#host-qdom-status");
      if (statusNode) { statusNode.textContent = result; }
    }, 80);
    return;
  } catch (evt) { }
  this.setAttribute("data-result", "host-qdom-update-fail");
  var statusNode = this.querySelector("#host-qdom-status");
  if (statusNode) { statusNode.textContent = "host-qdom-update-fail"; }
}
div#host-qdom-target { text { host-qdom } }
div#host-qdom-status { text { pending } }

Expected Output

contains: host-qdom-update-ok, data-host-mut="1"

Actual Output + Status

QHTML Input

q-style class-style {
  q-style-class { w3-container test-style-class }
  backgroundColor: rgb(224, 242, 254)
  color: rgb(12, 74, 110)
}
class-style,div { text { style-class-ok } }

Expected Output

contains: style-class-ok, test-style-class, background-color

Actual Output + Status

QHTML Input

q-import { qtest-import-sample.qhtml }
import-sample { }

Expected Output

contains: import-ok, import-sample

Actual Output + Status

QHTML Input

q-signal menuItemClicked { slot { itemId } }
div {
  menuItemClicked { itemId { A } }
  p { text { signal-syntax-ok } }
}

Expected Output

contains: signal-syntax-ok

Actual Output + Status

QHTML Input

onReady {
  try {
    var api = this.qdom();
    var ok = !!(api && typeof api.find === "function" && typeof api.show === "function" && typeof api.map === "function");
    this.querySelector("#qdom-method-status").textContent = ok ? "qdom-methods-ok" : "qdom-methods-fail";
  } catch (evt) {
    this.querySelector("#qdom-method-status").textContent = "qdom-methods-fail";
  }
}
div#qdom-method-status { text { pending } }

Expected Output

contains: qdom-methods-ok

Actual Output + Status

QHTML Input

onReady {
  try {
    var api = this.qdom();
    var ok = !!(api && typeof api.serialize === "function" && typeof api.deserialize === "function");
    this.querySelector("#qdom-serde-status").textContent = ok ? "serde-methods-ok" : "serde-methods-fail";
  } catch (evt) {
    this.querySelector("#qdom-serde-status").textContent = "serde-methods-fail";
  }
}
div#qdom-serde-status { text { pending } }

Expected Output

contains: serde-methods-ok

Actual Output + Status

QHTML Input

q-component scoped-update-case {
  onReady {
    try {
      var hasScoped = typeof this.component.update === "function";
      var rootHost = this.component.root && typeof this.component.root === "function" ? this.component.root() : null;
      var hasRoot = !!(rootHost && typeof rootHost.update === "function");
      this.setAttribute("data-result", hasScoped && hasRoot ? "scoped-update-ok" : "scoped-update-fail");
    } catch (evt) {
      this.setAttribute("data-result", "scoped-update-fail");
    }
  }
  div { text { scoped-update-body } }
}
scoped-update-case { }

Expected Output

contains: scoped-update-ok, scoped-update-body

Actual Output + Status

QHTML Input

q-component wasm-syntax-case {
  q-wasm {
    src: "data:application/wasm;base64,AGFzbQEAAAA="
    mode: main
    awaitWasm: false
  }
  div { text { wasm-syntax-ok } }
}
wasm-syntax-case { }

Expected Output

contains: wasm-syntax-ok, wasm-syntax-case

Actual Output + Status

QHTML Input

onReady {
  var inside = this.querySelector("#scope-in");
  var outside = this.querySelector("#scope-out");
  var status = this.querySelector("#scope-status");
  var inStyle = inside && String(inside.getAttribute("style") || "").toLowerCase();
  var outStyle = outside && String(outside.getAttribute("style") || "").toLowerCase();
  var insideRed = inStyle.indexOf("color: red") !== -1;
  var outsideRed = outStyle.indexOf("color: red") !== -1;
  var result = insideRed && !outsideRed ? "theme-scope-ok" : "theme-scope-fail";
  this.setAttribute("data-result", result);
  if (status) { status.textContent = result; }
}
q-style some-style { color: red }
q-theme my-theme { * { some-style } }
my-theme {
  div#scope-in { span { text { inside } } }
}
div#scope-out { text { outside } }
div#scope-status { text { pending } }

Expected Output

contains: theme-scope-ok, scope-out

Actual Output + Status

QHTML Input

q-repeater my-repeater {
  model { q-array { [10,20,30,40,50] } }
  slot { item }
  div,span#spanId,h3 { text { ${item} } }
}

Expected Output

contains: spanId, 10, 50

Actual Output + Status

QHTML Input

q-array arrA { [1,2] }
q-array arrB { [3,4] }
q-array arrC { arrA arrB }
q-foreach concat-loop {
  model { arrC }
  slot { item }
  p.concat-item { text { ${item} } }
}

Expected Output

contains: concat-item, 1, 4

Actual Output + Status

QHTML Input

q-repeater bad-model {
  model { text { not-iterable-fallback } }
  slot { item }
  div.bad-fallback { text { ${item} } }
}

Expected Output

contains: bad-fallback, not-iterable-fallback

Actual Output + Status

QHTML Input

q-object cardObj { div.qobj-card { text { q-object-loop-ok } } }
q-repeater obj-loop {
  model { cardObj }
  slot { item }
  text { ${item} }
}
q-object { div.qobj-anon { text { q-object-anon-ok } } }

Expected Output

contains: q-object-loop-ok, q-object-anon-ok

Actual Output + Status

QHTML Input

onReady {
  var result = "repeater-qdommodel-fail";
  try {
    var root = this.qdom();
    var list = root && root.nodes ? root.nodes : [];
    var rep = null;
    for (var i = 0; i < list.length; i += 1) {
      if (list[i] && list[i].kind === "repeater") {
        rep = list[i];
        break;
      }
    }
    var modelKind = rep && rep.model ? String(rep.model.kind || "") : "";
    var entryCount = rep && rep.model && Array.isArray(rep.model.entries) ? rep.model.entries.length : -1;
    if (rep && modelKind === "model" && entryCount === 3) {
      result = "repeater-qdommodel-ok";
    }
  } catch (err) { }
  var status = this.querySelector("#qdommodel-result");
  if (status) { status.textContent = result; }
}
q-repeater qdom-model-check {
  model { q-array { [1,2,3] } }
  slot { item }
  div.rep-cell { text { ${item} } }
}
div#qdommodel-result { text { pending } }

Expected Output

contains: repeater-qdommodel-ok, rep-cell

Actual Output + Status

QHTML Input

q-repeater tpl-loop {
  model { q-array { [7] } }
  slot { item }
  q-template innerTpl {
    span.tpl-from-repeater { text { tpl-from-repeater-${item} } }
  }
  innerTpl { }
}

Expected Output

contains: tpl-from-repeater-7

Actual Output + Status

QHTML Input

onReady {
  function findById(node, wantedId) {
    if (!node || typeof node !== "object") { return null; }
    var attrs = node.attributes && typeof node.attributes === "object" ? node.attributes : {};
    if (String(attrs.id || "") === String(wantedId || "")) { return node; }
    var childGroups = [];
    if (Array.isArray(node.nodes)) { childGroups.push(node.nodes); }
    if (Array.isArray(node.children)) { childGroups.push(node.children); }
    if (Array.isArray(node.templateNodes)) { childGroups.push(node.templateNodes); }
    for (var g = 0; g < childGroups.length; g += 1) {
      var group = childGroups[g];
      for (var i = 0; i < group.length; i += 1) {
        var found = findById(group[i], wantedId);
        if (found) { return found; }
      }
    }
    return null;
  }
  var status = "uuid-update-fail";
  try {
    var host = this;
    var alphaEl = host.querySelector("#uuid-alpha");
    var betaEl = host.querySelector("#uuid-beta");
    var maps = typeof host.uuidMaps === "function" ? host.uuidMaps() : (host.__qhtmlUuidMaps || null);
    var alphaUuid = "";
    if (maps && maps.domToUuid && alphaEl) {
      try { alphaUuid = String(maps.domToUuid.get(alphaEl) || ""); } catch (uuidErr) { alphaUuid = ""; }
    }
    if (!alphaUuid && typeof host.uuidFor === "function" && alphaEl) {
      alphaUuid = String(host.uuidFor(alphaEl) || "");
    }
    var root = host.qdom();
    var alphaNode = findById(root, "uuid-alpha");
    if (alphaNode && typeof alphaNode.setAttribute === "function") {
      alphaNode.setAttribute("data-state", "updated");
    } else if (alphaNode) {
      if (!alphaNode.attributes || typeof alphaNode.attributes !== "object") { alphaNode.attributes = {}; }
      alphaNode.attributes["data-state"] = "updated";
    }
    var didUpdate = alphaUuid ? host.update(alphaUuid) : false;
    var alphaState = alphaEl ? String(alphaEl.getAttribute("data-state") || "") : "";
    var betaState = betaEl ? String(betaEl.getAttribute("data-state") || "") : "";
    if (alphaUuid && didUpdate && alphaState === "updated" && betaState === "") {
      status = "uuid-update-ok";
    }
  } catch (err) { }
  var resultNode = this.querySelector("#uuid-update-result");
  if (resultNode) { resultNode.textContent = status; }
}
div#uuid-alpha { text { alpha } }
div#uuid-beta { text { beta } }
div#uuid-update-result { text { pending } }

Expected Output

contains: uuid-update-ok

Actual Output + Status

QHTML Input

onReady {
  if (this.__noopGuard) { return; }
  this.__noopGuard = true;
  var host = this;
  var target = host.querySelector("#noop-bind-target");
  var resultNode = host.querySelector("#noop-bind-result");
  var mutationCount = 0;
  if (!target || !resultNode || typeof MutationObserver !== "function") {
    if (resultNode) { resultNode.textContent = "noop-bind-fail"; }
    return;
  }
  var observer = new MutationObserver(function (records) {
    mutationCount += Array.isArray(records) ? records.length : 0;
  });
  observer.observe(target, { attributes: true, childList: true, subtree: true, characterData: true });
  host.update({ forceBindings: true, force: true });
  host.update({ forceBindings: true, force: true });
  host.update({ forceBindings: true, force: true });
  setTimeout(function () {
    observer.disconnect();
    resultNode.textContent = mutationCount === 0 ? "noop-bind-ok" : "noop-bind-fail";
  }, 60);
}
div#noop-bind-target {
  class: q-bind { return "stable-class" }
  text { stable-node }
}
div#noop-bind-result { text { pending } }

Expected Output

contains: noop-bind-ok

Actual Output + Status

Scenario

Click "Begin Test" to run six separate benchmark tests:
1. Time to render 1000 nodes
2. Time to update 100 random nodes from that 1000-node render
3. Clear + time to render 5000 nodes
4. Time to update 500 random nodes from that 5000-node render
5. Clear + time to render 10000 nodes
6. Time to update 1000 random nodes from that 10000-node render
Test C. Update Diff: 20 random parent tags with 50 random children each, then
200 random child replaceWithQHTML() operations using UUID-targeted updates.
Reports requested/completed operations, attempts, completion %, and skip reasons.
Test D. q-component randomize loop: 20 component instances, randomize() called on
every instance once (warmup), then 20 random instances every 20ms for about 10s.
Each randomize() output must be instance-unique and tracked with duplicate/seed metrics.

Each test logs independent timers and metrics.

Controls

Waiting to begin stress benchmarks.

Scratch Host

The runner creates a fresh q-html instance for each render pass and benchmarks it.

QHTML Input

q-import { page-builder/page-builder.qhtml }
onReady {
  var status = "buildernode-fail";
  try {
    var root = this.querySelector("#api-root");
    var child = this.querySelector("#api-child");
    var node = root && typeof root.builderNode === "function" ? root.builderNode() : null;
    if (node && typeof node.appendToSlot === "function" && typeof node.replaceSlotContent === "function") {
      node.appendToSlot("default", "q-component-wrapper#api-added { span { text { added } } }", { autoUpdate: true });
      var hasChild = node.hasChildComponent("q-component-wrapper");
      var slotHas = node.hasChildComponentInSlot("default", "q-component-wrapper");
      var childNode = child && typeof child.builderNode === "function" ? child.builderNode() : null;
      if (childNode && typeof childNode.replaceSlotContent === "function") {
        childNode.replaceSlotContent("default", "span { text { replaced } }", { autoUpdate: true });
      }
      var replacedEl = this.querySelector("#api-child");
      var replacedText = replacedEl ? String(replacedEl.textContent || "") : "";
      if (hasChild && slotHas && replacedText.indexOf("replaced") >= 0) {
        status = "buildernode-ok";
      }
    }
  } catch (err) { }
  var statusNode = this.querySelector("#buildernode-status");
  if (statusNode) { statusNode.textContent = status; }
}
q-component-wrapper#api-root {
  q-component-wrapper#api-child {
    span { text { seed } }
  }
}
div#buildernode-status { text { pending } }

Expected Output

contains: buildernode-ok

Actual Output + Status

QHTML Input

q-component base-a {
  q-property alpha: "A"
  function alphaFn() { return this.component && this.component.alpha ? this.component.alpha : this.alpha; }
  div.base-a-marker { text { base-a } }
}
q-component base-b {
  q-property beta: "B"
  function betaFn() { return this.component && this.component.beta ? this.component.beta : this.beta; }
  div.base-b-marker { text { base-b } }
}
q-component multi-inherit extends base-a extends base-b {
  button#mi-btn { type: "button" text { hi } onclick { this.component.alphaFn(); this.component.betaFn(); } }
}
onReady {
  var status = "multi-extends-fail";
  try {
    var host = this.querySelector("#mi");
    if (host && typeof host.alphaFn === "function" && typeof host.betaFn === "function") {
      var alphaValue = String(host.alphaFn() || "");
      var betaValue = String(host.betaFn() || "");
      var text = String(host.textContent || "");
      if (alphaValue.indexOf("A") >= 0 && betaValue.indexOf("B") >= 0 && text.indexOf("base-a") >= 0 && text.indexOf("base-b") >= 0) {
        status = "multi-extends-ok";
      }
    }
  } catch (err) { }
  var statusNode = this.querySelector("#multi-extends-status");
  if (statusNode) { statusNode.textContent = status; }
}
multi-inherit#mi { }
div#multi-extends-status { text { pending } }

Expected Output

contains: multi-extends-ok

Actual Output + Status