@playpilot/tpi 6.11.0 → 7.0.0-beta.2

package/eslint.config.js

@@ -18,6 +18,7 @@ export default [
         ...globals.browser,
         ...globals.node,
         PlayPilotLinkInjections: 'writable',
+        __SCRIPT_VERSION__: 'readonly',
       },
       parserOptions: {
         parser: tsParser,

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.11.0",
+	"version": "7.0.0-beta.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"dev-build": "npx http-server . /build.html -p 3000",
+		"build": "vite build --config vite._main.config.js && vite build --config vite._mount.config.js",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",

package/src/lib/api/auth.ts

@@ -1,6 +1,4 @@
 import { getApiToken } from '$lib/token'
-import { TrackingEvent } from '../enums/TrackingEvent'
-import { track } from '../tracking'
 import { api } from './api'
 
 const cookieName = 'EncryptedToken'
@@ -28,12 +26,10 @@ export async function authorize(href: string = window.location.href): Promise<bo
     return true
   } catch(error: any) {
     console.error(error)
-    track(TrackingEvent.AuthFailed)
+    throw error
   } finally {
     removeAuthParamFromUrl()
   }
-
-  return false
 }
 
 export function getAuthToken(href: string = ''): string {

package/src/lib/api/externalPages.ts

@@ -1,6 +1,6 @@
 import { authorize, getAuthToken, isEditorialModeEnabled } from './auth'
 import { generateRandomHash, stringToHash } from '../hash'
-import { getLanguage } from '../localization'
+import { getLanguage } from '../language'
 import { getDatetime, getPageMetaData } from '../meta'
 import type { LinkInjectionResponse, LinkInjection } from '../types/injection'
 import { getFullUrlPath } from '../url'

package/src/lib/api/titles.ts

@@ -1,4 +1,4 @@
-import { getLanguage } from '$lib/localization'
+import { getLanguage } from '$lib/language'
 import { getApiToken } from '$lib/token'
 import type { APIPaginatedResult } from '$lib/types/api'
 import { paramsToString } from '$lib/url'

package/src/lib/injection.ts

@@ -9,97 +9,6 @@ import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
 
-/**
- * Return a list of all valid text containing elements that may get injected into.
- * This excludes duplicates, empty elements, links, buttons, and header tags.
- *
- * Elements can additionally be excluded via the excludeElementsSelector attribute.
- * This will exclude any element that matches or is in that selector.
- */
-export function getLinkInjectionElements(parentElement: HTMLElement, excludeElementsSelector: string = ''): HTMLElement[] {
-  const validElements: HTMLElement[] = []
-  const remainingChildren = [parentElement]
-
-  while (remainingChildren.length > 0) {
-    const element = remainingChildren.pop() as HTMLElement
-
-    if (validElements.includes(element)) continue
-    if (excludeElementsSelector && element.matches(excludeElementsSelector)) continue
-
-    // Ignore links, buttons, and headers
-    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|LABEL|BLOCKQUOTE|H1)$/.test(element.tagName)) continue
-
-    // Ignore elements that are visibly hidden as they are likely only for screen readers.
-    // These elements can be hidden via display: none or via a tiny width or perhaps even a clip path.
-    // Checking by their offsetWidth seems like the surest way to ignore these elements.
-    // We continue regardless of whether this is true or not, as we'd otherwise loop through children
-    // which are also hidden because of their parent.
-    // We always do it when running tests, as offsetWidth can't be reliably tested.
-    if (process.env.NODE_ENV !== 'test' && element.offsetWidth <= 1) continue
-
-    const hasTextNode = Array.from(element.childNodes).some(
-      node => node.nodeType === Node.TEXT_NODE && node.nodeValue?.trim() !== '',
-    )
-
-    // Treat list items as a single element, via their list element parent.
-    // This is to prevent missing out on list items with very short titles, such as lists
-    // of movie titles with no other content in the list item. Sentences often contain the full
-    // list, but breaking them up in separate list item elements means they can never get
-    // injected into properly.
-    if (hasTextNode && element.tagName === 'LI') {
-      const listContainer = element.closest('ul, ol') as HTMLElement | null
-
-      if (listContainer && !validElements.includes(listContainer)) {
-        validElements.push(listContainer)
-      }
-
-      continue
-    }
-
-    // Some wysiwyg editors wrap contents of a paragraph in `span` elements when they contain styling.
-    // This leads to broken up sentences which don't match correctly against the given sentence.
-    // `<p><span>Some text</span><span> <strong>with broken up</strong></span><span>elements</span></p>`
-    const isParagraphWithText = element.tagName === 'P' && !!element.textContent
-
-    // If this element has a text node we add it to the valid elements and stop there
-    if (hasTextNode || isParagraphWithText) {
-      validElements.push(element)
-      continue
-    }
-
-    // Add all children of the current element to be checked in this same loop.
-    const children = Array.from(element.children) as HTMLElement[]
-    for (let i = children.length - 1; i >= 0; i--) {
-      remainingChildren.push(children[i] as HTMLElement)
-    }
-  }
-
-  return validElements
-}
-
-/**
- * Get the parent selector that will be used to find the link injections in.
- * This selector is passed through the api config, or when the script is initialized.
- * If no selector is passed a default is returned instead.
- */
-export function getLinkInjectionsParentElement(): HTMLElement {
-  const selector = window.PlayPilotLinkInjections?.selector
-
-  if (selector) {
-    // Replace : with \\: because js selectors need some characters escaped. We only care about : at the moment.
-    const escaped = selector.replace(/(:)/g, '\\$1')
-    const element = document.querySelector(escaped)
-
-    if (element) return element as HTMLElement
-  }
-
-  return document.querySelector('article') || document.querySelector('main') || document.body
-}
-
-export function getPageText(elements: HTMLElement[]): string {
-  return elements.map(element => element.innerText).join('\n\n')
-}
-
 /**
  * Replace all found injections within all given elements on the page
  * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.

package/src/lib/injectionElements.ts

@@ -0,0 +1,90 @@
+/**
+ * Return a list of all valid text containing elements that may get injected into.
+ * This excludes duplicates, empty elements, links, buttons, and header tags.
+ *
+ * Elements can additionally be excluded via the excludeElementsSelector attribute.
+ * This will exclude any element that matches or is in that selector.
+ */
+export function getLinkInjectionElements(parentElement: HTMLElement, excludeElementsSelector: string = ''): HTMLElement[] {
+  const validElements: HTMLElement[] = []
+  const remainingChildren = [parentElement]
+
+  while (remainingChildren.length > 0) {
+    const element = remainingChildren.pop() as HTMLElement
+
+    if (validElements.includes(element)) continue
+    if (excludeElementsSelector && element.matches(excludeElementsSelector)) continue
+
+    // Ignore links, buttons, and headers
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|TIME|LABEL|BLOCKQUOTE|H1)$/.test(element.tagName)) continue
+
+    // Ignore elements that are visibly hidden as they are likely only for screen readers.
+    // These elements can be hidden via display: none or via a tiny width or perhaps even a clip path.
+    // Checking by their offsetWidth seems like the surest way to ignore these elements.
+    // We continue regardless of whether this is true or not, as we'd otherwise loop through children
+    // which are also hidden because of their parent.
+    // We always do it when running tests, as offsetWidth can't be reliably tested.
+    if (process.env.NODE_ENV !== 'test' && element.offsetWidth <= 1) continue
+
+    const hasTextNode = Array.from(element.childNodes).some(
+      node => node.nodeType === Node.TEXT_NODE && node.nodeValue?.trim() !== '',
+    )
+
+    // Treat list items as a single element, via their list element parent.
+    // This is to prevent missing out on list items with very short titles, such as lists
+    // of movie titles with no other content in the list item. Sentences often contain the full
+    // list, but breaking them up in separate list item elements means they can never get
+    // injected into properly.
+    if (hasTextNode && element.tagName === 'LI') {
+      const listContainer = element.closest('ul, ol') as HTMLElement | null
+
+      if (listContainer && !validElements.includes(listContainer)) {
+        validElements.push(listContainer)
+      }
+
+      continue
+    }
+
+    // Some wysiwyg editors wrap contents of a paragraph in `span` elements when they contain styling.
+    // This leads to broken up sentences which don't match correctly against the given sentence.
+    // `<p><span>Some text</span><span> <strong>with broken up</strong></span><span>elements</span></p>`
+    const isParagraphWithText = element.tagName === 'P' && !!element.textContent
+
+    // If this element has a text node we add it to the valid elements and stop there
+    if (hasTextNode || isParagraphWithText) {
+      validElements.push(element)
+      continue
+    }
+
+    // Add all children of the current element to be checked in this same loop.
+    const children = Array.from(element.children) as HTMLElement[]
+    for (let i = children.length - 1; i >= 0; i--) {
+      remainingChildren.push(children[i] as HTMLElement)
+    }
+  }
+
+  return validElements
+}
+
+/**
+ * Get the parent selector that will be used to find the link injections in.
+ * This selector is passed through the api config, or when the script is initialized.
+ * If no selector is passed a default is returned instead.
+ */
+export function getLinkInjectionsParentElement(): HTMLElement {
+  const selector = window.PlayPilotLinkInjections?.selector
+
+  if (selector) {
+    // Replace : with \\: because js selectors need some characters escaped. We only care about : at the moment.
+    const escaped = selector.replace(/(:)/g, '\\$1')
+    const element = document.querySelector(escaped)
+
+    if (element) return element as HTMLElement
+  }
+
+  return document.querySelector('article') || document.querySelector('main') || document.body
+}
+
+export function getPageText(elements: HTMLElement[]): string {
+  return elements.map(element => element.innerText).join('\n\n')
+}

package/src/lib/language.ts

@@ -0,0 +1,25 @@
+import { Language } from './enums/Language'
+import type { LanguageCode } from './types/language'
+
+export function getLanguage(): LanguageCode {
+  const configLanguage = window.PlayPilotLinkInjections?.language as LanguageCode | undefined
+  const languageCodes = Object.values(Language) as LanguageCode[]
+
+  if (configLanguage) {
+    if (languageCodes.includes(configLanguage)) return configLanguage
+
+    console.warn(`PlayPilot Link Injections: ${configLanguage} is not an accepted language`)
+  }
+
+  const documentLanguage = document.querySelector('html')?.getAttribute('lang')
+
+  if (documentLanguage) {
+    if (languageCodes.includes(documentLanguage as LanguageCode)) return documentLanguage as LanguageCode
+
+    // Match against shorthand language codes like da -> da-DK
+    const matched = languageCodes.find(code => code.toLowerCase().startsWith(documentLanguage + '-'))
+    if (matched) return matched
+  }
+
+  return Language.English
+}

package/src/lib/localization.ts

@@ -1,31 +1,8 @@
 import { translations } from './data/translations'
-import { Language } from './enums/Language'
+import { getLanguage } from './language'
 import type { LanguageCode } from './types/language'
 
 export function t(key: string, language: LanguageCode = getLanguage()): string {
   // @ts-ignore It's fine if it's undefined
   return translations[key]?.[language] || key
 }
-
-export function getLanguage(): LanguageCode {
-  const configLanguage = window.PlayPilotLinkInjections?.language as LanguageCode | undefined
-  const languageCodes = Object.values(Language) as LanguageCode[]
-
-  if (configLanguage) {
-    if (languageCodes.includes(configLanguage)) return configLanguage
-
-    console.warn(`PlayPilot Link Injections: ${configLanguage} is not an accepted language`)
-  }
-
-  const documentLanguage = document.querySelector('html')?.getAttribute('lang')
-
-  if (documentLanguage) {
-    if (languageCodes.includes(documentLanguage as LanguageCode)) return documentLanguage as LanguageCode
-
-    // Match against shorthand language codes like da -> da-DK
-    const matched = languageCodes.find(code => code.toLowerCase().startsWith(documentLanguage + '-'))
-    if (matched) return matched
-  }
-
-  return Language.English
-}

package/src/lib/meta.ts

@@ -1,4 +1,4 @@
-import { getLinkInjectionsParentElement } from './injection'
+import { getLinkInjectionsParentElement } from './injectionElements'
 import type { ArticleMetaData } from './types/injection'
 
 export function getPageMetaData(): ArticleMetaData {

package/src/lib/tracking.ts

@@ -36,7 +36,6 @@ export async function track(event: string, title: TitleData | null = null, paylo
     }
   }
 
-  // eslint-disable-next-line no-undef
   payload.version = __SCRIPT_VERSION__
   payload.url = getFullUrlPath()
   payload.organization_sid = window.PlayPilotLinkInjections?.organization_sid || 'undefined'

package/src/lib/types/global.d.ts

@@ -4,10 +4,13 @@ declare global {
   interface Window {
     PlayPilotLinkInjections: ScriptConfig & {
       app: any | null
-      initialize(config: ScriptConfig): void
+      initialize(config: ScriptConfig): Promise<void>
+      destroy(): void
+      mount(): void
+    }
+    PlayPilotMount: {
+      mount(): void
       destroy(): void
-      debug(): void
-      mockAd(override?: Record<any, any> = {}): void
     }
   }
 }

package/src/lib/types/script.d.ts

@@ -1,6 +1,6 @@
 import type { Campaign } from './campaign'
 import type { ConsentOptions } from './consent'
-import type { LinkInjection } from './injection'
+import type { LinkInjection, LinkInjectionResponse } from './injection'
 import type { TitleData } from './title'
 
 export type ScriptConfig = {
@@ -30,6 +30,8 @@ export type ScriptConfig = {
   split_test_identifiers?: Record<string, number>
   // All link injections as returned from external-pages, with AI and manual injections merged.
   evaluated_link_injections?: LinkInjection[]
+  // Initial link injections as fetched from the main script.
+  initial_link_injections_promise?: Promise<LinkInjectionResponse> | null
   // By default the script requires consent from the user through tcfapi. Can be disabled using this setting.
   require_consent?: boolean
   // Used to check if a user has consented via tcfapi to various consent categories.

package/src/main.ts

@@ -1,9 +1,8 @@
-import { mount } from 'svelte'
-import App from './routes/+page.svelte'
-import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injection'
-import { getPageMetaData } from '$lib/meta'
+import { fetchConfig } from '$lib/api/config'
+import { pollLinkInjections } from '$lib/api/externalPages'
 import { setConsent } from '$lib/consent'
-import type { Campaign } from '$lib/types/campaign'
+import { isCrawler } from '$lib/crawler'
+import { getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injectionElements'
 
 window.PlayPilotLinkInjections = {
   token: '',
@@ -20,6 +19,7 @@ window.PlayPilotLinkInjections = {
   queued_tracking_events: [],
   split_test_identifiers: {},
   evaluated_link_injections: [],
+  initial_link_injections_promise: null,
   ads: [],
   require_consent: true,
   consents: {
@@ -32,7 +32,7 @@ window.PlayPilotLinkInjections = {
   config: {},
   app: null,
 
-  initialize(options = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, region: null, organization_sid: null, domain_sid: null, editorial_token: '', require_consent: true }): void {
+  async initialize(options = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, region: null, organization_sid: null, domain_sid: null, editorial_token: '', require_consent: true }): Promise<void> {
     if (!options.token) {
       console.error('An API token is required.')
       return
@@ -60,96 +60,32 @@ window.PlayPilotLinkInjections = {
       })
     }
 
-    if (this.app) this.destroy()
+    this.config = await fetchConfig() || {}
 
-    const target = document.createElement('div')
-    target.id = 'playpilot-link-injection'
-
-    document.body.insertAdjacentElement('beforeend', target)
+    const parentElement = getLinkInjectionsParentElement()
+    const elements = getLinkInjectionElements(parentElement, this.config.exclude_elements_selector || '')
+    const pageText = getPageText(elements)
 
-    this.app = mount(App, { target })
+    this.initial_link_injections_promise = pollLinkInjections(pageText, { maxTries: 1, runAiWhenRelevant: !isCrawler() })
+    this.mount()
   },
 
   destroy(): void {
-    if (!this.app) return
-
-    this.app = null
-
-    const target = document.getElementById('playpilot-link-injection')
-    if (target) target.remove()
-
-    clearLinkInjections()
+    window.PlayPilotMount?.destroy()
   },
 
-  debug(): void {
-    const parentElement = getLinkInjectionsParentElement()
-    const elements = getLinkInjectionElements(parentElement)
-
-    console.groupCollapsed('Config')
-    console.table(Object.entries(this))
-    console.groupEnd()
-
-    console.groupCollapsed('Elements')
-    console.log('Parent element', parentElement)
-    console.log('Valid elements', elements)
-    console.groupEnd()
+  mount(): void {
+    const script = document.createElement('script')
 
-    console.groupCollapsed('Last fetch')
-    console.log(this.last_successful_fetch)
-    console.groupEnd()
-
-    console.groupCollapsed('Meta')
-    console.log(getPageMetaData())
-    console.groupEnd()
-
-    console.groupCollapsed('Page text')
-    console.log(getPageText(elements))
-    console.groupEnd()
-
-    console.groupCollapsed('Evaluated injections')
-    console.log(this.evaluated_link_injections)
-    console.groupEnd()
-
-    console.groupCollapsed('Tracked events')
-    console.log(this.tracked_events)
-    console.groupEnd()
-
-    console.groupCollapsed('Queued tracking events')
-    console.log(this.queued_tracking_events)
-    console.groupEnd()
-
-    console.groupCollapsed('Split tests')
-    console.log(this.split_test_identifiers)
-    console.groupEnd()
-  },
+    script.src = `https://cdn.jsdelivr.net/npm/@playpilot/tpi@${__SCRIPT_VERSION__}/dist/mount.js`
+    // script.src = './dist/mount.js' // Use me during development of this script
 
-  mockAd(override = {}): void {
-    /** @ts-ignore We're not including every field here, that's ok. */
-    const campaign: Campaign = {
-      campaign_format: 'card',
-      campaign_type: 'image',
-      campaign_name: 'some_campaign',
-      content: {
-        header: 'Some content header',
-        header_logo: 'https://picsum.photos/seed/picsum/40/40',
-        header_logo_uuid: '',
-        subheader: 'Some content subheader',
-        image: 'https://picsum.photos/seed/picsum/640/360',
-        image_uuid: '',
-        video: null,
-        format: null,
-      },
-      cta: {
-        header: 'Some cta header',
-        subheader: 'Some cta subheader',
-        url: 'https://google.com/',
-        image: null,
-        image_uuid: null,
-      },
-      disclaimer: 'Some disclaimer',
+    script.onload = () => {
+      console.log('on load')
+      window.PlayPilotMount?.mount()
     }
 
-    this.ads = [{ ...campaign, ...override }]
+    document.body.insertAdjacentElement('beforeend', script)
   },
 }
 

package/src/mount.ts

@@ -0,0 +1,29 @@
+import { mount } from 'svelte'
+import App from './routes/+page.svelte'
+import { clearLinkInjections } from '$lib/injection'
+
+window.PlayPilotMount = {
+  mount(): void {
+    if (window.PlayPilotLinkInjections.app) this.destroy()
+
+    const target = document.createElement('div')
+    target.id = 'playpilot-link-injection'
+
+    document.body.insertAdjacentElement('beforeend', target)
+
+    window.PlayPilotLinkInjections.app = mount(App, { target })
+  },
+
+  destroy(): void {
+    if (!window.PlayPilotLinkInjections) return
+
+    window.PlayPilotLinkInjections.app = null
+
+    const target = document.getElementById('playpilot-link-injection')
+    if (target) target.remove()
+
+    clearLinkInjections()
+  },
+}
+
+export default window.PlayPilotLinkInjections

package/src/routes/+page.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
   import { pollLinkInjections } from '$lib/api/externalPages'
-  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/injection'
+  import { clearLinkInjections, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/injection'
+  import { getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injectionElements'
   import { fireQueuedTrackingEvents, setTrackingSids, track } from '$lib/tracking'
   import { getFullUrlPath } from '$lib/url'
   import { isCrawler } from '$lib/crawler'
@@ -65,13 +66,16 @@
   async function initialize(): Promise<void> {
     loading = true
 
-    if (isEditorialMode) authorized = await authorize()
+    try {
+      if (isEditorialMode) authorized = await authorize()
+    } catch {
+      track(TrackingEvent.AuthFailed)
+    }
 
     try {
-      const config = await fetchConfig()
       const url = getFullUrlPath()
 
-      window.PlayPilotLinkInjections.config = config
+      const config = window.PlayPilotLinkInjections.config || await fetchConfig()
 
       if (config?.custom_style) insertCustomStyle(config.custom_style || '')
       if (config?.explore_navigation_selector) insertExploreIntoNavigation()
@@ -89,9 +93,8 @@
     }
 
     try {
-      // Only trying once when not in editorial mode to prevent late injections (as well as a ton of requests)
-      // by users who are not in the editorial view.
-      response = await pollLinkInjections(pageText, { maxTries: 1, runAiWhenRelevant: !isCrawler() })
+      response = await window.PlayPilotLinkInjections.initial_link_injections_promise || null
+      response ||= await pollLinkInjections(pageText, { maxTries: 1, runAiWhenRelevant: !isCrawler() })
 
       loading = false
 

package/src/routes/components/Editorial/EditorItem.svelte

@@ -13,7 +13,8 @@
   import type { LinkInjection } from '$lib/types/injection'
   import type { TitleData } from '$lib/types/title'
   import { cleanPhrase, truncateAroundPhrase } from '$lib/text'
-  import { getLinkInjectionElements, getLinkInjectionsParentElement, isValidPlaylinkType } from '$lib/injection'
+  import { isValidPlaylinkType } from '$lib/injection'
+  import { getLinkInjectionElements, getLinkInjectionsParentElement } from '$lib/injectionElements'
   import { imagePlaceholderDataUrl } from '$lib/constants'
   import { removeImageUrlPrefix } from '$lib/image'
   import ReportIssueModal from './ReportIssueModal.svelte'

package/src/routes/components/Editorial/ManualInjection.svelte

@@ -4,7 +4,7 @@
   import { onMount } from 'svelte'
   import { playPilotBaseUrl } from '$lib/constants'
   import { generateInjectionKey } from '$lib/api/externalPages'
-  import { getLinkInjectionsParentElement } from '$lib/injection'
+  import { getLinkInjectionsParentElement } from '$lib/injectionElements'
   import { heading } from '$lib/actions/heading'
   import { findSurroundingPhrases, cleanPhrase } from '$lib/text'
   import { getIndexOfSelection } from '$lib/selection'

package/src/routes/components/Rails/ParticipantsRail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fetchParticipantsForTitle } from '$lib/api/participants'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injection'
+  import { getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injectionElements'
   import { t } from '$lib/localization'
   import { openModal } from '$lib/modal'
   import { cleanPhrase, findNumberOfMatchesInString } from '$lib/text'