From 2a99fc20091a777ba37e227fb2ca48a0b06a28f2 Mon Sep 17 00:00:00 2001
From: Varun Ramesh <varunramesh@live.com>
Date: Thu, 31 Aug 2023 02:18:31 -0700
Subject: [PATCH] Wait until component succesfully mounts to remove script tag.

---
 jest.config.js           |  4 ----
 src/blog-cells-worker.ts | 48 ++++++++++++++++++++--------------------
 src/blog-cells.css       |  2 +-
 src/blog-cells.tsx       | 20 ++++++++++++++---
 4 files changed, 42 insertions(+), 32 deletions(-)
 delete mode 100644 jest.config.js

diff --git a/jest.config.js b/jest.config.js
deleted file mode 100644
index 91a2d2c..0000000
--- a/jest.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-};
\ No newline at end of file
diff --git a/src/blog-cells-worker.ts b/src/blog-cells-worker.ts
index e944663..789604b 100644
--- a/src/blog-cells-worker.ts
+++ b/src/blog-cells-worker.ts
@@ -38,34 +38,34 @@ declare var Babel: any;
 let MODULE_KEYS: string[] = [];
 
 Babel.registerPlugin("autoprefixer", ({ types }) => {
-    return {
-      visitor: {
-        ReferencedIdentifier: (path, state) => {
-          // Skip if this variable has been bound.
-          const name = path.node.name;
-          if (path.scope.hasBinding(name)) return;
-
-          // Skip if this variable is not defined on the module.
-          if (!MODULE_KEYS.includes(name)) return;
-
-          // Replace the identifier with a lookup.
-          path.replaceWith(
-            types.memberExpression(
-              types.identifier("$"),
-              types.identifier(name),
-              false
-            )
-          );
-        },
+  return {
+    visitor: {
+      ReferencedIdentifier: (path, state) => {
+        // Skip if this variable has been bound.
+        const name = path.node.name;
+        if (path.scope.hasBinding(name)) return;
+
+        // Skip if this variable is not defined on the module.
+        if (!MODULE_KEYS.includes(name)) return;
+
+        // Replace the identifier with a lookup.
+        path.replaceWith(
+          types.memberExpression(
+            types.identifier("$"),
+            types.identifier(name),
+            false
+          )
+        );
       },
-    };
+    },
+  };
 });
 
 function transform(code: string, moduleKeys: string[] = []): string {
-    MODULE_KEYS = moduleKeys;
-    return Babel.transform(code, {
-        plugins: ["autoprefixer"],
-    }).code!;
+  MODULE_KEYS = moduleKeys;
+  return Babel.transform(code, {
+    plugins: ["autoprefixer"],
+  }).code!;
 }
 
 function formatArgs(args: any[]): string {
diff --git a/src/blog-cells.css b/src/blog-cells.css
index fc27838..3d0bf04 100644
--- a/src/blog-cells.css
+++ b/src/blog-cells.css
@@ -129,4 +129,4 @@ script[type="text/notebook-cell"] {
 
   margin-top: 25px;
   margin-bottom: 25px;
-}
\ No newline at end of file
+}
diff --git a/src/blog-cells.tsx b/src/blog-cells.tsx
index e94e5e6..87220fb 100644
--- a/src/blog-cells.tsx
+++ b/src/blog-cells.tsx
@@ -30,6 +30,7 @@ class Cell extends React.Component<
     code: string;
     autoRun: boolean;
     hideable: boolean;
+    onMount?: () => void;
   },
   any
 > {
@@ -144,6 +145,10 @@ class Cell extends React.Component<
       ],
     });
     editors.push(this.codeMirror);
+
+    if (this.props.onMount) {
+      this.props.onMount();
+    }
   }
 
   async run(code) {
@@ -207,7 +212,7 @@ domLoaded.then(() => {
   const scripts = document.querySelectorAll(
     "script[type='text/notebook-cell'], pre.notebook-cell"
   ) as NodeListOf<HTMLScriptElement>;
-  
+
   for (const script of scripts) {
     const code = script.textContent?.trim() || "";
     const autoRun = script.dataset.autorun === "true";
@@ -215,9 +220,18 @@ domLoaded.then(() => {
 
     const editor = document.createElement("div");
     script.after(editor);
-    script.remove();
 
     const root = ReactDOM.createRoot(editor);
-    root.render(<Cell code={code} autoRun={autoRun} hideable={hidden} />);
+    root.render(
+      <Cell
+        code={code}
+        autoRun={autoRun}
+        hideable={hidden}
+        onMount={() => {
+          // Remove the script tag once the cell succesfully mounts.
+          script.remove();
+        }}
+      />
+    );
   }
 });