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( block.builders.update.addConditional(
condition, condition,
`${node.var}.style.setProperty('${prop.key}', ${value});` `@setStyle(${node.var}, '${prop.key}', ${value});`
); );
} }
} else { } else {
@ -68,7 +68,7 @@ export default function visitStyleAttribute(
} }
block.builders.hydrate.addLine( 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 { try {
input.type = type; input.type = type;
} catch (e) {} } 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); return document.createElement(name);
} }
function setStyle(node, key, value) {
node.style.setProperty(key, value);
}
function destroy(detach) { function destroy(detach) {
this.destroy = noop; this.destroy = noop;
this.fire('destroy'); this.fire('destroy');
@ -163,8 +167,8 @@ function create_main_fragment ( state, component ) {
}, },
hydrate: function ( nodes ) { hydrate: function ( nodes ) {
div.style.setProperty('color', state.color); setStyle(div, 'color', state.color);
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)"); setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
}, },
mount: function ( target, anchor ) { mount: function ( target, anchor ) {
@ -173,11 +177,11 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) { update: function ( changed, state ) {
if ( changed.color ) { if ( changed.color ) {
div.style.setProperty('color', state.color); setStyle(div, 'color', state.color);
} }
if ( changed.x || changed.y ) { 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 ) { function create_main_fragment ( state, component ) {
var div; var div;
@ -10,8 +10,8 @@ function create_main_fragment ( state, component ) {
}, },
hydrate: function ( nodes ) { hydrate: function ( nodes ) {
div.style.setProperty('color', state.color); setStyle(div, 'color', state.color);
div.style.setProperty('transform', "translate(" + state.x + "px," + state.y + "px)"); setStyle(div, 'transform', "translate(" + state.x + "px," + state.y + "px)");
}, },
mount: function ( target, anchor ) { mount: function ( target, anchor ) {
@ -20,11 +20,11 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) { update: function ( changed, state ) {
if ( changed.color ) { if ( changed.color ) {
div.style.setProperty('color', state.color); setStyle(div, 'color', state.color);
} }
if ( changed.x || changed.y ) { 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); return document.createElement(name);
} }
function setStyle(node, key, value) {
node.style.setProperty(key, value);
}
function destroy(detach) { function destroy(detach) {
this.destroy = noop; this.destroy = noop;
this.fire('destroy'); this.fire('destroy');
@ -163,7 +167,7 @@ function create_main_fragment ( state, component ) {
}, },
hydrate: function ( nodes ) { 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 ) { mount: function ( target, anchor ) {
@ -172,7 +176,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) { update: function ( changed, state ) {
if ( changed.data ) { 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 ) { function create_main_fragment ( state, component ) {
var div; var div;
@ -10,7 +10,7 @@ function create_main_fragment ( state, component ) {
}, },
hydrate: function ( nodes ) { 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 ) { mount: function ( target, anchor ) {
@ -19,7 +19,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) { update: function ( changed, state ) {
if ( changed.data ) { 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); return document.createElement(name);
} }
function setStyle(node, key, value) {
node.style.setProperty(key, value);
}
function destroy(detach) { function destroy(detach) {
this.destroy = noop; this.destroy = noop;
this.fire('destroy'); this.fire('destroy');
@ -163,7 +167,7 @@ function create_main_fragment ( state, component ) {
}, },
hydrate: function ( nodes ) { hydrate: function ( nodes ) {
div.style.setProperty('color', state.color); setStyle(div, 'color', state.color);
}, },
mount: function ( target, anchor ) { mount: function ( target, anchor ) {
@ -172,7 +176,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) { update: function ( changed, state ) {
if ( changed.color ) { 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 ) { function create_main_fragment ( state, component ) {
var div; var div;
@ -10,7 +10,7 @@ function create_main_fragment ( state, component ) {
}, },
hydrate: function ( nodes ) { hydrate: function ( nodes ) {
div.style.setProperty('color', state.color); setStyle(div, 'color', state.color);
}, },
mount: function ( target, anchor ) { mount: function ( target, anchor ) {
@ -19,7 +19,7 @@ function create_main_fragment ( state, component ) {
update: function ( changed, state ) { update: function ( changed, state ) {
if ( changed.color ) { if ( changed.color ) {
div.style.setProperty('color', state.color); setStyle(div, 'color', state.color);
} }
}, },

Write Preview
Loading…
Cancel
Save