jsmdcui 0.6.3 → 0.8.0

package/tests/heading-list-selector.test.js

@@ -0,0 +1,346 @@
+import { describe, expect, test } from "bun:test";
+import { createWebDollar } from "../src/cui/rpc.mjs";
+import { createTuiSelector } from "../src/plugins/js-bridge.js";
+
+function tuiSelector(markdown) {
+  const ansi = String(Bun.markdown.ansi(markdown, { hyperlinks: true, columns: 80 }));
+  const buffer = {
+    lines: Bun.stripANSI(ansi).split("\n"),
+    _mdcuiTuiSourceText: markdown,
+    _mdcuiAnsiText: ansi,
+    cursor: { x: 0, y: 0 },
+    ensureCursor() {},
+    invalidateHighlightFrom() {},
+  };
+  return { $: createTuiSelector(() => buffer), buffer };
+}
+
+const markdown = `## Features
+
+- [x] Search
+- [ ] Notifications
+  - [x] Nested notification option
+- [x] Offline
+
+Paragraph between lists.
+
+- [x] Later list item
+
+## Next
+`;
+
+describe("TUI heading task-list Array methods", () => {
+  test("push and unshift accept multiple items and return the new direct length", () => {
+    const { $ } = tuiSelector(markdown);
+    const features = $("#features");
+
+    expect(features.push("Export", { value: "Sync", checked: true })).toBe(5);
+    expect(features.val()).toEqual(["Search", "Offline", "Sync"]);
+    expect(features.unshift("First", { label: "Pinned", checked: true })).toBe(7);
+    expect(features.val()).toEqual(["Pinned", "Search", "Offline", "Sync"]);
+  });
+
+  test("pop and shift return removed labels and remove nested children with the parent", () => {
+    const { $, buffer } = tuiSelector(markdown);
+    const features = $("#features");
+
+    expect(features.shift()).toBe("Search");
+    expect(buffer.lines.some((line) => line.includes("Search"))).toBe(false);
+    expect(features.shift()).toBe("Notifications");
+    expect(buffer.lines.some((line) => line.includes("Nested notification option"))).toBe(false);
+    expect(features.pop()).toBe("Offline");
+    expect(features.pop()).toBeUndefined();
+  });
+
+  test("an emptied list keeps its insertion point for later pushes", () => {
+    const { $ } = tuiSelector("## Features\n\n- [ ] Only\n\n## Next\n");
+    const features = $("#features");
+
+    expect(features.pop()).toBe("Only");
+    expect(features.pop()).toBeUndefined();
+    expect(features.push({ value: "Again", checked: true })).toBe(1);
+    expect(features.val()).toEqual(["Again"]);
+  });
+
+  test("val and mutations stop at the first rendered task list", () => {
+    const { $ } = tuiSelector(markdown);
+    const features = $("#features");
+
+    expect(features.val()).toEqual(["Search", "Offline"]);
+    expect(features.pop()).toBe("Offline");
+    expect(features.val()).toEqual(["Search"]);
+  });
+
+  test("a loose task list remains one list across indented item content", () => {
+    const { $ } = tuiSelector(`## Features
+
+- [x] First
+
+  More detail
+
+- [x] Second
+
+Paragraph after the list.
+
+- [x] Later list
+`);
+    const features = $("#features");
+
+    expect(features.val()).toEqual(["First", "Second"]);
+    expect(features.pop()).toBe("Second");
+    expect(features.pop()).toBe("First");
+    expect(features.pop()).toBeUndefined();
+  });
+
+  test("splice follows Array indexing, insertion, deletion, and return semantics", () => {
+    const { $, buffer } = tuiSelector(markdown);
+    const features = $("#features");
+
+    expect(features.splice()).toEqual([]);
+    expect(features.splice(1, 1, { value: "Replacement", checked: true }, "Extra"))
+      .toEqual(["Notifications"]);
+    expect(buffer.lines.some((line) => line.includes("Nested notification option"))).toBe(false);
+    expect(features.val()).toEqual(["Search", "Replacement", "Offline"]);
+    expect(features.splice(-1)).toEqual(["Offline"]);
+    expect(features.splice(1, undefined, "Inserted")).toEqual([]);
+    expect(features.splice(0, Infinity)).toEqual(["Search", "Inserted", "Replacement", "Extra"]);
+    expect(features.val()).toEqual([]);
+    expect(features.splice(0, 0, { label: "Again", checked: true })).toEqual([]);
+    expect(features.val()).toEqual(["Again"]);
+  });
+
+  test("slice returns read-only item snapshots with checked state", () => {
+    const { $ } = tuiSelector(markdown);
+    const features = $("#features");
+
+    const result = features.slice(0, 2);
+    expect(result).toEqual([
+      { value: "Search", checked: true },
+      { value: "Notifications", checked: false },
+    ]);
+    result[0].value = "Changed snapshot";
+    result[0].checked = false;
+    expect(features.slice(-1)).toEqual([{ value: "Offline", checked: true }]);
+    expect(features.val()).toEqual(["Search", "Offline"]);
+  });
+
+  test("a heading without a task list cannot create one implicitly", () => {
+    const { $ } = tuiSelector("## Empty\n\nParagraph.\n");
+    expect($("#empty").push("No target")).toBe(0);
+    expect($("#empty").unshift("No target")).toBe(0);
+    expect($("#empty").pop()).toBeUndefined();
+    expect($("#empty").shift()).toBeUndefined();
+  });
+});
+
+class TestText {
+  constructor(text, ownerDocument) {
+    this.textContent = String(text);
+    this.ownerDocument = ownerDocument;
+    this.parentElement = null;
+  }
+}
+
+class TestElement {
+  constructor(tagName, ownerDocument) {
+    this.tagName = tagName.toUpperCase();
+    this.ownerDocument = ownerDocument;
+    this.parentElement = null;
+    this.childNodes = [];
+    this.classList = new Set();
+    this.id = "";
+  }
+
+  get children() {
+    return this.childNodes.filter((node) => node instanceof TestElement);
+  }
+
+  get firstChild() {
+    return this.childNodes[0] ?? null;
+  }
+
+  get nextElementSibling() {
+    const siblings = this.parentElement?.children ?? [];
+    const index = siblings.indexOf(this);
+    return index >= 0 ? siblings[index + 1] ?? null : null;
+  }
+
+  get textContent() {
+    return this.childNodes.map((node) => node.textContent).join("");
+  }
+
+  append(...nodes) {
+    for (const node of nodes) {
+      node.parentElement = this;
+      this.childNodes.push(node);
+    }
+  }
+
+  insertBefore(node, before) {
+    node.parentElement = this;
+    const index = before == null ? -1 : this.childNodes.indexOf(before);
+    if (index < 0) this.childNodes.push(node);
+    else this.childNodes.splice(index, 0, node);
+  }
+
+  remove() {
+    const siblings = this.parentElement?.childNodes;
+    const index = siblings?.indexOf(this) ?? -1;
+    if (index >= 0) siblings.splice(index, 1);
+    this.parentElement = null;
+  }
+
+  matches(selector) {
+    if (selector === "ul, ol") return this.tagName === "UL" || this.tagName === "OL";
+    if (selector === "li.task-list-item")
+      return this.tagName === "LI" && this.classList.has("task-list-item");
+    return false;
+  }
+
+  closest(selector) {
+    for (let node = this; node; node = node.parentElement) {
+      if (selector === "label" && node.tagName === "LABEL") return node;
+      if (selector === "li.task-list-item" && node.matches(selector)) return node;
+    }
+    return null;
+  }
+
+  querySelector(selector) {
+    return this.querySelectorAll(selector)[0] ?? null;
+  }
+
+  querySelectorAll(selector) {
+    const matches = [];
+    const visit = (node) => {
+      for (const child of node.children) {
+        if (selector === 'input[type="checkbox"]' &&
+            child.tagName === "INPUT" && child.type === "checkbox") matches.push(child);
+        else if (selector === "ul, ol" && child.matches(selector)) matches.push(child);
+        else if (selector === "li.task-list-item" && child.matches(selector)) matches.push(child);
+        visit(child);
+      }
+    };
+    visit(this);
+    return matches;
+  }
+}
+
+class TestDocument {
+  constructor() {
+    this.root = new TestElement("main", this);
+  }
+
+  createElement(tagName) {
+    return new TestElement(tagName, this);
+  }
+
+  createTextNode(text) {
+    return new TestText(text, this);
+  }
+
+  querySelector(selector) {
+    if (!selector.startsWith("#")) return null;
+    const id = selector.slice(1);
+    return this.querySelectorAll("heading").find((element) => element.id === id) ?? null;
+  }
+
+  querySelectorAll(selector) {
+    if (selector === "[data-mdcui-tag]" || selector === "pre > code") return [];
+    if (selector === "heading") {
+      const headings = [];
+      const visit = (node) => {
+        for (const child of node.children) {
+          if (/^H[1-6]$/.test(child.tagName)) headings.push(child);
+          visit(child);
+        }
+      };
+      visit(this.root);
+      return headings;
+    }
+    return [];
+  }
+}
+
+function appendWebItem(documentObject, list, value, checked = false) {
+  const item = documentObject.createElement("li");
+  item.classList.add("task-list-item");
+  const label = documentObject.createElement("label");
+  const checkbox = documentObject.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.checked = checked;
+  label.append(checkbox, documentObject.createTextNode(value));
+  item.append(label);
+  list.append(item);
+  return item;
+}
+
+function webSelector() {
+  const documentObject = new TestDocument();
+  const section = documentObject.createElement("section");
+  const heading = documentObject.createElement("h2");
+  heading.id = "features";
+  const list = documentObject.createElement("ul");
+  appendWebItem(documentObject, list, "Search", true);
+  appendWebItem(documentObject, list, "Notifications");
+  appendWebItem(documentObject, list, "Offline", true);
+  section.append(heading, list);
+  documentObject.root.append(section);
+  return { $: createWebDollar(documentObject), list };
+}
+
+describe("WUI heading task-list Array methods", () => {
+  test("uses the first list and follows Array return values", () => {
+    const { $ } = webSelector();
+    const features = $("#features");
+
+    expect(features.push("Export", { value: "Sync", checked: true })).toBe(5);
+    expect(features.val()).toEqual(["Search", "Offline", "Sync"]);
+    expect(features.unshift("First", "Second")).toBe(7);
+    expect(features.shift()).toBe("First");
+    expect(features.pop()).toBe("Sync");
+    expect(features.val()).toEqual(["Search", "Offline"]);
+  });
+
+  test("an empty first list remains the target", () => {
+    const { $, list } = webSelector();
+    const features = $("#features");
+
+    expect(features.shift()).toBe("Search");
+    expect(features.shift()).toBe("Notifications");
+    expect(features.shift()).toBe("Offline");
+    expect(features.shift()).toBeUndefined();
+    expect(features.val()).toEqual([]);
+    expect(features.push({ label: "Again", checked: true })).toBe(1);
+    expect(list.children).toHaveLength(1);
+    expect(features.val()).toEqual(["Again"]);
+  });
+
+  test("splice follows Array indexing and returns removed labels", () => {
+    const { $ } = webSelector();
+    const features = $("#features");
+
+    expect(features.splice()).toEqual([]);
+    expect(features.splice(1, 1, { value: "Replacement", checked: true }, "Extra"))
+      .toEqual(["Notifications"]);
+    expect(features.val()).toEqual(["Search", "Replacement", "Offline"]);
+    expect(features.splice(-1)).toEqual(["Offline"]);
+    expect(features.splice(0, Infinity)).toEqual(["Search", "Replacement", "Extra"]);
+    expect(features.splice(0, 0, { value: "Again", checked: true })).toEqual([]);
+    expect(features.val()).toEqual(["Again"]);
+  });
+
+  test("slice returns read-only item snapshots with checked state", () => {
+    const { $ } = webSelector();
+    const features = $("#features");
+
+    const result = features.slice(0, 2);
+    expect(result).toEqual([
+      { value: "Search", checked: true },
+      { value: "Notifications", checked: false },
+    ]);
+    result[0].value = "Changed snapshot";
+    result[0].checked = false;
+    expect(features.slice(-1)).toEqual([{ value: "Offline", checked: true }]);
+    expect(features.val()).toEqual(["Search", "Offline"]);
+  });
+});

package/tests/id-collision.test.js

@@ -5,12 +5,13 @@ import { join } from "node:path";
 import { createTuiSelector } from "../src/plugins/js-bridge.js";
 
 const tui = join(import.meta.dir, "..", "tui");
+const bunBin = Bun.which("bun") || process.argv0;
 
 async function runCheck(markdown) {
   const dir = await mkdtemp(join(tmpdir(), "jsmdcui-check-"));
   const file = join(dir, "app.md");
   await writeFile(file, markdown);
-  const result = Bun.spawnSync([tui, "--check", file], { stdout: "pipe", stderr: "pipe" });
+  const result = Bun.spawnSync([bunBin, tui, "--check", file], { stdout: "pipe", stderr: "pipe" });
   await rm(dir, { recursive: true, force: true });
   return result;
 }
@@ -42,6 +43,17 @@ test("--check reports heading/fenced-block collisions with line details", async
   expect(output.lastIndexOf("FAILED")).toBeGreaterThan(output.lastIndexOf("Suggested fix"));
 });
 
+test("--check keeps fenced IDs that are followed by inline event attributes", async () => {
+  const result = await runCheck(
+    '## Write Status\n\n```text#write-status @keydown="refresh(); validate(event)"\nwaiting\n```\n',
+  );
+  const output = Bun.stripANSI(result.stdout.toString());
+  expect(result.exitCode).toBe(1);
+  expect(output).toContain("ID #write-status");
+  expect(output).toContain("Type: text fenced block");
+  expect(output).toContain('Source: ```text#write-status @keydown="refresh(); validate(event)"');
+});
+
 test("--check reports duplicate fenced-block IDs", async () => {
   const result = await runCheck("```text#myid\na\n```\n\n```textarea#myid\nb\n```\n");
   expect(result.exitCode).toBe(1);
@@ -140,7 +152,7 @@ test("TUI $ selector finds one ID across every tag/class query combination", ()
 });
 
 test("--check requires exactly one file", () => {
-  const result = Bun.spawnSync([tui, "--check"], { stdout: "pipe", stderr: "pipe" });
+  const result = Bun.spawnSync([bunBin, tui, "--check"], { stdout: "pipe", stderr: "pipe" });
   expect(result.exitCode).toBe(2);
   expect(result.stderr.toString()).toContain("Usage: jsmdcui --check FILE.md");
 });

package/tests/js-plugin-prompts.test.js

@@ -0,0 +1,46 @@
+import { expect, test } from "bun:test";
+import { buildMicroGlobal } from "../src/plugins/js-bridge.js";
+
+test("micro prompt APIs delegate and return synchronously", () => {
+  const previousMicro = globalThis.micro;
+  const previousSelector = globalThis.$;
+  const calls = [];
+  const app = {
+    protectedAlert(message) {
+      calls.push(["alert", message]);
+      return undefined;
+    },
+    protectedConfirm(message) {
+      calls.push(["confirm", message]);
+      return true;
+    },
+    protectedPrompt(message, defaultValue) {
+      calls.push(["prompt", message, defaultValue]);
+      return "answer";
+    },
+  };
+
+  try {
+    const micro = buildMicroGlobal({ _app: app, _ctx: null, on() {} });
+    const alertResult = micro.alert("hello");
+    const confirmResult = micro.confirm("continue?");
+    const promptResult = micro.prompt("name", "Ada");
+
+    expect(alertResult).toBeUndefined();
+    expect(confirmResult).toBe(true);
+    expect(promptResult).toBe("answer");
+    expect(alertResult?.then).toBeUndefined();
+    expect(confirmResult?.then).toBeUndefined();
+    expect(promptResult?.then).toBeUndefined();
+    expect(calls).toEqual([
+      ["alert", "hello"],
+      ["confirm", "continue?"],
+      ["prompt", "name", "Ada"],
+    ]);
+  } finally {
+    if (previousMicro === undefined) delete globalThis.micro;
+    else globalThis.micro = previousMicro;
+    if (previousSelector === undefined) delete globalThis.$;
+    else globalThis.$ = previousSelector;
+  }
+});

package/tests/key-event.md

@@ -0,0 +1,10 @@
+```text#myid @keydown.prevent="handle(event)"
+hello
+```
+
+```js front
+export function handle(e)
+{
+  alert(JSON.stringify(e,null,1))
+}
+```

package/tests/kitty-demo.md

@@ -0,0 +1,184 @@
+# Kitty scrolling test
+
+Prelude filler line 01
+Prelude filler line 02
+Prelude filler line 03
+Prelude filler line 04
+Prelude filler line 05
+Prelude filler line 06
+Prelude filler line 07
+Prelude filler line 08
+Prelude filler line 09
+Prelude filler line 10
+Prelude filler line 11
+Prelude filler line 12
+Prelude filler line 13
+Prelude filler line 14
+Prelude filler line 15
+Prelude filler line 16
+Prelude filler line 17
+Prelude filler line 18
+Prelude filler line 19
+Prelude filler line 20
+Prelude filler line 21
+Prelude filler line 22
+Prelude filler line 23
+Prelude filler line 24
+Prelude filler line 25
+Prelude filler line 26
+Prelude filler line 27
+Prelude filler line 28
+Prelude filler line 29
+Prelude filler line 30
+Prelude filler line 31
+Prelude filler line 32
+Prelude filler line 33
+Prelude filler line 34
+Prelude filler line 35
+Prelude filler line 36
+Prelude filler line 37
+Prelude filler line 38
+Prelude filler line 39
+Prelude filler line 40
+Prelude filler line 41
+Prelude filler line 42
+Prelude filler line 43
+Prelude filler line 44
+Prelude filler line 45
+Prelude filler line 46
+Prelude filler line 47
+Prelude filler line 48
+Prelude filler line 49
+Prelude filler line 50
+
+## Before image 01
+Content before the image, line 01.
+
+## Before image 02
+Content before the image, line 02.
+
+## Before image 03
+Content before the image, line 03.
+
+## Before image 04
+Content before the image, line 04.
+
+## Before image 05
+Content before the image, line 05.
+
+## Before image 06
+Content before the image, line 06.
+
+## Before image 07
+Content before the image, line 07.
+
+## Before image 08
+Content before the image, line 08.
+
+## Before image 09
+Content before the image, line 09.
+
+## Before image 10
+Content before the image, line 10.
+
+## Image anchor
+
+![img](../demo.resized.jpg)
+
+## After image 01
+Content after the image, line 01.
+
+## After image 02
+Content after the image, line 02.
+
+## After image 03
+Content after the image, line 03.
+
+## After image 04
+Content after the image, line 04.
+
+## After image 05
+Content after the image, line 05.
+
+## After image 06
+Content after the image, line 06.
+
+## After image 07
+Content after the image, line 07.
+
+## After image 08
+Content after the image, line 08.
+
+## After image 09
+Content after the image, line 09.
+
+## After image 10
+Content after the image, line 10.
+
+## After image 11
+Content after the image, line 11.
+
+## After image 12
+Content after the image, line 12.
+
+## After image 13
+Content after the image, line 13.
+
+## After image 14
+Content after the image, line 14.
+
+## After image 15
+Content after the image, line 15.
+
+![img](../demo.jpg)
+
+Epilogue filler line 01
+Epilogue filler line 02
+Epilogue filler line 03
+Epilogue filler line 04
+Epilogue filler line 05
+Epilogue filler line 06
+Epilogue filler line 07
+Epilogue filler line 08
+Epilogue filler line 09
+Epilogue filler line 10
+Epilogue filler line 11
+Epilogue filler line 12
+Epilogue filler line 13
+Epilogue filler line 14
+Epilogue filler line 15
+Epilogue filler line 16
+Epilogue filler line 17
+Epilogue filler line 18
+Epilogue filler line 19
+Epilogue filler line 20
+Epilogue filler line 21
+Epilogue filler line 22
+Epilogue filler line 23
+Epilogue filler line 24
+Epilogue filler line 25
+Epilogue filler line 26
+Epilogue filler line 27
+Epilogue filler line 28
+Epilogue filler line 29
+Epilogue filler line 30
+Epilogue filler line 31
+Epilogue filler line 32
+Epilogue filler line 33
+Epilogue filler line 34
+Epilogue filler line 35
+Epilogue filler line 36
+Epilogue filler line 37
+Epilogue filler line 38
+Epilogue filler line 39
+Epilogue filler line 40
+Epilogue filler line 41
+Epilogue filler line 42
+Epilogue filler line 43
+Epilogue filler line 44
+Epilogue filler line 45
+Epilogue filler line 46
+Epilogue filler line 47
+Epilogue filler line 48
+Epilogue filler line 49
+Epilogue filler line 50