use the ref directly

Author: newrun

src/renderer/components/UserAppUI.jsx

@@ -6,16 +6,13 @@ import useConsoleLog from '../workspace/useConsoleLog';
 
 export default function () {
   const { workspace, scriptVersionId } = useWorkspace();
-  const [webview, setWebview] = useState();
+  const webviewRef = useRef(null);
   const [attached, setAttached] = useState(false);
   const { addConsoleLog } = useConsoleLog();
-  const webviewRef = useCallback((node) => {
-    setWebview(node);
-  }, []);
 
   useEffect(() => {
-    if (workspace?.enabled && webview && attached) {
-      webview?.reload();
+    if (workspace?.enabled && webviewRef.current && attached) {
+      webviewRef.current?.reload();
     }
   }, [scriptVersionId, workspace?.enabled, attached]);
 
@@ -31,15 +28,15 @@ export default function () {
 
   const handleDidAttach = () => {
     setAttached(true);
-    //webview.openDevTools();
+    //webviewRef.current.openDevTools();
   };
 
   function handleConsoleMessage(log) {
     addConsoleLog(Decode(log));
   }
 
-  useEventListener(webview, 'ipc-message', handleIpcMessage);
-  useEventListener(webview, 'did-attach', handleDidAttach);
+  useEventListener(webviewRef, 'ipc-message', handleIpcMessage);
+  useEventListener(webviewRef, 'did-attach', handleDidAttach);
 
   return (
     <div style={{ width: '100%', height: '100%' }}>

src/renderer/components/webbrowser/WebView.jsx

@@ -13,48 +13,48 @@ import { sleep } from '../../util';
 function WebView({ tabId, onIpcMessage }, ref) {
   const { defaultURL, updateTab } = useWebView({ tabId });
   const [isDomReady, setDomReady] = useState(false);
-  const [webview, setWebview] = useState();
+  const webviewRef = useRef(null);
 
   useImperativeHandle(
     ref,
     () => ({
       loadURL: async (url, options) => {
         try {
-          return await webview?.loadURL(url, options);
+          return await webviewRef.current?.loadURL(url, options);
         } catch (e) {
           console.info(e);
         }
       },
       goBack: () => {
-        return webview?.goBack();
+        return webviewRef.current?.goBack();
       },
       goForward: () => {
-        return webview?.goForward();
+        return webviewRef.current?.goForward();
       },
       reload: () => {
-        return webview?.reload();
+        return webviewRef.current?.reload();
       },
       stop: () => {
-        return webview?.stop();
+        return webviewRef.current?.stop();
       },
       canGoBack: () => {
-        return webview?.canGoBack();
+        return webviewRef.current?.canGoBack();
       },
       canGoForward: () => {
-        return webview?.canGoForward();
+        return webviewRef.current?.canGoForward();
       },
       openDevTools: async () => {
         // TODO: use message queue instead
         if (!isDomReady) await sleep(300);
-        webview?.openDevTools();
+        webviewRef.current?.openDevTools();
       },
       closeDevTools: async () => {
         // TODO: use message queue instead
         if (!isDomReady) await sleep(300);
-        webview?.closeDevTools();
+        webviewRef.current?.closeDevTools();
       },
       sendToFrame: (frameId, channel, ...args) => {
-        return webview?.sendToFrame(frameId, channel, ...args);
+        return webviewRef.current?.sendToFrame(frameId, channel, ...args);
       },
     }),
     [isDomReady]
@@ -73,7 +73,7 @@ function WebView({ tabId, onIpcMessage }, ref) {
   };
 
   const handleStopLoading = () => {
-    updateTab(tabId, { url: webview.getURL(), loading: false });
+    updateTab(tabId, { url: webviewRef.current.getURL(), loading: false });
   };
 
   const handleFailure = (event) => {
@@ -85,8 +85,8 @@ function WebView({ tabId, onIpcMessage }, ref) {
 
   const handleDidStartNavigate = () => {
     updateTab(tabId, {
-      canGoBack: webview.canGoBack(),
-      canGoForward: webview.canGoForward(),
+      canGoBack: webviewRef.current.canGoBack(),
+      canGoForward: webviewRef.current.canGoForward(),
     });
   };
 
@@ -98,20 +98,16 @@ function WebView({ tabId, onIpcMessage }, ref) {
     updateTab(tabId, { title });
   };
 
-  const webviewRef = useCallback((node) => {
-    setWebview(node);
-  }, []);
-
-  useEventListener(webview, 'ipc-message', onIpcMessage);
-  useEventListener(webview, 'dom-ready', handleDomReady);
-  useEventListener(webview, 'will-navigate', handleChangeURL);
-  useEventListener(webview, 'did-start-loading', handleStartLoading);
-  useEventListener(webview, 'did-stop-loading', handleStopLoading);
-  useEventListener(webview, 'did-finish-load', handleStopLoading);
-  useEventListener(webview, 'did-start-navigation', handleDidStartNavigate);
-  useEventListener(webview, 'did-fail-load', handleFailure);
-  useEventListener(webview, 'did-attach', handleDidAttach);
-  useEventListener(webview, 'page-title-updated', handlePageTitleUpdated);
+  useEventListener(webviewRef, 'ipc-message', onIpcMessage);
+  useEventListener(webviewRef, 'dom-ready', handleDomReady);
+  useEventListener(webviewRef, 'will-navigate', handleChangeURL);
+  useEventListener(webviewRef, 'did-start-loading', handleStartLoading);
+  useEventListener(webviewRef, 'did-stop-loading', handleStopLoading);
+  useEventListener(webviewRef, 'did-finish-load', handleStopLoading);
+  useEventListener(webviewRef, 'did-start-navigation', handleDidStartNavigate);
+  useEventListener(webviewRef, 'did-fail-load', handleFailure);
+  useEventListener(webviewRef, 'did-attach', handleDidAttach);
+  useEventListener(webviewRef, 'page-title-updated', handlePageTitleUpdated);
 
   return (
     <webview

src/renderer/hooks/useEventListener.js

@@ -9,15 +9,22 @@ export default function useEventListener(emitter, eventName, handler, options) {
 
   useEffect(
     () => {
-      const isSupported = emitter && emitter.addEventListener;
-      if (!isSupported) return;
+      let localEmitter = emitter?.current;
+      let isSupported = localEmitter && localEmitter.addEventListener;
+      if (!isSupported) {
+        localEmitter = emitter;
+        isSupported = localEmitter && localEmitter.addEventListener;
+      }
+      if (!isSupported) {
+        return;
+      }
 
       const eventListener = (event) =>
         savedHandler.current && savedHandler.current(event);
-      emitter.addEventListener(eventName, eventListener, options);
+      localEmitter.addEventListener(eventName, eventListener, options);
 
       return () => {
-        emitter.removeEventListener(eventName, eventListener);
+        localEmitter.removeEventListener(eventName, eventListener);
       };
     },
     [eventName, emitter] // Re-run if eventName or emitter changes