Migrate extension to latest roamjs-components

.github/workflows/main.yaml

@@ -9,19 +9,18 @@ on:
 
 env:
   API_URL: https://lambda.roamjs.com
-  ROAMJS_DEVELOPER_TOKEN: ${{ secrets.ROAMJS_DEVELOPER_TOKEN }}
-  ROAMJS_EMAIL: support@roamjs.com
+  GITHUB_TOKEN: ${{ secrets.ROAMJS_RELEASE_TOKEN }}
   ROAMJS_EXTENSION_ID: developer
-  ROAMJS_RELEASE_TOKEN: ${{ secrets.ROAMJS_RELEASE_TOKEN }}
+  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+  AWS_REGION: us-east-1
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: install
         run: npm install
       - name: build
-        run: npx roamjs-scripts build --depot
-      - name: publish
-        run: npx roamjs-scripts publish --depot
+        run: npx samepage build

package.json

@@ -4,17 +4,17 @@
   "description": "Develop and publish your own Roam extensions with the help of RoamJS!",
   "main": "./build/main.js",
   "scripts": {
+    "start": "samepage dev",
     "prebuild:roam": "npm install",
-    "build:roam": "roamjs-scripts build --depot",
-    "start": "npx roamjs-scripts dev --depot"
+    "build:roam": "samepage build --dry"
   },
   "license": "MIT",
-  "devDependencies": {
-    "roamjs-scripts": "^0.23.9"
-  },
   "dependencies": {
     "@dvargas92495/codemirror": "^5.65.11",
     "@dvargas92495/react-codemirror2": "^7.2.9",
-    "roamjs-components": "^0.74.8"
+    "roamjs-components": "^0.79.3"
+  },
+  "samepage": {
+    "extends": "node_modules/roamjs-components/package.json"
   }
 }

src/Repl.tsx → src/components/Repl.tsx

@@ -29,14 +29,14 @@ const EvalRepl = ({ code }: { code: string }) => {
           )
         );
       } catch (e) {
-        setOutput(e.message);
+        setOutput((e as Error).message);
       }
     }, 3000);
   }, [evalRef, code, setOutput]);
   return <code>{output}</code>;
 };
 
-const Repl: React.FC<ReplProps> = ({ blockUid }) => {
+const Repl = ({ blockUid }: ReplProps) => {
   const [code, setCode] = useState(
     () => getFullTreeByParentUid(blockUid).children?.[0]?.text
   );

src/postman.tsx → src/features/postman.tsx

@@ -2,7 +2,6 @@ import createHashtagObserver from "roamjs-components/dom/createHashtagObserver";
 import getUids from "roamjs-components/dom/getUids";
 import getFullTreeByParentUid from "roamjs-components/queries/getFullTreeByParentUid";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
-import runExtension from "roamjs-components/util/runExtension";
 import extractTag from "roamjs-components/util/extractTag";
 import { Icon, Popover, Spinner, Text } from "@blueprintjs/core";
 import axios from "axios";
@@ -326,8 +325,8 @@ const initializePostman = () => {
       const tree = getFullTreeByParentUid(
         getPageUidByPageTitle("roam/js/postman")
       ).children;
-      const tag = s.getAttribute("data-tag");
-      const apis = tree.find((t) => APIS_REGEX.test(t.text)).children;
+      const tag = s.getAttribute("data-tag") || "";
+      const apis = tree.find((t) => APIS_REGEX.test(t.text))?.children || [];
       const api = apis.find(
         (a) => tag.toUpperCase() === extractTag(a.text.trim()).toUpperCase()
       );

src/sparql.tsx → src/features/sparql.tsx

@@ -28,7 +28,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import ReactDOM from "react-dom";
 import getSettingIntFromTree from "roamjs-components/util/getSettingIntFromTree";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
@@ -63,7 +62,7 @@ const URL_REGEX = new RegExp(regex, "ig");
 
 type PageResult = { description: string; id: string; label: string };
 const OUTPUT_FORMATS = ["Parent", "Line", "Table"] as const;
-export type OutputFormat = typeof OUTPUT_FORMATS[number];
+export type OutputFormat = (typeof OUTPUT_FORMATS)[number];
 export type RenderProps = {
   queriesCache: {
     [uid: string]: {
@@ -113,19 +112,20 @@ const IMAGE_REGEX_URL =
 const WIKIDATA_SOURCE =
   "https://query.wikidata.org/bigdata/namespace/wdq/sparql?format=json&query=";
 
-const combineTextNodes = (nodes: InputTextNode[]) =>
+const combineTextNodes = (nodes: InputTextNode[] = []) =>
   nodes
     .sort(({ text: a }, { text: b }) => a.localeCompare(b))
     .map((node, i, arr) => {
       const firstIndex = arr.findIndex((n) => n.text === node.text);
       if (i > firstIndex) {
-        arr[firstIndex].children.push(...node.children);
+        const { children } = arr[firstIndex];
+        if (children) children.push(...(node.children || []));
         node.text = "";
         node.children = [];
       }
       return node;
     })
-    .filter((node) => !!node.text || !!node.children.length)
+    .filter((node) => !!node.text || !!node.children?.length)
     .map((node) => {
       node.children = combineTextNodes(node.children);
       return node;
@@ -307,7 +307,7 @@ const SparqlQuery = ({
   );
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
-  const [activeItem, setActiveItem] = useState<typeof WIKIDATA_ITEMS[number]>(
+  const [activeItem, setActiveItem] = useState<(typeof WIKIDATA_ITEMS)[number]>(
     WIKIDATA_ITEMS[0]
   );
   const [radioValue, setRadioValue] = useState("");
@@ -663,20 +663,23 @@ const initializeSparql = () => {
           id: "import",
           fields: [
             {
+              // @ts-ignore
               Panel: TextPanel,
               title: "default label",
               description:
                 "The default label each Sparql query will have on import",
               defaultValue: DEFAULT_EXPORT_LABEL,
             },
             {
+              // @ts-ignore
               Panel: NumberPanel,
               title: "default limit",
               description:
                 "The default limit each Sparql query will have on import",
               defaultValue: 10,
             },
             {
+              // @ts-ignore
               Panel: FlagPanel,
               title: "qualifiers",
               description:
@@ -735,17 +738,17 @@ const initializeSparql = () => {
   window.roamAlphaAPI.ui.commandPalette.addCommand({
     label: "Run SPARQL Query",
     callback: () =>
-      window.roamAlphaAPI.ui.mainWindow
-        .getOpenPageOrBlockUid()
-        .then((parentUid) =>
+      window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid().then(
+        (parentUid) =>
+          parentUid &&
           render({
             blockUid:
               window.roamAlphaAPI.ui.getFocusedBlock()?.["block-uid"] ||
               getFirstChildUidByBlockUid(parentUid),
             queriesCache,
             parentUid,
           })
-        ),
+      ),
   });
 
   createHTMLObserver({

src/index.ts

@@ -4,17 +4,17 @@ import getBlockUidFromTarget from "roamjs-components/dom/getBlockUidFromTarget";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 import createBlock from "roamjs-components/writes/createBlock";
 import extractRef from "roamjs-components/util/extractRef";
-import getCodeFromBlock from "./getCodeFromBlock";
+import getCodeFromBlock from "./utils/getCodeFromBlock";
 import getParentUidByBlockUid from "roamjs-components/queries/getParentUidByBlockUid";
 import getOrderByBlockUid from "roamjs-components/queries/getOrderByBlockUid";
 import getChildrenLengthByParentUid from "roamjs-components/queries/getChildrenLengthByParentUid";
 import apiGet from "roamjs-components/util/apiGet";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import createButtonObserver from "roamjs-components/dom/createButtonObserver";
 import { createComponentRender } from "roamjs-components/components/ComponentContainer";
-import Repl from "./Repl";
-import initializePostman from "./postman";
-import initializeSparql from "./sparql";
+import Repl from "./components/Repl";
+import initializePostman from "./features/postman";
+import initializeSparql from "./features/sparql";
 
 const AsyncFunction: FunctionConstructor = new Function(
   `return Object.getPrototypeOf(async function(){}).constructor`
@@ -43,7 +43,7 @@ export default runExtension({
     createHTMLObserver({
       className: "bp3-button",
       tag: "BUTTON",
-      callback: (b: HTMLButtonElement) => {
+      callback: (b) => {
         const parentUid = getBlockUidFromTarget(b);
         if (parentUid && !b.hasAttribute("data-roamjs-developer-button")) {
           b.setAttribute("data-roamjs-developer-button", "true");
@@ -104,10 +104,14 @@ export default runExtension({
           window.roamAlphaAPI.ui.getFocusedBlock()?.["block-uid"];
         const parentUid = blockUid
           ? getParentUidByBlockUid(blockUid)
-          : await window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid();
+          : await window.roamAlphaAPI.ui.mainWindow
+              .getOpenPageOrBlockUid()
+              .then(
+                (b) => b || window.roamAlphaAPI.util.dateToPageUid(new Date())
+              );
         const base = blockUid
           ? getOrderByBlockUid(blockUid)
-          : getChildrenLengthByParentUid(blockUid);
+          : getChildrenLengthByParentUid(parentUid);
         return apiGet<{ data: { title: string; html_url: string }[] }>({
           domain: "https://api.github.com",
           path: "issues",

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/roamjs-scripts/default.tsconfig",
+  "extends": "./node_modules/@samepage/scripts/tsconfig.json",
   "include": [
     "src",
     "lambdas"