roamjs-components 0.85.1 → 0.86.0-alpha.2

package/src/util/registerExperimentalMode.ts

@@ -0,0 +1,76 @@
+import { render as renderToast } from "../components/Toast";
+import { render as renderAlert } from "../components/SimpleAlert";
+import localStorageRemove from "./localStorageRemove";
+import localStorageSet from "./localStorageSet";
+import localStorageGet from "./localStorageGet";
+
+const registerExperimentalMode = ({
+  feature,
+  onEnable,
+  onDisable,
+}: {
+  feature?: string;
+  onEnable: (isInitial: boolean) => void;
+  onDisable: (isInitial: boolean) => void;
+}) => {
+  const label = feature
+    ? `RoamJS Experiment: ${feature}`
+    : "RoamJS Experimental Mode";
+  const key = feature
+    ? `experimental-${feature.toLowerCase().replace(/ /g, "-")}`
+    : "experimental";
+  const toggleExperimentalModeFeatures = (
+    experimentalOverlayMode: boolean,
+    isInitial: boolean
+  ) => {
+    if (experimentalOverlayMode) {
+      onEnable(isInitial);
+      window.roamAlphaAPI.ui.commandPalette.addCommand({
+        label: `Disable ${label}`,
+        callback: () => {
+          localStorageRemove(key);
+          toggleExperimentalModeFeatures(false, false);
+          renderToast({
+            id: "experimental",
+            content: `Disabled ${label}`,
+          });
+        },
+      });
+      window.roamAlphaAPI.ui.commandPalette.removeCommand({
+        label: `Enable ${label}`,
+      });
+    } else {
+      onDisable(isInitial);
+      window.roamAlphaAPI.ui.commandPalette.addCommand({
+        label: `Enable ${label}`,
+        callback: () => {
+          renderAlert({
+            content: `WARNING! Experimental features are not meant for public use for most users. Enabling has a higher likelihood of unintended consequences affecting your graph.
+
+Are you sure you want to enable the experimental ${
+              feature
+                ? `RoamJS feature: ${feature}`
+                : "features of RoamJS extensions"
+            }?`,
+            onConfirm: () => {
+              localStorageSet(key, "true");
+              toggleExperimentalModeFeatures(true, false);
+              renderToast({
+                id: "experimental",
+                content: `Enabled ${label}`,
+              });
+            },
+            onCancel: true,
+          });
+        },
+      });
+      window.roamAlphaAPI.ui.commandPalette.removeCommand({
+        label: `Disable ${label}`,
+      });
+    }
+  };
+  toggleExperimentalModeFeatures(localStorageGet(key) === "true", true);
+  return label;
+};
+
+export default registerExperimentalMode;

package/src/util/registerSmartBlocksCommand.ts

@@ -0,0 +1,23 @@
+import { RegisterCommand } from "../types/smartblocks";
+
+let unload: () => void;
+
+const registerSmartBlocksCommand: RegisterCommand = (args) => {
+  const register = () => {
+    if (window.roamjs?.extension.smartblocks) {
+      window.roamjs.extension.smartblocks.registerCommand(args);
+      unload = () =>
+        window.roamjs.extension.smartblocks?.unregisterCommand(args.text);
+    }
+  };
+  if (window.roamjs?.loaded.has("smartblocks")) {
+    register();
+  } else {
+    document.body.addEventListener(`roamjs:smartblocks:loaded`, register);
+  }
+  return () => {
+    unload?.();
+  };
+};
+
+export default registerSmartBlocksCommand;

package/src/util/removeFromRegistry.ts

@@ -0,0 +1,11 @@
+import { Registry } from "../types";
+import { getRoamJSExtensionIdEnv } from "./env";
+
+const removeFromRegistry = (detail: Partial<Registry>) =>
+  document.body.dispatchEvent(
+    new CustomEvent(`roamjs:${getRoamJSExtensionIdEnv()}:unregister`, {
+      detail,
+    })
+  );
+
+export default removeFromRegistry;

package/src/util/renderOverlay.ts

@@ -0,0 +1,69 @@
+import nanoid from "nanoid";
+import React from "react";
+import ReactDOM from "react-dom";
+import dispatchToRegistry from "./dispatchToRegistry";
+import removeFromRegistry from "./removeFromRegistry";
+
+export type RoamOverlayProps<
+  T extends Record<string, unknown> = Record<string, never>
+> = {
+  onClose: () => void;
+  isOpen: boolean;
+} & T;
+
+const BEFORE_REGEX = /::before\(([\w.-]+)\)$/;
+
+const renderOverlay = <T extends Record<string, unknown>>({
+  id = nanoid(),
+  Overlay = (props) => React.createElement("div", props),
+  props = {} as T,
+  path = "body",
+}: {
+  id?: string;
+  Overlay?: (props: RoamOverlayProps<T>) => React.ReactElement;
+  props?: T;
+  path?: string | HTMLElement | null;
+} = {}): (() => void) | undefined => {
+  const parent = document.createElement("div");
+  parent.id = id.replace(/^\d*/, "");
+  const pathElement =
+    typeof path === "string"
+      ? document.querySelector(path.replace(BEFORE_REGEX, ""))
+      : path;
+  if (pathElement && !pathElement.querySelector(`#${parent.id}`)) {
+    const before =
+      typeof path === "string" ? BEFORE_REGEX.exec(path)?.[1] : undefined;
+    if (!before) {
+      pathElement.appendChild(parent);
+    } else if (!Number.isNaN(Number(before))) {
+      pathElement.insertBefore(parent, pathElement.children[Number(before)]);
+    } else if (pathElement.querySelector(before)) {
+      pathElement.insertBefore(parent, pathElement.querySelector(before));
+    } else {
+      return undefined;
+    }
+    const onClose = () => {
+      if (typeof props.onClose === "function") props.onClose();
+      ReactDOM.unmountComponentAtNode(parent);
+      parent.remove();
+      removeFromRegistry({
+        reactRoots: [parent],
+      });
+    };
+    ReactDOM.render(
+      React.createElement(Overlay, {
+        ...props,
+        isOpen: true,
+        onClose,
+      }),
+      parent
+    );
+    dispatchToRegistry({
+      reactRoots: [parent],
+    });
+    return onClose;
+  }
+  return undefined;
+};
+
+export default renderOverlay;

package/src/util/renderWithUnmount.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ExtensionApiContextProvider from "../components/ExtensionApiContext";
+import { OnloadArgs } from "../types";
+import dispatchToRegistry from "./dispatchToRegistry";
+import removeFromRegistry from "./removeFromRegistry";
+
+const renderWithUnmount = (
+  el: React.ReactElement,
+  p: HTMLElement,
+  args?: OnloadArgs
+): (() => void) => {
+  const oldChildren = p.children;
+  ReactDOM.render(
+    React.createElement(ExtensionApiContextProvider, args, el),
+    p
+  );
+  const unmount = (observer: MutationObserver) => {
+    observer.disconnect();
+    ReactDOM.unmountComponentAtNode(p);
+    removeFromRegistry({
+      reactRoots: [p],
+      observers: [observer],
+    });
+    if (oldChildren.length && document.body.contains(p)) {
+      Array.from(oldChildren).forEach((c) => p.appendChild(c));
+    }
+  };
+  const unmountObserver = new MutationObserver((ms, observer) => {
+    const addedNodes: Node[] = [];
+    const parentRemoved = ms
+      .flatMap((m) => {
+        addedNodes.push(...Array.from(m.addedNodes));
+        return Array.from(m.removedNodes);
+      })
+      .some((n) => n === p || n.contains(p));
+    if (parentRemoved) {
+      const isNodeAdded = addedNodes.some((n) => n.contains(p));
+      if (!isNodeAdded) unmount(observer);
+    }
+  });
+  unmountObserver.observe(document.body, { childList: true, subtree: true });
+  dispatchToRegistry({
+    reactRoots: [p],
+    observers: [unmountObserver],
+  });
+  return () => unmount(unmountObserver);
+};
+
+export default renderWithUnmount;

package/src/util/runExtension.ts

@@ -0,0 +1,206 @@
+import addStyle from "../dom/addStyle";
+import { OnloadArgs } from "../types/native";
+import ReactDOM from "react-dom";
+import {
+  getNodeEnv,
+  getRoamJSExtensionIdEnv,
+  getRoamJSVersionEnv,
+} from "./env";
+import type { Registry } from "../types";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { provideExtensionApi } from "./extensionApiContext";
+import apiPost from "./apiPost";
+import renderToast from "../components/Toast";
+
+type RunReturn =
+  | void
+  | (Partial<Registry> & { unload?: () => void })
+  | (() => void);
+
+type RunExtension = (args: OnloadArgs) => Promise<RunReturn>;
+
+const runExtension = (
+  run: RunExtension
+): { onload: (args: OnloadArgs) => void; onunload: () => void } => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore React17 shim
+  window.React.useSyncExternalStore = useSyncExternalStore;
+  let unload: (() => void) | undefined;
+  const extensionId = getRoamJSExtensionIdEnv();
+  const registry: Registry = {
+    elements: [],
+    reactRoots: [],
+    observers: [],
+    domListeners: [],
+    commands: [],
+    timeouts: [],
+  };
+  const register = (res: Partial<Registry>) => {
+    Object.keys(res).forEach((k) => {
+      const key = k as keyof Registry;
+      const val = res[key];
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore this is actually safe, but dont know how to coerce
+      registry[key].push(...val);
+    });
+  };
+  const registerListener = ((e: CustomEvent) => {
+    const res = e.detail as Partial<Registry>;
+    register(res);
+  }) as EventListener;
+  document.body.addEventListener(
+    `roamjs:${extensionId}:register`,
+    registerListener
+  );
+  registry.domListeners.push({
+    listener: registerListener,
+    el: document.body,
+    type: `roamjs:${extensionId}:register`,
+  });
+  const unregisterListener = ((e: CustomEvent) => {
+    const res = e.detail as Partial<Registry>;
+    Object.keys(res).forEach((k) => {
+      const key = k as keyof Registry;
+      const val = res[key];
+      if (val) {
+        val.forEach((el) => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore this is actually safe, but dont know how to coerce
+          const idx = registry[key].indexOf(el);
+          if (idx > -1) {
+            registry[key].splice(idx, 1);
+          }
+        });
+      }
+    });
+  }) as EventListener;
+  document.body.addEventListener(
+    `roamjs:${extensionId}:unregister`,
+    unregisterListener
+  );
+  registry.domListeners.push({
+    listener: unregisterListener,
+    el: document.body,
+    type: `roamjs:${extensionId}:unregister`,
+  });
+
+  const onload = (args: OnloadArgs) => {
+    if (window.roamjs?.loaded?.has?.(extensionId)) {
+      return;
+    }
+    provideExtensionApi(args.extensionAPI);
+    window.roamjs = {
+      loaded: window.roamjs?.loaded || new Set(),
+      extension: window.roamjs?.extension || {},
+      version: window.roamjs?.version || {},
+      actions: {},
+    };
+    window.roamjs.loaded.add(extensionId);
+    window.roamjs.version[extensionId] = getRoamJSVersionEnv();
+
+    registry.elements.push(
+      addStyle(
+        `.bp3-button:focus {
+    outline-width: 2px;
+  }`,
+        "roamjs-default"
+      )
+    );
+
+    run(args)
+      .then((res) => {
+        if (typeof res === "function") {
+          unload = res;
+        } else if (typeof res === "object") {
+          const { unload: resUnload, ...registry } = res;
+          register(registry);
+          unload = resUnload;
+        }
+        const globalApi = window.roamjs.extension[extensionId];
+        if (getNodeEnv() === "development") {
+          if (globalApi) globalApi.extensionAPI = args.extensionAPI;
+          else
+            window.roamjs.extension[extensionId] = {
+              extensionAPI: args.extensionAPI,
+            };
+        }
+        document.body.dispatchEvent(new Event(`roamjs:${extensionId}:loaded`));
+      })
+      .catch((e) => {
+        const error = e as Error;
+        if (getNodeEnv() === "development") {
+          renderToast({
+            id: "roamjs-extension-error",
+            content: `Failed to load ${extensionId} extension.`,
+            intent: "danger",
+          });
+          return;
+        }
+        apiPost({
+          domain: "https://api.samepage.network",
+          path: "errors",
+          data: {
+            method: "extension-error",
+            type: "RoamJS Extension Failed to Load",
+            data: {
+              extensionId,
+              settings: args.extensionAPI.settings.getAll(),
+              roamDepotVersion: args.extension.version,
+            },
+            message: error.message,
+            stack: error.stack,
+            version: process.env.VERSION,
+            notebookUuid: JSON.stringify({
+              owner: "RoamJS",
+              app: extensionId,
+              workspace: window.roamAlphaAPI.graph.name,
+            }),
+          },
+        })
+          .then(() =>
+            renderToast({
+              id: "roamjs-extension-error",
+              content: `Failed to load ${extensionId} extension. An Error Report has been sent to the SamePage team.`,
+              intent: "danger",
+            })
+          )
+          .catch(() => {
+            renderToast({
+              id: "roamjs-email-error",
+              content: `Failed to load ${extensionId} extension. The Error Report also failed to send to the SamePage team, please reach out to them directly at support@samepage.network.`,
+              intent: "danger",
+            });
+          });
+      });
+  };
+
+  const onunload = () => {
+    registry.elements.forEach((e) => e.remove());
+    registry.reactRoots.forEach((e) => {
+      ReactDOM.unmountComponentAtNode(e);
+      e.remove();
+    });
+    registry.observers.forEach((e) => e.disconnect());
+    registry.domListeners.forEach((e) =>
+      e.el.removeEventListener(e.type, e.listener)
+    );
+    registry.commands.forEach((label) =>
+      window.roamAlphaAPI.ui.commandPalette.removeCommand({ label })
+    );
+    registry.timeouts.forEach((e) => window.clearTimeout(e.timeout));
+
+    delete window.roamjs?.extension[extensionId];
+    delete window.roamjs?.version[extensionId];
+    window.roamjs?.loaded.delete(extensionId);
+    if (!window.roamjs?.loaded.size) {
+      document.getElementById("roamjs-default")?.remove();
+    }
+    unload?.();
+  };
+  return {
+    onload,
+    onunload,
+  };
+};
+
+export default runExtension;

package/src/util/setInputSetting.ts

@@ -0,0 +1,46 @@
+import getBasicTreeByParentUid from "../queries/getBasicTreeByParentUid";
+import createBlock from "../writes/createBlock";
+import updateBlock from "../writes/updateBlock";
+import toFlexRegex from "./toFlexRegex";
+
+const setInputSetting = ({
+  blockUid,
+  value,
+  key,
+  index = 0,
+}: {
+  blockUid: string;
+  value: string;
+  key: string;
+  index?: number;
+}): Promise<string> => {
+  const tree = getBasicTreeByParentUid(blockUid);
+  const keyNode = tree.find((t) => toFlexRegex(key).test(t.text));
+  if (keyNode && keyNode.children.length) {
+    return updateBlock({
+      uid: keyNode.children[0].uid,
+      text: value,
+    });
+  } else if (!keyNode) {
+    const uid = window.roamAlphaAPI.util.generateUID();
+    return createBlock({
+      parentUid: blockUid,
+      order: index,
+      node: { text: key, uid },
+    }).then(() =>
+      createBlock({
+        parentUid: uid,
+        order: 0,
+        node: { text: value },
+      })
+    );
+  } else {
+    return createBlock({
+      parentUid: keyNode.uid,
+      order: 0,
+      node: { text: value },
+    });
+  }
+};
+
+export default setInputSetting;

package/src/util/setInputSettings.ts

@@ -0,0 +1,37 @@
+import getBasicTreeByParentUid from "../queries/getBasicTreeByParentUid";
+import deleteBlock from "../writes/deleteBlock";
+import createBlock from "../writes/createBlock";
+import toFlexRegex from "./toFlexRegex";
+
+export const setInputSettings = ({
+  blockUid,
+  values,
+  key,
+  index = 0,
+}: {
+  blockUid: string;
+  values: string[];
+  key: string;
+  index?: number;
+}): void => {
+  const tree = getBasicTreeByParentUid(blockUid);
+  const keyNode = tree.find((t) => toFlexRegex(key).test(t.text));
+  if (keyNode) {
+    keyNode.children
+      .filter(({ text }) => !values.includes(text))
+      .forEach(({ uid }) => deleteBlock(uid));
+    values.forEach(
+      (text, order) =>
+        !keyNode.children.some(({ text: c }) => text === c) &&
+        createBlock({ node: { text }, order, parentUid: keyNode.uid })
+    );
+  } else {
+    createBlock({
+      parentUid: blockUid,
+      order: index,
+      node: { text: key, children: values.map((text) => ({ text })) },
+    });
+  }
+};
+
+export default setInputSettings;

package/src/util/stripUid.ts

@@ -0,0 +1,10 @@
+import { InputTextNode, RoamBasicNode } from "../types";
+
+const stripUid = (n: RoamBasicNode[]): InputTextNode[] => {
+  return n.map(({ uid: _uid, children, ...c }) => ({
+    ...c,
+    children: stripUid(children),
+  }));
+};
+
+export default stripUid;

package/src/util/toConfigPageName.ts

@@ -0,0 +1,3 @@
+const toConfigPageName = (id: string): string => `roam/js/${id}`;
+
+export default toConfigPageName;

package/src/util/toFlexRegex.ts

@@ -0,0 +1,7 @@
+const toFlexRegex = (key: string): RegExp =>
+  new RegExp(
+    `^\\s*${key.replace(/([()])/g, "\\$1")}\\s*(#\\.[\\w\\d-]*\\s*)?$`,
+    "i"
+  );
+
+export default toFlexRegex;

package/src/writes/clearBlockById.ts

@@ -0,0 +1,17 @@
+import getUidsFromId from "../dom/getUidsFromId";
+import submitActions from "./submitActions";
+
+const clearBlockById = (id: string): Promise<void> =>
+  submitActions([
+    {
+      type: "updateBlock",
+      params: {
+        block: {
+          uid: getUidsFromId(id).blockUid,
+          string: "",
+        },
+      },
+    },
+  ]);
+
+export default clearBlockById;

package/src/writes/clearBlockByUid.ts

@@ -0,0 +1,16 @@
+import submitActions from "./submitActions";
+
+const clearBlockByUid = (uid: string): Promise<void> =>
+  submitActions([
+    {
+      type: "updateBlock",
+      params: {
+        block: {
+          uid,
+          string: "",
+        },
+      },
+    },
+  ]);
+
+export default clearBlockByUid;

package/src/writes/createBlock.ts

@@ -0,0 +1,50 @@
+import type { InputTextNode, ActionParams } from "../types";
+import submitActions from "./submitActions";
+
+export const gatherActions = ({
+  node: {
+    text,
+    children = [],
+    uid = window.roamAlphaAPI.util.generateUID(),
+    heading,
+    viewType,
+    textAlign,
+    open = true,
+    props,
+  },
+  parentUid,
+  order = 0,
+}: {
+  node: InputTextNode;
+  parentUid: string;
+  order?: number | "last";
+}): ActionParams[] => {
+  return [
+    {
+      location: { "parent-uid": parentUid, order },
+      block: {
+        uid,
+        string: text,
+        heading,
+        "text-align": textAlign,
+        "children-view-type": viewType,
+        open,
+        props,
+      },
+    },
+    ...children.flatMap((node, order) =>
+      gatherActions({ node, parentUid: uid, order })
+    ),
+  ];
+};
+
+const createBlock = (
+  params: Parameters<typeof gatherActions>[0]
+): Promise<string> => {
+  const actions = gatherActions(params);
+  return submitActions(
+    actions.map((params) => ({ params, type: "createBlock" }))
+  ).then(() => actions[0].block?.uid || "");
+};
+
+export default createBlock;

package/src/writes/createPage.ts

@@ -0,0 +1,30 @@
+import { gatherActions } from "./createBlock";
+import { DAILY_NOTE_PAGE_TITLE_REGEX } from "../date";
+import type { InputTextNode } from "../types";
+import submitActions from "./submitActions";
+
+const createPage = ({
+  title,
+  tree = [],
+  uid = DAILY_NOTE_PAGE_TITLE_REGEX.test(title)
+    ? window.roamAlphaAPI.util.dateToPageUid(
+        window.roamAlphaAPI.util.pageTitleToDate(title) || new Date()
+      )
+    : window.roamAlphaAPI.util.generateUID(),
+}: {
+  title: string;
+  tree?: InputTextNode[];
+  uid?: string;
+}): Promise<string> => {
+  return submitActions([
+    {
+      type: "createPage",
+      params: { page: { title, uid } },
+    },
+    ...tree
+      .flatMap((node, order) => gatherActions({ node, parentUid: uid, order }))
+      .map((params) => ({ type: "createBlock" as const, params })),
+  ]).then(() => uid);
+};
+
+export default createPage;

package/src/writes/deleteBlock.ts

@@ -0,0 +1,9 @@
+import submitActions from "./submitActions";
+
+const deleteBlock = (uid: string): Promise<string> => {
+  return submitActions([
+    { params: { block: { uid } }, type: "deleteBlock" },
+  ]).then(() => uid);
+};
+
+export default deleteBlock;