activator used whereever possible

packages/web/src/datagrid/DataGrid.svelte

@@ -56,7 +56,7 @@
   let managerSize;
 
   $: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
-  $: isJsonView = !!config.isJsonView;
+  $: isJsonView = !!config?.isJsonView;
 
   const handleExecuteMacro = () => {
     onRunMacro($selectedMacro, extractMacroValuesForMacro($macroValues, $selectedMacro), selectedCellsPublished());

packages/web/src/datagrid/DataGridCore.svelte

@@ -220,7 +220,6 @@
 
 <script lang="ts">
   import { GridDisplay } from 'dbgate-datalib';
-  import { get_current_component } from 'svelte/internal';
   import { getContext } from 'svelte';
   import _ from 'lodash';
   import registerCommand from '../commands/registerCommand';

packages/web/src/formview/FormView.svelte

@@ -149,7 +149,6 @@
   import _ from 'lodash';
 
   import { getContext } from 'svelte';
-  import { get_current_component } from 'svelte/internal';
 
   import invalidateCommands from '../commands/invalidateCommands';
 
@@ -189,7 +188,6 @@
   $: rowHeight = $dataGridRowHeight;
   let currentCell = [0, 0];
 
-  const instance = get_current_component();
   const tabVisible: any = getContext('tabVisible');
   const domCells = {};
 

packages/web/src/tabs/ChartTab.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedEditor = null;
-  const getCurrentEditor = () =>
-    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+  const getCurrentEditor = () => getActiveComponent('ChartTab');
 
   registerFileCommands({
     idPrefix: 'chart',
@@ -17,8 +15,6 @@
 
 <script lang="ts">
   import _ from 'lodash';
-  import { getContext } from 'svelte';
-  import { get_current_component } from 'svelte/internal';
   import { derived } from 'svelte/store';
   import ChartEditor from '../charts/ChartEditor.svelte';
   import invalidateCommands from '../commands/invalidateCommands';
@@ -29,15 +25,14 @@
   import LoadingInfo from '../elements/LoadingInfo.svelte';
 
   import useEditorData from '../query/useEditorData';
-  import { getActiveTabId } from '../stores';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
   import createUndoReducer from '../utility/createUndoReducer';
 
   export let tabid;
   export let conid;
   export let database;
 
-  const instance = get_current_component();
-  const tabVisible: any = getContext('tabVisible');
+  export const activator = createActivator('ChartTab', true);
 
   export function getData() {
     return $editorState.value || '';
@@ -58,8 +53,6 @@
 
   $: setEditorData($modelState.value);
 
-  $: if ($tabVisible) lastFocusedEditor = instance;
-
   $: {
     $modelState;
     invalidateCommands();
@@ -97,10 +90,6 @@
     dispatchModel({ type: 'redo' });
   }
 
-  export function getTabId() {
-    return tabid;
-  }
-
   function createMenu() {
     return [
       { command: 'chart.save' },

packages/web/src/tabs/FavoriteEditorTab.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedEditor = null;
-  const getCurrentEditor = () =>
-    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+  const getCurrentEditor = () => getActiveComponent('FavoriteEditorTab');
 
   registerFileCommands({
     idPrefix: 'favoriteJsonEditor',
@@ -33,26 +31,25 @@
 </script>
 
 <script lang="ts">
-  import { get_current_component } from 'svelte/internal';
   import { getContext } from 'svelte';
   import registerCommand from '../commands/registerCommand';
   import { registerFileCommands } from '../commands/stdCommands';
 
   import AceEditor from '../query/AceEditor.svelte';
   import useEditorData from '../query/useEditorData';
-  import { getActiveTabId } from '../stores';
   import invalidateCommands from '../commands/invalidateCommands';
   import axiosInstance from '../utility/axiosInstance';
   import { showModal } from '../modals/modalTools';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import { openFavorite } from '../appobj/FavoriteFileAppObject.svelte';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
 
   export let tabid;
   export let savedFile;
 
   const tabVisible: any = getContext('tabVisible');
 
-  const instance = get_current_component();
+  export const activator = createActivator('FavoriteEditorTab', false);
 
   let domEditor;
 
@@ -117,7 +114,7 @@
   menu={createMenu()}
   on:input={e => setEditorData(e.detail)}
   on:focus={() => {
-    lastFocusedEditor = instance;
+    activator.activate();
     invalidateCommands();
   }}
   bind:this={domEditor}

packages/web/src/tabs/MarkdownEditorTab.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedEditor = null;
-  const getCurrentEditor = () =>
-    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+  const getCurrentEditor = () => getActiveComponent('MarkdownEditorTab');
 
   registerFileCommands({
     idPrefix: 'markdown',
@@ -28,23 +26,23 @@
 </script>
 
 <script lang="ts">
-  import { get_current_component } from 'svelte/internal';
   import { getContext } from 'svelte';
   import registerCommand from '../commands/registerCommand';
   import { registerFileCommands } from '../commands/stdCommands';
 
   import AceEditor from '../query/AceEditor.svelte';
   import useEditorData from '../query/useEditorData';
-  import { getActiveTabId, openedTabs } from '../stores';
+  import { openedTabs } from '../stores';
   import invalidateCommands from '../commands/invalidateCommands';
   import openNewTab from '../utility/openNewTab';
   import { setSelectedTab } from '../utility/common';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
 
   export let tabid;
 
   const tabVisible: any = getContext('tabVisible');
 
-  const instance = get_current_component();
+  export const activator = createActivator('MarkdownEditorTab', false);
 
   let domEditor;
 
@@ -112,7 +110,7 @@
   menu={createMenu()}
   on:input={e => setEditorData(e.detail)}
   on:focus={() => {
-    lastFocusedEditor = instance;
+    activator.activate();
     invalidateCommands();
   }}
   bind:this={domEditor}

packages/web/src/tabs/QueryDesignTab.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedEditor = null;
-  const getCurrentEditor = () =>
-    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+  const getCurrentEditor = () => getActiveComponent('QueryDesignTab');
 
   registerFileCommands({
     idPrefix: 'designer',
@@ -17,44 +15,35 @@
 </script>
 
 <script lang="ts">
-  import { get_current_component } from 'svelte/internal';
-  import { getContext } from 'svelte';
   import sqlFormatter from 'sql-formatter';
 
-  import { writable, derived, get } from 'svelte/store';
-  import registerCommand from '../commands/registerCommand';
-
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
-  import { activeTabId, extensions, getActiveTabId, nullStore } from '../stores';
-  import applySqlTemplate from '../utility/applySqlTemplate';
+  import { extensions } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
   import { changeTab } from '../utility/common';
   import { useConnectionInfo } from '../utility/metadataLoaders';
   import socket from '../utility/socket';
   import SocketMessageView from '../query/SocketMessageView.svelte';
-  import memberStore from '../utility/memberStore';
   import useEffect from '../utility/useEffect';
   import ResultTabs from '../query/ResultTabs.svelte';
   import { registerFileCommands } from '../commands/stdCommands';
   import invalidateCommands from '../commands/invalidateCommands';
   import QueryDesigner from '../designer/QueryDesigner.svelte';
-  import createReducer from '../utility/createReducer';
   import createUndoReducer from '../utility/createUndoReducer';
   import _ from 'lodash';
   import { findEngineDriver } from 'dbgate-tools';
   import { generateDesignedQuery } from '../designer/designerTools';
   import QueryDesignColumns from '../elements/QueryDesignColumns.svelte';
   import useTimerLabel from '../utility/useTimerLabel';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
 
   export let tabid;
   export let conid;
   export let database;
   export let initialArgs;
 
-  const instance = get_current_component();
-  const tabVisible: any = getContext('tabVisible');
   const timerLabel = useTimerLabel();
 
   let busy = false;
@@ -63,7 +52,7 @@
   let sessionId = null;
   let sqlPreview = '';
 
-  let domEditor;
+  export const activator = createActivator('QueryDesignTab', true);
 
   $: connection = useConnectionInfo({ conid });
   $: engine = findEngineDriver($connection, $extensions);
@@ -97,8 +86,6 @@
 
   $: generatePreview($modelState.value, engine);
 
-  $: if ($tabVisible) lastFocusedEditor = instance;
-
   export function canKill() {
     return !!sessionId;
   }

packages/web/src/tabs/QueryTab.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedEditor = null;
-  const getCurrentEditor = () =>
-    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+  const getCurrentEditor = () => getActiveComponent('QueryTab');
 
   registerCommand({
     id: 'query.formatCode',
@@ -33,24 +31,21 @@
 </script>
 
 <script lang="ts">
-  import { get_current_component, insert } from 'svelte/internal';
   import { getContext } from 'svelte';
   import sqlFormatter from 'sql-formatter';
 
-  import { writable, derived, get } from 'svelte/store';
   import registerCommand from '../commands/registerCommand';
 
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
-  import { activeTabId, extensions, getActiveTabId, nullStore } from '../stores';
+  import { extensions } from '../stores';
   import applySqlTemplate from '../utility/applySqlTemplate';
   import axiosInstance from '../utility/axiosInstance';
   import { changeTab } from '../utility/common';
   import { getDatabaseInfo, useConnectionInfo } from '../utility/metadataLoaders';
   import socket from '../utility/socket';
   import SocketMessageView from '../query/SocketMessageView.svelte';
-  import memberStore from '../utility/memberStore';
   import useEffect from '../utility/useEffect';
   import ResultTabs from '../query/ResultTabs.svelte';
   import { registerFileCommands } from '../commands/stdCommands';
@@ -58,13 +53,15 @@
   import { showModal } from '../modals/modalTools';
   import InsertJoinModal from '../modals/InsertJoinModal.svelte';
   import useTimerLabel from '../utility/useTimerLabel';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
 
   export let tabid;
   export let conid;
   export let database;
   export let initialArgs;
 
-  const instance = get_current_component();
+  export const activator = createActivator('QueryTab', false);
+
   const tabVisible: any = getContext('tabVisible');
   const timerLabel = useTimerLabel();
 
@@ -236,7 +233,7 @@
       menu={createMenu()}
       on:input={e => setEditorData(e.detail)}
       on:focus={() => {
-        lastFocusedEditor = instance;
+        activator.activate();
         invalidateCommands();
       }}
       bind:this={domEditor}

packages/web/src/tabs/ShellTab.svelte

@@ -1,7 +1,5 @@
 <script lang="ts" context="module">
-  let lastFocusedEditor = null;
-  const getCurrentEditor = () =>
-    lastFocusedEditor?.getTabId && lastFocusedEditor?.getTabId() == getActiveTabId() ? lastFocusedEditor : null;
+  const getCurrentEditor = () => getActiveComponent('ShellTab');
 
   registerFileCommands({
     idPrefix: 'shell',
@@ -22,21 +20,18 @@
 </script>
 
 <script lang="ts">
-  import { getContext, get_current_component } from 'svelte/internal';
+  import { getContext  } from 'svelte';
 
-  import { derived, writable } from 'svelte/store';
   import invalidateCommands from '../commands/invalidateCommands';
-  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, getActiveTabId, nullStore } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
-import { changeTab } from '../utility/common';
-  import memberStore from '../utility/memberStore';
+  import { changeTab } from '../utility/common';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
   import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
   import useTimerLabel from '../utility/useTimerLabel';
@@ -48,7 +43,7 @@ import { changeTab } from '../utility/common';
 
   let runnerId;
 
-  const instance = get_current_component();
+  export const activator = createActivator('ShellTab', false);
 
   let busy = false;
   let executeNumber = 0;
@@ -119,10 +114,6 @@ import { changeTab } from '../utility/common';
     domEditor.getEditor().execCommand('replace');
   }
 
-  export function getTabId() {
-    return tabid;
-  }
-
   export function isBusy() {
     return busy;
   }
@@ -179,7 +170,7 @@ import { changeTab } from '../utility/common';
       menu={createMenu()}
       on:input={e => setEditorData(e.detail)}
       on:focus={() => {
-        lastFocusedEditor = instance;
+        activator.activate();
         invalidateCommands();
       }}
       bind:this={domEditor}

packages/web/src/utility/saveTabFile.ts

@@ -12,7 +12,7 @@ import registerCommand from '../commands/registerCommand';
 
 export default function saveTabFile(editor, saveAs, folder, format, fileExtension) {
   const tabs = get(openedTabs);
-  const tabid = editor.getTabId();
+  const tabid = editor.activator.tabid;
   const data = editor.getData();
   const { savedFile, savedFilePath } = tabs.find(x => x.tabid == tabid).props || {};