jsmdcui 0.5.0 → 0.7.0

package/tests/demo.test.js

@@ -1,14 +1,47 @@
 import { expect, test } from "bun:test";
-import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 
 const tui = join(import.meta.dir, "..", "tui");
+const bunBin = Bun.which("bun") || process.argv0;
+
+test("--help describes the non-overwriting demo behavior", () => {
+  const result = Bun.spawnSync([bunBin, tui, "--help"], {
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+
+  expect(result.exitCode).toBe(0);
+  const output = result.stdout.toString();
+  expect(output).toContain("use the existing ./testapp.md without overwriting it");
+  expect(output).toContain("If ./testapp.md is missing, write the bundled demo there first");
+  expect(output).toContain("--demo-<filename>");
+  expect(output).toContain("demos/<filename>.md");
+  expect(output.match(/Open it in the TUI and write 5 generated files beside it/g)?.length).toBe(2);
+  expect(output).toContain("--demo-imgtool");
+  expect(output).toContain("--demo-imgtool-zh");
+});
+
+test("--demo-list lists root and automatically discovered demos", () => {
+  const result = Bun.spawnSync([bunBin, tui, "--demo-list"], {
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+
+  expect(result.exitCode).toBe(0);
+  const output = result.stdout.toString();
+  expect(output).toMatch(/--demo\s+testapp\.md/);
+  expect(output).toMatch(/--demo-image-processor\s+demos\/image-processor\.md/);
+  expect(output).toMatch(/--demo-select\s+demos\/select\.md/);
+  expect(output).toMatch(/--demo-todo-zh\s+demos\/todo-zh\.md/);
+  expect(output).toContain("--demo-imgtool     --demo-image-processor");
+});
 
 test("--demo writes bundled testapp.md to cwd before opening it", async () => {
   const dir = await mkdtemp(join(tmpdir(), "jsmdcui-demo-"));
   try {
-    const result = Bun.spawnSync([tui, "--demo", "-cat", "-encoding", "utf8"], {
+    const result = Bun.spawnSync([bunBin, tui, "--demo", "-cat", "-encoding", "utf8"], {
       cwd: dir,
       stdout: "pipe",
       stderr: "pipe",
@@ -16,8 +49,174 @@ test("--demo writes bundled testapp.md to cwd before opening it", async () => {
 
     expect(result.exitCode).toBe(0);
     const written = await readFile(join(dir, "testapp.md"), "utf8");
-    expect(written).toContain("# jsmdcui");
-    expect(Bun.stripANSI(result.stdout.toString())).toContain("jsmdcui");
+    expect(written).toContain("計算機");
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("計算機");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo preserves an existing testapp.md", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-demo-existing-"));
+  const existing = "# Keep my demo\n";
+  try {
+    await writeFile(join(dir, "testapp.md"), existing);
+    const result = Bun.spawnSync([bunBin, tui, "--demo", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    expect(await readFile(join(dir, "testapp.md"), "utf8")).toBe(existing);
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("Keep my demo");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo-<filename> automatically loads a matching demos file", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-demo-generic-"));
+  try {
+    const result = Bun.spawnSync([bunBin, tui, "--demo-todo", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    const written = await readFile(join(dir, "todo.md"), "utf8");
+    expect(written).toContain("# Todo List");
+    expect(written).toContain("javascript:addTodo()");
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("Show Completed");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo-<filename> preserves an existing local copy", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-demo-generic-existing-"));
+  const existing = "# Keep my selector demo\n";
+  try {
+    await writeFile(join(dir, "select.md"), existing);
+    const result = Bun.spawnSync([bunBin, tui, "--demo-select", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    expect(await readFile(join(dir, "select.md"), "utf8")).toBe(existing);
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("Keep my selector demo");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("an unknown --demo-<filename> reports an error without creating a file", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-demo-unknown-"));
+  try {
+    const result = Bun.spawnSync([bunBin, tui, "--demo-does-not-exist", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(2);
+    expect(result.stderr.toString()).toContain("Unknown demo --demo-does-not-exist");
+    expect(await Bun.file(join(dir, "does-not-exist.md")).exists()).toBe(false);
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo-image-processor works through generic demo discovery", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-imgtool-generic-"));
+  try {
+    const result = Bun.spawnSync([bunBin, tui, "--demo-image-processor", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    expect(await readFile(join(dir, "image-processor.md"), "utf8")).toContain("# Bun.Image Processor");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo-imgtool writes the bundled image processor to cwd", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-imgtool-"));
+  try {
+    const result = Bun.spawnSync([bunBin, tui, "--demo-imgtool", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    const written = await readFile(join(dir, "image-processor.md"), "utf8");
+    expect(written).toContain("# Bun.Image Processor");
+    expect(written).toContain("javascript:readMetadata()");
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("Bun.Image Processor");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo-imgtool preserves an existing image-processor.md", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-imgtool-existing-"));
+  const existing = "# Keep my image tool\n";
+  try {
+    await writeFile(join(dir, "image-processor.md"), existing);
+    const result = Bun.spawnSync([bunBin, tui, "--demo-imgtool", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    expect(await readFile(join(dir, "image-processor.md"), "utf8")).toBe(existing);
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("Keep my image tool");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo-imgtool-zh writes the bundled Traditional Chinese image processor to cwd", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-imgtool-zh-"));
+  try {
+    const result = Bun.spawnSync([bunBin, tui, "--demo-imgtool-zh", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    const written = await readFile(join(dir, "image-processor.zh-TW.md"), "utf8");
+    expect(written).toContain("先把本機圖片路徑貼到下方");
+    expect(written).toContain("javascript:readMetadata()");
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("先把本機圖片路徑貼到下方");
+  } finally {
+    await rm(dir, { recursive: true, force: true });
+  }
+});
+
+test("--demo-imgtool-zh preserves an existing image-processor.zh-TW.md", async () => {
+  const dir = await mkdtemp(join(tmpdir(), "jsmdcui-imgtool-zh-existing-"));
+  const existing = "# 保留我的圖片工具\n";
+  try {
+    await writeFile(join(dir, "image-processor.zh-TW.md"), existing);
+    const result = Bun.spawnSync([bunBin, tui, "--demo-imgtool-zh", "-cat", "-encoding", "utf8"], {
+      cwd: dir,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+
+    expect(result.exitCode).toBe(0);
+    expect(await readFile(join(dir, "image-processor.zh-TW.md"), "utf8")).toBe(existing);
+    expect(Bun.stripANSI(result.stdout.toString())).toContain("保留我的圖片工具");
   } finally {
     await rm(dir, { recursive: true, force: true });
   }

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"]);
+  });
+});