From 035fc6ac42af00a7c6dbc412a3fa79421004d85a Mon Sep 17 00:00:00 2001
From: harlan <harlan@harlanzw.com>
Date: Mon, 25 Mar 2024 14:21:49 +1100
Subject: [PATCH] chore: sync playground

---
 playground/pages/analytics/cloudflare.vue |  2 +-
 playground/pages/analytics/fathom.vue     |  2 +-
 playground/pages/index.vue                | 74 ++++++++++++-----------
 3 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/playground/pages/analytics/cloudflare.vue b/playground/pages/analytics/cloudflare.vue
index b116a389..a736e862 100644
--- a/playground/pages/analytics/cloudflare.vue
+++ b/playground/pages/analytics/cloudflare.vue
@@ -20,7 +20,7 @@ $script.load()
 // this will be triggered once the script is ready async
 // trackPageview({ url: '/fathom' })
 // we can manually wait for the script to be ready (TODO error handling)
-$script.waitForLoad().then(() => {
+$scrip.then(() => {
   // eslint-disable-next-line no-console
   console.log('cloudflare analytics is ready')
 })
diff --git a/playground/pages/analytics/fathom.vue b/playground/pages/analytics/fathom.vue
index e3c206c2..cfe72417 100644
--- a/playground/pages/analytics/fathom.vue
+++ b/playground/pages/analytics/fathom.vue
@@ -19,7 +19,7 @@ const { $script, trackPageview, trackGoal } = useFathomAnalytics({
 // this will be triggered once the script is ready async
 trackPageview({ url: '/fathom' })
 // we can manually wait for the script to be ready (TODO error handling)
-$script.waitForLoad().then(() => {
+$script.then(() => {
   // eslint-disable-next-line no-console
   console.log('fathom is ready')
 })
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 78c010f2..926e0396 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,29 +1,31 @@
 <script lang="ts" setup>
 import type { VueScriptInstance } from '@unhead/vue'
-import { type JSConfettiApi, useConfetti } from '../../third-parties/src/runtime/composables/confetti'
-import { ref, useHead } from '#imports'
+import { ref, useHead, useScript } from '#imports'
 
-const state = ref<{ trigger: 'default' | 'manual' | 'idle', assetStrategy: 'default' | 'inline' | 'proxy' }>({
+const state = ref<{ trigger: 'default' | 'manual' | 'idle', src: string }>({
   trigger: 'default',
-  assetStrategy: 'default',
+  src: 'https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js',
 })
 
 useHead({
   title: 'Home',
 })
 
-const script = ref<VueScriptInstance<JSConfettiApi> | null>(null)
-
-let doConfetti: JSConfettiApi['addConfetti'] = () => {}
+const script = ref<VueScriptInstance<any> | null>(null)
+const scriptFns = ref<Function[]>([])
 
 async function submit() {
-  const { $script, addConfetti } = useConfetti({
+  const instance = useScript(state.value.src, {
     trigger: state.value.trigger === 'default' ? undefined : state.value.trigger,
-    assetStrategy: state.value.assetStrategy === 'default' ? undefined : state.value.assetStrategy,
+    use() {
+      return new window.JSConfetti()
+    },
+  })
+  script.value = instance.$script
+  instance.$script.then((script) => {
+    console.log('got script', script)
+    scriptFns.value = Object.keys(script)
   })
-  doConfetti = addConfetti
-  // TODO: handle unwrapping of refs
-  script.value = $script
 }
 function load() {
   script.value?.load()
@@ -39,7 +41,7 @@ function reset() {
     <div class="grid grid-cols-3 gap-10">
       <div>
         <h2 class="font-bold mb-5 text-xl flex items-center">
-          Confetti
+          Custom Script
         </h2>
         <UForm
           v-if="!script"
@@ -48,23 +50,22 @@ function reset() {
           @submit="submit"
         >
           <UFormGroup
-            label="Trigger"
-            name="trigger"
+            label="Script Source"
+            name="src"
             class="mb-5"
           >
-            <USelectMenu
-              v-model="state.trigger"
-              :options="['default', 'idle', 'manual']"
+            <UInput
+              v-model="state.src"
             />
           </UFormGroup>
           <UFormGroup
-            label="Asset Strategy"
-            name="assetStrategy"
+            label="Trigger"
+            name="trigger"
             class="mb-5"
           >
             <USelectMenu
-              v-model="state.assetStrategy"
-              :options="['default', 'proxy', 'inline']"
+              v-model="state.trigger"
+              :options="['default', 'idle', 'manual']"
             />
           </UFormGroup>
 
@@ -83,20 +84,21 @@ function reset() {
           >
             Load {{ script.id }}
           </UButton>
-          <UButton
-            v-if="script.status === 'loaded'"
-            class="block my-5"
-            @click="() => doConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })"
-          >
-            addConfetti
-          </UButton>
-          <UButton
-            v-if="script.status === 'loaded'"
-            class="block my-5"
-            @click="reset"
-          >
-            Reset
-          </UButton>
+          <div v-if="script.status === 'loaded'">
+            {{ scriptFns }}
+            <UButton
+              class="block my-5"
+              @click="() => doConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })"
+            >
+              addConfetti
+            </UButton>
+            <UButton
+              class="block my-5"
+              @click="reset"
+            >
+              Reset
+            </UButton>
+          </div>
         </div>
       </div>
       <div class="mb-10">