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

use helpers for DOM operations

Browse Source
pull/212/head
Rich-Harris 8 years ago
parent 9af5c274f4
commit a16704fbf0
6 changed files with 105 additions and 33 deletions
Show Stats Download Patch File Download Diff File

77
src/generators/dom/index.js
Unescape View File

@ -5,11 +5,13 @@ import namespaces from '../../utils/namespaces.js';
import processCss from '../shared/css/process.js';
import visitors from './visitors/index.js';
import Generator from '../Generator.js';
import * as shared from '../../shared/index.js';
class DomGenerator extends Generator {
constructor ( parsed, source, names, visitors ) {
super( parsed, source, names, visitors );
this.renderers = [];
this.uses = {};
}
addElement ( name, renderStatement, needsIdentifier = false ) {
@ -21,15 +23,13 @@ class DomGenerator extends Generator {
this.createMountStatement( name );
} else {
this.current.builders.init.addLine(
`${this.current.target}.appendChild( ${renderStatement} );`
);
this.uses.appendNode = true;
this.current.builders.init.addLine( `appendNode( ${renderStatement}, ${this.current.target} );` );
}
if ( isToplevel ) {
this.current.builders.detach.addLine(
`${name}.parentNode.removeChild( ${name} );`
);
this.uses.detachNode = true;
this.current.builders.detach.addLine( `detachNode( ${name} );` );
}
}
@ -54,19 +54,38 @@ class DomGenerator extends Generator {
if ( fragment.key ) properties.addBlock( `key: key,` );
properties.addBlock( deindent`
mount: function ( target, anchor ) {
${fragment.builders.mount}
},
if ( fragment.builders.mount.isEmpty() ) {
this.uses.noop = true;
properties.addBlock( `mount: noop,` );
} else {
properties.addBlock( deindent`
mount: function ( target, anchor ) {
${fragment.builders.mount}
},
` );
}
update: function ( changed, ${fragment.params} ) {
${fragment.builders.update}
},
if ( fragment.builders.update.isEmpty() ) {
this.uses.noop = true;
properties.addBlock( `update: noop,` );
} else {
properties.addBlock( deindent`
update: function ( changed, ${fragment.params} ) {
${fragment.builders.update}
},
` );
}
teardown: function ( detach ) {
${fragment.builders.teardown}
}
` );
if ( fragment.builders.teardown.isEmpty() ) {
this.uses.noop = true;
properties.addBlock( `teardown: noop,` );
} else {
properties.addBlock( deindent`
teardown: function ( detach ) {
${fragment.builders.teardown}
},
` );
}
this.renderers.push( deindent`
function ${fragment.name} ( ${fragment.params}, component${fragment.key ? `, key` : ''} ) {
@ -80,18 +99,18 @@ class DomGenerator extends Generator {
}
createAnchor ( name, description = '' ) {
const renderStatement = `document.createComment( ${JSON.stringify( description )} )`;
this.uses.createComment = true;
const renderStatement = `createComment( ${JSON.stringify( description )} )`;
this.addElement( name, renderStatement, true );
}
createMountStatement ( name ) {
if ( this.current.target === 'target' ) {
this.current.builders.mount.addLine(
`target.insertBefore( ${name}, anchor );`
);
this.uses.insertNode = true;
this.current.builders.mount.addLine( `insertNode( ${name}, target, anchor );` );
} else {
this.current.builders.init.addLine(
`${this.current.target}.appendChild( ${name} );` );
this.uses.appendNode = true;
this.current.builders.init.addLine( `appendNode( ${name}, ${this.current.target} );` );
}
}
@ -192,12 +211,15 @@ export default function dom ( parsed, source, options, names ) {
}
if ( parsed.css && options.css !== false ) {
generator.uses.appendNode = true;
generator.uses.createElement = true;
builders.main.addBlock( deindent`
let addedCss = false;
function addCss () {
var style = document.createElement( 'style' );
var style = createElement( 'style' );
style.textContent = ${JSON.stringify( processCss( parsed ) )};
document.head.appendChild( style );
appendNode( style, document.head );
addedCss = true;
}
@ -364,5 +386,10 @@ export default function dom ( parsed, source, options, names ) {
builders.main.addBlock( `${name}.prototype = template.methods;` );
}
Object.keys( generator.uses ).forEach( key => {
const fn = shared[ key ]; // eslint-disable-line import/namespace
builders.main.addBlock( fn.toString() );
});
return generator.generate( builders.main.toString(), options, { name, format } );
}

19
src/generators/dom/visitors/Element.js
Unescape View File

@ -57,9 +57,19 @@ export default {
local.update.addBlock( updates );
}
let render = local.namespace ?
`var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` :
`var ${name} = document.createElement( '${node.name}' );`;
let render;
if ( local.namespace ) {
if ( local.namespace === 'http://www.w3.org/2000/svg' ) {
generator.uses.createSvgElement = true;
render = `var ${name} = createSvgElement( '${node.name}' )`;
} else {
render = `var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );`;
}
} else {
generator.uses.createElement = true;
render = `var ${name} = createElement( '${node.name}' );`;
}
if ( generator.cssId && !generator.elementDepth ) {
render += `\n${name}.setAttribute( '${generator.cssId}', '' );`;
@ -67,7 +77,8 @@ export default {
local.init.addLineAtStart( render );
if ( isToplevel ) {
generator.current.builders.detach.addLine( `${name}.parentNode.removeChild( ${name} );` );
generator.uses.detachNode = true;
generator.current.builders.detach.addLine( `detachNode( ${name} );` );
}
// special case – bound <option> without a value attribute

3
src/generators/dom/visitors/MustacheTag.js
Unescape View File

@ -7,7 +7,8 @@ export default {
generator.addSourcemapLocations( node.expression );
const { snippet } = generator.contextualise( node.expression );
generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
generator.uses.createText = true;
generator.addElement( name, `createText( ${snippet} )`, true );
generator.current.builders.update.addBlock( deindent`
${name}.data = ${snippet};

6
src/generators/dom/visitors/RawMustacheTag.js
Unescape View File

@ -9,11 +9,13 @@ export default {
// we would have used comments here, but the `insertAdjacentHTML` api only
// exists for `Element`s.
generator.uses.createElement = true;
const before = `${name}_before`;
generator.addElement( before, `document.createElement( 'noscript' )`, true );
generator.addElement( before, `createElement( 'noscript' )`, true );
const after = `${name}_after`;
generator.addElement( after, `document.createElement( 'noscript' )`, true );
generator.addElement( after, `createElement( 'noscript' )`, true );
const isToplevel = generator.current.localElementDepth === 0;

4
src/generators/dom/visitors/Text.js
Unescape View File

@ -5,6 +5,8 @@ export default {
}
const name = generator.current.getUniqueName( `text` );
generator.addElement( name, `document.createTextNode( ${JSON.stringify( node.data )} )`, false );
generator.addElement( name, `createText( ${JSON.stringify( node.data )} )`, false );
generator.uses.createText = true;
}
};

29
src/shared/index.js
Unescape View File

@ -0,0 +1,29 @@
export function noop () {}
export function appendNode ( node, target ) {
target.appendChild( node );
}
export function insertNode ( node, target, anchor ) {
target.insertBefore( node, anchor );
}
export function detachNode ( node ) {
node.parentNode.removeChild( node );
}
export function createElement ( name ) {
return document.createElement( name );
}
export function createSvgElement ( name ) {
return document.createElementNS( 'http://www.w3.org/2000/svg', name );
}
export function createText ( data ) {
return document.createTextNode( data );
}
export function createComment ( data ) {
return document.createComment( data );
}
Write Preview
Loading…
Cancel
Save