splitting query moved to web worker

packages/web/package.json

@@ -21,13 +21,17 @@
     "@tsconfig/svelte": "^1.0.0",
     "ace-builds": "^1.4.8",
     "chart.js": "^3.6.0",
+    "chartjs-adapter-moment": "^1.0.0",
     "cross-env": "^7.0.3",
     "dbgate-datalib": "^4.1.1",
-    "dbgate-sqltree": "^4.1.1",
     "dbgate-query-splitter": "^4.1.1",
+    "dbgate-sqltree": "^4.1.1",
     "dbgate-tools": "^4.1.1",
     "dbgate-types": "^4.1.1",
+    "diff": "^5.0.0",
+    "diff2html": "^3.4.13",
     "file-selector": "^0.2.4",
+    "js-yaml": "^4.1.0",
     "json-stable-stringify": "^1.0.1",
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
@@ -39,6 +43,7 @@
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-web-worker-loader": "^1.6.1",
     "sirv-cli": "^1.0.0",
     "socket.io-client": "^2.3.0",
     "sql-formatter": "^2.3.3",
@@ -49,10 +54,6 @@
     "svelte-select": "^3.17.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3",
-    "uuid": "^3.4.0",
-    "chartjs-adapter-moment": "^1.0.0",
-    "diff": "^5.0.0",
-    "diff2html": "^3.4.13",
-    "js-yaml": "^4.1.0"
+    "uuid": "^3.4.0"
   }
 }

packages/web/rollup.config.js

@@ -7,8 +7,10 @@ import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
+import webWorkerLoader from 'rollup-plugin-web-worker-loader';
 import css from 'rollup-plugin-css-only';
 
+
 const production = !process.env.ROLLUP_WATCH;
 
 function serve() {
@@ -99,6 +101,8 @@ export default {
     // If we're building for production (npm run build
     // instead of npm run dev), minify
     production && terser(),
+
+    webWorkerLoader(),
   ],
   watch: {
     clearScreen: false,

packages/web/src/query/AceEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   // copied from https://github.com/nateshmbhat/svelte-ace/blob/main/src/AceEditor.svelte
-  import { createEventDispatcher, tick, onMount, onDestroy } from 'svelte';
+  import { createEventDispatcher, tick, onMount, onDestroy, getContext } from 'svelte';
 
   import * as ace from 'ace-builds/src-noconflict/ace';
 
@@ -25,7 +25,8 @@
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
   import resizeObserver from '../utility/resizeObserver';
-  import { splitQuery } from 'dbgate-query-splitter';
+  // @ts-ignore
+  import QueryParserWorker from 'web-worker:./QueryParserWorker';
 
   const EDITOR_ID = `svelte-ace-editor-div:${Math.floor(Math.random() * 10000000000)}`;
   const dispatch = createEventDispatcher<{
@@ -55,6 +56,8 @@
   export let readOnly = false;
   export let splitterOptions = null;
 
+  const tabVisible: any = getContext('tabVisible');
+
   let editor: ace.Editor;
   let contentBackup: string = '';
 
@@ -65,6 +68,8 @@
   let currentPart = null;
   let currentPartMarker = null;
 
+  let queryParserWorker;
+
   const stdOptions = {
     showPrintMargin: false,
   };
@@ -122,8 +127,24 @@
     }
   }
 
-  $: {
-    splitterOptions;
+  $: watchQueryParserWorker(splitterOptions && $tabVisible);
+  function watchQueryParserWorker(enabled) {
+    if (enabled) {
+      if (!queryParserWorker) {
+        queryParserWorker = new QueryParserWorker();
+        queryParserWorker.onmessage = e => {
+          queryParts = e.data;
+          editor.setHighlightActiveLine(queryParts.length <= 1);
+          changedCurrentQueryPart();
+        };
+      }
+    } else {
+      if (queryParserWorker) {
+        queryParserWorker.terminate();
+        queryParserWorker = null;
+      }
+    }
+
     changedQueryParts();
   }
 
@@ -151,22 +172,28 @@
 
   function changedQueryParts() {
     const editor = getEditor();
-    if (splitterOptions && editor) {
-      const sql = editor.getValue();
-      queryParts = splitQuery(sql, {
-        ...splitterOptions,
-        returnRichInfo: true,
+    if (splitterOptions && editor && queryParserWorker) {
+      const editor = getEditor();
+
+      queryParserWorker.postMessage({
+        text: editor.getValue(),
+        options: {
+          ...splitterOptions,
+          returnRichInfo: true,
+        },
       });
-      editor.setHighlightActiveLine(queryParts.length <= 1);
-      if (queryParts.length <= 1) {
-        removeCurrentPartMarker();
-      }
     }
-    changedCurrentQueryPart();
+    // if (splitterOptions && editor) {
+    //   const sql = editor.getValue();
+    // }
   }
 
   function changedCurrentQueryPart() {
-    if (queryParts.length <= 1) return;
+    if (queryParts.length <= 1) {
+      removeCurrentPartMarker();
+      return;
+    }
+
     const selectionRange = editor.getSelectionRange();
 
     if (
@@ -235,6 +262,10 @@
       editor.destroy();
       editor.container.remove();
     }
+    if (queryParserWorker) {
+      queryParserWorker.terminate();
+      queryParserWorker = null;
+    }
   });
 
   function setEventCallBacks() {

packages/web/src/query/QueryParserWorker.js

@@ -0,0 +1,6 @@
+import { splitQuery } from 'dbgate-query-splitter';
+
+onmessage = e => {
+  const result = splitQuery(e.data.text, e.data.options);
+  postMessage(result);
+};

yarn.lock

@@ -9138,6 +9138,11 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
+rollup-plugin-web-worker-loader@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-web-worker-loader/-/rollup-plugin-web-worker-loader-1.6.1.tgz#9d7a27575b64b0780fe4e8b3bc87470d217e485f"
+  integrity sha512-4QywQSz1NXFHKdyiou16mH3ijpcfLtLGOrAqvAqu1Gx+P8+zj+3gwC2BSL/VW1d+LW4nIHC8F7d7OXhs9UdR2A==
+
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"