LIVE is not pending

components/Footer.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import ReactDOMServer from "react-dom/server";
-import { ensureReact, ensureScript } from "../lambdas/common/components";
-import { RenderFunction } from "../lambdas/common/types";
 import {
   FaTwitter,
   FaGithub,
@@ -17,6 +15,9 @@ import {
   FaEnvelope,
   FaLink,
 } from "react-icons/fa";
+import ensureReact from "../src/utils/ensureReact";
+import ensureScript from "../src/utils/ensureScript";
+import { RenderFunction } from "../src/utils/types";
 
 type Props = {
   links: string[];
@@ -99,7 +100,7 @@ const Footer = ({ links, copyright }: Props): React.ReactElement => {
               <li key={link}>
                 <a href={link} target="_blank" rel="noreferrer">
                   <span className={"roamjs-footer-icon"}>
-                    {icons.find((i) => i.test.test(link)).component}
+                    {icons.find((i) => i.test.test(link))?.component}
                   </span>
                 </a>
               </li>

components/Header.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 import ReactDOMServer from "react-dom/server";
 import extractTag from "roamjs-components/util/extractTag";
-import { ensureReact, ensureScript } from "../lambdas/common/components";
-import { RenderFunction } from "../lambdas/common/types";
+import ensureReact from "../src/utils/ensureReact";
+import ensureScript from "../src/utils/ensureScript";
+import { RenderFunction } from "../src/utils/types";
 
 type Props = {
   links: { title: string; href: string }[];

components/ImagePreview.tsx

@@ -2,12 +2,10 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import ReactDOMServer from "react-dom/server";
 import { Dialog } from "@blueprintjs/core";
-import {
-  ensureBlueprint,
-  ensureReact,
-  ensureScript,
-} from "../lambdas/common/components";
-import { RenderFunction } from "../lambdas/common/types";
+import ensureBlueprint from "../src/utils/ensureBlueprint";
+import ensureReact from "../src/utils/ensureReact";
+import ensureScript from "../src/utils/ensureScript";
+import { RenderFunction } from "../src/utils/types";
 
 const ImagePreview = (): React.ReactElement => {
   const [src, setSrc] = useState("");
@@ -58,7 +56,7 @@ const ImagePreview = (): React.ReactElement => {
           setWidth(containerWidth);
         }
         const dialog = imageRef.current.closest<HTMLDivElement>(".bp3-dialog");
-        dialog.onclick = onDialogClose;
+        if (dialog) dialog.onclick = onDialogClose;
         imageRef.current.onclick = (e) => e.stopPropagation();
       }
     };
@@ -128,7 +126,7 @@ export const render: RenderFunction = (dom) => {
   if (imgs.length) {
     imgs.forEach((img) => {
       img.classList.add("roamjs-image-preview-img");
-      if (img.parentElement.tagName === "P") {
+      if (img.parentElement?.tagName === "P") {
         const parent = img.parentElement;
         const newParent = document.createElement("div");
         if (parent.parentElement) {
@@ -137,7 +135,7 @@ export const render: RenderFunction = (dom) => {
           parent.remove();
         }
       }
-      img.parentElement.classList.add("roamjs-image-container");
+      img.parentElement?.classList.add("roamjs-image-container");
     });
     const container = document.createElement("div");
     container.id = ID;

components/Sidebar.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 import ReactDOMServer from "react-dom/server";
-import { ensureReact, ensureScript } from "../lambdas/common/components";
-import { RenderFunction } from "../lambdas/common/types";
 import cytoscape from "cytoscape";
+import ensureReact from "../src/utils/ensureReact";
+import ensureScript from "../src/utils/ensureScript";
+import { RenderFunction } from "../src/utils/types";
 
 type Props = {
   widgets: string[];
@@ -122,7 +123,7 @@ export const render: RenderFunction = (dom, props, context) => {
     widgets: props["widgets"] || [],
     references: context.references.map((r) => ({
       title: r.title,
-      uid: r.node.uid,
+      uid: r.node.uid ?? "",
       path: context.convertPageNameToPath(r.title),
     })),
     pageName: context.pageName,

src/components/StaticSiteDashboard.tsx

@@ -1458,7 +1458,7 @@ const WebsiteStatusesView = ({
     if (parsedProps.success) {
       return parsedProps.data;
     }
-    if (["SUCCESS", "FAILURE"].includes(latest.status)) {
+    if (["SUCCESS", "FAILURE", "LIVE"].includes(latest.status)) {
       return {
         status: "NONE",
       };

src/utils/ensureBlueprint.ts

@@ -0,0 +1,16 @@
+const ensureBlueprint = (document: Document, head = document.head): void => {
+  if (!document.getElementById("roamjs-blueprint")) {
+    const bp = document.createElement("link");
+    bp.id = "roamjs-blueprint";
+    bp.href =
+      "https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css";
+    const normalize = document.createElement("link");
+    normalize.id = "roamjs-blueprint-normalize";
+    normalize.href = "https://unpkg.com/normalize.css@^7.0.0";
+    bp.rel = normalize.rel = "stylesheet";
+    head.appendChild(normalize);
+    head.appendChild(bp);
+  }
+};
+
+export default ensureBlueprint;

src/utils/ensureReact.ts

@@ -0,0 +1,15 @@
+const ensureReact = (document: Document, head = document.head): void => {
+  if (!document.getElementById("roamjs-react")) {
+    const react = document.createElement("script");
+    react.id = "roamjs-react";
+    react.src = "https://unpkg.com/react@17/umd/react.production.min.js";
+    const reactdom = document.createElement("script");
+    reactdom.id = "roamjs-react-dom";
+    reactdom.src =
+      "https://unpkg.com/react-dom@17/umd/react-dom.production.min.js";
+    head.appendChild(react);
+    head.appendChild(reactdom);
+  }
+};
+
+export default ensureReact;

src/utils/ensureScript.ts

@@ -0,0 +1,20 @@
+const ensureScript = (
+  id: string,
+  componentProps: Record<string, unknown>,
+  document: Document,
+  head = document.head
+): void => {
+  const propScript = document.createElement("script");
+  propScript.innerHTML = `window.roamjsProps = {
+            ...window.roamjsProps,
+            "${id}": ${JSON.stringify(componentProps)}
+          }`;
+  propScript.type = "text/javascript";
+  head.appendChild(propScript);
+  const componentScript = document.createElement("script");
+  componentScript.src = `${process.env.COMPONENTS_URL}/${id}.js`;
+  componentScript.defer = true;
+  head.appendChild(componentScript);
+};
+
+export default ensureScript;

src/utils/types.ts

@@ -0,0 +1,25 @@
+import type { JSDOM } from "jsdom";
+import type { TreeNode } from "roamjs-components/types";
+import type { RoamContext } from "roamjs-components/marked";
+
+export type PartialRecursive<T> = T extends object
+  ? { [K in keyof T]?: PartialRecursive<T[K]> }
+  : T;
+
+export type RenderFunction = (
+  dom: JSDOM,
+  props: Record<string, string[]>,
+  context: {
+    convertPageNameToPath: (s: string) => string;
+    references: { title: string; node: PartialRecursive<TreeNode> }[];
+    pageName: string;
+    deployId: string;
+    parseInline: (str: string, ctx?: Omit<RoamContext, "marked">) => string;
+  }
+) => void;
+
+declare global {
+  interface Window {
+    roamjsProps: Record<string, unknown>;
+  }
+}