@playpilot/tpi 8.35.0-beta.1 → 8.35.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.35.0-beta.1",
+	"version": "8.35.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/main.ts

@@ -83,17 +83,38 @@ window.PlayPilotLinkInjections ||= {
   },
 
   mount(): void {
+    const scriptId = 'playpilot-mount'
+    const styleId =  'playpilot-mount-style'
+
+    const ondoubleload = (event: Event): void => {
+      if (!event.target) return
+
+      (event.target as HTMLElement).dataset.loaded = 'true'
+
+      if (document.getElementById(scriptId)?.dataset.loaded !== 'true' || document.getElementById(styleId)?.dataset.loaded !== 'true') return
+
+      window.PlayPilotMount?.mount()
+    }
+
     const shouldLoadEditorial = isEditorialModeEnabled() || getAuthToken()
 
     const script = document.createElement('script')
-
-    script.id = 'playpilot-mount'
+    script.id = scriptId
     script.src = `${cdnBaseUrl}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
     // script.src = './dist/mount.js' // Use me during development of this script
+    script.defer = true
+    script.onload = ondoubleload
 
-    script.onload = () => window.PlayPilotMount?.mount()
+    const style = document.createElement('link')
+    style.id = styleId
+    style.rel = 'stylesheet'
+    style.type = 'text/css'
+    style.href = `${cdnBaseUrl}/dist/mount.css`
+    // style.href = './dist/mount.css' // Use me during development of this script
+    style.onload = ondoubleload
 
     document.body.appendChild(script)
+    document.head.appendChild(style)
   },
 }
 

package/src/tests/main.test.js

@@ -113,10 +113,11 @@ describe('main.ts', () => {
   })
 
   describe('mount', () => {
-    it('Should insert script tag', () => {
+    it('Should insert both script and style tags', () => {
       window.PlayPilotLinkInjections.mount()
 
       expect(document.querySelector('script#playpilot-mount')).toBeTruthy()
+      expect(document.querySelector('link#playpilot-mount-style')).toBeTruthy()
     })
 
     it('Should insert script tag with editorial mode if editiorial mode is enabled', () => {

package/vite._mount.config.js

@@ -2,7 +2,6 @@ import path from 'path'
 import * as dotenv from 'dotenv'
 import { defineConfig } from 'vitest/config'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import packageJson from './package.json'
 
 dotenv.config({ path: '.env' })
@@ -13,7 +12,6 @@ export default defineConfig(({ mode }) => {
   return {
     plugins: [
       svelte(),
-      cssInjectedByJsPlugin(),
       injectEnvVariables,
     ],
 
@@ -22,9 +20,9 @@ export default defineConfig(({ mode }) => {
       rollupOptions: {
         input: './src/mount.ts',
         output: {
-          format: 'iife',
           name: 'PlayPilotMount',
           entryFileNames: isEditiorial ? 'editorial.mount.js' : 'mount.js',
+          assetFileNames: (assetInfo) => assetInfo.name,
         },
       },
     },