Lint code

2025-07-21 23:08:02 +00:00 · 2023-08-07 18:21:45 +02:00
parent 7cebafeff3
commit 4370672d60
51 changed files with 380 additions and 178 deletions
--- a/frontend/src/organisms/connection/collection/aggregate.svelte
+++ b/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 { Aggregate } from '$wails/go/app/App';
-  import { BrowserOpenURL } from '$wails/runtime/runtime';
+  import { jsonLooseParse, looseJsonIsValid } from '$lib/strings.js';
+  import { Aggregate } from '$wails/go/app/App.js';
+  import { BrowserOpenURL } from '$wails/runtime/runtime.js';
  import { onMount } from 'svelte';

  export let collection;
--- a/frontend/src/organisms/connection/collection/components/form.svelte
+++ b/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 { resolveKeypath, setValue } from '$lib/objects';
+  import { inputTypes } from '$lib/mongo/index.js';
+  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}
--- a/frontend/src/organisms/connection/collection/dialogs/duplicate.svelte
+++ b/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 hostTree from '$lib/stores/hosttree';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import input from '$lib/actions/input.js';
+  import hostTree from '$lib/stores/hosttree.js';
+  import { createEventDispatcher } from 'svelte';

  export let host = {};
  export let dbKey = '';
--- a/frontend/src/organisms/connection/collection/dialogs/export.svelte
+++ b/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;
--- a/frontend/src/organisms/connection/collection/dialogs/indexdetail.svelte
+++ b/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>
--- a/frontend/src/organisms/connection/collection/dialogs/querychooser.svelte
+++ b/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 hostTree from '$lib/stores/hosttree';
-  import queries from '$lib/stores/queries';
+  import input from '$lib/actions/input.js';
+  import hostTree from '$lib/stores/hosttree.js';
+  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}

--- a/frontend/src/organisms/connection/collection/dialogs/viewconfig.svelte
+++ b/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 { randomString } from '$lib/math';
-  import views from '$lib/stores/views';
+  import input from '$lib/actions/input.js';
+  import { randomString } from '$lib/math.js';
+  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}
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/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 dialogs from '$lib/dialogs';
-  import { deepClone } from '$lib/objects';
-  import { startProgress } from '$lib/progress';
-  import applicationSettings from '$lib/stores/settings';
-  import views from '$lib/stores/views';
-  import { convertLooseJson, stringCouldBeID } from '$lib/strings';
-  import { CountItems, FindItems, RemoveItemById, UpdateFoundDocument } from '$wails/go/app/App';
+  import input from '$lib/actions/input.js';
+  import dialogs from '$lib/dialogs.js';
+  import { deepClone } from '$lib/objects.js';
+  import { startProgress } from '$lib/progress.js';
+  import applicationSettings from '$lib/stores/settings.js';
+  import views from '$lib/stores/views.js';
+  import { convertLooseJson, stringCouldBeID } from '$lib/strings.js';
+  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({
-      fields: convertLooseJson(form.fields || defaults.fields),
-      limit: form.limit ?? defaults.limit,
-      query: convertLooseJson(form.query) || defaults.query,
-      skip: form.skip ?? defaults.skip,
-      sort: convertLooseJson(form.sort) || defaults.sort,
-    }));
+    const newResult = await FindItems(
+      collection.hostKey,
+      collection.dbKey,
+      collection.key, JSON.stringify({
+        fields: convertLooseJson(form.fields || defaults.fields),
+        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">
--- a/frontend/src/organisms/connection/collection/index.svelte
+++ b/frontend/src/organisms/connection/collection/index.svelte
@ -18,14 +18,14 @@
  export let tab = 'find';

  const tabs = {
-    'stats': { icon: 'chart', title: 'Stats', component: Stats },
-    'find': { icon: 'db', title: 'Find', component: Find },
-    'insert': { icon: '+', title: 'Insert', component: Insert },
-    'update': { icon: 'edit', title: 'Update', component: Update },
-    'remove': { icon: 'trash', title: 'Remove', component: Remove },
-    'indexes': { icon: 'list', title: 'Indexes', component: Indexes },
-    'aggregate': { icon: 're', title: 'Aggregate', component: Aggregate },
-    'shell': { icon: 'shell', title: 'Shell', component: Shell },
+    stats: { icon: 'chart', title: 'Stats', component: Stats },
+    find: { icon: 'db', title: 'Find', component: Find },
+    insert: { icon: '+', title: 'Insert', component: Insert },
+    update: { icon: 'edit', title: 'Update', component: Update },
+    remove: { icon: 'trash', title: 'Remove', component: Remove },
+    indexes: { icon: 'list', title: 'Indexes', component: Indexes },
+    aggregate: { icon: 're', title: 'Aggregate', component: Aggregate },
+    shell: { icon: 'shell', title: 'Shell', component: Shell },
  };

  for (const key of Object.keys(tabs)) {
--- a/frontend/src/organisms/connection/collection/indexes.svelte
+++ b/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>
--- a/frontend/src/organisms/connection/collection/insert.svelte
+++ b/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 { inputTypes } from '$lib/mongo';
-  import views from '$lib/stores/views';
-  import { capitalise, convertLooseJson, jsonLooseParse } from '$lib/strings';
-  import { InsertItems } from '$wails/go/app/App';
+  import { randomString } from '$lib/math.js';
+  import { inputTypes } from '$lib/mongo/index.js';
+  import views from '$lib/stores/views.js';
+  import { capitalise, convertLooseJson, jsonLooseParse } from '$lib/strings.js';
+  import { InsertItems } from '$wails/go/app/App.js';
  import { EJSON } from 'bson';
  import { createEventDispatcher, onMount } from 'svelte';
  import Form from './components/form.svelte';
--- a/frontend/src/organisms/connection/collection/remove.svelte
+++ b/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 { RemoveItems } from '$wails/go/app/App';
+  import { convertLooseJson } from '$lib/strings.js';
+  import { RemoveItems } from '$wails/go/app/App.js';
  import { onMount } from 'svelte';

  export let collection;
--- a/frontend/src/organisms/connection/collection/update.svelte
+++ b/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 { atomicUpdateOperators } from '$lib/mongo';
-  import { deepClone } from '$lib/objects';
-  import { convertLooseJson, jsonLooseParse } from '$lib/strings';
-  import { UpdateItems } from '$wails/go/app/App';
+  import input from '$lib/actions/input.js';
+  import { atomicUpdateOperators } from '$lib/mongo/index.js';
+  import { deepClone } from '$lib/objects.js';
+  import { convertLooseJson, jsonLooseParse } from '$lib/strings.js';
+  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">
--- a/frontend/src/organisms/connection/database/dialogs/dump.svelte
+++ b/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 hostTree from '$lib/stores/hosttree';
-  import applicationSettings from '$lib/stores/settings';
-  import { OpenConnection, OpenDatabase } from '$wails/go/app/App';
+  import { startProgress } from '$lib/progress.js';
+  import hostTree from '$lib/stores/hosttree.js';
+  import applicationSettings from '$lib/stores/settings.js';
+  import { OpenConnection, OpenDatabase } from '$wails/go/app/App.js';
  import { createEventDispatcher } from 'svelte';

  export let info = {};
--- a/frontend/src/organisms/connection/database/index.svelte
+++ b/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 },
-    'shell': { icon: 'shell', title: 'Shell', component: Shell },
+    stats: { icon: 'chart', title: 'Database stats', component: Stats },
+    shell: { icon: 'shell', title: 'Shell', component: Shell },
  };

  for (const key of Object.keys(tabs)) {
--- a/frontend/src/organisms/connection/host/dialogs/hostdetail.svelte
+++ b/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 hostTree from '$lib/stores/hosttree';
-  import { AddHost, UpdateHost } from '$wails/go/app/App';
+  import input from '$lib/actions/input.js';
+  import hostTree from '$lib/stores/hosttree.js';
+  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>

--- a/frontend/src/organisms/connection/host/index.svelte
+++ b/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 },
-    'shell': { icon: 'shell', title: 'Shell', component: Shell },
-    'logs': { icon: 'doc', title: 'Logs', component: Logs },
-    'systemInfo': { icon: 'server', title: 'System info', component: SystemInfo },
+    status: { icon: 'chart', title: 'Host status', component: Status },
+    shell: { icon: 'shell', title: 'Shell', component: Shell },
+    logs: { icon: 'doc', title: 'Logs', component: Logs },
+    systemInfo: { icon: 'server', title: 'System info', component: SystemInfo },
  };

  for (const key of Object.keys(tabs)) {
--- a/frontend/src/organisms/connection/host/logs.svelte
+++ b/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 { logComponents, logLevels } from '$lib/mongo';
-  import { BrowserOpenURL } from '$wails/runtime/runtime';
+  import input from '$lib/actions/input.js';
+  import { logComponents, logLevels } from '$lib/mongo/index.js';
+  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">
--- a/frontend/src/organisms/connection/hosttree.svelte
+++ b/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>
--- a/frontend/src/organisms/connection/index.svelte
+++ b/frontend/src/organisms/connection/index.svelte
@ -1,8 +1,8 @@
 <script>
  import Icon from '$components/icon.svelte';
-  import hostTree from '$lib/stores/hosttree';
-  import sharedState from '$lib/stores/sharedstate';
-  import { EventsOn } from '$wails/runtime/runtime';
+  import hostTree from '$lib/stores/hosttree.js';
+  import sharedState from '$lib/stores/sharedstate.js';
+  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';
--- a/frontend/src/organisms/connection/shell.svelte
+++ b/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 { OpenShellScript, SaveShellScript } from '$wails/go/app/App';
-  import { BrowserOpenURL } from '$wails/runtime/runtime';
+  import environment from '$lib/stores/environment.js';
+  import { OpenShellScript, SaveShellScript } from '$wails/go/app/App.js';
+  import { BrowserOpenURL } from '$wails/runtime/runtime.js';
  import { javascript } from '@codemirror/lang-javascript';
  import { onDestroy, onMount } from 'svelte';