From bacd3dedba4ec5b8e6d5816330a9e3a2f10d9d92 Mon Sep 17 00:00:00 2001 From: harlan Date: Mon, 16 Sep 2024 04:41:59 +1000 Subject: [PATCH] fix: prefer ref triggers or promise booleans Fixes #265 --- .../docs/1.guides/1.registry-scripts.md | 6 +- .../docs/1.guides/1.script-triggers.md | 24 +- package.json | 21 +- .../pages/third-parties/youtube/multiple.vue | 3 + .../third-parties/youtube/nuxt-scripts.vue | 3 + pnpm-lock.yaml | 225 ++++++++++++------ src/runtime/components/ScriptVimeoPlayer.vue | 6 +- .../components/ScriptYouTubePlayer.vue | 9 +- .../composables/useScriptTriggerElement.ts | 29 +-- 9 files changed, 214 insertions(+), 112 deletions(-) diff --git a/docs/content/docs/1.guides/1.registry-scripts.md b/docs/content/docs/1.guides/1.registry-scripts.md index bd9fb093..92f3f3dc 100644 --- a/docs/content/docs/1.guides/1.registry-scripts.md +++ b/docs/content/docs/1.guides/1.registry-scripts.md @@ -155,6 +155,10 @@ Registry scripts doesn't stop you from making use of the core `useScript` featur - `scriptInput` - Additional input to pass to the script. Same as [useScript Input](/docs/api/use-script#scriptinput). ```ts +import { useTimeout } from '@vueuse/core' +import { useScriptCloudflareWebAnalytics } from '#imports' + +const { ready } = useTimeout(5000) useScriptCloudflareWebAnalytics({ token: '123', // HTML attributes to pass to the script element @@ -163,7 +167,7 @@ useScriptCloudflareWebAnalytics({ }, // useScript options used for advanced features scriptOptions: { - trigger: new Promise(resolve => setTimeout(resolve, 3000)), + trigger: ready, bundle: true, }, }) diff --git a/docs/content/docs/1.guides/1.script-triggers.md b/docs/content/docs/1.guides/1.script-triggers.md index 9655c4a7..07b785bf 100644 --- a/docs/content/docs/1.guides/1.script-triggers.md +++ b/docs/content/docs/1.guides/1.script-triggers.md @@ -7,20 +7,25 @@ Nuxt Scripts provides several ways to trigger the loading of scripts. ::code-group ```ts [useScript] +import { useTimeout } from '@vueuse/core' + +const { ready } = useTimeout(3000) useScript({ src: 'https://example.com/script.js', }, { // load however you like! - trigger: new Promise(resolve => setTimeout(resolve, 3000)) + trigger: ready, // refs supported }) ``` ```ts [Registry Script] +import { useTimeout } from '@vueuse/core' + +const { ready } = useTimeout(3000) useScriptMetaPixel({ id: '1234567890', scriptOptions: { - // load however you like! - trigger: new Promise(resolve => setTimeout(resolve, 3000)) + trigger: ready } }) ``` @@ -87,3 +92,16 @@ const myScript = useScript('/script.js', { trigger: new Promise(resolve => setTimeout(resolve, 3000)) }) ``` + +## Ref + +You can use a ref to trigger the loading of a script. This is useful for any other custom trigger you might want to use. + +```ts +const myRef = ref(false) +const myScript = useScript('/script.js', { + trigger: myRef +}) +// ... +myRef.value = true +``` diff --git a/package.json b/package.json index 9d57ea1b..28dd2f3f 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "@types/stripe-v3": "^3.1.33", "@types/vimeo__player": "^2.18.3", "@types/youtube": "^0.1.0", - "@unhead/vue": "1.11.1", + "@unhead/vue": "1.11.5", "@vueuse/core": "^11.0.3", "consola": "^3.2.3", "defu": "^6.1.4", @@ -84,7 +84,7 @@ "pathe": "^1.1.2", "pkg-types": "^1.2.0", "semver": "^7.6.3", - "shiki": "1.16.2", + "shiki": "1.17.6", "sirv": "^2.0.4", "std-env": "^3.7.0", "third-party-capital": "2.3.0", @@ -98,10 +98,10 @@ "@nuxt/devtools-ui-kit": "^1.4.2", "@nuxt/eslint-config": "^0.5.7", "@nuxt/module-builder": "^0.8.4", - "@nuxt/test-utils": "3.14.1", + "@nuxt/test-utils": "3.14.2", "@types/semver": "^7.5.8", "@typescript-eslint/typescript-estree": "^8.5.0", - "@unhead/schema": "1.11.1", + "@unhead/schema": "1.11.5", "acorn-loose": "^8.4.0", "bumpp": "^9.5.2", "changelogen": "^0.5.5", @@ -119,15 +119,14 @@ "resolutions": { "@nuxt/schema": "3.13.0", "@nuxt/scripts": "workspace:*", - "@unhead/dom": "1.11.1", - "@unhead/schema": "1.11.1", - "@unhead/shared": "1.11.1", - "@unhead/ssr": "1.11.1", - "@unhead/vue": "1.11.1", + "@unhead/dom": "1.11.5", + "@unhead/schema": "1.11.5", + "@unhead/shared": "1.11.5", + "@unhead/ssr": "1.11.5", + "@unhead/vue": "1.11.5", "nuxt": "^3.13.1", "nuxt-scripts-devtools": "workspace:*", - "shiki": "1.10.3", - "unhead": "1.11.1", + "unhead": "1.11.5", "vue": "^3.5.5", "vue-router": "^4.4.5" } diff --git a/playground/pages/third-parties/youtube/multiple.vue b/playground/pages/third-parties/youtube/multiple.vue index 9a5dc75f..01965b67 100644 --- a/playground/pages/third-parties/youtube/multiple.vue +++ b/playground/pages/third-parties/youtube/multiple.vue @@ -10,6 +10,9 @@ function changeVideo() {