@playpilot/tpi 8.21.5 → 8.21.8-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.21.5",
+	"version": "8.21.8-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -13,7 +13,8 @@
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run",
-		"release": "node release.js"
+		"release": "node release.js",
+		"postinstall": "patch-package"
 	},
 	"devDependencies": {
 		"@playpilot/retargeting-tracking": "^1.4.1",
@@ -29,16 +30,17 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^3.15.0",
 		"globals": "^15.0.0",
-		"happy-dom": "^16.8.1",
+		"happy-dom": "^20.10.6",
+		"patch-package": "^8.0.1",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"sass": "^1.99.0",
-		"svelte": "5.44.1",
-		"svelte-check": "^4.0.0",
-		"svelte-preprocess": "^6.0.3",
+		"svelte": "5.55.7",
+		"svelte-check": "^4.6.0",
+		"svelte-preprocess": "^6.0.5",
 		"svelte-tiny-slider": "^2.7.2",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.59.2",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.62.0",
 		"vite": "^5.4.21",
 		"vite-plugin-css-injected-by-js": "^4.0.1",
 		"vitest": "^2.1.9"

package/patches/svelte+5.55.7.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/svelte/src/compiler/warnings.js b/node_modules/svelte/src/compiler/warnings.js
+index 089cb1e..5003a7f 100644
+--- a/node_modules/svelte/src/compiler/warnings.js
++++ b/node_modules/svelte/src/compiler/warnings.js
+@@ -667,7 +667,7 @@ export function reactive_declaration_module_script_dependency(node) {
+  * @param {string} type
+  */
+ export function state_referenced_locally(node, name, type) {
+-	w(node, 'state_referenced_locally', `This reference only captures the initial value of \`${name}\`. Did you mean to reference it inside a ${type} instead?\nhttps://svelte.dev/e/state_referenced_locally`);
++	// w(node, 'state_referenced_locally', `This reference only captures the initial value of \`${name}\`. Did you mean to reference it inside a ${type} instead?\nhttps://svelte.dev/e/state_referenced_locally`);
+ }
+ 
+ /**

package/src/lib/api/youtubeAvailability.ts

@@ -1,7 +1,8 @@
 import { PUBLIC_YOUTUBE_AVAILABILITY_URL } from '$env/static/public'
+import { getRegionBasedOnIp } from './region'
 
 export async function isYouTubeVideoAvailableInRegion(videoId: string): Promise<boolean> {
-  const region = window.PlayPilotLinkInjections?.region?.toUpperCase()
+  const region = (await getRegionBasedOnIp())?.toUpperCase()
 
   if (!region) return true
 

package/src/lib/injectionElements.ts

@@ -17,7 +17,6 @@ export function getLinkInjectionElements(parentElement: HTMLElement, excludeElem
     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.

package/src/mount.ts

@@ -26,4 +26,4 @@ window.PlayPilotMount = {
   },
 }
 
-export default window.PlayPilotLinkInjections
+export default window.PlayPilotMount

package/src/routes/+page.svelte

@@ -215,7 +215,7 @@
           }} />
 
         {#snippet failed()}
-          <Alert fixed>An error has occured in the PlayPilot Linkinjections editor view. We've been notified and will investigate!</Alert>
+          <Alert fixed>An error has occurred in the PlayPilot Linkinjections editor view. We've been notified and will investigate!</Alert>
         {/snippet}
       </svelte:boundary>
     {/if}

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

@@ -79,7 +79,7 @@
   }
 
   function getMatchingElements(): Element[] {
-    const injectedElements = Array.from(document.querySelectorAll(`[data-playpilot-injection-key="${key}"]`))
+    const injectedElements = Array.from(document.querySelectorAll(`[data-playpilot-injection-key="${key.toString()}"]`))
     if (injectedElements.length) return injectedElements
 
     // No matching injection was found, so we try and get the element the sentence might be in.

package/src/routes/components/Explore/ExploreRouter.svelte

@@ -74,7 +74,13 @@
 
 <svelte:window on:popstate={onhashchange} />
 
-<ExploreLayout {navigate} bind:searchQuery bind:filter>
-  <CurrentRouteComponent {searchQuery} {filter} {navigate} />
-  <CurrentAppendComponent {navigate} />
-</ExploreLayout>
+<svelte:boundary onerror={(error) => console.error(error)}>
+  <ExploreLayout {navigate} bind:searchQuery bind:filter>
+    <CurrentRouteComponent {searchQuery} {filter} {navigate} />
+    <CurrentAppendComponent {navigate} />
+  </ExploreLayout>
+
+  {#snippet failed()}
+    <p>An error occurred.</p>
+  {/snippet}
+</svelte:boundary>

package/src/routes/components/SwipeHandle.svelte

@@ -77,6 +77,7 @@
 
 <svelte:window ontouchmove={move} ontouchend={end} />
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="handle" class:dragging={isDragging} class:dragged={hasBeenDragged} bind:this={handleElement} ontouchstart={start}></div>
 
 <style lang="scss">

package/src/tests/lib/api/auth.test.js

@@ -64,7 +64,7 @@ describe('$lib/api/auth', () => {
     it('Should throw error if api response was negative and throwError is true', async () => {
       vi.mocked(api).mockRejectedValueOnce({ response: '', ok: false, status: 403 })
 
-      expect(async () => await authorize({ href: 'https://example.com/some-path?articleReplacementEditToken=some-token', throwError: true })).rejects.toThrowError()
+      await expect(async () => await authorize({ href: 'https://example.com/some-path?articleReplacementEditToken=some-token', throwError: true })).rejects.toThrowError()
     })
   })
 

package/src/tests/lib/api/search.test.js

@@ -30,14 +30,14 @@ describe('$lib/api/search', () => {
     it('Should throw when response is invalid', async () => {
       vi.mocked(api).mockRejectedValueOnce({ ok: false })
 
-      expect(async () => await searchTitles('')).rejects.toThrowError()
+      await expect(async () => await searchTitles('')).rejects.toThrowError()
     })
 
     it('Should throw when no api token is given', async () => {
       // @ts-ignore
       window.PlayPilotLinkInjections = null
 
-      expect(async () => await searchTitles('')).rejects.toThrowError('No token was provided')
+      await expect(async () => await searchTitles('')).rejects.toThrowError('No token was provided')
     })
   })
 })

package/src/tests/lib/api/youtubeAvailability.test.js

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
 import { fakeFetch } from '../../helpers'
+import { getRegionBasedOnIp } from '$lib/api/region'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -10,6 +11,10 @@ vi.mock('$env/static/public', () => ({
   PUBLIC_YOUTUBE_AVAILABILITY_URL: 'https://some-path.com',
 }))
 
+vi.mock('$lib/api/region', () => ({
+  getRegionBasedOnIp: vi.fn(),
+}))
+
 describe('youtubeAvailability', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -17,6 +22,8 @@ describe('youtubeAvailability', () => {
 
     // @ts-ignore
     window.PlayPilotLinkInjections = { region: 'nl' }
+
+    vi.mocked(getRegionBasedOnIp).mockResolvedValue('nl')
   })
 
   describe('isYouTubeVideoAvailableInRegion', () => {
@@ -24,6 +31,8 @@ describe('youtubeAvailability', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections = {}
 
+      vi.mocked(getRegionBasedOnIp).mockResolvedValueOnce('')
+
       expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
       expect(global.fetch).not.toHaveBeenCalled()
     })

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

@@ -30,7 +30,7 @@ describe('injectionElements.ts', () => {
     })
 
     it('Should ignore child elements that were already included in parent text', () => {
-      document.body.innerHTML = '<section><p>Some paragraph <div>Some div</div></p></section>'
+      document.body.innerHTML = '<section><p>Some paragraph <span>Some div</span></p></section>'
       const parent = /** @type {HTMLElement} */ (document.querySelector('section'))
 
       expect(getLinkInjectionElements(parent)).toHaveLength(1)

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -109,7 +109,7 @@ describe('EditorItem.svelte', () => {
     const onhighlight = vi.fn()
     const { container } = render(EditorItem, { linkInjection, onhighlight })
 
-    await fireEvent.mouseOver(/** @type {HTMLElement} */ (document.querySelector(`[data-playpilot-injection-key=${ linkInjection.key }]`)))
+    await fireEvent.mouseOver(/** @type {HTMLElement} */ (document.querySelector(`[data-playpilot-injection-key="${ linkInjection.key }"]`)))
     expect(container.querySelector('.highlighted')).toBeTruthy()
     expect(onhighlight).toHaveBeenCalled()
   })

package/src/tests/routes/components/YouTubeEmbed.test.js

@@ -2,8 +2,14 @@ import { render } from '@testing-library/svelte'
 import { describe, expect, it } from 'vitest'
 
 import YouTubeEmbed from '../../../routes/components/YouTubeEmbed.svelte'
+import { beforeEach } from 'node:test'
+import { fakeFetch } from '../../helpers'
 
 describe('YouTubeEmbed.svelte', () => {
+  beforeEach(() => {
+    fakeFetch()
+  })
+
   it('Should render embed iframe with given video url and default options', () => {
     const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc' })
 

package/vite.config.js

@@ -20,7 +20,6 @@ export default defineConfig(() => ({
     environmentOptions: {
       happyDOM: {
         settings: {
-          enableJavaScriptEvaluation: true,
           disableJavaScriptFileLoading: true,
         },
       },