support SVG

pull/31/head
Rich-Harris 8 years ago
parent 4206127f1f
commit 55f3ba1a30

@ -80,6 +80,7 @@ export default function generate ( parsed, template ) {
let current = { let current = {
useAnchor: false, useAnchor: false,
name: 'renderMainFragment', name: 'renderMainFragment',
namespace: null,
target: 'target', target: 'target',
initStatements: [], initStatements: [],
@ -109,10 +110,9 @@ export default function generate ( parsed, template ) {
Element: { Element: {
enter ( node ) { enter ( node ) {
const name = current.counter( node.name ); const name = current.counter( node.name );
let namespace = name === 'svg' ? 'http://www.w3.org/2000/svg' : current.namespace;
const initStatements = [ const initStatements = [];
`var ${name} = document.createElement( '${node.name}' );`
];
const updateStatements = []; const updateStatements = [];
const teardownStatements = []; const teardownStatements = [];
@ -160,6 +160,12 @@ export default function generate ( parsed, template ) {
${name}.setAttribute( '${attribute.name}', ${result} ); ${name}.setAttribute( '${attribute.name}', ${result} );
` ); ` );
} }
// special case
// TODO this attribute must be static enforce at compile time
if ( attribute.name === 'xmlns' ) {
namespace = value;
}
} }
else { else {
@ -298,6 +304,12 @@ export default function generate ( parsed, template ) {
updateStatements.push( declarations ); updateStatements.push( declarations );
} }
initStatements.unshift(
namespace ?
`var ${name} = document.createElementNS( '${namespace}', '${node.name}' );` :
`var ${name} = document.createElement( '${node.name}' );`
);
teardownStatements.push( `${name}.parentNode.removeChild( ${name} );` ); teardownStatements.push( `${name}.parentNode.removeChild( ${name} );` );
current.initStatements.push( initStatements.join( '\n' ) ); current.initStatements.push( initStatements.join( '\n' ) );
@ -305,6 +317,7 @@ export default function generate ( parsed, template ) {
current.teardownStatements.push( teardownStatements.join( '\n' ) ); current.teardownStatements.push( teardownStatements.join( '\n' ) );
current = Object.assign( {}, current, { current = Object.assign( {}, current, {
namespace,
target: name, target: name,
parent: current parent: current
}); });

@ -0,0 +1,21 @@
import * as assert from 'assert';
export default {
data: {
x: 0,
y: 0,
width: 100,
height: 100
},
html: `<svg><rect x="0" y="0" width="100" height="100"></rect></svg>`,
test ( component, target ) {
const svg = target.querySelector( 'svg' );
const rect = target.querySelector( 'rect' );
assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
component.set({ width: 150, height: 50 });
assert.equal( target.innerHTML, `<svg><rect x="0" y="0" width="150" height="50"></rect></svg>` );
}
};

@ -0,0 +1,3 @@
<svg>
<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
</svg>

After

Width:  |  Height:  |  Size: 80 B

Loading…
Cancel
Save