main.js

import * as pdfjsLib from 'https://cdn.jsdelivr.net/npm/pdfjs-dist@5.5.207/legacy/build/pdf.mjs';

const workerUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@5.5.207/legacy/build/pdf.worker.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;

const samplePdfUrl = './compressed.tracemonkey-pldi-09.pdf';

const app = document.querySelector('#app');
app.innerHTML = `
  <main>
    <h1>Safari repro: pdfjs legacy build getTextContent()</h1>
    <p>
      Import <code>pdfjs-dist/legacy/build/pdf.mjs</code> from CDN, and run <code>PDFPageProxy.getTextContent()</code> on the first page.
    </p>

    <div class="actions">
      <button id="runButton">Run repro</button>
      <label>
        <input id="autoRunCheckbox" type="checkbox" checked />
        auto run on load
      </label>
    </div>

    <dl class="meta">
      <div>
        <dt>PDF</dt>
        <dd><a href="${samplePdfUrl}" target="_blank" rel="noreferrer">compressed.tracemonkey-pldi-09.pdf</a></dd>
      </div>
      <div>
        <dt>pdf.mjs</dt>
        <dd><a href="https://cdn.jsdelivr.net/npm/pdfjs-dist@5.5.207/legacy/build/pdf.mjs" target="_blank" rel="noreferrer">pdfjs-dist@5.5.207/legacy/build/pdf.mjs</a></dd>
      </div>
      <div>
        <dt>workerSrc</dt>
        <dd><a href="${workerUrl}" target="_blank" rel="noreferrer">${workerUrl}</a></dd>
      </div>
      <div>
        <dt>User Agent</dt>
        <dd id="userAgent"></dd>
      </div>
      <div>
        <dt>Status</dt>
        <dd id="status">Idle</dd>
      </div>
    </dl>

    <h2>Console-style log</h2>
    <pre id="log"></pre>
  </main>
`;

const logEl = document.querySelector('#log');
const statusEl = document.querySelector('#status');
const userAgentEl = document.querySelector('#userAgent');
const runButton = document.querySelector('#runButton');
const autoRunCheckbox = document.querySelector('#autoRunCheckbox');

userAgentEl.textContent = navigator.userAgent;

function serializeError(error) {
  if (!(error instanceof Error)) return String(error);
  return `${error.name}: ${error.message}\n${error.stack ?? ''}`;
}

function log(...args) {
  const line = args
    .map((arg) => {
      if (arg instanceof Error) return serializeError(arg);
      if (typeof arg === 'object' && arg !== null) {
        try {
          return JSON.stringify(arg, null, 2);
        } catch {
          return String(arg);
        }
      }
      return String(arg);
    })
    .join(' ');

  console.log(...args);
  logEl.textContent += `${line}\n`;
  logEl.scrollTop = logEl.scrollHeight;
}

async function runRepro() {
  runButton.disabled = true;
  logEl.textContent = '';
  statusEl.textContent = 'Loading PDF...';

  try {
    log('Starting repro...');
    log('Loading pdf.mjs from', 'https://cdn.jsdelivr.net/npm/pdfjs-dist@5.5.207/legacy/build/pdf.mjs');
    log('workerSrc =', workerUrl);
    log('Loading PDF from', samplePdfUrl);

    const loadingTask = pdfjsLib.getDocument(samplePdfUrl);
    const pdf = await loadingTask.promise;
    log('PDF loaded:', { numPages: pdf.numPages });

    statusEl.textContent = 'Fetching page 1...';
    const page = await pdf.getPage(1);
    log('Page loaded:', { pageNumber: page.pageNumber, rotate: page.rotate });

    statusEl.textContent = 'Calling getTextContent()...';
    const textContent = await page.getTextContent();

    log('getTextContent() succeeded');
    log('items.length =', textContent.items.length);
    log('styles keys =', Object.keys(textContent.styles).length);
    log('First 5 text items:', textContent.items.slice(0, 5).map((item) => ({
      str: item.str,
      dir: item.dir,
      hasEOL: item.hasEOL,
    })));

    statusEl.textContent = 'Success';
  } catch (error) {
    console.error('Repro failed:', error);
    log('getTextContent() threw:', error);
    statusEl.textContent = `Error: ${error?.name ?? 'UnknownErrorException'}`;
  } finally {
    runButton.disabled = false;
  }
}

runButton.addEventListener('click', () => {
  void runRepro();
});

if (autoRunCheckbox.checked) {
  void runRepro();
}