@playpilot/tpi 5.5.1 → 5.6.0

package/events.md

@@ -64,5 +64,5 @@ Event | Action | Info | Payload
 ### Split Testing
 Event | Action | Info | Payload
 --- | --- | --- | ---
-`ali_split_test_view` | _Should be fired for any active split test_ | | `key`, `variant` (0 or 1)
-`ali_split_test_action` | _Should be fired for any assertion in split tests_ | | `key` (matches the key of `ali_split_test_view`), `variant` (0 or 1), `action`
+`ali_split_test_view` | _Should be fired for any active split test_ | | `key`, `variant` (a whole number starting at 0)
+`ali_split_test_action` | _Should be fired for any assertion in split tests_ | | `key` (matches the key of `ali_split_test_view`), `variant` (a whole number starting at 0), `action`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.5.1",
+	"version": "5.6.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/enums/SplitTest.ts

@@ -0,0 +1,10 @@
+export const SplitTest = {
+  InitialTest: {
+    key: 'initial_test',
+    numberOfVariants: 2,
+  },
+  MultipleVariants: {
+    key: 'multiple_variants',
+    numberOfVariants: 4,
+  }
+} as const

package/src/lib/linkInjection.ts

@@ -219,7 +219,9 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     if (replacementIndex === -1) continue
     if (hasBeenReplaced) continue
 
-    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, injectionElement.outerHTML, replacementIndex)
+    if (!replaceIfSafeInjection(element.innerHTML, injection.title, element, injectionElement, replacementIndex)) {
+      failedMessages[injection.key] = 'Injection would have lead to broken HTML.'
+    }
   }
 
   addLinkInjectionEventListeners(validInjections)
@@ -267,6 +269,31 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   return { injectionElement, linkElement }
 }
 
+/**
+ * In some coses injections lead to broken HTML. The reason for this varies and is hard to figure out. In any case, we
+ * should never serve broken HTML.
+ * Before replacing the HTML, we apply the the replacement to a dummy element. From here we check if the number of links
+ * in the HTML increased by one. If it didn't, something went wrong. What exactly is hard to say, we just know something
+ * didn't go as intended and we should not inject.
+ *
+ * No tests exists for this function because writing tests would require finding a scenario in which things break. If we
+ * knew when things break we'd fix it instead.
+ */
+function replaceIfSafeInjection(originalHtml: string, phrase: string, sentenceElement: HTMLElement, injectionElement: HTMLElement, replacementIndex: number): boolean {
+  const dummyElement = document.createElement('div')
+  dummyElement.innerHTML = originalHtml
+
+  const startingNumberOfLinks = Array.from(dummyElement.querySelectorAll<HTMLAnchorElement>('a')).filter(a => a.innerText).length
+  dummyElement.innerHTML = replaceStartingFrom(originalHtml, phrase, injectionElement.outerHTML, replacementIndex)
+  const finalNumberOfLinks = Array.from(dummyElement.querySelectorAll<HTMLAnchorElement>('a')).filter(a => a.innerText).length
+
+  if (finalNumberOfLinks != startingNumberOfLinks + 1) return false
+
+  sentenceElement.innerHTML = dummyElement.innerHTML
+
+  return true
+}
+
 /**
  * Add all used CSS variables to a data attribute. This data attribute is then used for selectors that for each
  * individual CSS variable. This is done this way so that CSS variables are only set when they are used.
@@ -399,7 +426,14 @@ function openLinkPopover(event: MouseEvent, injection: LinkInjection): void {
  * Unmount the popover, removing it from the dom
  */
 function destroyLinkPopover(outro: boolean = true) {
-  if (!activePopoverInsertedComponent) return
+  if (!activePopoverInsertedComponent) {
+    // In some cases a popover lingers even if it should have been removed. This happens sometimes during
+    // HMR during development. In that case we remove the element straight from the dom.
+    // Doing this will prevent the outro animation from playing, but this being a fallback, that's ok.
+    document.querySelectorAll<HTMLElement>('[data-playpilot-title-popover]').forEach(element => element.remove())
+
+    return
+  }
 
   unmount(activePopoverInsertedComponent, { outro })
 

package/src/lib/splitTest.ts

@@ -1,11 +1,16 @@
 import { TrackingEvent } from "./enums/TrackingEvent"
 import { track } from "./tracking"
 
+type SplitTest = {
+  key: string
+  numberOfVariants: number
+}
+
 /**
  * Each split test uses a different split test identifier so a user can be part of one, multiple, or none, tests.
  * The identifier is saved on the window object so that it is consistent across this session.
  */
-export function getSplitTestIdentifier(key: string): number {
+export function getSplitTestIdentifier({ key }: SplitTest): number {
   const windowIdentifier = window.PlayPilotLinkInjections?.split_test_identifiers?.[key]
   if (windowIdentifier) return windowIdentifier
 
@@ -17,24 +22,24 @@ export function getSplitTestIdentifier(key: string): number {
   return randomIdentifier
 }
 
-/**
- * Split tests are either on or off with a 50/50 split. That's all we need for now.
- */
-export function isInSplitTest(key: string): boolean {
-  const identifier = getSplitTestIdentifier(key)
-  const isInSplitTest = identifier > 0.5
+export function getSplitTestVariantIndex(test: SplitTest): number {
+  const identifier = getSplitTestIdentifier(test)
+
+  return Math.floor(identifier * test.numberOfVariants)
+}
 
-  return isInSplitTest
+export function isInSplitTestVariant(test: SplitTest, variant = 1): boolean {
+  return getSplitTestVariantIndex(test) === variant
 }
 
-export function trackSplitTestView(key: string): void {
-  const variant = isInSplitTest(key) ? 1 : 0
+export function trackSplitTestView(test: SplitTest): void {
+  const variant = getSplitTestVariantIndex(test)
 
-  track(TrackingEvent.SplitTestView, null, { key, variant })
+  track(TrackingEvent.SplitTestView, null, { key: test.key, variant })
 }
 
-export function trackSplitTestAction(key: string, action: string): void {
-  const variant = isInSplitTest(key) ? 1 : 0
+export function trackSplitTestAction(test: SplitTest, action: string): void {
+  const variant = getSplitTestVariantIndex(test) ? 1 : 0
 
-  track(TrackingEvent.SplitTestAction, null, { key, variant, action })
+  track(TrackingEvent.SplitTestAction, null, { key: test.key, variant, action })
 }

package/src/routes/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { browser } from '$app/environment'
   import { page } from '$app/state'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { getSplitTestVariantIndex } from '$lib/splitTest'
 
   /**
    * !! NOTE: This layout file is for development purposes only and will not be compiled with the final script.
@@ -75,6 +77,8 @@
 
       {#if browser}
         {@render children()}
+
+        Viewing with split test index: {getSplitTestVariantIndex(SplitTest.MultipleVariants)}
       {/if}
     {/key}
   {/if}

package/src/routes/+page.svelte

@@ -8,6 +8,7 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/auth'
   import { trackSplitTestView } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
@@ -42,7 +43,7 @@
       await initialize()
       track(TrackingEvent.ArticlePageView)
 
-      trackSplitTestView('initial_test')
+      trackSplitTestView(SplitTest.MultipleVariants)
     })()
 
     return () => clearLinkInjections()

package/src/routes/components/DragHandle.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  interface Props {
+    target?: HTMLElement
+    threshold?: number
+    isDragging?: boolean
+    passedThreshold?: boolean
+    onpassed: () => void
+  }
+
+  let {
+    target,
+    threshold = 100,
+    isDragging = $bindable(false),
+    passedThreshold = $bindable(false),
+    onpassed = () => null,
+  }: Props = $props()
+
+  let movementStartY = $state(0)
+  let movementCurrentY = $state(0)
+  let handleElement: HTMLElement | null = $state(null)
+  let hasBeenDragged = $state(false) // This is used to prevent the element from transitioning into view on mount
+
+  const difference = $derived(Math.max(movementCurrentY - movementStartY, 0))
+
+  $effect(() => {
+    passedThreshold = difference > threshold
+  })
+
+  export function start(event: TouchEvent): void {
+    if (!event) return
+    if (!target) return
+
+    isDragging = true
+    hasBeenDragged = true
+
+    movementStartY = event.touches[0].pageY
+    target.style.transitionDuration = '0ms'
+  }
+
+  export function move(event: TouchEvent): void {
+    if (!event) return
+    if (!target) return
+    if (!isDragging) return
+
+    movementCurrentY = event.touches[0].pageY
+
+    target.style.transform = `translateY(${difference}px)`
+    handleElement!.style.transform = `translateY(${difference}px)`
+  }
+
+  export function end(): void {
+    if (!target) return
+    if (!isDragging) return
+
+    isDragging = false
+
+    if (passedThreshold) {
+      onpassed()
+    } else {
+      target.removeAttribute('style')
+      handleElement!.removeAttribute('style')
+    }
+
+    movementStartY = 0
+    movementCurrentY = 0
+  }
+</script>
+
+<svelte:window ontouchmove={move} ontouchend={end} />
+
+<div class="handle" class:dragging={isDragging} class:dragged={hasBeenDragged} bind:this={handleElement} ontouchstart={start}></div>
+
+<style lang="scss">
+  .handle {
+    position: relative;
+    width: 100%;
+    height: var(--playpilot-drag-handle-height, margin(3));
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: calc(50% - (var(--playpilot-drag-handle-bar-height, margin(0.25)) / 2));
+      width: 100%;
+      height: var(--playpilot-drag-handle-bar-height, margin(0.25));
+      border-radius: margin(1);
+      background: var(--playpilot-drag-handle-color, currentColor);
+      opacity: 0.65;
+      transition: opacity 100ms, scale 100ms;
+    }
+
+    &.dragged {
+      transition: transform 200ms;
+    }
+
+    &.dragging {
+      transition: none;
+
+      &::before {
+        scale: 1.5 1;
+        opacity: 1;
+      }
+    }
+  }
+</style>

package/src/routes/components/Modal.svelte

@@ -2,6 +2,7 @@
   import { fade, fly, scale, type TransitionConfig } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
   import RoundButton from './RoundButton.svelte'
+  import DragHandle from './DragHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
   import { prefersReducedMotion } from 'svelte/motion'
 
@@ -13,6 +14,15 @@
 
   const { children, onclose = () => null, onscroll = () => null }: Props = $props()
 
+  let windowWidth = $state(0)
+  let dialogElement: HTMLElement | null = $state(null)
+  let dragHandleOffset: number = $state(0)
+
+  const isMobile = $derived(windowWidth < 600)
+
+  $effect(() => { if (windowWidth) dragHandleOffset = dialogElement?.offsetTop || 0 })
+  $effect(() => { setTimeout(() => dragHandleOffset = dialogElement?.offsetTop || 0) }) // Set after the dialog has shown to get the proper height
+
   setContext('scope', 'modal')
 
   onMount(() => {
@@ -25,17 +35,21 @@
   function scaleOrFly(node: Element): TransitionConfig {
     if (prefersReducedMotion.current) return fade(node, { duration: 0 })
 
-    const shouldFly = window.innerWidth < 600
-
-    if (shouldFly) return fly(node, { duration: 250, y: window.innerHeight })
+    if (isMobile) return fly(node, { duration: 250, y: window.innerHeight })
     return scale(node, { duration: 150, start: 0.85 })
   }
 </script>
 
-<svelte:window on:keydown={({ key }) => { if (key === 'Escape') onclose() }} />
+<svelte:window onkeydown={({ key }) => { if (key === 'Escape') onclose() }} bind:innerWidth={windowWidth} />
 
 <div class="modal" transition:fade|global={{ duration: 150 }}>
-  <div class="dialog" {onscroll} role="dialog" aria-labelledby="title" transition:scaleOrFly|global data-view-transition-new>
+  {#if isMobile}
+    <div class="drag-handle" style:top="{dragHandleOffset}px" transition:scaleOrFly|global>
+      <DragHandle target={dialogElement!} onpassed={() => onclose()} />
+    </div>
+  {/if}
+
+  <div class="dialog" {onscroll} bind:this={dialogElement} role="dialog" aria-labelledby="title" transition:scaleOrFly|global data-view-transition-new>
     <div class="close">
       <RoundButton onclick={() => onclose()}>
         <IconClose />
@@ -80,6 +94,7 @@
     margin-top: auto;
     border-radius: var(--playpilot-detail-border-radius, margin(1) margin(1) 0 0);
     background: var(--playpilot-detail-background, var(--playpilot-light));
+    transition: transform 200ms;
 
     @media (min-width: 600px) {
       margin-top: 0;
@@ -88,7 +103,6 @@
     }
   }
 
-
   .backdrop {
     z-index: 0;
     position: absolute;
@@ -98,6 +112,15 @@
     left: 0;
   }
 
+  .drag-handle {
+    z-index: 5;
+    position: absolute;
+    left: 50%;
+    transform: translateY(margin(-0.5)) translateX(-50%);
+    width: margin(7);
+    color: var(--playpilot-text-color);
+  }
+
   .close {
     --playpilot-button-background: var(--playpilot-modal-close-button-background, var(--playpilot-content));
     --playpilot-button-shadow: var(--playpilot-modal-close-button-shadow, var(--playpilot-shadow));

package/src/routes/components/TitleModal.svelte

@@ -2,7 +2,6 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
-  import { trackSplitTestAction } from '$lib/splitTest'
   import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
@@ -21,8 +20,6 @@
   onMount(() => {
     const openTimestamp = Date.now()
 
-    trackSplitTestAction('initial_test', 'modal')
-
     return () => track(TrackingEvent.TitleModalClose, title, { time_spent: Date.now() - openTimestamp })
   })
 

package/src/tests/lib/splitTest.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import { getSplitTestIdentifier, isInSplitTest, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
+import { getSplitTestIdentifier, getSplitTestVariantIndex, isInSplitTestVariant, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
@@ -8,6 +8,11 @@ vi.mock('$lib/tracking', () => ({
 }))
 
 describe('$lib/splitTest', () => {
+  const splitTest = {
+    key: 'Some key',
+    numberOfVariants: 2,
+  }
+
   describe('getSplitTestIdentifier', () => {
     afterEach(() => {
       // @ts-ignore
@@ -20,11 +25,11 @@ describe('$lib/splitTest', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections = {}
 
-      const value = getSplitTestIdentifier('Some key')
+      const value = getSplitTestIdentifier(splitTest)
 
-      expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({ 'Some key': value })
+      expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({ [splitTest.key]: value })
       // @ts-ignore
-      expect(value).toBe(window.PlayPilotLinkInjections.split_test_identifiers['Some key'])
+      expect(value).toBe(window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key])
     })
 
     it('Should return value as stored in the window object', () => {
@@ -32,46 +37,69 @@ describe('$lib/splitTest', () => {
       window.PlayPilotLinkInjections.split_test_identifiers = {}
       window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.5
 
-      expect(getSplitTestIdentifier('Some key')).toBe(0.5)
+      expect(getSplitTestIdentifier(splitTest)).toBe(0.5)
     })
 
     it('Should set separate value for different keys', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections.split_test_identifiers = {}
 
-      getSplitTestIdentifier('Some key')
-      getSplitTestIdentifier('Some other key')
+      getSplitTestIdentifier(splitTest)
+      getSplitTestIdentifier({ key: 'Some other key', numberOfVariants: 2 })
 
       expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({
-        'Some key': expect.any(Number),
+        [splitTest.key]: expect.any(Number),
         'Some other key': expect.any(Number),
       })
     })
   })
 
-  describe('isInSplitTest', () => {
+  describe('isInSplitTestVariant', () => {
     it('Should return true if stored value is higher than 0.5', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections.split_test_identifiers = {}
-      window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.75
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.75
 
-      expect(isInSplitTest('Some key')).toBe(true)
+      expect(isInSplitTestVariant(splitTest)).toBe(true)
     })
 
     it('Should return false if stored value is lower than 0.5', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections.split_test_identifiers = {}
-      window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.25
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.25
+
+      expect(isInSplitTestVariant(splitTest)).toBe(false)
+    })
+
+    it('Should return correct values when numberOfVariants is given based on the stored value', () => {
+      const multiple = { key: 'multiple', numberOfVariants: 3 }
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.25
+
+
+      expect(isInSplitTestVariant(multiple, 0)).toBe(true)
+      expect(isInSplitTestVariant(multiple, 1)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 2)).toBe(false)
 
-      expect(isInSplitTest('Some key')).toBe(false)
+      window.PlayPilotLinkInjections.split_test_identifiers['multiple'] = 0.5
+      expect(isInSplitTestVariant(multiple, 0)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 1)).toBe(true)
+      expect(isInSplitTestVariant(multiple, 2)).toBe(false)
+
+      window.PlayPilotLinkInjections.split_test_identifiers['multiple'] = 0.75
+      expect(isInSplitTestVariant(multiple, 0)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 1)).toBe(false)
+      expect(isInSplitTestVariant(multiple, 2)).toBe(true)
     })
   })
 
   describe('trackSplitTestView', () => {
     it('Should track view event with the given key', () => {
-      trackSplitTestView('Some key')
+      trackSplitTestView(splitTest)
 
-      const variant = isInSplitTest('Some key') ? 1 : 0
+      const variant = isInSplitTestVariant(splitTest) ? 1 : 0
 
       expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestView, null, { key: 'Some key', variant })
     })
@@ -79,10 +107,61 @@ describe('$lib/splitTest', () => {
 
   describe('trackSplitTestAction', () => {
     it('Should track action event with the given key and action', () => {
-      trackSplitTestAction('Some key', 'Some action')
-      const variant = isInSplitTest('Some key') ? 1 : 0
+      trackSplitTestAction(splitTest, 'Some action')
+      const variant = isInSplitTestVariant(splitTest) ? 1 : 0
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestAction, null, { key: splitTest.key, variant, action: 'Some action' })
+    })
+  })
+
+  describe('getSplitTestVariantIndex', () => {
+    it('Should return the expected index split test consists of 2 variants', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.25
+      expect(getSplitTestVariantIndex(splitTest)).toBe(0)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[splitTest.key] = 0.75
+      expect(getSplitTestVariantIndex(splitTest)).toBe(1)
+    })
+
+    it('Should return the expected index when split test includes more than 2 variants', () => {
+      const multiple = { key: 'multiple', numberOfVariants: 3 }
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.25
+      expect(getSplitTestVariantIndex(multiple)).toBe(0)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.5
+      expect(getSplitTestVariantIndex(multiple)).toBe(1)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[multiple.key] = 0.75
+      expect(getSplitTestVariantIndex(multiple)).toBe(2)
+    })
+
+    it('Should return the expected index when split test includes a large amount of variants', () => {
+      const many = { key: 'many', numberOfVariants: 10 }
+
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.05
+      expect(getSplitTestVariantIndex(many)).toBe(0)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.35
+      expect(getSplitTestVariantIndex(many)).toBe(3)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.65
+      expect(getSplitTestVariantIndex(many)).toBe(6)
+
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.78
+      expect(getSplitTestVariantIndex(many)).toBe(7)
 
-      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestAction, null, { key: 'Some key', variant, action: 'Some action' })
+      window.PlayPilotLinkInjections.split_test_identifiers[many.key] = 0.98
+      expect(getSplitTestVariantIndex(many)).toBe(9)
     })
   })
 })