shell tab

packages/web/src/commands/stdCommands.ts

@@ -119,7 +119,7 @@ export function registerFileCommands({
       toolbar: true,
       enabledStore: derived(
         [editorStore, editorStatusStore],
-        ([query, status]) => query != null && status && (status as any).isConnected
+        ([query, status]) => query != null && status && (status as any).canKill
       ),
       onClick: () => (get(editorStore) as any).kill(),
     });

packages/web/src/elements/TableControl.svelte

@@ -47,13 +47,15 @@
         }}
       >
         {#each columnList as col}
-          {#if col.component}
+          <td>
-            <svelte:component this={col.component} {...col.getProps(row)} />
+            {#if col.component}
-          {:else if col.formatter}
+              <svelte:component this={col.component} {...col.getProps(row)} />
-            {col.formatter(row)}
+            {:else if col.formatter}
-          {:else}
+              {col.formatter(row)}
-            {row[col.fieldName]}
+            {:else}
-          {/if}
+              {row[col.fieldName]}
+            {/if}
+          </td>
         {/each}
       </tr>
     {/each}

packages/web/src/query/RunnerOutputFiles/RunnerOutputFiles.svelte

@@ -14,14 +14,14 @@
   export let runnerId;
   export let executeNumber;
 
+  const electron = getElectron();
+
   let files = [];
 
   $: if (executeNumber >= 0) files = [];
 
   $: effect = useEffect(() => registerRunnerDone(runnerId));
 
-  const electron = getElectron();
-
   function registerRunnerDone(rid) {
     if (rid) {
       socket.on(`runner-done-${rid}`, handleRunnerDone);
@@ -43,39 +43,39 @@
 
 {#if !files || files.length == 0}
   <ErrorInfo message="No output files" icon="img alert" />
+{:else}
+  <TableControl
+    rows={files}
+    columns={[
+      { fieldName: 'name', header: 'Name' },
+      { fieldName: 'size', header: 'Size', formatter: row => formatFileSize(row.size) },
+      !electron && {
+        fieldName: 'download',
+        header: 'Download',
+        component: DownloadLink,
+        getProps: row => ({
+          row,
+          runnerId,
+        }),
+      },
+      !electron && {
+        fieldName: 'copy',
+        header: 'Copy',
+        component: CopyLink,
+        getProps: row => ({
+          row,
+          runnerId,
+        }),
+      },
+      !electron && {
+        fieldName: 'show',
+        header: 'Show',
+        component: ShowLink,
+        getProps: row => ({
+          row,
+          runnerId,
+        }),
+      },
+    ]}
+  />
 {/if}
-
-<TableControl
-  rows={files}
-  columns={[
-    { fieldName: 'name', header: 'Name' },
-    { fieldName: 'size', header: 'Size', formatter: row => formatFileSize(row.size) },
-    !electron && {
-      fieldName: 'download',
-      header: 'Download',
-      component: DownloadLink,
-      getProps: row => ({
-        row,
-        runnerId,
-      }),
-    },
-    !electron && {
-      fieldName: 'copy',
-      header: 'Copy',
-      component: CopyLink,
-      getProps: row => ({
-        row,
-        runnerId,
-      }),
-    },
-    !electron && {
-      fieldName: 'show',
-      header: 'Show',
-      component: ShowLink,
-      getProps: row => ({
-        row,
-        runnerId,
-      }),
-    },
-  ]}
-/>

packages/web/src/query/RunnerOutputPane.svelte

@@ -9,18 +9,18 @@
 </script>
 
 <HorizontalSplitter>
-  <div class="container">
+  <div class="container" slot="1">
     <WidgetTitle>Messages</WidgetTitle>
     <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
   </div>
-  <div class="container">
+  <div class="container" slot="2">
     <WidgetTitle>Output files</WidgetTitle>
     <RunnerOutputFiles {runnerId} {executeNumber} />
   </div>
 </HorizontalSplitter>
 
 <style>
-  div {
+  .container {
     flex: 1;
     display: flex;
     flex-direction: column;

packages/web/src/tabs/QueryTab.svelte

@@ -67,7 +67,7 @@
 
   const status = writable({
     busy,
-    isConnected: false,
+    canKill: false,
   });
 
   $: connection = useConnectionInfo({ conid });
@@ -93,7 +93,7 @@
   $: {
     status.set({
       busy,
-      isConnected: !!sessionId,
+      canKill: !!sessionId,
     });
   }
 
@@ -186,6 +186,8 @@
   function createMenu() {
     return [
       { command: 'query.execute' },
+      { command: 'query.kill' },
+      { divider: true },
       { command: 'query.toggleComment' },
       { command: 'query.formatCode' },
       { divider: true },

packages/web/src/tabs/ShellTab.svelte

@@ -0,0 +1,176 @@
+<script lang="ts" context="module">
+  const lastFocusedShell = writable(null);
+  const currentShell = derived([lastFocusedShell, activeTabId], ([shell, tabid]) =>
+    shell?.getTabId() == tabid ? shell : null
+  );
+  const currentShellStatus = memberStore(currentShell, shell => shell?.getStatus() || nullStore);
+
+  registerFileCommands({
+    idPrefix: 'shell',
+    category: 'Shell',
+    editorStore: currentShell,
+    editorStatusStore: currentShellStatus,
+    folder: 'shell',
+    format: 'text',
+    fileExtension: 'js',
+
+    execute: true,
+    toggleComment: true,
+    findReplace: true,
+  });
+
+  const configRegex = /\s*\/\/\s*@ImportExportConfigurator\s*\n\s*\/\/\s*(\{[^\n]+\})\n/;
+  const requireRegex = /\s*(\/\/\s*@require\s+[^\n]+)\n/g;
+  const initRegex = /([^\n]+\/\/\s*@init)/g;
+</script>
+
+<script lang="ts">
+  import { getContext, get_current_component } from 'svelte/internal';
+
+  import { derived, writable } from 'svelte/store';
+  import registerCommand from '../commands/registerCommand';
+  import { registerFileCommands } from '../commands/stdCommands';
+
+  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
+  import AceEditor from '../query/AceEditor.svelte';
+  import RunnerOutputPane from '../query/RunnerOutputPane.svelte';
+  import useEditorData from '../query/useEditorData';
+  import { activeTabId, nullStore } from '../stores';
+  import axiosInstance from '../utility/axiosInstance';
+  import memberStore from '../utility/memberStore';
+  import socket from '../utility/socket';
+  import useEffect from '../utility/useEffect';
+
+  export let tabid;
+
+  const tabVisible: any = getContext('tabVisible');
+
+  let runnerId;
+
+  const instance = get_current_component();
+
+  let busy = false;
+  let executeNumber = 0;
+
+  let domEditor;
+
+  const status = writable({
+    busy,
+    canKill: false,
+  });
+
+  $: {
+    status.set({
+      busy,
+      canKill: busy,
+    });
+  }
+
+  $: if ($tabVisible && domEditor) {
+    domEditor?.getEditor()?.focus();
+  }
+
+  $: effect = useEffect(() => registerRunnerDone(runnerId));
+
+  function registerRunnerDone(rid) {
+    if (rid) {
+      socket.on(`runner-done-${rid}`, handleRunnerDone);
+      return () => {
+        socket.off(`runner-done-${rid}`, handleRunnerDone);
+      };
+    } else {
+      return () => {};
+    }
+  }
+
+  $: $effect;
+
+  function handleRunnerDone() {
+    busy = false;
+    // timerLabel.stop();
+  }
+
+  export function getStatus() {
+    return status;
+  }
+
+  export function getData() {
+    return $editorState.value || '';
+  }
+
+  export function toggleComment() {
+    domEditor.getEditor().execCommand('togglecomment');
+  }
+
+  export function find() {
+    domEditor.getEditor().execCommand('find');
+  }
+
+  export function replace() {
+    domEditor.getEditor().execCommand('replace');
+  }
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  export async function execute() {
+    if (busy) return;
+    executeNumber += 1;
+    const selectedText = domEditor.getEditor().getSelectedText();
+    const editorText = $editorValue;
+
+    let runid = runnerId;
+    const resp = await axiosInstance.post('runners/start', {
+      script: selectedText
+        ? [...(editorText || '').matchAll(requireRegex)].map(x => `${x[1]}\n`).join('') +
+          [...(editorText || '').matchAll(initRegex)].map(x => `${x[1]}\n`).join('') +
+          selectedText
+        : editorText,
+    });
+    runid = resp.data.runid;
+    runnerId = runid;
+    busy = true;
+    //timerLabel.start();
+  }
+
+  export function kill() {
+    axiosInstance.post('runners/cancel', {
+      runid: runnerId,
+    });
+    // timerLabel.stop();
+  }
+
+  const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
+
+  function createMenu() {
+    return [
+      { command: 'shell.execute' },
+      { command: 'shell.kill' },
+      { divider: true },
+      { command: 'shell.toggleComment' },
+      { divider: true },
+      { command: 'shell.save' },
+      { command: 'shell.saveAs' },
+      { divider: true },
+      { command: 'shell.find' },
+      { command: 'shell.replace' },
+    ];
+  }
+</script>
+
+<VerticalSplitter>
+  <svelte:fragment slot="1">
+    <AceEditor
+      value={$editorState.value || ''}
+      menu={createMenu()}
+      on:input={e => setEditorData(e.detail)}
+      on:focus={() => lastFocusedShell.set(instance)}
+      bind:this={domEditor}
+      mode="javascript"
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="2">
+    <RunnerOutputPane {runnerId} {executeNumber} />
+  </svelte:fragment>
+</VerticalSplitter>

packages/web/src/tabs/index.js

@@ -2,7 +2,7 @@ import * as TableDataTab from './TableDataTab.svelte';
 // import ViewDataTab from './ViewDataTab';
 // import TableStructureTab from './TableStructureTab';
 import * as QueryTab from './QueryTab.svelte';
-// import ShellTab from './ShellTab';
+import * as ShellTab from './ShellTab.svelte';
 // import InfoPageTab from './InfoPageTab';
 // import ArchiveFileTab from './ArchiveFileTab';
 // import FreeTableTab from './FreeTableTab';
@@ -20,7 +20,7 @@ export default {
   //   TableStructureTab,
   QueryTab,
   //   InfoPageTab,
-  //   ShellTab,
+  ShellTab,
   //   ArchiveFileTab,
   //   FreeTableTab,
   //   PluginTab,