fix(svelte,vue): apply WebGL fallback re-initialization fix to all remaining components

src/lib/Asciify/Asciify.svelte

@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createAsciify(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createAsciify(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();

src/lib/Asciify/Asciify.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createAsciify,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: AsciifyInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createAsciify(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createAsciify(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createAsciify(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

src/lib/Bend/Bend.svelte

@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createBend(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createBend(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();

src/lib/Bend/Bend.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createBend,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: BendInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createBend(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createBend(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createBend(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

src/lib/Blaze/Blaze.svelte

@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createBlaze(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createBlaze(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();

src/lib/Blaze/Blaze.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createBlaze,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: BlazeInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createBlaze(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createBlaze(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createBlaze(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

src/lib/Bubble/Bubble.svelte

@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createBubble(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createBubble(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();

src/lib/Bubble/Bubble.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createBubble,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: BubbleInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createBubble(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createBubble(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createBubble(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });