Lint code

frontend/src/app.svelte

@@ -1,14 +1,14 @@
 <script>
   import BlankState from '$components/blankstate.svelte';
   import ContextMenu from '$components/contextmenu.svelte';
-  import dialogs from '$lib/dialogs';
+  import dialogs from '$lib/dialogs.js';
-  import contextMenu from '$lib/stores/contextmenu';
+  import contextMenu from '$lib/stores/contextmenu.js';
-  import environment from '$lib/stores/environment';
+  import environment from '$lib/stores/environment.js';
-  import hostTree from '$lib/stores/hosttree';
+  import hostTree from '$lib/stores/hosttree.js';
-  import applicationInited from '$lib/stores/inited';
+  import applicationInited from '$lib/stores/inited.js';
-  import windowTitle from '$lib/stores/windowtitle';
+  import windowTitle from '$lib/stores/windowtitle.js';
   import Connection from '$organisms/connection/index.svelte';
-  import { EventsOn } from '$wails/runtime';
+  import { EventsOn } from '$wails/runtime.js';
   import { tick } from 'svelte';
   import AboutDialog from './dialogs/about.svelte';
   import SettingsDialog from './dialogs/settings/index.svelte';

frontend/src/components/contextmenu.svelte

@@ -50,7 +50,7 @@
 <svelte:window on:keydown={keydown} />
 
 {#if items && position}
-  <div class="backdrop" on:pointerdown={close}></div>
+  <div class="backdrop" on:pointerdown={close} />
   <nav>
     <ul class="contextmenu" role="" style:left="{position[0]}px" style:top="{position[1]}px">
       {#each items as item, index}

frontend/src/components/editors/codeeditor.svelte

@@ -40,7 +40,7 @@
   });
 </script>
 
-<div bind:this={editorParent} class="editor"></div>
+<div bind:this={editorParent} class="editor" />
 
 <style>
   .editor {

frontend/src/components/editors/datepicker.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { daysAbbr, months } from '$lib/constants';
+  import { daysAbbr, months } from '$lib/constants.js';
   import { addDays, getWeek, isDate, isSameDay, startOfWeek } from 'date-fns';
   import { onMount } from 'svelte';
   import Clock from '../clock.svelte';
@@ -97,7 +97,7 @@
       <table class="calendar">
         <thead>
           <tr>
-            <th></th>
+            <th />
             {#each daysAbbr as dayName}
               <th>{dayName}</th>
             {/each}

frontend/src/components/editors/directorychooser.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { OpenDirectory } from '$wails/go/ui/UI';
+  import { OpenDirectory } from '$wails/go/ui/UI.js';
 
   export let value = '';
   export let id = '';
@@ -10,7 +10,13 @@
   }
 </script>
 
-<input type="text" on:pointerdown={selectDir} readonly {id} {value} />
+<input
+  type="text"
+  on:pointerdown={selectDir}
+  readonly
+  {id}
+  {value}
+/>
 
 <style>
   input {

frontend/src/components/editors/forminput.svelte

@@ -1,6 +1,6 @@
 <script>
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
-  import { canBeObjectId, numericInputTypes } from '$lib/mongo';
+  import { canBeObjectId, numericInputTypes } from '$lib/mongo.js';
   import { ObjectId } from 'bson';
   import { onMount } from 'svelte';
   import Datepicker from './datepicker.svelte';
@@ -70,7 +70,12 @@
 <div class="forminput {type}">
   <div class="field">
     {#if type === 'string'}
-      <input type="text" bind:value use:input={{ type, onValid, onInvalid, mandatory, autofocus }} autocomplete="off" spellcheck="false" />
+      <input
+        type="text"
+        bind:value
+        use:input={{ type, onValid, onInvalid, mandatory, autofocus }}
+        autocomplete="off"
+        spellcheck="false" />
     {:else if type === 'objectid'}
       <input
         type="text"
@@ -79,7 +84,11 @@
         use:input={{ type, onValid, onInvalid, mandatory, autofocus }}
       />
     {:else if numericInputTypes.includes(type)}
-      <input type="number" bind:value use:input={{ type, onValid, onInvalid, mandatory, autofocus }} />
+      <input
+        type="number"
+        bind:value
+        use:input={{ type, onValid, onInvalid, mandatory, autofocus }}
+      />
     {:else if type === 'bool'}
       <select bind:value on:change={selectChange} bind:this={selectInput}>
         <option value={undefined} disabled={mandatory}>Unset</option>
@@ -98,18 +107,38 @@
           <Icon name="edit" />
         </button>
       {/if}
-      <button class="button-small" type="button" title="Generate random object id" on:click={generateObjectId}>
+      <button
+        class="button-small"
+        type="button"
+        title="Generate random object id"
+        on:click={generateObjectId}
+      >
         <Icon name="reload" />
       </button>
     {:else if type === 'date'}
-      <button class="button-small" type="button" title="Edit date" on:click={() => showDatepicker = true}>
+      <button
+        class="button-small"
+        type="button"
+        title="Edit date"
+        on:click={() => showDatepicker = true}
+      >
         <Icon name="edit" />
       </button>
-      <button class="button-small" type="button" title="Set date to now" on:click={() => value = new Date()}>
+      <button
+        class="button-small"
+        type="button"
+        title="Set date to now"
+        on:click={() => value = new Date()}
+      >
         <Icon name="o" />
       </button>
     {/if}
-    <button class="button-small" type="button" title="Reset field to default value" on:click={() => value = undefined}>
+    <button
+      class="button-small"
+      type="button"
+      title="Reset field to default value"
+      on:click={() => value = undefined}
+    >
       <Icon name="trash" />
     </button>
   </div>

frontend/src/components/editors/objecteditor.svelte

@@ -7,9 +7,7 @@
   export let editor = undefined;
   export let readonly = false;
 
-  const extensions = [
+  const extensions = [ javascript() ];
-    javascript(),
-  ];
 
   onMount(() => {
     editor.dispatch({

frontend/src/components/grid/grid-items.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { pathsAreEqual, resolveKeypath, setValue } from '$lib/objects';
+  import { pathsAreEqual, resolveKeypath, setValue } from '$lib/objects.js';
-  import contextMenu from '$lib/stores/contextmenu';
+  import contextMenu from '$lib/stores/contextmenu.js';
   import { createEventDispatcher } from 'svelte';
   import FormInput from '$components/editors/forminput.svelte';
   import Icon from '$components/icon.svelte';
@@ -131,7 +131,7 @@
     on:dblclick={() => doubleClick(item[key], index)}
     on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
     class:selectable={canSelect}
-    class:selected={canSelect && pathsAreEqual(activePath, [ ...path, item[key] ])}
+    class:selected={canSelect && pathsAreEqual(activePath, ...path, item[key])}
     class:striped
   >
     {#if !hideChildrenToggles}
@@ -157,7 +157,11 @@
     {#each columns as column, columnIndex}
       <td class:right={column.right} title={keypathProxies[index][column.key]}>
         {#if column.inputType}
-          <FormInput {column} bind:value={keypathProxies[index][column.key]} bind:valid={validity[columnIndex]} />
+          <FormInput
+            {column}
+            bind:value={keypathProxies[index][column.key]}
+            bind:valid={validity[columnIndex]}
+          />
         {:else}
           <div class="value" style:margin-left="{level * 10}px">
             {formatValue(keypathProxies[index][column.key])}
@@ -168,7 +172,12 @@
 
     {#if canRemoveItems}
       <td class="has-button">
-        <button class="button-small" type="button" on:click|stopPropagation={() => removeItem(index, item[key])} on:dblclick|stopPropagation>
+        <button
+          class="button-small"
+          type="button"
+          on:click|stopPropagation={() => removeItem(index, item[key])}
+          on:dblclick|stopPropagation
+        >
           <Icon name="x" />
         </button>
       </td>

frontend/src/components/grid/grid.svelte

@@ -57,17 +57,17 @@
         <thead>
           <tr>
             {#if !hideChildrenToggles}
-              <th class="has-toggle"></th>
+              <th class="has-toggle" />
             {/if}
 
-            <th class="has-icon"></th>
+            <th class="has-icon" />
 
             {#each columns as column}
               <th scope="col">{column.title || ''}</th>
             {/each}
 
             {#if canRemoveItems}
-              <th class="has-button"></th>
+              <th class="has-button" />
             {/if}
           </tr>
         </thead>

frontend/src/components/grid/objectgrid.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { isBsonBuiltin } from '$lib/mongo';
+  import { isBsonBuiltin } from '$lib/mongo.js';
   import { isDate } from 'date-fns';
   import Grid from './grid.svelte';
 
@@ -22,7 +22,6 @@
   ].filter(c => !!c);
 
   $: if (data) {
-    // items = dissectObject(data).map(item => ({ ...item, menu: getRootMenu(item.key, item) }));
     items = [];
 
     if (Array.isArray(data)) {

frontend/src/components/modal.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script>
-  import { Beep } from '$wails/go/ui/UI';
+  import { Beep } from '$wails/go/ui/UI.js';
   import { createEventDispatcher } from 'svelte';
   import Icon from './icon.svelte';
 

frontend/src/components/objectviewer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { looseJsonIsValid } from '$lib/strings';
+  import { looseJsonIsValid } from '$lib/strings.js';
   import { EJSON } from 'bson';
   import { createEventDispatcher, onDestroy } from 'svelte';
   import Icon from './icon.svelte';

frontend/src/dialogs/about.svelte

@@ -1,7 +1,7 @@
 <script>
   import Modal from '$components/modal.svelte';
-  import alink from '$lib/actions/alink';
+  import alink from '$lib/actions/alink.js';
-  import environment from '$lib/stores/environment';
+  import environment from '$lib/stores/environment.js';
 </script>
 
 <Modal width="400px" title=" " on:close>

frontend/src/dialogs/settings/index.svelte

@@ -1,8 +1,8 @@
 <script>
   import DirectoryChooser from '$components/editors/directorychooser.svelte';
   import Modal from '$components/modal.svelte';
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
-  import settings from '$lib/stores/settings';
+  import settings from '$lib/stores/settings.js';
 </script>
 
 <Modal title="Preferences" on:close>
@@ -15,7 +15,13 @@
 
     <label for="defaultSort">Default sort query</label>
     <label class="field">
-      <input type="text" class="code" bind:value={$settings.defaultSort} id="defaultSort" use:input={{ type: 'json' }} />
+      <input
+        type="text"
+        class="code"
+        bind:value={$settings.defaultSort}
+        id="defaultSort"
+        use:input={{ type: 'json' }}
+      />
     </label>
 
     <label for="autosubmitQuery">Autosubmit query</label>

frontend/src/lib/actions/alink.js

@@ -1,4 +1,4 @@
-import { BrowserOpenURL } from '$wails/runtime/runtime';
+import { BrowserOpenURL } from '$wails/runtime/runtime.js';
 
 export default function alink(node) {
   node.addEventListener('click', e => {

frontend/src/lib/actions/controlkey.js

@@ -1,4 +1,4 @@
-import environment from '$lib/stores/environment';
+import environment from '$lib/stores/environment.js';
 import { get } from 'svelte/store';
 
 export function controlKeyDown(event) {

frontend/src/lib/actions/input.js

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

frontend/src/lib/dialogs.js

@@ -1,4 +1,4 @@
-import { AskConfirmation } from '$wails/go/app/App';
+import { AskConfirmation } from '$wails/go/app/App.js';
 import InputDialog from '../dialogs/input.svelte';
 
 function newDialog(dialogComponent, data = {}) {

frontend/src/lib/mongo/collation.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { locales } from '$lib/mongo';
+  import { locales } from './index.js';
 
   const defaultCollation = {
     locale: 'en_US',

frontend/src/lib/progress.js

@@ -1,4 +1,4 @@
-import { StartProgressBar, StopProgressBar } from '$wails/go/ui/UI';
+import { StartProgressBar, StopProgressBar } from '$wails/go/ui/UI.js';
 
 let taskCounter = 0;
 

frontend/src/lib/stores/environment.js

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

frontend/src/lib/stores/hosttree.js

@@ -1,9 +1,9 @@
-import dialogs from '$lib/dialogs';
+import dialogs from '$lib/dialogs.js';
-import { startProgress } from '$lib/progress';
+import { startProgress } from '$lib/progress.js';
 import { get, writable } from 'svelte/store';
-import applicationInited from './inited';
+import applicationInited from './inited.js';
-import queries from './queries';
+import queries from './queries.js';
-import windowTitle from './windowtitle';
+import windowTitle from './windowtitle.js';
 
 import ExportDialog from '$organisms/connection/collection/dialogs/export.svelte';
 import IndexDetailDialog from '$organisms/connection/collection/dialogs/indexdetail.svelte';
@@ -30,7 +30,7 @@ import {
   RemoveHost,
   RenameCollection,
   TruncateCollection
-} from '$wails/go/app/App';
+} from '$wails/go/app/App.js';
 
 const { set, subscribe } = writable({});
 const getValue = () => get({ subscribe });
@@ -121,7 +121,10 @@ async function refresh() {
             collection.rename = async function() {
               const newCollKey = await dialogs.enterText('Rename collection', `Enter a new name for collection ${collKey}.`, collKey);
               if (newCollKey && (newCollKey !== collKey)) {
-                const progress = startProgress(`Renaming collection "${collKey}" to "${newCollKey}"…`);
+                const progress = startProgress(
+                  `Renaming collection "${collKey}" to "${newCollKey}"…`
+                );
+
                 const ok = await RenameCollection(hostKey, dbKey, collKey, newCollKey);
                 await database.open();
                 progress.end();
@@ -155,7 +158,13 @@ async function refresh() {
               const dialog = dialogs.new(ExportDialog, { collection, query });
               return new Promise(resolve => {
                 dialog.$on('export', async event => {
-                  const success = await PerformFindExport(hostKey, dbKey, collKey, JSON.stringify(event.detail.exportInfo));
+                  const success = await PerformFindExport(
+                    hostKey,
+                    dbKey,
+                    collKey,
+                    JSON.stringify(event.detail.exportInfo)
+                  );
+
                   if (success) {
                     dialog.$close();
                     resolve();
@@ -230,10 +239,17 @@ async function refresh() {
 
               return new Promise(resolve => {
                 dialog.$on('create', async event => {
-                  const newIndexName = await CreateIndex(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(event.detail.index));
+                  const newIndexName = await CreateIndex(
+                    collection.hostKey,
+                    collection.dbKey,
+                    collection.key,
+                    JSON.stringify(event.detail.index)
+                  );
+
                   if (newIndexName) {
                     dialog.$close();
                   }
+
                   resolve(newIndexName);
                 });
               });

frontend/src/lib/stores/inited.js

@@ -1,6 +1,6 @@
 import { derived } from 'svelte/store';
-import environment from './environment';
+import environment from './environment.js';
-import applicationSettings from './settings';
+import applicationSettings from './settings.js';
 
 let alreadyInited = false;
 

frontend/src/lib/stores/queries.js

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

frontend/src/lib/stores/settings.js

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

frontend/src/lib/stores/sharedstate.js

@@ -1,4 +1,4 @@
-import { ReportSharedStateVariable } from '$wails/go/app/App';
+import { ReportSharedStateVariable } from '$wails/go/app/App.js';
 import { writable } from 'svelte/store';
 
 function sharedStateStore(name) {

frontend/src/lib/stores/views.js

@@ -1,6 +1,6 @@
-import dialogs from '$lib/dialogs';
+import dialogs from '$lib/dialogs.js';
 import ViewConfigDialog from '$organisms/connection/collection/dialogs/viewconfig.svelte';
-import { UpdateViewStore, Views } from '$wails/go/app/App';
+import { UpdateViewStore, Views } from '$wails/go/app/App.js';
 import { get, writable } from 'svelte/store';
 
 const { set, subscribe } = writable({});

frontend/src/lib/stores/windowtitle.js

@@ -1,4 +1,4 @@
-import { WindowSetTitle } from '$wails/runtime/runtime';
+import { WindowSetTitle } from '$wails/runtime/runtime.js';
 import { writable } from 'svelte/store';
 
 const { set, subscribe } = writable('Rolens');

frontend/src/main.js

@@ -2,7 +2,7 @@ import './styles/loading.css';
 import './styles/reset.css';
 import './styles/style.css';
 
-import { LogError } from '$wails/runtime';
+import { LogError } from '$wails/runtime.js';
 import App from './app.svelte';
 
 window.addEventListener('unhandledrejection', event => {

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

@@ -3,11 +3,11 @@
   import Icon from '$components/icon.svelte';
   import Modal from '$components/modal.svelte';
   import ObjectEditor from '$components/editors/objecteditor.svelte';
-  import { aggregationStageDocumentationURL, aggregationStages } from '$lib/mongo';
+  import { aggregationStageDocumentationURL, aggregationStages } from '$lib/mongo/index.js';
   import Collation from '$lib/mongo/collation.svelte';
-  import { jsonLooseParse, looseJsonIsValid } from '$lib/strings';
+  import { jsonLooseParse, looseJsonIsValid } from '$lib/strings.js';
-  import { Aggregate } from '$wails/go/app/App';
+  import { Aggregate } from '$wails/go/app/App.js';
-  import { BrowserOpenURL } from '$wails/runtime/runtime';
+  import { BrowserOpenURL } from '$wails/runtime/runtime.js';
   import { onMount } from 'svelte';
 
   export let collection;

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

@@ -2,8 +2,8 @@
   import FormInput from '$components/editors/forminput.svelte';
   import Hint from '$components/hint.svelte';
   import Icon from '$components/icon.svelte';
-  import { inputTypes } from '$lib/mongo';
+  import { inputTypes } from '$lib/mongo/index.js';
-  import { resolveKeypath, setValue } from '$lib/objects';
+  import { resolveKeypath, setValue } from '$lib/objects.js';
 
   export let item = {};
   export let view = {};
@@ -50,7 +50,12 @@
         </span>
       </div>
       <div class="input">
-        <FormInput {column} bind:value={keypathProxy[column.key]} bind:valid={validity[column.key]} autofocus={index === 0} />
+        <FormInput
+          {column}
+          bind:value={keypathProxy[column.key]}
+          bind:valid={validity[column.key]}
+          autofocus={index === 0}
+        />
       </div>
     </label>
   {:else}

frontend/src/organisms/connection/collection/dialogs/duplicate.svelte

@@ -1,9 +1,9 @@
 <script>
   import Icon from '$components/icon.svelte';
   import Modal from '$components/modal.svelte';
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
-  import hostTree from '$lib/stores/hosttree';
+  import hostTree from '$lib/stores/hosttree.js';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
 
   export let host = {};
   export let dbKey = '';

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

@@ -1,7 +1,7 @@
 <script>
   import Icon from '$components/icon.svelte';
   import Modal from '$components/modal.svelte';
-  import views from '$lib/stores/views';
+  import views from '$lib/stores/views.js';
   import { createEventDispatcher } from 'svelte';
 
   export let collection;

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

@@ -1,7 +1,7 @@
 <script>
   import Icon from '$components/icon.svelte';
   import Modal from '$components/modal.svelte';
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
   import { createEventDispatcher } from 'svelte';
 
   export let collection;
@@ -27,7 +27,12 @@
   <form on:submit|preventDefault={create}>
     <label class="field name">
       <span class="label">Name</span>
-      <input type="text" placeholder="Optional" bind:value={index.name} use:input={{ autofocus: true }} />
+      <input
+        type="text"
+        placeholder="Optional"
+        bind:value={index.name}
+        use:input={{ autofocus: true }}
+      />
     </label>
 
     <div class="toggles">
@@ -62,8 +67,9 @@
         <div class="row">
           <label class="field">
             <span class="label">Key</span>
-            <input type="text" placeholder="_id" bind:value={rule.key}>
+            <input type="text" placeholder="_id" bind:value={rule.key} />
           </label>
+
           <label class="field">
             <select bind:value={rule.sort}>
               <option value={1}>Ascending</option>
@@ -71,6 +77,7 @@
               <option value="hashed" disabled={index.model.length > 1}>Hashed</option>
             </select>
           </label>
+
           <button type="button" class="button danger" on:click={() => removeRule(ruleIndex)} disabled={index.model.length < 2}>
             <Icon name="-" />
           </button>
@@ -85,6 +92,7 @@
     <button class="button" on:click={addRule} disabled={index.model.some(r => r.sort === 'hashed')}>
       <Icon name="+" /> Add rule
     </button>
+
     <button class="button" on:click={create} disabled={!index.model.length || index.model.some(r => !r.key)}>
       <Icon name="+" /> Create index
     </button>

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

@@ -3,9 +3,9 @@
   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 input from '$lib/actions/input.js';
-  import hostTree from '$lib/stores/hosttree';
+  import hostTree from '$lib/stores/hosttree.js';
-  import queries from '$lib/stores/queries';
+  import queries from '$lib/stores/queries.js';
   import { createEventDispatcher } from 'svelte';
 
   export let queryToSave = undefined;
@@ -71,7 +71,7 @@
         <input type="text" bind:value={queryToSave.name} use:input={{ autofocus: true }} />
       </label>
       <label class="field">
-        <textarea bind:value={queryToSave.remarks} placeholder="Remarks…" use:input></textarea>
+        <textarea bind:value={queryToSave.remarks} placeholder="Remarks…" use:input />
       </label>
     {/if}
 

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

@@ -2,9 +2,9 @@
   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 input from '$lib/actions/input.js';
-  import { randomString } from '$lib/math';
+  import { randomString } from '$lib/math.js';
-  import views from '$lib/stores/views';
+  import views from '$lib/stores/views.js';
 
   export let collection;
   export let firstItem = {};
@@ -114,7 +114,12 @@
         {#key collection.viewKey}
           <label class="field">
             <span class="label">View name</span>
-            <input type="text" use:input={{ autofocus: true }} bind:value={$views[collection.viewKey].name} disabled={collection.viewKey === 'list'} />
+            <input
+              type="text"
+              use:input={{ autofocus: true }}
+              bind:value={$views[collection.viewKey].name}
+              disabled={collection.viewKey === 'list'}
+            />
           </label>
         {/key}
         <label class="field">
@@ -128,7 +133,11 @@
 
       {#if $views[collection.viewKey].type === 'list'}
         <div class="flex">
-          <input type="checkbox" id="hideObjectIndicators" bind:checked={$views[collection.viewKey].hideObjectIndicators} />
+          <input
+            type="checkbox"
+            id="hideObjectIndicators"
+            bind:checked={$views[collection.viewKey].hideObjectIndicators}
+          />
           <label for="hideObjectIndicators">
             Hide object indicators ({'{...}'} and [...]) in list view and show nothing instead
           </label>
@@ -185,16 +194,41 @@
                 </span>
               </label>
 
-              <button class="button" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
+              <button
+                class="button"
+                type="button"
+                on:click={() => addColumn(columnIndex)}
+                title="Add column before this one"
+              >
                 <Icon name="+" />
               </button>
-              <button class="button" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
+
+              <button
+                class="button"
+                type="button"
+                on:click={() => moveColumn(columnIndex, -1)}
+                disabled={columnIndex === 0}
+                title="Move column one position up"
+              >
                 <Icon name="chev-u" />
               </button>
-              <button class="button" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === $views[collection.viewKey].columns.length - 1} title="Move column one position down">
+
+              <button
+                class="button"
+                type="button"
+                on:click={() => moveColumn(columnIndex, 1)}
+                disabled={columnIndex === $views[collection.viewKey].columns.length - 1}
+                title="Move column one position down"
+              >
                 <Icon name="chev-d" />
               </button>
-              <button class="button danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
+
+              <button
+                class="button danger"
+                type="button"
+                on:click={() => removeColumn(columnIndex)}
+                title="Remove this column"
+              >
                 <Icon name="x" />
               </button>
             </div>
@@ -202,10 +236,16 @@
             <p>No columns yet</p>
           {/each}
         </div>
+
         <button class="button" on:click={addColumn}>
           <Icon name="+" /> Add column
         </button>
-        <button class="button" on:click={addSuggestedColumns} disabled={!Object.keys(firstItem || {}).length}>
+
+        <button
+          class="button"
+          on:click={addSuggestedColumns}
+          disabled={!Object.keys(firstItem || {}).length}
+        >
           <Icon name="zap" /> Add suggested columns
         </button>
       {/if}

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

@@ -3,14 +3,14 @@
   import Icon from '$components/icon.svelte';
   import ObjectGrid from '$components/grid/objectgrid.svelte';
   import ObjectViewer from '$components/objectviewer.svelte';
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
-  import dialogs from '$lib/dialogs';
+  import dialogs from '$lib/dialogs.js';
-  import { deepClone } from '$lib/objects';
+  import { deepClone } from '$lib/objects.js';
-  import { startProgress } from '$lib/progress';
+  import { startProgress } from '$lib/progress.js';
-  import applicationSettings from '$lib/stores/settings';
+  import applicationSettings from '$lib/stores/settings.js';
-  import views from '$lib/stores/views';
+  import views from '$lib/stores/views.js';
-  import { convertLooseJson, stringCouldBeID } from '$lib/strings';
+  import { convertLooseJson, stringCouldBeID } from '$lib/strings.js';
-  import { CountItems, FindItems, RemoveItemById, UpdateFoundDocument } from '$wails/go/app/App';
+  import { CountItems, FindItems, RemoveItemById, UpdateFoundDocument } from '$wails/go/app/App.js';
   import { EJSON } from 'bson';
 
   export let collection;
@@ -36,7 +36,11 @@
   let objectViewerSuccessMessage = '';
   let viewsForCollection = {};
 
-  // $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
+  // $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields &&
+  // form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})
+  // ${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `
+  // .limit(${form.limit})` : ''};`;
+
   $: lastPage = (submittedForm.limit && result?.results?.length) ? Math.max(0, Math.ceil((result.total - submittedForm.limit) / submittedForm.limit)) : 0;
   $: activePage = (submittedForm.limit && submittedForm.skip && result?.results?.length) ? submittedForm.skip / submittedForm.limit : 0;
 
@@ -55,13 +59,17 @@
 
     querying = `Querying ${collection.key}…`;
     activePath = [];
-    const newResult = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify({
+    const newResult = await FindItems(
-      fields: convertLooseJson(form.fields || defaults.fields),
+      collection.hostKey,
-      limit: form.limit ?? defaults.limit,
+      collection.dbKey,
-      query: convertLooseJson(form.query) || defaults.query,
+      collection.key, JSON.stringify({
-      skip: form.skip ?? defaults.skip,
+        fields: convertLooseJson(form.fields || defaults.fields),
-      sort: convertLooseJson(form.sort) || defaults.sort,
+        limit: form.limit ?? defaults.limit,
-    }));
+        query: convertLooseJson(form.query) || defaults.query,
+        skip: form.skip ?? defaults.skip,
+        sort: convertLooseJson(form.sort) || defaults.sort,
+      })
+    );
 
     if (newResult) {
       newResult.results = newResult.results?.map(s => EJSON.parse(s, { relaxed: false }));
@@ -137,7 +145,14 @@
     if (!sure) {
       return;
     }
-    const ok = await RemoveItemById(collection.hostKey, collection.dbKey, collection.key, activePath[0]);
+
+    const ok = await RemoveItemById(
+      collection.hostKey,
+      collection.dbKey,
+      collection.key,
+      activePath[0]
+    );
+
     if (ok) {
       await submitQuery();
     }
@@ -189,7 +204,8 @@
     <div class="formrow one">
       <label class="field">
         <span class="label">Query or id</span>
-        <input type="text"
+        <input
+          type="text"
           class="code"
           placeholder={defaults.query}
           autocomplete="off"
@@ -230,7 +246,8 @@
 
       <label class="field">
         <span class="label">Skip</span>
-        <input type="number"
+        <input
+          type="number"
           min="0"
           bind:value={form.skip}
           use:input
@@ -241,7 +258,8 @@
 
       <label class="field">
         <span class="label">Limit</span>
-        <input type="number"
+        <input
+          type="number"
           min="0"
           bind:value={form.limit}
           use:input
@@ -334,19 +352,49 @@
             <Icon name="cog" />
           </button>
         </label>
-        <button class="button danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item">
+
+        <button
+          class="button danger"
+          on:click={removeActive}
+          disabled={!activePath?.length}
+          title="Drop selected item"
+        >
           <Icon name="-" />
         </button>
-        <button class="button" on:click={first} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="First page">
+
+        <button
+          class="button"
+          on:click={first}
+          disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)}
+          title="First page"
+        >
           <Icon name="chevs-l" />
         </button>
-        <button class="button" on:click={prev} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)} title="Previous {submittedForm.limit} items">
+
+        <button
+          class="button"
+          on:click={prev}
+          disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results || (activePage === 0)}
+          title="Previous {submittedForm.limit} items"
+        >
           <Icon name="chev-l" />
         </button>
-        <button class="button" on:click={next} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Next {submittedForm.limit} items">
+
+        <button
+          class="button"
+          on:click={next}
+          disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)}
+          title="Next {submittedForm.limit} items"
+        >
           <Icon name="chev-r" />
         </button>
-        <button class="button" on:click={last} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)} title="Last page">
+
+        <button
+          class="button"
+          on:click={last}
+          disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results || !lastPage || (activePage >= lastPage)}
+          title="Last page"
+        >
           <Icon name="chevs-r" />
         </button>
       </div>
@@ -355,7 +403,12 @@
 </div>
 
 {#if objectViewerData}
-  <ObjectViewer bind:data={objectViewerData} saveable on:save={saveDocument} bind:successMessage={objectViewerSuccessMessage} />
+  <ObjectViewer
+    bind:data={objectViewerData}
+    saveable
+    on:save={saveDocument}
+    bind:successMessage={objectViewerSuccessMessage}
+  />
 {/if}
 
 <datalist id="limits">

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

@@ -18,14 +18,14 @@
   export let tab = 'find';
 
   const tabs = {
-    'stats': { icon: 'chart', title: 'Stats', component: Stats },
+    stats: { icon: 'chart', title: 'Stats', component: Stats },
-    'find': { icon: 'db', title: 'Find', component: Find },
+    find: { icon: 'db', title: 'Find', component: Find },
-    'insert': { icon: '+', title: 'Insert', component: Insert },
+    insert: { icon: '+', title: 'Insert', component: Insert },
-    'update': { icon: 'edit', title: 'Update', component: Update },
+    update: { icon: 'edit', title: 'Update', component: Update },
-    'remove': { icon: 'trash', title: 'Remove', component: Remove },
+    remove: { icon: 'trash', title: 'Remove', component: Remove },
-    'indexes': { icon: 'list', title: 'Indexes', component: Indexes },
+    indexes: { icon: 'list', title: 'Indexes', component: Indexes },
-    'aggregate': { icon: 're', title: 'Aggregate', component: Aggregate },
+    aggregate: { icon: 're', title: 'Aggregate', component: Aggregate },
-    'shell': { icon: 'shell', title: 'Shell', component: Shell },
+    shell: { icon: 'shell', title: 'Shell', component: Shell },
   };
 
   for (const key of Object.keys(tabs)) {

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

@@ -73,9 +73,11 @@
     <button class="button" on:click={refresh}>
       <Icon name="reload" spin={busy} /> Reload
     </button>
+
     <button class="button" on:click={createIndex}>
       <Icon name="+" /> Create index…
     </button>
+
     <button class="button danger" on:click={dropIndex} disabled={!_indexes.length || !activePath[0]}>
       <Icon name="x" /> Drop selected
     </button>

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

@@ -4,11 +4,11 @@
   import Icon from '$components/icon.svelte';
   import ObjectEditor from '$components/editors/objecteditor.svelte';
   import ObjectViewer from '$components/objectviewer.svelte';
-  import { randomString } from '$lib/math';
+  import { randomString } from '$lib/math.js';
-  import { inputTypes } from '$lib/mongo';
+  import { inputTypes } from '$lib/mongo/index.js';
-  import views from '$lib/stores/views';
+  import views from '$lib/stores/views.js';
-  import { capitalise, convertLooseJson, jsonLooseParse } from '$lib/strings';
+  import { capitalise, convertLooseJson, jsonLooseParse } from '$lib/strings.js';
-  import { InsertItems } from '$wails/go/app/App';
+  import { InsertItems } from '$wails/go/app/App.js';
   import { EJSON } from 'bson';
   import { createEventDispatcher, onMount } from 'svelte';
   import Form from './components/form.svelte';

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

@@ -1,8 +1,8 @@
 <script>
   import Icon from '$components/icon.svelte';
   import ObjectEditor from '$components/editors/objecteditor.svelte';
-  import { convertLooseJson } from '$lib/strings';
+  import { convertLooseJson } from '$lib/strings.js';
-  import { RemoveItems } from '$wails/go/app/App';
+  import { RemoveItems } from '$wails/go/app/App.js';
   import { onMount } from 'svelte';
 
   export let collection;

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

@@ -1,10 +1,10 @@
 <script>
   import Icon from '$components/icon.svelte';
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
-  import { atomicUpdateOperators } from '$lib/mongo';
+  import { atomicUpdateOperators } from '$lib/mongo/index.js';
-  import { deepClone } from '$lib/objects';
+  import { deepClone } from '$lib/objects.js';
-  import { convertLooseJson, jsonLooseParse } from '$lib/strings';
+  import { convertLooseJson, jsonLooseParse } from '$lib/strings.js';
-  import { UpdateItems } from '$wails/go/app/App';
+  import { UpdateItems } from '$wails/go/app/App.js';
 
   export let collection = {};
 
@@ -27,7 +27,8 @@
   });
 
   // function buildCode(form) {
-  //   let operation = '{ ' + form.parameters.filter(p => p.type).map(p => `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
+  //   let operation = '{ ' + form.parameters.filter(p => p.type).map(p =>
+  // `${p.type}: ${p.value || '{}'}`).join(', ') + ' }';
   //   if (operation === '{  }') {
   //     operation = '{}';
   //   }
@@ -38,7 +39,8 @@
   //   form.many && (options += 'multi: true');
   //   (form.upsert || form.many) && (options += ' }');
 
-  //   const code = `db.${collection.key}.update(${form.query || '{}'}, ${operation}${options});`;
+  //   const code = `db.${collection.key}.update(${form.query || '{}'},
+  // ${operation}${options});`;
   //   return code;
   // }
 
@@ -48,7 +50,13 @@
     f.parameters = f.parameters.map(param => {
       return { ...param, value: convertLooseJson(param.value) };
     });
-    updatedCount = await UpdateItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(f));
+
+    updatedCount = await UpdateItems(
+      collection.hostKey,
+      collection.dbKey,
+      collection.key,
+      JSON.stringify(f)
+    );
   }
 
   function removeParam(index) {
@@ -114,7 +122,12 @@
 
   <label class="field">
     <span class="label">Filter</span>
-    <input type="text" class="code" bind:value={form.query} use:input={{ type: 'json', autofocus: true }} placeholder={'{}'} />
+    <input
+      type="text"
+      class="code"
+      bind:value={form.query}
+      use:input={{ type: 'json', autofocus: true }}
+      placeholder={'{}'} />
   </label>
 
   <fieldset class="parameters">
@@ -132,7 +145,13 @@
               </optgroup>
             {/each}
           </select>
-          <input type="text" class="code" bind:value={param.value} placeholder={'{}'} use:input={{ type: 'json' }} />
+          <input
+            type="text"
+            class="code"
+            bind:value={param.value}
+            placeholder={'{}'}
+            use:input={{ type: 'json' }}
+          />
         </label>
 
         <button class="button" disabled={form.parameters.length >= allOperators.length} on:click={() => addParameter()} type="button">

frontend/src/organisms/connection/database/dialogs/dump.svelte

@@ -2,10 +2,10 @@
   import DirectoryChooser from '$components/editors/directorychooser.svelte';
   import Grid from '$components/grid/grid.svelte';
   import Modal from '$components/modal.svelte';
-  import { startProgress } from '$lib/progress';
+  import { startProgress } from '$lib/progress.js';
-  import hostTree from '$lib/stores/hosttree';
+  import hostTree from '$lib/stores/hosttree.js';
-  import applicationSettings from '$lib/stores/settings';
+  import applicationSettings from '$lib/stores/settings.js';
-  import { OpenConnection, OpenDatabase } from '$wails/go/app/App';
+  import { OpenConnection, OpenDatabase } from '$wails/go/app/App.js';
   import { createEventDispatcher } from 'svelte';
 
   export let info = {};

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

@@ -1,7 +1,7 @@
 <script>
   import BlankState from '$components/blankstate.svelte';
   import TabBar from '$components/tabbar.svelte';
-  import { EventsOn } from '$wails/runtime/runtime';
+  import { EventsOn } from '$wails/runtime/runtime.js';
 
   import Shell from '../shell.svelte';
   import Stats from './stats.svelte';
@@ -11,8 +11,8 @@
   export let tab = 'stats';
 
   const tabs = {
-    'stats': { icon: 'chart', title: 'Database stats', component: Stats },
+    stats: { icon: 'chart', title: 'Database stats', component: Stats },
-    'shell': { icon: 'shell', title: 'Shell', component: Shell },
+    shell: { icon: 'shell', title: 'Shell', component: Shell },
   };
 
   for (const key of Object.keys(tabs)) {

frontend/src/organisms/connection/host/dialogs/hostdetail.svelte

@@ -1,8 +1,8 @@
 <script>
   import Modal from '$components/modal.svelte';
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
-  import hostTree from '$lib/stores/hosttree';
+  import hostTree from '$lib/stores/hosttree.js';
-  import { AddHost, UpdateHost } from '$wails/go/app/App';
+  import { AddHost, UpdateHost } from '$wails/go/app/App.js';
   import { createEventDispatcher, onMount } from 'svelte';
 
   export let hostKey = '';
@@ -54,7 +54,13 @@
 
     <label class="field">
       <span class="label">Connection string</span>
-      <input type="text" placeholder="mongodb://..." bind:value={form.uri} spellcheck="false" use:input />
+      <input
+        type="text"
+        placeholder="mongodb://..."
+        bind:value={form.uri}
+        spellcheck="false"
+        use:input
+      />
     </label>
   </form>
 

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

@@ -1,7 +1,7 @@
 <script>
   import BlankState from '$components/blankstate.svelte';
   import TabBar from '$components/tabbar.svelte';
-  import { EventsOn } from '$wails/runtime/runtime';
+  import { EventsOn } from '$wails/runtime/runtime.js';
 
   import Logs from './logs.svelte';
   import Shell from '../shell.svelte';
@@ -12,10 +12,10 @@
   export let tab = 'status';
 
   const tabs = {
-    'status': { icon: 'chart', title: 'Host status', component: Status },
+    status: { icon: 'chart', title: 'Host status', component: Status },
-    'shell': { icon: 'shell', title: 'Shell', component: Shell },
+    shell: { icon: 'shell', title: 'Shell', component: Shell },
-    'logs': { icon: 'doc', title: 'Logs', component: Logs },
+    logs: { icon: 'doc', title: 'Logs', component: Logs },
-    'systemInfo': { icon: 'server', title: 'System info', component: SystemInfo },
+    systemInfo: { icon: 'server', title: 'System info', component: SystemInfo },
   };
 
   for (const key of Object.keys(tabs)) {

frontend/src/organisms/connection/host/logs.svelte

@@ -2,9 +2,9 @@
   import Grid from '$components/grid/grid.svelte';
   import Icon from '$components/icon.svelte';
   import ObjectViewer from '$components/objectviewer.svelte';
-  import input from '$lib/actions/input';
+  import input from '$lib/actions/input.js';
-  import { logComponents, logLevels } from '$lib/mongo';
+  import { logComponents, logLevels } from '$lib/mongo/index.js';
-  import { BrowserOpenURL } from '$wails/runtime/runtime';
+  import { BrowserOpenURL } from '$wails/runtime/runtime.js';
   import { onDestroy } from 'svelte';
 
   export let host;
@@ -82,7 +82,13 @@
   <div class="formrow">
     <label class="field">
       <span class="label">Auto reload (seconds)</span>
-      <input type="number" class="autoreloadinput" bind:value={autoReloadInterval} list="autoreloadintervals" use:input />
+      <input
+        type="number"
+        class="autoreloadinput"
+        bind:value={autoReloadInterval}
+        list="autoreloadintervals"
+        use:input
+      />
     </label>
 
     <label class="field">

frontend/src/organisms/connection/hosttree.svelte

@@ -1,6 +1,6 @@
 <script>
   import Grid from '$components/grid/grid.svelte';
-  import hostTree from '$lib/stores/hosttree';
+  import hostTree from '$lib/stores/hosttree.js';
 
   export let path = [];
 </script>

frontend/src/organisms/connection/index.svelte

@@ -1,8 +1,8 @@
 <script>
   import Icon from '$components/icon.svelte';
-  import hostTree from '$lib/stores/hosttree';
+  import hostTree from '$lib/stores/hosttree.js';
-  import sharedState from '$lib/stores/sharedstate';
+  import sharedState from '$lib/stores/sharedstate.js';
-  import { EventsOn } from '$wails/runtime/runtime';
+  import { EventsOn } from '$wails/runtime/runtime.js';
   import CollectionView from './collection/index.svelte';
   import DatabaseView from './database/index.svelte';
   import HostView from './host/index.svelte';

frontend/src/organisms/connection/shell.svelte

@@ -2,9 +2,9 @@
   import BlankState from '$components/blankstate.svelte';
   import CodeEditor from '$components/editors/codeeditor.svelte';
   import Icon from '$components/icon.svelte';
-  import environment from '$lib/stores/environment';
+  import environment from '$lib/stores/environment.js';
-  import { OpenShellScript, SaveShellScript } from '$wails/go/app/App';
+  import { OpenShellScript, SaveShellScript } from '$wails/go/app/App.js';
-  import { BrowserOpenURL } from '$wails/runtime/runtime';
+  import { BrowserOpenURL } from '$wails/runtime/runtime.js';
   import { javascript } from '@codemirror/lang-javascript';
   import { onDestroy, onMount } from 'svelte';
 

frontend/vite.config.js

@@ -9,10 +9,10 @@ export default defineConfig({
   plugins: [ svelte() ],
   resolve: {
     alias: {
-      '$components': currentDir + '/src/components',
+      $components: currentDir + '/src/components',
-      '$organisms': currentDir + '/src/organisms',
+      $organisms: currentDir + '/src/organisms',
-      '$wails': currentDir + '/wailsjs',
+      $wails: currentDir + '/wailsjs',
-      '$lib': currentDir + '/src/lib',
+      $lib: currentDir + '/src/lib',
     },
   },
 });