Skip to content

Commit 1b29a09

Browse files
ryansolidryansolid
authored
Merge pull request #440 from titoBouzout/short-styles
Make "style set property" code smaller
2 parents 80b3ed6 + ef6d9fb commit 1b29a09

File tree

9 files changed

+48
-119
lines changed

9 files changed

+48
-119
lines changed

‎packages/babel-plugin-jsx-dom-expressions/src/dom/element.js‎

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -160,43 +160,18 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE,
160160
namespace = parts[0];
161161
}
162162

163-
// TODO: consider moving to a helper
164163
if (namespace === "style") {
165-
if (t.isStringLiteral(value)) {
166-
return t.callExpression(
167-
t.memberExpression(
168-
t.memberExpression(elem, t.identifier("style")),
169-
t.identifier("setProperty")
170-
),
171-
[t.stringLiteral(name), value]
172-
);
173-
}
174-
if (t.isNullLiteral(value) || t.isIdentifier(value, { name: "undefined" })) {
175-
return t.callExpression(
176-
t.memberExpression(
177-
t.memberExpression(elem, t.identifier("style")),
178-
t.identifier("removeProperty")
179-
),
180-
[t.stringLiteral(name)]
181-
);
182-
}
183-
return t.conditionalExpression(
184-
t.binaryExpression("!=", value, t.nullLiteral()),
185-
t.callExpression(
186-
t.memberExpression(
187-
t.memberExpression(elem, t.identifier("style")),
188-
t.identifier("setProperty")
189-
),
190-
[t.stringLiteral(name), prevId ? prevId : value]
191-
),
192-
t.callExpression(
193-
t.memberExpression(
194-
t.memberExpression(elem, t.identifier("style")),
195-
t.identifier("removeProperty")
196-
),
197-
[t.stringLiteral(name)]
198-
)
164+
const setStyleProperty = registerImportMethod(
165+
path,
166+
"setStyleProperty",
167+
getRendererConfig(path, "dom").moduleName
199168
);
169+
170+
return t.callExpression(setStyleProperty, [
171+
elem,
172+
t.stringLiteral(name),
173+
t.isAssignmentExpression(value) && t.isIdentifier(value.left) ? value.right : value
174+
]);
200175
}
201176

202177
if (namespace === "class") {

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { memo as _$memo } from "r-dom";
66
import { addEventListener as _$addEventListener } from "r-dom";
77
import { style as _$style } from "r-dom";
88
import { className as _$className } from "r-dom";
9+
import { setStyleProperty as _$setStyleProperty } from "r-dom";
910
import { setAttribute as _$setAttribute } from "r-dom";
1011
import { effect as _$effect } from "r-dom";
1112
import { classList as _$classList } from "r-dom";
@@ -164,9 +165,7 @@ const template2 = (() => {
164165
const template3 = (() => {
165166
var _el$9 = _tmpl$3();
166167
_$setAttribute(_el$9, "id", state.id);
167-
state.color != null
168-
? _el$9.style.setProperty("background-color", state.color)
169-
: _el$9.style.removeProperty("background-color");
168+
_$setStyleProperty(_el$9, "background-color", state.color);
170169
_el$9.textContent = state.content;
171170
_$effect(() => _$setAttribute(_el$9, "name", state.name));
172171
return _el$9;
@@ -200,10 +199,7 @@ const template7 = (() => {
200199
_v$2 = props.top,
201200
_v$3 = !!props.active;
202201
_p$.e = _$style(_el$13, _v$, _p$.e);
203-
_v$2 !== _p$.t &&
204-
((_p$.t = _v$2) != null
205-
? _el$13.style.setProperty("padding-top", _v$2)
206-
: _el$13.style.removeProperty("padding-top"));
202+
_v$2 !== _p$.t && _$setStyleProperty(_el$13, "padding-top", (_p$.t = _v$2));
207203
_v$3 !== _p$.a && _el$13.classList.toggle("my-class", (_p$.a = _v$3));
208204
return _p$;
209205
},
@@ -399,11 +395,7 @@ const template29 = (() => {
399395
const template30 = _tmpl$19();
400396
const template31 = (() => {
401397
var _el$44 = _tmpl$4();
402-
_$effect(_$p =>
403-
(_$p = getStore.itemProperties.color) != null
404-
? _el$44.style.setProperty("background-color", _$p)
405-
: _el$44.style.removeProperty("background-color")
406-
);
398+
_$effect(_$p => _$setStyleProperty(_el$44, "background-color", getStore.itemProperties.color));
407399
return _el$44;
408400
})();
409401
const template32 = _tmpl$4();
@@ -463,11 +455,7 @@ const template38 = (() => {
463455
const template39 = _tmpl$21();
464456
const template40 = (() => {
465457
var _el$56 = _tmpl$4();
466-
_$effect(_$p =>
467-
(_$p = a()) != null
468-
? _el$56.style.setProperty("color", _$p)
469-
: _el$56.style.removeProperty("color")
470-
);
458+
_$effect(_$p => _$setStyleProperty(_el$56, "color", a()));
471459
return _el$56;
472460
})();
473461
const template41 = (() => {

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { createComponent as _$createComponent } from "r-dom";
44
import { spread as _$spread } from "r-dom";
55
import { setAttribute as _$setAttribute } from "r-dom";
66
import { effect as _$effect } from "r-dom";
7+
import { setStyleProperty as _$setStyleProperty } from "r-dom";
78
var _tmpl$ = /*#__PURE__*/ _$template(
89
`<svg width=400 height=180><rect stroke-width=2 x=50 y=20 rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;stroke-width:5;opacity:0.5></rect><linearGradient gradientTransform=rotate(25)><stop offset=0%>`
910
),
@@ -27,9 +28,9 @@ const template = _tmpl$();
2728
const template2 = (() => {
2829
var _el$2 = _tmpl$2(),
2930
_el$3 = _el$2.firstChild;
30-
_el$3.style.setProperty("fill", "red");
31-
_el$3.style.setProperty("stroke", "black");
32-
_el$3.style.setProperty("opacity", "0.5");
31+
_$setStyleProperty(_el$3, "fill", "red");
32+
_$setStyleProperty(_el$3, "stroke", "black");
33+
_$setStyleProperty(_el$3, "opacity", "0.5");
3334
_$effect(
3435
_p$ => {
3536
var _v$ = state.name,
@@ -41,10 +42,7 @@ const template2 = (() => {
4142
_v$2 !== _p$.t && _$setAttribute(_el$3, "stroke-width", (_p$.t = _v$2));
4243
_v$3 !== _p$.a && _$setAttribute(_el$3, "x", (_p$.a = _v$3));
4344
_v$4 !== _p$.o && _$setAttribute(_el$3, "y", (_p$.o = _v$4));
44-
_v$5 !== _p$.i &&
45-
((_p$.i = _v$5) != null
46-
? _el$3.style.setProperty("stroke-width", _v$5)
47-
: _el$3.style.removeProperty("stroke-width"));
45+
_v$5 !== _p$.i && _$setStyleProperty(_el$3, "stroke-width", (_p$.i = _v$5));
4846
return _p$;
4947
},
5048
{

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { memo as _$memo } from "r-dom";
66
import { addEventListener as _$addEventListener } from "r-dom";
77
import { style as _$style } from "r-dom";
88
import { className as _$className } from "r-dom";
9+
import { setStyleProperty as _$setStyleProperty } from "r-dom";
910
import { setAttribute as _$setAttribute } from "r-dom";
1011
import { effect as _$effect } from "r-dom";
1112
import { classList as _$classList } from "r-dom";
@@ -149,9 +150,7 @@ const template2 = (() => {
149150
const template3 = (() => {
150151
var _el$9 = _tmpl$3();
151152
_$setAttribute(_el$9, "id", state.id);
152-
state.color != null
153-
? _el$9.style.setProperty("background-color", state.color)
154-
: _el$9.style.removeProperty("background-color");
153+
_$setStyleProperty(_el$9, "background-color", state.color);
155154
_el$9.textContent = state.content;
156155
_$effect(() => _$setAttribute(_el$9, "name", state.name));
157156
return _el$9;
@@ -185,10 +184,7 @@ const template7 = (() => {
185184
_v$2 = props.top,
186185
_v$3 = !!props.active;
187186
_p$.e = _$style(_el$13, _v$, _p$.e);
188-
_v$2 !== _p$.t &&
189-
((_p$.t = _v$2) != null
190-
? _el$13.style.setProperty("padding-top", _v$2)
191-
: _el$13.style.removeProperty("padding-top"));
187+
_v$2 !== _p$.t && _$setStyleProperty(_el$13, "padding-top", (_p$.t = _v$2));
192188
_v$3 !== _p$.a && _el$13.classList.toggle("my-class", (_p$.a = _v$3));
193189
return _p$;
194190
},
@@ -384,11 +380,7 @@ const template29 = (() => {
384380
const template30 = _tmpl$19();
385381
const template31 = (() => {
386382
var _el$44 = _tmpl$4();
387-
_$effect(_$p =>
388-
(_$p = getStore.itemProperties.color) != null
389-
? _el$44.style.setProperty("background-color", _$p)
390-
: _el$44.style.removeProperty("background-color")
391-
);
383+
_$effect(_$p => _$setStyleProperty(_el$44, "background-color", getStore.itemProperties.color));
392384
return _el$44;
393385
})();
394386
const template32 = _tmpl$4();
@@ -448,11 +440,7 @@ const template38 = (() => {
448440
const template39 = _tmpl$21();
449441
const template40 = (() => {
450442
var _el$56 = _tmpl$4();
451-
_$effect(_$p =>
452-
(_$p = a()) != null
453-
? _el$56.style.setProperty("color", _$p)
454-
: _el$56.style.removeProperty("color")
455-
);
443+
_$effect(_$p => _$setStyleProperty(_el$56, "color", a()));
456444
return _el$56;
457445
})();
458446
const template41 = (() => {

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { runHydrationEvents as _$runHydrationEvents } from "r-dom";
66
import { spread as _$spread } from "r-dom";
77
import { setAttribute as _$setAttribute } from "r-dom";
88
import { effect as _$effect } from "r-dom";
9+
import { setStyleProperty as _$setStyleProperty } from "r-dom";
910
import { getNextElement as _$getNextElement } from "r-dom";
1011
var _tmpl$ = /*#__PURE__*/ _$template(
1112
`<svg width=400 height=180><rect stroke-width=2 x=50 y=20 rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;stroke-width:5;opacity:0.5></rect><linearGradient gradientTransform=rotate(25)><stop offset=0%>`
@@ -30,9 +31,9 @@ const template = _$getNextElement(_tmpl$);
3031
const template2 = (() => {
3132
var _el$2 = _$getNextElement(_tmpl$2),
3233
_el$3 = _el$2.firstChild;
33-
_el$3.style.setProperty("fill", "red");
34-
_el$3.style.setProperty("stroke", "black");
35-
_el$3.style.setProperty("opacity", "0.5");
34+
_$setStyleProperty(_el$3, "fill", "red");
35+
_$setStyleProperty(_el$3, "stroke", "black");
36+
_$setStyleProperty(_el$3, "opacity", "0.5");
3637
_$effect(
3738
_p$ => {
3839
var _v$ = state.name,
@@ -44,10 +45,7 @@ const template2 = (() => {
4445
_v$2 !== _p$.t && _$setAttribute(_el$3, "stroke-width", (_p$.t = _v$2));
4546
_v$3 !== _p$.a && _$setAttribute(_el$3, "x", (_p$.a = _v$3));
4647
_v$4 !== _p$.o && _$setAttribute(_el$3, "y", (_p$.o = _v$4));
47-
_v$5 !== _p$.i &&
48-
((_p$.i = _v$5) != null
49-
? _el$3.style.setProperty("stroke-width", _v$5)
50-
: _el$3.style.removeProperty("stroke-width"));
48+
_v$5 !== _p$.i && _$setStyleProperty(_el$3, "stroke-width", (_p$.i = _v$5));
5149
return _p$;
5250
},
5351
{

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { memo as _$memo } from "r-dom";
66
import { addEventListener as _$addEventListener } from "r-dom";
77
import { style as _$style } from "r-dom";
88
import { className as _$className } from "r-dom";
9+
import { setStyleProperty as _$setStyleProperty } from "r-dom";
910
import { setAttribute as _$setAttribute } from "r-dom";
1011
import { effect as _$effect } from "r-dom";
1112
import { setProperty as _$setProperty } from "r-dom";
@@ -115,9 +116,7 @@ const template2 = (() => {
115116
const template3 = (() => {
116117
var _el$9 = _$getNextElement(_tmpl$3);
117118
_$setAttribute(_el$9, "id", state.id);
118-
state.color != null
119-
? _el$9.style.setProperty("background-color", state.color)
120-
: _el$9.style.removeProperty("background-color");
119+
_$setStyleProperty(_el$9, "background-color", state.color);
121120
_$setProperty(_el$9, "textContent", state.content);
122121
_$effect(() => _$setAttribute(_el$9, "name", state.name));
123122
return _el$9;
@@ -151,10 +150,7 @@ const template7 = (() => {
151150
_v$2 = props.top,
152151
_v$3 = !!props.active;
153152
_p$.e = _$style(_el$13, _v$, _p$.e);
154-
_v$2 !== _p$.t &&
155-
((_p$.t = _v$2) != null
156-
? _el$13.style.setProperty("padding-top", _v$2)
157-
: _el$13.style.removeProperty("padding-top"));
153+
_v$2 !== _p$.t && _$setStyleProperty(_el$13, "padding-top", (_p$.t = _v$2));
158154
_v$3 !== _p$.a && _el$13.classList.toggle("my-class", (_p$.a = _v$3));
159155
return _p$;
160156
},
@@ -362,11 +358,7 @@ const template29 = (() => {
362358
const template30 = _$getNextElement(_tmpl$19);
363359
const template31 = (() => {
364360
var _el$48 = _$getNextElement(_tmpl$4);
365-
_$effect(_$p =>
366-
(_$p = getStore.itemProperties.color) != null
367-
? _el$48.style.setProperty("background-color", _$p)
368-
: _el$48.style.removeProperty("background-color")
369-
);
361+
_$effect(_$p => _$setStyleProperty(_el$48, "background-color", getStore.itemProperties.color));
370362
return _el$48;
371363
})();
372364
const template32 = _$getNextElement(_tmpl$4);
@@ -427,11 +419,7 @@ const template38 = (() => {
427419
const template39 = _$getNextElement(_tmpl$21);
428420
const template40 = (() => {
429421
var _el$60 = _$getNextElement(_tmpl$4);
430-
_$effect(_$p =>
431-
(_$p = a()) != null
432-
? _el$60.style.setProperty("color", _$p)
433-
: _el$60.style.removeProperty("color")
434-
);
422+
_$effect(_$p => _$setStyleProperty(_el$60, "color", a()));
435423
return _el$60;
436424
})();
437425
const template41 = (() => {

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { createComponent as _$createComponent } from "r-custom";
44
import { spread as _$spread } from "r-dom";
55
import { setAttribute as _$setAttribute } from "r-dom";
66
import { effect as _$effect } from "r-custom";
7+
import { setStyleProperty as _$setStyleProperty } from "r-dom";
78
var _tmpl$ = /*#__PURE__*/ _$template(
89
`<svg width=400 height=180><rect stroke-width=2 x=50 y=20 rx=20 ry=20 width=150 height=150 style=fill:red;stroke:black;stroke-width:5;opacity:0.5></rect><linearGradient gradientTransform=rotate(25)><stop offset=0%>`
910
),
@@ -27,9 +28,9 @@ const template = _tmpl$();
2728
const template2 = (() => {
2829
var _el$2 = _tmpl$2(),
2930
_el$3 = _el$2.firstChild;
30-
_el$3.style.setProperty("fill", "red");
31-
_el$3.style.setProperty("stroke", "black");
32-
_el$3.style.setProperty("opacity", "0.5");
31+
_$setStyleProperty(_el$3, "fill", "red");
32+
_$setStyleProperty(_el$3, "stroke", "black");
33+
_$setStyleProperty(_el$3, "opacity", "0.5");
3334
_$effect(
3435
_p$ => {
3536
var _v$ = state.name,
@@ -41,10 +42,7 @@ const template2 = (() => {
4142
_v$2 !== _p$.t && _$setAttribute(_el$3, "stroke-width", (_p$.t = _v$2));
4243
_v$3 !== _p$.a && _$setAttribute(_el$3, "x", (_p$.a = _v$3));
4344
_v$4 !== _p$.o && _$setAttribute(_el$3, "y", (_p$.o = _v$4));
44-
_v$5 !== _p$.i &&
45-
((_p$.i = _v$5) != null
46-
? _el$3.style.setProperty("stroke-width", _v$5)
47-
: _el$3.style.removeProperty("stroke-width"));
45+
_v$5 !== _p$.i && _$setStyleProperty(_el$3, "stroke-width", (_p$.i = _v$5));
4846
return _p$;
4947
},
5048
{

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { setProp as _$setProp } from "r-custom";
33
import { createElement as _$createElement } from "r-custom";
44
import { style as _$style } from "r-dom";
55
import { className as _$className } from "r-dom";
6+
import { setStyleProperty as _$setStyleProperty } from "r-dom";
67
import { setAttribute as _$setAttribute } from "r-dom";
78
import { effect as _$effect } from "r-custom";
89
import { classList as _$classList } from "r-dom";
@@ -86,9 +87,7 @@ const template2 = (() => {
8687
const template3 = (() => {
8788
var _el$9 = _tmpl$3();
8889
_$setAttribute(_el$9, "id", state.id);
89-
state.color != null
90-
? _el$9.style.setProperty("background-color", state.color)
91-
: _el$9.style.removeProperty("background-color");
90+
_$setStyleProperty(_el$9, "background-color", state.color);
9291
_el$9.textContent = state.content;
9392
_$effect(() => _$setAttribute(_el$9, "name", state.name));
9493
return _el$9;
@@ -119,10 +118,7 @@ const template7 = (() => {
119118
_v$2 = props.top,
120119
_v$3 = !!props.active;
121120
_p$.e = _$style(_el$13, _v$, _p$.e);
122-
_v$2 !== _p$.t &&
123-
((_p$.t = _v$2) != null
124-
? _el$13.style.setProperty("padding-top", _v$2)
125-
: _el$13.style.removeProperty("padding-top"));
121+
_v$2 !== _p$.t && _$setStyleProperty(_el$13, "padding-top", (_p$.t = _v$2));
126122
_v$3 !== _p$.a && _el$13.classList.toggle("my-class", (_p$.a = _v$3));
127123
return _p$;
128124
},
@@ -213,11 +209,7 @@ const template20 = (() => {
213209
})();
214210
const template21 = (() => {
215211
var _el$27 = _tmpl$3();
216-
_$effect(_$p =>
217-
(_$p = a()) != null
218-
? _el$27.style.setProperty("color", _$p)
219-
: _el$27.style.removeProperty("color")
220-
);
212+
_$effect(_$p => _$setStyleProperty(_el$27, "color", a()));
221213
return _el$27;
222214
})();
223215

‎packages/dom-expressions/src/client.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,10 @@ export function style(node, value, prev) {
187187
return prev;
188188
}
189189

190+
export function setStyleProperty(node, name, value) {
191+
value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
192+
}
193+
190194
export function spread(node, props = {}, isSVG, skipChildren) {
191195
const prevProps = {};
192196
if (!skipChildren) {

0 commit comments

Comments
 (0)