bottle data tags are urls

.changeset/cold-bananas-serve.md

@@ -0,0 +1,5 @@
+---
+'@giphy/react-components': patch
+---
+
+change bottle tag approach

.gitignore

@@ -24,3 +24,4 @@ umd/
 !.yarn/versions
 .hintrc
 .vscode/
+.zed/

packages/react-components/src/components/bottle-data.tsx

@@ -15,22 +15,24 @@ function processTag(tag: string) {
  * Execute a script tag in a React component.
  * https://macarthur.me/posts/script-tags-in-react/
  */
-function BottleData({ markup }: { markup: string }) {
+function BottleData({ src }: { src: string }) {
     const elRef = useRef<HTMLDivElement>(null)
 
     useLayoutEffect(() => {
         if (!elRef.current) return
         const range = document.createRange()
         range.selectNode(elRef.current)
-        const documentFragment = range.createContextualFragment(processTag(markup))
+        const documentFragment = range.createContextualFragment(
+            `<script src="${processTag(src)}" type="text/javascript"></script>`
+        )
 
         // Inject the markup, triggering a re-run!
         elRef.current.innerHTML = ''
         elRef.current.append(documentFragment)
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
-    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: markup }}></div>
+    return <div ref={elRef} dangerouslySetInnerHTML={{ __html: src }}></div>
 }
 
 export default BottleData

packages/react-components/src/components/gif.tsx

@@ -239,6 +239,14 @@ const Gif = ({
         percentHeight = `${ratio}%`
     }
     const bestRendition = getBestRendition(gif.images, width, height)
+    if (!bestRendition) {
+        if (gif.images) {
+            console.error(`no rendition for ${gif.id}, rendition names: ${Object.keys(gif.images).join(', ')}`)
+        } else {
+            console.error(`no rendition for ${gif.id} - no images`)
+        }
+        return null
+    }
     const rendition = gif.images[bestRendition.renditionName] as ImageAllTypes
     const background =
         backgroundColor || // <- specified background prop
@@ -287,7 +295,7 @@ const Gif = ({
                     alt={getAltText(gif)}
                     onLoad={shouldShowMedia ? onImageLoad : () => {}}
                 />
-                {isAd && bottleData?.tags?.map((tag: string, index: number) => <BottleData markup={tag} key={index} />)}
+                {isAd && bottleData?.tags?.map((tag: string, index: number) => <BottleData src={tag} key={index} />)}
             </picture>
             {Overlay && (
                 // only render the overlay on the client since it depends on shouldShowMedia

packages/react-components/stories/gif.stories.tsx

@@ -108,13 +108,8 @@ export const GifWithAd: Story = {
         bottle_data: {
             tid: '8691c382d3eed000da83ecc2ceef747b91190ab0e5bc0bc95ff5c80eeda242fa',
             tags: [
-                `<noscript class="MOAT-giphydisplay879451385633?moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&amp;moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&amp;moatClientLevel3=82&amp;moatClientLevel4=3o7WIw8TV4UJROSElW&amp;moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&amp;moatClientSlicer2=giphytrending"></noscript>
-                <script type="text/javascript">
-              console.log('cache:%%CACHEBUSTER%%')
-              console.log('timestamp:%%TIMESTAMP%%')
-              console.log('window size:%%APP_WINDOW_SIZE%%')
-              console.log('lang:%%DEVICE_LANGUAGE%%')
-            </script>`,
+                `https://www.giphy.com/test.js?cache=%%CACHEBUSTER%%&ts=%%TIMESTAMP%%&window=%%APP_WINDOW_SIZE%%&lang=%%DEVICE_LANGUAGE%%`,
+                `https://www.giphy.com/test2.js?cache=%%CACHEBUSTER%%&ts=%%TIMESTAMP%%&window=%%APP_WINDOW_SIZE%%&lang=%%DEVICE_LANGUAGE%%`,
             ],
         },
     },

packages/svelte-components/package.json

@@ -7,8 +7,8 @@
         "preview": "vite preview",
         "package": "svelte-kit sync && svelte-package && publint",
         "prepublishOnly": "npm run package",
-        "lint": "run -T eslint . --ext .ts,.tsx,.svelte",
-        "test": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "lint": "yarn build && run -T eslint . --ext .ts,.tsx,.svelte",
+        "test": "yarn build && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
     },
     "description": "GIPHY components for Svelte",