fix to lower case

packages/rrweb-snapshot/src/snapshot.ts

@@ -21,6 +21,7 @@ import {
   isNativeShadowDom,
   getCssRulesString,
   getInputType,
+  toLowerCase,
 } from './utils';
 
 let _id = 1;
@@ -37,9 +38,7 @@ function getValidTagName(element: HTMLElement): Lowercase<string> {
     return 'form';
   }
 
-  const processedTagName = element.tagName
-    .toLowerCase()
-    .trim() as Lowercase<string>;
+  const processedTagName = toLowerCase(element.tagName);
 
   if (tagNameRegex.test(processedTagName)) {
     // if the tag name is odd and we cannot extract
@@ -640,7 +639,7 @@ function serializeElementNode(
       attributes[attr.name] = transformAttribute(
         doc,
         tagName,
-        attr.name.toLowerCase() as Lowercase<string>,
+        toLowerCase(attr.name),
         attr.value,
       );
     }

packages/rrweb-snapshot/src/utils.ts

@@ -169,7 +169,7 @@ export function maskInputValue({
   maskInputFn?: MaskInputFn;
 }): string {
   let text = value || '';
-  const actualType = type && type.toLowerCase();
+  const actualType = type && toLowerCase(type);
 
   if (
     maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
@@ -184,6 +184,10 @@ export function maskInputValue({
   return text;
 }
 
+export function toLowerCase<T extends string>(str: T): Lowercase<T> {
+  return str.toLowerCase() as unknown as Lowercase<T>;
+} 
+
 const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
 type PatchedGetImageData = {
   [ORIGINAL_ATTRIBUTE_NAME]: CanvasImageData['getImageData'];
@@ -265,6 +269,6 @@ export function getInputType(element: HTMLElement): Lowercase<string> | null {
     ? 'password'
     : type
     ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-      (type.toLowerCase() as Lowercase<string>)
+    toLowerCase(type)
     : null;
 }

packages/rrweb/src/record/mutation.ts

@@ -9,6 +9,7 @@ import {
   Mirror,
   isNativeShadowDom,
   getInputType,
+  toLowerCase,
 } from 'rrweb-snapshot';
 import type { observerParam, MutationBufferParam } from '../types';
 import type {
@@ -579,8 +580,8 @@ export default class MutationBuffer {
           // overwrite attribute if the mutations was triggered in same time
           item.attributes[attributeName] = transformAttribute(
             this.doc,
-            target.tagName.toLowerCase() as Lowercase<string>,
-            attributeName.toLowerCase() as Lowercase<string>,
+            toLowerCase(target.tagName),
+            toLowerCase(attributeName),
             value,
           );
         }

packages/rrweb/src/record/observer.ts

@@ -3,6 +3,7 @@ import {
   maskInputValue,
   Mirror,
   getInputType,
+  toLowerCase,
 } from 'rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
 import {
@@ -309,13 +310,13 @@ function initMouseInteractionObserver({
         disableMap[key] !== false,
     )
     .forEach((eventKey: keyof typeof MouseInteractions) => {
-      let eventName = eventKey.toLowerCase();
+      let eventName = toLowerCase(eventKey);
       const handler = getHandler(eventKey);
       if (window.PointerEvent) {
         switch (MouseInteractions[eventKey]) {
           case MouseInteractions.MouseDown:
           case MouseInteractions.MouseUp:
-            eventName = eventName.replace('mouse', 'pointer');
+            eventName = eventName.replace('mouse', 'pointer') as unknown as typeof eventName;
             break;
           case MouseInteractions.TouchStart:
           case MouseInteractions.TouchEnd:

packages/rrweb/src/replay/index.ts

@@ -8,6 +8,7 @@ import {
   createMirror,
   attributes,
   serializedElementNodeWithId,
+  toLowerCase,
 } from 'rrweb-snapshot';
 import {
   RRDocument,
@@ -1120,7 +1121,7 @@ export class Replayer {
         if (d.id === -1) {
           break;
         }
-        const event = new Event(MouseInteractions[d.type].toLowerCase());
+        const event = new Event(toLowerCase(MouseInteractions[d.type]));
         const target = this.mirror.getNode(d.id);
         if (!target) {
           return this.debugNodeNotFound(d, d.id);