feat: make svelte interface work in popup

2026-06-06 11:44:40 +00:00 · 2024-11-01 11:35:24 +11:00
parent 3d276e3b22
commit 54e7b58794
5 changed files with 132 additions and 94 deletions
@@ -6,7 +6,8 @@
    <title>BetterSEQTA+ Settings</title>
  </head>
  <body>
-    <script type="module" src="./index.ts"></script>
+    <div id="app"></div>
    asdasds - I (Crazypersonalph) agree with this statement.
+    <script type="module" src="./index.ts"></script>
  </body>
 </html>
@@ -1,16 +1,28 @@
-import { mount } from 'svelte';
-import Settings from './pages/settings.svelte';
-import { initializeSettingsState } from '@/seqta/utils/listeners/SettingsState';
-import './index.css';
+import "./index.css"
+import { mount } from "svelte"
+import type { ComponentType } from "svelte"
+import Settings from "./pages/settings.svelte"

-
-initializeSettingsState();
-
-const app = mount(Settings, {
-  target: document.body,
+export default function renderSvelte(
+  Component: ComponentType | any,
+  mountPoint: ShadowRoot | HTMLElement,
+  props: Record<string, any> = {},
+) {
+  const app = mount(Component, {
+    target: mountPoint,
    props: {
-    standalone: true
-  }
-});
+      standalone: true,
+      ...props,
+    },
+  })

-console.log(app);
+  return app
+}
+
+const mountPoint = document.getElementById('app')
+if (!mountPoint) {
+  console.error('Mount point #app not found')
+  throw new Error('Mount point #app not found')
+}
+
+renderSvelte(Settings, mountPoint)
@@ -7,7 +7,7 @@

  import { createStandalone } from '../utils/standalone.svelte';
  import { onMount } from 'svelte'
-  import { settingsState } from '@/seqta/utils/listeners/SettingsState'
+  import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'

  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
  import ColourPicker from '../components/ColourPicker.svelte'
@@ -55,6 +55,7 @@
    });
    
    if (!standalone) return;
+    initializeSettingsState();
    // @ts-ignore
    let globalStandalone = createStandalone();
    globalStandalone = standalone;
@@ -2,6 +2,24 @@
  import MotionDiv from '@/svelte-interface/components/MotionDiv.svelte';
  import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
  import Switch from "@/svelte-interface/components/Switch.svelte"
+  import { onMount } from 'svelte';
+
+  let isLoaded = $state(false);
+
+  onMount(async () => {
+    // Wait for settingsState to be initialized
+    await new Promise<void>((resolve) => {
+      const checkState = () => {
+        if ($settingsState?.shortcuts) {
+          isLoaded = true;
+          resolve();
+        } else {
+          setTimeout(checkState, 100);
+        }
+      };
+      checkState();
+    });
+  });

  const switchChange = (index: number) => {    
    const updatedShortcuts = [...settingsState.shortcuts];
@@ -59,6 +77,7 @@
 {/snippet}

 <div class="flex flex-col pt-4 divide-y divide-zinc-100 dark:divide-zinc-700">
+  {#if isLoaded}
    <div>
      <MotionDiv
        initial={{ opacity: 0, height: 0 }}
@@ -144,4 +163,9 @@
        </button>
      </div>
    {/each}
+  {:else}
+    <div class="p-4 text-center">
+      Loading shortcuts...
+    </div>
+  {/if}
 </div>