@depup/datadog__browser-rum 6.31.0-depup.0

package/src/domain/record/recordingScope.ts

@@ -0,0 +1,58 @@
+import type { RumConfiguration } from '@datadog/browser-rum-core'
+
+import { Observable } from '@datadog/browser-core'
+import type { ElementsScrollPositions } from './elementsScrollPositions'
+import { createEventIds, createNodeIds, createStringIds, createStyleSheetIds } from './itemIds'
+import type { EventIds, NodeIds, StringIds, StyleSheetIds } from './itemIds'
+import type { ShadowRootsController } from './shadowRootsController'
+import type { SerializeEvent } from './record.types'
+
+/**
+ * State associated with a stream of session replay records. When a new stream of records
+ * starts (e.g. because recording has shut down and restarted), a new RecordingScope
+ * object must be created; this ensures that we don't generate records that reference ids
+ * or data which aren't present in the current stream.
+ */
+export interface RecordingScope {
+  resetIds(): void
+
+  configuration: RumConfiguration
+  elementsScrollPositions: ElementsScrollPositions
+  eventIds: EventIds
+  nodeIds: NodeIds
+  serializeObservable: Observable<SerializeEvent>
+  shadowRootsController: ShadowRootsController
+  stringIds: StringIds
+  styleSheetIds: StyleSheetIds
+}
+
+export function createRecordingScope(
+  configuration: RumConfiguration,
+  elementsScrollPositions: ElementsScrollPositions,
+  shadowRootsController: ShadowRootsController
+): RecordingScope {
+  const eventIds = createEventIds()
+  const nodeIds = createNodeIds()
+  const stringIds = createStringIds()
+  const styleSheetIds = createStyleSheetIds()
+
+  const scope: RecordingScope = {
+    resetIds(): void {
+      scope.eventIds.clear()
+      scope.nodeIds.clear()
+      scope.stringIds.clear()
+      scope.styleSheetIds.clear()
+    },
+
+    configuration,
+    elementsScrollPositions,
+    eventIds,
+    nodeIds,
+    serializeObservable: new Observable<SerializeEvent>(),
+    shadowRootsController,
+    stringIds,
+    styleSheetIds,
+  }
+
+  return scope
+}

package/src/domain/record/serialization/changeEncoder.ts

@@ -0,0 +1,89 @@
+import type { Change } from '../../../types'
+import { ChangeType } from '../../../types'
+import type { StringIds } from '../itemIds'
+
+type ChangeData<T extends ChangeType> =
+  Extract<Change, [T, ...unknown[]]> extends [T, ...infer Rest] ? Rest[number] : never
+
+/**
+ * ChangeEncoder handles the low-level work of building compact, optimized sequences of
+ * Changes. In particular, it:
+ * - Converts literal strings to string table references, to eliminate the duplication
+ * of transferring the same strings repeatedly.
+ * - Groups changes by type, instead of transmitting them strictly in order, so that we
+ * can avoid transmitting a separate Change data structure with an independent type tag
+ * for each small mutation. (It's safe to do this for changes that occur within the same
+ * SerializationTransaction since they logically happen at the same time.)
+ */
+export interface ChangeEncoder {
+  /** Encode a Change of the given type and add it to the internal buffer. */
+  add<T extends ChangeType>(type: T, data: ChangeData<T>): void
+  /** Flush the internal buffer, returning all Changes added since the last flush(). */
+  flush(): Change[]
+}
+
+export function createChangeEncoder(stringIds: StringIds): ChangeEncoder {
+  let pendingChanges: Partial<Record<ChangeType, unknown[]>> = {}
+
+  // A helper that searches for strings in arbitrarily-nested arrays, inserts any strings
+  // it finds into the string table, and replaces the strings with string table
+  // references.
+  const convertStringsToStringReferences = (array: any[]): void => {
+    for (let index = 0, length = array.length; index < length; index++) {
+      const item = array[index]
+      if (typeof item === 'string') {
+        const previousSize = stringIds.size
+        array[index] = stringIds.getOrInsert(item)
+        if (stringIds.size > previousSize) {
+          add(ChangeType.AddString, item)
+        }
+      } else if (Array.isArray(item)) {
+        convertStringsToStringReferences(item)
+      }
+    }
+  }
+
+  const add = <T extends ChangeType>(type: T, data: ChangeData<T>): void => {
+    if (!(type in pendingChanges)) {
+      pendingChanges[type] = [type]
+    }
+    if (type !== ChangeType.AddString && Array.isArray(data)) {
+      convertStringsToStringReferences(data)
+    }
+    pendingChanges[type]!.push(data)
+  }
+
+  const flush = (): Change[] => {
+    const changes: Change[] = []
+
+    // Place all changes into a single array. Because the player always just plays back
+    // the changes in order, the ordering of the changes matters; if a dependency can
+    // exist between two kinds of change, then the dependent change must come after the
+    // change it depends on. This list defines an ordering that ensures that these
+    // dependencies are always satisfied.
+    ;[
+      ChangeType.AddString,
+      ChangeType.AddNode,
+      ChangeType.RemoveNode,
+      ChangeType.Attribute,
+      ChangeType.Text,
+      ChangeType.Size,
+      ChangeType.ScrollPosition,
+      ChangeType.AddStyleSheet,
+      ChangeType.AttachedStyleSheets,
+      ChangeType.MediaPlaybackState,
+      ChangeType.VisualViewport,
+    ].forEach((changeType: ChangeType): void => {
+      const change = pendingChanges[changeType]
+      if (change) {
+        changes.push(change as Change)
+      }
+    })
+
+    pendingChanges = {}
+
+    return changes
+  }
+
+  return { add, flush }
+}

package/src/domain/record/serialization/conversions/changeConverter.ts

@@ -0,0 +1,277 @@
+import type {
+  AddDocTypeNodeChange,
+  AddElementNodeChange,
+  AddNodeChange,
+  AddStyleSheetChange,
+  AddTextNodeChange,
+  AttachedStyleSheetsChange,
+  AttributeChange,
+  BrowserChangeRecord,
+  BrowserFullSnapshotRecord,
+  BrowserIncrementalSnapshotRecord,
+  MediaPlaybackStateChange,
+  RemoveNodeChange,
+  ScrollPositionChange,
+  SizeChange,
+  TextChange,
+} from '../../../../types'
+import { ChangeType } from '../../../../types'
+import type { NodeId, StyleSheetId } from '../../itemIds'
+import type { V1RenderOptions } from './renderOptions'
+import type { StringTable } from './stringTable'
+import { createStringTable } from './stringTable'
+import type { VDocument } from './vDocument'
+import { createVDocument } from './vDocument'
+import type { VNode } from './vNode'
+
+export interface ChangeConverter {
+  convert(
+    record: BrowserChangeRecord,
+    options?: Partial<V1RenderOptions>
+  ): BrowserFullSnapshotRecord | BrowserIncrementalSnapshotRecord
+
+  document: VDocument
+  stringTable: StringTable
+}
+
+export function createChangeConverter(): ChangeConverter {
+  const self: ChangeConverter = {
+    convert(
+      record: BrowserChangeRecord,
+      options: Partial<V1RenderOptions> = {}
+    ): BrowserFullSnapshotRecord | BrowserIncrementalSnapshotRecord {
+      applyChangeToVDOM(record, self.document, self.stringTable)
+      return self.document.render({ timestamp: record.timestamp, ...options })
+    },
+
+    document: createVDocument(),
+    stringTable: createStringTable(),
+  }
+
+  return self
+}
+
+function applyChangeToVDOM(record: BrowserChangeRecord, document: VDocument, stringTable: StringTable): void {
+  document.mutations.clear()
+
+  for (const change of record.data) {
+    switch (change[0]) {
+      case ChangeType.AddString: {
+        for (let i = 1; i < change.length; i++) {
+          stringTable.add(change[i] as string)
+        }
+        break
+      }
+
+      case ChangeType.AddNode: {
+        for (let i = 1; i < change.length; i++) {
+          applyAddNodeChange(change[i] as AddNodeChange, document, stringTable)
+        }
+        break
+      }
+
+      case ChangeType.RemoveNode: {
+        for (let i = 1; i < change.length; i++) {
+          applyRemoveNodeChange(change[i], document)
+        }
+        break
+      }
+
+      case ChangeType.Attribute: {
+        for (let i = 1; i < change.length; i++) {
+          applyAttributeChange(change[i] as AttributeChange, document, stringTable)
+        }
+        break
+      }
+
+      case ChangeType.Text: {
+        for (let i = 1; i < change.length; i++) {
+          applyTextChange(change[i] as TextChange, document, stringTable)
+        }
+        break
+      }
+
+      case ChangeType.ScrollPosition: {
+        for (let i = 1; i < change.length; i++) {
+          applyScrollPositionChange(change[i] as ScrollPositionChange, document)
+        }
+        break
+      }
+
+      case ChangeType.Size: {
+        for (let i = 1; i < change.length; i++) {
+          applySizeChange(change[i] as SizeChange, document)
+        }
+        break
+      }
+
+      case ChangeType.AddStyleSheet: {
+        for (let i = 1; i < change.length; i++) {
+          applyAddStyleSheetChange(change[i] as AddStyleSheetChange, document, stringTable)
+        }
+        break
+      }
+
+      case ChangeType.AttachedStyleSheets: {
+        for (let i = 1; i < change.length; i++) {
+          applyAttachedStyleSheetsChange(change[i] as AttachedStyleSheetsChange, document)
+        }
+        break
+      }
+
+      case ChangeType.MediaPlaybackState: {
+        for (let i = 1; i < change.length; i++) {
+          applyMediaPlaybackStateChange(change[i] as MediaPlaybackStateChange, document)
+        }
+        break
+      }
+
+      case ChangeType.VisualViewport:
+        // Not yet supported.
+        break
+
+      default:
+        change satisfies never
+        throw new Error(`Unsupported BrowserChangeType: ${change[0] as any}`)
+    }
+  }
+}
+
+function applyAddNodeChange(addedNode: AddNodeChange, document: VDocument, stringTable: StringTable): void {
+  const nodeName = stringTable.decode(addedNode[1])
+
+  let node: VNode
+  switch (nodeName) {
+    case '#cdata-section':
+      node = document.createNode({ kind: '#cdata-section' })
+      break
+
+    case '#doctype': {
+      const [, , name, publicId, systemId] = addedNode as AddDocTypeNodeChange
+      node = document.createNode({
+        kind: '#doctype',
+        name: stringTable.decode(name),
+        publicId: stringTable.decode(publicId),
+        systemId: stringTable.decode(systemId),
+      })
+      break
+    }
+
+    case '#document':
+      node = document.createNode({ kind: '#document' })
+      break
+
+    case '#document-fragment':
+      node = document.createNode({ kind: '#document-fragment' })
+      break
+
+    case '#shadow-root':
+      node = document.createNode({ kind: '#shadow-root' })
+      break
+
+    case '#text': {
+      const [, , textContent] = addedNode as AddTextNodeChange
+      node = document.createNode({
+        kind: '#text',
+        textContent: stringTable.decode(textContent),
+      })
+      break
+    }
+
+    default: {
+      let tagName: string
+      let isSVG = false
+      if (nodeName.startsWith('svg>')) {
+        tagName = nodeName.substring(4).toLowerCase()
+        isSVG = true
+      } else {
+        tagName = nodeName.toLowerCase()
+      }
+
+      const [, , ...attributeAssignments] = addedNode as AddElementNodeChange
+      const attributes: Record<string, string> = {}
+      for (const [name, value] of attributeAssignments) {
+        attributes[stringTable.decode(name)] = stringTable.decode(value)
+      }
+
+      node = document.createNode({ kind: '#element', tag: tagName, attributes, isSVG })
+      break
+    }
+  }
+
+  const insertionPoint = addedNode[0]
+  if (insertionPoint === null) {
+    document.root = node
+  } else if (insertionPoint === 0) {
+    const previousSiblingId = (node.id - 1) as NodeId
+    const previousSibling = document.getNodeById(previousSiblingId)
+    previousSibling.after(node)
+  } else if (insertionPoint > 0) {
+    const parentId = (node.id - insertionPoint) as NodeId
+    const parent = document.getNodeById(parentId)
+    parent.appendChild(node)
+  } else {
+    const nextSiblingId = (node.id + insertionPoint) as NodeId
+    const nextSibling = document.getNodeById(nextSiblingId)
+    nextSibling.before(node)
+  }
+}
+
+function applyAddStyleSheetChange(change: AddStyleSheetChange, document: VDocument, stringTable: StringTable): void {
+  const [encodedRules, encodedMediaList = [], disabled = false] = change
+  const rules: string | string[] = Array.isArray(encodedRules)
+    ? encodedRules.map((rule) => stringTable.decode(rule))
+    : stringTable.decode(encodedRules)
+  const mediaList = encodedMediaList.map((item) => stringTable.decode(item))
+  document.createStyleSheet({ rules, mediaList, disabled })
+}
+
+function applyAttachedStyleSheetsChange(change: AttachedStyleSheetsChange, document: VDocument): void {
+  const [nodeId, ...sheetIds] = change
+  const node = document.getNodeById(nodeId as NodeId)
+  node.setAttachedStyleSheets(sheetIds.map((sheetId) => document.getStyleSheetById(sheetId as StyleSheetId)))
+}
+
+function applyAttributeChange(change: AttributeChange, document: VDocument, stringTable: StringTable): void {
+  const [nodeId, ...attributeMutations] = change
+  const node = document.getNodeById(nodeId as NodeId)
+  for (const [nameOrId, valueOrId = null] of attributeMutations) {
+    const name = stringTable.decode(nameOrId)
+    if (valueOrId === null) {
+      node.setAttribute(name, null)
+    } else {
+      const value = stringTable.decode(valueOrId)
+      node.setAttribute(name, value)
+    }
+  }
+}
+
+function applyMediaPlaybackStateChange(change: MediaPlaybackStateChange, document: VDocument): void {
+  const [nodeId, playbackState] = change
+  const node = document.getNodeById(nodeId as NodeId)
+  node.setPlaybackState(playbackState)
+}
+
+function applyRemoveNodeChange(change: RemoveNodeChange, document: VDocument): void {
+  const nodeId = change as NodeId
+  const node = document.getNodeById(nodeId)
+  node.remove()
+}
+
+function applyScrollPositionChange(change: ScrollPositionChange, document: VDocument): void {
+  const [nodeId, left, top] = change
+  const node = document.getNodeById(nodeId as NodeId)
+  node.setScrollPosition(left, top)
+}
+
+function applySizeChange(change: SizeChange, document: VDocument): void {
+  const [nodeId, width, height] = change
+  const node = document.getNodeById(nodeId as NodeId)
+  node.setSize(width, height)
+}
+
+function applyTextChange(change: TextChange, document: VDocument, stringTable: StringTable): void {
+  const [nodeId, textContent] = change
+  const node = document.getNodeById(nodeId as NodeId)
+  node.setTextContent(stringTable.decode(textContent))
+}

package/src/domain/record/serialization/conversions/changeDecoder.ts

@@ -0,0 +1,192 @@
+import { ChangeType } from '../../../../types'
+import type {
+  AddDocTypeNodeChange,
+  AddElementNodeChange,
+  AddNodeChange,
+  AddStyleSheetChange,
+  AddTextNodeChange,
+  AttributeAssignmentOrDeletion,
+  AttributeChange,
+  BrowserChangeRecord,
+  Change,
+  StyleSheetRules,
+  TextChange,
+} from '../../../../types'
+import type { StringTable } from './stringTable'
+import { createStringTable } from './stringTable'
+
+/**
+ * ChangeDecoder converts a BrowserChangeRecord, or a stream of BrowserChangeRecords, into
+ * a more human-readable form by:
+ * - Removing AddString changes (string table definitions).
+ * - Replacing string table references in all other changes with their literal values.
+ *
+ * This makes it easier to visualize the contents of BrowserChangeRecords or to write test
+ * expectations against the record's content.
+ */
+export interface ChangeDecoder {
+  decode(record: BrowserChangeRecord): BrowserChangeRecord
+
+  stringTable: StringTable
+}
+
+export function createChangeDecoder(): ChangeDecoder {
+  const self: ChangeDecoder = {
+    decode(record: BrowserChangeRecord): BrowserChangeRecord {
+      return decodeChangeRecord(record, self.stringTable)
+    },
+
+    stringTable: createStringTable(),
+  }
+
+  return self
+}
+
+function decodeChangeRecord(record: BrowserChangeRecord, stringTable: StringTable): BrowserChangeRecord {
+  const decodedData: Change[] = []
+
+  for (const change of record.data) {
+    switch (change[0]) {
+      case ChangeType.AddString:
+        // Update the string table.
+        for (let i = 1; i < change.length; i++) {
+          stringTable.add(change[i] as string)
+        }
+
+        // Deliberately don't include this change in the decoded record.
+        break
+
+      case ChangeType.AddNode: {
+        const decoded: [typeof ChangeType.AddNode, ...AddNodeChange[]] = [ChangeType.AddNode]
+        for (let i = 1; i < change.length; i++) {
+          decoded.push(decodeAddNodeChange(change[i] as AddNodeChange, stringTable))
+        }
+        decodedData.push(decoded)
+        break
+      }
+
+      case ChangeType.RemoveNode:
+        decodedData.push(change)
+        break
+
+      case ChangeType.Attribute: {
+        const decoded: [typeof ChangeType.Attribute, ...AttributeChange[]] = [ChangeType.Attribute]
+        for (let i = 1; i < change.length; i++) {
+          decoded.push(decodeAttributeChange(change[i] as AttributeChange, stringTable))
+        }
+        decodedData.push(decoded)
+        break
+      }
+
+      case ChangeType.Text: {
+        const decoded: [typeof ChangeType.Text, ...TextChange[]] = [ChangeType.Text]
+        for (let i = 1; i < change.length; i++) {
+          decoded.push(decodeTextChange(change[i] as TextChange, stringTable))
+        }
+        decodedData.push(decoded)
+        break
+      }
+
+      case ChangeType.Size:
+      case ChangeType.ScrollPosition:
+      case ChangeType.AttachedStyleSheets:
+      case ChangeType.MediaPlaybackState:
+      case ChangeType.VisualViewport:
+        decodedData.push(change)
+        break
+
+      case ChangeType.AddStyleSheet: {
+        const decoded: [typeof ChangeType.AddStyleSheet, ...AddStyleSheetChange[]] = [ChangeType.AddStyleSheet]
+        for (let i = 1; i < change.length; i++) {
+          decoded.push(decodeAddStyleSheetChange(change[i] as AddStyleSheetChange, stringTable))
+        }
+        decodedData.push(decoded)
+        break
+      }
+
+      default:
+        change satisfies never
+        throw new Error(`Unsupported ChangeType: ${change[0] as any}`)
+    }
+  }
+
+  return { ...record, data: decodedData }
+}
+
+function decodeAddNodeChange(change: AddNodeChange, stringTable: StringTable): AddNodeChange {
+  const insertionPoint = change[0]
+  const nodeName = stringTable.decode(change[1])
+
+  switch (nodeName) {
+    case '#cdata-section':
+    case '#document':
+    case '#document-fragment':
+    case '#shadow-root':
+      return [insertionPoint, nodeName]
+
+    case '#doctype': {
+      const [, , name, publicId, systemId] = change as AddDocTypeNodeChange
+      return [
+        insertionPoint,
+        '#doctype',
+        stringTable.decode(name),
+        stringTable.decode(publicId),
+        stringTable.decode(systemId),
+      ]
+    }
+
+    case '#text': {
+      const [, , textContent] = change as AddTextNodeChange
+      return [insertionPoint, '#text', stringTable.decode(textContent)]
+    }
+
+    default: {
+      const decodedChange: AddElementNodeChange = [insertionPoint, nodeName]
+
+      const [, , ...attrs] = change as AddElementNodeChange
+      for (const [name, value] of attrs) {
+        decodedChange.push([stringTable.decode(name), stringTable.decode(value)])
+      }
+
+      return decodedChange
+    }
+  }
+}
+
+function decodeAttributeChange(change: AttributeChange, stringTable: StringTable): AttributeChange {
+  const [nodeId, ...mutations] = change
+
+  const decodedMutations: AttributeAssignmentOrDeletion[] = mutations.map((mutation) => {
+    if (mutation.length === 1) {
+      return [stringTable.decode(mutation[0])]
+    }
+    return [stringTable.decode(mutation[0]), stringTable.decode(mutation[1])]
+  })
+
+  const decodedChange: AttributeChange = [nodeId]
+  decodedChange.push(...decodedMutations)
+  return decodedChange
+}
+
+function decodeTextChange(change: TextChange, stringTable: StringTable): TextChange {
+  return [change[0], stringTable.decode(change[1])]
+}
+
+function decodeAddStyleSheetChange(change: AddStyleSheetChange, stringTable: StringTable): AddStyleSheetChange {
+  const rules = change[0]
+  const decodedRules: StyleSheetRules = Array.isArray(rules)
+    ? rules.map((rule) => stringTable.decode(rule))
+    : stringTable.decode(rules)
+
+  if (change.length === 1) {
+    return [decodedRules]
+  }
+
+  const decodedMediaList = change[1].map((item) => stringTable.decode(item))
+
+  if (change.length === 2) {
+    return [decodedRules, decodedMediaList]
+  }
+
+  return [decodedRules, decodedMediaList, change[2]]
+}

package/src/domain/record/serialization/conversions/index.ts

@@ -0,0 +1,7 @@
+export type { ChangeConverter } from './changeConverter'
+export { createChangeConverter } from './changeConverter'
+export type { ChangeDecoder } from './changeDecoder'
+export { createChangeDecoder } from './changeDecoder'
+export type { MutationLog } from './mutationLog'
+export type { NodeIdRemapper } from './nodeIdRemapper'
+export { createCopyingNodeIdRemapper, createIdentityNodeIdRemapper } from './nodeIdRemapper'

package/src/domain/record/serialization/conversions/mutationLog.ts

@@ -0,0 +1,56 @@
+import type { NodeId } from '../../itemIds'
+
+type ParentNodeId = NodeId
+
+export interface MutationLog {
+  onAttributeChanged(nodeId: NodeId, name: string): void
+  onNodeConnected(nodeId: NodeId): void
+  onNodeDisconnected(nodeId: NodeId, parentId: ParentNodeId): void
+  onTextChanged(nodeId: NodeId): void
+
+  clear(): void
+
+  attributeChanges: Map<NodeId, Set<string>>
+  nodeAdds: Set<NodeId>
+  nodeRemoves: Map<NodeId, ParentNodeId>
+  textChanges: Set<NodeId>
+}
+
+export function createMutationLog(): MutationLog {
+  const self: MutationLog = {
+    onAttributeChanged(nodeId: NodeId, name: string): void {
+      let changedAttributes = self.attributeChanges.get(nodeId)
+      if (!changedAttributes) {
+        changedAttributes = new Set<string>()
+        self.attributeChanges.set(nodeId, changedAttributes)
+      }
+      changedAttributes.add(name)
+    },
+
+    onNodeConnected(nodeId: NodeId): void {
+      self.nodeAdds.add(nodeId)
+    },
+
+    onNodeDisconnected(nodeId: NodeId, parentId: ParentNodeId): void {
+      self.nodeRemoves.set(nodeId, parentId)
+    },
+
+    onTextChanged(nodeId: NodeId): void {
+      self.textChanges.add(nodeId)
+    },
+
+    clear(): void {
+      self.attributeChanges.clear()
+      self.nodeAdds.clear()
+      self.nodeRemoves.clear()
+      self.textChanges.clear()
+    },
+
+    attributeChanges: new Map<NodeId, Set<string>>(),
+    nodeAdds: new Set<NodeId>(),
+    nodeRemoves: new Map<NodeId, ParentNodeId>(),
+    textChanges: new Set<NodeId>(),
+  }
+
+  return self
+}