Fixes to #628 to help it pass typescript's type checking (#634)

* My best interpretation of what the typings should look like after merge of #464

* Apply variable name changes as per Juice10 review

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* fix types

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>

src/record/mutation.ts

@@ -21,6 +21,7 @@ import {
   removedNodeMutation,
   addedNodeMutation,
   Mirror,
+  styleAttributeValue,
 } from '../types';
 import {
   isBlocked,
@@ -449,7 +450,7 @@ export default class MutationBuffer {
         break;
       }
       case 'attributes': {
-        const target = (m.target as HTMLElement);
+        const target = m.target as HTMLElement;
         let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
         if (m.attributeName === 'value') {
           value = maskInputValue({
@@ -475,29 +476,38 @@ export default class MutationBuffer {
         }
         if (m.attributeName === 'style') {
           const old = this.doc.createElement('span');
-          old.setAttribute('style', m.oldValue);
+          if (m.oldValue) {
-          if (item.attributes['style'] === undefined) {
+            old.setAttribute('style', m.oldValue);
+          }
+          if (
+            item.attributes['style'] === undefined ||
+            item.attributes['style'] === null
+          ) {
             item.attributes['style'] = {};
           }
-          for (let i=0; i<target.style.length; i++) {
+          const styleObj = item.attributes['style'] as styleAttributeValue;
+          for (let i = 0; i < target.style.length; i++) {
             let pname = target.style[i];
             const newValue = target.style.getPropertyValue(pname);
             const newPriority = target.style.getPropertyPriority(pname);
-            if (newValue != old.style.getPropertyValue(pname) ||
+            if (
-                newPriority != old.style.getPropertyPriority(pname)) {
+              newValue != old.style.getPropertyValue(pname) ||
+              newPriority != old.style.getPropertyPriority(pname)
+            ) {
               if (newPriority == '') {
-                item.attributes['style'][pname] = newValue;
+                styleObj[pname] = newValue;
               } else {
-                item.attributes['style'][pname] = [newValue, newPriority];
+                styleObj[pname] = [newValue, newPriority];
               }
             }
           }
-          for (let i=0; i<old.style.length; i++) {
+          for (let i = 0; i < old.style.length; i++) {
             let pname = old.style[i];
-            if (target.style.getPropertyValue(pname) === '' ||
+            if (
-                !target.style.getPropertyValue(pname)  // covering potential non-standard browsers
+              target.style.getPropertyValue(pname) === '' ||
-               ) {
+              !target.style.getPropertyValue(pname) // covering potential non-standard browsers
-              item.attributes['style'][pname] = false;  // delete
+            ) {
+              styleObj[pname] = false; // delete
             }
           }
         } else {

src/replay/index.ts

@@ -28,6 +28,8 @@ import {
   canvasMutationData,
   Mirror,
   ElementState,
+  styleAttributeValue,
+  styleValueWithPriority,
 } from '../types';
 import {
   createMirror,
@@ -1323,13 +1325,17 @@ export class Replayer {
               }
             }
           } else if (attributeName === 'style') {
-            for (var s in value) {
+            let styleValues = (value as styleAttributeValue);
-              if (value[s] === false) {
+            const targetEl = ((target as Node) as HTMLElement);
-                ((target as Node) as Element).style.removeProperty(s);
+            for (var s in styleValues) {
-              } else if (Array.isArray(value[s])) {
+              if (styleValues[s] === false) {
-                ((target as Node) as Element).style.setProperty(s, value[s][0], value[s][1]);
+                targetEl.style.removeProperty(s);
+              } else if (styleValues[s] instanceof Array) {
+                const svp = (styleValues[s] as styleValueWithPriority);
+                targetEl.style.setProperty(s, svp[0], svp[1]);
               } else {
-                ((target as Node) as Element).style.setProperty(s, value[s]);
+                const svs = (styleValues[s] as string)
+                targetEl.style.setProperty(s, svs);
               }
             }
           }

src/types.ts

@@ -295,9 +295,11 @@ export type textMutation = {
 };
 
 export type styleAttributeValue = {
-  [key:string]: [string, string] | string | false;
+  [key:string]: styleValueWithPriority | string | false;
 };
 
+export type styleValueWithPriority = [string, string];
+
 export type attributeCursor = {
   node: Node;
   attributes: {

typings/types.d.ts

@@ -211,16 +211,20 @@ export declare type textMutation = {
     id: number;
     value: string | null;
 };
+export declare type styleAttributeValue = {
+    [key: string]: styleValueWithPriority | string | false;
+};
+export declare type styleValueWithPriority = [string, string];
 export declare type attributeCursor = {
     node: Node;
     attributes: {
-        [key: string]: string | null;
+        [key: string]: string | styleAttributeValue | null;
     };
 };
 export declare type attributeMutation = {
     id: number;
     attributes: {
-        [key: string]: string | null;
+        [key: string]: string | styleAttributeValue | null;
     };
 };
 export declare type removedNodeMutation = {