@nuxt/scripts 0.6.6 → 0.7.1

package/dist/client/_nuxt/builds/latest.json

@@ -1 +1 @@
-{"id":"3dcaf2bf-82f1-460f-80a6-1412196a7a77","timestamp":1722985798275}
+{"id":"e4092e18-9a58-41ab-947e-35e1f2082b75","timestamp":1724318010522}

package/dist/client/_nuxt/builds/meta/e4092e18-9a58-41ab-947e-35e1f2082b75.json

@@ -0,0 +1 @@
+{"id":"e4092e18-9a58-41ab-947e-35e1f2082b75","timestamp":1724318010522,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

package/dist/client/_nuxt/error-404.CHrXIISA.css

@@ -0,0 +1 @@
+.spotlight[data-v-379fced0]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);bottom:-30vh;filter:blur(20vh);height:40vh}.gradient-border[data-v-379fced0]{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.5rem;position:relative}@media (prefers-color-scheme:light){.gradient-border[data-v-379fced0]{background-color:#ffffff4d}.gradient-border[data-v-379fced0]:before{background:linear-gradient(90deg,#e2e2e2,#e2e2e2 25%,#00dc82,#36e4da 75%,#0047e1)}}@media (prefers-color-scheme:dark){.gradient-border[data-v-379fced0]{background-color:#1414144d}.gradient-border[data-v-379fced0]:before{background:linear-gradient(90deg,#303030,#303030 25%,#00dc82,#36e4da 75%,#0047e1)}}.gradient-border[data-v-379fced0]:before{background-size:400% auto;border-radius:.5rem;bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;padding:2px;position:absolute;right:0;top:0;transition:background-position .3s ease-in-out,opacity .2s ease-in-out;width:100%}.gradient-border[data-v-379fced0]:hover:before{background-position:-50% 0;opacity:1}.fixed[data-v-379fced0]{position:fixed}.left-0[data-v-379fced0]{left:0}.right-0[data-v-379fced0]{right:0}.z-10[data-v-379fced0]{z-index:10}.z-20[data-v-379fced0]{z-index:20}.grid[data-v-379fced0]{display:grid}.mb-16[data-v-379fced0]{margin-bottom:4rem}.mb-8[data-v-379fced0]{margin-bottom:2rem}.max-w-520px[data-v-379fced0]{max-width:520px}.min-h-screen[data-v-379fced0]{min-height:100vh}.w-full[data-v-379fced0]{width:100%}.flex[data-v-379fced0]{display:flex}.cursor-pointer[data-v-379fced0]{cursor:pointer}.place-content-center[data-v-379fced0]{place-content:center}.items-center[data-v-379fced0]{align-items:center}.justify-center[data-v-379fced0]{justify-content:center}.overflow-hidden[data-v-379fced0]{overflow:hidden}.bg-white[data-v-379fced0]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-4[data-v-379fced0]{padding-left:1rem;padding-right:1rem}.px-8[data-v-379fced0]{padding-left:2rem;padding-right:2rem}.py-2[data-v-379fced0]{padding-bottom:.5rem;padding-top:.5rem}.text-center[data-v-379fced0]{text-align:center}.text-8xl[data-v-379fced0]{font-size:6rem;line-height:1}.text-xl[data-v-379fced0]{font-size:1.25rem;line-height:1.75rem}.text-black[data-v-379fced0]{--un-text-opacity:1;color:rgb(0 0 0/var(--un-text-opacity))}.font-light[data-v-379fced0]{font-weight:300}.font-medium[data-v-379fced0]{font-weight:500}.leading-tight[data-v-379fced0]{line-height:1.25}.font-sans[data-v-379fced0]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased[data-v-379fced0]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-379fced0]{--un-bg-opacity:1;background-color:rgb(0 0 0/var(--un-bg-opacity))}.dark\:text-white[data-v-379fced0]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media (min-width:640px){.sm\:px-0[data-v-379fced0]{padding-left:0;padding-right:0}.sm\:px-6[data-v-379fced0]{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-3[data-v-379fced0]{padding-bottom:.75rem;padding-top:.75rem}.sm\:text-4xl[data-v-379fced0]{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl[data-v-379fced0]{font-size:1.25rem;line-height:1.75rem}}

package/dist/client/_nuxt/error-500.CrsjMPPf.css

@@ -0,0 +1 @@
+.spotlight[data-v-8b7b3844]{background:linear-gradient(45deg,#00dc82,#36e4da 50%,#0047e1);filter:blur(20vh)}.fixed[data-v-8b7b3844]{position:fixed}.-bottom-1\/2[data-v-8b7b3844]{bottom:-50%}.left-0[data-v-8b7b3844]{left:0}.right-0[data-v-8b7b3844]{right:0}.grid[data-v-8b7b3844]{display:grid}.mb-16[data-v-8b7b3844]{margin-bottom:4rem}.mb-8[data-v-8b7b3844]{margin-bottom:2rem}.h-1\/2[data-v-8b7b3844]{height:50%}.max-w-520px[data-v-8b7b3844]{max-width:520px}.min-h-screen[data-v-8b7b3844]{min-height:100vh}.place-content-center[data-v-8b7b3844]{place-content:center}.overflow-hidden[data-v-8b7b3844]{overflow:hidden}.bg-white[data-v-8b7b3844]{--un-bg-opacity:1;background-color:rgb(255 255 255/var(--un-bg-opacity))}.px-8[data-v-8b7b3844]{padding-left:2rem;padding-right:2rem}.text-center[data-v-8b7b3844]{text-align:center}.text-8xl[data-v-8b7b3844]{font-size:6rem;line-height:1}.text-xl[data-v-8b7b3844]{font-size:1.25rem;line-height:1.75rem}.text-black[data-v-8b7b3844]{--un-text-opacity:1;color:rgb(0 0 0/var(--un-text-opacity))}.font-light[data-v-8b7b3844]{font-weight:300}.font-medium[data-v-8b7b3844]{font-weight:500}.leading-tight[data-v-8b7b3844]{line-height:1.25}.font-sans[data-v-8b7b3844]{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.antialiased[data-v-8b7b3844]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){.dark\:bg-black[data-v-8b7b3844]{--un-bg-opacity:1;background-color:rgb(0 0 0/var(--un-bg-opacity))}.dark\:text-white[data-v-8b7b3844]{--un-text-opacity:1;color:rgb(255 255 255/var(--un-text-opacity))}}@media (min-width:640px){.sm\:px-0[data-v-8b7b3844]{padding-left:0;padding-right:0}.sm\:text-4xl[data-v-8b7b3844]{font-size:2.25rem;line-height:2.5rem}}

package/dist/client/_nuxt/{BKJqCZ0j.js → iQqcKxZm.js}

@@ -1 +1 @@
-import{i as o,r as u,g as f,h as d,j as v,k as l,l as i,m as h,n as m}from"./DcF05ETD.js";function U(t,a={}){const e=a.head||o();if(e)return e.ssr?e.push(t,a):p(e,t,a)}function p(t,a,e={}){const s=u(!1),n=u({});f(()=>{n.value=s.value?{}:h(a)});const r=t.push(n.value,e);return d(n,c=>{r.patch(c)}),m()&&(v(()=>{r.dispose()}),l(()=>{s.value=!0}),i(()=>{s.value=!1})),r}export{U as u};
+import{i as o,r as u,g as f,h as d,j as v,k as l,l as i,m as h,n as m}from"./DOi3Eb0n.js";function U(t,a={}){const e=a.head||o();if(e)return e.ssr?e.push(t,a):p(e,t,a)}function p(t,a,e={}){const s=u(!1),n=u({});f(()=>{n.value=s.value?{}:h(a)});const r=t.push(n.value,e);return d(n,c=>{r.patch(c)}),m()&&(v(()=>{r.dispose()}),l(()=>{s.value=!0}),i(()=>{s.value=!1})),r}export{U as u};

package/dist/client/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html><html  data-capo=""><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/__nuxt-scripts/_nuxt/entry.FVeyw1Qn.css">
-<link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DcF05ETD.js">
+<link rel="modulepreload" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DOi3Eb0n.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/DXFkqnOI.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/BigF1UXR.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/CowR2XfX.js">
@@ -257,10 +257,10 @@
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/B3g-KkBK.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/Bxkoe-BC.js">
 <link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/Br6ll-O0.js">
-<link rel="prefetch" as="style" href="/__nuxt-scripts/_nuxt/error-404.B7Lh29wY.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/aQeyjCqJ.js">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/BKJqCZ0j.js">
-<link rel="prefetch" as="style" href="/__nuxt-scripts/_nuxt/error-500.B_VIyt60.css">
-<link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/BKIFFtfV.js">
-<script type="module" src="/__nuxt-scripts/_nuxt/DcF05ETD.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-scripts",buildId:"3dcaf2bf-82f1-460f-80a6-1412196a7a77",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<link rel="prefetch" as="style" href="/__nuxt-scripts/_nuxt/error-404.CHrXIISA.css">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/C1IUq70_.js">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/iQqcKxZm.js">
+<link rel="prefetch" as="style" href="/__nuxt-scripts/_nuxt/error-500.CrsjMPPf.css">
+<link rel="prefetch" as="script" crossorigin href="/__nuxt-scripts/_nuxt/CnUvXFHd.js">
+<script type="module" src="/__nuxt-scripts/_nuxt/DOi3Eb0n.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"serverRendered":1},false]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__nuxt-scripts",buildId:"e4092e18-9a58-41ab-947e-35e1f2082b75",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/module.json

@@ -5,9 +5,9 @@
     "nuxt": ">=3",
     "bridge": false
   },
-  "version": "0.6.6",
+  "version": "0.7.1",
   "builder": {
-    "@nuxt/module-builder": "0.8.1",
+    "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -152,7 +152,7 @@ function NuxtScriptBundleTransformer(options) {
               if (scriptSrcNode || src) {
                 src = src || (typeof scriptSrcNode?.value === "string" ? scriptSrcNode?.value : false);
                 if (src) {
-                  let canBundle = options.defaultBundle;
+                  let canBundle = !!options.defaultBundle;
                   if (node.arguments[1]?.type === "ObjectExpression") {
                     const scriptOptionsArg = node.arguments[1];
                     const bundleProperty = scriptOptionsArg.properties.find(
@@ -175,6 +175,13 @@ function NuxtScriptBundleTransformer(options) {
                       canBundle = true;
                     }
                   }
+                  const scriptOptions = node.arguments[0].properties?.find(
+                    (p) => p.key?.name === "scriptOptions"
+                  );
+                  const bundleOption = scriptOptions?.value.properties?.find((prop) => {
+                    return prop.type === "Property" && prop.key?.name === "bundle" && prop.value.type === "Literal";
+                  });
+                  canBundle = bundleOption ? bundleOption.value.value : canBundle;
                   if (canBundle) {
                     const newSrc = options.resolveScript(src);
                     if (src === newSrc) {
@@ -502,9 +509,8 @@ const module = defineNuxtModule({
     const unheadPath = await resolvePath("@unhead/vue").catch(() => void 0);
     if (unheadPath) {
       const { version: unheadVersion } = await readPackageJSON(join(unheadPath, "package.json"));
-      if (!unheadVersion || lt(unheadVersion, "1.9.0")) {
-        logger.warn("@nuxt/scripts requires @unhead/vue >= 1.9.0, please upgrade to use the module.");
-        return;
+      if (!unheadVersion || lt(unheadVersion, "1.10.0")) {
+        logger.error(`Nuxt Scripts requires Unhead >= 1.10.0, you are using v${unheadVersion}. Please run \`nuxi upgrade --clean\` to upgrade...`);
       }
     }
     nuxt.options.alias["#nuxt-scripts-validator"] = resolve(`./runtime/validation/${nuxt.options.dev || nuxt.options._prepare ? "valibot" : "mock"}`);

package/dist/runtime/components/ScriptCrisp.vue

@@ -40,9 +40,12 @@ const crisp = useScriptCrisp({
     trigger,
   },
 })
-if (props.trigger === 'click')
-  crisp.do('chat:open')
-const { $script } = crisp
+const { onLoaded, status } = crisp
+if (props.trigger === 'click') {
+  onLoaded((instance) => {
+    instance.do('chat:open')
+  })
+}
 
 defineExpose({
   crisp,
@@ -50,7 +53,7 @@ defineExpose({
 
 let observer: MutationObserver
 onMounted(() => {
-  watch($script.status, (status) => {
+  watch(status, (status) => {
     if (status === 'loaded') {
       observer = new MutationObserver(() => {
         if (document.getElementById('crisp-chatbox')) {
@@ -77,8 +80,8 @@ onBeforeUnmount(() => {
     :style="{ display: isReady ? 'none' : 'block' }"
   >
     <slot :ready="isReady" />
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
+    <slot v-else-if="status === 'error'" name="error" />
   </div>
 </template>

package/dist/runtime/components/ScriptGoogleAdsense.vue

@@ -34,17 +34,17 @@ const instance = useScriptGoogleAdsense({
   },
 })
 
-const { $script } = instance
+const { status } = instance
 
 onMounted(() => {
   callOnce(() => {
     (window.adsbygoogle = window.adsbygoogle || []).push({})
   })
-  watch(instance.$script.status, () => {
-    if (instance.$script.status.value === 'loaded') {
+  watch(status, (val) => {
+    if (val === 'loaded') {
       emits('ready', instance)
     }
-    else if (instance.$script.status.value === 'error') {
+    else if (val === 'error') {
       emits('error')
     }
   })
@@ -62,8 +62,8 @@ onMounted(() => {
     :data-full-width-responsive="dataFullWidthResponsive"
     v-bind="{ ...$attrs }"
   >
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'loading'" name="loading" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'loading'" name="loading" />
+    <slot v-else-if="status === 'error'" name="error" />
   </ins>
 </template>

package/dist/runtime/components/ScriptGoogleMaps.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 /// <reference types="google.maps" />
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, toRaw } from 'vue'
 import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps } from 'vue'
 import { withQuery } from 'ufo'
 import type { QueryObject } from 'ufo'
 import { defu } from 'defu'
+import { hash } from 'ohash'
 import type { ElementScriptTrigger } from '../types'
 import { scriptRuntimeConfig } from '../utils'
 import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
@@ -44,15 +45,19 @@ const props = withDefaults(defineProps<{
   /**
    * Defines the Google Maps API key. Must have access to the Static Maps API as well.
    */
-  apiKey: string
+  apiKey?: string
   /**
-   * Defines map marker location.
+   * A latitude / longitude of where to focus the map.
    */
-  query?: string
+  center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`
+  /**
+   * Should a marker be displayed on the map where the centre is.
+   */
+  centerMarker?: boolean
   /**
    * Options for the map.
    */
-  options?: google.maps.MapOptions
+  mapOptions?: google.maps.MapOptions
   /**
    * Defines the width of the map.
    */
@@ -75,30 +80,39 @@ const props = withDefaults(defineProps<{
    * Customize the root element attributes.
    */
   rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>
+  /**
+   * Extra Markers to add to the map.
+   */
+  markers?: (`${string},${string}` | google.maps.marker.AdvancedMarkerElementOptions)[]
 }>(), {
   // @ts-expect-error untyped
   trigger: ['mouseenter', 'mouseover', 'mousedown'],
-  width: 600,
+  width: 640,
   height: 400,
+  centerMarker: true,
 })
 
 const emits = defineEmits<{
   // our emit
-  ready: [e: Ref<google.maps.Map | undefined>]
+  ready: [e: typeof googleMaps]
   error: []
 }>()
 
 const apiKey = props.apiKey || scriptRuntimeConfig('googleMaps')?.apiKey
 
-if (!apiKey)
+const mapsApi = ref<typeof google.maps | undefined>()
+
+if (import.meta.dev && !apiKey)
   throw new Error('GoogleMaps requires an API key. Please provide `apiKey` on the <ScriptGoogleMaps> or globally via `runtimeConfig.public.scripts.googleMaps.apiKey`.')
-if (!props.query && !props.options?.center)
-  throw new Error('GoogleMaps requires either a query or center prop to be set.')
+
+// TODO allow a null center may need to be resolved via an API function
 
 const rootEl = ref<HTMLElement>()
 const mapEl = ref<HTMLElement>()
 
-const { $script } = useScriptGoogleMaps({
+const centerOverride = ref()
+
+const { load, status, onLoaded } = useScriptGoogleMaps({
   apiKey: props.apiKey,
   scriptOptions: {
     trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
@@ -106,16 +120,70 @@ const { $script } = useScriptGoogleMaps({
 })
 
 const options = computed(() => {
-  return defu(props.options, {
+  return defu({ center: centerOverride.value }, props.mapOptions, {
+    center: props.center,
     zoom: 15,
     mapId: 'map',
   })
 })
 const ready = ref(false)
 
-function queryToLocation(service: google.maps.places.PlacesService, query: string) {
-  return new Promise<google.maps.LatLng>((resolve, reject) => {
-    service.findPlaceFromQuery({
+const map: Ref<google.maps.Map | undefined> = ref()
+const mapMarkers: Ref<Map<string, Promise<google.maps.marker.AdvancedMarkerElement>>> = ref(new Map())
+
+function isLocationQuery(s: string | any) {
+  return typeof s === 'string' && (s.split(',').length > 2 || s.includes('+'))
+}
+
+async function createAdvancedMapMarker(_options: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) {
+  const key = hash(_options)
+  if (mapMarkers.value.has(key))
+    return mapMarkers.value.get(key)
+  // eslint-disable-next-line no-async-promise-executor
+  const p = new Promise<google.maps.marker.AdvancedMarkerElement>(async (resolve) => {
+    const lib = await importLibrary('marker')
+    const options = typeof _options === 'string'
+      ? {
+          position: {
+            lat: Number.parseFloat(_options.split(',')[0] || '0'),
+            lng: Number.parseFloat(_options.split(',')[1] || '0'),
+          },
+        }
+      : _options
+    const mapMarkerOptions = defu(toRaw(options), {
+      map: toRaw(map.value!),
+      // @ts-expect-error unified API for maps and markers
+      position: options.location,
+    })
+    resolve(new lib.AdvancedMarkerElement(mapMarkerOptions))
+  })
+  mapMarkers.value.set(key, p)
+  return p
+}
+
+const queryToLatLngCache = new Map<string, google.maps.LatLng>()
+
+async function resolveQueryToLatLang(query: string) {
+  if (query && typeof query === 'object')
+    return Promise.resolve(query)
+  if (queryToLatLngCache.has(query)) {
+    return Promise.resolve(queryToLatLngCache.get(query))
+  }
+  // only if the query is a string we need to do a lookup
+  // eslint-disable-next-line no-async-promise-executor
+  return new Promise<google.maps.LatLng>(async (resolve, reject) => {
+    if (!mapsApi.value) {
+      await load()
+      // await new promise, watch until mapsApi is set
+      await new Promise<void>((resolve) => {
+        const _ = watch(mapsApi, () => {
+          _()
+          resolve()
+        })
+      })
+    }
+    const placesService = new mapsApi.value!.places.PlacesService(map.value!)
+    placesService.findPlaceFromQuery({
       query,
       fields: ['name', 'geometry'],
     }, (results, status) => {
@@ -123,60 +191,135 @@ function queryToLocation(service: google.maps.places.PlacesService, query: strin
         return resolve(results[0].geometry.location)
       return reject(new Error(`No location found for ${query}`))
     })
+  }).then((res) => {
+    queryToLatLngCache.set(query, res)
+    return res
   })
 }
 
-const map: Ref<google.maps.Map | undefined> = ref()
-const markers: Ref<google.maps.marker.AdvancedMarkerElement[]> = ref([])
-defineExpose({
+const libraries = new Map<string, any>()
+
+function importLibrary(key: 'marker'): Promise<google.maps.MarkerLibrary>
+function importLibrary(key: 'places'): Promise<google.maps.PlacesLibrary>
+function importLibrary(key: 'geometry'): Promise<google.maps.GeometryLibrary>
+function importLibrary(key: 'drawing'): Promise<google.maps.DrawingLibrary>
+function importLibrary(key: 'visualization'): Promise<google.maps.VisualizationLibrary>
+function importLibrary(key: string): Promise<any>
+function importLibrary<T>(key: string): Promise<T> {
+  if (libraries.has(key))
+    return libraries.get(key)
+  const p = mapsApi.value?.importLibrary(key) || new Promise((resolve) => {
+    const stop = watch(mapsApi, (api) => {
+      if (api) {
+        const p = api.importLibrary(key)
+        resolve(p)
+        stop()
+      }
+    }, { immediate: true })
+  })
+  libraries.set(key, p)
+  return p as any as Promise<T>
+}
+
+const googleMaps = {
+  googleMaps: mapsApi,
   map,
-  markers,
-})
+  createAdvancedMapMarker,
+  resolveQueryToLatLang,
+  importLibrary,
+} as const
+
+defineExpose(googleMaps)
 
 onMounted(() => {
   watch(ready, (v) => {
     if (v) {
-      emits('ready', map)
+      emits('ready', googleMaps)
     }
   })
-  watch($script.status, () => {
-    if ($script.status.value === 'error') {
+  watch(status, (v) => {
+    if (v === 'error') {
       emits('error')
     }
   })
-  // create the map
-  $script.then(async (instance) => {
-    const maps = await instance.maps as any as typeof google.maps // some weird type issue here
-    const _map = new maps.Map(mapEl.value!, options.value)
-    const placesService = new maps.places.PlacesService(_map)
-
-    watch(options, () => _map.setOptions(options.value))
-    watch(() => props.query, async (query) => {
-      // always clear old markers
-      markers.value.forEach(marker => marker.remove())
-      markers.value = []
-      if (query) {
-        const marker = await maps.importLibrary('marker') as google.maps.MarkerLibrary
-        const location = await queryToLocation(placesService, query).catch((err) => {
-          console.warn(err)
-          return {
-            lat: 0,
-            lng: 0,
-          }
-        })
-        _map.setCenter(location)
-        markers.value.push(new marker.AdvancedMarkerElement({
-          map: _map,
-          position: location,
-        }))
-        ready.value = true
+  watch(options, () => {
+    map.value?.setOptions(options.value)
+  })
+  watch([() => props.markers, map], async () => {
+    if (!map.value) {
+      return
+    }
+    // mapMarkers is a map where we hash the next array entry as the map key
+    // we need to do a diff to see what we remove or add
+    const nextMap = new Map((props.markers || []).map(m => [hash(m), m]))
+    // compare idsToMatch in nextMap, if we're missing an id, we need to remove it
+    const toRemove = new Set([
+      ...mapMarkers.value.keys(),
+    ].filter(k => !nextMap.has(k)))
+    // compare to existing
+    const toAdd = new Set([...nextMap.keys()].filter(k => !mapMarkers.value.has(k)))
+    // do a diff of next and prev
+    const centerHash = hash({ position: options.value.center })
+    for (const key of toRemove) {
+      if (key === centerHash) {
+        continue
       }
-    }, {
-      immediate: !!props.query,
-    })
-    if (!props.query)
-      ready.value = true
-    map.value = _map
+      const marker = await mapMarkers.value.get(key)
+      if (marker) {
+        // @ts-expect-error broken type
+        marker.setMap(null)
+        // make sure it gets removed from map
+        mapMarkers.value.delete(key)
+      }
+    }
+    for (const k of toAdd) {
+      // @ts-expect-error broken
+      createAdvancedMapMarker(nextMap.get(k))
+    }
+  }, {
+    immediate: true,
+    deep: true,
+  })
+  watch([() => options.value.center, ready, map], async (next, prev) => {
+    if (!map.value) {
+      return
+    }
+    let center = toRaw(next[0])
+    if (center) {
+      if (isLocationQuery(center) && ready.value) {
+        // need to resolve center from query
+        center = await resolveQueryToLatLang(center as string)
+      }
+      map.value!.setCenter(center as google.maps.LatLng)
+      if (props.centerMarker) {
+        if (prev[0]) {
+          const prevCenterHash = hash({ position: prev[0] })
+          // @ts-expect-error broken upstream type
+          mapMarkers.value.get(prevCenterHash)?.setMap(null)
+          mapMarkers.value.delete(prevCenterHash)
+        }
+        createAdvancedMapMarker({ position: center })
+      }
+    }
+  }, {
+    immediate: true,
+  })
+  onLoaded(async (instance) => {
+    mapsApi.value = await instance.maps as any as typeof google.maps // some weird type issue here
+    // may need to transform the center before we can init the map
+    const center = options.value.center as string
+    const _options: google.maps.MapOptions = {
+      ...options.value,
+      // @ts-expect-error broken
+      center: !center || isLocationQuery(center) ? undefined : center,
+    }
+    map.value = new mapsApi.value!.Map(mapEl.value!, _options)
+    if (center && isLocationQuery(center)) {
+      // need to resolve center
+      centerOverride.value = await resolveQueryToLatLang(center)
+      map.value?.setCenter(centerOverride.value)
+    }
+    ready.value = true
   })
 })
 
@@ -192,15 +335,34 @@ if (import.meta.server) {
 }
 
 const placeholder = computed(() => {
+  let center = options.value.center
+  if (center && typeof center === 'object') {
+    center = `${center.lat},${center.lng}`
+  }
+  // @ts-expect-error lazy type
   const placeholderOptions: PlaceholderOptions = defu(props.placeholderOptions, {
     // only map option values
     zoom: options.value.zoom,
-    center: options.value.center?.toString() || '',
+    center,
   }, {
     size: `${props.width}x${props.height}`,
     key: apiKey,
     scale: 2, // we assume a high DPI to avoid hydration issues
-    markers: `color:red|${props.query}`,
+    markers: [
+      ...(props.markers || []),
+      center,
+    ]
+      .filter(Boolean)
+      .map((m) => {
+        if (typeof m === 'object' && m.location) {
+          m = m.location
+        }
+        if (typeof m === 'object' && m.lat) {
+          return `${m.lat},${m.lng}`
+        }
+        return m
+      })
+      .join('|'),
   })
   return withQuery('https://maps.googleapis.com/maps/api/staticmap', placeholderOptions as QueryObject)
 })
@@ -208,7 +370,7 @@ const placeholder = computed(() => {
 const placeholderAttrs = computed(() => {
   return defu(props.placeholderAttrs, {
     src: placeholder.value,
-    alt: props.query || '',
+    alt: 'Google Maps Static Map',
     loading: props.aboveTheFold ? 'eager' : 'lazy',
     style: {
       cursor: 'pointer',
@@ -221,10 +383,10 @@ const placeholderAttrs = computed(() => {
 
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
-    'aria-busy': $script.status.value === 'loading',
-    'aria-label': $script.status.value === 'awaitingLoad'
+    'aria-busy': status.value === 'loading',
+    'aria-label': status.value === 'awaitingLoad'
       ? 'Google Maps Static Map'
-      : $script.status.value === 'loading'
+      : status.value === 'loading'
         ? 'Google Maps Map Embed Loading'
         : 'Google Maps Embed',
     'aria-live': 'polite',
@@ -242,9 +404,15 @@ const rootAttrs = computed(() => {
 
 const ScriptLoadingIndicator = resolveComponent('ScriptLoadingIndicator')
 
-onBeforeUnmount(() => {
-  markers.value.forEach(marker => marker.remove())
-  markers.value = []
+onBeforeUnmount(async () => {
+  await Promise.all([...mapMarkers.value.entries()].map(async (_marker) => {
+    const marker = await _marker
+    if (marker) {
+      // @ts-expect-error broken type
+      marker.setMap(null)
+    }
+  }))
+  mapMarkers.value.clear()
   map.value?.unbindAll()
   map.value = undefined
   mapEl.value?.firstChild?.remove()
@@ -253,15 +421,15 @@ onBeforeUnmount(() => {
 
 <template>
   <div ref="rootEl" v-bind="rootAttrs">
-    <div v-show="ready" ref="mapEl" class="script-google-maps__map" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
+    <div v-show="ready" ref="mapEl" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
     <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
       <img v-bind="placeholderAttrs">
     </slot>
-    <slot v-if="$script.status.value === 'loading'" name="loading">
+    <slot v-if="status !== 'awaitingLoad' && !ready" name="loading">
       <ScriptLoadingIndicator color="black" />
     </slot>
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
     <slot />
   </div>
 </template>

package/dist/runtime/components/ScriptIntercom.vue

@@ -46,9 +46,12 @@ const intercom = useScriptIntercom({
     trigger,
   },
 })
-if (props.trigger === 'click')
-  intercom.Intercom('show')
-const { $script } = intercom
+const { status, onLoaded } = intercom
+if (props.trigger === 'click') {
+  onLoaded((instance) => {
+    instance.Intercom('show')
+  })
+}
 
 defineExpose({
   intercom,
@@ -56,7 +59,7 @@ defineExpose({
 
 let observer: MutationObserver
 onMounted(() => {
-  watch($script.status, (status) => {
+  watch(status, (status) => {
     if (status === 'loading') {
       observer = new MutationObserver(() => {
         if (document.getElementById('intercom-frame')) {
@@ -86,8 +89,8 @@ onBeforeUnmount(() => {
     }"
   >
     <slot :ready="isReady" />
-    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
-    <slot v-else-if="$script.status.value === 'error'" name="error" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
+    <slot v-else-if="status === 'error'" name="error" />
   </div>
 </template>

package/dist/runtime/components/ScriptLemonSqueezy.vue

@@ -26,7 +26,7 @@ onMounted(() => {
   rootEl.value?.querySelectorAll('a[href]').forEach((a) => {
     a.classList.add('lemonsqueezy-button')
   })
-  instance.$script.then(({ Setup, Refresh }) => {
+  instance.onLoaded(({ Setup, Refresh }) => {
     Setup({
       eventHandler(event) {
         emits('lemonSqueezyEvent', event)