WIP: Bake button on query and template

plugs/query/query.plug.yaml

@@ -17,29 +17,36 @@ functions:
   editButton:
     path: widget.ts:editButton
 
+  bakeButton:
+    path: widget.ts:bakeButton
+
   lintQuery:
     path: lint.ts:lintQuery
     events:
-    - editor:lint
+      - editor:lint
 
   queryComplete:
     path: complete.ts:queryComplete
     events:
-    - editor:complete
+      - editor:complete
 
   queryAttributeComplete:
     path: complete.ts:queryAttributeComplete
     events:
-    - editor:complete
+      - editor:complete
 
   languageComplete:
     path: complete.ts:languageComplete
     events:
-    - editor:complete
+      - editor:complete
 
   refreshAllWidgets:
     path: widget.ts:refreshAllWidgets
     command:
       name: "Live Queries and Templates: Refresh All"
       key: "Alt-q"
 
+  bakeAllWidgets:
+    path: widget.ts:bakeAllWidgets
+    command:
+      name: "Page: Bake Live blocks"

plugs/query/widget.ts

@@ -1,9 +1,18 @@
-import { codeWidget, editor, events } from "$sb/syscalls.ts";
+import { codeWidget, editor, markdown, space, system } from "$sb/syscalls.ts";
+import {
+  addParentPointers,
+  collectNodesOfType,
+  findNodeMatching,
+  findNodeOfType,
+  nodeAtPos,
+  ParseTree,
+  removeParentPointers,
+  renderToText,
+} from "$lib/tree.ts";
 import { parseQuery } from "$sb/lib/parse-query.ts";
 import { loadPageObject, replaceTemplateVars } from "../template/page.ts";
-import { resolvePath } from "$sb/lib/resolve.ts";
 import { CodeWidgetContent } from "../../type/types.ts";
-import { jsonToMDTable, renderQueryTemplate } from "../template/util.ts";
+import { jsonToMDTable } from "../template/util.ts";
 import { renderQuery } from "./api.ts";
 
 export async function widget(
@@ -39,6 +48,12 @@ export async function widget(
             `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
           invokeFunction: "query.refreshAllWidgets",
         },
+        {
+          description: "Bake result",
+          svg:
+            `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>`,
+          invokeFunction: "query.bakeButton",
+        },
       ],
     };
   } catch (e: any) {
@@ -50,6 +65,63 @@ export function refreshAllWidgets() {
   codeWidget.refreshAll();
 }
 
+export function bakeAllWidgets() {
+  // TODO: Implement me
+}
+
 export async function editButton(pos: number) {
   await editor.moveCursor(pos);
 }
+
+export async function bakeButton(pos: number) {
+  // codeWidget.bakeAt(pos);
+  const text = await editor.getText();
+  const tree = await markdown.parseMarkdown(text);
+
+  addParentPointers(tree);
+  const textNode = nodeAtPos(tree, pos);
+  if (!textNode) {
+    editor.flashNotification(
+      `Could not find node starting at ${pos} to bake`,
+      "error",
+    );
+    return;
+  } else if (textNode.type !== "CodeText") {
+    editor.flashNotification(
+      `Expected a "CodeText" node at ${pos} to bake`,
+      "error",
+    );
+    removeParentPointers(textNode);
+    console.error(
+      "Node found instead of CodeText",
+      JSON.stringify(textNode, null, 2),
+    );
+    return;
+  }
+  const blockNode = textNode.parent as ParseTree;
+  removeParentPointers(blockNode);
+  const lang = renderToText(findNodeOfType(blockNode, "CodeInfo") ?? undefined);
+
+  const content = await codeWidget.render(
+    lang,
+    renderToText(textNode),
+    await editor.getCurrentPage(),
+  );
+  if (!content || !content.markdown) {
+    editor.flashNotification(
+      `Expected block at ${pos} to render as markdown`,
+      "error",
+    );
+    console.error("Rendered content", content);
+    console.error("For block", JSON.stringify(blockNode, null, 2));
+    return;
+  }
+
+  await editor.dispatch({
+    changes: {
+      from: blockNode.from as number,
+      to: blockNode.to as number,
+      insert: content.markdown,
+    },
+  });
+}

plugs/template/widget.ts

@@ -1,4 +1,5 @@
-import { markdown, space, YAML } from "$sb/syscalls.ts";
+import { editor, markdown, space, YAML } from "$sb/syscalls.ts";
+import { collectNodesOfType, findNodeOfType, ParseTree } from "$lib/tree.ts";
 import { loadPageObject, replaceTemplateVars } from "./page.ts";
 import { CodeWidgetContent, PageMeta } from "$type/types.ts";
 import { renderTemplate } from "./plug_api.ts";
@@ -91,6 +92,11 @@ export async function includeWidget(
         svg:
           `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
         invokeFunction: "query.refreshAllWidgets",
+      }, {
+        description: "Bake result",
+        svg:
+          `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>`,
+        invokeFunction: "query.bakeButton",
       }],
     };
   } catch (e: any) {
@@ -142,6 +148,11 @@ export async function templateWidget(
         svg:
           `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
         invokeFunction: "query.refreshAllWidgets",
+      }, {
+        description: "Bake result",
+        svg:
+          `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>`,
+        invokeFunction: "query.bakeButton",
       }],
     };
   } catch (e: any) {