Render buttons with the data needed to locate click handlers

TODO

@@ -2,6 +2,8 @@
 
 - path to event listener:
 
+  - rerender w/ a signal to branch into handler
+  - capture correct position information in script blocks
   - card fields (vars maybe not needed yet?)
     - set field command
       - buffer output/side-effects in VM
@@ -9,8 +11,6 @@
         - unit test
       - command
       - set field inline instead of separate data???
-  - capture VM status (variables, procs?)?
-    - or is it sufficient to rerender w/ a signal to branch into handler?
 
 - impl vars
 

src/lib/button.ts

@@ -4,8 +4,17 @@ import { CardContext } from './card';
 import { getOptRaw } from './options';
 
 export const Button: Proc<CardContext> = (vm, argv: TextPiece[]): ProcResult =>
-  getOptRaw(argv, { $min: 1, $max: 1 }, (_opts, [label]) => {
-    return {
-      html: `<button>${AsHtml(label)}</button>`,
-    };
-  });
+  getOptRaw(
+    argv,
+    { $min: 1, $max: 1, onClick: 1 },
+    ({ onClick: [onClick = null] }, [label]) => {
+      let buttonTrigger = "disabled";
+      if (onClick && "pos" in onClick && onClick.pos != undefined) {
+        buttonTrigger = `data-notcl-onClick="${onClick.pos}"`;
+      }
+
+      return {
+        html: `<button ${buttonTrigger}>${AsHtml(label)}</button>`,
+      };
+    }
+  );