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

Merge pull request #209 from sveltejs/gh-81

Browse Source 
Keyed updates
pull/215/head
Rich Harris 8 years ago committed by GitHub
parent e5b4df8a62 d0ffb64eba
commit 9af5c274f4
10 changed files with 198 additions and 34 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape View File

@ -9,3 +9,4 @@ coverage
coverage.lcov
test/sourcemaps/*/output.js
test/sourcemaps/*/output.js.map
scratch

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

@ -50,22 +50,30 @@ class DomGenerator extends Generator {
` );
}
const properties = new CodeBuilder();
if ( fragment.key ) properties.addBlock( `key: key,` );
properties.addBlock( deindent`
mount: function ( target, anchor ) {
${fragment.builders.mount}
},
update: function ( changed, ${fragment.params} ) {
${fragment.builders.update}
},
teardown: function ( detach ) {
${fragment.builders.teardown}
}
` );
this.renderers.push( deindent`
function ${fragment.name} ( ${fragment.params}, component ) {
function ${fragment.name} ( ${fragment.params}, component${fragment.key ? `, key` : ''} ) {
${fragment.builders.init}
return {
mount: function ( target, anchor ) {
${fragment.builders.mount}
},
update: function ( changed, ${fragment.params} ) {
${fragment.builders.update}
},
teardown: function ( detach ) {
${fragment.builders.teardown}
}
${properties}
};
}
` );
@ -127,6 +135,7 @@ export default function dom ( parsed, source, options, names ) {
namespace,
target: 'target',
localElementDepth: 0,
key: null,
contexts: {},
indexes: {},

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

@ -117,7 +117,8 @@ export default {
namespace: local.namespace,
target: name,
parent: generator.current,
localElementDepth: generator.current.localElementDepth + 1
localElementDepth: generator.current.localElementDepth + 1,
key: null
});
},

106
src/generators/dom/visitors/EachBlock.js
Unescape View File

@ -1,3 +1,4 @@
import CodeBuilder from '../../../utils/CodeBuilder.js';
import deindent from '../../../utils/deindent.js';
import getBuilders from '../utils/getBuilders.js';
@ -22,16 +23,42 @@ export default {
const anchor = `${name}_anchor`;
generator.createAnchor( anchor, `#each ${generator.source.slice( node.expression.start, node.expression.end )}` );
generator.current.builders.init.addBlock( deindent`
var ${name}_value = ${snippet};
var ${iterations} = [];
${node.else ? `var ${elseName} = null;` : ''}
generator.current.builders.init.addLine( `var ${name}_value = ${snippet};` );
generator.current.builders.init.addLine( `var ${iterations} = [];` );
if ( node.key ) generator.current.builders.init.addLine( `var ${name}_lookup = Object.create( null );` );
if ( node.else ) generator.current.builders.init.addLine( `var ${elseName} = null;` );
const initialRender = new CodeBuilder();
const localVars = {};
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} = ${name}_value[${i}].${node.key};
${name}_iterations[${i}] = ${name}_lookup[ ${localVars.key} ] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component${node.key ? `, ${localVars.key}` : `` } );
` );
} else {
initialRender.addLine(
`${name}_iterations[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component );`
);
}
if ( !isToplevel ) {
initialRender.addLine(
`${name}_iterations[${i}].mount( ${anchor}.parentNode, ${anchor} );`
);
}
generator.current.builders.init.addBlock( deindent`
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
${iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component );
${!isToplevel ? `${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );` : ''}
${initialRender}
}
` );
if ( node.else ) {
generator.current.builders.init.addBlock( deindent`
if ( !${name}_value.length ) {
@ -56,24 +83,62 @@ export default {
}
}
generator.current.builders.update.addBlock( deindent`
var ${name}_value = ${snippet};
if ( node.key ) {
generator.current.builders.update.addBlock( deindent`
var ${name}_value = ${snippet};
var _${name}_iterations = [];
var _${name}_lookup = Object.create( null );
var ${localVars.fragment} = document.createDocumentFragment();
// create new iterations as necessary
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
var ${localVars.value} = ${name}_value[${i}];
var ${localVars.key} = ${localVars.value}.${node.key};
if ( ${name}_lookup[ ${localVars.key} ] ) {
_${name}_iterations[${i}] = _${name}_lookup[ ${localVars.key} ] = ${name}_lookup[ ${localVars.key} ];
_${name}_lookup[ ${localVars.key} ].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
} else {
_${name}_iterations[${i}] = _${name}_lookup[ ${localVars.key} ] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component${node.key ? `, ${localVars.key}` : `` } );
}
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
if ( !${iterations}[${i}] ) {
${iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component );
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
} else {
${iterations}[${i}].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
_${name}_iterations[${i}].mount( ${localVars.fragment}, null );
}
}
for ( var ${i} = ${name}_value.length; ${i} < ${iterations}.length; ${i} += 1 ) {
${iterations}[${i}].teardown( true );
}
// remove old iterations
for ( var ${i} = 0; ${i} < ${name}_iterations.length; ${i} += 1 ) {
var ${name}_iteration = ${name}_iterations[${i}];
if ( !_${name}_lookup[ ${name}_iteration.${localVars.key} ] ) {
${name}_iteration.teardown( true );
}
}
${iterations}.length = ${listName}.length;
` );
${name}_anchor.parentNode.insertBefore( ${localVars.fragment}, ${name}_anchor );
${name}_iterations = _${name}_iterations;
${name}_lookup = _${name}_lookup;
` );
} else {
generator.current.builders.update.addBlock( deindent`
var ${name}_value = ${snippet};
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
if ( !${iterations}[${i}] ) {
${iterations}[${i}] = ${renderer}( ${params}, ${listName}, ${listName}[${i}], ${i}, component );
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
} else {
${iterations}[${i}].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
}
}
for ( var ${i} = ${name}_value.length; ${i} < ${iterations}.length; ${i} += 1 ) {
${iterations}[${i}].teardown( true );
}
${iterations}.length = ${listName}.length;
` );
}
if ( node.else ) {
generator.current.builders.update.addBlock( deindent`
@ -128,6 +193,7 @@ export default {
target: 'target',
expression: node.expression,
context: node.context,
key: node.key,
localElementDepth: 0,
contextDependencies,

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

@ -88,7 +88,8 @@ export default {
namespace: local.namespace,
target: name,
parent: generator.current,
localElementDepth: generator.current.localElementDepth + 1
localElementDepth: generator.current.localElementDepth + 1,
key: null
});
},

6
src/parse/state/mustache.js
Unescape View File

@ -171,6 +171,12 @@ export default function mustache ( parser ) {
if ( !block.index ) parser.error( `Expected name` );
parser.allowWhitespace();
}
if ( parser.eat( '@' ) ) {
block.key = parser.read( validIdentifier );
if ( !block.key ) parser.error( `Expected name` );
parser.allowWhitespace();
}
}
parser.eat( '}}', true );

28
test/generator/each-block-keyed/_config.js
Unescape View File

@ -0,0 +1,28 @@
export default {
data: {
todos: [
{ id: 123, description: 'implement keyed each blocks' },
{ id: 234, description: 'implement client-side hydration' }
]
},
html: '<p>implement keyed each blocks</p><p>implement client-side hydration</p>',
test ( assert, component, target ) {
const [ p1, p2 ] = target.querySelectorAll( 'p' );
component.set({
todos: [
{ id: 234, description: 'implement client-side hydration' }
]
});
assert.htmlEqual( target.innerHTML, '<p>implement client-side hydration</p>' );
const [ p3 ] = target.querySelectorAll( 'p' );
assert.ok( !target.contains( p1 ), 'first <p> element should be removed' );
assert.equal( p2, p3, 'second <p> element should be retained' );
component.teardown();
}
};

3
test/generator/each-block-keyed/main.html
Unescape View File

@ -0,0 +1,3 @@
{{#each todos as todo @id}}
<p>{{todo.description}}</p>
{{/each}}

3
test/parser/each-block-keyed/input.html
Unescape View File

@ -0,0 +1,3 @@
{{#each todos as todo @id}}
<p>{{todo}}</p>
{{/each}}

46
test/parser/each-block-keyed/output.json
Unescape View File

@ -0,0 +1,46 @@
{
"html": {
"start": 0,
"end": 54,
"type": "Fragment",
"children": [
{
"start": 0,
"end": 54,
"type": "EachBlock",
"expression": {
"start": 8,
"end": 13,
"type": "Identifier",
"name": "todos"
},
"context": "todo",
"key": "id",
"children": [
{
"start": 29,
"end": 44,
"type": "Element",
"name": "p",
"attributes": [],
"children": [
{
"start": 32,
"end": 40,
"type": "MustacheTag",
"expression": {
"start": 34,
"end": 38,
"type": "Identifier",
"name": "todo"
}
}
]
}
]
}
]
},
"css": null,
"js": null
}
Write Preview
Loading…
Cancel
Save