jsmdcui 0.6.3 → 0.8.0

package/demos/todo-zh.md

@@ -0,0 +1,190 @@
+#!/usr/bin/env jsmdcui
+
+# Todo List
+
+## Todos
+
+- [ ] canvas support
+- [x] push/pop/splice/slice list items
+- [x] image by --kitty
+- [ ] clean up codebase
+
+## Actions
+
+```text#todo-input
+Fly to the moon
+```
+
+在上方輸入 Todo 文字，再選擇新增或移除。移除會刪除第一個文字完全相同的項目。
+
+- [新增 Todo](javascript:addTodo())
+- .
+- [移除 Todo](javascript:removeTodo())
+- .
+- [顯示已完成](javascript:showCompleted())
+- .
+- [顯示未完成](javascript:showPending())
+
+## 存檔／讀檔
+
+```text#todo-file
+todo_list.json
+```
+
+在上方輸入 JSON 檔案路徑。存檔會寫入人類可讀的 JSON；讀檔會在確認後取代目前的 Todo 清單。
+
+- [儲存 Todos](javascript:saveTodos())
+- .
+- [讀取 Todos](javascript:loadTodos())
+
+## 操作結果：
+
+```text#todo-status
+尚未操作
+```
+
+## Filtered Result
+
+```text#todo-result
+點按「顯示已完成」或「顯示未完成」查看結果
+```
+
+```js front
+function todoText() {
+  return $('#todo-input').val().trim();
+}
+
+function showItems(title, checked) {
+  const items = $('#todos')
+    .slice()
+    .filter(item => item.checked === checked);
+
+  const output = items.length
+    ? items.map(item => `${item.checked ? '✓' : '○'} ${item.value}`).join('\n')
+    : '（沒有項目）';
+  $('#todo-result').val(`${title}\n${output}`);
+  $('#todo-status').val(`找到 ${items.length} 個${title}項目`);
+}
+
+function todoFile() {
+  return $('#todo-file').val().trim();
+}
+
+function describeError(error) {
+  return error?.message || String(error);
+}
+
+export function addTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('新增失敗：請先輸入 Todo 文字');
+    return;
+  }
+
+  const length = $('#todos').push(value);
+  $('#todo-input').val('');
+  $('#todo-status').val(`已新增「${value}」，目前共有 ${length} 個 Todo`);
+}
+
+export function removeTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('移除失敗：請輸入要移除的 Todo 文字');
+    return;
+  }
+
+  const items = $('#todos').slice();
+  const index = items.findIndex(item => item.value === value);
+  if (index < 0) {
+    $('#todo-status').val(`移除失敗：找不到「${value}」`);
+    return;
+  }
+
+  const removed = $('#todos').splice(index, 1);
+  $('#todo-input').val('');
+  $('#todo-status').val(`已移除「${removed[0]}」`);
+}
+
+export function showCompleted() {
+  showItems('已完成', true);
+}
+
+export function showPending() {
+  showItems('未完成', false);
+}
+
+export async function saveTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('存檔失敗：請先輸入 JSON 檔案路徑');
+    return;
+  }
+
+  try {
+    const obj = { todos: $('#todos').slice() };
+    const result = await rpc.saveTodoList(file, obj);
+    $('#todo-status').val(`已將 ${obj.todos.length} 個 Todo 儲存至 ${result.path}`);
+  } catch (error) {
+    $('#todo-status').val(`存檔失敗：${describeError(error)}`);
+  }
+}
+
+export async function loadTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('讀檔失敗：請先輸入 JSON 檔案路徑');
+    return;
+  }
+  try {
+    const result = await rpc.loadTodoList(file);
+    const json = JSON.stringify(result.obj, null, 1);
+    if (!confirm(`要用「${file}」中的以下 JSON 取代目前的 Todo 清單嗎？\n\n${json}`)) {
+      $('#todo-status').val('已取消讀檔，目前的 Todos 未變更');
+      return;
+    }
+    const current = $('#todos').slice();
+    $('#todos').splice(0, current.length, ...result.obj.todos);
+    $('#todo-status').val(`已從 ${result.path} 讀取 ${result.obj.todos.length} 個 Todo`);
+  } catch (error) {
+    $('#todo-status').val(`讀檔失敗：${describeError(error)}`);
+  }
+}
+```
+
+```js back
+import { resolve } from 'node:path';
+
+function todoPath(input) {
+  const value = String(input ?? '').trim();
+  if (!value) throw new Error('請先輸入 JSON 檔案路徑');
+  return resolve(value);
+}
+
+function validateTodoObject(obj) {
+  if (!obj || typeof obj !== 'object' || !Array.isArray(obj.todos))
+    throw new Error('Todo JSON 必須是包含 todos 陣列的物件');
+
+  return {
+    todos: obj.todos.map((item, index) => {
+      if (!item || typeof item !== 'object' || typeof item.value !== 'string')
+        throw new Error(`第 ${index + 1} 個 Todo 項目必須包含字串 value`);
+      return { value: item.value, checked: Boolean(item.checked) };
+    }),
+  };
+}
+
+export async function saveTodoList(input, obj) {
+  const path = todoPath(input);
+  const validated = validateTodoObject(obj);
+  await Bun.write(path, JSON.stringify(validated, null, 1) + '\n');
+  return { path };
+}
+
+export async function loadTodoList(input) {
+  const path = todoPath(input);
+  const file = Bun.file(path);
+  if (!await file.exists()) throw new Error(`找不到 Todo 檔案：${path}`);
+  const obj = validateTodoObject(JSON.parse(await file.text()));
+  return { path, obj };
+}
+```

package/demos/todo.md

@@ -0,0 +1,191 @@
+#!/usr/bin/env jsmdcui
+
+# Todo List
+
+## Todos
+
+- [ ] canvas support
+- [x] push/pop/splice/slice list items
+- [x] image by --kitty
+- [ ] clean up codebase
+
+## Actions
+
+```text#todo-input
+Fly to the moon
+```
+
+Enter Todo text above, then choose Add or Remove. Remove deletes the first item whose text matches exactly.
+
+- [Add Todo](javascript:addTodo())
+- .
+- [Remove Todo](javascript:removeTodo())
+- .
+- [Show Completed](javascript:showCompleted())
+- .
+- [Show Pending](javascript:showPending())
+
+## Save / Load
+
+```text#todo-file
+todo_list.json
+```
+
+Enter a JSON file path above. Saving writes human-readable JSON; loading replaces the current Todo list after confirmation.
+
+- [Save Todos](javascript:saveTodos())
+- .
+- [Load Todos](javascript:loadTodos())
+
+## Operation Result
+
+```text#todo-status
+No action yet
+```
+
+## Filtered Result
+
+```text#todo-result
+Select “Show Completed” or “Show Pending” to view matching items
+```
+
+```js front
+function todoText() {
+  return $('#todo-input').val().trim();
+}
+
+function showItems(title, checked) {
+  const items = $('#todos')
+    .slice()
+    .filter(item => item.checked === checked);
+
+  const output = items.length
+    ? items.map(item => `${item.checked ? '✓' : '○'} ${item.value}`).join('\n')
+    : '(No items)';
+  const noun = items.length === 1 ? 'item' : 'items';
+  $('#todo-result').val(`${title}\n${output}`);
+  $('#todo-status').val(`Found ${items.length} ${title.toLowerCase()} ${noun}`);
+}
+
+function todoFile() {
+  return $('#todo-file').val().trim();
+}
+
+function describeError(error) {
+  return error?.message || String(error);
+}
+
+export function addTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('Add failed: enter Todo text first');
+    return;
+  }
+
+  const length = $('#todos').push(value);
+  $('#todo-input').val('');
+  $('#todo-status').val(`Added “${value}”; ${length} Todos total`);
+}
+
+export function removeTodo() {
+  const value = todoText();
+  if (!value) {
+    $('#todo-status').val('Remove failed: enter the Todo text to remove');
+    return;
+  }
+
+  const items = $('#todos').slice();
+  const index = items.findIndex(item => item.value === value);
+  if (index < 0) {
+    $('#todo-status').val(`Remove failed: could not find “${value}”`);
+    return;
+  }
+
+  const removed = $('#todos').splice(index, 1);
+  $('#todo-input').val('');
+  $('#todo-status').val(`Removed “${removed[0]}”`);
+}
+
+export function showCompleted() {
+  showItems('Completed', true);
+}
+
+export function showPending() {
+  showItems('Pending', false);
+}
+
+export async function saveTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('Save failed: enter a JSON file path first');
+    return;
+  }
+
+  try {
+    const obj = { todos: $('#todos').slice() };
+    const result = await rpc.saveTodoList(file, obj);
+    $('#todo-status').val(`Saved ${obj.todos.length} Todos to ${result.path}`);
+  } catch (error) {
+    $('#todo-status').val(`Save failed: ${describeError(error)}`);
+  }
+}
+
+export async function loadTodos() {
+  const file = todoFile();
+  if (!file) {
+    $('#todo-status').val('Load failed: enter a JSON file path first');
+    return;
+  }
+  try {
+    const result = await rpc.loadTodoList(file);
+    const json = JSON.stringify(result.obj, null, 1);
+    if (!confirm(`Replace the current Todo list with this JSON from “${file}”?\n\n${json}`)) {
+      $('#todo-status').val('Load cancelled; current Todos were not changed');
+      return;
+    }
+    const current = $('#todos').slice();
+    $('#todos').splice(0, current.length, ...result.obj.todos);
+    $('#todo-status').val(`Loaded ${result.obj.todos.length} Todos from ${result.path}`);
+  } catch (error) {
+    $('#todo-status').val(`Load failed: ${describeError(error)}`);
+  }
+}
+```
+
+```js back
+import { resolve } from 'node:path';
+
+function todoPath(input) {
+  const value = String(input ?? '').trim();
+  if (!value) throw new Error('Enter a JSON file path first');
+  return resolve(value);
+}
+
+function validateTodoObject(obj) {
+  if (!obj || typeof obj !== 'object' || !Array.isArray(obj.todos))
+    throw new Error('Todo JSON must be an object containing a todos array');
+
+  return {
+    todos: obj.todos.map((item, index) => {
+      if (!item || typeof item !== 'object' || typeof item.value !== 'string')
+        throw new Error(`Todo item ${index + 1} must contain a string value`);
+      return { value: item.value, checked: Boolean(item.checked) };
+    }),
+  };
+}
+
+export async function saveTodoList(input, obj) {
+  const path = todoPath(input);
+  const validated = validateTodoObject(obj);
+  await Bun.write(path, JSON.stringify(validated, null, 1) + '\n');
+  return { path };
+}
+
+export async function loadTodoList(input) {
+  const path = todoPath(input);
+  const file = Bun.file(path);
+  if (!await file.exists()) throw new Error(`Todo file not found: ${path}`);
+  const obj = validateTodoObject(JSON.parse(await file.text()));
+  return { path, obj };
+}
+```

package/edit

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+':' //; sd=$(dirname "$(realpath "$0")")
+
+':' //; exec bun "$sd"/src/index.js --edit "$@"
+
+process.argv.splice(2,0,'--edit')
+
+await import('./src/index.js')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsmdcui",
-  "version": "0.6.3",
+  "version": "0.8.0",
   "description": "Markdown as a Common UI for Terminals and Web Browsers",
   "type": "module",
   "main": "./src/index.js",

package/runmd.mjs

@@ -3,9 +3,11 @@
 import path from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { readInternalAssetText } from './src/runtime/assets.js'
+import { fenceEventMap } from './src/cui/fence-events.mjs'
 import { REPO_ROOT } from './single-exe/compiled.js'
 
 const csl=console.log
+const cse=console.error
 const mda=Bun.markdown.ansi
 const mdh=Bun.markdown.html
 const jss=JSON.stringify
@@ -18,7 +20,7 @@ const TEST_COL=5
 function logWroteFile(label,path)
 {
   if(!process.stdin.isRaw)
-  csl(mda(`- Wrote to ${label} file: ${path}`))
+  cse(mda(`- Wrote to ${label} file: ${path}`))
 }
 
 async function readTemplate(pathname)
@@ -62,32 +64,35 @@ export async function main(tuiWidth=30)
 
 	// 3. Create Terminal UI
 	let tui = createTui(md,tuiWidth)
-	csl(mda("\n# TUI"))
-	csl(tui)
-	csl(mda('## TUI raw'))
-	csl(jss(tui))
+	cse(mda("\n# TUI"))
+	cse(tui)
+	cse(mda('## TUI raw'))
+	cse(jss(tui))
 
 
 	// 4. Create Web UI
 	let wui = await createWui(md,mdpath)
-	csl(mda('\n# HTML'))
-	csl(wui)
+	cse(mda('\n# HTML'))
+	cse(wui)
 
 
+    /*
 	// 5. Get character from point for TUI
 	let ch = charFromPoint(tui,TEST_ROW,TEST_COL)
 
-	csl(mda(
+	cse(mda(
 	  '# Slicing row,col: '+TEST_ROW+','+TEST_COL
 	))
 
-	csl(jss(ch))
+	cse(jss(ch))
+	
+	*/
 
 
     const serverPath = mdpath + "-server.js"
     const svmod = await import(pathToFileURL(path.resolve(serverPath)).href)
 
-    csl("\n\n"+mda('# Server'))
+    cse("\n\n"+mda('# Server'))
     svmod.main();
 }
 
@@ -216,7 +221,7 @@ function escapeHtmlAttribute(value)
     .replaceAll(">", ">");
 }
 
-export function convertWuiTextareas(html)
+export function convertWuiTextareas(html, eventsById = new Map())
 {
   return String(html).replace(
     /<pre><code class="language-([^"]+)">([^]*?)<\/code><\/pre>/g,
@@ -226,10 +231,50 @@ export function convertWuiTextareas(html)
       const value = content.replace(/\n$/, "");
       const contentLines = value.split("\n");
       const cols = Math.max(1, ...contentLines.map(line => [...line].length));
+      const declaration = identity.id && eventsById.get(identity.id)?.tag === identity.tag
+        ? eventsById.get(identity.id)
+        : null;
+      const keydownHandler = declaration?.events.get("keydown");
+      const keydownCode = keydownHandler
+        ? [
+            "const __mdcuiKeyCode=Number(event.keyCode||event.which||0);",
+            "const __mdcuiCodeLetter=/^Key[A-Z]$/.test(event.code||\"\")?event.code.charCodeAt(3):0;",
+            "const __mdcuiLetterCode=__mdcuiKeyCode>=65&&__mdcuiKeyCode<=90?__mdcuiKeyCode:__mdcuiCodeLetter;",
+            "const __mdcuiAltGraph=!!event.getModifierState&&event.getModifierState(\"AltGraph\");",
+            "const __mdcuiLetter=!__mdcuiAltGraph&&(event.ctrlKey||event.altKey||event.metaKey)&&__mdcuiLetterCode>=65&&__mdcuiLetterCode<=90;",
+            "if(__mdcuiLetter)Object.defineProperty(event,\"key\",{configurable:true,value:String.fromCharCode(__mdcuiLetterCode+(event.shiftKey?0:32))});",
+            "this.__mdcuiIdentifiedKeydown=!!event.key&&event.key!==\"Unidentified\";",
+            "this.__mdcuiUnidentifiedKeydown=event.key===\"Unidentified\"?{keyCode:__mdcuiKeyCode,ctrlKey:!!event.ctrlKey,shiftKey:!!event.shiftKey,altKey:!!event.altKey,metaKey:!!event.metaKey,altGraph:__mdcuiAltGraph}:null;",
+            "clearTimeout(this.__mdcuiKeydownReset);",
+            "this.__mdcuiKeydownReset=setTimeout(()=>{this.__mdcuiIdentifiedKeydown=false;this.__mdcuiUnidentifiedKeydown=null},0);",
+            "if(event.key!==\"Unidentified\"){\n",
+            "Object.defineProperty(event,\"toJSON\",{configurable:true,value:function(){const t=this.target||{};return{type:String(this.type||\"\"),key:String(this.key||\"\"),code:String(this.code||\"\"),raw:String(this.raw||\"\"),ctrlKey:!!this.ctrlKey,shiftKey:!!this.shiftKey,altKey:!!this.altKey,metaKey:!!this.metaKey,repeat:!!this.repeat,defaultPrevented:!!this.defaultPrevented,target:{id:String(t.id||\"\"),tagName:String(t.tagName||\"\"),className:String(t.className||\"\"),value:String(t.value??\"\")}}}});",
+            keydownHandler.modifiers.includes("prevent")
+              ? "event.preventDefault();"
+              : "",
+            keydownHandler.code,
+            "\n}",
+          ].join("")
+        : "";
+      const beforeInputCode = keydownHandler
+        ? [
+            "if(!this.__mdcuiIdentifiedKeydown&&event.data!=null&&event.data!==\"\"){",
+            "const m=this.__mdcuiUnidentifiedKeydown||{};",
+            "const letter=!m.altGraph&&(m.ctrlKey||m.altKey||m.metaKey)&&m.keyCode>=65&&m.keyCode<=90?String.fromCharCode(m.keyCode+(m.shiftKey?0:32)):String(event.data);",
+            "Object.defineProperties(event,{key:{configurable:true,value:letter},ctrlKey:{configurable:true,value:!!m.ctrlKey},shiftKey:{configurable:true,value:!!m.shiftKey},altKey:{configurable:true,value:!!m.altKey},metaKey:{configurable:true,value:!!m.metaKey}});",
+            "this.onkeydown(event)",
+            "}",
+          ].join("")
+        : "";
+      const inlineEventAttrs = [
+        keydownCode ? `onkeydown="${escapeHtmlAttribute(keydownCode)}"` : "",
+        beforeInputCode ? `onbeforeinput="${escapeHtmlAttribute(beforeInputCode)}"` : "",
+      ];
       const attrs = [
         `data-mdcui-tag="${identity.tag}"`,
         `data-mdcui-language="${escapeHtmlAttribute(info)}"`,
         identity.id ? `id="${escapeHtmlAttribute(identity.id)}"` : "",
+        ...inlineEventAttrs,
         `class="${escapeHtmlAttribute([
           `language-${info}`,
           ...identity.classes,
@@ -302,6 +347,7 @@ export function wrapWuiHeadingSections(html)
 
 export async function createWui(md,mdpath) // HTML
 {
+  const eventsById = fenceEventMap(md)
   
   const opts = {
     headings: { ids: true }
@@ -331,19 +377,27 @@ export async function createWui(md,mdpath) // HTML
     }
   )
 
-  md = convertWuiTextareas(md)
+  md = convertWuiTextareas(md, eventsById)
   md = wrapWuiHeadingSections(md)
   
   const mdb = path.basename(mdpath);
   
+  const responsiveImageStyle = `<style>
+img {
+  max-width: 100%;
+  height: auto;
+}
+</style>`;
   const moduleScript = `<scr`+`ipt type="module" src="./${mdb}.front.js"></scr`+`ipt>`;
-  if (!/^\s*<!doctype html>/i.test(md)) {
+  const isFullHtmlDocument = /^\s*<!doctype html>/i.test(md);
+  if (!isFullHtmlDocument) {
     md = `<!doctype html>
 <html lang="zh-TW">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${escapeHtmlAttribute(mdb)}</title>
+  ${responsiveImageStyle}
 </head>
 <body>
 ${md}
@@ -351,10 +405,17 @@ ${moduleScript}
 </body>
 </html>
 `;
-  } else if (/<\/body\s*>/i.test(md)) {
-    md = md.replace(/<\/body\s*>/i, `${moduleScript}\n</body>`);
   } else {
-    md += `\n${moduleScript}\n`;
+    if (/<\/head\s*>/i.test(md)) {
+      md = md.replace(/<\/head\s*>/i, `${responsiveImageStyle}\n</head>`);
+    } else {
+      md = `${responsiveImageStyle}\n${md}`;
+    }
+    if (/<\/body\s*>/i.test(md)) {
+      md = md.replace(/<\/body\s*>/i, `${moduleScript}\n</body>`);
+    } else {
+      md += `\n${moduleScript}\n`;
+    }
   }