Merge pull request #491 from sveltejs/misc-fixes

Misc fixes
pull/497/head
Rich Harris 8 years ago committed by GitHub
commit ffe040a990

@ -40,7 +40,7 @@ export default class Generator {
// allow compiler to deconflict user's `import { get } from 'whatever'` and
// Svelte's builtin `import { get, ... } from 'svelte/shared.js'`;
this.importedNames = new Set();
this._aliases = new Map();
this.aliases = new Map();
this._usedNames = new Set( [ name ] );
}
@ -54,12 +54,11 @@ export default class Generator {
}
alias ( name ) {
if ( this._aliases.has( name ) ) {
return this._aliases.get( name );
if ( !this.aliases.has( name ) ) {
this.aliases.set( name, this.getUniqueName( name ) );
}
const alias = this.getUniqueName( name );
this._aliases.set( name, alias );
return alias;
return this.aliases.get( name );
}
contextualise ( block, expression, context, isEventHandler ) {
@ -151,7 +150,7 @@ export default class Generator {
};
}
findDependencies ( contextDependencies, expression ) {
findDependencies ( contextDependencies, indexes, expression ) {
if ( expression._dependencies ) return expression._dependencies;
let scope = annotateWithScopes( expression );
@ -170,7 +169,7 @@ export default class Generator {
if ( contextDependencies.has( name ) ) {
dependencies.push( ...contextDependencies.get( name ) );
} else {
} else if ( !indexes.has( name ) ) {
dependencies.push( name );
}

@ -29,6 +29,7 @@ export default class Block {
destroy: new CodeBuilder()
};
this.aliases = new Map();
this.getUniqueName = this.generator.getUniqueNameMaker( options.params );
// unique names
@ -61,6 +62,14 @@ export default class Block {
}
}
alias ( name ) {
if ( !this.aliases.has( name ) ) {
this.aliases.set( name, this.getUniqueName( name ) );
}
return this.aliases.get( name );
}
child ( options ) {
return new Block( Object.assign( {}, this, options, { parent: this } ) );
}
@ -75,7 +84,7 @@ export default class Block {
}
findDependencies ( expression ) {
return this.generator.findDependencies( this.contextDependencies, expression );
return this.generator.findDependencies( this.contextDependencies, this.indexes, expression );
}
mount ( name, parentNode ) {

@ -43,7 +43,7 @@ export default function dom ( parsed, source, options ) {
const { computations, hasJs, templateProperties, namespace } = generator.parseJs();
const block = preprocess( generator, parsed.html.children );
const block = preprocess( generator, parsed.html );
const state = {
namespace,

@ -1,4 +1,5 @@
import Block from './Block.js';
import { trimStart, trimEnd } from '../../utils/trim.js';
function isElseIf ( node ) {
return node && node.children.length === 1 && node.children[0].type === 'IfBlock';
@ -23,7 +24,7 @@ const preprocessors = {
});
blocks.push( node._block );
preprocessChildren( generator, node._block, node.children );
preprocessChildren( generator, node._block, node );
if ( node._block.dependencies.size > 0 ) {
dynamic = true;
@ -38,7 +39,7 @@ const preprocessors = {
});
blocks.push( node.else._block );
preprocessChildren( generator, node.else._block, node.else.children );
preprocessChildren( generator, node.else._block, node.else );
if ( node.else._block.dependencies.size > 0 ) {
dynamic = true;
@ -97,7 +98,7 @@ const preprocessors = {
});
generator.blocks.push( node._block );
preprocessChildren( generator, node._block, node.children );
preprocessChildren( generator, node._block, node );
block.addDependencies( node._block.dependencies );
node._block.hasUpdateMethod = node._block.dependencies.size > 0;
@ -107,7 +108,7 @@ const preprocessors = {
});
generator.blocks.push( node.else._block );
preprocessChildren( generator, node.else._block, node.else.children );
preprocessChildren( generator, node.else._block, node.else );
node.else._block.hasUpdateMethod = node.else._block.dependencies.size > 0;
}
},
@ -131,35 +132,56 @@ const preprocessors = {
const isComponent = generator.components.has( node.name ) || node.name === ':Self';
if ( isComponent ) {
const name = block.getUniqueName( ( node.name === ':Self' ? generator.name : node.name ).toLowerCase() );
if ( node.children.length ) {
if ( isComponent ) {
const name = block.getUniqueName( ( node.name === ':Self' ? generator.name : node.name ).toLowerCase() );
node._block = block.child({
name: generator.getUniqueName( `create_${name}_yield_fragment` )
});
node._block = block.child({
name: generator.getUniqueName( `create_${name}_yield_fragment` )
});
generator.blocks.push( node._block );
preprocessChildren( generator, node._block, node.children );
block.addDependencies( node._block.dependencies );
node._block.hasUpdateMethod = node._block.dependencies.size > 0;
}
generator.blocks.push( node._block );
preprocessChildren( generator, node._block, node );
block.addDependencies( node._block.dependencies );
node._block.hasUpdateMethod = node._block.dependencies.size > 0;
}
else {
preprocessChildren( generator, block, node.children );
else {
preprocessChildren( generator, block, node );
}
}
}
};
preprocessors.RawMustacheTag = preprocessors.MustacheTag;
function preprocessChildren ( generator, block, children ) {
children.forEach( child => {
function preprocessChildren ( generator, block, node ) {
// glue text nodes together
const cleaned = [];
let lastChild;
node.children.forEach( child => {
if ( child.type === 'Comment' ) return;
if ( child.type === 'Text' && lastChild && lastChild.type === 'Text' ) {
lastChild.data += child.data;
lastChild.end = child.end;
} else {
cleaned.push( child );
}
lastChild = child;
});
node.children = cleaned;
cleaned.forEach( child => {
const preprocess = preprocessors[ child.type ];
if ( preprocess ) preprocess( generator, block, child );
});
}
export default function preprocess ( generator, children ) {
export default function preprocess ( generator, node ) {
const block = new Block({
generator,
name: generator.alias( 'create_main_fragment' ),
@ -177,8 +199,21 @@ export default function preprocess ( generator, children ) {
});
generator.blocks.push( block );
preprocessChildren( generator, block, children );
preprocessChildren( generator, block, node );
block.hasUpdateMethod = block.dependencies.size > 0;
// trim leading and trailing whitespace from the top level
const firstChild = node.children[0];
if ( firstChild && firstChild.type === 'Text' ) {
firstChild.data = trimStart( firstChild.data );
if ( !firstChild.data ) node.children.shift();
}
const lastChild = node.children[ node.children.length - 1 ];
if ( lastChild && lastChild.type === 'Text' ) {
lastChild.data = trimEnd( lastChild.data );
if ( !lastChild.data ) node.children.pop();
}
return block;
}

@ -1,3 +0,0 @@
export default function visitComment () {
// do nothing
}

@ -7,7 +7,7 @@ export default function visitEachBlock ( generator, block, state, node ) {
const create_each_block = node._block.name;
const each_block_value = node._block.listName;
const iterations = block.getUniqueName( `${each_block}_iterations` );
const i = block.getUniqueName( `i` );
const i = block.alias( `i` );
const params = block.params.join( ', ' );
const anchor = block.getUniqueName( `${each_block}_anchor` );
@ -188,7 +188,7 @@ function unkeyed ( generator, block, state, node, snippet, { create_each_block,
` );
const dependencies = block.findDependencies( node.expression );
const allDependencies = new Set( block.dependencies );
const allDependencies = new Set( node._block.dependencies );
dependencies.forEach( dependency => {
allDependencies.add( dependency );
});

@ -44,16 +44,73 @@ function visitChildren ( generator, block, state, node ) {
}
export default function visitIfBlock ( generator, block, state, node ) {
const params = block.params.join( ', ' );
const name = generator.getUniqueName( `if_block` );
const getBlock = block.getUniqueName( `get_block` );
const current_block = block.getUniqueName( `current_block` );
const anchor = generator.getUniqueName( `${name}_anchor` );
const params = block.params.join( ', ' );
const vars = { name, anchor, params };
block.createAnchor( anchor, state.parentNode );
const branches = getBranches( generator, block, state, node, generator.getUniqueName( `create_if_block` ) );
const dynamic = branches.some( branch => branch.dynamic );
const anchor = `${name}_anchor`;
block.createAnchor( anchor, state.parentNode );
if ( node.else ) {
compound( generator, block, state, node, branches, dynamic, vars );
} else {
simple( generator, block, state, node, branches[0], dynamic, vars );
}
block.builders.destroy.addLine(
`if ( ${name} ) ${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );`
);
}
function simple ( generator, block, state, node, branch, dynamic, { name, anchor, params } ) {
block.builders.create.addBlock( deindent`
var ${name} = ${branch.condition} && ${branch.block}( ${params}, ${block.component} );
` );
const isToplevel = !state.parentNode;
if ( isToplevel ) {
block.builders.mount.addLine( `if ( ${name} ) ${name}.mount( ${block.target}, ${anchor} );` );
} else {
block.builders.create.addLine( `if ( ${name} ) ${name}.mount( ${state.parentNode}, ${anchor} );` );
}
if ( dynamic ) {
block.builders.update.addBlock( deindent`
if ( ${branch.condition} ) {
if ( ${name} ) {
${name}.update( changed, ${params} );
} else {
${name} = ${branch.block}( ${params}, ${block.component} );
${name}.mount( ${anchor}.parentNode, ${anchor} );
}
} else if ( ${name} ) {
${name}.destroy( true );
${name} = null;
}
` );
} else {
block.builders.update.addBlock( deindent`
if ( ${branch.condition} ) {
if ( !${name} ) {
${name} = ${branch.block}( ${params}, ${block.component} );
${name}.mount( ${anchor}.parentNode, ${anchor} );
}
} else if ( ${name} ) {
${name}.destroy( true );
${name} = null;
}
` );
}
}
function compound ( generator, block, state, node, branches, dynamic, { name, anchor, params } ) {
const getBlock = block.getUniqueName( `get_block` );
const current_block = block.getUniqueName( `current_block` );
block.builders.create.addBlock( deindent`
function ${getBlock} ( ${params} ) {
@ -93,8 +150,4 @@ export default function visitIfBlock ( generator, block, state, node ) {
}
` );
}
block.builders.destroy.addLine(
`if ( ${name} ) ${name}.destroy( ${isToplevel ? 'detach' : 'false'} );`
);
}

@ -1,4 +1,3 @@
import Comment from './Comment.js';
import EachBlock from './EachBlock.js';
import Element from './Element/Element.js';
import IfBlock from './IfBlock.js';
@ -8,7 +7,6 @@ import Text from './Text.js';
import YieldTag from './YieldTag.js';
export default {
Comment,
EachBlock,
Element,
IfBlock,

@ -1,7 +1,7 @@
import { locate } from 'locate-character';
import fragment from './state/fragment.js';
import { whitespace } from './patterns.js';
import { trimStart, trimEnd } from './utils/trim.js';
import { whitespace } from '../utils/patterns.js';
import { trimStart, trimEnd } from '../utils/trim.js';
import getCodeFrame from '../utils/getCodeFrame.js';
import hash from './utils/hash.js';

@ -1,6 +1,6 @@
import readExpression from '../read/expression.js';
import { whitespace } from '../patterns.js';
import { trimStart, trimEnd } from '../utils/trim.js';
import { whitespace } from '../../utils/patterns.js';
import { trimStart, trimEnd } from '../../utils/trim.js';
const validIdentifier = /[a-zA-Z_$][a-zA-Z0-9_$]*/;

@ -2,7 +2,7 @@ import readExpression from '../read/expression.js';
import readScript from '../read/script.js';
import readStyle from '../read/style.js';
import { readEventHandlerDirective, readBindingDirective } from '../read/directives.js';
import { trimStart, trimEnd } from '../utils/trim.js';
import { trimStart, trimEnd } from '../../utils/trim.js';
import { decodeCharacterReferences } from '../utils/html.js';
import isVoidElementName from '../../utils/isVoidElementName.js';

@ -16,7 +16,7 @@ export default class CodeBuilder {
this.result += `\n\t${line}`;
} else {
if ( this.lastCondition ) {
this.result += `\n}`;
this.result += `\n}\n\n`;
}
this.result += `if ( ${condition} ) {\n\t${line}`;

@ -1,4 +1,4 @@
import { whitespace } from '../patterns.js';
import { whitespace } from './patterns.js';
export function trimStart ( str ) {
let i = 0;

@ -0,0 +1,87 @@
import { appendNode, assign, createElement, createText, detachNode, dispatchObservers, insertNode, proto, setAttribute } from "svelte/shared.js";
var template = (function () {
return {
data: function () {
return { foo: 42 }
}
};
}());
var added_css = false;
function add_css () {
var style = createElement( 'style' );
style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
appendNode( style, document.head );
added_css = true;
}
function create_main_fragment ( root, component ) {
var p = createElement( 'p' );
setAttribute( p, 'svelte-3842350206', '' );
var text_value = root.foo;
var text = createText( text_value );
appendNode( text, p );
return {
mount: function ( target, anchor ) {
insertNode( p, target, anchor );
},
update: function ( changed, root ) {
if ( text_value !== ( text_value = root.foo ) ) {
text.data = text_value;
}
},
destroy: function ( detach ) {
if ( detach ) {
detachNode( p );
}
}
};
}
function SvelteComponent ( options ) {
options = options || {};
this._state = assign( template.data(), options.data );
this._observers = {
pre: Object.create( null ),
post: Object.create( null )
};
this._handlers = Object.create( null );
this._root = options._root;
this._yield = options._yield;
this._torndown = false;
if ( !added_css ) add_css();
this._fragment = create_main_fragment( this._state, this );
if ( options.target ) this._fragment.mount( options.target, null );
}
assign( SvelteComponent.prototype, proto );
SvelteComponent.prototype._set = function _set ( newState ) {
var oldState = this._state;
this._state = assign( {}, oldState, newState );
dispatchObservers( this, this._observers.pre, newState, oldState );
if ( this._fragment ) this._fragment.update( newState, this._state );
dispatchObservers( this, this._observers.post, newState, oldState );
};
SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
this.fire( 'destroy' );
this._fragment.destroy( detach !== false );
this._fragment = null;
this._state = {};
this._torndown = true;
};
export default SvelteComponent;

@ -0,0 +1,30 @@
<!-- a -->
<!-- b -->
<p>{{foo}}</p>
<!-- c -->
<!-- d -->
<style>
p {
color: red;
}
</style>
<!-- e -->
<script>
export default {
data: function () {
return { foo: 42 }
}
};
</script>
<!-- f -->
<!-- g -->

@ -9,6 +9,12 @@ function create_main_fragment ( root, component ) {
each_block_iterations[i] = create_each_block( root, each_block_value, each_block_value[i], i, component );
}
var text = createText( "\n\n" );
var p = createElement( 'p' );
var text_1_value = root.foo;
var text_1 = createText( text_1_value );
appendNode( text_1, p );
return {
mount: function ( target, anchor ) {
insertNode( each_block_anchor, target, anchor );
@ -16,6 +22,9 @@ function create_main_fragment ( root, component ) {
for ( var i = 0; i < each_block_iterations.length; i += 1 ) {
each_block_iterations[i].mount( target, each_block_anchor );
}
insertNode( text, target, anchor );
insertNode( p, target, anchor );
},
update: function ( changed, root ) {
@ -35,6 +44,10 @@ function create_main_fragment ( root, component ) {
each_block_iterations.length = each_block_value.length;
}
if ( text_1_value !== ( text_1_value = root.foo ) ) {
text_1.data = text_1_value;
}
},
destroy: function ( detach ) {
@ -42,24 +55,32 @@ function create_main_fragment ( root, component ) {
if ( detach ) {
detachNode( each_block_anchor );
detachNode( text );
detachNode( p );
}
}
};
}
function create_each_block ( root, each_block_value, comment, comment_index, component ) {
function create_each_block ( root, each_block_value, comment, i, component ) {
var div = createElement( 'div' );
div.className = "comment";
var strong = createElement( 'strong' );
appendNode( strong, div );
var text_value = i;
var text = createText( text_value );
appendNode( text, strong );
appendNode( createText( "\n\n\t\t" ), div );
var span = createElement( 'span' );
appendNode( span, div );
span.className = "meta";
var text_value = comment.author;
var text = createText( text_value );
appendNode( text, span );
appendNode( createText( " wrote " ), span );
var text_2_value = root.elapsed(comment.time, root.time);
var text_2_value = comment.author;
var text_2 = createText( text_2_value );
appendNode( text_2, span );
appendNode( createText( " wrote " ), span );
var text_4_value = root.elapsed(comment.time, root.time);
var text_4 = createText( text_4_value );
appendNode( text_4, span );
appendNode( createText( " ago:" ), span );
appendNode( createText( "\n\n\t\t" ), div );
var raw_before = createElement( 'noscript' );
@ -74,15 +95,19 @@ function create_each_block ( root, each_block_value, comment, comment_index, com
insertNode( div, target, anchor );
},
update: function ( changed, root, each_block_value, comment, comment_index ) {
if ( text_value !== ( text_value = comment.author ) ) {
update: function ( changed, root, each_block_value, comment, i ) {
if ( text_value !== ( text_value = i ) ) {
text.data = text_value;
}
if ( text_2_value !== ( text_2_value = root.elapsed(comment.time, root.time) ) ) {
if ( text_2_value !== ( text_2_value = comment.author ) ) {
text_2.data = text_2_value;
}
if ( text_4_value !== ( text_4_value = root.elapsed(comment.time, root.time) ) ) {
text_4.data = text_4_value;
}
if ( raw_value !== ( raw_value = comment.html ) ) {
detachBetween( raw_before, raw_after );
raw_before.insertAdjacentHTML( 'afterend', raw_value );

@ -1,9 +1,13 @@
{{#each comments as comment}}
{{#each comments as comment, i}}
<div class='comment'>
<strong>{{i}}</strong>
<span class='meta'>
{{comment.author}} wrote {{elapsed(comment.time, time)}} ago:
</span>
{{{comment.html}}}
</div>
{{/each}}
{{/each}}
<p>{{foo}}</p>

@ -0,0 +1,93 @@
import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js";
function create_main_fragment ( root, component ) {
var if_block_anchor = createComment();
var if_block = root.foo && create_if_block( root, component );
return {
mount: function ( target, anchor ) {
insertNode( if_block_anchor, target, anchor );
if ( if_block ) if_block.mount( target, if_block_anchor );
},
update: function ( changed, root ) {
if ( root.foo ) {
if ( !if_block ) {
if_block = create_if_block( root, component );
if_block.mount( if_block_anchor.parentNode, if_block_anchor );
}
} else if ( if_block ) {
if_block.destroy( true );
if_block = null;
}
},
destroy: function ( detach ) {
if ( if_block ) if_block.destroy( detach );
if ( detach ) {
detachNode( if_block_anchor );
}
}
};
}
function create_if_block ( root, component ) {
var p = createElement( 'p' );
appendNode( createText( "foo!" ), p );
return {
mount: function ( target, anchor ) {
insertNode( p, target, anchor );
},
destroy: function ( detach ) {
if ( detach ) {
detachNode( p );
}
}
};
}
function SvelteComponent ( options ) {
options = options || {};
this._state = options.data || {};
this._observers = {
pre: Object.create( null ),
post: Object.create( null )
};
this._handlers = Object.create( null );
this._root = options._root;
this._yield = options._yield;
this._torndown = false;
this._fragment = create_main_fragment( this._state, this );
if ( options.target ) this._fragment.mount( options.target, null );
}
assign( SvelteComponent.prototype, proto );
SvelteComponent.prototype._set = function _set ( newState ) {
var oldState = this._state;
this._state = assign( {}, oldState, newState );
dispatchObservers( this, this._observers.pre, newState, oldState );
if ( this._fragment ) this._fragment.update( newState, this._state );
dispatchObservers( this, this._observers.post, newState, oldState );
};
SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {
this.fire( 'destroy' );
this._fragment.destroy( detach !== false );
this._fragment = null;
this._state = {};
this._torndown = true;
};
export default SvelteComponent;

@ -0,0 +1,3 @@
{{#if foo}}
<p>foo!</p>
{{/if}}
Loading…
Cancel
Save