fix double invocation for single dynamic style (#323)

packages/babel-plugin-jsx-dom-expressions/src/dom/template.js

@@ -102,11 +102,16 @@ function wrapDynamics(path, dynamics) {
   const effectWrapperId = registerImportMethod(path, config.effectWrapper);
 
   if (dynamics.length === 1) {
+    let dynamicStyle;
     const prevValue =
-      dynamics[0].key === "classList" || dynamics[0].key === "style"
+      dynamics[0].key === "classList" ||
+      dynamics[0].key === "style" ||
+      (dynamicStyle = dynamics[0].key.startsWith("style:"))
         ? t.identifier("_$p")
         : undefined;
-    if (
+    if (dynamicStyle) {
+      dynamics[0].value = t.assignmentExpression("=", prevValue, dynamics[0].value);
+    } else if (
       dynamics[0].key.startsWith("class:") &&
       !t.isBooleanLiteral(dynamics[0].value) &&
       !t.isUnaryExpression(dynamics[0].value)

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js

@@ -201,3 +201,5 @@ const template37 = <div ref={a() ? b : c} />
 const template38 = <div ref={a() ?? b} />
 
 const template39 = <input value={10} />
+
+const template40 = <div style={{ color: a() }} />

packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js

@@ -340,9 +340,9 @@ const template29 = (() => {
 const template30 = _tmpl$17();
 const template31 = (() => {
   var _el$44 = _tmpl$4();
-  _$effect(() =>
-    getStore.itemProperties.color != null
-      ? _el$44.style.setProperty("background-color", getStore.itemProperties.color)
+  _$effect(_$p =>
+    (_$p = getStore.itemProperties.color) != null
+      ? _el$44.style.setProperty("background-color", _$p)
       : _el$44.style.removeProperty("background-color")
   );
   return _el$44;
@@ -406,4 +406,13 @@ const template38 = (() => {
   return _el$54;
 })();
 const template39 = _tmpl$19();
+const template40 = (() => {
+  var _el$56 = _tmpl$4();
+  _$effect(_$p =>
+    (_$p = a()) != null
+      ? _el$56.style.setProperty("color", _$p)
+      : _el$56.style.removeProperty("color")
+  );
+  return _el$56;
+})();
 _$delegateEvents(["click", "input"]);

packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/code.js

@@ -201,3 +201,5 @@ const template37 = <div ref={a() ? b : c} />
 const template38 = <div ref={a() ?? b} />
 
 const template39 = <input value={10} />
+
+const template40 = <div style={{ color: a() }} />

packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js

@@ -358,9 +358,9 @@ const template29 = (() => {
 const template30 = _$getNextElement(_tmpl$17);
 const template31 = (() => {
   var _el$48 = _$getNextElement(_tmpl$4);
-  _$effect(() =>
-    getStore.itemProperties.color != null
-      ? _el$48.style.setProperty("background-color", getStore.itemProperties.color)
+  _$effect(_$p =>
+    (_$p = getStore.itemProperties.color) != null
+      ? _el$48.style.setProperty("background-color", _$p)
       : _el$48.style.removeProperty("background-color")
   );
   return _el$48;
@@ -425,4 +425,13 @@ const template38 = (() => {
   return _el$58;
 })();
 const template39 = _$getNextElement(_tmpl$19);
+const template40 = (() => {
+  var _el$60 = _$getNextElement(_tmpl$4);
+  _$effect(_$p =>
+    (_$p = a()) != null
+      ? _el$60.style.setProperty("color", _$p)
+      : _el$60.style.removeProperty("color")
+  );
+  return _el$60;
+})();
 _$delegateEvents(["click", "input"]);

packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/attributeExpressions/code.js

@@ -76,3 +76,5 @@ const template18 = <div ref={a().b?.c} />
 const template19 = <div ref={a() ? b : c} />
 
 const template20 = <div ref={a() ?? b} />
+
+const template21 = <div style={{ color: a() }} />

packages/babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/attributeExpressions/output.js

@@ -211,3 +211,12 @@ const template20 = (() => {
   typeof _ref$7 === "function" && _$use(_ref$7, _el$26);
   return _el$26;
 })();
+const template21 = (() => {
+  var _el$27 = _tmpl$3();
+  _$effect(_$p =>
+    (_$p = a()) != null
+      ? _el$27.style.setProperty("color", _$p)
+      : _el$27.style.removeProperty("color")
+  );
+  return _el$27;
+})();

packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/code.js

@@ -201,3 +201,5 @@ const template37 = <div ref={a() ? b : c} />
 const template38 = <div ref={a() ?? b} />
 
 const template39 = <input value={10} />
+
+const template40 = <div style={{ color: a() }} />

packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/output.js

@@ -223,3 +223,4 @@ const template36 = _$ssr(_tmpl$8);
 const template37 = _$ssr(_tmpl$8);
 const template38 = _$ssr(_tmpl$8);
 const template39 = _$ssr(_tmpl$21);
+const template40 = _$ssr(_tmpl$15, "color:" + _$escape(a(), true));

packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/code.js

@@ -201,3 +201,5 @@ const template37 = <div ref={a() ? b : c} />
 const template38 = <div ref={a() ?? b} />
 
 const template39 = <input value={10} />
+
+const template40 = <div style={{ color: a() }} />

packages/babel-plugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/output.js

@@ -272,3 +272,4 @@ const template36 = _$ssr(_tmpl$8, _$ssrHydrationKey());
 const template37 = _$ssr(_tmpl$8, _$ssrHydrationKey());
 const template38 = _$ssr(_tmpl$8, _$ssrHydrationKey());
 const template39 = _$ssr(_tmpl$22, _$ssrHydrationKey());
+const template40 = _$ssr(_tmpl$15, _$ssrHydrationKey(), "color:" + _$escape(a(), true));