Housekeeping

.vscode/tasks.json

@@ -0,0 +1,51 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "npm install",
+      "type": "npm",
+      "script": "install",
+      "options": {
+        "cwd": "${workspaceFolder}/frontend"
+      },
+      "presentation": {
+        "clear": true,
+        "panel": "shared",
+        "showReuseMessage": false
+      },
+      "problemMatcher": []
+    },
+    {
+      "label": "npm run build",
+      "type": "npm",
+      "script": "build",
+      "options": {
+        "cwd": "${workspaceFolder}/frontend"
+      },
+      "presentation": {
+        "clear": true,
+        "panel": "shared",
+        "showReuseMessage": false
+      },
+      "problemMatcher": []
+    },
+    {
+      "label": "build",
+      "type": "shell",
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
+      "command": "go",
+      "args": [
+        "build",
+        "-tags",
+        "dev",
+        "-gcflags",
+        "all=-N -l",
+        "-o",
+        "build/bin/vscode.exe"
+      ],
+      "dependsOn": ["npm install", "npm run build"]
+    }
+  ]
+}

frontend/jsconfig.json

@@ -3,33 +3,22 @@
     "moduleResolution": "Node",
     "target": "ESNext",
     "module": "ESNext",
-    /**
-     * svelte-preprocess cannot figure out whether you have
-     * a value or a type, so tell TypeScript to enforce using
-     * `import type` instead of `import` for Types.
-     */
     "importsNotUsedAsValues": "error",
     "isolatedModules": true,
     "resolveJsonModule": true,
-    /**
-     * To have warnings / errors of the Svelte compiler at the
-     * correct position, enable source maps by default.
-     */
     "sourceMap": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable this if you'd like to use dynamic types.
-     */
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "$components/*": ["src/components/*"],
+      "$organisms/*": ["src/organisms/*"],
+      "$wails/*": ["wailsjs/*"],
+      "$lib/*": ["src/lib/*"]
+    }
   },
-  /**
-   * Use global.d.ts instead of compilerOptions.types
-   * to avoid limiting type declarations.
-   */
   "include": [
     "src/**/*.d.ts",
     "src/**/*.js",

frontend/src/app.svelte

@@ -1,13 +1,13 @@
 <script>
-  import { EventsOn } from '../wailsjs/runtime';
-  import ContextMenu from './components/contextmenu.svelte';
-  import { connections } from './lib/stores/connections';
-  import contextMenu from './lib/stores/contextmenu';
-  import environment from './lib/stores/environment';
-  import applicationInited from './lib/stores/inited';
-  import About from './organisms/about/index.svelte';
-  import Connection from './organisms/connection/index.svelte';
-  import Settings from './organisms/settings/index.svelte';
+  import ContextMenu from '$components/contextmenu.svelte';
+  import { connections } from '$lib/stores/connections';
+  import contextMenu from '$lib/stores/contextmenu';
+  import environment from '$lib/stores/environment';
+  import applicationInited from '$lib/stores/inited';
+  import About from '$organisms/about/index.svelte';
+  import Connection from '$organisms/connection/index.svelte';
+  import Settings from '$organisms/settings/index.svelte';
+  import { EventsOn } from '$wails/runtime';
 
   const hosts = {};
   const activeHostKey = '';

frontend/src/components/datepicker.svelte

@@ -1,7 +1,7 @@
 <script>
+  import { daysAbbr, months } from '$lib/constants';
   import { addDays, getWeek, isDate, isSameDay, startOfWeek } from 'date-fns';
   import { onMount } from 'svelte';
-  import { daysAbbr, months } from '../lib/utils';
   import Clock from './clock.svelte';
   import Icon from './icon.svelte';
   import Modal from './modal.svelte';

frontend/src/components/directorychooser.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { OpenDirectory } from '../../wailsjs/go/app/App';
+  import { OpenDirectory } from '$wails/go/app/App';
 
   export let value = '';
   export let id = '';

frontend/src/components/forminput.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { canBeObjectId, numericInputTypes } from '../lib/utils';
-  import { input } from '../lib/actions';
-  import Icon from './icon.svelte';
+  import input from '$lib/actions/input';
+  import { canBeObjectId, numericInputTypes } from '$lib/mongo';
   import { ObjectId } from 'bson';
-  import Datepicker from './datepicker.svelte';
   import { onMount } from 'svelte';
+  import Datepicker from './datepicker.svelte';
+  import Icon from './icon.svelte';
 
   export let column = {};
   export let value = undefined;

frontend/src/components/grid-items.svelte

@@ -1,9 +1,9 @@
 <script>
+  import { resolveKeypath, setValue } from '$lib/keypaths';
+  import contextMenu from '$lib/stores/contextmenu';
   import { createEventDispatcher } from 'svelte';
-  import Icon from './icon.svelte';
-  import { resolveKeypath, setValue } from '../lib/utils';
   import FormInput from './forminput.svelte';
-  import contextMenu from '../lib/stores/contextmenu';
+  import Icon from './icon.svelte';
 
   export let items = [];
   export let columns = [];

frontend/src/components/objectgrid.svelte

@@ -1,6 +1,6 @@
 <script>
+  import { isBsonBuiltin } from '$lib/mongo';
   import { isDate } from 'date-fns';
-  import { isBsonBuiltin } from '../lib/utils';
   import Grid from './grid.svelte';
 
   export let data = [];

frontend/src/lib/actions/controlkey.js

@@ -0,0 +1,13 @@
+import environment from '$lib/stores/environment';
+import { get } from 'svelte/store';
+
+export function controlKeyDown(event) {
+  const env = get(environment);
+  // @ts-ignore
+  if (env?.platform === 'darwin') {
+    return event?.metaKey;
+  }
+  else {
+    return event?.ctrlKey;
+  }
+}

frontend/src/lib/actions/input.js

@@ -1,6 +1,7 @@
-import { canBeObjectId, int32, int64, isInt, uint64 } from './utils';
+import { isInt } from '$lib/math';
+import { canBeObjectId, int32, int64, uint64 } from '$lib/mongo';
 
-export function input(node, { autofocus, type, onValid, onInvalid, mandatory } = {
+export default function input(node, { autofocus, type, onValid, onInvalid, mandatory } = {
   autofocus: false,
   type: '',
   onValid: () => 0,

frontend/src/lib/constants.js

@@ -0,0 +1,7 @@
+// Months
+export const months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
+export const monthsAbbr = months.map(m => m.slice(0, 3));
+
+// Days
+export const days = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ];
+export const daysAbbr = days.map(d => d.slice(0, 3));

frontend/src/lib/keypaths.js

@@ -0,0 +1,58 @@
+// Get a value from an object with a JSON path, from Webdesq core
+export function resolveKeypath(object, path) {
+  const parts = path.split('.').flatMap(part => {
+    const indexMatch = part.match(/\[\d+\]/g);
+    if (indexMatch) {
+      // Convert strings to numbers
+      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
+      const base = part.slice(0, part.indexOf(indexMatch[0]));
+      return base.length ? [ base, ...indexes ] : indexes;
+    }
+    return part;
+  });
+
+  let result = object;
+  while (result && parts.length) {
+    result = result[parts.shift()];
+  }
+
+  return result;
+}
+
+// Set a value in an object with a JSON path, from Webdesq core
+export function setValue(object, path, value) {
+  const parts = path.split('.').flatMap(part => {
+    let indexMatch = part.match(/\[\d+\]/g);
+    if (indexMatch) {
+      // Convert strings to numbers
+      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
+      const base = part.slice(0, part.indexOf(indexMatch[0]));
+      return base.length ? [ base, ...indexes ] : indexes;
+    }
+    indexMatch = part.match(/^\d+$/g);
+    if (indexMatch) {
+      // Convert strings to numbers
+      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
+      const base = part.slice(0, part.indexOf(indexMatch[0]));
+      return base.length ? [ base, ...indexes ] : indexes;
+    }
+    return part;
+  });
+
+  let result = object;
+  while (parts.length) {
+    const part = parts.shift();
+    if (!parts.length) {
+      // No parts left, we can set the value
+      result[part] = value;
+      break;
+    }
+    if (!result[part]) {
+      // Default value if none is found
+      result[part] = (typeof parts[0] === 'number') ? [] : {};
+    }
+    result = result[part];
+  }
+
+  return object;
+}

frontend/src/lib/math.js

@@ -0,0 +1,23 @@
+// https://stackoverflow.com/a/14794066
+export function isInt(value) {
+  if (isNaN(value)) {
+    return false;
+  }
+  const x = parseFloat(value);
+  return (x | 0) === x;
+}
+
+export function randInt(min, max) {
+  return Math.round(Math.random() * (max - min) + min);
+}
+
+export function randomString(length = 12) {
+  const chars = 'qwertyuiopasdfghjklzxcvbnm1234567890';
+  let output = '';
+
+  Array(length).fill('').forEach(() => {
+    output += chars[randInt(0, chars.length - 1)];
+  });
+
+  return output;
+}

frontend/src/lib/mongo.js

@@ -0,0 +1,34 @@
+import { ObjectId } from 'bson';
+
+// Calculate the min and max values of (un)signed integers with n bits
+export const intMin = bits => Math.pow(2, bits - 1) * -1;
+export const intMax = bits => Math.pow(2, bits - 1) - 1;
+export const uintMax = bits => Math.pow(2, bits) - 1;
+
+// Boundaries for some ubiquitous integer types
+export const int32 = [ intMin(32), intMax(32) ];
+export const int64 = [ intMin(64), intMax(64) ];
+export const uint64 = [ 0, uintMax(64) ];
+
+// Input types
+export const numericInputTypes = [ 'int', 'long', 'uint64', 'double', 'decimal' ];
+export const inputTypes = [ 'string', 'objectid', 'bool', 'date', ...numericInputTypes ];
+
+export function isBsonBuiltin(value) {
+  return (
+    (typeof value === 'object') &&
+    (value !== null) &&
+    (typeof value._bsontype === 'string') &&
+    (typeof value.inspect === 'function')
+  );
+}
+
+export function canBeObjectId(value) {
+  try {
+    new ObjectId(value);
+    return true;
+  }
+  catch {
+    return false;
+  }
+}

frontend/src/lib/stores/environment.js

@@ -1,5 +1,5 @@
+import { Environment } from '$wails/go/app/App';
 import { writable } from 'svelte/store';
-import { Environment } from '../../../wailsjs/go/app/App';
 
 const { set, subscribe } = writable({});
 

frontend/src/lib/stores/queries.js

@@ -1,5 +1,5 @@
+import { RemoveQuery, SavedQueries, SaveQuery, UpdateQueries } from '$wails/go/app/App';
 import { get, writable } from 'svelte/store';
-import { RemoveQuery, SavedQueries, SaveQuery, UpdateQueries } from '../../../wailsjs/go/app/App';
 
 const { set, subscribe } = writable({});
 let skipUpdate = true;

frontend/src/lib/stores/settings.js

@@ -1,5 +1,5 @@
+import { Settings, UpdateSettings } from '$wails/go/app/App';
 import { writable } from 'svelte/store';
-import { Settings, UpdateSettings } from '../../../wailsjs/go/app/App';
 
 const { set, subscribe } = writable({});
 let skipUpdate = true;

frontend/src/lib/stores/views.js

@@ -1,5 +1,5 @@
+import { UpdateViewStore, Views } from '$wails/go/app/App';
 import { get, writable } from 'svelte/store';
-import { UpdateViewStore, Views } from '../../../wailsjs/go/app/App';
 
 const { set, subscribe } = writable({});
 let skipUpdate = true;

frontend/src/lib/utils.js

@@ -1,138 +0,0 @@
-import { ObjectId } from 'bson';
-import { get } from 'svelte/store';
-import environment from './stores/environment';
-
-// Calculate the min and max values of (un)signed integers with n bits
-export const intMin = bits => Math.pow(2, bits - 1) * -1;
-export const intMax = bits => Math.pow(2, bits - 1) - 1;
-export const uintMax = bits => Math.pow(2, bits) - 1;
-
-// Boundaries for some ubiquitous integer types
-export const int32 = [ intMin(32), intMax(32) ];
-export const int64 = [ intMin(64), intMax(64) ];
-export const uint64 = [ 0, uintMax(64) ];
-
-// Input types
-export const numericInputTypes = [ 'int', 'long', 'uint64', 'double', 'decimal' ];
-export const inputTypes = [ 'string', 'objectid', 'bool', 'date', ...numericInputTypes ];
-
-// Months
-export const months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];
-export const monthsAbbr = months.map(m => m.slice(0, 3));
-
-// Days
-export const days = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ];
-export const daysAbbr = days.map(d => d.slice(0, 3));
-
-// Get a value from an object with a JSON path, from Webdesq core
-export function resolveKeypath(object, path) {
-  const parts = path.split('.').flatMap(part => {
-    const indexMatch = part.match(/\[\d+\]/g);
-    if (indexMatch) {
-      // Convert strings to numbers
-      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
-      const base = part.slice(0, part.indexOf(indexMatch[0]));
-      return base.length ? [ base, ...indexes ] : indexes;
-    }
-    return part;
-  });
-
-  let result = object;
-  while (result && parts.length) {
-    result = result[parts.shift()];
-  }
-
-  return result;
-}
-
-// Set a value in an object with a JSON path, from Webdesq core
-export function setValue(object, path, value) {
-  const parts = path.split('.').flatMap(part => {
-    let indexMatch = part.match(/\[\d+\]/g);
-    if (indexMatch) {
-      // Convert strings to numbers
-      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
-      const base = part.slice(0, part.indexOf(indexMatch[0]));
-      return base.length ? [ base, ...indexes ] : indexes;
-    }
-    indexMatch = part.match(/^\d+$/g);
-    if (indexMatch) {
-      // Convert strings to numbers
-      const indexes = indexMatch.map(index => Number(index.slice(1, -1)));
-      const base = part.slice(0, part.indexOf(indexMatch[0]));
-      return base.length ? [ base, ...indexes ] : indexes;
-    }
-    return part;
-  });
-
-  let result = object;
-  while (parts.length) {
-    const part = parts.shift();
-    if (!parts.length) {
-      // No parts left, we can set the value
-      result[part] = value;
-      break;
-    }
-    if (!result[part]) {
-      // Default value if none is found
-      result[part] = (typeof parts[0] === 'number') ? [] : {};
-    }
-    result = result[part];
-  }
-
-  return object;
-}
-
-export function controlKeyDown(event) {
-  const env = get(environment);
-  // @ts-ignore
-  if (env?.platform === 'darwin') {
-    return event?.metaKey;
-  }
-  else {
-    return event?.ctrlKey;
-  }
-}
-
-// https://stackoverflow.com/a/14794066
-export function isInt(value) {
-  if (isNaN(value)) {
-    return false;
-  }
-  const x = parseFloat(value);
-  return (x | 0) === x;
-}
-
-export function randInt(min, max) {
-  return Math.round(Math.random() * (max - min) + min);
-}
-
-export function randomString(length = 12) {
-  const chars = 'qwertyuiopasdfghjklzxcvbnm1234567890';
-  let output = '';
-
-  Array(length).fill('').forEach(() => {
-    output += chars[randInt(0, chars.length - 1)];
-  });
-
-  return output;
-}
-
-export function isBsonBuiltin(value) {
-  return (
-    (typeof value === 'object') &&
-    (value !== null) &&
-    (typeof value._bsontype === 'string') &&
-    (typeof value.inspect === 'function')
-  );
-}
-
-export function canBeObjectId(value) {
-  try {
-    new ObjectId(value);
-    return true;
-  }
-  catch {
-    return false;
-  }
-}

frontend/src/main.js

@@ -1,15 +1,16 @@
+import './styles/loading.css';
 import './styles/reset.css';
 import './styles/style.css';
-import './styles/loading.css';
 
+import { LogError } from '$wails/runtime';
 import App from './app.svelte';
-import { LogError } from '../wailsjs/runtime/runtime';
 
 window.addEventListener('unhandledrejection', event => {
   LogError('Unhandled Rejection in JS! Reason:');
   LogError(String(event.reason));
 });
 
+// @ts-ignore Argument IS correct.
 const app = new App({ target: document.getElementById('app') });
 
 export default app;

frontend/src/organisms/about/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Modal from '../../components/modal.svelte';
+  import Modal from '$components/modal.svelte';
 
   export let show = false;
 </script>

frontend/src/organisms/connection/collection/components/form.svelte

@@ -1,7 +1,8 @@
 <script>
-  import { inputTypes, resolveKeypath, setValue } from '../../../../lib/utils';
-  import Icon from '../../../../components/icon.svelte';
-  import FormInput from '../../../../components/forminput.svelte';
+  import FormInput from '$components/forminput.svelte';
+  import Icon from '$components/icon.svelte';
+  import { inputTypes } from '$lib/mongo';
+  import { resolveKeypath, setValue } from '$lib/keypaths';
 
   export let item = {};
   export let view = {};

frontend/src/organisms/connection/collection/components/indexdetail.svelte

@@ -1,8 +1,8 @@
 <script>
-  import Icon from '../../../../components/icon.svelte';
-  import { input } from '../../../../lib/actions';
-  import Modal from '../../../../components/modal.svelte';
-  import { CreateIndex } from '../../../../../wailsjs/go/app/App';
+  import Icon from '$components/icon.svelte';
+  import Modal from '$components/modal.svelte';
+  import input from '$lib/actions/input';
+  import { CreateIndex } from '$wails/go/app/App';
   import { createEventDispatcher } from 'svelte';
 
   export let collection = {};

frontend/src/organisms/connection/collection/components/querychooser.svelte

@@ -1,11 +1,11 @@
 <script>
-  import Icon from '../../../../components/icon.svelte';
+  import Grid from '$components/grid.svelte';
+  import Hint from '$components/hint.svelte';
+  import Icon from '$components/icon.svelte';
+  import Modal from '$components/modal.svelte';
+  import input from '$lib/actions/input';
+  import queries from '$lib/stores/queries';
   import { createEventDispatcher } from 'svelte';
-  import Modal from '../../../../components/modal.svelte';
-  import { input } from '../../../../lib/actions';
-  import queries from '../../../../lib/stores/queries';
-  import Grid from '../../../../components/grid.svelte';
-  import Hint from '../../../../components/hint.svelte';
 
   export let queryToSave = undefined;
   export let collection = {};

frontend/src/organisms/connection/collection/components/viewconfig.svelte

@@ -1,10 +1,10 @@
 <script>
-  import TabBar from '../../../../components/tabbar.svelte';
-  import Modal from '../../../../components/modal.svelte';
-  import Icon from '../../../../components/icon.svelte';
-  import { randomString } from '../../../../lib/utils';
-  import { input } from '../../../../lib/actions';
-  import views from '../../../../lib/stores/views';
+  import Icon from '$components/icon.svelte';
+  import Modal from '$components/modal.svelte';
+  import TabBar from '$components/tabbar.svelte';
+  import input from '$lib/actions/input';
+  import { randomString } from '$lib/math';
+  import views from '$lib/stores/views';
 
   export let collection;
   export let show = false;

frontend/src/organisms/connection/collection/find.svelte

@@ -1,17 +1,17 @@
 <script>
+  import CodeExample from '$components/code-example.svelte';
+  import Grid from '$components/grid.svelte';
+  import Icon from '$components/icon.svelte';
+  import ObjectGrid from '$components/objectgrid.svelte';
+  import input from '$lib/actions/input';
+  import queries from '$lib/stores/queries';
+  import applicationSettings from '$lib/stores/settings';
+  import views from '$lib/stores/views';
+  import { FindItems, RemoveItemById } from '$wails/go/app/App';
   import { EJSON } from 'bson';
-  import applicationSettings from '../../../lib/stores/settings';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { FindItems, RemoveItemById } from '../../../../wailsjs/go/app/App';
-  import { input } from '../../../lib/actions';
-  import CodeExample from '../../../components/code-example.svelte';
-  import Grid from '../../../components/grid.svelte';
-  import Icon from '../../../components/icon.svelte';
-  import ObjectGrid from '../../../components/objectgrid.svelte';
-  import views from '../../../lib/stores/views';
   import QueryChooser from './components/querychooser.svelte';
-  import queries from '../../../lib/stores/queries';
-  // import ObjectViewer from '../../../components/objectviewer.svelte';
+  // import ObjectViewer from '$components/objectviewer.svelte';
 
   export let collection;
 

frontend/src/organisms/connection/collection/index.svelte

@@ -1,15 +1,15 @@
 <script>
-  import BlankState from '../../../components/blankstate.svelte';
+  import BlankState from '$components/blankstate.svelte';
+  import TabBar from '$components/tabbar.svelte';
+  import { EventsOn } from '$wails/runtime/runtime';
   import { tick } from 'svelte';
-  import TabBar from '../../../components/tabbar.svelte';
+  import ViewConfig from './components/viewconfig.svelte';
   import Find from './find.svelte';
   import Indexes from './indexes.svelte';
   import Insert from './insert.svelte';
   import Remove from './remove.svelte';
   import Stats from './stats.svelte';
   import Update from './update.svelte';
-  import { EventsOn } from '../../../../wailsjs/runtime/runtime';
-  import ViewConfig from './components/viewconfig.svelte';
 
   export let collection;
   export let hostKey;

frontend/src/organisms/connection/collection/indexes.svelte

@@ -1,8 +1,8 @@
 <script>
-  import ObjectViewer from '../../../components/objectviewer.svelte';
-  import ObjectGrid from '../../../components/objectgrid.svelte';
-  import { DropIndex, GetIndexes } from '../../../../wailsjs/go/app/App';
-  import Icon from '../../../components/icon.svelte';
+  import Icon from '$components/icon.svelte';
+  import ObjectGrid from '$components/objectgrid.svelte';
+  import ObjectViewer from '$components/objectviewer.svelte';
+  import { DropIndex, GetIndexes } from '$wails/go/app/App';
   import IndexDetail from './components/indexdetail.svelte';
 
   export let collection;

frontend/src/organisms/connection/collection/insert.svelte

@@ -1,15 +1,16 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { InsertItems } from '../../../../wailsjs/go/app/App';
-  import { input } from '../../../lib/actions';
-  import Icon from '../../../components/icon.svelte';
-  import Form from './components/form.svelte';
-  import ObjectViewer from '../../../components/objectviewer.svelte';
-  import Grid from '../../../components/grid.svelte';
-  import { inputTypes, randomString } from '../../../lib/utils';
+  import Details from '$components/details.svelte';
+  import Grid from '$components/grid.svelte';
+  import Icon from '$components/icon.svelte';
+  import ObjectViewer from '$components/objectviewer.svelte';
+  import input from '$lib/actions/input';
+  import { randomString } from '$lib/math';
+  import { inputTypes } from '$lib/mongo';
+  import views from '$lib/stores/views';
+  import { InsertItems } from '$wails/go/app/App';
   import { EJSON } from 'bson';
-  import Details from '../../../components/details.svelte';
-  import views from '../../../lib/stores/views';
+  import { createEventDispatcher } from 'svelte';
+  import Form from './components/form.svelte';
 
   export let collection;
 

frontend/src/organisms/connection/collection/remove.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { input } from '../../../lib/actions';
-  import { RemoveItems } from '../../../../wailsjs/go/app/App';
-  import CodeExample from '../../../components/code-example.svelte';
-  import Icon from '../../../components/icon.svelte';
+  import CodeExample from '$components/code-example.svelte';
+  import Icon from '$components/icon.svelte';
+  import input from '$lib/actions/input';
+  import { RemoveItems } from '$wails/go/app/App';
 
   export let collection;
 

frontend/src/organisms/connection/collection/stats.svelte

@@ -1,6 +1,6 @@
 <script>
-  import ObjectGrid from '../../../components/objectgrid.svelte';
-  import CodeExample from '../../../components/code-example.svelte';
+  import CodeExample from '$components/code-example.svelte';
+  import ObjectGrid from '$components/objectgrid.svelte';
 
   export let collection;
 </script>

frontend/src/organisms/connection/collection/update.svelte

@@ -1,8 +1,8 @@
 <script>
-  import Icon from '../../../components/icon.svelte';
-  import { input } from '../../../lib/actions';
-  import { UpdateItems } from '../../../../wailsjs/go/app/App';
-  import CodeExample from '../../../components/code-example.svelte';
+  import CodeExample from '$components/code-example.svelte';
+  import Icon from '$components/icon.svelte';
+  import input from '$lib/actions/input';
+  import { UpdateItems } from '$wails/go/app/App';
 
   export let collection = {};
 

frontend/src/organisms/connection/export/export.svelte

@@ -1,11 +1,11 @@
 <script>
-  import Grid from '../../../components/grid.svelte';
-  import Modal from '../../../components/modal.svelte';
-  import { OpenConnection, OpenDatabase, PerformExport } from '../../../../wailsjs/go/app/App';
-  import DirectoryChooser from '../../../components/directorychooser.svelte';
-  import applicationSettings from '../../../lib/stores/settings';
-  import { connections } from '../../../lib/stores/connections';
-  import busy from '../../../lib/stores/busy';
+  import DirectoryChooser from '$components/directorychooser.svelte';
+  import Grid from '$components/grid.svelte';
+  import Modal from '$components/modal.svelte';
+  import busy from '$lib/stores/busy';
+  import { connections } from '$lib/stores/connections';
+  import applicationSettings from '$lib/stores/settings';
+  import { OpenConnection, OpenDatabase, PerformExport } from '$wails/go/app/App';
 
   export let info;
   export let hosts = {};

frontend/src/organisms/connection/hostdetail.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { input } from '../../lib/actions';
+  import Modal from '$components/modal.svelte';
+  import input from '$lib/actions/input';
+  import { AddHost, UpdateHost } from '$wails/go/app/App';
   import { createEventDispatcher } from 'svelte';
-  import { AddHost, UpdateHost } from '../../../wailsjs/go/app/App';
-  import Modal from '../../components/modal.svelte';
 
   export let show = false;
   export let hostKey = '';

frontend/src/organisms/connection/hosttree.svelte

@@ -1,10 +1,10 @@
 <script>
+  import Grid from '$components/grid.svelte';
+  import busy from '$lib/stores/busy';
+  import { connections } from '$lib/stores/connections';
+  import { WindowSetTitle } from '$wails/runtime/runtime';
   import { createEventDispatcher } from 'svelte';
   import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase, TruncateCollection } from '../../../wailsjs/go/app/App';
-  import Grid from '../../components/grid.svelte';
-  import { WindowSetTitle } from '../../../wailsjs/runtime/runtime';
-  import { connections } from '../../lib/stores/connections';
-  import busy from '../../lib/stores/busy';
 
   export let hosts = {};
   export let activeHostKey = '';

frontend/src/organisms/connection/index.svelte

@@ -1,17 +1,17 @@
 <script>
+  import Hint from '$components/hint.svelte';
+  import Icon from '$components/icon.svelte';
+  import Modal from '$components/modal.svelte';
+  import input from '$lib/actions/input';
+  import busy from '$lib/stores/busy';
+  import { connections } from '$lib/stores/connections';
+  import { Hosts, RenameCollection } from '$wails/go/app/App';
+  import { EventsOn } from '$wails/runtime/runtime';
   import { onMount } from 'svelte';
-  import { Hosts, RenameCollection } from '../../../wailsjs/go/app/App';
-  import { input } from '../../lib/actions';
-  import Modal from '../../components/modal.svelte';
-  import HostTree from './hosttree.svelte';
   import CollectionDetail from './collection/index.svelte';
-  import HostDetail from './hostdetail.svelte';
-  import Icon from '../../components/icon.svelte';
-  import { EventsOn } from '../../../wailsjs/runtime/runtime';
   import Export from './export/export.svelte';
-  import Hint from '../../components/hint.svelte';
-  import { connections } from '../../lib/stores/connections';
-  import busy from '../../lib/stores/busy';
+  import HostDetail from './hostdetail.svelte';
+  import HostTree from './hosttree.svelte';
 
   export let hosts = {};
   export let activeHostKey = '';

frontend/src/organisms/settings/index.svelte

@@ -1,8 +1,8 @@
 <script>
-  import DirectoryChooser from '../../components/directorychooser.svelte';
-  import { input } from '../../lib/actions';
-  import Modal from '../../components/modal.svelte';
-  import settings from '../../lib/stores/settings';
+  import DirectoryChooser from '$components/directorychooser.svelte';
+  import Modal from '$components/modal.svelte';
+  import input from '$lib/actions/input';
+  import settings from '$lib/stores/settings';
 
   export let show = false;
 </script>

frontend/vite.config.js

@@ -1,7 +1,18 @@
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const currentDir = dirname(fileURLToPath(import.meta.url));
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [ svelte() ],
+  resolve: {
+    alias: {
+      '$components': currentDir + '/src/components',
+      '$organisms': currentDir + '/src/organisms',
+      '$wails': currentDir + '/wailsjs',
+      '$lib': currentDir + '/src/lib',
+    },
+  },
 });