Revert "fix(editor) Fix deep equality checks for new expression types. (#4971)" (#4981)

This reverts commit c59e60a.

Author: Rheeseyb

editor/src/components/editor/store/store-deep-equality-instances.spec.ts

@@ -39,7 +39,7 @@ import {
   JSXArraySpreadKeepDeepEqualityCall,
   JSXArrayValueKeepDeepEqualityCall,
   JSXAttributeFunctionCallKeepDeepEqualityCall,
-  JSExpressionKeepDeepEqualityCall,
+  JSXAttributeKeepDeepEqualityCall,
   JSXAttributeNestedArrayKeepDeepEqualityCall,
   JSXAttributeNestedObjectKeepDeepEqualityCall,
   JSExpressionOtherJavaScriptKeepDeepEqualityCall,
@@ -893,17 +893,17 @@ describe('JSXAttributeKeepDeepEqualityCall', () => {
   const newDifferentValue = jsExpressionValue('new', emptyComments, 'new')
 
   it('same reference returns the same reference', () => {
-    const result = JSExpressionKeepDeepEqualityCall(oldValue, oldValue)
+    const result = JSXAttributeKeepDeepEqualityCall(oldValue, oldValue)
     expect(result.value).toBe(oldValue)
     expect(result.areEqual).toEqual(true)
   })
   it('same value returns the same reference', () => {
-    const result = JSExpressionKeepDeepEqualityCall(oldValue, newSameValue)
+    const result = JSXAttributeKeepDeepEqualityCall(oldValue, newSameValue)
     expect(result.value).toBe(oldValue)
     expect(result.areEqual).toEqual(true)
   })
   it('different but similar value handled appropriately', () => {
-    const result = JSExpressionKeepDeepEqualityCall(oldValue, newDifferentValue)
+    const result = JSXAttributeKeepDeepEqualityCall(oldValue, newDifferentValue)
     expect(result.value.type).toBe(oldValue.type)
     expect((result.value as JSExpressionValue<string>).value).toBe(
       (newDifferentValue as JSExpressionValue<string>).value,

editor/src/components/editor/store/store-deep-equality-instances.ts

@@ -132,9 +132,6 @@ import type {
   JSXMapExpression,
   JSExpressionMapOrOtherJavascript,
   JSExpressionOtherJavaScript,
-  JSIdentifier,
-  JSPropertyAccess,
-  JSElementAccess,
 } from '../../../core/shared/element-template'
 import {
   elementInstanceMetadata,
@@ -191,16 +188,6 @@ import {
   isJSXMapExpression,
   arbitraryJSBlock,
   jsExpressionOtherJavaScript,
-  isJSExpressionValue,
-  isJSExpressionNestedArray,
-  isJSExpressionNestedObject,
-  isJSExpressionFunctionCall,
-  jsIdentifier,
-  jsPropertyAccess,
-  jsElementAccess,
-  isJSIdentifier,
-  isJSPropertyAccess,
-  isJSElementAccess,
 } from '../../../core/shared/element-template'
 import type {
   CanvasRectangle,
@@ -995,7 +982,7 @@ export const JSExpressionOtherJavaScriptOrJSXMapExpressionKeepDeepEqualityCall:
 export function JSXArrayValueKeepDeepEqualityCall(): KeepDeepEqualityCall<JSXArrayValue> {
   return combine2EqualityCalls(
     (value) => value.value,
-    JSExpressionKeepDeepEqualityCall,
+    JSXAttributeKeepDeepEqualityCall,
     (value) => value.comments,
     ParsedCommentsKeepDeepEqualityCall,
     jsxArrayValue,
@@ -1005,7 +992,7 @@ export function JSXArrayValueKeepDeepEqualityCall(): KeepDeepEqualityCall<JSXArr
 export function JSXArraySpreadKeepDeepEqualityCall(): KeepDeepEqualityCall<JSXArraySpread> {
   return combine2EqualityCalls(
     (value) => value.value,
-    JSExpressionKeepDeepEqualityCall,
+    JSXAttributeKeepDeepEqualityCall,
     (value) => value.comments,
     ParsedCommentsKeepDeepEqualityCall,
     jsxArraySpread,
@@ -1039,7 +1026,7 @@ export function JSXAttributeNestedArrayKeepDeepEqualityCall(): KeepDeepEqualityC
 export function JSXSpreadAssignmentKeepDeepEqualityCall(): KeepDeepEqualityCall<JSXSpreadAssignment> {
   return combine2EqualityCalls(
     (value) => value.value,
-    JSExpressionKeepDeepEqualityCall,
+    JSXAttributeKeepDeepEqualityCall,
     (value) => value.comments,
     ParsedCommentsKeepDeepEqualityCall,
     jsxSpreadAssignment,
@@ -1051,7 +1038,7 @@ export function JSXPropertyAssignmentKeepDeepEqualityCall(): KeepDeepEqualityCal
     (value) => value.key,
     createCallWithTripleEquals(),
     (value) => value.value,
-    JSExpressionKeepDeepEqualityCall,
+    JSXAttributeKeepDeepEqualityCall,
     (value) => value.comments,
     ParsedCommentsKeepDeepEqualityCall,
     (value) => value.keyComments,
@@ -1089,76 +1076,50 @@ export function JSXAttributeFunctionCallKeepDeepEqualityCall(): KeepDeepEquality
     (value) => value.functionName,
     createCallWithTripleEquals(),
     (value) => value.parameters,
-    arrayDeepEquality(JSExpressionKeepDeepEqualityCall),
+    arrayDeepEquality(JSXAttributeKeepDeepEqualityCall),
     (value) => value.uid,
     createCallWithTripleEquals<string>(),
     jsExpressionFunctionCall,
   )
 }
 
-export const JSExpressionKeepDeepEqualityCall: KeepDeepEqualityCall<JSExpression> = (
+export const JSXAttributeKeepDeepEqualityCall: KeepDeepEqualityCall<JSExpression> = (
   oldAttribute,
   newAttribute,
 ) => {
-  switch (oldAttribute.type) {
-    case 'JSX_MAP_EXPRESSION':
-      if (isJSXMapExpression(newAttribute)) {
-        return JSXMapExpressionKeepDeepEqualityCall()(oldAttribute, newAttribute)
-      }
-      break
-    case 'ATTRIBUTE_VALUE':
-      if (isJSExpressionValue(newAttribute)) {
-        return JSXAttributeValueKeepDeepEqualityCall(oldAttribute, newAttribute)
-      }
-      break
-    case 'JS_IDENTIFIER':
-      if (isJSIdentifier(newAttribute)) {
-        return JSIdentifierKeepDeepEquality()(oldAttribute, newAttribute)
-      }
-      break
-    case 'JS_ELEMENT_ACCESS':
-      if (isJSElementAccess(newAttribute)) {
-        return JSElementAccessKeepDeepEquality()(oldAttribute, newAttribute)
-      }
-      break
-    case 'JS_PROPERTY_ACCESS':
-      if (isJSPropertyAccess(newAttribute)) {
-        return JSPropertyAccessKeepDeepEquality()(oldAttribute, newAttribute)
-      }
-      break
-    case 'ATTRIBUTE_NESTED_ARRAY':
-      if (isJSExpressionNestedArray(newAttribute)) {
-        return JSXAttributeNestedArrayKeepDeepEqualityCall()(oldAttribute, newAttribute)
-      }
-      break
-    case 'ATTRIBUTE_NESTED_OBJECT':
-      if (isJSExpressionNestedObject(newAttribute)) {
-        return JSXAttributeNestedObjectKeepDeepEqualityCall()(oldAttribute, newAttribute)
-      }
-      break
-    case 'ATTRIBUTE_FUNCTION_CALL':
-      if (isJSExpressionFunctionCall(newAttribute)) {
-        return JSXAttributeFunctionCallKeepDeepEqualityCall()(oldAttribute, newAttribute)
-      }
-      break
-    case 'ATTRIBUTE_OTHER_JAVASCRIPT':
-      if (isJSExpressionOtherJavaScript(newAttribute)) {
-        return JSExpressionOtherJavaScriptKeepDeepEqualityCall()(oldAttribute, newAttribute)
-      }
-      break
-    default:
-      assertNever(oldAttribute)
+  if (isJSXAttributeValue(oldAttribute) && isJSXAttributeValue(newAttribute)) {
+    return JSXAttributeValueKeepDeepEqualityCall(oldAttribute, newAttribute)
+  } else if (
+    modifiableAttributeIsAttributeOtherJavaScript(oldAttribute) &&
+    modifiableAttributeIsAttributeOtherJavaScript(newAttribute)
+  ) {
+    return JSExpressionOtherJavaScriptKeepDeepEqualityCall()(oldAttribute, newAttribute)
+  } else if (
+    modifiableAttributeIsAttributeNestedArray(oldAttribute) &&
+    modifiableAttributeIsAttributeNestedArray(newAttribute)
+  ) {
+    return JSXAttributeNestedArrayKeepDeepEqualityCall()(oldAttribute, newAttribute)
+  } else if (
+    modifiableAttributeIsAttributeNestedObject(oldAttribute) &&
+    modifiableAttributeIsAttributeNestedObject(newAttribute)
+  ) {
+    return JSXAttributeNestedObjectKeepDeepEqualityCall()(oldAttribute, newAttribute)
+  } else if (
+    modifiableAttributeIsAttributeFunctionCall(oldAttribute) &&
+    modifiableAttributeIsAttributeFunctionCall(newAttribute)
+  ) {
+    return JSXAttributeFunctionCallKeepDeepEqualityCall()(oldAttribute, newAttribute)
+  } else {
+    return keepDeepEqualityResult(newAttribute, false)
   }
-
-  return keepDeepEqualityResult(newAttribute, false)
 }
 
 export function JSXAttributesEntryDeepEqualityCall(): KeepDeepEqualityCall<JSXAttributesEntry> {
   return combine3EqualityCalls(
     (entry) => entry.key,
     createCallWithTripleEquals(),
     (entry) => entry.value,
-    JSExpressionKeepDeepEqualityCall,
+    JSXAttributeKeepDeepEqualityCall,
     (entry) => entry.comments,
     ParsedCommentsKeepDeepEqualityCall,
     jsxAttributesEntry,
@@ -1168,7 +1129,7 @@ export function JSXAttributesEntryDeepEqualityCall(): KeepDeepEqualityCall<JSXAt
 export function JSXAttributesSpreadDeepEqualityCall(): KeepDeepEqualityCall<JSXAttributesSpread> {
   return combine2EqualityCalls(
     (entry) => entry.spreadValue,
-    JSExpressionKeepDeepEqualityCall,
+    JSXAttributeKeepDeepEqualityCall,
     (entry) => entry.comments,
     ParsedCommentsKeepDeepEqualityCall,
     jsxAttributesSpread,
@@ -1244,119 +1205,41 @@ export function ArbitraryJSBlockKeepDeepEquality(): KeepDeepEqualityCall<Arbitra
   )
 }
 
-export function JSIdentifierKeepDeepEquality(): KeepDeepEqualityCall<JSIdentifier> {
-  return combine3EqualityCalls(
-    (identifier) => identifier.name,
-    createCallWithTripleEquals<string>(),
-    (identifier) => identifier.uid,
-    createCallWithTripleEquals<string>(),
-    (identifier) => identifier.comments,
-    ParsedCommentsKeepDeepEqualityCall,
-    jsIdentifier,
-  )
-}
-
-export function JSPropertyAccessKeepDeepEquality(): KeepDeepEqualityCall<JSPropertyAccess> {
-  return combine4EqualityCalls(
-    (access) => access.onValue,
-    JSExpressionKeepDeepEqualityCall,
-    (access) => access.property,
-    createCallWithTripleEquals<string>(),
-    (access) => access.uid,
-    createCallWithTripleEquals<string>(),
-    (access) => access.comments,
-    ParsedCommentsKeepDeepEqualityCall,
-    jsPropertyAccess,
-  )
-}
-
-export function JSElementAccessKeepDeepEquality(): KeepDeepEqualityCall<JSElementAccess> {
-  return combine4EqualityCalls(
-    (access) => access.onValue,
-    JSExpressionKeepDeepEqualityCall,
-    (access) => access.element,
-    JSExpressionKeepDeepEqualityCall,
-    (access) => access.uid,
-    createCallWithTripleEquals<string>(),
-    (access) => access.comments,
-    ParsedCommentsKeepDeepEqualityCall,
-    jsElementAccess,
-  )
-}
-
 export function JSXElementChildKeepDeepEquality(): KeepDeepEqualityCall<JSXElementChild> {
   return (oldElement, newElement) => {
-    switch (oldElement.type) {
-      case 'JSX_ELEMENT':
-        if (isJSXElement(newElement)) {
-          return JSXElementKeepDeepEquality(oldElement, newElement)
-        }
-        break
-      case 'JSX_FRAGMENT':
-        if (isJSXFragment(newElement)) {
-          return JSXFragmentKeepDeepEquality(oldElement, newElement)
-        }
-        break
-      case 'JSX_TEXT_BLOCK':
-        if (isJSXTextBlock(newElement)) {
-          return JSXTextBlockKeepDeepEquality(oldElement, newElement)
-        }
-        break
-      case 'JSX_CONDITIONAL_EXPRESSION':
-        if (isJSXConditionalExpression(newElement)) {
-          return JSXConditionalExpressionKeepDeepEquality(oldElement, newElement)
-        }
-        break
-      case 'JSX_MAP_EXPRESSION':
-        if (isJSXMapExpression(newElement)) {
-          return JSXMapExpressionKeepDeepEqualityCall()(oldElement, newElement)
-        }
-        break
-      case 'ATTRIBUTE_VALUE':
-        if (isJSExpressionValue(newElement)) {
-          return JSXAttributeValueKeepDeepEqualityCall(oldElement, newElement)
-        }
-        break
-      case 'JS_IDENTIFIER':
-        if (isJSIdentifier(newElement)) {
-          return JSIdentifierKeepDeepEquality()(oldElement, newElement)
-        }
-        break
-      case 'JS_ELEMENT_ACCESS':
-        if (isJSElementAccess(newElement)) {
-          return JSElementAccessKeepDeepEquality()(oldElement, newElement)
-        }
-        break
-      case 'JS_PROPERTY_ACCESS':
-        if (isJSPropertyAccess(newElement)) {
-          return JSPropertyAccessKeepDeepEquality()(oldElement, newElement)
-        }
-        break
-      case 'ATTRIBUTE_NESTED_ARRAY':
-        if (isJSExpressionNestedArray(newElement)) {
-          return JSXAttributeNestedArrayKeepDeepEqualityCall()(oldElement, newElement)
-        }
-        break
-      case 'ATTRIBUTE_NESTED_OBJECT':
-        if (isJSExpressionNestedObject(newElement)) {
-          return JSXAttributeNestedObjectKeepDeepEqualityCall()(oldElement, newElement)
-        }
-        break
-      case 'ATTRIBUTE_FUNCTION_CALL':
-        if (isJSExpressionFunctionCall(newElement)) {
-          return JSXAttributeFunctionCallKeepDeepEqualityCall()(oldElement, newElement)
-        }
-        break
-      case 'ATTRIBUTE_OTHER_JAVASCRIPT':
-        if (isJSExpressionOtherJavaScript(newElement)) {
-          return JSExpressionOtherJavaScriptKeepDeepEqualityCall()(oldElement, newElement)
-        }
-        break
-      default:
-        assertNever(oldElement)
+    if (isJSXElement(oldElement) && isJSXElement(newElement)) {
+      return JSXElementKeepDeepEquality(oldElement, newElement)
+    } else if (isJSXTextBlock(oldElement) && isJSXTextBlock(newElement)) {
+      return JSXTextBlockKeepDeepEquality(oldElement, newElement)
+    } else if (isJSXFragment(oldElement) && isJSXFragment(newElement)) {
+      return JSXFragmentKeepDeepEquality(oldElement, newElement)
+    } else if (isJSXConditionalExpression(oldElement) && isJSXConditionalExpression(newElement)) {
+      return JSXConditionalExpressionKeepDeepEquality(oldElement, newElement)
+    } else if (oldElement.type === 'ATTRIBUTE_VALUE' && newElement.type === 'ATTRIBUTE_VALUE') {
+      return JSXAttributeValueKeepDeepEqualityCall(oldElement, newElement)
+    } else if (
+      oldElement.type === 'ATTRIBUTE_OTHER_JAVASCRIPT' &&
+      newElement.type === 'ATTRIBUTE_OTHER_JAVASCRIPT'
+    ) {
+      return JSExpressionOtherJavaScriptKeepDeepEqualityCall()(oldElement, newElement)
+    } else if (
+      oldElement.type === 'ATTRIBUTE_NESTED_ARRAY' &&
+      newElement.type === 'ATTRIBUTE_NESTED_ARRAY'
+    ) {
+      return JSXAttributeNestedArrayKeepDeepEqualityCall()(oldElement, newElement)
+    } else if (
+      oldElement.type === 'ATTRIBUTE_NESTED_OBJECT' &&
+      newElement.type === 'ATTRIBUTE_NESTED_OBJECT'
+    ) {
+      return JSXAttributeNestedObjectKeepDeepEqualityCall()(oldElement, newElement)
+    } else if (
+      oldElement.type === 'ATTRIBUTE_FUNCTION_CALL' &&
+      newElement.type === 'ATTRIBUTE_FUNCTION_CALL'
+    ) {
+      return JSXAttributeFunctionCallKeepDeepEqualityCall()(oldElement, newElement)
+    } else {
+      return keepDeepEqualityResult(newElement, false)
     }
-
-    return keepDeepEqualityResult(newElement, false)
   }
 }
 
@@ -1472,7 +1355,7 @@ export const JSXConditionalExpressionKeepDeepEquality: KeepDeepEqualityCall<JSXC
     (conditional) => conditional.uid,
     StringKeepDeepEquality,
     (conditional) => conditional.condition,
-    JSExpressionKeepDeepEqualityCall,
+    JSXAttributeKeepDeepEqualityCall,
     (conditional) => conditional.originalConditionString,
     StringKeepDeepEquality,
     (conditional) => conditional.whenTrue,
@@ -2087,7 +1970,7 @@ export const EditorStateCanvasTransientPropertyKeepDeepEquality: KeepDeepEqualit
     (property) => property.elementPath,
     ElementPathKeepDeepEquality,
     (property) => property.attributesToUpdate,
-    objectDeepEquality(JSExpressionKeepDeepEqualityCall),
+    objectDeepEquality(JSXAttributeKeepDeepEqualityCall),
     editorStateCanvasTransientProperty,
   )
 
@@ -4148,7 +4031,7 @@ export const ValueAtPathDeepEquality: KeepDeepEqualityCall<ValueAtPath> = combin
   (c) => c.path,
   PropertyPathKeepDeepEquality(),
   (c) => c.value,
-  JSExpressionKeepDeepEqualityCall,
+  JSXAttributeKeepDeepEqualityCall,
   valueAtPath,
 )