roamjs-components 1.0.0-beta.1 → 1.0.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "roamjs-components",
   "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {

package/src/components/ComponentContainer.tsx

@@ -49,20 +49,22 @@ export const createComponentRender =
   (b: HTMLButtonElement, args?: OnloadArgs): void => {
     if (b.parentElement) {
       b.parentElement.onmousedown = (e: MouseEvent) => e.stopPropagation();
-      const blockUid = getBlockUidFromTarget(b);
-      const possibleBlockId = b.closest(".roam-block")?.id;
-      const blockId = possibleBlockId?.endsWith?.(blockUid)
-        ? possibleBlockId
-        : undefined;
-      if (blockUid) {
-        renderWithUnmount(
-          <ComponentContainer blockId={blockId} className={className}>
-            <Fc blockUid={blockUid} />
-          </ComponentContainer>,
-          b.parentElement,
-          args
-        );
-      }
+      getBlockUidFromTarget(b).then((blockUid) => {
+        if (!b.parentElement) return;
+        const possibleBlockId = b.closest(".roam-block")?.id;
+        const blockId = possibleBlockId?.endsWith?.(blockUid)
+          ? possibleBlockId
+          : undefined;
+        if (blockUid) {
+          renderWithUnmount(
+            <ComponentContainer blockId={blockId} className={className}>
+              <Fc blockUid={blockUid} />
+            </ComponentContainer>,
+            b.parentElement,
+            args
+          );
+        }
+      });
     }
   };
 

package/src/components/ConfigPanels/BlocksPanel.tsx

@@ -28,23 +28,25 @@ const BlocksPanel: FieldPanel<BlocksField> = ({
           )
       )
         .then((formatUid) =>
-          getFirstChildUidByBlockUid(formatUid)
-            ? formatUid
-            : (defaultValue?.length
-                ? Promise.all(
-                    defaultValue.map((node, order) =>
-                      createBlock({
-                        node,
-                        parentUid: formatUid,
-                        order,
-                      })
+          getFirstChildUidByBlockUid(formatUid).then((childUid) =>
+            childUid
+              ? formatUid
+              : (defaultValue?.length
+                  ? Promise.all(
+                      defaultValue.map((node, order) =>
+                        createBlock({
+                          node,
+                          parentUid: formatUid,
+                          order,
+                        })
+                      )
                     )
-                  )
-                : createBlock({
-                    node: { text: " " },
-                    parentUid: formatUid,
-                  })
-              ).then(() => formatUid)
+                  : createBlock({
+                      node: { text: " " },
+                      parentUid: formatUid,
+                    })
+                ).then(() => formatUid)
+          )
         )
         .then((uid) => {
           window.roamAlphaAPI.ui.components.renderBlock({

package/src/dom/addKeyboardTriggers.ts

@@ -1,7 +1,7 @@
 import type { RoamBasicNode } from "../types/native";
 import getSettingValueFromTree from "../util/getSettingValueFromTree";
 
-const addKeybordTriggers = ({
+const addKeybordTriggers = async ({
   triggers: inputTriggers,
 }: {
   triggers: {
@@ -12,26 +12,30 @@ const addKeybordTriggers = ({
     callback: () => void;
   }[];
 }) => {
-  const triggers = inputTriggers.map(({ trigger, callback }) => {
-    if (trigger instanceof RegExp) {
-      return { trigger, callback };
-    } else if (typeof trigger === "function") {
-      return { callback, trigger: trigger() };
-    } else {
-      const triggerValue = getSettingValueFromTree({
-        tree: trigger.tree,
-        key: "trigger",
-        defaultValue: trigger.defaultValue || "\\\\",
-      })
-        .replace(/"/g, "")
-        .replace(/\\/g, "\\\\")
-        .replace(/\+/g, "\\+")
-        .trim();
+  const triggers = await Promise.all(
+    inputTriggers.map(async ({ trigger, callback }) => {
+      if (trigger instanceof RegExp) {
+        return { trigger, callback };
+      } else if (typeof trigger === "function") {
+        return { callback, trigger: trigger() };
+      } else {
+        const triggerValue = (
+          await getSettingValueFromTree({
+            tree: trigger.tree,
+            key: "trigger",
+            defaultValue: trigger.defaultValue || "\\\\",
+          })
+        )
+          .replace(/"/g, "")
+          .replace(/\\/g, "\\\\")
+          .replace(/\+/g, "\\+")
+          .trim();
 
-      const triggerRegex = new RegExp(`${triggerValue}$`);
-      return { callback, trigger: triggerRegex };
-    }
-  });
+        const triggerRegex = new RegExp(`${triggerValue}$`);
+        return { callback, trigger: triggerRegex };
+      }
+    })
+  );
 
   document.addEventListener("input", (e) => {
     const target = e.target as HTMLElement;

package/src/dom/createPageTitleObserver.ts

@@ -15,23 +15,24 @@ const createPageTitleObserver = ({
       "roam-article"
     )[0] as HTMLDivElement;
     if (d) {
-      const uid = getPageUidByPageTitle(title);
-      const attribute = `data-roamjs-${uid}`;
-      if ((uid && url === getRoamUrl(uid)) || (log && url === getRoamUrl())) {
-        // React's rerender crushes the old article/heading
-        setTimeout(() => {
-          if (!d.hasAttribute(attribute)) {
-            d.setAttribute(attribute, "true");
-            callback(
-              document.getElementsByClassName(
-                "roam-article"
-              )[0] as HTMLDivElement
-            );
-          }
-        }, 1);
-      } else {
-        d.removeAttribute(attribute);
-      }
+      getPageUidByPageTitle(title).then((uid) => {
+        const attribute = `data-roamjs-${uid}`;
+        if ((uid && url === getRoamUrl(uid)) || (log && url === getRoamUrl())) {
+          // React's rerender crushes the old article/heading
+          setTimeout(() => {
+            if (!d.hasAttribute(attribute)) {
+              d.setAttribute(attribute, "true");
+              callback(
+                document.getElementsByClassName(
+                  "roam-article"
+                )[0] as HTMLDivElement
+              );
+            }
+          }, 1);
+        } else {
+          d.removeAttribute(attribute);
+        }
+      });
     }
   };
   const wrapped = (e: HashChangeEvent) => listener(e.newURL);

package/src/queries/getCurrentUserDisplayName.ts

@@ -1,9 +1,9 @@
 import getCurrentUserUid from "./getCurrentUserUid";
 import getDisplayNameByUid from "./getDisplayNameByUid";
 
-const getCurrentUserDisplayName = (): string => {
+const getCurrentUserDisplayName = async (): Promise<string> => {
   const uid = getCurrentUserUid();
-  return getDisplayNameByUid(uid);
+  return await getDisplayNameByUid(uid);
 };
 
 export default getCurrentUserDisplayName;

package/src/testing/mockRoamEnvironment.ts

@@ -1387,20 +1387,24 @@ const mockRoamEnvironment = () => {
         // TODO - process exp
         return node;
       };
-      if (Array.isArray(id)) {
-        const [attr, val] = id;
-        if (attr === ":block/uid") {
-          return pick(graph.state[graph.uids[val]]);
-        } else if (attr === ":node/title") {
-          return pick(graph.state[graph.titles[val]]);
-        } else {
-          throw new Error(`Attr is not supported: ${attr}`);
-        }
-      } else if (typeof id === "number") {
-        return pick(graph.state[id]);
-      } else {
-        throw new Error(`Id is not supported: ${id}`);
-      }
+      return Promise.resolve(
+        Array.isArray(id)
+          ? (() => {
+              const [attr, val] = id;
+              if (attr === ":block/uid") {
+                return pick(graph.state[graph.uids[val]]);
+              } else if (attr === ":node/title") {
+                return pick(graph.state[graph.titles[val]]);
+              } else {
+                throw new Error(`Attr is not supported: ${attr}`);
+              }
+            })()
+          : typeof id === "number"
+          ? pick(graph.state[id])
+          : (() => {
+              throw new Error(`Id is not supported: ${id}`);
+            })()
+      );
     },
     q: (query, ..._params) => {
       return mockQuery({ graph, query });

package/src/util/extensionDeprecatedWarning.ts

@@ -17,10 +17,11 @@ const extensionDeprecatedWarning = async ({
 }): Promise<void> => {
   const configUid = await getPageUidByPageTitle(extensionId);
   const config = await getBasicTreeByParentUid(configUid);
-  const donotShowAgainUid = getSubTree({
+  const donotShowAgainNode = await getSubTree({
     tree: config,
     key: "Do not show again",
-  }).uid;
+  });
+  const donotShowAgainUid = donotShowAgainNode.uid;
   if (!donotShowAgainUid) {
     const blocks = (
       (await window.roamAlphaAPI.data.backend.q(

package/src/util/getAuthorizationHeader.ts

@@ -1,11 +1,11 @@
 import getCurrentUserEmail from "../queries/getCurrentUserEmail";
 import getToken from "./getToken";
 
-const getAuthorizationHeader = (service?: string) => {
-  const token = getToken();
+const getAuthorizationHeader = async (service?: string): Promise<string> => {
+  const token = await getToken();
   return token
-    ? `Bearer ${window.btoa(`${getCurrentUserEmail()}:${getToken()}`)}`
-    : getToken(service);
+    ? `Bearer ${window.btoa(`${getCurrentUserEmail()}:${token}`)}`
+    : await getToken(service);
 };
 
 export default getAuthorizationHeader;

package/src/util/getOauth.ts

@@ -5,7 +5,7 @@ import localStorageGet from "./localStorageGet";
 import toConfigPageName from "./toConfigPageName";
 import toFlexRegex from "./toFlexRegex";
 
-const getOauth = (service: string, label?: string): string => {
+const getOauth = async (service: string, label?: string): Promise<string> => {
   const fromStorage = localStorageGet(`oauth-${service}`);
   if (fromStorage) {
     const accounts = JSON.parse(fromStorage) as {
@@ -18,14 +18,13 @@ const getOauth = (service: string, label?: string): string => {
     const { data, ...node } = accountNode;
     return data ? JSON.stringify({ ...JSON.parse(data), node }) : "{}";
   }
-  const tree = getShallowTreeByParentUid(
-    getPageUidByPageTitle(toConfigPageName(service))
-  );
+  const pageUid = await getPageUidByPageTitle(toConfigPageName(service));
+  const tree = await getShallowTreeByParentUid(pageUid);
   const node = tree.find((s) => toFlexRegex("oauth").test(s.text.trim()));
   if (!node) {
     return "{}";
   }
-  const nodeChildren = getShallowTreeByParentUid(node.uid);
+  const nodeChildren = await getShallowTreeByParentUid(node.uid);
   const index = label
     ? nodeChildren.findIndex((t) => toFlexRegex(label).test(t.text))
     : 0;
@@ -37,11 +36,11 @@ const getOauth = (service: string, label?: string): string => {
     const obj = JSON.parse(labelNode.text);
     obj.node = {
       uid: labelNode.uid,
-      time: getEditTimeByBlockUid(labelNode.uid),
+      time: await getEditTimeByBlockUid(labelNode.uid),
     };
     return JSON.stringify(obj);
   }
-  const dataNode = getShallowTreeByParentUid(labelNode.uid)[0];
+  const dataNode = (await getShallowTreeByParentUid(labelNode.uid))[0];
   const uid = dataNode?.uid || "";
   if (!dataNode?.text) {
     return "{}";
@@ -49,7 +48,7 @@ const getOauth = (service: string, label?: string): string => {
   const obj = JSON.parse(dataNode.text);
   obj.node = {
     uid,
-    time: uid ? getEditTimeByBlockUid(uid) : 0,
+    time: uid ? await getEditTimeByBlockUid(uid) : 0,
   };
   return JSON.stringify(obj);
 };

package/src/util/getOauthAccounts.ts

@@ -4,7 +4,7 @@ import localStorageGet from "./localStorageGet";
 import toConfigPageName from "./toConfigPageName";
 import toFlexRegex from "./toFlexRegex";
 
-const getOauthAccounts = (service: string): string[] => {
+const getOauthAccounts = async (service: string): Promise<string[]> => {
   const fromStorage = localStorageGet(`oauth-${service}`);
   if (fromStorage) {
     const accounts = JSON.parse(fromStorage) as {
@@ -13,14 +13,14 @@ const getOauthAccounts = (service: string): string[] => {
     }[];
     return accounts.map((a) => a.text);
   }
-  const tree = getShallowTreeByParentUid(
-    getPageUidByPageTitle(toConfigPageName(service))
-  );
+  const pageUid = await getPageUidByPageTitle(toConfigPageName(service));
+  const tree = await getShallowTreeByParentUid(pageUid);
   const node = tree.find((s) => toFlexRegex("oauth").test(s.text.trim()));
   if (!node) {
     return [];
   }
-  return getShallowTreeByParentUid(node.uid).map((t) => t.text);
+  const nodeChildren = await getShallowTreeByParentUid(node.uid);
+  return nodeChildren.map((t) => t.text);
 };
 
 export default getOauthAccounts;

package/src/util/getSettingValueFromTree.ts

@@ -2,9 +2,9 @@ import getBasicTreeByParentUid from "../queries/getBasicTreeByParentUid";
 import type { InputTextNode } from "../types";
 import toFlexRegex from "./toFlexRegex";
 
-const getSettingValueFromTree = ({
+const getSettingValueFromTree = async ({
   parentUid = "",
-  tree = getBasicTreeByParentUid(parentUid),
+  tree,
   key,
   defaultValue = "",
 }: {
@@ -12,8 +12,12 @@ const getSettingValueFromTree = ({
   tree?: InputTextNode[];
   key: string;
   defaultValue?: string;
-}): string => {
-  const node = tree.find((s) => toFlexRegex(key).test(s.text.trim()));
+}): Promise<string> => {
+  // results in type errors via `npx tsc --noEmit`
+  // const resolvedTree = tree || (await getBasicTreeByParentUid(parentUid));
+  let resolvedTree = tree;
+  if (!resolvedTree) resolvedTree = await getBasicTreeByParentUid(parentUid);
+  const node = resolvedTree.find((s) => toFlexRegex(key).test(s.text.trim()));
   const value = node?.children?.[0]
     ? node?.children?.[0].text.trim()
     : defaultValue;

package/src/util/getSubTree.ts

@@ -3,23 +3,25 @@ import type { RoamBasicNode } from "../types/native";
 import createBlock from "../writes/createBlock";
 import toFlexRegex from "./toFlexRegex";
 
-const getSubTree = ({
+const getSubTree = async ({
   key,
   parentUid,
   order = 0,
-  tree = parentUid ? getBasicTreeByParentUid(parentUid) : [],
+  tree,
 }: {
   key: string;
   parentUid?: string;
   tree?: RoamBasicNode[];
   order?: number;
-}): RoamBasicNode => {
-  const node = tree.find((s) => toFlexRegex(key).test(s.text.trim()));
+}): Promise<RoamBasicNode> => {
+  const resolvedTree =
+    tree || (parentUid ? await getBasicTreeByParentUid(parentUid) : []);
+  const node = resolvedTree.find((s) => toFlexRegex(key).test(s.text.trim()));
   if (node) return node;
   const defaultNode = { text: "", children: [] };
   if (parentUid) {
     const uid = window.roamAlphaAPI.util.generateUID();
-    createBlock({ node: { text: key, uid }, parentUid, order });
+    await createBlock({ node: { text: key, uid }, parentUid, order });
     return {
       uid,
       ...defaultNode,

package/src/util/getToken.ts

@@ -3,10 +3,15 @@ import getPageUidByPageTitle from "../queries/getPageUidByPageTitle";
 import getTokenFromTree from "./getTokenFromTree";
 import localStorageGet from "./localStorageGet";
 
-const getToken = (service = "roamjs"): string =>
-  localStorageGet(`token${service === "roamjs" ? "" : `-${service}`}`) ||
-  getTokenFromTree(
-    getBasicTreeByParentUid(getPageUidByPageTitle(`roam/js/${service}`))
+const getToken = async (service = "roamjs"): Promise<string> => {
+  const fromStorage = localStorageGet(
+    `token${service === "roamjs" ? "" : `-${service}`}`
   );
+  if (fromStorage) return fromStorage;
+
+  const pageUid = await getPageUidByPageTitle(`roam/js/${service}`);
+  const tree = await getBasicTreeByParentUid(pageUid);
+  return getTokenFromTree(tree);
+};
 
 export default getToken;

package/src/util/handleFetch.ts

@@ -22,18 +22,18 @@ type HandleFetch = <T extends Record<string, unknown> | ArrayBuffer>(
   // ) => HandleFetchReturn<T, B>;
 ) => Promise<T>;
 
-const handleFetch: HandleFetch = (
+const handleFetch: HandleFetch = async (
   transformArgs,
   { method, anonymous, authorization, path, href, domain, headers = {}, buffer }
 ) => {
   const url = new URL(href || `${domain || getApiUrlEnv()}/${path}`);
-  const defaultHeaders = !anonymous
-    ? { Authorization: authorization || getAuthorizationHeader() }
+  const authHeader = !anonymous
+    ? { Authorization: authorization || (await getAuthorizationHeader()) }
     : ({} as HeadersInit);
   return fetch(
     ...transformArgs(url, {
       method,
-      headers: { ...defaultHeaders, ...headers },
+      headers: { ...authHeader, ...headers },
     })
   ).then((r) => {
     if (!r.ok) {

package/src/util/setInputSetting.ts

@@ -3,7 +3,7 @@ import createBlock from "../writes/createBlock";
 import updateBlock from "../writes/updateBlock";
 import toFlexRegex from "./toFlexRegex";
 
-const setInputSetting = ({
+const setInputSetting = async ({
   blockUid,
   value,
   key,
@@ -14,7 +14,7 @@ const setInputSetting = ({
   key: string;
   index?: number;
 }): Promise<string> => {
-  const tree = getBasicTreeByParentUid(blockUid);
+  const tree = await getBasicTreeByParentUid(blockUid);
   const keyNode = tree.find((t) => toFlexRegex(key).test(t.text));
   if (keyNode && keyNode.children.length) {
     return updateBlock({

package/src/util/setInputSettings.ts

@@ -3,7 +3,7 @@ import deleteBlock from "../writes/deleteBlock";
 import createBlock from "../writes/createBlock";
 import toFlexRegex from "./toFlexRegex";
 
-export const setInputSettings = ({
+export const setInputSettings = async ({
   blockUid,
   values,
   key,
@@ -13,8 +13,8 @@ export const setInputSettings = ({
   values: string[];
   key: string;
   index?: number;
-}): void => {
-  const tree = getBasicTreeByParentUid(blockUid);
+}): Promise<void> => {
+  const tree = await getBasicTreeByParentUid(blockUid);
   const keyNode = tree.find((t) => toFlexRegex(key).test(t.text));
   if (keyNode) {
     keyNode.children