set up singleton pattern for esbuild initialization to resolve multiple click issue on CODE PREVIEW button

Author: jujupro

app/src/components/bottom/CodePreview.tsx

@@ -4,8 +4,6 @@ import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-dracula';
 import 'ace-builds/src-noconflict/theme-terminal';
 
-import * as esbuild from 'esbuild-wasm';
-
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   codePreviewInput,
@@ -19,22 +17,14 @@ import { RootState } from '../../redux/store';
 import { fetchPlugin } from '../../plugins/fetch-plugin';
 import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
 import useResizeObserver from '../../tree/useResizeObserver';
+import { initializeEsbuild } from '../../helperFunctions/esbuildService';
 
 const CodePreview: React.FC<{
   theme: string | null;
   setTheme: any | null;
 }> = ({ theme, setTheme }) => {
   const ref = useRef<any>();
 
-  /**
-   * Starts the Web Assembly service.
-   */
-  const startService = async () => {
-    ref.current = await esbuild.initialize({
-      worker: true,
-      wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm'
-    });
-  };
   const dispatch = useDispatch();
 
   const wrapper = useRef();
@@ -49,7 +39,8 @@ const CodePreview: React.FC<{
   const [input, setInput] = useState('');
 
   useEffect(() => {
-    startService();
+    //Starts the Web Assembly service
+    initializeEsbuild();
   }, []);
 
   useEffect(() => {
@@ -61,6 +52,13 @@ const CodePreview: React.FC<{
     dispatch(codePreviewInput(currentComponent.code));
   }, [currentComponent, state.components]);
 
+  useEffect(() => {
+    console.log('CodePreview Mounted');
+    return () => {
+      console.log('CodePreview Unmounted');
+    };
+  }, []);
+
   /**
    * Handler thats listens to changes in code editor
    * @param {string} data - Code entered by the user

app/src/helperFunctions/esbuildService.ts

@@ -0,0 +1,15 @@
+import * as esbuild from 'esbuild-wasm';
+
+/* Singleton pattern for initializing esbuild */
+/* This ensures that esbuild is only initialized once, regardless of how many times CodePreview is mounted and unmounted */
+let isEsbuildInitialized = false;
+
+export const initializeEsbuild = async () => {
+  if (!isEsbuildInitialized) {
+    await esbuild.initialize({
+      worker: true,
+      wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm'
+    });
+    isEsbuildInitialized = true;
+  }
+};