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

Merge pull request #256 from Conduitry/blank-anchors

Browse Source 
Use empty comments as anchors
pull/266/head
Rich Harris 9 years ago committed by GitHub
parent 9311d1b0a6 2316d7d348
commit 478e462741
18 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File

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

@ -98,9 +98,9 @@ class DomGenerator extends Generator {
` ); ` );
} }
createAnchor ( name, description = '' ) { createAnchor ( name ) {
this.uses.createComment = true; this.uses.createComment = true;
const renderStatement = `createComment( ${JSON.stringify( description )} )`; const renderStatement = `createComment()`;
this.addElement( name, renderStatement, true ); this.addElement( name, renderStatement, true );
} }

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

@ -21,7 +21,7 @@ export default {
const { dependencies, snippet } = generator.contextualise( node.expression ); const { dependencies, snippet } = generator.contextualise( node.expression );
const anchor = `${name}_anchor`; const anchor = `${name}_anchor`;
generator.createAnchor( anchor, `#each ${generator.source.slice( node.expression.start, node.expression.end )}` ); generator.createAnchor( anchor );
generator.current.builders.init.addLine( `var ${name}_value = ${snippet};` ); generator.current.builders.init.addLine( `var ${name}_value = ${snippet};` );
generator.current.builders.init.addLine( `var ${iterations} = [];` ); generator.current.builders.init.addLine( `var ${iterations} = [];` );

2
src/generators/dom/visitors/IfBlock.js
Unescape View File

@ -41,7 +41,7 @@ export default {
const conditionsAndBlocks = getConditionsAndBlocks( generator, node, generator.getUniqueName( `renderIfBlock` ) ); const conditionsAndBlocks = getConditionsAndBlocks( generator, node, generator.getUniqueName( `renderIfBlock` ) );
const anchor = `${name}_anchor`; const anchor = `${name}_anchor`;
generator.createAnchor( anchor, `#if ${generator.source.slice( node.expression.start, node.expression.end )}` ); generator.createAnchor( anchor );
generator.current.builders.init.addBlock( deindent` generator.current.builders.init.addBlock( deindent`
function ${getBlock} ( ${params} ) { function ${getBlock} ( ${params} ) {

2
src/generators/dom/visitors/YieldTag.js
Unescape View File

@ -1,7 +1,7 @@
export default { export default {
enter ( generator ) { enter ( generator ) {
const anchor = `yield_anchor`; const anchor = `yield_anchor`;
generator.createAnchor( anchor, 'yield' ); generator.createAnchor( anchor );
generator.current.builders.mount.addLine( generator.current.builders.mount.addLine(
`component._yield && component._yield.mount( ${generator.current.target}, ${anchor} );` `component._yield && component._yield.mount( ${generator.current.target}, ${anchor} );`

4
src/shared/dom.js
Unescape View File

@ -34,8 +34,8 @@ export function createText ( data ) {
return document.createTextNode( data ); return document.createTextNode( data );
} }
export function createComment ( data ) { export function createComment () {
return document.createComment( data ); return document.createComment( '' );
} }
export function addEventListener ( node, event, handler ) { export function addEventListener ( node, event, handler ) {

2
test/generator/attribute-dynamic-multiple/_config.js
Unescape View File

@ -7,5 +7,5 @@ export default {
] ]
}, },
html: `<div class="foo ">1</div><div class=" bar">2</div><div class="foo bar">3</div><!--#each items-->` html: `<div class="foo ">1</div><div class=" bar">2</div><div class="foo bar">3</div><!---->`
}; };

6
test/generator/binding-input-text-contextual/_config.js
Unescape View File

@ -6,7 +6,7 @@ export default {
'three' 'three'
] ]
}, },
html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!--#each items-->`, html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
const inputs = [ ...target.querySelectorAll( 'input' ) ]; const inputs = [ ...target.querySelectorAll( 'input' ) ];
const items = component.get( 'items' ); const items = component.get( 'items' );
@ -18,12 +18,12 @@ export default {
inputs[1].dispatchEvent( event ); inputs[1].dispatchEvent( event );
assert.equal( items[1], 'four' ); assert.equal( items[1], 'four' );
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!--#each items-->` ); assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
items[2] = 'five'; items[2] = 'five';
component.set({ items }); component.set({ items });
assert.equal( inputs[2].value, 'five' ); assert.equal( inputs[2].value, 'five' );
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!--#each items-->` ); assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
} }
}; };

6
test/generator/binding-input-text-deep-contextual/_config.js
Unescape View File

@ -6,7 +6,7 @@ export default {
{ description: 'three' } { description: 'three' }
] ]
}, },
html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!--#each items-->`, html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
const inputs = [ ...target.querySelectorAll( 'input' ) ]; const inputs = [ ...target.querySelectorAll( 'input' ) ];
@ -17,13 +17,13 @@ export default {
inputs[1].value = 'four'; inputs[1].value = 'four';
inputs[1].dispatchEvent( event ); inputs[1].dispatchEvent( event );
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!--#each items-->` ); assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
const items = component.get( 'items' ); const items = component.get( 'items' );
items[2].description = 'five'; items[2].description = 'five';
component.set({ items }); component.set({ items });
assert.equal( inputs[2].value, 'five' ); assert.equal( inputs[2].value, 'five' );
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!--#each items-->` ); assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
} }
}; };

6
test/generator/component-yield-parent/_config.js
Unescape View File

@ -2,8 +2,8 @@ export default {
html: '<div><p>Hello</p></div>', html: '<div><p>Hello</p></div>',
test ( assert, component, target ) { test ( assert, component, target ) {
assert.equal( component.get( 'data' ), 'Hello' ); assert.equal( component.get( 'data' ), 'Hello' );
component.set({data: 'World'}) component.set({data: 'World'});
assert.equal( component.get( 'data' ), 'World' ); assert.equal( component.get( 'data' ), 'World' );
assert.equal( target.innerHTML, '<div><p>World<!--yield--></p></div>' ); assert.equal( target.innerHTML, '<div><p>World<!----></p></div>' );
} }
} };

2
test/generator/each-block-indexed/_config.js
Unescape View File

@ -2,5 +2,5 @@ export default {
data: { data: {
animals: [ 'adder', 'blue whale', 'chameleon' ] animals: [ 'adder', 'blue whale', 'chameleon' ]
}, },
html: `<p>0: adder</p><p>1: blue whale</p><p>2: chameleon</p><!--#each animals-->` html: `<p>0: adder</p><p>1: blue whale</p><p>2: chameleon</p><!---->`
}; };

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

@ -2,11 +2,11 @@ export default {
data: { data: {
animals: [ 'alpaca', 'baboon', 'capybara' ] animals: [ 'alpaca', 'baboon', 'capybara' ]
}, },
html: '<p>alpaca</p><p>baboon</p><p>capybara</p><!--#each animals-->', html: '<p>alpaca</p><p>baboon</p><p>capybara</p><!---->',
test ( assert, component, target ) { test ( assert, component, target ) {
component.set({ animals: [ 'alpaca', 'baboon', 'caribou', 'dogfish' ] }); component.set({ animals: [ 'alpaca', 'baboon', 'caribou', 'dogfish' ] });
assert.equal( target.innerHTML, '<p>alpaca</p><p>baboon</p><p>caribou</p><p>dogfish</p><!--#each animals-->' ); assert.equal( target.innerHTML, '<p>alpaca</p><p>baboon</p><p>caribou</p><p>dogfish</p><!---->' );
component.set({ animals: [] }); component.set({ animals: [] });
assert.equal( target.innerHTML, '<!--#each animals-->' ); assert.equal( target.innerHTML, '<!---->' );
} }
}; };

2
test/generator/each-blocks-expression/_config.js
Unescape View File

@ -1,3 +1,3 @@
export default { export default {
html: `<p>a</p><p>b</p><p>c</p><!--#each [ 'a', 'b', 'c' ]-->` html: `<p>a</p><p>b</p><p>c</p><!---->`
}; };

2
test/generator/each-blocks-nested-b/_config.js
Unescape View File

@ -28,7 +28,7 @@ export default {
} }
] ]
}, },
html: `<p>animals: aardvark</p><p>animals: buffalo</p><p>animals: chinchilla</p><!--#each category.things--><p>countries: albania</p><p>countries: brazil</p><p>countries: china</p><!--#each category.things--><p>people: alice</p><p>people: bob</p><p>people: carol</p><p>people: dave</p><!--#each category.things--><!--#each categories-->`, html: `<p>animals: aardvark</p><p>animals: buffalo</p><p>animals: chinchilla</p><!----><p>countries: albania</p><p>countries: brazil</p><p>countries: china</p><!----><p>people: alice</p><p>people: bob</p><p>people: carol</p><p>people: dave</p><!----><!---->`,
test ( assert, component, target ) { test ( assert, component, target ) {
// TODO // TODO
} }

2
test/generator/each-blocks-nested/_config.js
Unescape View File

@ -4,7 +4,7 @@ export default {
rows: [ 1, 2, 3 ] rows: [ 1, 2, 3 ]
}, },
html: `<div>a, 1</div><div>a, 2</div><div>a, 3</div><!--#each rows--><div>b, 1</div><div>b, 2</div><div>b, 3</div><!--#each rows--><div>c, 1</div><div>c, 2</div><div>c, 3</div><!--#each rows--><!--#each columns-->`, html: `<div>a, 1</div><div>a, 2</div><div>a, 3</div><!----><div>b, 1</div><div>b, 2</div><div>b, 3</div><!----><div>c, 1</div><div>c, 2</div><div>c, 3</div><!----><!---->`,
test ( assert, component, target ) { test ( assert, component, target ) {
// TODO // TODO

2
test/generator/event-handler-removal/_config.js
Unescape View File

@ -1,7 +1,7 @@
// TODO gah, JSDOM appears to behave differently to real browsers here... probably need to raise an issue // TODO gah, JSDOM appears to behave differently to real browsers here... probably need to raise an issue
export default { export default {
html: '<input><!--#if visible-->', html: '<input><!---->',
test ( assert, component ) { test ( assert, component ) {
component.refs.input.focus(); component.refs.input.focus();

6
test/generator/event-handler/_config.js
Unescape View File

@ -1,13 +1,13 @@
export default { export default {
html: '<button>toggle</button>\n\n<!--#if visible-->', html: '<button>toggle</button>\n\n<!---->',
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
const button = target.querySelector( 'button' ); const button = target.querySelector( 'button' );
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent( 'click' );
button.dispatchEvent( event ); button.dispatchEvent( event );
assert.equal( target.innerHTML, '<button>toggle</button>\n\n<p>hello!</p><!--#if visible-->' ); assert.equal( target.innerHTML, '<button>toggle</button>\n\n<p>hello!</p><!---->' );
button.dispatchEvent( event ); button.dispatchEvent( event );
assert.equal( target.innerHTML, '<button>toggle</button>\n\n<!--#if visible-->' ); assert.equal( target.innerHTML, '<button>toggle</button>\n\n<!---->' );
} }
}; };

6
test/generator/if-block-widget/_config.js
Unescape View File

@ -2,11 +2,11 @@ export default {
data: { data: {
visible: true visible: true
}, },
html: 'before\n<p>Widget</p><!--#if visible-->\nafter', html: 'before\n<p>Widget</p><!---->\nafter',
test ( assert, component, target ) { test ( assert, component, target ) {
component.set({ visible: false }); component.set({ visible: false });
assert.equal( target.innerHTML, 'before\n<!--#if visible-->\nafter' ); assert.equal( target.innerHTML, 'before\n<!---->\nafter' );
component.set({ visible: true }); component.set({ visible: true });
assert.equal( target.innerHTML, 'before\n<p>Widget</p><!--#if visible-->\nafter' ); assert.equal( target.innerHTML, 'before\n<p>Widget</p><!---->\nafter' );
} }
}; };

6
test/generator/if-block/_config.js
Unescape View File

@ -2,11 +2,11 @@ export default {
data: { data: {
visible: true visible: true
}, },
html: '<p>i am visible</p><!--#if visible-->', html: '<p>i am visible</p><!---->',
test ( assert, component, target ) { test ( assert, component, target ) {
component.set({ visible: false }); component.set({ visible: false });
assert.equal( target.innerHTML, '<!--#if visible-->' ); assert.equal( target.innerHTML, '<!---->' );
component.set({ visible: true }); component.set({ visible: true });
assert.equal( target.innerHTML, '<p>i am visible</p><!--#if visible-->' ); assert.equal( target.innerHTML, '<p>i am visible</p><!---->' );
} }
}; };

Write Preview
Loading…
Cancel
Save