refactor(component): abstract component selection from svelteRenderer function

src/SEQTA.ts

@@ -35,7 +35,8 @@ import coursesicon from '@/seqta/icons/coursesIcon'
 import iframeCSS from '@/css/iframe.scss?raw'
 import injectedCSS from '@/css/injected.scss?inline'
 import documentLoadCSS from '@/css/documentload.scss?inline'
-import initSvelteInterface from './svelte-interface/main'
+import renderSvelte from '@/svelte-interface/main'
+import Settings from '@/svelte-interface/pages/settings.svelte'
 
 let SettingsClicked = false
 export let MenuOptionsOpen = false
@@ -969,20 +970,10 @@ export function addExtensionSettings() {
   const extensionContainer = document.querySelector('#container') as HTMLDivElement
   if (extensionContainer) extensionContainer.appendChild(extensionPopup)
 
-  /* const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
-  extensionIframe.src = `${browser.runtime.getURL('svelte-interface/index.html')}#settings/embedded`
-  extensionIframe.id = 'ExtensionIframe'
-  extensionIframe.setAttribute('allowTransparency', 'true')
-  extensionIframe.setAttribute('excludeDarkCheck', 'true')
-  extensionIframe.style.width = '384px'
-  extensionIframe.style.height = '100%'
-  extensionIframe.style.border = 'none'
-  extensionPopup.appendChild(extensionIframe) */
-
   // create shadow dom and render svelte app
   try {
     const shadow = extensionPopup.attachShadow({ mode: 'open' });
-    initSvelteInterface(shadow);
+    renderSvelte(Settings, shadow);
   } catch (err) {
     console.error(err)
   }

src/svelte-interface/components/themes/BackgroundSelector.svelte

@@ -126,6 +126,10 @@
     selectedBackground
   });
 
+  $effect(() => {
+    console.error(error);
+  });
+
   onMount(() => {
     loadBackgrounds();
     

src/svelte-interface/main.ts

@@ -1,27 +1,24 @@
-// @ts-expect-error - Svelte Hash Router is not typed (yet)
-import { routes } from 'svelte-hash-router'
-//import App from './+layout.svelte';
-import Settings from './pages/settings.svelte';
 import styles from './index.css?inline';
 import { mount } from 'svelte';
+import type { ComponentType } from 'svelte';
 
-export default function initSvelteInterface(mountPoint: ShadowRoot | HTMLElement) {
-  /* routes.set({
-    'settings': Settings,
-    '*': Settings
-  }) */
-  
-  const app = mount(Settings, {
+export default function renderSvelte(
+  Component: ComponentType,
+  mountPoint: ShadowRoot | HTMLElement,
+  props: Record<string, any> = {}
+) {  
+  const app = mount(Component, {
     target: mountPoint,
     props: {
-      standalone: false
+      standalone: false,
+      ...props
     }
   });
 
-  const style2 = document.createElement("style");
-  style2.setAttribute("type", "text/css");
-  style2.innerHTML = styles;
-  mountPoint.appendChild(style2);
+  const style = document.createElement("style");
+  style.setAttribute("type", "text/css");
+  style.innerHTML = styles;
+  mountPoint.appendChild(style);
   
   return app;
 }

src/svelte-interface/pages/settings.svelte

@@ -13,7 +13,7 @@
     browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' });
   };
     
-  let { standalone } = $props<{ standalone: boolean }>();
+  let { standalone = false } = $props<{ standalone?: boolean }>();
 
   onMount(() => {
     if (!standalone) return;