Wait until component succesfully mounts to remove script tag.

rameshvarun · Aug 31, 2023 · 2a99fc2 · 2a99fc2
1 parent 1873c66
commit 2a99fc2
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/jest.config.js b/jest.config.js
diff --git 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
@@ -129,4 +129,4 @@ script[type="text/notebook-cell"] {
 
   margin-top: 25px;
   margin-bottom: 25px;
-}
+}
diff --git 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,17 +212,26 @@ 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";
     const hidden = script.dataset.hidden === "true";
 
     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();
+        }}
+      />
+    );
   }
 });