From 54e7b587949009d407bdef1f2683180eafc6dbb6 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Fri, 1 Nov 2024 11:35:24 +1100 Subject: [PATCH] feat: make svelte interface work in popup --- src/svelte-interface/index.html | 3 +- src/svelte-interface/index.ts | 36 ++-- src/svelte-interface/pages/settings.svelte | 3 +- .../pages/settings/shortcuts.svelte | 184 ++++++++++-------- test.sh | 0 5 files changed, 132 insertions(+), 94 deletions(-) delete mode 100644 test.sh diff --git a/src/svelte-interface/index.html b/src/svelte-interface/index.html index 93137db0..d29c418e 100644 --- a/src/svelte-interface/index.html +++ b/src/svelte-interface/index.html @@ -6,7 +6,8 @@ BetterSEQTA+ Settings - +
asdasds - I (Crazypersonalph) agree with this statement. + \ No newline at end of file diff --git a/src/svelte-interface/index.ts b/src/svelte-interface/index.ts index d261d295..3439c299 100644 --- a/src/svelte-interface/index.ts +++ b/src/svelte-interface/index.ts @@ -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" +export default function renderSvelte( + Component: ComponentType | any, + mountPoint: ShadowRoot | HTMLElement, + props: Record = {}, +) { + const app = mount(Component, { + target: mountPoint, + props: { + standalone: true, + ...props, + }, + }) -initializeSettingsState(); + return app +} -const app = mount(Settings, { - target: document.body, - props: { - standalone: true - } -}); +const mountPoint = document.getElementById('app') +if (!mountPoint) { + console.error('Mount point #app not found') + throw new Error('Mount point #app not found') +} -console.log(app); +renderSvelte(Settings, mountPoint) \ No newline at end of file diff --git a/src/svelte-interface/pages/settings.svelte b/src/svelte-interface/pages/settings.svelte index 23b2e03d..36ed417d 100644 --- a/src/svelte-interface/pages/settings.svelte +++ b/src/svelte-interface/pages/settings.svelte @@ -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; diff --git a/src/svelte-interface/pages/settings/shortcuts.svelte b/src/svelte-interface/pages/settings/shortcuts.svelte index b3a828e0..c89ceff9 100644 --- a/src/svelte-interface/pages/settings/shortcuts.svelte +++ b/src/svelte-interface/pages/settings/shortcuts.svelte @@ -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((resolve) => { + const checkState = () => { + if ($settingsState?.shortcuts) { + isLoaded = true; + resolve(); + } else { + setTimeout(checkState, 100); + } + }; + checkState(); + }); + }); const switchChange = (index: number) => { const updatedShortcuts = [...settingsState.shortcuts]; @@ -59,89 +77,95 @@ {/snippet}
-
- - {#if isFormVisible} -
- - - - - - -
- {/if} - - - - - -
+ - {#each Object.entries($settingsState.shortcuts) as shortcut} - {@render Shortcuts(shortcut)} - {/each} - - - {#each $settingsState.customshortcuts as shortcut, index} -
- {shortcut.name} - + + +
- {/each} + + {#each Object.entries($settingsState.shortcuts) as shortcut} + {@render Shortcuts(shortcut)} + {/each} + + + {#each $settingsState.customshortcuts as shortcut, index} +
+ {shortcut.name} + +
+ {/each} + {:else} +
+ Loading shortcuts... +
+ {/if}
\ No newline at end of file diff --git a/test.sh b/test.sh deleted file mode 100644 index e69de29b..00000000