From b4cfc16e129b863fdf795a0eefe2c9587520f541 Mon Sep 17 00:00:00 2001
From: Victor Nascimento <victor.nascimento@warnermedia.com>
Date: Sat, 6 Aug 2022 13:27:53 +0200
Subject: [PATCH] feat: ungroup dynamics for universal renderer

---
 .../src/universal/template.js                 | 46 +----------
 .../attributeExpressions/output.js            | 80 +++++++++----------
 2 files changed, 42 insertions(+), 84 deletions(-)

diff --git a/packages/babel-plugin-jsx-dom-expressions/src/universal/template.js b/packages/babel-plugin-jsx-dom-expressions/src/universal/template.js
index 1075961a..38010a0a 100644
--- a/packages/babel-plugin-jsx-dom-expressions/src/universal/template.js
+++ b/packages/babel-plugin-jsx-dom-expressions/src/universal/template.js
@@ -39,59 +39,19 @@ function wrapDynamics(path, dynamics) {
   const config = getConfig(path);
 
   const effectWrapperId = registerImportMethod(path, config.effectWrapper);
+  const prevValue = t.identifier("_$p");
 
-  if (dynamics.length === 1) {
-    const prevValue = t.identifier("_$p");
-
+  return dynamics.map(({ elem, key, value }) => {
     return t.expressionStatement(
       t.callExpression(effectWrapperId, [
         t.arrowFunctionExpression(
           [prevValue],
-          setAttr(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
+          setAttr(path, elem, key, value, {
             dynamic: true,
             prevId: prevValue
           })
         )
       ])
     );
-  }
-  const decls = [],
-    statements = [],
-    identifiers = [],
-    prevId = t.identifier("_p$");
-  dynamics.forEach(({ elem, key, value }) => {
-    const identifier = path.scope.generateUidIdentifier("v$");
-    identifiers.push(identifier);
-    decls.push(t.variableDeclarator(identifier, value));
-    const prev = t.memberExpression(prevId, identifier);
-    statements.push(
-      t.expressionStatement(
-        t.logicalExpression(
-          "&&",
-          t.binaryExpression("!==", identifier, t.memberExpression(prevId, identifier)),
-          t.assignmentExpression("=", t.memberExpression(prevId, identifier), setAttr(
-            path,
-            elem,
-            key,
-            identifier,
-            { dynamic: true, prevId: prev }
-          ))
-        )
-      )
-    );
   });
-
-  return t.expressionStatement(
-    t.callExpression(effectWrapperId, [
-      t.arrowFunctionExpression(
-        [prevId],
-        t.blockStatement([
-          t.variableDeclaration("const", decls),
-          ...statements,
-          t.returnStatement(prevId)
-        ])
-      ),
-      t.objectExpression(identifiers.map(id => t.objectProperty(id, t.identifier("undefined"))))
-    ])
-  );
 }
diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/attributeExpressions/output.js
index 88df8191..e2c2c0ab 100644
--- a/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/attributeExpressions/output.js
+++ b/packages/babel-plugin-jsx-dom-expressions/test/__universal_fixtures__/attributeExpressions/output.js
@@ -41,28 +41,30 @@ const template = (() => {
 
   _$setProp(_el$3, "readonly", value);
 
-  _$effect(
-    _p$ => {
-      const _v$ = welcoming(),
-        _v$2 = {
-          "background-color": color(),
-          "margin-right": "40px"
-        },
-        _v$3 = {
-          dynamic: dynamic(),
-          selected
-        };
-
-      _v$ !== _p$._v$ && (_p$._v$ = _$setProp(_el$2, "title", _v$, _p$._v$));
-      _v$2 !== _p$._v$2 && (_p$._v$2 = _$setProp(_el$2, "style", _v$2, _p$._v$2));
-      _v$3 !== _p$._v$3 && (_p$._v$3 = _$setProp(_el$2, "classList", _v$3, _p$._v$3));
-      return _p$;
-    },
-    {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined
-    }
+  _$effect(_$p => _$setProp(_el$2, "title", welcoming(), _$p));
+
+  _$effect(_$p =>
+    _$setProp(
+      _el$2,
+      "style",
+      {
+        "background-color": color(),
+        "margin-right": "40px"
+      },
+      _$p
+    )
+  );
+
+  _$effect(_$p =>
+    _$setProp(
+      _el$2,
+      "classList",
+      {
+        dynamic: dynamic(),
+        selected
+      },
+      _$p
+    )
   );
 
   return _el$;
@@ -144,27 +146,23 @@ const template6 = (() => {
 const template7 = (() => {
   const _el$13 = _$createElement("div");
 
-  _$effect(
-    _p$ => {
-      const _v$4 = {
-          "background-color": color(),
-          "margin-right": "40px",
-          ...props.style
-        },
-        _v$5 = props.top,
-        _v$6 = props.active;
-      _v$4 !== _p$._v$4 && (_p$._v$4 = _$setProp(_el$13, "style", _v$4, _p$._v$4));
-      _v$5 !== _p$._v$5 && (_p$._v$5 = _$setProp(_el$13, "style:padding-top", _v$5, _p$._v$5));
-      _v$6 !== _p$._v$6 && (_p$._v$6 = _$setProp(_el$13, "class:my-class", _v$6, _p$._v$6));
-      return _p$;
-    },
-    {
-      _v$4: undefined,
-      _v$5: undefined,
-      _v$6: undefined
-    }
+  _$effect(_$p =>
+    _$setProp(
+      _el$13,
+      "style",
+      {
+        "background-color": color(),
+        "margin-right": "40px",
+        ...props.style
+      },
+      _$p
+    )
   );
 
+  _$effect(_$p => _$setProp(_el$13, "style:padding-top", props.top, _$p));
+
+  _$effect(_$p => _$setProp(_el$13, "class:my-class", props.active, _$p));
+
   return _el$13;
 })();