@turbo-player/build-variant-list 1.1578.4

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 glomex GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# @turbo-player/build-variant-list
+
+A command-line tool (CLI) to build and generate variant manifests/lists for the turbo player integration.
+
+This tool uses Puppeteer under the hood to crawl or render the player configurations and export the built variant profiles.
+
+## Installation
+
+You can install this package from NPM like this:
+
+```bash
+# Using npm
+npm install @turbo-player/build-variant-list
+
+# Using pnpm
+pnpm add @turbo-player/build-variant-list
+```
+
+## Usage
+
+This package exposes a CLI executable named `build-variant-list`.
+
+### Command Line
+
+```bash
+build-variant-list
+```
+
+### Environment Variables
+
+The CLI configures itself dynamically using the following environment variables:
+
+- `VARIANTS_MANIFEST`: Path to the local compiled variants manifest file (e.g., `./build/variants-manifest.js`).
+- `INTEGRATION_TAG`: The integration tag identifier (e.g., `my-integration`).
+- `JS_FILE`: The entry JavaScript filename (e.g., `integration.js`).
+- `OUTPUT_FILE`: Path where the generated JSON list should be written (e.g., `./build/variant/list.json`).
+
+### Example Integration Script
+
+Typically, this tool is run as part of a post-build lifecycle hook in a monorepo setup:
+
+```json
+"scripts": {
+  "build:variant-list": "VARIANTS_MANIFEST=./build/variants-manifest.js INTEGRATION_TAG=my-integration JS_FILE=integration.js OUTPUT_FILE=./build/variant/list.json pnpm exec build-variant-list"
+}
+```
+
+## License
+
+This project is licensed under the [MIT License](./LICENSE.md).

package/bin/build-variant-list.d.ts

@@ -0,0 +1,5 @@
+declare global {
+    interface Window {
+    }
+}
+export {};

package/bin/build-variant-list.js

@@ -0,0 +1,334 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { join, relative, resolve } from 'node:path';
+import { serve } from '@hono/node-server';
+import { serveStatic } from '@hono/node-server/serve-static';
+import { Hono } from 'hono';
+import puppeteer from 'puppeteer';
+const INTEGRATION_NAME_PLACEHOLDER = '{{INTEGRATION_NAME}}';
+const { PORT = '8787', WAIT_TIMEOUT = '30000', VARIANTS_MANIFEST, INTEGRATION_TAG, JS_FILE, OUTPUT_FILE } = process.env;
+if (!OUTPUT_FILE) {
+    throw new Error('OUTPUT_FILE env variable needs to be defined.');
+}
+if (!VARIANTS_MANIFEST) {
+    throw new Error('VARIANTS_MANIFEST env variable needs to be defined.');
+}
+if (!INTEGRATION_TAG) {
+    throw new Error('INTEGRATION_TAG env variable needs to be defined.');
+}
+if (!JS_FILE) {
+    throw new Error('JS_FILE env variable needs to be defined.');
+}
+const manifestPath = resolve(VARIANTS_MANIFEST);
+const { default: variantsManifest } = (await import(manifestPath));
+const INTEGRATION_TAG_NAME = INTEGRATION_TAG;
+const variantNames = Object.keys(variantsManifest);
+const waitTimeout = Number(WAIT_TIMEOUT);
+if (Number.isNaN(waitTimeout)) {
+    throw new Error('WAIT_TIMEOUT env variable needs to be a number.');
+}
+const outputFile = resolve(OUTPUT_FILE);
+const resolvedBasePath = join(outputFile, '..', '..');
+// Ensure parent directory of output file exists before writing
+await mkdir(join(outputFile, '..'), { recursive: true });
+// ---------------------------------------------------------------------------
+/**
+ * Returns a minimal HTML page that loads the integration JS and mounts the
+ * integration element. This avoids a hard dependency on the pre-built
+ * integration.html; all we need is the compiled JS file and the tag name.
+ */
+function buildMinimalHtml(integrationTag, jsFile) {
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      html {
+        font-family: system-ui, sans-serif;
+        width: 100%;
+        height: 100%;
+      }
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+      ${integrationTag} {
+        height: 100%;
+      }
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      import { addIntegrationToIframe } from './${jsFile}';
+      addIntegrationToIframe(window, '${integrationTag}');
+    </script>
+  </body>
+</html>`;
+}
+// Served over HTTP because blob:nodedata:... URLs are not accessible to the browser.
+// Regenerate: ffmpeg -f lavfi -i "color=black:size=1920x1080:duration=1:rate=1" -f lavfi -i "anullsrc=r=44100:cl=stereo" -t 1 -c:v libx264 -profile:v baseline -level 3.1 -pix_fmt yuv420p -c:a aac -movflags +faststart bin/probe_1080p.mp4
+const VIDEO_BYTES = await readFile(join(import.meta.dirname, 'video_1080p.mp4'));
+const POSTER_IMAGE_BYTES = await readFile(join(import.meta.dirname, 'poster_1080p.jpg'));
+// serve static files via http server so that the browser can load the integration
+const app = new Hono();
+app.get('/integration-bootstrap', (c) => {
+    return c.html(buildMinimalHtml(INTEGRATION_TAG_NAME, JS_FILE));
+});
+app.get('/probe.mp4', (c) => {
+    return c.body(new Uint8Array(VIDEO_BYTES), 200, { 'Content-Type': 'video/mp4' });
+});
+app.get('/poster.jpg', (c) => {
+    return c.body(new Uint8Array(POSTER_IMAGE_BYTES), 200, { 'Content-Type': 'image/jpeg' });
+});
+app.use('/*', serveStatic({ root: relative(process.cwd(), resolvedBasePath) }));
+const server = serve({
+    fetch: app.fetch,
+    port: Number(PORT)
+});
+async function getCssPartsWithVariables(page, integrationName, variantName) {
+    const posterImage = `http://localhost:${PORT}/poster.jpg`;
+    const mediaItems = [
+        {
+            id: `my-video`,
+            title: `my video`,
+            poster: posterImage,
+            sources: [
+                {
+                    src: `http://localhost:${PORT}/probe.mp4`
+                }
+            ]
+        }
+    ];
+    await page
+        .goto(`http://localhost:${PORT}/integration-bootstrap?integrationId=40599x1il0m8akog&mediaItems=${encodeURIComponent(JSON.stringify(mediaItems))}&variant=${variantName}`, {
+        waitUntil: 'domcontentloaded'
+    })
+        .catch((error) => {
+        throw new Error(`Goto Failed: ${error}`);
+    });
+    await page.waitForSelector(integrationName, { timeout: waitTimeout }).catch((error) => {
+        throw new Error(`Wait for selector failed: ${error}`);
+    });
+    const result = await page
+        .evaluate(evaluateCssPartsWithVariables, integrationName, INTEGRATION_NAME_PLACEHOLDER)
+        .catch((error) => {
+        throw new Error(`eval failed: ${error}`);
+    });
+    return result;
+}
+const evaluateCssPartsWithVariables = async (integrationName, integrationNamePlaceholder) => {
+    const integration = window.document.querySelector(integrationName);
+    if (!integration) {
+        throw new Error(`Integration root "${integrationName}" not found in DOM.`);
+    }
+    await window.customElements.whenDefined(integrationName);
+    await integration.ready;
+    // Give Lit a moment to flush re-renders triggered by playlist data arriving
+    // after ready, so all child custom elements are upgraded and their shadow
+    // roots are populated before we traverse them.
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    function convertExportparts(exportparts) {
+        return exportparts
+            .toLowerCase()
+            .replace(/ /g, '')
+            .split(',')
+            .map((part) => {
+            const splitPart = part.split(':');
+            if (splitPart.length > 1) {
+                return {
+                    [splitPart[1]]: splitPart[0]
+                };
+            }
+            return {
+                [splitPart[0]]: splitPart[0]
+            };
+        })
+            .reduce((acc, currentValue) => ({
+            // biome-ignore lint/performance/noAccumulatingSpread: it is fine here
+            ...acc,
+            ...currentValue
+        }));
+    }
+    const getPart = (partName, currentNode) => {
+        const { shadowRoot } = currentNode;
+        if (shadowRoot) {
+            const partNode = shadowRoot.querySelector(`[part~=${partName}]`);
+            if (partNode?.getAttribute('part')) {
+                return partNode;
+            }
+            const exportpartsNode = shadowRoot.querySelector(`[exportparts*=${partName}]`);
+            const exportParts = exportpartsNode?.getAttribute('exportparts');
+            if (exportParts && exportpartsNode) {
+                const exportparts = convertExportparts(exportParts);
+                return getPart(exportparts[partName], exportpartsNode);
+            }
+        }
+    };
+    const getPartNodes = (givenNode, partNodes, integrationNamePlaceholder) => {
+        if (!givenNode)
+            return partNodes;
+        if (!partNodes[integrationNamePlaceholder]) {
+            partNodes[integrationNamePlaceholder] = [];
+        }
+        partNodes[integrationNamePlaceholder].push(givenNode);
+        Array.prototype.slice.call(givenNode.shadowRoot?.querySelectorAll('*')).forEach((node) => {
+            if (node.getAttribute('part')) {
+                if (partNodes[`${integrationNamePlaceholder}::part(${node.getAttribute('part')})`]) {
+                    partNodes[`${integrationNamePlaceholder}::part(${node.getAttribute('part')})`].push(node);
+                }
+                else {
+                    partNodes[`${integrationNamePlaceholder}::part(${node.getAttribute('part')})`] = [node];
+                }
+            }
+            else if (!node.assignedSlot) {
+                partNodes[integrationNamePlaceholder].push(node);
+            }
+            if (node.getAttribute('exportparts')) {
+                const exportparts = convertExportparts(node.getAttribute('exportparts'));
+                Object.keys(exportparts).forEach((part) => {
+                    const partRef = getPart(exportparts[part], node);
+                    if (!partRef)
+                        return;
+                    if (partNodes[`${integrationNamePlaceholder}::part(${part})`]) {
+                        partNodes[`${integrationNamePlaceholder}::part(${part})`].push(partRef);
+                    }
+                    else {
+                        partNodes[`${integrationNamePlaceholder}::part(${part})`] = [partRef];
+                    }
+                });
+            }
+        });
+        return partNodes;
+    };
+    const partNodes = {};
+    getPartNodes(integration, partNodes, integrationNamePlaceholder);
+    // collect CSS variables of selected parts
+    const selectorToVariables = {};
+    Object.keys(partNodes).forEach((selector) => {
+        const matchSet = new Set();
+        partNodes[selector].forEach((node) => {
+            if (node.shadowRoot) {
+                for (const stylesheet of [
+                    ...node.shadowRoot.styleSheets,
+                    ...node.shadowRoot.adoptedStyleSheets
+                ]) {
+                    let cssRules;
+                    try {
+                        // external stylesheets can't be read
+                        cssRules = stylesheet.cssRules;
+                    }
+                    catch (_e) {
+                        // ignore
+                    }
+                    if (!cssRules)
+                        continue;
+                    for (const rule of cssRules) {
+                        // TODO: maybe collecting the right-hand-side of: var(--variable, value)
+                        const matches = rule.cssText.match(/var\(--([^),]*)/gi);
+                        if (matches) {
+                            matches.forEach((match) => {
+                                if (!node?.shadowRoot)
+                                    return;
+                                const cssVariable = match.replace(/var\(/i, '');
+                                const cssValue = window
+                                    .getComputedStyle(node.shadowRoot.host)
+                                    .getPropertyValue(cssVariable);
+                                matchSet.add(`${cssVariable}: ${cssValue ? cssValue.trim() : 'initial'};`);
+                            });
+                        }
+                    }
+                }
+            }
+            selectorToVariables[selector] = [...matchSet];
+        });
+    });
+    // generate example CSS
+    // with all exposed parts and available CSS variables
+    // make sure to escape any closing CSS comments
+    let defaultCss = '';
+    Object.keys(selectorToVariables).forEach((selector) => {
+        defaultCss += `${selector}${selectorToVariables[selector].length > 0
+            ? ` {
+${selectorToVariables[selector].map((cssVar) => `  /* ${cssVar.replace(/\*\//g, '*\\/')} */`).join('\n')}
+}
+`
+            : ' {}'}
+`;
+    });
+    return defaultCss;
+};
+try {
+    (async () => {
+        const browser = await puppeteer.launch({
+            headless: true,
+            args: ['--no-sandbox', '--disable-setuid-sandbox']
+            // in case you want to execute it locally (requiring real video tag)
+            // executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
+        });
+        console.log(`Evaluate templates: ${variantNames.join(', ')}`);
+        const templateList = [];
+        for (const variantName of variantNames) {
+            console.log(`Process template: ${variantName}`);
+            const manifestVariant = variantsManifest[variantName];
+            if (!manifestVariant) {
+                console.warn(`Variant ${variantName} not found in variants-manifest.ts`);
+                continue;
+            }
+            const defaultSettings = manifestVariant.defaultSettings;
+            let templateCss = manifestVariant.defaultCss;
+            // Replace variant selector with the placeholder (e.g., [variant="adunit-billboard"] -> {{INTEGRATION_NAME}})
+            templateCss = templateCss.replace(new RegExp(`\\[variant=["']${variantName}["']\\]`, 'g'), INTEGRATION_NAME_PLACEHOLDER);
+            let page;
+            try {
+                const context = await browser.createBrowserContext();
+                page = await context.newPage();
+            }
+            catch (error) {
+                throw new Error(`Failed to create page: ${error}`);
+            }
+            // because of this issue: https://github.com/evanw/esbuild/issues/2605#issuecomment-2050808084
+            // we need to set the __name function
+            await page
+                .evaluateOnNewDocument(() => {
+                window.__name = (func) => func;
+            })
+                .catch((error) => {
+                throw new Error(`New Document Evaluation Failed: ${error}`);
+            });
+            page.on('error', (error) => {
+                console.log('error occurred: ', error);
+            });
+            page.on('pageerror', (error) => {
+                console.trace('pageerror occurred: ', error);
+                process.exit(1);
+            });
+            page.on('console', (consoleObj) => {
+                console.log('browser log', consoleObj.text());
+            });
+            const cssPartsWithVariables = await getCssPartsWithVariables(page, INTEGRATION_TAG_NAME, variantName);
+            await page.browserContext().close();
+            const finalCss = `${templateCss}\n${cssPartsWithVariables}`;
+            templateList.push({
+                defaultCss: finalCss,
+                defaultSettings,
+                variantName
+            });
+        }
+        await writeFile(outputFile, JSON.stringify(templateList, null, 2));
+        await browser.close();
+        server.close();
+    })();
+}
+catch (error) {
+    console.error(error);
+    server.close();
+    process.exit(1);
+}
+process.on('unhandledRejection', (error) => {
+    console.error('unhandledRejection', error);
+    server.close();
+    process.exit(1);
+});

package/build-variant-list.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import './bin/build-variant-list.js';

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@turbo-player/build-variant-list",
+  "version": "1.1578.4",
+  "bin": {
+    "build-variant-list": "./build-variant-list.js"
+  },
+  "description": "CLI tool to build variant lists for turbo player",
+  "type": "module",
+  "files": [
+    "LICENSE.md",
+    "build-variant-list.js",
+    "bin"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "lint": "biome ci",
+    "prepack": "npm run build",
+    "postpublish": "pnpm publish --registry=https://npm.pkg.github.com --no-git-checks --ignore-scripts"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.19.5",
+    "hono": "^4.10.2",
+    "puppeteer": "^24.33.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "catalog:",
+    "@types/node": "^22.18.10",
+    "typescript": "catalog:"
+  }
+}