Code widget refactor

plug-api/silverbullet-syscall/code_widget.ts

@@ -0,0 +1,10 @@
+import type { CodeWidgetContent } from "$sb/types.ts";
+import { syscall } from "./syscall.ts";
+
+export function render(
+  lang: string,
+  body: string,
+  pageName: string,
+): Promise<CodeWidgetContent> {
+  return syscall("codeWidget.render", lang, body, pageName);
+}

plug-api/silverbullet-syscall/mod.ts

@@ -7,3 +7,4 @@ export * as sync from "./sync.ts";
 export * as debug from "./debug.ts";
 export * as language from "./language.ts";
 export * as handlebars from "./handlebars.ts";
+export * as codeWidget from "./code_widget.ts";

plug-api/types.ts

@@ -120,6 +120,7 @@ export type ObjectQuery = Omit<Query, "prefix">;
 // Code widget stuff
 export type CodeWidgetCallback = (
   bodyText: string,
+  pageName: string,
 ) => Promise<CodeWidgetContent>;
 
 export type CodeWidgetContent = {

plugs/index/page.ts

@@ -6,7 +6,7 @@ import { extractFrontmatter } from "$sb/lib/frontmatter.ts";
 import { extractAttributes } from "$sb/lib/attribute.ts";
 import { indexObjects } from "./api.ts";
 
-type PageObject = ObjectValue<
+export type PageObject = ObjectValue<
   // The base is PageMeta, but we override lastModified to be a string
   Omit<PageMeta, "lastModified"> & {
     lastModified: string; // indexing it as a string
@@ -14,6 +14,10 @@ type PageObject = ObjectValue<
 >;
 
 export async function indexPage({ name, tree }: IndexTreeEvent) {
+  if (name.startsWith("_")) {
+    // Don't index pages starting with _
+    return;
+  }
   const pageMeta = await space.getPageMeta(name);
   let pageObj: PageObject = {
     ref: name,

plugs/markdown/assets/markdown_widget.js

@@ -24,7 +24,7 @@ async function init() {
     const body = widget.innerText;
 
     try {
-      const result = await syscall("widget.render", lang, body);
+      const result = await syscall("codeWidget.render", lang, body, pageName);
       const iframe = document.createElement("iframe");
       iframe.src = "about:blank";
 

plugs/markdown/markdown_content_widget.ts

@@ -5,6 +5,7 @@ import { renderMarkdownToHtml } from "./markdown_render.ts";
 
 export async function markdownContentWidget(
   markdownText: string,
+  pageName: string,
 ): Promise<WidgetContent> {
   // Parse markdown to a ParseTree
   const mdTree = await markdown.parseMarkdown(markdownText);
@@ -12,16 +13,17 @@ export async function markdownContentWidget(
   const html = renderMarkdownToHtml(mdTree, { smartHardBreak: true });
   return {
     html: await wrapHTML(html),
-    script: await prepareJS(markdownText),
+    script: await prepareJS(markdownText, pageName),
     // And add back the markdown text so we can render it in a different way if desired
     markdown: markdownText,
   };
 }
 
-export async function prepareJS(originalMarkdown: string) {
+export async function prepareJS(pageName: string, originalMarkdown: string) {
   const iframeJS = await asset.readAsset("assets/markdown_widget.js");
   return `
     const panelHtml = ${JSON.stringify(panelHtml)};
+    const pageName = ${JSON.stringify(pageName)};
     const originalMarkdown = ${JSON.stringify(originalMarkdown)};
     ${iframeJS}
     `;

plugs/query/query.ts

@@ -1,13 +1,15 @@
 import type { WidgetContent } from "$sb/app_event.ts";
-import { editor, events, language, space, system } from "$sb/syscalls.ts";
+import { events, language, space, system } from "$sb/syscalls.ts";
 import { parseTreeToAST } from "$sb/lib/tree.ts";
 import { astToKvQuery } from "$sb/lib/parse-query.ts";
 import { jsonToMDTable, renderTemplate } from "../directive/util.ts";
 import { replaceTemplateVars } from "../template/template.ts";
-import { parse } from "../../common/markdown_parser/parse_tree.ts";
 
-export async function widget(bodyText: string): Promise<WidgetContent> {
-  const pageMeta = await space.getPageMeta(await editor.getCurrentPage());
+export async function widget(
+  bodyText: string,
+  pageName: string,
+): Promise<WidgetContent> {
+  const pageMeta = await space.getPageMeta(pageName);
 
   try {
     const queryAST = parseTreeToAST(

server/server_system.ts

@@ -29,9 +29,10 @@ import { DenoKvPrimitives } from "../plugos/lib/deno_kv_primitives.ts";
 import { DataStore } from "../plugos/lib/datastore.ts";
 import { dataStoreSyscalls } from "../plugos/syscalls/datastore.ts";
 import { DataStoreMQ } from "../plugos/lib/mq.datastore.ts";
-import { language } from "@codemirror/language";
 import { languageSyscalls } from "../common/syscalls/language.ts";
 import { handlebarsSyscalls } from "../common/syscalls/handlebars.ts";
+import { codeWidgetSyscalls } from "../web/syscalls/code_widget.ts";
+import { CodeWidgetHook } from "../web/hooks/code_widget.ts";
 
 const fileListInterval = 30 * 1000; // 30s
 
@@ -72,6 +73,10 @@ export class ServerSystem {
 
     this.system.addHook(new MQHook(this.system, mq));
 
+    const codeWidgetHook = new CodeWidgetHook();
+
+    this.system.addHook(codeWidgetHook);
+
     this.spacePrimitives = new EventedSpacePrimitives(
       new PlugSpacePrimitives(
         this.baseSpacePrimitives,
@@ -94,6 +99,7 @@ export class ServerSystem {
       handlebarsSyscalls(),
       dataStoreSyscalls(this.ds),
       debugSyscalls(),
+      codeWidgetSyscalls(codeWidgetHook),
       markdownSyscalls(buildMarkdown([])), // Will later be replaced with markdown extensions
     );
 

web/client.ts

@@ -403,7 +403,7 @@ export class Client {
     this.eventHook.addLocalListener("file:listed", (fileList: FileMeta[]) => {
       this.ui.viewDispatch({
         type: "pages-listed",
-        pages: fileList.filter((f) => f.name.endsWith(".md")).map(
+        pages: fileList.filter(this.space.isListedPage).map(
           fileMetaToPageMeta,
         ),
       });

web/client_system.ts

@@ -36,7 +36,7 @@ import { DataStore } from "../plugos/lib/datastore.ts";
 import { MessageQueue } from "../plugos/lib/mq.ts";
 import { languageSyscalls } from "../common/syscalls/language.ts";
 import { handlebarsSyscalls } from "../common/syscalls/handlebars.ts";
-import { widgetSyscalls } from "./syscalls/widget.ts";
+import { codeWidgetSyscalls } from "./syscalls/code_widget.ts";
 
 export class ClientSystem {
   commandHook: CommandHook;
@@ -143,7 +143,7 @@ export class ClientSystem {
       assetSyscalls(this.system),
       yamlSyscalls(),
       handlebarsSyscalls(),
-      widgetSyscalls(this.client),
+      codeWidgetSyscalls(this.codeWidgetHook),
       languageSyscalls(),
       this.client.syncMode
         // In sync mode handle locally

web/cm_plugins/fenced_code.ts

@@ -27,7 +27,7 @@ class IFrameWidget extends WidgetType {
     const iframe = createWidgetSandboxIFrame(
       this.editor,
       this.bodyText,
-      this.codeWidgetCallback(this.bodyText),
+      this.codeWidgetCallback(this.bodyText, this.editor.currentPage!),
       (message) => {
         switch (message.type) {
           case "blur":
@@ -38,16 +38,18 @@ class IFrameWidget extends WidgetType {
 
             break;
           case "reload":
-            this.codeWidgetCallback(this.bodyText).then(
-              (widgetContent: WidgetContent) => {
-                iframe.contentWindow!.postMessage({
-                  type: "html",
-                  html: widgetContent.html,
-                  script: widgetContent.script,
-                  theme: document.getElementsByTagName("html")[0].dataset.theme,
-                });
-              },
-            );
+            this.codeWidgetCallback(this.bodyText, this.editor.currentPage!)
+              .then(
+                (widgetContent: WidgetContent) => {
+                  iframe.contentWindow!.postMessage({
+                    type: "html",
+                    html: widgetContent.html,
+                    script: widgetContent.script,
+                    theme:
+                      document.getElementsByTagName("html")[0].dataset.theme,
+                  });
+                },
+              );
             break;
         }
       },

web/hooks/code_widget.ts

@@ -23,9 +23,12 @@ export class CodeWidgetHook implements Hook<CodeWidgetT> {
         if (!functionDef.codeWidget) {
           continue;
         }
-        this.codeWidgetCallbacks.set(functionDef.codeWidget, (bodyText) => {
-          return plug.invoke(name, [bodyText]);
-        });
+        this.codeWidgetCallbacks.set(
+          functionDef.codeWidget,
+          (bodyText, pageName) => {
+            return plug.invoke(name, [bodyText, pageName]);
+          },
+        );
       }
     }
   }

web/syscalls/code_widget.ts

@@ -1,23 +1,24 @@
 import { CodeWidgetContent } from "$sb/types.ts";
 import { SysCallMapping } from "../../plugos/system.ts";
-import { Client } from "../client.ts";
+import { CodeWidgetHook } from "../hooks/code_widget.ts";
 
-export function widgetSyscalls(
-  client: Client,
+export function codeWidgetSyscalls(
+  codeWidgetHook: CodeWidgetHook,
 ): SysCallMapping {
   return {
-    "widget.render": (
+    "codeWidget.render": (
       _ctx,
       lang: string,
       body: string,
+      pageName: string,
     ): Promise<CodeWidgetContent> => {
-      const langCallback = client.system.codeWidgetHook.codeWidgetCallbacks.get(
+      const langCallback = codeWidgetHook.codeWidgetCallbacks.get(
         lang,
       );
       if (!langCallback) {
         throw new Error(`Code widget ${lang} not found`);
       }
-      return langCallback(body);
+      return langCallback(body, pageName);
     },
   };
 }