progress commit

nuxt · Apr 19, 2024 · 4376416 · 4376416
1 parent 97a5287
commit 4376416
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "shiki": "^1.3.0",
     "sirv": "^2.0.4",
     "std-env": "^3.7.0",
+    "third-party-capital": "^1.0.28",
     "ufo": "^1.5.3",
     "unimport": "^3.7.1",
     "unplugin": "^1.10.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/runtime/components/GoogleMaps.ts b/src/runtime/components/GoogleMaps.ts
@@ -2,7 +2,7 @@ import type { PropType, Ref } from 'vue'
 import { defineComponent, h, ref, watch } from 'vue'
 import type google from 'google.maps'
 import { formatDimensionValue } from '../util'
-import { useScriptGoogleMaps } from '../composables/googleMaps'
+import { useScriptGoogleMaps } from '#imports'
 
 interface LatLng {
   lat: number

diff --git a/src/runtime/components/YoutubeEmbed.ts b/src/runtime/components/YoutubeEmbed.ts
diff --git a/src/runtime/components/YoutubeEmbed.vue b/src/runtime/components/YoutubeEmbed.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useScript } from '@unhead/vue'
+import { ref, watch } from 'vue'
+import { useHead } from '#imports'
+
+defineProps({
+  videoid: { type: String, required: true },
+  playLabel: { type: String, required: true },
+  width: { type: String, required: false, default: '100%' },
+  height: { type: String, required: false, default: '100%' },
+  params: { type: String, required: false, default: undefined },
+})
+
+useScript({
+  src: 'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.js',
+}, {
+  beforeInit: () => useHead({
+    link: [
+      { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.css' },
+    ],
+  }),
+})
+
+// expose function to access the video API
+const video = ref<LiteYTEmbed | null>(null)
+watch(() => video.value, (value) => {
+  if (value)
+    value.getYTPlayer()
+})
+// TODO expose API
+</script>
+
+<template>
+  <lite-youtube ref="video" :videoid="videoid" :style="`background-image: url('https://i.ytimg.com/vi/${videoid}/hqdefault.jpg')`">
+    <slot>
+      <a :href="`https://youtube.com/watch?v=${videoid}`" class="lty-playbtn" title="Play Video">
+        <span class="lyt-visually-hidden">Play Video</span>
+      </a>
+    </slot>
+  </lite-youtube>
+</template>
diff --git a/src/runtime/registry/google-analytics.ts b/src/runtime/registry/google-analytics.ts
@@ -1,7 +1,8 @@
 import type { GoogleAnalyticsApi } from 'third-party-capital'
 import { object, string } from 'valibot'
 import type { NuxtUseScriptOptions, ScriptDynamicSrcInput } from '#nuxt-scripts'
-import { useScript, validateScriptInputSchema } from '#imports'
+import { useScript } from '#imports'
+import { registryScriptOptions } from '~/src/runtime/utils'
 
 const GoogleAnalyticsOptions = object({
   id: string(),
@@ -18,25 +19,33 @@ declare global {
  *
  * A 3P wrapper for Google Analytics that takes an options input to feed into third-party-capital({@link https://github.com/GoogleChromeLabs/third-party-capital}), which returns instructions for nuxt-scripts.
  */
-export function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(options?: GoogleAnalyticsInput, _scriptOptions?: Omit<NuxtUseScriptOptions<T>, 'beforeInit' | 'use'>) {
-  const scriptOptions: NuxtUseScriptOptions<T> = _scriptOptions || {}
-  scriptOptions.beforeInit = () => {
-    import.meta.dev && validateScriptInputSchema(GoogleAnalyticsOptions, options)
-    if (import.meta.client) {
-      window.dataLayer = window.dataLayer || []
-      window.gtag = function gtag(...p) {
-        window.dataLayer.push(p)
-      }
-      window.gtag('js', new Date())
-      window.gtag('config', options.id)
-    }
-  }
+export function useScriptGoogleAnalytics<T extends GoogleAnalyticsApi>(options?: GoogleAnalyticsInput, scriptOptions?: Omit<NuxtUseScriptOptions<T>, 'beforeInit' | 'use'>) {
   // Note: inputs.useScriptInput is not usable, needs to be normalized
   return useScript<GoogleAnalyticsApi>({
     key: 'googleAnalytics',
     src: 'https://www.googletagmanager.com/gtag/js',
   }, {
-    ...scriptOptions,
+    ...registryScriptOptions({
+      scriptOptions,
+      schema: GoogleAnalyticsOptions,
+      options,
+      clientInit: import.meta.server
+        ? undefined
+        : () => {
+            window.dataLayer = window.dataLayer || []
+            window.gtag = function gtag(...p) {
+              window.dataLayer.push(p)
+            }
+            window.gtag('js', new Date())
+            window.gtag('config', options.id)
+          },
+    }),
+    // allow dataLayer to be accessed on the server
+    stub: import.meta.client
+      ? undefined
+      : ({ fn }) => {
+          return fn === 'dataLayer' ? [] : undefined
+        },
     use: () => ({ dataLayer: window.dataLayer, gtag: window.gtag }),
   })
 }
diff --git a/src/runtime/registry/google-maps.ts b/src/runtime/registry/google-maps.ts
@@ -3,7 +3,8 @@ import { array, object, optional, string } from 'valibot'
 import type google from 'google.maps'
 import { withQuery } from 'ufo'
 import type { NuxtUseScriptOptions, ScriptDynamicSrcInput } from '#nuxt-scripts'
-import { useScript, validateScriptInputSchema } from '#imports'
+import { useScript } from '#imports'
+import { registryScriptOptions } from '~/src/runtime/utils'
 
 export const GoogleMapsOptions = object({
   apiKey: string(),
@@ -25,11 +26,7 @@ declare global {
  *
  * A 3P wrapper to load the Google Maps JavaScript api.
  */
-export function useScriptGoogleMaps<T extends GoogleMapsApi>(options?: Input<typeof GoogleMapsOptions>, _scriptOptions?: Omit<NuxtUseScriptOptions<T>, 'beforeInit' | 'use'>) {
-  const scriptOptions: NuxtUseScriptOptions<T> = _scriptOptions || {}
-  scriptOptions.beforeInit = () => {
-    import.meta.dev && validateScriptInputSchema(GoogleMapsOptions, options)
-  }
+export function useScriptGoogleMaps<T extends GoogleMapsApi>(options?: Input<typeof GoogleMapsOptions>, scriptOptions?: Omit<NuxtUseScriptOptions<T>, 'beforeInit' | 'use'>) {
   const libraries = options?.libraries || ['places']
   return useScript<GoogleMapsApi>({
     key: 'googleMaps',
@@ -38,7 +35,11 @@ export function useScriptGoogleMaps<T extends GoogleMapsApi>(options?: Input<typ
       key: options?.apiKey,
     }),
   }, {
-    ...scriptOptions,
+    ...registryScriptOptions({
+      scriptOptions,
+      schema: GoogleMapsOptions,
+      options,
+    }),
     use: () => ({ maps: window.google.maps }),
   })
 }
diff --git a/src/runtime/registry/google-tag-manager.ts b/src/runtime/registry/google-tag-manager.ts
@@ -1,7 +1,7 @@
 import type { GoogleTagManagerApi } from 'third-party-capital'
 import { object, string } from 'valibot'
-
-import { useScript, validateScriptInputSchema } from '#imports'
+import { registryScriptOptions } from '../utils'
+import { useScript } from '#imports'
 import type { NuxtUseScriptOptions, ScriptDynamicSrcInput } from '#nuxt-scripts'
 
 const GoogleTagManagerOptions = object({
@@ -19,22 +19,29 @@ declare global {
  *
  * A 3P wrapper for Google Tag Manager that takes an options input to feed into third-party-capital({@link https://github.com/GoogleChromeLabs/third-party-capital}), which returns instructions for nuxt-scripts.
  */
-export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(options?: GoogleTagManagerInput, _scriptOptions?: Omit<NuxtUseScriptOptions<T>, 'beforeInit' | 'use'>) {
-  const scriptOptions: NuxtUseScriptOptions<T> = _scriptOptions || {}
-  scriptOptions.beforeInit = () => {
-    import.meta.dev && validateScriptInputSchema(GoogleTagManagerOptions, options)
-    if (import.meta.client) {
-      window.dataLayer = window.dataLayer || []
-      window.dataLayer.push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' })
-    }
-  }
-  // Note: inputs.useScriptInput is not usable, needs to be normalized
+export function useScriptGoogleTagManager<T extends GoogleTagManagerApi>(options?: GoogleTagManagerInput, scriptOptions?: Omit<NuxtUseScriptOptions<T>, 'beforeInit' | 'use'>) {
   return useScript<GoogleTagManagerApi>({
     // need static sources so they can be transformed
     key: 'googleTagManager',
     src: 'https://www.googletagmanager.com/gtm.js',
   }, {
-    ...scriptOptions,
+    ...registryScriptOptions({
+      scriptOptions,
+      schema: GoogleTagManagerOptions,
+      options,
+      clientInit: import.meta.server
+        ? undefined
+        : () => {
+            window.dataLayer = window.dataLayer || []
+            window.dataLayer.push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' })
+          },
+    }),
+    // allow dataLayer to be accessed on the server
+    stub: import.meta.client
+      ? undefined
+      : ({ fn }) => {
+          return fn === 'dataLayer' ? [] : undefined
+        },
     use: () => ({ dataLayer: window.dataLayer, google_tag_manager: window.google_tag_manager }),
   })
 }