execute the bottle data tag

.changeset/great-peaches-agree.md

@@ -0,0 +1,6 @@
+---
+'@giphy/react-components': minor
+'@giphy/js-util': minor
+---
+
+fix bottle data injection and replace magic tags

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

@@ -0,0 +1,36 @@
+import { noUUIDRandom } from '@giphy/js-util'
+import React, { useRef, useLayoutEffect } from 'react'
+
+function processTag(tag: string) {
+ tag = tag.replace(`%%CACHEBUSTER%%`, noUUIDRandom())
+ tag = tag.replace('%%TIMESTAMP%%', `${Date.now()}`)
+ tag = tag.replace('%%APPBUNDLE%%', `web`)
+ if (typeof window !== 'undefined') {
+ tag = tag.replace('%%APP_WINDOW_SIZE%%', `${window.innerWidth},${window.innerHeight}`)
+ tag = tag.replace('%%DEVICE_LANGUAGE%%', `${navigator.language}`)
+ }
+ 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>
+}
+
+export default BottleData

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

@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import * as pingback from '../util/pingback'
 import AttributionOverlay from './attribution/overlay'
 import VerifiedBadge from './attribution/verified-badge'
+import BottleData from './bottle-data'
 import { PingbackContext } from './pingback-context-manager'
 import { GifOverlayProps } from './types'
 
@@ -201,7 +202,6 @@ const Gif = ({
  onGifVisible(gif, e) // gif is visible, perhaps just partially
  setLoadedClassName(Gif.imgLoadedClassName)
  }
-
  useEffect(() => {
  // the id has changed, maybe the image has loaded
  if (image.current?.complete) {
@@ -287,10 +287,7 @@ const Gif = ({
  alt={getAltText(gif)}
  onLoad={shouldShowMedia ? onImageLoad : () => {}}
  />
- {isAd &&
- bottleData?.tags?.map((tag: string, index: number) => (
- <div dangerouslySetInnerHTML={{ __html: tag }} key={index} />
- ))}
+ {isAd && bottleData?.tags?.map((tag: string, index: number) => <BottleData markup={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,7 +108,13 @@ 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 src="https://z.moatads.com/giphydisplay879451385633/moatad.js#moatClientLevel1=ff6046d1-7125-462a-809c-efa338464775&moatClientLevel2=e66d47a2-1b13-4b74-a34d-23fbdc10ddb5&moatClientLevel3=82&moatClientLevel4=3o7WIw8TV4UJROSElW&moatClientSlicer1=e26c89fe-fb01-4442-9e8f-37940600265c&moatClientSlicer2=giphytrending" type="text/javascript"></script>',
+ `<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>`,
  ],
  },
  },

packages/util/src/get-pingback-id.ts

@@ -4,7 +4,7 @@ let pingbackId = ''
 const idLength = 16
 
 /* istanbul ignore next */
-const noUUIDRandom = () => {
+export const noUUIDRandom = () => {
  let result = ''
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  const charactersLength = characters.length

packages/util/src/index.ts

@@ -1,7 +1,7 @@
 export { default as bestfit, setRenditionScaleUpMaxPixels } from './bestfit'
 export * from './collections'
 export { default as getClientRect } from './get-client-rect-from-el'
-export { default as getPingbackId } from './get-pingback-id'
+export { default as getPingbackId, noUUIDRandom } from './get-pingback-id'
 export {
  getAltText,
  getBestRendition,