Fixes #522

plug-api/silverbullet-syscall/code_widget.ts

@@ -8,3 +8,8 @@ export function render(
 ): Promise<CodeWidgetContent> {
   return syscall("codeWidget.render", lang, body, pageName);
 }
+
+// Refresh all code widgets on the page that support it
+export function refreshAll() {
+  return syscall("codeWidget.refreshAll");
+}

plugs/directive/directive.plug.yaml

@@ -6,7 +6,6 @@ functions:
     path: ./command.ts:updateDirectivesOnPageCommand
     command:
       name: "Directives: Update"
-      key: "Alt-q"
     events:
       - editor:pageLoaded
   updateDirectivesInSpace:

plugs/query/query.plug.yaml

@@ -18,6 +18,12 @@ functions:
     events:
     - editor:complete
 
+  refreshAllWidgets:
+    path: widget.ts:refreshAll
+    command:
+      name: "Live Queries and Templates: Refresh All"
+      key: "Alt-q"
+
   # Slash commands
   insertQuery:
     redirect: template.insertTemplateText

plugs/query/widget.ts

@@ -0,0 +1,5 @@
+import { codeWidget } from "$sb/syscalls.ts";
+
+export function refreshAll() {
+  codeWidget.refreshAll();
+}

web/client_system.ts

@@ -37,6 +37,7 @@ import { MessageQueue } from "../plugos/lib/mq.ts";
 import { languageSyscalls } from "../common/syscalls/language.ts";
 import { handlebarsSyscalls } from "../common/syscalls/handlebars.ts";
 import { codeWidgetSyscalls } from "./syscalls/code_widget.ts";
+import { clientCodeWidgetSyscalls } from "./syscalls/client_code_widget.ts";
 
 export class ClientSystem {
   commandHook: CommandHook;
@@ -144,6 +145,7 @@ export class ClientSystem {
       yamlSyscalls(),
       handlebarsSyscalls(),
       codeWidgetSyscalls(this.codeWidgetHook),
+      clientCodeWidgetSyscalls(),
       languageSyscalls(),
       this.client.syncMode
         // In sync mode handle locally

web/components/widget_sandbox_iframe.ts

@@ -77,13 +77,29 @@ function claimIFrame(): PreloadedIFrame {
     }
   }
   // Nothing available in the pool, let's spin up a new one and add it to the pool
-  console.log("Yeah this shouldn't happen");
+  console.warn("Had to create a new iframe on the fly, this shouldn't happen");
   const newPreloadedIFrame = prepareSandboxIFrame();
   newPreloadedIFrame.used = true;
   iframePool.add(newPreloadedIFrame);
   return newPreloadedIFrame;
 }
 
+export function broadcastReload() {
+  for (const preloadedIframe of iframePool) {
+    if (preloadedIframe.used) {
+      // Send a message to the global object, which the iframe is listening to
+      globalThis.dispatchEvent(
+        new MessageEvent("message", {
+          source: preloadedIframe.iframe.contentWindow,
+          data: {
+            type: "reload",
+          },
+        }),
+      );
+    }
+  }
+}
+
 export function mountIFrame(
   preloadedIFrame: PreloadedIFrame,
   client: Client,

web/syscalls/client_code_widget.ts

@@ -0,0 +1,11 @@
+import { CodeWidgetContent } from "$sb/types.ts";
+import { SysCallMapping } from "../../plugos/system.ts";
+import { broadcastReload } from "../components/widget_sandbox_iframe.ts";
+
+export function clientCodeWidgetSyscalls(): SysCallMapping {
+  return {
+    "codeWidget.refreshAll": () => {
+      broadcastReload();
+    },
+  };
+}

website/CHANGELOG.md

@@ -1,6 +1,11 @@
 An attempt at documenting the changes/new features introduced in each
 release.
 
+---
+## Next
+* The `Alt-q` command is now bound to the new {[Live Queries and Templates: Refresh All]} command refreshing all [[Live Queries]] and [[Live Templates]] on the page. This is to get y’all prepared to move away from directives.
+
+
 ---
 ## 0.5.5
 * Bugfix: on some filesystems that don't report file creation time (like some NASes), SilverBullet crash. This should now be fixed.