mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
committed by
GitHub
commit
ec709cb490
@ -1,3 +1,5 @@
|
||||
src/shared
|
||||
shared.js
|
||||
test/test.js
|
||||
test/test.js
|
||||
**/_actual.js
|
||||
**/expected.js
|
||||
@ -1,4 +0,0 @@
|
||||
export default function findBlock ( fragment ) {
|
||||
while ( fragment.type !== 'block' ) fragment = fragment.parent;
|
||||
return fragment;
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import CodeBuilder from '../../../utils/CodeBuilder.js';
|
||||
|
||||
export default function getBuilders () {
|
||||
return {
|
||||
init: new CodeBuilder(),
|
||||
mount: new CodeBuilder(),
|
||||
update: new CodeBuilder(),
|
||||
detach: new CodeBuilder(),
|
||||
detachRaw: new CodeBuilder(),
|
||||
teardown: new CodeBuilder()
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
import visitors from './visitors/index.js';
|
||||
|
||||
export default function visit ( generator, block, state, node ) {
|
||||
const visitor = visitors[ node.type ];
|
||||
visitor( generator, block, state, node );
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
export default {
|
||||
export default function visitComment () {
|
||||
// do nothing
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,223 +1,220 @@
|
||||
import CodeBuilder from '../../../utils/CodeBuilder.js';
|
||||
import deindent from '../../../utils/deindent.js';
|
||||
import getBuilders from '../utils/getBuilders.js';
|
||||
import visit from '../visit.js';
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const name = generator.getUniqueName( `each_block` );
|
||||
const renderer = generator.getUniqueName( `render_each_block` );
|
||||
const elseName = generator.getUniqueName( `${name}_else` );
|
||||
const renderElse = generator.getUniqueName( `${renderer}_else` );
|
||||
const i = generator.current.getUniqueName( `i` );
|
||||
const params = generator.current.params.join( ', ' );
|
||||
export default function visitEachBlock ( generator, block, state, node ) {
|
||||
const name = generator.getUniqueName( `each_block` );
|
||||
const renderer = generator.getUniqueName( `create_each_block` );
|
||||
const elseName = generator.getUniqueName( `${name}_else` );
|
||||
const renderElse = generator.getUniqueName( `${renderer}_else` );
|
||||
const i = block.getUniqueName( `i` );
|
||||
const params = block.params.join( ', ' );
|
||||
|
||||
const listName = generator.current.getUniqueName( `${name}_value` );
|
||||
const listName = block.getUniqueName( `${name}_value` );
|
||||
|
||||
const isToplevel = generator.current.localElementDepth === 0;
|
||||
const isToplevel = !state.parentNode;
|
||||
|
||||
generator.addSourcemapLocations( node.expression );
|
||||
const { dependencies, snippet } = generator.contextualise( block, node.expression );
|
||||
|
||||
const { dependencies, snippet } = generator.contextualise( node.expression );
|
||||
const anchor = block.getUniqueName( `${name}_anchor` );
|
||||
block.createAnchor( anchor, state.parentNode );
|
||||
|
||||
const anchor = generator.current.getUniqueName( `${name}_anchor` );
|
||||
generator.createAnchor( anchor );
|
||||
const localVars = {};
|
||||
|
||||
const localVars = {};
|
||||
localVars.iteration = block.getUniqueName( `${name}_iteration` );
|
||||
localVars.iterations = block.getUniqueName( `${name}_iterations` );
|
||||
localVars._iterations = block.getUniqueName( `_${name}_iterations` );
|
||||
localVars.lookup = block.getUniqueName( `${name}_lookup` );
|
||||
localVars._lookup = block.getUniqueName( `_${name}_lookup` );
|
||||
|
||||
localVars.iteration = generator.current.getUniqueName( `${name}_iteration` );
|
||||
localVars.iterations = generator.current.getUniqueName( `${name}_iterations` );
|
||||
localVars._iterations = generator.current.getUniqueName( `_${name}_iterations` );
|
||||
localVars.lookup = generator.current.getUniqueName( `${name}_lookup` );
|
||||
localVars._lookup = generator.current.getUniqueName( `_${name}_lookup` );
|
||||
block.builders.create.addLine( `var ${listName} = ${snippet};` );
|
||||
block.builders.create.addLine( `var ${localVars.iterations} = [];` );
|
||||
if ( node.key ) block.builders.create.addLine( `var ${localVars.lookup} = Object.create( null );` );
|
||||
if ( node.else ) block.builders.create.addLine( `var ${elseName} = null;` );
|
||||
|
||||
generator.current.builders.init.addLine( `var ${listName} = ${snippet};` );
|
||||
generator.current.builders.init.addLine( `var ${localVars.iterations} = [];` );
|
||||
if ( node.key ) generator.current.builders.init.addLine( `var ${localVars.lookup} = Object.create( null );` );
|
||||
if ( node.else ) generator.current.builders.init.addLine( `var ${elseName} = null;` );
|
||||
const initialRender = new CodeBuilder();
|
||||
|
||||
const initialRender = new CodeBuilder();
|
||||
if ( node.key ) {
|
||||
localVars.fragment = block.getUniqueName( 'fragment' );
|
||||
localVars.value = block.getUniqueName( 'value' );
|
||||
localVars.key = block.getUniqueName( 'key' );
|
||||
|
||||
if ( node.key ) {
|
||||
localVars.fragment = generator.current.getUniqueName( 'fragment' );
|
||||
localVars.value = generator.current.getUniqueName( 'value' );
|
||||
localVars.key = generator.current.getUniqueName( 'key' );
|
||||
initialRender.addBlock( deindent`
|
||||
var ${localVars.key} = ${listName}[${i}].${node.key};
|
||||
${localVars.iterations}[${i}] = ${localVars.lookup}[ ${localVars.key} ] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component}${node.key ? `, ${localVars.key}` : `` } );
|
||||
` );
|
||||
} else {
|
||||
initialRender.addLine(
|
||||
`${localVars.iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component} );`
|
||||
);
|
||||
}
|
||||
|
||||
initialRender.addBlock( deindent`
|
||||
var ${localVars.key} = ${listName}[${i}].${node.key};
|
||||
${localVars.iterations}[${i}] = ${localVars.lookup}[ ${localVars.key} ] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${generator.current.component}${node.key ? `, ${localVars.key}` : `` } );
|
||||
` );
|
||||
} else {
|
||||
initialRender.addLine(
|
||||
`${localVars.iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${generator.current.component} );`
|
||||
);
|
||||
}
|
||||
if ( !isToplevel ) {
|
||||
initialRender.addLine(
|
||||
`${localVars.iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );`
|
||||
);
|
||||
}
|
||||
|
||||
if ( !isToplevel ) {
|
||||
initialRender.addLine(
|
||||
`${localVars.iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );`
|
||||
);
|
||||
block.builders.create.addBlock( deindent`
|
||||
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) {
|
||||
${initialRender}
|
||||
}
|
||||
` );
|
||||
|
||||
generator.current.builders.init.addBlock( deindent`
|
||||
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) {
|
||||
${initialRender}
|
||||
if ( node.else ) {
|
||||
block.builders.create.addBlock( deindent`
|
||||
if ( !${listName}.length ) {
|
||||
${elseName} = ${renderElse}( ${params}, ${block.component} );
|
||||
${!isToplevel ? `${elseName}.mount( ${anchor}.parentNode, ${anchor} );` : ''}
|
||||
}
|
||||
` );
|
||||
}
|
||||
|
||||
if ( isToplevel ) {
|
||||
block.builders.mount.addBlock( deindent`
|
||||
for ( var ${i} = 0; ${i} < ${localVars.iterations}.length; ${i} += 1 ) {
|
||||
${localVars.iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
|
||||
}
|
||||
` );
|
||||
if ( node.else ) {
|
||||
generator.current.builders.init.addBlock( deindent`
|
||||
if ( !${listName}.length ) {
|
||||
${elseName} = ${renderElse}( ${params}, ${generator.current.component} );
|
||||
${!isToplevel ? `${elseName}.mount( ${anchor}.parentNode, ${anchor} );` : ''}
|
||||
}
|
||||
` );
|
||||
}
|
||||
|
||||
if ( isToplevel ) {
|
||||
generator.current.builders.mount.addBlock( deindent`
|
||||
for ( var ${i} = 0; ${i} < ${localVars.iterations}.length; ${i} += 1 ) {
|
||||
${localVars.iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
|
||||
block.builders.mount.addBlock( deindent`
|
||||
if ( ${elseName} ) {
|
||||
${elseName}.mount( ${anchor}.parentNode, ${anchor} );
|
||||
}
|
||||
` );
|
||||
if ( node.else ) {
|
||||
generator.current.builders.mount.addBlock( deindent`
|
||||
if ( ${elseName} ) {
|
||||
${elseName}.mount( ${anchor}.parentNode, ${anchor} );
|
||||
}
|
||||
` );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( node.key ) {
|
||||
generator.current.builders.update.addBlock( deindent`
|
||||
var ${listName} = ${snippet};
|
||||
var ${localVars._iterations} = [];
|
||||
var ${localVars._lookup} = Object.create( null );
|
||||
if ( node.key ) {
|
||||
block.builders.update.addBlock( deindent`
|
||||
var ${listName} = ${snippet};
|
||||
var ${localVars._iterations} = [];
|
||||
var ${localVars._lookup} = Object.create( null );
|
||||
|
||||
var ${localVars.fragment} = document.createDocumentFragment();
|
||||
var ${localVars.fragment} = document.createDocumentFragment();
|
||||
|
||||
// create new iterations as necessary
|
||||
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) {
|
||||
var ${localVars.value} = ${listName}[${i}];
|
||||
var ${localVars.key} = ${localVars.value}.${node.key};
|
||||
// create new iterations as necessary
|
||||
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) {
|
||||
var ${localVars.value} = ${listName}[${i}];
|
||||
var ${localVars.key} = ${localVars.value}.${node.key};
|
||||
|
||||
if ( ${localVars.lookup}[ ${localVars.key} ] ) {
|
||||
${localVars._iterations}[${i}] = ${localVars._lookup}[ ${localVars.key} ] = ${localVars.lookup}[ ${localVars.key} ];
|
||||
${localVars._lookup}[ ${localVars.key} ].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
|
||||
} else {
|
||||
${localVars._iterations}[${i}] = ${localVars._lookup}[ ${localVars.key} ] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component}${node.key ? `, ${localVars.key}` : `` } );
|
||||
}
|
||||
|
||||
if ( ${localVars.lookup}[ ${localVars.key} ] ) {
|
||||
${localVars._iterations}[${i}] = ${localVars._lookup}[ ${localVars.key} ] = ${localVars.lookup}[ ${localVars.key} ];
|
||||
${localVars._lookup}[ ${localVars.key} ].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
|
||||
} else {
|
||||
${localVars._iterations}[${i}] = ${localVars._lookup}[ ${localVars.key} ] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${generator.current.component}${node.key ? `, ${localVars.key}` : `` } );
|
||||
}
|
||||
${localVars._iterations}[${i}].mount( ${localVars.fragment}, null );
|
||||
}
|
||||
|
||||
${localVars._iterations}[${i}].mount( ${localVars.fragment}, null );
|
||||
// remove old iterations
|
||||
for ( var ${i} = 0; ${i} < ${localVars.iterations}.length; ${i} += 1 ) {
|
||||
var ${localVars.iteration} = ${localVars.iterations}[${i}];
|
||||
if ( !${localVars._lookup}[ ${localVars.iteration}.key ] ) {
|
||||
${localVars.iteration}.destroy( true );
|
||||
}
|
||||
}
|
||||
|
||||
// remove old iterations
|
||||
for ( var ${i} = 0; ${i} < ${localVars.iterations}.length; ${i} += 1 ) {
|
||||
var ${localVars.iteration} = ${localVars.iterations}[${i}];
|
||||
if ( !${localVars._lookup}[ ${localVars.iteration}.key ] ) {
|
||||
${localVars.iteration}.teardown( true );
|
||||
}
|
||||
}
|
||||
${anchor}.parentNode.insertBefore( ${localVars.fragment}, ${anchor} );
|
||||
|
||||
${anchor}.parentNode.insertBefore( ${localVars.fragment}, ${anchor} );
|
||||
${localVars.iterations} = ${localVars._iterations};
|
||||
${localVars.lookup} = ${localVars._lookup};
|
||||
` );
|
||||
} else {
|
||||
block.builders.update.addBlock( deindent`
|
||||
var ${listName} = ${snippet};
|
||||
|
||||
${localVars.iterations} = ${localVars._iterations};
|
||||
${localVars.lookup} = ${localVars._lookup};
|
||||
` );
|
||||
} else {
|
||||
generator.current.builders.update.addBlock( deindent`
|
||||
var ${listName} = ${snippet};
|
||||
|
||||
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) {
|
||||
if ( !${localVars.iterations}[${i}] ) {
|
||||
${localVars.iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${generator.current.component} );
|
||||
${localVars.iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
|
||||
} else {
|
||||
${localVars.iterations}[${i}].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
|
||||
}
|
||||
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) {
|
||||
if ( !${localVars.iterations}[${i}] ) {
|
||||
${localVars.iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component} );
|
||||
${localVars.iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
|
||||
} else {
|
||||
${localVars.iterations}[${i}].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
|
||||
}
|
||||
}
|
||||
|
||||
teardownEach( ${localVars.iterations}, true, ${listName}.length );
|
||||
destroyEach( ${localVars.iterations}, true, ${listName}.length );
|
||||
|
||||
${localVars.iterations}.length = ${listName}.length;
|
||||
` );
|
||||
}
|
||||
${localVars.iterations}.length = ${listName}.length;
|
||||
` );
|
||||
}
|
||||
|
||||
if ( node.else ) {
|
||||
generator.current.builders.update.addBlock( deindent`
|
||||
if ( !${listName}.length && ${elseName} ) {
|
||||
${elseName}.update( changed, ${params} );
|
||||
} else if ( !${listName}.length ) {
|
||||
${elseName} = ${renderElse}( ${params}, ${generator.current.component} );
|
||||
${elseName}.mount( ${anchor}.parentNode, ${anchor} );
|
||||
} else if ( ${elseName} ) {
|
||||
${elseName}.teardown( true );
|
||||
}
|
||||
` );
|
||||
}
|
||||
if ( node.else ) {
|
||||
block.builders.update.addBlock( deindent`
|
||||
if ( !${listName}.length && ${elseName} ) {
|
||||
${elseName}.update( changed, ${params} );
|
||||
} else if ( !${listName}.length ) {
|
||||
${elseName} = ${renderElse}( ${params}, ${block.component} );
|
||||
${elseName}.mount( ${anchor}.parentNode, ${anchor} );
|
||||
} else if ( ${elseName} ) {
|
||||
${elseName}.destroy( true );
|
||||
}
|
||||
` );
|
||||
}
|
||||
|
||||
generator.current.builders.teardown.addBlock(
|
||||
`${generator.helper( 'teardownEach' )}( ${localVars.iterations}, ${isToplevel ? 'detach' : 'false'} );` );
|
||||
block.builders.destroy.addBlock(
|
||||
`${generator.helper( 'destroyEach' )}( ${localVars.iterations}, ${isToplevel ? 'detach' : 'false'} );` );
|
||||
|
||||
if ( node.else ) {
|
||||
generator.current.builders.teardown.addBlock( deindent`
|
||||
if ( ${elseName} ) {
|
||||
${elseName}.teardown( ${isToplevel ? 'detach' : 'false'} );
|
||||
}
|
||||
` );
|
||||
}
|
||||
if ( node.else ) {
|
||||
block.builders.destroy.addBlock( deindent`
|
||||
if ( ${elseName} ) {
|
||||
${elseName}.destroy( ${isToplevel ? 'detach' : 'false'} );
|
||||
}
|
||||
` );
|
||||
}
|
||||
|
||||
if ( node.else ) {
|
||||
generator.generateBlock( node.else, renderElse, 'block' );
|
||||
}
|
||||
const indexNames = new Map( block.indexNames );
|
||||
const indexName = node.index || block.getUniqueName( `${node.context}_index` );
|
||||
indexNames.set( node.context, indexName );
|
||||
|
||||
const indexNames = new Map( generator.current.indexNames );
|
||||
const indexName = node.index || generator.current.getUniqueName( `${node.context}_index` );
|
||||
indexNames.set( node.context, indexName );
|
||||
const listNames = new Map( block.listNames );
|
||||
listNames.set( node.context, listName );
|
||||
|
||||
const listNames = new Map( generator.current.listNames );
|
||||
listNames.set( node.context, listName );
|
||||
const context = generator.getUniqueName( node.context );
|
||||
const contexts = new Map( block.contexts );
|
||||
contexts.set( node.context, context );
|
||||
|
||||
const context = generator.getUniqueName( node.context );
|
||||
const contexts = new Map( generator.current.contexts );
|
||||
contexts.set( node.context, context );
|
||||
const indexes = new Map( block.indexes );
|
||||
if ( node.index ) indexes.set( indexName, node.context );
|
||||
|
||||
const indexes = new Map( generator.current.indexes );
|
||||
if ( node.index ) indexes.set( indexName, node.context );
|
||||
const contextDependencies = new Map( block.contextDependencies );
|
||||
contextDependencies.set( node.context, dependencies );
|
||||
|
||||
const contextDependencies = new Map( generator.current.contextDependencies );
|
||||
contextDependencies.set( node.context, dependencies );
|
||||
const childBlock = block.child({
|
||||
name: renderer,
|
||||
expression: node.expression,
|
||||
context: node.context,
|
||||
key: node.key,
|
||||
|
||||
const blockParams = generator.current.params.concat( listName, context, indexName );
|
||||
contextDependencies,
|
||||
contexts,
|
||||
indexes,
|
||||
|
||||
const getUniqueName = generator.getUniqueNameMaker( blockParams );
|
||||
indexNames,
|
||||
listNames,
|
||||
params: block.params.concat( listName, context, indexName )
|
||||
});
|
||||
|
||||
generator.push({
|
||||
type: 'block',
|
||||
name: renderer,
|
||||
target: 'target',
|
||||
expression: node.expression,
|
||||
context: node.context,
|
||||
key: node.key,
|
||||
localElementDepth: 0,
|
||||
const childState = Object.assign( {}, state, {
|
||||
parentNode: null
|
||||
});
|
||||
|
||||
component: getUniqueName( 'component' ),
|
||||
node.children.forEach( child => {
|
||||
visit( generator, childBlock, childState, child );
|
||||
});
|
||||
|
||||
contextDependencies,
|
||||
contexts,
|
||||
indexes,
|
||||
generator.addBlock( childBlock );
|
||||
|
||||
indexNames,
|
||||
listNames,
|
||||
params: blockParams,
|
||||
if ( node.else ) {
|
||||
const childBlock = block.child({
|
||||
name: renderElse
|
||||
});
|
||||
|
||||
builders: getBuilders(),
|
||||
getUniqueName,
|
||||
node.else.children.forEach( child => {
|
||||
visit( generator, childBlock, childState, child );
|
||||
});
|
||||
},
|
||||
|
||||
leave ( generator ) {
|
||||
generator.addRenderer( generator.current );
|
||||
generator.pop();
|
||||
generator.addBlock( childBlock );
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,22 +1,16 @@
|
||||
import deindent from '../../../utils/deindent.js';
|
||||
import findBlock from '../utils/findBlock.js';
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const name = generator.current.getUniqueName( 'text' );
|
||||
export default function visitMustacheTag ( generator, block, state, node ) {
|
||||
const name = block.getUniqueName( 'text' );
|
||||
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
const { snippet } = generator.contextualise( block, node.expression );
|
||||
|
||||
generator.current.builders.init.addLine( `var last_${name} = ${snippet};` );
|
||||
generator.addElement( name, `${generator.helper( 'createText' )}( last_${name} )`, true );
|
||||
block.builders.create.addLine( `var last_${name} = ${snippet};` );
|
||||
block.addElement( name, `${generator.helper( 'createText' )}( last_${name} )`, state.parentNode, true );
|
||||
|
||||
const fragment = findBlock( generator.current );
|
||||
if ( !fragment.tmp ) fragment.tmp = fragment.getUniqueName( 'tmp' );
|
||||
|
||||
generator.current.builders.update.addBlock( deindent`
|
||||
if ( ( ${fragment.tmp} = ${snippet} ) !== last_${name} ) {
|
||||
${name}.data = last_${name} = ${fragment.tmp};
|
||||
}
|
||||
` );
|
||||
}
|
||||
};
|
||||
block.builders.update.addBlock( deindent`
|
||||
if ( ( ${block.tmp()} = ${snippet} ) !== last_${name} ) {
|
||||
${name}.data = last_${name} = ${block.tmp()};
|
||||
}
|
||||
` );
|
||||
}
|
||||
@ -1,43 +1,37 @@
|
||||
import deindent from '../../../utils/deindent.js';
|
||||
import findBlock from '../utils/findBlock.js';
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const name = generator.current.getUniqueName( 'raw' );
|
||||
export default function visitRawMustacheTag ( generator, block, state, node ) {
|
||||
const name = block.getUniqueName( 'raw' );
|
||||
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
const { snippet } = generator.contextualise( block, node.expression );
|
||||
|
||||
// we would have used comments here, but the `insertAdjacentHTML` api only
|
||||
// exists for `Element`s.
|
||||
const before = `${name}_before`;
|
||||
generator.addElement( before, `${generator.helper( 'createElement' )}( 'noscript' )`, true );
|
||||
// we would have used comments here, but the `insertAdjacentHTML` api only
|
||||
// exists for `Element`s.
|
||||
const before = `${name}_before`;
|
||||
block.addElement( before, `${generator.helper( 'createElement' )}( 'noscript' )`, state.parentNode, true );
|
||||
|
||||
const after = `${name}_after`;
|
||||
generator.addElement( after, `${generator.helper( 'createElement' )}( 'noscript' )`, true );
|
||||
const after = `${name}_after`;
|
||||
block.addElement( after, `${generator.helper( 'createElement' )}( 'noscript' )`, state.parentNode, true );
|
||||
|
||||
const isToplevel = generator.current.localElementDepth === 0;
|
||||
const isToplevel = !state.parentNode;
|
||||
|
||||
generator.current.builders.init.addLine( `var last_${name} = ${snippet};` );
|
||||
const mountStatement = `${before}.insertAdjacentHTML( 'afterend', last_${name} );`;
|
||||
const detachStatement = `${generator.helper( 'detachBetween' )}( ${before}, ${after} );`;
|
||||
block.builders.create.addLine( `var last_${name} = ${snippet};` );
|
||||
const mountStatement = `${before}.insertAdjacentHTML( 'afterend', last_${name} );`;
|
||||
const detachStatement = `${generator.helper( 'detachBetween' )}( ${before}, ${after} );`;
|
||||
|
||||
if ( isToplevel ) {
|
||||
generator.current.builders.mount.addLine( mountStatement );
|
||||
} else {
|
||||
generator.current.builders.init.addLine( mountStatement );
|
||||
}
|
||||
|
||||
const fragment = findBlock( generator.current );
|
||||
if ( !fragment.tmp ) fragment.tmp = fragment.getUniqueName( 'tmp' );
|
||||
if ( isToplevel ) {
|
||||
block.builders.mount.addLine( mountStatement );
|
||||
} else {
|
||||
block.builders.create.addLine( mountStatement );
|
||||
}
|
||||
|
||||
generator.current.builders.update.addBlock( deindent`
|
||||
if ( ( ${fragment.tmp} = ${snippet} ) !== last_${name} ) {
|
||||
last_${name} = ${fragment.tmp};
|
||||
${detachStatement}
|
||||
${mountStatement}
|
||||
}
|
||||
` );
|
||||
block.builders.update.addBlock( deindent`
|
||||
if ( ( ${block.tmp()} = ${snippet} ) !== last_${name} ) {
|
||||
last_${name} = ${block.tmp()};
|
||||
${detachStatement}
|
||||
${mountStatement}
|
||||
}
|
||||
` );
|
||||
|
||||
generator.current.builders.detachRaw.addBlock( detachStatement );
|
||||
}
|
||||
};
|
||||
block.builders.detachRaw.addBlock( detachStatement );
|
||||
}
|
||||
@ -1,10 +1,8 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
if ( generator.current.namespace && !/\S/.test( node.data ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const name = generator.current.getUniqueName( `text` );
|
||||
generator.addElement( name, `${generator.helper( 'createText' )}( ${JSON.stringify( node.data )} )`, false );
|
||||
export default function visitText ( generator, block, state, node ) {
|
||||
if ( state.namespace && !/\S/.test( node.data ) ) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const name = block.getUniqueName( `text` );
|
||||
block.addElement( name, `${generator.helper( 'createText' )}( ${JSON.stringify( node.data )} )`, state.parentNode, false );
|
||||
}
|
||||
@ -1,14 +1,12 @@
|
||||
export default {
|
||||
enter ( generator ) {
|
||||
const anchor = `yield_anchor`;
|
||||
generator.createAnchor( anchor );
|
||||
export default function visitYieldTag ( generator, block, state ) {
|
||||
const anchor = `yield_anchor`;
|
||||
block.createAnchor( anchor, state.parentNode );
|
||||
|
||||
generator.current.builders.mount.addLine(
|
||||
`${generator.current.component}._yield && ${generator.current.component}._yield.mount( ${generator.current.target}, ${anchor} );`
|
||||
);
|
||||
block.builders.mount.addLine(
|
||||
`${block.component}._yield && ${block.component}._yield.mount( ${state.parentNode || 'target'}, ${anchor} );`
|
||||
);
|
||||
|
||||
generator.current.builders.teardown.addLine(
|
||||
`${generator.current.component}._yield && ${generator.current.component}._yield.teardown( detach );`
|
||||
);
|
||||
}
|
||||
};
|
||||
block.builders.destroy.addLine(
|
||||
`${block.component}._yield && ${block.component}._yield.destroy( detach );`
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import deindent from '../../utils/deindent.js';
|
||||
import flattenReference from '../../utils/flattenReference.js';
|
||||
|
||||
export default class Block {
|
||||
constructor ( options ) {
|
||||
Object.assign( this, options );
|
||||
}
|
||||
|
||||
addBinding ( binding, name ) {
|
||||
const conditions = [ `!( '${binding.name}' in root )`].concat( // TODO handle contextual bindings...
|
||||
this.conditions.map( c => `(${c})` )
|
||||
);
|
||||
|
||||
const { keypath } = flattenReference( binding.value );
|
||||
|
||||
this.generator.bindings.push( deindent`
|
||||
if ( ${conditions.join( '&&' )} ) {
|
||||
tmp = ${name}.data();
|
||||
if ( '${keypath}' in tmp ) {
|
||||
root.${binding.name} = tmp.${keypath};
|
||||
settled = false;
|
||||
}
|
||||
}
|
||||
` );
|
||||
}
|
||||
|
||||
child ( options ) {
|
||||
return new Block( Object.assign( {}, this, options, { parent: this } ) );
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
import visitors from './visitors/index.js';
|
||||
|
||||
export default function visit ( generator, fragment, node ) {
|
||||
const visitor = visitors[ node.type ];
|
||||
visitor( generator, fragment, node );
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
export default {
|
||||
export default function visitComment () {
|
||||
// do nothing
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,72 +1,77 @@
|
||||
import flattenReference from '../../../utils/flattenReference.js';
|
||||
import visit from '../visit.js';
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
function stringify ( chunk ) {
|
||||
if ( chunk.type === 'Text' ) return chunk.data;
|
||||
if ( chunk.type === 'MustacheTag' ) {
|
||||
const { snippet } = generator.contextualise( chunk.expression );
|
||||
return '${__escape( ' + snippet + ')}';
|
||||
}
|
||||
export default function visitComponent ( generator, block, node ) {
|
||||
function stringify ( chunk ) {
|
||||
if ( chunk.type === 'Text' ) return chunk.data;
|
||||
if ( chunk.type === 'MustacheTag' ) {
|
||||
const { snippet } = generator.contextualise( block, chunk.expression );
|
||||
return '${__escape( ' + snippet + ')}';
|
||||
}
|
||||
}
|
||||
|
||||
const attributes = [];
|
||||
const bindings = [];
|
||||
const attributes = [];
|
||||
const bindings = [];
|
||||
|
||||
node.attributes.forEach( attribute => {
|
||||
if ( attribute.type === 'Attribute' ) {
|
||||
attributes.push( attribute );
|
||||
} else if ( attribute.type === 'Binding' ) {
|
||||
bindings.push( attribute );
|
||||
}
|
||||
});
|
||||
node.attributes.forEach( attribute => {
|
||||
if ( attribute.type === 'Attribute' ) {
|
||||
attributes.push( attribute );
|
||||
} else if ( attribute.type === 'Binding' ) {
|
||||
bindings.push( attribute );
|
||||
}
|
||||
});
|
||||
|
||||
const props = attributes
|
||||
.map( attribute => {
|
||||
let value;
|
||||
const props = attributes
|
||||
.map( attribute => {
|
||||
let value;
|
||||
|
||||
if ( attribute.value === true ) {
|
||||
value = `true`;
|
||||
} else if ( attribute.value.length === 0 ) {
|
||||
value = `''`;
|
||||
} else if ( attribute.value.length === 1 ) {
|
||||
const chunk = attribute.value[0];
|
||||
if ( chunk.type === 'Text' ) {
|
||||
value = isNaN( chunk.data ) ? JSON.stringify( chunk.data ) : chunk.data;
|
||||
} else {
|
||||
const { snippet } = generator.contextualise( chunk.expression );
|
||||
value = snippet;
|
||||
}
|
||||
if ( attribute.value === true ) {
|
||||
value = `true`;
|
||||
} else if ( attribute.value.length === 0 ) {
|
||||
value = `''`;
|
||||
} else if ( attribute.value.length === 1 ) {
|
||||
const chunk = attribute.value[0];
|
||||
if ( chunk.type === 'Text' ) {
|
||||
value = isNaN( chunk.data ) ? JSON.stringify( chunk.data ) : chunk.data;
|
||||
} else {
|
||||
value = '`' + attribute.value.map( stringify ).join( '' ) + '`';
|
||||
const { snippet } = generator.contextualise( block, chunk.expression );
|
||||
value = snippet;
|
||||
}
|
||||
} else {
|
||||
value = '`' + attribute.value.map( stringify ).join( '' ) + '`';
|
||||
}
|
||||
|
||||
return `${attribute.name}: ${value}`;
|
||||
})
|
||||
.concat( bindings.map( binding => {
|
||||
const { name, keypath } = flattenReference( binding.value );
|
||||
const value = generator.current.contexts.has( name ) ? keypath : `root.${keypath}`;
|
||||
return `${binding.name}: ${value}`;
|
||||
}))
|
||||
.join( ', ' );
|
||||
return `${attribute.name}: ${value}`;
|
||||
})
|
||||
.concat( bindings.map( binding => {
|
||||
const { name, keypath } = flattenReference( binding.value );
|
||||
const value = block.contexts.has( name ) ? keypath : `root.${keypath}`;
|
||||
return `${binding.name}: ${value}`;
|
||||
}))
|
||||
.join( ', ' );
|
||||
|
||||
const expression = node.name === ':Self' ? generator.name : generator.importedComponents.get( node.name ) || `${generator.alias( 'template' )}.components.${node.name}`;
|
||||
const expression = node.name === ':Self' ? generator.name : generator.importedComponents.get( node.name ) || `${generator.alias( 'template' )}.components.${node.name}`;
|
||||
|
||||
bindings.forEach( binding => {
|
||||
generator.addBinding( binding, expression );
|
||||
});
|
||||
bindings.forEach( binding => {
|
||||
block.addBinding( binding, expression );
|
||||
});
|
||||
|
||||
let open = `\${${expression}.render({${props}}`;
|
||||
let open = `\${${expression}.render({${props}}`;
|
||||
|
||||
if ( node.children.length ) {
|
||||
open += `, { yield: () => \``;
|
||||
}
|
||||
if ( node.children.length ) {
|
||||
open += `, { yield: () => \``;
|
||||
}
|
||||
|
||||
generator.append( open );
|
||||
},
|
||||
generator.append( open );
|
||||
|
||||
leave ( generator, node ) {
|
||||
const close = node.children.length ? `\` })}` : ')}';
|
||||
generator.append( close );
|
||||
}
|
||||
};
|
||||
generator.elementDepth += 1;
|
||||
|
||||
node.children.forEach( child => {
|
||||
visit( generator, block, child );
|
||||
});
|
||||
|
||||
generator.elementDepth -= 1;
|
||||
|
||||
const close = node.children.length ? `\` })}` : ')}';
|
||||
generator.append( close );
|
||||
}
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { dependencies, snippet } = generator.contextualise( node.expression );
|
||||
|
||||
const open = `\${ ${snippet}.map( ${ node.index ? `( ${node.context}, ${node.index} )` : node.context} => \``;
|
||||
generator.append( open );
|
||||
|
||||
// TODO should this be the generator's job? It's duplicated between
|
||||
// here and the equivalent DOM compiler visitor
|
||||
const contexts = new Map( generator.current.contexts );
|
||||
contexts.set( node.context, node.context );
|
||||
|
||||
const indexes = new Map( generator.current.indexes );
|
||||
if ( node.index ) indexes.set( node.index, node.context );
|
||||
|
||||
const contextDependencies = new Map( generator.current.contextDependencies );
|
||||
contextDependencies.set( node.context, dependencies );
|
||||
|
||||
generator.push({
|
||||
contexts,
|
||||
indexes,
|
||||
contextDependencies
|
||||
});
|
||||
},
|
||||
|
||||
leave ( generator ) {
|
||||
const close = `\` ).join( '' )}`;
|
||||
generator.append( close );
|
||||
|
||||
generator.pop();
|
||||
}
|
||||
};
|
||||
import visit from '../visit.js';
|
||||
|
||||
export default function visitEachBlock ( generator, block, node ) {
|
||||
const { dependencies, snippet } = generator.contextualise( block, node.expression );
|
||||
|
||||
const open = `\${ ${snippet}.map( ${ node.index ? `( ${node.context}, ${node.index} )` : node.context} => \``;
|
||||
generator.append( open );
|
||||
|
||||
// TODO should this be the generator's job? It's duplicated between
|
||||
// here and the equivalent DOM compiler visitor
|
||||
const contexts = new Map( block.contexts );
|
||||
contexts.set( node.context, node.context );
|
||||
|
||||
const indexes = new Map( block.indexes );
|
||||
if ( node.index ) indexes.set( node.index, node.context );
|
||||
|
||||
const contextDependencies = new Map( block.contextDependencies );
|
||||
contextDependencies.set( node.context, dependencies );
|
||||
|
||||
const childBlock = block.child({
|
||||
contexts,
|
||||
indexes,
|
||||
contextDependencies
|
||||
});
|
||||
|
||||
node.children.forEach( child => {
|
||||
visit( generator, childBlock, child );
|
||||
});
|
||||
|
||||
const close = `\` ).join( '' )}`;
|
||||
generator.append( close );
|
||||
}
|
||||
@ -1,65 +1,60 @@
|
||||
import Component from './Component.js';
|
||||
import visitComponent from './Component.js';
|
||||
import isVoidElementName from '../../../utils/isVoidElementName.js';
|
||||
import Window from './meta/Window.js';
|
||||
import visit from '../visit.js';
|
||||
import visitWindow from './meta/Window.js';
|
||||
|
||||
const meta = {
|
||||
':Window': Window
|
||||
':Window': visitWindow
|
||||
};
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
if ( node.name in meta ) {
|
||||
return meta[ node.name ].enter( generator, node );
|
||||
}
|
||||
export default function visitElement ( generator, block, node ) {
|
||||
if ( node.name in meta ) {
|
||||
return meta[ node.name ]( generator, block, node );
|
||||
}
|
||||
|
||||
if ( generator.components.has( node.name ) || node.name === ':Self' ) {
|
||||
Component.enter( generator, node );
|
||||
return;
|
||||
}
|
||||
if ( generator.components.has( node.name ) || node.name === ':Self' ) {
|
||||
visitComponent( generator, block, node );
|
||||
return;
|
||||
}
|
||||
|
||||
let openingTag = `<${node.name}`;
|
||||
let openingTag = `<${node.name}`;
|
||||
|
||||
node.attributes.forEach( attribute => {
|
||||
if ( attribute.type !== 'Attribute' ) return;
|
||||
node.attributes.forEach( attribute => {
|
||||
if ( attribute.type !== 'Attribute' ) return;
|
||||
|
||||
let str = ` ${attribute.name}`;
|
||||
let str = ` ${attribute.name}`;
|
||||
|
||||
if ( attribute.value !== true ) {
|
||||
str += `="` + attribute.value.map( chunk => {
|
||||
if ( chunk.type === 'Text' ) {
|
||||
return chunk.data;
|
||||
}
|
||||
if ( attribute.value !== true ) {
|
||||
str += `="` + attribute.value.map( chunk => {
|
||||
if ( chunk.type === 'Text' ) {
|
||||
return chunk.data;
|
||||
}
|
||||
|
||||
const { snippet } = generator.contextualise( chunk.expression );
|
||||
return '${' + snippet + '}';
|
||||
}).join( '' ) + `"`;
|
||||
}
|
||||
const { snippet } = generator.contextualise( block, chunk.expression );
|
||||
return '${' + snippet + '}';
|
||||
}).join( '' ) + `"`;
|
||||
}
|
||||
|
||||
openingTag += str;
|
||||
});
|
||||
openingTag += str;
|
||||
});
|
||||
|
||||
if ( generator.cssId && !generator.elementDepth ) {
|
||||
openingTag += ` ${generator.cssId}`;
|
||||
}
|
||||
if ( generator.cssId && !generator.elementDepth ) {
|
||||
openingTag += ` ${generator.cssId}`;
|
||||
}
|
||||
|
||||
openingTag += '>';
|
||||
openingTag += '>';
|
||||
|
||||
generator.append( openingTag );
|
||||
},
|
||||
generator.append( openingTag );
|
||||
|
||||
leave ( generator, node ) {
|
||||
if ( node.name in meta ) {
|
||||
if ( meta[ node.name ].leave ) meta[ node.name ].leave( generator, node );
|
||||
return;
|
||||
}
|
||||
generator.elementDepth += 1;
|
||||
|
||||
if ( generator.components.has( node.name ) || node.name === ':Self' ) {
|
||||
Component.leave( generator, node );
|
||||
return;
|
||||
}
|
||||
node.children.forEach( child => {
|
||||
visit( generator, block, child );
|
||||
});
|
||||
|
||||
if ( !isVoidElementName( node.name ) ) {
|
||||
generator.append( `</${node.name}>` );
|
||||
}
|
||||
generator.elementDepth -= 1;
|
||||
|
||||
if ( !isVoidElementName( node.name ) ) {
|
||||
generator.append( `</${node.name}>` );
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,19 +1,25 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
import visit from '../visit.js';
|
||||
|
||||
generator.append( '${ ' + snippet + ' ? `' );
|
||||
export default function visitIfBlock ( generator, block, node ) {
|
||||
const { snippet } = generator.contextualise( block, node.expression );
|
||||
|
||||
generator.push({
|
||||
conditions: generator.current.conditions.concat( snippet )
|
||||
});
|
||||
},
|
||||
generator.append( '${ ' + snippet + ' ? `' );
|
||||
|
||||
const childBlock = block.child({
|
||||
conditions: block.conditions.concat( snippet )
|
||||
});
|
||||
|
||||
node.children.forEach( child => {
|
||||
visit( generator, childBlock, child );
|
||||
});
|
||||
|
||||
leave ( generator, node ) {
|
||||
generator.append( '` : `' );
|
||||
if ( node.else ) node.else.children.forEach( child => generator.visit( child ) );
|
||||
generator.append( '` }' );
|
||||
generator.append( '` : `' );
|
||||
|
||||
generator.pop();
|
||||
if ( node.else ) {
|
||||
node.else.children.forEach( child => {
|
||||
visit( generator, childBlock, child );
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
generator.append( '` }' );
|
||||
}
|
||||
@ -1,6 +1,4 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
generator.append( '${__escape( ' + snippet + ' )}' );
|
||||
}
|
||||
};
|
||||
export default function visitMustacheTag ( generator, block, node ) {
|
||||
const { snippet } = generator.contextualise( block, node.expression );
|
||||
generator.append( '${__escape( ' + snippet + ' )}' );
|
||||
}
|
||||
@ -1,6 +1,4 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
generator.append( '${' + snippet + '}' );
|
||||
}
|
||||
};
|
||||
export default function visitRawMustacheTag ( generator, block, node ) {
|
||||
const { snippet } = generator.contextualise( block, node.expression );
|
||||
generator.append( '${' + snippet + '}' );
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
generator.append( node.data.replace( /\${/g, '\\${' ) );
|
||||
}
|
||||
};
|
||||
export default function visitText ( generator, block, node ) {
|
||||
generator.append( node.data.replace( /\${/g, '\\${' ) );
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
export default {
|
||||
enter ( generator ) {
|
||||
generator.append( `\${options && options.yield ? options.yield() : ''}` );
|
||||
}
|
||||
};
|
||||
export default function visitYieldTag ( generator ) {
|
||||
generator.append( `\${options && options.yield ? options.yield() : ''}` );
|
||||
}
|
||||
@ -1,9 +1,3 @@
|
||||
export default {
|
||||
enter () {
|
||||
// noop
|
||||
},
|
||||
|
||||
leave () {
|
||||
// noop
|
||||
}
|
||||
};
|
||||
export default function visitWindow () {
|
||||
// noop
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
export default {
|
||||
data: {
|
||||
animals: [ 'alpaca', 'baboon', 'capybara' ],
|
||||
foo: 'something else'
|
||||
},
|
||||
html: 'before\n<p>alpaca</p><p>baboon</p><p>capybara</p>\nafter',
|
||||
test ( assert, component, target ) {
|
||||
component.set({ animals: [] });
|
||||
assert.htmlEqual( target.innerHTML, 'before\n<p>no animals, but rather something else</p>\nafter' );
|
||||
|
||||
component.set({ foo: 'something other' });
|
||||
assert.htmlEqual( target.innerHTML, 'before\n<p>no animals, but rather something other</p>\nafter' );
|
||||
|
||||
component.set({ animals: ['wombat'] });
|
||||
assert.htmlEqual( target.innerHTML, 'before\n<p>wombat</p>\nafter' );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
Use these tests sparingly, as they will need to be updated frequently as the code generation changes.
|
||||
@ -0,0 +1,28 @@
|
||||
import assert from 'assert';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { svelte } from '../helpers.js';
|
||||
|
||||
describe( 'js', () => {
|
||||
fs.readdirSync( 'test/js/samples' ).forEach( dir => {
|
||||
if ( dir[0] === '.' ) return;
|
||||
|
||||
// add .solo to a sample directory name to only run that test
|
||||
const solo = /\.solo/.test( dir );
|
||||
|
||||
if ( solo && process.env.CI ) {
|
||||
throw new Error( 'Forgot to remove `solo: true` from test' );
|
||||
}
|
||||
|
||||
( solo ? it.only : it )( dir, () => {
|
||||
dir = path.resolve( 'test/js/samples', dir );
|
||||
const input = fs.readFileSync( `${dir}/input.html`, 'utf-8' ).replace( /\s+$/, '' );
|
||||
|
||||
const actual = svelte.compile( input ).code;
|
||||
fs.writeFileSync( `${dir}/_actual.js`, actual );
|
||||
const expected = fs.readFileSync( `${dir}/expected.js`, 'utf-8' );
|
||||
|
||||
assert.equal( actual.trim(), expected.trim() );
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,5 +1,6 @@
|
||||
export default {
|
||||
html: `<div style="color: red;">red</div>`,
|
||||
|
||||
test ( assert, component, target ) {
|
||||
const div = target.querySelector( 'div' );
|
||||
|
||||
|
Before Width: | Height: | Size: 31 B After Width: | Height: | Size: 31 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue