chore: use @rrweb/record

package.json

@@ -104,8 +104,7 @@
         "rollup": "^4.24.0",
         "rollup-plugin-dts": "^6.1.1",
         "rollup-plugin-visualizer": "^5.12.0",
-        "rrweb": "2.0.0-alpha.17",
-        "rrweb-snapshot": "2.0.0-alpha.17",
+        "@rrweb/record": "2.0.0-alpha.17",
         "sinon": "9.0.2",
         "testcafe": "1.19.0",
         "testcafe-browser-provider-browserstack": "1.14.0",

playground/segment/server.js

@@ -10,7 +10,7 @@ app.get('/segment.html', function (req, res) {
 })
 
 app.get('/static/recorder.js', function (req, res) {
-    let filePath = path.join(__dirname, '/../../node_modules/rrweb/dist/rrweb.js')
+    let filePath = path.join(__dirname, '/../../node_modules/@rrweb/record/dist/record.js')
     res.sendFile(filePath)
 })
 

src/entrypoints/recorder.ts

@@ -1,5 +1,5 @@
 // @ts-expect-error - Patched to include the version
-import { record as rrwebRecord, version } from 'rrweb'
+import { record as rrwebRecord, version } from '@rrweb/record'
 import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record'
 
 // rrweb/network@1 code starts

src/extensions/replay/sessionrecording-utils.ts

@@ -9,7 +9,6 @@ import type {
     RecordPlugin,
     SamplingStrategy,
 } from '@rrweb/types'
-import type { DataURLOptions, MaskInputFn, MaskInputOptions, MaskTextFn, Mirror, SlimDOMOptions } from 'rrweb-snapshot'
 
 import { isObject } from '../../utils/type-utils'
 import { SnapshotBuffer } from './sessionrecording'
@@ -54,7 +53,7 @@ export type rrwebRecord = {
     (options: recordOptions<eventWithTime>): listenerHandler
     addCustomEvent: (tag: string, payload: any) => void
     takeFullSnapshot: () => void
-    mirror: Mirror
+    mirror: any
 }
 
 export declare type recordOptions<T> = {
@@ -67,16 +66,16 @@ export declare type recordOptions<T> = {
     maskTextClass?: maskTextClass
     maskTextSelector?: string
     maskAllInputs?: boolean
-    maskInputOptions?: MaskInputOptions
-    maskInputFn?: MaskInputFn
-    maskTextFn?: MaskTextFn
-    slimDOMOptions?: SlimDOMOptions | 'all' | true
+    maskInputOptions?: any
+    maskInputFn?: any
+    maskTextFn?: any
+    slimDOMOptions?: any | 'all' | true
     ignoreCSSAttributes?: Set<string>
     inlineStylesheet?: boolean
     hooks?: hooksParam
     // packFn?: PackFn
     sampling?: SamplingStrategy
-    dataURLOptions?: DataURLOptions
+    dataURLOptions?: any
     recordCanvas?: boolean
     recordCrossOriginIframes?: boolean
     recordAfter?: 'DOMContentLoaded' | 'load'

src/extensions/replay/sessionrecording.ts

@@ -63,10 +63,6 @@ export const RECORDING_MAX_EVENT_SIZE = ONE_KB * ONE_KB * 0.9 // ~1mb (with some
 export const RECORDING_BUFFER_TIMEOUT = 2000 // 2 seconds
 export const SESSION_RECORDING_BATCH_KEY = 'recordings'
 
-// NOTE: Importing this type is problematic as we can't safely bundle it to a TS definition so, instead we redefine.
-// import type { record } from 'rrweb2/typings'
-// import type { recordOptions } from 'rrweb/typings/types'
-
 const ACTIVE_SOURCES = [
     IncrementalSource.MouseMove,
     IncrementalSource.MouseInteraction,

src/types.ts

@@ -1,4 +1,3 @@
-import type { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot'
 import { PostHog } from './posthog-core'
 import type { SegmentAnalytics } from './extensions/segment-integration'
 
@@ -268,9 +267,9 @@ export interface SessionRecordingOptions {
     maskTextSelector?: string | null
     maskTextFn?: ((text: string, element: HTMLElement | null) => string) | null
     maskAllInputs?: boolean
-    maskInputOptions?: MaskInputOptions
+    maskInputOptions?: any
     maskInputFn?: ((text: string, element?: HTMLElement) => string) | null
-    slimDOMOptions?: SlimDOMOptions | 'all' | true
+    slimDOMOptions?: any | 'all' | true
     collectFonts?: boolean
     inlineStylesheet?: boolean
     recordCrossOriginIframes?: boolean