@skyramp/skyramp 1.3.10 → 1.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyramp/skyramp",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "description": "module for leveraging skyramp cli functionality",
   "scripts": {
     "lint": "eslint 'src/**/*.js' 'src/**/*.ts' --fix",
@@ -14,7 +14,9 @@
     "src/*.js",
     "src/*.ts",
     "src/classes/*.js",
-    "src/classes/*.ts"
+    "src/classes/*.ts",
+    "src/pdfViewer/*.js",
+    "src/pdfViewer/*.ts"
   ],
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -32,4 +34,4 @@
     "@typescript-eslint/parser": "^6.14.0",
     "eslint": "^8.55.0"
   }
-}
+}

package/scripts/build-pdf-bundle.js

@@ -0,0 +1,141 @@
+#!/usr/bin/env node
+
+/**
+ * Builds bundle.js from Playwright's pdfJsViewer.ts using TypeScript's transpileModule.
+ * This correctly handles all TypeScript syntax without regex-based stripping.
+ *
+ * Usage:
+ *   node scripts/build-pdf-bundle.js [playwright-root-path]
+ *   PLAYWRIGHT_ROOT=/path/to/playwright node scripts/build-pdf-bundle.js
+ *
+ * NOTE: This replaces the regex-based generate-pdf-bundle.js approach which had
+ * issues stripping complex TypeScript types and template literal strings.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Get Playwright root from env var, command line arg, or default relative path
+const PLAYWRIGHT_ROOT = process.env.PLAYWRIGHT_ROOT
+  || process.argv[2]
+  || path.resolve(__dirname, '../../../..');
+
+const VIEWER_SOURCE = path.join(PLAYWRIGHT_ROOT, 'packages/injected/src/recorder/skyramp/pdfJsViewer.ts');
+const EXECUTION_HELPERS = path.join(__dirname, 'pdf-execution-helpers.js');
+const OUTPUT_FILE = path.join(__dirname, '../src/pdfViewer/bundle.js');
+
+// TypeScript is available in the Playwright repo
+const TS_MODULE = path.join(PLAYWRIGHT_ROOT, 'node_modules/typescript');
+
+console.log('[PDF Bundle Builder]');
+console.log('Playwright root:', PLAYWRIGHT_ROOT);
+console.log('Source:', VIEWER_SOURCE);
+console.log('Helpers:', EXECUTION_HELPERS);
+console.log('Output:', OUTPUT_FILE);
+console.log();
+
+if (!fs.existsSync(VIEWER_SOURCE)) {
+  console.error('Error: pdfJsViewer.ts not found at:', VIEWER_SOURCE);
+  process.exit(1);
+}
+if (!fs.existsSync(EXECUTION_HELPERS)) {
+  console.error('Error: pdf-execution-helpers.js not found at:', EXECUTION_HELPERS);
+  process.exit(1);
+}
+if (!fs.existsSync(TS_MODULE)) {
+  console.error('Error: typescript not found at:', TS_MODULE);
+  process.exit(1);
+}
+
+const ts = require(TS_MODULE);
+
+// Step 1: Use TypeScript's transpileModule to get clean JS (no regex stripping needed)
+console.log('Transpiling TypeScript...');
+const source = fs.readFileSync(VIEWER_SOURCE, 'utf8');
+const result = ts.transpileModule(source, {
+  compilerOptions: {
+    target: ts.ScriptTarget.ES2020,
+    module: ts.ModuleKind.None,
+    removeComments: false,
+  }
+});
+
+const transpiledCode = result.outputText;
+
+// Step 2: Extract just the class (strip CommonJS boilerplate added by transpileModule)
+const classStart = transpiledCode.indexOf('class PdfJsViewer');
+const exportsLine = transpiledCode.lastIndexOf('exports.PdfJsViewer = PdfJsViewer;');
+if (classStart === -1 || exportsLine === -1) {
+  console.error('Error: Could not locate PdfJsViewer class in transpiled output');
+  process.exit(1);
+}
+const classCode = transpiledCode.substring(classStart, exportsLine).trim();
+console.log('Class extracted:', classCode.length, 'bytes');
+
+// Step 3: Read execution helpers
+const executionHelpers = fs.readFileSync(EXECUTION_HELPERS, 'utf8');
+
+// Step 4: Escape for embedding inside the outer template literal in bundle.js.
+// JS template literals process escape sequences, so backslashes must be doubled,
+// backticks must be escaped, and ${ must be escaped to prevent interpolation.
+function escapeForTemplateLiteral(code) {
+  return code
+    .replace(/\\/g, '\\\\')    // \ -> \\
+    .replace(/`/g, '\\`')      // ` -> \`
+    .replace(/\$\{/g, '\\${'); // ${ -> \${
+}
+
+const classEscaped = escapeForTemplateLiteral(classCode);
+const helpersEscaped = escapeForTemplateLiteral(executionHelpers);
+
+// Step 5: Build the bundle
+const bundle = `/**
+ * Copyright (c) Skyramp Corporation.
+ *
+ * Bundled PDF.js viewer for execution-time injection
+ * This is a self-contained JavaScript string that can be injected via page.addInitScript()
+ *
+ * AUTO-GENERATED from Playwright sources by scripts/build-pdf-bundle.js
+ * DO NOT EDIT THIS FILE DIRECTLY - edit pdfJsViewer.ts instead and regenerate
+ *
+ * Source files:
+ * - PdfJsViewer class: ${VIEWER_SOURCE}
+ * - Execution helpers: ${EXECUTION_HELPERS}
+ */
+
+/**
+ * Self-contained PDF viewer injection script
+ * This script will be injected into pages during test execution to replace Chrome's PDF plugin with PDF.js
+ */
+const PDF_VIEWER_INJECTION_SCRIPT = \`
+(function() {
+  'use strict';
+
+  console.log('[PW-PDF] PDF viewer injection script initializing...');
+
+  // =============================================================================
+  // PDF.js Viewer Class (auto-generated from pdfJsViewer.ts)
+  // =============================================================================
+
+  ${classEscaped}
+
+  ${helpersEscaped}
+
+  console.log('[PW-PDF] PDF viewer injection script loaded');
+})();
+\`;
+
+module.exports = { PDF_VIEWER_INJECTION_SCRIPT };
+`;
+
+fs.writeFileSync(OUTPUT_FILE, bundle, 'utf8');
+const stats = fs.statSync(OUTPUT_FILE);
+console.log();
+console.log('Bundle generated successfully!');
+console.log('  Output:', OUTPUT_FILE);
+console.log('  Size:', (stats.size / 1024).toFixed(2), 'KB');
+console.log();
+console.log('Next steps:');
+console.log('  1. Validate: node -e "const {PDF_VIEWER_INJECTION_SCRIPT}=require(\'./src/pdfViewer/bundle.js\');require(\'fs\').writeFileSync(\'/tmp/t.js\',PDF_VIEWER_INJECTION_SCRIPT)" && node --check /tmp/t.js');
+console.log('  2. Pack:     npm pack');
+console.log('  3. Install:  npm install <path-to-.tgz>');

package/scripts/pdf-execution-helpers.js

@@ -0,0 +1,340 @@
+  // =============================================================================
+  // Helper Functions (execution-specific)
+  // =============================================================================
+
+  /**
+   * Fetches a PDF from a URL and converts it to a data URL
+   * Uses fetch() which will be intercepted by route handler during execution
+   */
+  async function fetchPdfAsDataUrl(pdfUrl) {
+    try {
+      console.log('[PW-PDF] Fetching PDF:', pdfUrl.substring(0, 100));
+
+      // During execution, this fetch will be intercepted by Playwright's route handler
+      const response = await fetch(pdfUrl);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const arrayBuffer = await response.arrayBuffer();
+      const base64 = btoa(
+        new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
+      );
+
+      const dataUrl = `data:application/pdf;base64,${base64}`;
+      console.log('[PW-PDF] ✅ PDF fetched successfully');
+
+      return dataUrl;
+    } catch (error) {
+      console.error('[PW-PDF] ❌ Failed to fetch PDF:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Checks if the current page itself is a PDF document
+   */
+  function isCurrentPagePdf() {
+    const url = window.location.href;
+
+    // Check URL ends with .pdf
+    if (url.toLowerCase().endsWith('.pdf')) {
+      console.log('[PW-PDF] URL ends with .pdf:', url);
+      return true;
+    }
+
+    // Check for PDF plugin embed that takes up the whole page
+    const fullPageEmbed = document.querySelector('embed[type="application/pdf"]');
+    if (fullPageEmbed && document.body.children.length === 1) {
+      console.log('[PW-PDF] Found full-page PDF embed');
+      return true;
+    }
+
+    // Check if URL contains .pdf (including S3 URLs with .pdf)
+    if (url.toLowerCase().includes('.pdf')) {
+      console.log('[PW-PDF] PDF URL detected:', url);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Replaces the entire page with PDF.js viewer when the page itself is a PDF
+   */
+  async function replacePdfPage() {
+    try {
+      // Get PDF URL from current page URL
+      const pdfUrl = window.location.href;
+      console.log('[PW-PDF] Replacing full-page PDF with PDF.js viewer:', pdfUrl.substring(0, 100));
+
+      // Fetch PDF
+      const dataUrl = await fetchPdfAsDataUrl(pdfUrl);
+      if (!dataUrl) {
+        throw new Error('Failed to fetch PDF');
+      }
+
+      // Clear the document body
+      document.body.innerHTML = '';
+
+      // Create container for PDF.js viewer
+      const container = document.createElement('div');
+      container.setAttribute('data-pw-pdf-viewer', 'true');
+      container.id = 'pw-pdf-viewer-container';
+      container.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2147483647;
+        background: #525252;
+      `;
+
+      document.body.appendChild(container);
+
+      // Extract filename from URL
+      let filename = 'Document.pdf';
+      try {
+        const url = new URL(pdfUrl);
+        const pathname = url.pathname;
+        const lastSlash = pathname.lastIndexOf('/');
+        if (lastSlash !== -1) {
+          filename = pathname.substring(lastSlash + 1);
+          filename = decodeURIComponent(filename);
+        }
+      } catch (e) {
+        console.warn('[PW-PDF] Failed to extract filename from URL:', e);
+      }
+
+      // Create PDF.js viewer
+      const viewer = new PdfJsViewer(container);
+
+      // Render the PDF
+      await viewer.renderPdf({
+        pdfDataUrl: dataUrl,
+        filename,
+        onReady: () => {
+          console.log('[PW-PDF] ✅ Full-page PDF replaced with PDF.js viewer');
+        },
+        onError: (error) => {
+          console.error('[PW-PDF] ❌ Failed to render full-page PDF:', error);
+        }
+      });
+
+      return true;
+    } catch (error) {
+      console.error('[PW-PDF] Error replacing full-page PDF:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Replaces a single PDF embed with PDF.js viewer
+   */
+  async function replacePdfEmbed(embed) {
+    try {
+      // Get PDF URL
+      let pdfUrl = embed.getAttribute('src');
+
+      // If src is about:blank, use the page URL (the page itself is the PDF)
+      if (!pdfUrl || pdfUrl === 'about:blank') {
+        console.log('[PW-PDF] Embed has src="about:blank", using page URL as PDF URL...');
+        pdfUrl = window.location.href;
+
+        // Verify it looks like a PDF URL
+        if (!pdfUrl.includes('.pdf')) {
+          console.log('[PW-PDF] Page URL does not appear to be a PDF, skipping');
+          return false;
+        }
+
+        console.log('[PW-PDF] Using page URL as PDF:', pdfUrl.substring(0, 100));
+      }
+
+      console.log('[PW-PDF] Replacing PDF embed with PDF.js viewer:', pdfUrl.substring(0, 100));
+
+      // Fetch PDF
+      const dataUrl = await fetchPdfAsDataUrl(pdfUrl);
+      if (!dataUrl) {
+        throw new Error('Failed to fetch PDF');
+      }
+
+      // Create container for PDF.js viewer
+      const container = document.createElement('div');
+      container.setAttribute('data-pw-pdf-viewer', 'true');
+      container.style.cssText = `
+        position: absolute;
+        top: ${embed.offsetTop}px;
+        left: ${embed.offsetLeft}px;
+        width: ${embed.offsetWidth || 800}px;
+        height: ${embed.offsetHeight || 600}px;
+        z-index: 2147483647;
+        background: #525252;
+      `;
+
+      // Insert container next to embed
+      const parent = embed.parentNode;
+      if (!parent) return false;
+
+      parent.insertBefore(container, embed);
+
+      // Hide original embed
+      embed.style.display = 'none';
+
+      // Extract filename from URL
+      let filename = 'Document.pdf';
+      try {
+        const url = new URL(pdfUrl);
+        const pathname = url.pathname;
+        const lastSlash = pathname.lastIndexOf('/');
+        if (lastSlash !== -1) {
+          filename = pathname.substring(lastSlash + 1);
+          filename = decodeURIComponent(filename);
+        }
+      } catch (e) {
+        console.warn('[PW-PDF] Failed to extract filename from URL:', e);
+      }
+
+      // Create PDF.js viewer
+      const viewer = new PdfJsViewer(container);
+
+      // Render the PDF
+      await viewer.renderPdf({
+        pdfDataUrl: dataUrl,
+        filename,
+        onReady: () => {
+          console.log('[PW-PDF] ✅ PDF embed replaced successfully');
+        },
+        onError: (error) => {
+          console.error('[PW-PDF] ❌ Failed to render PDF:', error);
+          // Restore original embed on error
+          embed.style.display = '';
+          if (container.parentNode) {
+            container.parentNode.removeChild(container);
+          }
+        }
+      });
+
+      return true;
+    } catch (error) {
+      console.error('[PW-PDF] Error replacing PDF embed:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Detects and replaces PDF embeds with PDF.js viewers
+   */
+  async function detectAndReplacePdfs() {
+    console.log('[PW-PDF] Scanning for PDF embeds...');
+
+    // Check if we've already replaced a full-page PDF (prevent infinite loop)
+    if (window.__pwPdfPageReplaced) {
+      console.log('[PW-PDF] PDF page already replaced, skipping detection');
+      return;
+    }
+
+    // Check if the current page itself is a PDF document
+    const isPdfPage = isCurrentPagePdf();
+    if (isPdfPage) {
+      console.log('[PW-PDF] Current page is a PDF document, replacing with PDF.js viewer...');
+      window.__pwPdfPageReplaced = true;
+      await replacePdfPage();
+      return;
+    }
+
+    // Find all embed and iframe elements
+    const embeds = document.querySelectorAll('embed[type="application/pdf"], iframe[src*=".pdf"]');
+
+    if (embeds.length === 0) {
+      console.log('[PW-PDF] No PDF embeds found');
+      return;
+    }
+
+    console.log(`[PW-PDF] Found ${embeds.length} PDF embed(s)`);
+
+    for (const embed of embeds) {
+      await replacePdfEmbed(embed);
+    }
+  }
+
+  // =============================================================================
+  // Window.open() Interception (for headless mode)
+  // =============================================================================
+
+  /**
+   * Sets up window.open() interception to detect PDF URLs
+   */
+  function setupPdfPopupInterception() {
+    const originalOpen = window.open;
+    window.open = function(url, target, features) {
+      // Check if URL is a PDF (ends with .pdf or contains PDF indicators)
+      const isPdf = url && url.toLowerCase().includes('.pdf');
+
+      if (isPdf) {
+        console.log('[PW-PDF] Intercepted window.open() to PDF:', url);
+
+        // Let the popup open normally (to about:blank or target URL)
+        const popup = originalOpen.call(this, url, target, features);
+
+        // If popup opened successfully, store PDF URL for it to access
+        if (popup && !popup.closed) {
+          popup.__pw_pdfUrl = url;
+
+          // The popup will detect __pw_pdfUrl and render with PDF.js
+          setTimeout(() => {
+            if (popup.__pw_detectAndReplacePdfs) {
+              popup.__pw_detectAndReplacePdfs();
+            }
+          }, 100);
+        }
+
+        return popup;
+      }
+
+      // Not a PDF, let window.open() work normally
+      return originalOpen.apply(this, arguments);
+    };
+  }
+
+  // =============================================================================
+  // Expose Functions and Classes Globally
+  // =============================================================================
+
+  window.PdfJsViewer = PdfJsViewer;  // Expose class for direct instantiation
+  window.__pw_detectAndReplacePdfs = detectAndReplacePdfs;
+  window.__pw_setupPdfPopupInterception = setupPdfPopupInterception;
+
+  // =============================================================================
+  // Auto-detect PDFs on page load
+  // =============================================================================
+
+  // Auto-detect if current page is a PDF popup that needs rendering
+  if (window.__pw_pdfUrl && !window.__pwPdfRendered) {
+    window.__pwPdfRendered = true;
+
+    // Wait for DOM ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        window.__pw_detectAndReplacePdfs();
+      });
+    } else {
+      window.__pw_detectAndReplacePdfs();
+    }
+  }
+
+  // Also auto-detect on every page load (for direct navigation to PDFs)
+  // This runs after the page has fully loaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      console.log('[PW-PDF] DOMContentLoaded - checking for PDFs...');
+      window.__pw_detectAndReplacePdfs();
+    });
+  } else if (document.readyState === 'interactive' || document.readyState === 'complete') {
+    // If DOM is already ready, run detection immediately
+    console.log('[PW-PDF] DOM already ready - checking for PDFs...');
+    setTimeout(() => {
+      window.__pw_detectAndReplacePdfs();
+    }, 100); // Small delay to let browser plugin initialize
+  }

package/src/classes/MockV2.d.ts

@@ -12,15 +12,10 @@ export class MockV2 {
   URL: string;
   
   /**
-   * The endpoint path to mock (e.g., "/api/v1/products")
+   * The path to mock (e.g., "/api/v1/products")
    */
-  endpoint: string;
-  
-  /**
-   * The port number of the service
-   */
-  port: number;
-  
+  path: string;
+
   /**
    * The HTTP method (GET, POST, PUT, DELETE, etc.)
    */
@@ -29,7 +24,7 @@ export class MockV2 {
   /**
    * The HTTP status code to return
    */
-  responseStatusCode: number;
+  statusCode: number;
   
   /**
    * The response body to return
@@ -49,8 +44,7 @@ export class MockV2 {
   /**
    * Creates a new MockV2 instance
    * @param URL - The URL of the service to mock
-   * @param endpoint - The endpoint path to mock (e.g., "/api/v1/products")
-   * @param port - The port number of the service
+   * @param path - The path path to mock (e.g., "/api/v1/products")
    * @param method - The HTTP method (GET, POST, PUT, DELETE, etc.)
    * @param responseStatusCode - The HTTP status code to return
    * @param responseBody - The response body to return
@@ -59,10 +53,9 @@ export class MockV2 {
    */
   constructor(
     URL: string,
-    endpoint: string,
-    port: number,
+    path: string,
     method: string,
-    responseStatusCode: number,
+    statusCode: number,
     responseBody: string,
     requestBody?: string | null,
     dataOverride?: Record<string, unknown> | null
@@ -74,8 +67,7 @@ export class MockV2 {
    */
   toDict(): {
     url: string;
-    endpoint: string;
-    port: number;
+    path: string;
     method: string;
     status_code: number;
     response_body: string;
@@ -90,4 +82,4 @@ export class MockV2 {
   toJSON(): string;
 }
 
-export default MockV2;
+export default MockV2;

package/src/classes/MockV2.js

@@ -5,24 +5,23 @@
 class MockV2 {
   /**
    * Represents a mock object configuration for API endpoint mocking.
-   * @param {string} URL - The URL of the service to mock
-   * @param {string} endpoint - The endpoint path to mock (e.g., "/api/v1/products")
-   * @param {number} port - The port number of the service
-   * @param {string} method - The HTTP method (GET, POST, PUT, DELETE, etc.)
-   * @param {number} responseStatusCode - The HTTP status code to return
-   * @param {string} responseBody - The response body to return
-   * @param {string} [requestBody] - Optional request body to match
-   * @param {Object} [dataOverride] - Optional data override object
+   * @param {Object} [options={}] - The options for creating the mock.
+   * @param {string} [options.url=''] - The URL of the service to mock
+   * @param {string} [options.path=''] - The path to mock (e.g., "/api/v1/products")
+   * @param {string} [options.method=''] - The HTTP method (GET, POST, PUT, DELETE, etc.)
+   * @param {number} [options.statusCode=201] - The HTTP status code to return
+   * @param {string} [options.responseBody=''] - The response body to return
+   * @param {string} [options.requestBody=''] - Optional request body to match
+   * @param {Object.<string, *>} [options.dataOverride={}] - Optional data override object
    */
-  constructor(URL, endpoint, port, method, responseStatusCode, responseBody, requestBody = null, dataOverride = null) {
-    this.URL = URL;
-    this.endpoint = endpoint;
-    this.port = port;
-    this.method = method;
-    this.responseStatusCode = responseStatusCode;
-    this.responseBody = responseBody;
-    this.requestBody = requestBody;
-    this.dataOverride = dataOverride;
+  constructor(options = {}) {
+    this.url = options.url || '';
+    this.path = options.path || '';
+    this.method = options.method || '';
+    this.statusCode = options.statusCode || 201;
+    this.responseBody = options.responseBody || '';
+    this.requestBody = options.requestBody || '';
+    this.dataOverride = options.dataOverride || {}; 
   }
 
   /**
@@ -31,11 +30,10 @@ class MockV2 {
    */
   toDict() {
     const result = {
-      url: this.URL,
-      endpoint: this.endpoint,
-      port: this.port,
+      url: this.url,
+      path: this.path,
       method: this.method,
-      status_code: this.responseStatusCode,
+      status_code: this.statusCode,
       response_body: this.responseBody
     };
 
@@ -59,4 +57,4 @@ class MockV2 {
   }
 }
 
-module.exports = MockV2;
+module.exports = MockV2;