feat: improve dom application method

lib/shadowDom.ts

@@ -1,27 +0,0 @@
-import { Plugin } from "vite";
-
-export default function shadowDom(): Plugin {
-  return {
-    name: 'merge-css-shadow-dom',
-    enforce: 'post',
-    apply: 'serve',
-    transform(src, id) {
-      if (/\.(css).*$/.test(id)) {
-        const fn =
-          "import { updateStyle, removeStyle } from '@/shadowDomUtils.ts';\n";
-        let updatedSrc = fn + src;
-        updatedSrc = updatedSrc.replace(
-          '__vite__updateStyle(',
-          'updateStyle(',
-        );
-        updatedSrc = updatedSrc.replace(
-          '__vite__removeStyle(',
-          'removeStyle(',
-        );
-        return {
-          code: updatedSrc,
-        };
-      }
-    }
-  }
-}

src/interface/components/Button.svelte

@@ -2,6 +2,6 @@
   let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
 </script>
 
-<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
+<button onclick={onClick} class='px-14 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
   {text}
 </button>

src/interface/index.ts

@@ -1,25 +1,8 @@
 import "./index.css"
-import { mount } from "svelte"
-import type { ComponentType } from "svelte"
 import Settings from "./pages/settings.svelte"
 import IconFamily from '@/resources/fonts/IconFamily.woff'
 import browser from "webextension-polyfill"
-
-export default function renderSvelte(
-  Component: ComponentType | any,
-  mountPoint: ShadowRoot | HTMLElement,
-  props: Record<string, any> = {},
-) {
-  const app = mount(Component, {
-    target: mountPoint,
-    props: {
-      standalone: true,
-      ...props,
-    },
-  })
-
-  return app
-}
+import renderSvelte from "./main"
 
 function InjectCustomIcons() {
   console.info('[BetterSEQTA+] Injecting Icons')

src/interface/main.ts

@@ -1,7 +1,6 @@
-//import styles from "./index.css?inline"
 import { mount } from "svelte"
 import type { ComponentType } from "svelte"
-import './index.css'
+import style from './index.css?inline'
 
 export default function renderSvelte(
   Component: ComponentType | any,
@@ -16,5 +15,9 @@ export default function renderSvelte(
     },
   })
 
+  const styleElement = document.createElement('style')
+  styleElement.textContent = style
+  mountPoint.appendChild(styleElement)
+
   return app
 }

src/shadowDomUtils.ts

@@ -1,59 +0,0 @@
-const sheetsMap = new Map();
-export function updateStyle(id: string, content: string) {
-  let style = sheetsMap.get(id);
-  {
-    if (style && !(style instanceof HTMLStyleElement)) {
-      removeStyle(id);
-      style = undefined;
-    }
-    if (!style) {
-      style = document.createElement('style');
-      style.setAttribute('type', 'text/css');
-      style.innerHTML = content;
-      if (window.location.href.includes('chrome-extension://')) {
-        document.head.appendChild(style);
-      } else {
-        const root = document.getElementById('ExtensionPopup');
-
-        // if no root try again in a second
-        if (!root) {
-          setTimeout(() => updateStyle(id, content), 1000);
-          return;
-        }
-        const shadowEl = root?.shadowRoot;
-        shadowEl?.appendChild(style);
-      }
-    } else {
-      style.innerHTML = content;
-    }
-  }
-  sheetsMap.set(id, style);
-}
-
-export function removeStyle(id: string) {
-  const style = sheetsMap.get(id);
-  if (style) {
-    if (window.location.href.includes('chrome-extension://')) {
-      if (style instanceof CSSStyleSheet) {
-        (document as any).adoptedStyleSheets = (
-          document as any
-        ).adoptedStyleSheets.filter((s: any) => s !== style);
-      } else {
-        document.head.removeChild(style);
-      }
-    } else {
-      const root = document.getElementById('ExtensionPopup');
-      const shadowEl: any = root?.shadowRoot;
-      if (style instanceof CSSStyleSheet) {
-        if (shadowEl) {
-          shadowEl.adoptedStyleSheets = shadowEl.adoptedStyleSheets.filter(
-            (s: any) => s !== style,
-          );
-        }
-      } else if (shadowEl) {
-        shadowEl.removeChild(style);
-      }
-    }
-    sheetsMap.delete(id);
-  }
-}

vite.config.ts

@@ -18,7 +18,7 @@ import { firefox } from './src/manifests/firefox';
 import { opera } from './src/manifests/opera';
 import { safari } from './src/manifests/safari';
 import { crx } from '@crxjs/vite-plugin';
-import shadowDom from './lib/shadowDom';
+
 import touchGlobalCSSPlugin from './lib/touchGlobalCSS';
 const targets: BuildTarget[] = [
   chrome, brave, edge, firefox, opera, safari
@@ -40,7 +40,6 @@ export default defineConfig(({ command }) => ({
       browser: mode.toLowerCase() === "firefox" ? "firefox" : "chrome"
     }),
     updateManifestPlugin(),
-    shadowDom(),
     touchGlobalCSSPlugin(),
     ...(command === 'build' ? [ClosePlugin()] : [])
   ],