Pass the element and attribute to api.patch

This will allow for a debug bundle (#4)

src/dom/index.ts

@@ -15,8 +15,17 @@ const api: {
   property: typeof property;
   // Renamed for compatibility with Sinuous' community libraries
   rm: typeof remove;
-  // Reactivity could be haptic/w, sinuous/observable, mobx, etc
-  patch: (expr: unknown, updateCallback?: (value: unknown) => void) => boolean,
+  /** DOM patcher. Receives unknown JSX elements and attributes. To mark the DOM
+  location as reactive, return true. Call patchDOM() anytime to update. */
+  patch: (
+    value: unknown,
+    // Reactivity could be haptic/w, sinuous/observable, mobx, etc
+    patchDOM?: (value: unknown) => void,
+    // Element being patched
+    el?: Node,
+    // If this is patching an element property, this is the attribute
+    attribute?: string
+  ) => boolean,
   /** Element namespace URL such as SVG or MathML */
   ns?: string;
 } = {

src/dom/nodeInsert.ts

@@ -43,7 +43,7 @@ const insert = (el: Node, value: unknown, endMark?: Node, current?: Node | Frag,
   else if (api.patch(value, (v: unknown) => {
     current = api.insert(el, v, endMark, current, startNode);
   // eslint-disable-next-line no-empty
-  })) {}
+  }, el)) {}
   else {
     // Block for Node, Fragment, Array, Functions, etc. This stringifies via h()
     if (endMark) {

src/dom/nodeProperty.ts

@@ -32,7 +32,7 @@ export const property = (el: Node, value: unknown, name: string | null, isAttr?:
   else if (api.patch(value, (v: unknown) => {
     api.property(el, v, name, isAttr, isCss);
   // eslint-disable-next-line no-empty
-  })) {}
+  }, el, name)) {}
   else if (isCss) {
     (el as HTMLElement | SVGElement).style.setProperty(name, value as string);
   }

src/index.ts

@@ -26,13 +26,13 @@ import type { GenericEventAttrs, HTMLAttrs, SVGAttrs, HTMLElements, SVGElements
 // Swap out h to have the correct JSX namespace; commit #d7cd2819
 // declare api = Omit<typeof _api, 'h'> & { h: typeof h };
 
-api.patch = (expr, updateCallback) => {
+api.patch = (value, patchDOM) => {
   // @ts-ignore
-  const $wR = (expr && expr.$wR) as boolean;
-  const { fn } = expr as WireReactor;
-  if ($wR && updateCallback) {
-    (expr as WireReactor).fn = ($) => updateCallback(fn($));
-    (expr as WireReactor)();
+  const $wR = (value && value.$wR) as boolean;
+  const { fn } = value as WireReactor;
+  if ($wR && patchDOM) {
+    (value as WireReactor).fn = ($) => patchDOM(fn($));
+    (value as WireReactor)();
   }
   return $wR;
 };