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

@@ -1,5 +1,5 @@
 import { noUUIDRandom } from '@giphy/js-util'
-import React, { useRef, useLayoutEffect } from 'react'
+import React from 'react'
 
 function processTag(tag: string) {
     tag = tag.replace(`%%CACHEBUSTER%%`, noUUIDRandom())
@@ -11,26 +11,8 @@ function processTag(tag: string) {
     }
     return tag
 }
-/**
- * Execute a script tag in a React component.
- * https://macarthur.me/posts/script-tags-in-react/
- */
-function BottleData({ markup }: { markup: 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))
-
-        // 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>
+function BottleData({ src }: { src: string }) {
+    return <img src={processTag(src)} />
 }
 
 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",