fix: script not works in page

Author: imzlh

index.html

@@ -19,7 +19,6 @@
                 font-family: Arial, sans-serif;
             }
 
-            /* SVG版本 - 更精确的Android风格 */
             .loader {
                 width: 60px;
                 height: 60px;

src/page/page.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-    import { ref, watch } from 'vue';
+    import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import { get_file } from '../main';
     import { config } from '../../package.json';
@@ -22,10 +22,21 @@
         else
             $content.value = content;
     }, { immediate: true });
+
+    const page = shallowRef<HTMLDivElement>();
+    onMounted(() => {
+        // @ts-ignore
+        globalThis.pdocument = page.value?.shadowRoot;
+    })
+
+    onUnmounted(() => {
+        // @ts-ignore
+        delete globalThis.pdocument;
+    })
 </script>
 
 <template>
-    <div class="page-content" v-render="$content" />
+    <div class="page-content" ref="page" v-render="$content" />
 </template>
 
 <style lang="scss">

src/utils/vue.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, type Directive } from "vue";
+import { computed, nextTick, type ComputedRef, type Directive } from "vue";
 
 export function debounceComputed<T>(func: () => T, wait = 1000): ComputedRef<T> {
     let lastCacheTime = Date.now();
@@ -19,14 +19,56 @@ export function debounceComputed<T>(func: () => T, wait = 1000): ComputedRef<T>
     });
 }
 
+async function execScript(scr: HTMLScriptElement, shadowRoot: ShadowRoot){
+    let text = scr.textContent;
+    if (scr.src) {
+        const fe = await fetch(scr.src);
+        if(!fe.ok) throw new Error('Failed to fetch script');
+        text = await fe.text();
+    }
+    const script = document.createElement('script');
+    script.textContent = text;
+    shadowRoot.appendChild(script);
+}
+
+function handleShadow(el: HTMLElement) {
+    requestAnimationFrame(async () => {
+        const scrs = el.shadowRoot?.querySelectorAll('script');
+        // @ts-ignore store
+        el.hasScript = !!scrs?.length;
+
+        // render script
+        const defer = [] as HTMLScriptElement[];
+        for (const scr of scrs || []) {
+            // defer: exec script after dom render
+            if (scr.defer) defer.push(scr);
+
+            // async: create async corutine to exec script
+            if (scr.async) execScript(scr, el.shadowRoot!);
+
+            // exec script immediately
+            await execScript(scr, el.shadowRoot!);
+        }
+
+        // exec deferred script
+        for (const scr of defer) execScript(scr, el.shadowRoot!);
+    });
+}
+
 export const vRender: Directive<HTMLElement, string> = {
     mounted(el, binding){
         el.shadowRoot || el.attachShadow({ mode: 'open' });
         el.shadowRoot!.innerHTML = binding.value;
+
+        handleShadow(el);
     },
 
     updated(el, binding){
+        // @ts-ignore store
+        if(el.hasScript) location.reload();   // prevent JS leak
         el.shadowRoot!.innerHTML = binding.value;
+
+        handleShadow(el);
     }
 }