shelltab uses require editor

packages/web/src/modals/ImportExportModal.js

@@ -97,14 +97,15 @@ function GenerateSctriptButton({ modalState }) {
 
   const handleGenerateScript = async () => {
     const code = await createImpExpScript(extensions, values);
-    openNewTab(setOpenedTabs, {
+    openNewTab(
-      title: 'Shell',
+      setOpenedTabs,
-      icon: 'img shell',
+      {
-      tabComponent: 'ShellTab',
+        title: 'Shell',
-      props: {
+        icon: 'img shell',
-        initialScript: code,
+        tabComponent: 'ShellTab',
       },
-    });
+      code
+    );
     modalState.close();
   };
 

packages/web/src/tabs/ShellTab.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import _ from 'lodash';
-import localforage from 'localforage';
 import axios from '../utility/axios';
 import { useSetOpenedTabs } from '../utility/globalState';
 import { VerticalSplitter } from '../widgets/Splitter';
@@ -13,27 +12,16 @@ import ShellToolbar from '../query/ShellToolbar';
 import RunnerOutputPane from '../query/RunnerOutputPane';
 import useShowModal from '../modals/showModal';
 import ImportExportModal from '../modals/ImportExportModal';
+import useEditorData from '../utility/useEditorData';
 
-export default function ShellTab({
+const configRegex = /\s*\/\/\s*@ImportExportConfigurator\s*\n\s*\/\/\s*(\{[^\n]+\})\n/;
-  tabid,
+const requireRegex = /\s*(\/\/\s*@require\s+[^\n]+)\n/g;
-  initialArgs,
+
-  tabVisible,
+export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other }) {
-  toolbarPortalRef,
-  initialScript,
-  storageKey,
-  ...other
-}) {
-  const localStorageKey = `tabdata_shell_${tabid}`;
-  const [shellText, setShellText] = React.useState(initialScript || '');
-  const shellTextRef = React.useRef(shellText);
   const [busy, setBusy] = React.useState(false);
   const showModal = useShowModal();
+  const { editorData, setEditorData } = useEditorData({ tabid });
 
-  const saveToStorage = React.useCallback(() => localforage.setItem(localStorageKey, shellTextRef.current), [
-    localStorageKey,
-    shellTextRef,
-  ]);
-  const saveToStorageDebounced = React.useMemo(() => _.debounce(saveToStorage, 5000), [saveToStorage]);
   const setOpenedTabs = useSetOpenedTabs();
 
   const [executeNumber, setExecuteNumber] = React.useState(0);
@@ -41,25 +29,6 @@ export default function ShellTab({
 
   const socket = useSocket();
 
-  React.useEffect(() => {
-    window.addEventListener('beforeunload', saveToStorage);
-    return () => {
-      saveToStorage();
-      window.removeEventListener('beforeunload', saveToStorage);
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (!storageKey)
-      changeTab(tabid, setOpenedTabs, (tab) => ({
-        ...tab,
-        props: {
-          ...tab.props,
-          storageKey: localStorageKey,
-        },
-      }));
-  }, [storageKey]);
-
   React.useEffect(() => {
     changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy }));
   }, [busy]);
@@ -79,12 +48,6 @@ export default function ShellTab({
     }
   }, [runnerId, socket]);
 
-  const handleChange = (text) => {
-    if (text != null) shellTextRef.current = text;
-    setShellText(text);
-    saveToStorageDebounced();
-  };
-
   const handleExecute = async () => {
     if (busy) return;
     setExecuteNumber((num) => num + 1);
@@ -92,7 +55,9 @@ export default function ShellTab({
 
     let runid = runnerId;
     const resp = await axios.post('runners/start', {
-      script: selectedText || shellText,
+      script: selectedText
+        ? [...(editorData || '').matchAll(requireRegex)].map((x) => `${x[1]}\n`).join('') + selectedText
+        : editorData,
     });
     runid = resp.data.runid;
     setRunnerId(runid);
@@ -112,10 +77,8 @@ export default function ShellTab({
     }
   };
 
-  const configRegex = /\s*\/\/\s*@ImportExportConfigurator\s*\n\s*\/\/\s*(\{[^\n]+\})\n/;
-
   const handleEdit = () => {
-    const jsonTextMatch = shellText.match(configRegex);
+    const jsonTextMatch = (editorData || '').match(configRegex);
     if (jsonTextMatch) {
       showModal((modalState) => (
         <ImportExportModal modalState={modalState} initialValues={JSON.parse(jsonTextMatch[1])} />
@@ -127,8 +90,8 @@ export default function ShellTab({
     <>
       <VerticalSplitter>
         <JavaScriptEditor
-          value={shellText}
+          value={editorData || ''}
-          onChange={handleChange}
+          onChange={setEditorData}
           tabVisible={tabVisible}
           onKeyDown={handleKeyDown}
           editorRef={editorRef}
@@ -144,7 +107,7 @@ export default function ShellTab({
             busy={busy}
             cancel={handleCancel}
             edit={handleEdit}
-            editAvailable={configRegex.test(shellText || '')}
+            editAvailable={configRegex.test(editorData || '')}
           />,
           toolbarPortalRef.current
         )}