feat(recorder): lazy-load rrweb and rrweb-player from CDN via SioServiceLibLoader and switch sio-recorder to use the loader

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '1.6.1',
+  version: '1.7.0',
   description: 'catalog for social.io'
 }

ts_web/elements/sio-recorder.ts

@@ -6,11 +6,7 @@ import {
   property,
   query,
 } from '@design.estate/dees-element';
-import * as rrwebMod from 'rrweb';
-import rrwebPlayerMod from 'rrweb-player';
-
-const rrweb: any = rrwebMod;
-const rrwebPlayer: typeof rrwebPlayerMod.default = rrwebPlayerMod as any;
+import { SioServiceLibLoader } from '../services/SioServiceLibLoader.js';
 
 /**
  * Use rrweb's eventWithTime if you like strict typing:
@@ -106,6 +102,10 @@ export class SioRecorder extends DeesElement {
    */
   private async startRecording(): Promise<void> {
     await this.domtoolsPromise;
+
+    // Load rrweb from CDN
+    const rrweb = await SioServiceLibLoader.getInstance().loadRrweb();
+
     this.status = 'recording';
     this.events = [];
 
@@ -148,7 +148,12 @@ export class SioRecorder extends DeesElement {
   private async playRecording(): Promise<void> {
     await this.domtoolsPromise;
     if (!this.playbackDiv) return;
-    const replayer = new rrwebPlayer({
+
+    // Load rrweb-player from CDN
+    const rrwebPlayerBundle = await SioServiceLibLoader.getInstance().loadRrwebPlayer();
+    const RrwebPlayer = rrwebPlayerBundle.default;
+
+    const replayer = new RrwebPlayer({
       target: this.playbackDiv, // customizable root element
       props: {
         events: this.events as any,

ts_web/index.ts

@@ -1 +1,2 @@
 export * from './elements/index.js';
+export * from './services/SioServiceLibLoader.js';

ts_web/services/SioServiceLibLoader.ts

@@ -0,0 +1,200 @@
+import { CDN_BASE, CDN_VERSIONS } from './versions.js';
+
+/**
+ * rrweb record options
+ */
+export interface IRrwebRecordOptions {
+  emit: (event: any) => void;
+  recordCanvas?: boolean;
+  recordCrossOriginIframes?: boolean;
+  checkoutEveryNms?: number;
+  [key: string]: any;
+}
+
+/**
+ * rrweb record function type
+ */
+export type TRrwebRecordFn = (options: IRrwebRecordOptions) => () => void;
+
+/**
+ * Bundle type for rrweb recording library
+ */
+export interface IRrwebBundle {
+  record: TRrwebRecordFn;
+}
+
+/**
+ * rrweb-player constructor options
+ */
+export interface IRrwebPlayerOptions {
+  target: HTMLElement;
+  props: {
+    events: any[];
+    root?: HTMLElement;
+    showController?: boolean;
+    width?: number;
+    height?: number;
+    [key: string]: any;
+  };
+}
+
+/**
+ * rrweb-player instance
+ */
+export interface IRrwebPlayerInstance {
+  play: () => Promise<void>;
+  pause: () => void;
+  [key: string]: any;
+}
+
+/**
+ * rrweb-player constructor type
+ */
+export type TRrwebPlayerConstructor = new (options: IRrwebPlayerOptions) => IRrwebPlayerInstance;
+
+/**
+ * Bundle type for rrweb-player
+ */
+export interface IRrwebPlayerBundle {
+  default: TRrwebPlayerConstructor;
+}
+
+/**
+ * Singleton service for lazy-loading rrweb libraries from CDN.
+ *
+ * This reduces initial bundle size by loading libraries only when needed.
+ * Libraries are cached after first load to avoid duplicate fetches.
+ *
+ * @example
+ * ```typescript
+ * const libLoader = SioServiceLibLoader.getInstance();
+ * const rrweb = await libLoader.loadRrweb();
+ * const stopFn = rrweb.record({ emit: (event) => { ... } });
+ * ```
+ */
+export class SioServiceLibLoader {
+  private static instance: SioServiceLibLoader;
+
+  // Cached library references
+  private rrwebLib: IRrwebBundle | null = null;
+  private rrwebPlayerLib: IRrwebPlayerBundle | null = null;
+
+  // Loading promises to prevent duplicate concurrent loads
+  private rrwebLoadingPromise: Promise<IRrwebBundle> | null = null;
+  private rrwebPlayerLoadingPromise: Promise<IRrwebPlayerBundle> | null = null;
+
+  private constructor() {}
+
+  /**
+   * Get the singleton instance of SioServiceLibLoader
+   */
+  public static getInstance(): SioServiceLibLoader {
+    if (!SioServiceLibLoader.instance) {
+      SioServiceLibLoader.instance = new SioServiceLibLoader();
+    }
+    return SioServiceLibLoader.instance;
+  }
+
+  /**
+   * Load rrweb recording library from CDN
+   * @returns Promise resolving to rrweb module with record function
+   */
+  public async loadRrweb(): Promise<IRrwebBundle> {
+    if (this.rrwebLib) {
+      return this.rrwebLib;
+    }
+
+    if (this.rrwebLoadingPromise) {
+      return this.rrwebLoadingPromise;
+    }
+
+    this.rrwebLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/rrweb@${CDN_VERSIONS.rrweb}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      this.rrwebLib = {
+        record: module.record,
+      };
+      return this.rrwebLib;
+    })();
+
+    return this.rrwebLoadingPromise;
+  }
+
+  /**
+   * Load rrweb-player from CDN
+   * @returns Promise resolving to rrweb-player module
+   */
+  public async loadRrwebPlayer(): Promise<IRrwebPlayerBundle> {
+    if (this.rrwebPlayerLib) {
+      return this.rrwebPlayerLib;
+    }
+
+    if (this.rrwebPlayerLoadingPromise) {
+      return this.rrwebPlayerLoadingPromise;
+    }
+
+    this.rrwebPlayerLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/rrweb-player@${CDN_VERSIONS.rrwebPlayer}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      // Inject rrweb-player CSS styles
+      await this.injectRrwebPlayerStyles();
+
+      this.rrwebPlayerLib = {
+        default: module.default,
+      };
+      return this.rrwebPlayerLib;
+    })();
+
+    return this.rrwebPlayerLoadingPromise;
+  }
+
+  /**
+   * Inject rrweb-player CSS styles into the document head
+   */
+  private async injectRrwebPlayerStyles(): Promise<void> {
+    const styleId = 'rrweb-player-cdn-styles';
+    if (document.getElementById(styleId)) {
+      return; // Already injected
+    }
+
+    const cssUrl = `${CDN_BASE}/rrweb-player@${CDN_VERSIONS.rrwebPlayer}/dist/style.css`;
+    try {
+      const response = await fetch(cssUrl);
+      const cssText = await response.text();
+
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = cssText;
+      document.head.appendChild(style);
+    } catch (error) {
+      console.warn('Failed to load rrweb-player styles from CDN:', error);
+    }
+  }
+
+  /**
+   * Preload all rrweb libraries in parallel
+   * Useful for warming the cache before recording is needed
+   */
+  public async preloadAll(): Promise<void> {
+    await Promise.all([
+      this.loadRrweb(),
+      this.loadRrwebPlayer(),
+    ]);
+  }
+
+  /**
+   * Check if a specific library is already loaded
+   */
+  public isLoaded(library: 'rrweb' | 'rrwebPlayer'): boolean {
+    switch (library) {
+      case 'rrweb':
+        return this.rrwebLib !== null;
+      case 'rrwebPlayer':
+        return this.rrwebPlayerLib !== null;
+      default:
+        return false;
+    }
+  }
+}

ts_web/services/versions.ts

@@ -0,0 +1,13 @@
+/**
+ * CDN versions for lazy-loaded libraries.
+ * Keep these in sync with package.json for type compatibility.
+ */
+export const CDN_VERSIONS = {
+  rrweb: '2.0.0-alpha.4',
+  rrwebPlayer: '1.0.0-alpha.4',
+} as const;
+
+/**
+ * Base CDN URL for jsdelivr ESM imports
+ */
+export const CDN_BASE = 'https://cdn.jsdelivr.net/npm';