msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

use helper for setting styles

Browse Source
pull/810/head
Rich Harris 7 years ago
parent d54d00cac1
commit 186b770ef4
8 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File

4
src/generators/dom/visitors/Element/StyleAttribute.ts
Unescape View File

@ -60,7 +60,7 @@ export default function visitStyleAttribute(
block.builders.update.addConditional(
condition,
`${node.var}.style.setProperty('${prop.key}', ${value});`
`@setStyle(${node.var}, '${prop.key}', ${value});`
);
}
} else {
@ -68,7 +68,7 @@ export default function visitStyleAttribute(
}
block.builders.hydrate.addLine(
`${node.var}.style.setProperty('${prop.key}', ${value});`
`@setStyle(${node.var}, '${prop.key}', ${value});`
);
});
}

4
src/shared/dom.js
Unescape View File

@ -137,4 +137,8 @@ export function setInputType(input, type) {
try {
input.type = type;
} catch (e) {}
}
export function setStyle(node, key, value) {
node.style.setProperty(key, value);
}

12
test/js/samples/inline-style-optimized-multiple/expected-bundle.js
Unescape View File

@ -25,6 +25,10 @@ function createElement(name) {
return document.createElement(name);
}
function setStyle(node, key, value) {
node.style.setProperty(key, value);
}
function destroy(detach) {
this.destroy = noop;
this.fire('destroy');
@ -163,8 +167,8 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
div.style.setProperty('color', state.color);
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
setStyle(div, 'color', state.color);
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
},
mount: function ( target, anchor ) {
@ -173,11 +177,11 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) {
if ( changed.color ) {
div.style.setProperty('color', state.color);
setStyle(div, 'color', state.color);
}
if ( changed.x || changed.y ) {
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
}
},

10
test/js/samples/inline-style-optimized-multiple/expected.js
Unescape View File

@ -1,4 +1,4 @@
import { assign, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
function create_main_fragment ( state, component ) {
var div;
@ -10,8 +10,8 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
div.style.setProperty('color', state.color);
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
setStyle(div, 'color', state.color);
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
},
mount: function ( target, anchor ) {
@ -20,11 +20,11 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) {
if ( changed.color ) {
div.style.setProperty('color', state.color);
setStyle(div, 'color', state.color);
}
if ( changed.x || changed.y ) {
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)");
setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
}
},

8
test/js/samples/inline-style-optimized-url/expected-bundle.js
Unescape View File

@ -25,6 +25,10 @@ function createElement(name) {
return document.createElement(name);
}
function setStyle(node, key, value) {
node.style.setProperty(key, value);
}
function destroy(detach) {
this.destroy = noop;
this.fire('destroy');
@ -163,7 +167,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
},
mount: function ( target, anchor ) {
@ -172,7 +176,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) {
if ( changed.data ) {
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
}
},

6
test/js/samples/inline-style-optimized-url/expected.js
Unescape View File

@ -1,4 +1,4 @@
import { assign, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
function create_main_fragment ( state, component ) {
var div;
@ -10,7 +10,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
},
mount: function ( target, anchor ) {
@ -19,7 +19,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) {
if ( changed.data ) {
div.style.setProperty('background', "url(data:image/png;base64," + state.data + ")");
setStyle(div, 'background', "url(data:image/png;base64," + state.data + ")");
}
},

8
test/js/samples/inline-style-optimized/expected-bundle.js
Unescape View File

@ -25,6 +25,10 @@ function createElement(name) {
return document.createElement(name);
}
function setStyle(node, key, value) {
node.style.setProperty(key, value);
}
function destroy(detach) {
this.destroy = noop;
this.fire('destroy');
@ -163,7 +167,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
div.style.setProperty('color', state.color);
setStyle(div, 'color', state.color);
},
mount: function ( target, anchor ) {
@ -172,7 +176,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) {
if ( changed.color ) {
div.style.setProperty('color', state.color);
setStyle(div, 'color', state.color);
}
},

6
test/js/samples/inline-style-optimized/expected.js
Unescape View File

@ -1,4 +1,4 @@
import { assign, createElement, detachNode, insertNode, noop, proto } from "svelte/shared.js";
import { assign, createElement, detachNode, insertNode, noop, proto, setStyle } from "svelte/shared.js";
function create_main_fragment ( state, component ) {
var div;
@ -10,7 +10,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
div.style.setProperty('color', state.color);
setStyle(div, 'color', state.color);
},
mount: function ( target, anchor ) {
@ -19,7 +19,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) {
if ( changed.color ) {
div.style.setProperty('color', state.color);
setStyle(div, 'color', state.color);
}
},

Write Preview
Loading…
Cancel
Save