@picked/svelte 0.0.1-dev.1765907257168 → 0.0.1-dev.1765971320697

package/dist/components/LazyImage.svelte

@@ -63,10 +63,69 @@
     )
   }
 
+  function isConvincelyDomain(url: URL): boolean {
+    try {
+      return url.hostname.endsWith('.convincely.io')
+    } catch {
+      return false
+    }
+  }
+
+  function isShopifyDomain(url: URL): boolean {
+    try {
+      return url.hostname === 'cdn.shopify.com'
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * Add dpl param to Convincely domain URLs for deployment-specific routing.
+   */
+  function addDplParamIfNeeded(imageSrc: string): string {
+    try {
+      const url = new URL(imageSrc, import.meta.url)
+      
+      if (isConvincelyDomain(url)) {
+        // Check for Vercel deployment ID (works in both browser and server contexts)
+        const vercelDeploymentId = typeof import.meta.env !== 'undefined' 
+          ? import.meta.env.VERCEL_DEPLOYMENT_ID 
+          : undefined
+        const vercelSkewProtection = typeof import.meta.env !== 'undefined'
+          ? import.meta.env.VERCEL_SKEW_PROTECTION_ENABLED
+          : undefined
+
+        if (vercelDeploymentId && vercelSkewProtection === '1') {
+          url.searchParams.set('dpl', vercelDeploymentId)
+        }
+        return url.toString()
+      }
+      
+      return imageSrc
+    } catch {
+      return imageSrc
+    }
+  }
+
   function getOptimizedImageUrl(imageSrc: string, targetWidth: number): string {
     const width = findClosestSize(targetWidth)
-    const imgSrc = loader ? loader({ src: imageSrc, width }) : undefined
-    return imgSrc || getImgUrl(imageSrc)
+    
+    try {
+      const url = new URL(imageSrc, import.meta.url)
+      
+      // If it's a Shopify domain and a custom loader is provided, use the loader
+      if (isShopifyDomain(url) && loader) {
+        const customUrl = loader({ src: imageSrc, width })
+        if (customUrl) return customUrl
+      }
+    } catch {
+      // If URL parsing fails, continue with default behavior
+    }
+
+    // Default optimization: use img.convincely.io for all images
+    const imgUrl = getImgUrl(imageSrc)
+    const encodedUrl = encodeURIComponent(imgUrl)
+    return `https://img.convincely.io/_next/image?url=${encodedUrl}&w=${width}&q=75`
   }
 
   function getImgUrl(imageSrc: string): string {
@@ -78,6 +137,9 @@
     return imageSrc.startsWith('http') ? imageSrc : `${baseUrl}${imageSrc}`
   }
 
+  // Add dpl param to src if it's a Convincely domain
+  const processedSrc = $derived(addDplParamIfNeeded(src))
+
   function handleLoad() {
     isLoaded = true
   }
@@ -122,10 +184,10 @@
   })
 
   const srcSet = $derived.by(() =>
-    widthCandidates.map((w) => `${getOptimizedImageUrl(src, w)} ${w}w`).join(', '),
+    widthCandidates.map((w) => `${getOptimizedImageUrl(processedSrc, w)} ${w}w`).join(', '),
   )
 
-  const fallbackSrc = $derived.by(() => getOptimizedImageUrl(src, widthCandidates[0]))
+  const fallbackSrc = $derived.by(() => getOptimizedImageUrl(processedSrc, widthCandidates[0]))
 
   const fadeClasses = $derived.by(() => {
     if (loading === 'eager') return ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.1-dev.1765907257168",
+  "version": "0.0.1-dev.1765971320697",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -75,7 +75,7 @@
   ],
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.1-dev.1765907257168",
+    "@picked/client": "0.0.1-dev.1765971320697",
     "effector": "^23.3.0",
     "svelte": "^5.34.3"
   },