refactor the repl tool to support multipage apps and better dev

2026-04-01 12:00:00 +08:00
parent 4e636e1b6e
commit b065b22f09
7 changed files with 215 additions and 130 deletions
--- a/scripts/repl.ts
+++ b/scripts/repl.ts
@@ -0,0 +1,160 @@
+/* tslint:disable: no-console */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import * as EventEmitter from 'events';
+import * as readline from 'readline';
+import * as puppeteer from 'puppeteer';
+import { eventWithTime } from '../src/types';
+
+const emitter = new EventEmitter();
+
+function getCode(): string {
+  const bundlePath = path.resolve(__dirname, '../dist/rrweb.min.js');
+  return fs.readFileSync(bundlePath, 'utf8');
+}
+
+(async () => {
+  const code = getCode();
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  let events: eventWithTime[] = [];
+
+  rl.question(
+    'Enter the url you want to record, e.g https://react-redux.realworld.io: ',
+    async url => {
+      console.log(`Going to open ${url}...`);
+      await record(url);
+      console.log('Ready to record. You can do any interaction on the page.');
+      rl.question(
+        `Once you want to finish the recording, enter 'y' to start replay: `,
+        async answer => {
+          if (answer.toLowerCase() === 'y') {
+            emitter.emit('done');
+          }
+        },
+      );
+      rl.write('y');
+    },
+  );
+
+  emitter.once('done', async () => {
+    rl.question(
+      `Enter 'y' to persistently store these recorded events: `,
+      async answer => {
+        if (answer.toLowerCase() === 'y') {
+          saveEvents();
+        }
+      },
+    );
+  });
+
+  async function record(url: string) {
+    const browser = await puppeteer.launch({
+      headless: false,
+      defaultViewport: {
+        width: 1600,
+        height: 900,
+      },
+      args: ['--start-maximized'],
+    });
+    const page = await browser.newPage();
+    await page.goto(url, {
+      waitUntil: 'domcontentloaded',
+    });
+
+    await page.exposeFunction('_replLog', (event: eventWithTime) => {
+      events.push(event);
+    });
+    await page.evaluate(`;${code}
+      window.__IS_RECORDING__ = true
+      rrweb.record({
+        emit: event => window._replLog(event)
+      });
+    `);
+    page.on('framenavigated', async () => {
+      const isRecording = await page.evaluate('window.__IS_RECORDING__');
+      if (!isRecording) {
+        await page.evaluate(`;${code}
+          window.__IS_RECORDING__ = true
+          rrweb.record({
+            emit: event => window._replLog(event)
+          });
+        `);
+      }
+    });
+
+    emitter.once('done', async () => {
+      await browser.close();
+      console.log(`Recorded ${events.length} events`);
+      replay();
+    });
+  }
+
+  async function replay() {
+    const browser = await puppeteer.launch({
+      headless: false,
+      defaultViewport: {
+        width: 1600,
+        height: 900,
+      },
+    });
+    const page = await browser.newPage();
+    await page.goto('about:blank');
+    await page.addStyleTag({
+      path: path.resolve(__dirname, '../dist/rrweb.min.css'),
+    });
+    await page.evaluate(`${code}
+      const events = ${JSON.stringify(events)};
+      const replayer = new rrweb.Replayer(events);
+      replayer.play();
+    `);
+  }
+
+  const tempFolder = path.join(__dirname, '../temp');
+  function saveEvents() {
+    if (!fs.existsSync(tempFolder)) {
+      fs.mkdirSync(tempFolder);
+    }
+    const time = new Date()
+      .toISOString()
+      .replace(/[-|:]/g, '_')
+      .replace(/\..+/, '');
+    const fileName = `replay_${time}.html`;
+    const content = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Record @${time}</title>
+    <link rel="stylesheet" href="../dist/rrweb.min.css" />
+  </head>
+  <body>
+    <script src="../dist/rrweb.js"></script>
+    <script>
+      const data = ${JSON.stringify({ events })}
+      const replayer = new rrweb.Replayer(data.events);
+      replayer.play();
+    </script>
+  </body>
+</html>  
+    `;
+    const savePath = path.resolve(tempFolder, fileName);
+    fs.writeFileSync(savePath, content);
+    console.log(`Saved at ${savePath}`);
+  }
+
+  process
+    .on('uncaughtException', error => {
+      console.error(error);
+    })
+    .on('unhandledRejection', error => {
+      console.error(error);
+    });
+})();