diff --git a/.gitignore b/.gitignore index c51cf048c9..df044ec374 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,5 @@ coverage.lcov test/sourcemaps/samples/*/output.js test/sourcemaps/samples/*/output.js.map _actual.* +_actual-bundle.* src/generators/dom/shared.ts \ No newline at end of file diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts index 9523d42e7c..0131ca1e12 100644 --- a/src/generators/dom/Block.ts +++ b/src/generators/dom/Block.ts @@ -42,10 +42,10 @@ export default class Block { builders: { create: CodeBuilder; mount: CodeBuilder; - update: CodeBuilder; intro: CodeBuilder; + update: CodeBuilder; outro: CodeBuilder; - detach: CodeBuilder; + unmount: CodeBuilder; detachRaw: CodeBuilder; destroy: CodeBuilder; } @@ -88,10 +88,10 @@ export default class Block { this.builders = { create: new CodeBuilder(), mount: new CodeBuilder(), - update: new CodeBuilder(), intro: new CodeBuilder(), + update: new CodeBuilder(), outro: new CodeBuilder(), - detach: new CodeBuilder(), + unmount: new CodeBuilder(), detachRaw: new CodeBuilder(), destroy: new CodeBuilder() }; @@ -130,7 +130,7 @@ export default class Block { } if ( isToplevel ) { - this.builders.detach.addLine( `${this.generator.helper( 'detachNode' )}( ${name} );` ); + this.builders.unmount.addLine( `${this.generator.helper( 'detachNode' )}( ${name} );` ); } } @@ -200,17 +200,8 @@ export default class Block { this.builders.create.addLine( `${this.autofocus}.focus();` ); } - // minor hack – we need to ensure that any {{{triples}}} are detached - // first, so we append normal detach statements to detachRaw - this.builders.detachRaw.addBlock( this.builders.detach ); - - if ( !this.builders.detachRaw.isEmpty() ) { - this.builders.destroy.addBlock( deindent` - if ( detach ) { - ${this.builders.detachRaw} - } - ` ); - } + // minor hack – we need to ensure that any {{{triples}}} are detached first + this.builders.unmount.addBlockAtStart( this.builders.detachRaw ); const properties = new CodeBuilder(); @@ -290,11 +281,21 @@ export default class Block { } } + if ( this.builders.unmount.isEmpty() ) { + properties.addBlock( `unmount: ${this.generator.helper('noop')},`); + } else { + properties.addBlock( deindent` + unmount: function () { + ${this.builders.unmount} + }, + ` ); + } + if ( this.builders.destroy.isEmpty() ) { properties.addBlock( `destroy: ${this.generator.helper( 'noop' )}` ); } else { properties.addBlock( deindent` - destroy: function ( detach ) { + destroy: function () { ${this.builders.destroy} } ` ); diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index dc112bb4ca..341608d428 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -191,7 +191,8 @@ export default function dom ( parsed: Parsed, source: string, options: CompileOp this.fire( 'destroy' ); ${templateProperties.ondestroy && `${generator.alias( 'template' )}.ondestroy.call( this );`} - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts index 3877e64a7d..106a08a92c 100644 --- a/src/generators/dom/visitors/Component/Component.ts +++ b/src/generators/dom/visitors/Component/Component.ts @@ -56,7 +56,7 @@ export default function visitComponent ( generator: DomGenerator, block: Block, update: new CodeBuilder() }; - const isToplevel = !state.parentNode; + const isTopLevel = !state.parentNode; generator.hasComponents = true; @@ -95,7 +95,7 @@ export default function visitComponent ( generator: DomGenerator, block: Block, } const componentInitProperties = [ - `target: ${!isToplevel ? state.parentNode: 'null'}`, + `target: ${!isTopLevel ? state.parentNode: 'null'}`, `_root: ${block.component}._root` ]; @@ -121,6 +121,10 @@ export default function visitComponent ( generator: DomGenerator, block: Block, ); } + block.builders.destroy.addLine( + `${yieldFragment}.destroy();` + ); + componentInitProperties.push( `_yield: ${yieldFragment}`); } @@ -157,7 +161,7 @@ export default function visitComponent ( generator: DomGenerator, block: Block, }); ` ); - if ( isToplevel ) { + if ( isTopLevel ) { block.builders.mount.addLine( `${name}._fragment.mount( ${block.target}, anchor );` ); } @@ -183,7 +187,8 @@ export default function visitComponent ( generator: DomGenerator, block: Block, ` ); } - block.builders.destroy.addLine( `${name}.destroy( ${isToplevel ? 'detach' : 'false'} );` ); + if ( isTopLevel ) block.builders.unmount.addLine( `${name}._fragment.unmount();` ); + block.builders.destroy.addLine( `${name}.destroy( false );` ); block.builders.create.addBlock( local.create ); if ( !local.update.isEmpty() ) block.builders.update.addBlock( local.update ); diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts index 39657aff4d..4f5eeee27e 100644 --- a/src/generators/dom/visitors/EachBlock.ts +++ b/src/generators/dom/visitors/EachBlock.ts @@ -64,7 +64,8 @@ export default function visitEachBlock ( generator: DomGenerator, block: Block, ${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); ${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} ); } else if ( ${each_block_else} ) { - ${each_block_else}.destroy( true ); + ${each_block_else}.unmount(); + ${each_block_else}.destroy(); ${each_block_else} = null; } ` ); @@ -72,7 +73,8 @@ export default function visitEachBlock ( generator: DomGenerator, block: Block, block.builders.update.addBlock( deindent` if ( ${each_block_value}.length ) { if ( ${each_block_else} ) { - ${each_block_else}.destroy( true ); + ${each_block_else}.unmount(); + ${each_block_else}.destroy(); ${each_block_else} = null; } } else if ( !${each_block_else} ) { @@ -82,11 +84,12 @@ export default function visitEachBlock ( generator: DomGenerator, block: Block, ` ); } + block.builders.unmount.addLine( + `if ( ${each_block_else} ) ${each_block_else}.unmount()` + ); block.builders.destroy.addBlock( deindent` - if ( ${each_block_else} ) { - ${each_block_else}.destroy( ${isToplevel ? 'detach' : 'false'} ); - } + if ( ${each_block_else} ) ${each_block_else}.destroy( false ); ` ); } @@ -154,7 +157,8 @@ function keyed ( generator: DomGenerator, block: Block, state: State, node: Node block.builders.create.addBlock( deindent` function ${fn} ( iteration ) { iteration.outro( function () { - iteration.destroy( true ); + iteration.unmount(); + iteration.destroy(); ${lookup}[iteration.key] = null; }); } @@ -176,7 +180,8 @@ function keyed ( generator: DomGenerator, block: Block, state: State, node: Node const fn = block.getUniqueName( `${each_block}_destroy` ); block.builders.create.addBlock( deindent` function ${fn} ( iteration ) { - iteration.destroy( true ); + iteration.unmount(); + iteration.destroy(); ${lookup}[iteration.key] = null; } ` ); @@ -262,10 +267,20 @@ function keyed ( generator: DomGenerator, block: Block, state: State, node: Node ${head} = ${lookup}[${each_block_value}[0] && ${each_block_value}[0].${node.key}]; ` ); + if ( !state.parentNode ) { + block.builders.unmount.addBlock( deindent` + var ${iteration} = ${head}; + while ( ${iteration} ) { + ${iteration}.unmount(); + ${iteration} = ${iteration}.next; + } + ` ); + } + block.builders.destroy.addBlock( deindent` var ${iteration} = ${head}; while ( ${iteration} ) { - ${iteration}.destroy( ${state.parentNode ? 'false' : 'detach'} ); + ${iteration}.destroy( false ); ${iteration} = ${iteration}.next; } ` ); @@ -334,7 +349,8 @@ function unkeyed ( generator: DomGenerator, block: Block, state: State, node: No function ${outro} ( i ) { if ( ${iterations}[i] ) { ${iterations}[i].outro( function () { - ${iterations}[i].destroy( true ); + ${iterations}[i].unmount(); + ${iterations}[i].destroy(); ${iterations}[i] = null; }); } @@ -343,7 +359,10 @@ function unkeyed ( generator: DomGenerator, block: Block, state: State, node: No for ( ; ${i} < ${iterations}.length; ${i} += 1 ) ${outro}( ${i} ); ` : deindent` - ${generator.helper( 'destroyEach' )}( ${iterations}, true, ${each_block_value}.length ); + for ( ; ${i} < ${iterations}.length; ${i} += 1 ) { + ${iterations}[${i}].unmount(); + ${iterations}[${i}].destroy(); + } ${iterations}.length = ${each_block_value}.length; `; @@ -360,7 +379,13 @@ function unkeyed ( generator: DomGenerator, block: Block, state: State, node: No ` ); } + block.builders.unmount.addBlock( deindent` + for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) { + ${iterations}[${i}].unmount(); + } + ` ); + block.builders.destroy.addBlock( - `${generator.helper( 'destroyEach' )}( ${iterations}, ${state.parentNode ? 'false' : 'detach'}, 0 );` + `${generator.helper( 'destroyEach' )}( ${iterations}, false, 0 );` ); } diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts index 8ee8b7712d..b122634845 100644 --- a/src/generators/dom/visitors/Element/Element.ts +++ b/src/generators/dom/visitors/Element/Element.ts @@ -103,7 +103,7 @@ export default function visitElement ( generator: DomGenerator, block: Block, st if ( !state.parentNode ) { // TODO we eventually need to consider what happens to elements // that belong to the same outgroup as an outroing element... - block.builders.detach.addLine( `${generator.helper( 'detachNode' )}( ${name} );` ); + block.builders.unmount.addLine( `${generator.helper( 'detachNode' )}( ${name} );` ); } if ( node.name !== 'select' ) { diff --git a/src/generators/dom/visitors/IfBlock.ts b/src/generators/dom/visitors/IfBlock.ts index a503c75361..48e7b3b145 100644 --- a/src/generators/dom/visitors/IfBlock.ts +++ b/src/generators/dom/visitors/IfBlock.ts @@ -135,12 +135,14 @@ function simple ( generator: DomGenerator, block: Block, state: State, node: Nod const exit = branch.hasOutroMethod ? deindent` ${name}.outro( function () { - ${name}.destroy( true ); + ${name}.unmount(); + ${name}.destroy(); ${name} = null; }); ` : deindent` - ${name}.destroy( true ); + ${name}.unmount(); + ${name}.destroy(); ${name} = null; `; @@ -152,8 +154,12 @@ function simple ( generator: DomGenerator, block: Block, state: State, node: Nod } ` ); + block.builders.unmount.addLine( + `${if_name}${name}.unmount();` + ); + block.builders.destroy.addLine( - `${if_name}${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );` + `${if_name}${name}.destroy();` ); } @@ -185,7 +191,10 @@ function compound ( generator: DomGenerator, block: Block, state: State, node: N const parentNode = state.parentNode || `${anchor}.parentNode`; const changeBlock = deindent` - ${if_name}${name}.destroy( true ); + ${if_name}{ + ${name}.unmount(); + ${name}.destroy(); + } ${name} = ${current_block_and}${current_block}( ${params}, ${block.component} ); ${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} ); `; @@ -207,7 +216,10 @@ function compound ( generator: DomGenerator, block: Block, state: State, node: N } block.builders.destroy.addLine( - `${if_name}${name}.destroy( ${state.parentNode ? 'false' : 'detach'} );` + `${if_name}{ + ${name}.unmount(); + ${name}.destroy(); + }` ); } @@ -265,7 +277,8 @@ function compoundWithOutros ( generator: DomGenerator, block: Block, state: Stat const destroyOldBlock = deindent` ${name}.outro( function () { - ${if_blocks}[ ${previous_block_index} ].destroy( true ); + ${if_blocks}[ ${previous_block_index} ].unmount(); + ${if_blocks}[ ${previous_block_index} ].destroy(); ${if_blocks}[ ${previous_block_index} ] = null; }); `; @@ -313,7 +326,10 @@ function compoundWithOutros ( generator: DomGenerator, block: Block, state: Stat ` ); } - block.builders.destroy.addLine( - `${if_current_block_index}${if_blocks}[ ${current_block_index} ].destroy( ${state.parentNode ? 'false' : 'detach'} );` - ); + block.builders.destroy.addLine( deindent` + ${if_current_block_index}{ + ${if_blocks}[ ${current_block_index} ].unmount(); + ${if_blocks}[ ${current_block_index} ].destroy(); + } + ` ); } diff --git a/src/generators/dom/visitors/YieldTag.ts b/src/generators/dom/visitors/YieldTag.ts index 1482c5dae5..5a665b041f 100644 --- a/src/generators/dom/visitors/YieldTag.ts +++ b/src/generators/dom/visitors/YieldTag.ts @@ -10,6 +10,6 @@ export default function visitYieldTag ( generator: DomGenerator, block: Block, s ); block.builders.destroy.addLine( - `if ( ${block.component}._yield ) ${block.component}._yield.destroy( detach );` + `if ( ${block.component}._yield ) ${block.component}._yield.unmount();` ); } \ No newline at end of file diff --git a/src/shared/dom.js b/src/shared/dom.js index 52cb0c04de..97c227e7f7 100644 --- a/src/shared/dom.js +++ b/src/shared/dom.js @@ -16,6 +16,7 @@ export function detachBetween ( before, after ) { } } +// TODO this is out of date export function destroyEach ( iterations, detach, start ) { for ( var i = start; i < iterations.length; i += 1 ) { if ( iterations[i] ) iterations[i].destroy( detach ); diff --git a/test/js/index.js b/test/js/index.js index 34b0c5bb69..92bb969d59 100644 --- a/test/js/index.js +++ b/test/js/index.js @@ -34,11 +34,6 @@ describe( 'js', () => { const expected = fs.readFileSync( `${dir}/expected.js`, 'utf-8' ); const expectedBundle = fs.readFileSync( `${dir}/expected-bundle.js`, 'utf-8' ); - assert.equal( - actual.trim().replace( /^\s+$/gm, '' ), - expected.trim().replace( /^\s+$/gm, '' ) - ); - return rollup({ entry: `${dir}/_actual.js`, plugins: [{ @@ -52,6 +47,11 @@ describe( 'js', () => { const actualBundle = bundle.generate({ format: 'es' }).code; fs.writeFileSync( `${dir}/_actual-bundle.js`, actualBundle ); + assert.equal( + actual.trim().replace( /^\s+$/gm, '' ), + expected.trim().replace( /^\s+$/gm, '' ) + ); + assert.equal( actualBundle.trim().replace( /^\s+$/gm, '' ), expectedBundle.trim().replace( /^\s+$/gm, '' ) diff --git a/test/js/samples/collapses-text-around-comments/_actual-bundle.js b/test/js/samples/collapses-text-around-comments/_actual-bundle.js deleted file mode 100644 index 669f13d791..0000000000 --- a/test/js/samples/collapses-text-around-comments/_actual-bundle.js +++ /dev/null @@ -1,213 +0,0 @@ -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function appendNode ( node, target ) { - target.appendChild( node ); -} - -function insertNode ( node, target, anchor ) { - target.insertBefore( node, anchor ); -} - -function detachNode ( node ) { - node.parentNode.removeChild( node ); -} - -function createElement ( name ) { - return document.createElement( name ); -} - -function createText ( data ) { - return document.createTextNode( data ); -} - -function setAttribute ( node, attribute, value ) { - node.setAttribute( attribute, value ); -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -var template = (function () { - return { - data: function () { - return { foo: 42 } - } - }; -}()); - -function add_css () { - var style = createElement( 'style' ); - style.id = "svelte-3842350206-style"; - style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n"; - appendNode( style, document.head ); -} - -function create_main_fragment ( state, component ) { - var text_value; - - var p = createElement( 'p' ); - setAttribute( p, 'svelte-3842350206', '' ); - var text = createText( text_value = state.foo ); - appendNode( text, p ); - - return { - mount: function ( target, anchor ) { - insertNode( p, target, anchor ); - }, - - update: function ( changed, state ) { - if ( text_value !== ( text_value = state.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; - this._yield = options._yield; - - this._torndown = false; - if ( !document.getElementById( "svelte-3842350206-style" ) ) 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 ); - 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; diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js index 669f13d791..b3197f189d 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -1,3 +1,5 @@ +function noop () {} + function assign ( target ) { var k, source, i = 1, len = arguments.length; for ( ; i < len; i++ ) { @@ -161,11 +163,11 @@ function create_main_fragment ( state, component ) { } }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -203,7 +205,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 8145330e3e..3d832bfd50 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -1,4 +1,4 @@ -import { appendNode, assign, createElement, createText, detachNode, dispatchObservers, insertNode, proto, setAttribute } from "svelte/shared.js"; +import { appendNode, assign, createElement, createText, detachNode, dispatchObservers, insertNode, noop, proto, setAttribute } from "svelte/shared.js"; var template = (function () { return { @@ -34,11 +34,11 @@ function create_main_fragment ( state, component ) { } }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -76,7 +76,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/computed-collapsed-if/_actual-bundle.js b/test/js/samples/computed-collapsed-if/_actual-bundle.js deleted file mode 100644 index f3719a18af..0000000000 --- a/test/js/samples/computed-collapsed-if/_actual-bundle.js +++ /dev/null @@ -1,175 +0,0 @@ -function noop () {} - -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -function recompute ( state, newState, oldState, isInitial ) { - if ( isInitial || ( 'x' in newState && differs( state.x, oldState.x ) ) ) { - state.a = newState.a = template.computed.a( state.x ); - state.b = newState.b = template.computed.b( state.x ); - } -} - -var template = (function () { - return { - computed: { - a: x => x * 2, - b: x => x * 3 - } - }; -}()); - -function create_main_fragment ( state, component ) { - - - return { - mount: noop, - - destroy: noop - }; -} - -function SvelteComponent ( options ) { - options = options || {}; - this._state = options.data || {}; - recompute( this._state, this._state, {}, true ); - - this._observers = { - pre: Object.create( null ), - post: Object.create( null ) - }; - - this._handlers = Object.create( null ); - - this._root = options._root || this; - 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 ); - recompute( this._state, newState, oldState, false ); - dispatchObservers( this, this._observers.pre, newState, oldState ); - 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; diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js index f3719a18af..fce7cbda6f 100644 --- a/test/js/samples/computed-collapsed-if/expected-bundle.js +++ b/test/js/samples/computed-collapsed-if/expected-bundle.js @@ -127,6 +127,8 @@ function create_main_fragment ( state, component ) { return { mount: noop, + unmount: noop, + destroy: noop }; } @@ -165,7 +167,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index df9295d28b..f0475aeecf 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/test/js/samples/computed-collapsed-if/expected.js @@ -22,6 +22,8 @@ function create_main_fragment ( state, component ) { return { mount: noop, + unmount: noop, + destroy: noop }; } @@ -60,7 +62,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/each-block-changed-check/_actual-bundle.js b/test/js/samples/each-block-changed-check/_actual-bundle.js deleted file mode 100644 index 8af4cd0f80..0000000000 --- a/test/js/samples/each-block-changed-check/_actual-bundle.js +++ /dev/null @@ -1,298 +0,0 @@ -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function appendNode ( node, target ) { - target.appendChild( node ); -} - -function insertNode ( node, target, anchor ) { - target.insertBefore( node, anchor ); -} - -function detachNode ( node ) { - node.parentNode.removeChild( node ); -} - -function detachBetween ( before, after ) { - while ( before.nextSibling && before.nextSibling !== after ) { - before.parentNode.removeChild( before.nextSibling ); - } -} - -function destroyEach ( iterations, detach, start ) { - for ( var i = start; i < iterations.length; i += 1 ) { - if ( iterations[i] ) iterations[i].destroy( detach ); - } -} - -function createElement ( name ) { - return document.createElement( name ); -} - -function createText ( data ) { - return document.createTextNode( data ); -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -function create_main_fragment ( state, component ) { - var text_1_value; - - var each_block_value = state.comments; - - var each_block_iterations = []; - - for ( var i = 0; i < each_block_value.length; i += 1 ) { - each_block_iterations[i] = create_each_block( state, each_block_value, each_block_value[i], i, component ); - } - - var text = createText( "\n\n" ); - var p = createElement( 'p' ); - var text_1 = createText( text_1_value = state.foo ); - appendNode( text_1, p ); - - return { - mount: function ( target, anchor ) { - for ( var i = 0; i < each_block_iterations.length; i += 1 ) { - each_block_iterations[i].mount( target, anchor ); - } - - insertNode( text, target, anchor ); - insertNode( p, target, anchor ); - }, - - update: function ( changed, state ) { - var each_block_value = state.comments; - - if ( 'comments' in changed || 'elapsed' in changed || 'time' in changed ) { - for ( var i = 0; i < each_block_value.length; i += 1 ) { - if ( each_block_iterations[i] ) { - each_block_iterations[i].update( changed, state, each_block_value, each_block_value[i], i ); - } else { - each_block_iterations[i] = create_each_block( state, each_block_value, each_block_value[i], i, component ); - each_block_iterations[i].mount( text.parentNode, text ); - } - } - - destroyEach( each_block_iterations, true, each_block_value.length ); - each_block_iterations.length = each_block_value.length; - } - - if ( text_1_value !== ( text_1_value = state.foo ) ) { - text_1.data = text_1_value; - } - }, - - destroy: function ( detach ) { - destroyEach( each_block_iterations, detach, 0 ); - - if ( detach ) { - detachNode( text ); - detachNode( p ); - } - } - }; -} - -function create_each_block ( state, each_block_value, comment, i, component ) { - var text_value, text_2_value, text_4_value; - - var div = createElement( 'div' ); - div.className = "comment"; - var strong = createElement( 'strong' ); - appendNode( strong, div ); - var text = createText( text_value = i ); - appendNode( text, strong ); - appendNode( createText( "\n\n\t\t" ), div ); - var span = createElement( 'span' ); - appendNode( span, div ); - span.className = "meta"; - var text_2 = createText( text_2_value = comment.author ); - appendNode( text_2, span ); - appendNode( createText( " wrote " ), span ); - var text_4 = createText( text_4_value = state.elapsed(comment.time, state.time) ); - appendNode( text_4, span ); - appendNode( createText( " ago:" ), span ); - appendNode( createText( "\n\n\t\t" ), div ); - var raw_before = createElement( 'noscript' ); - appendNode( raw_before, div ); - var raw_after = createElement( 'noscript' ); - appendNode( raw_after, div ); - var raw_value = comment.html; - raw_before.insertAdjacentHTML( 'afterend', raw_value ); - - return { - mount: function ( target, anchor ) { - insertNode( div, target, anchor ); - }, - - update: function ( changed, state, each_block_value, comment, i ) { - if ( text_value !== ( text_value = i ) ) { - text.data = text_value; - } - - if ( text_2_value !== ( text_2_value = comment.author ) ) { - text_2.data = text_2_value; - } - - if ( text_4_value !== ( text_4_value = state.elapsed(comment.time, state.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 ); - } - }, - - destroy: function ( detach ) { - if ( detach ) { - detachBetween( raw_before, raw_after ); - - detachNode( div ); - } - } - }; -} - -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; - 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 ); - 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; diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js index 8af4cd0f80..9a1b10e93f 100644 --- a/test/js/samples/each-block-changed-check/expected-bundle.js +++ b/test/js/samples/each-block-changed-check/expected-bundle.js @@ -1,3 +1,5 @@ +function noop () {} + function assign ( target ) { var k, source, i = 1, len = arguments.length; for ( ; i < len; i++ ) { @@ -26,6 +28,7 @@ function detachBetween ( before, after ) { } } +// TODO this is out of date function destroyEach ( iterations, detach, start ) { for ( var i = start; i < iterations.length; i += 1 ) { if ( iterations[i] ) iterations[i].destroy( detach ); @@ -174,7 +177,10 @@ function create_main_fragment ( state, component ) { } } - destroyEach( each_block_iterations, true, each_block_value.length ); + for ( ; i < each_block_iterations.length; i += 1 ) { + each_block_iterations[i].unmount(); + each_block_iterations[i].destroy(); + } each_block_iterations.length = each_block_value.length; } @@ -183,13 +189,17 @@ function create_main_fragment ( state, component ) { } }, - destroy: function ( detach ) { - destroyEach( each_block_iterations, detach, 0 ); - - if ( detach ) { - detachNode( text ); - detachNode( p ); + unmount: function () { + for ( var i = 0; i < each_block_iterations.length; i += 1 ) { + each_block_iterations[i].unmount(); } + + detachNode( text ); + detachNode( p ); + }, + + destroy: function () { + destroyEach( each_block_iterations, false, 0 ); } }; } @@ -245,13 +255,13 @@ function create_each_block ( state, each_block_value, comment, i, component ) { } }, - destroy: function ( detach ) { - if ( detach ) { - detachBetween( raw_before, raw_after ); + unmount: function () { + detachBetween( raw_before, raw_after ); - detachNode( div ); - } - } + detachNode( div ); + }, + + destroy: noop }; } @@ -288,7 +298,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 96624d88db..3859406832 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -1,4 +1,4 @@ -import { appendNode, assign, createElement, createText, destroyEach, detachBetween, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js"; +import { appendNode, assign, createElement, createText, destroyEach, detachBetween, detachNode, dispatchObservers, insertNode, noop, proto } from "svelte/shared.js"; function create_main_fragment ( state, component ) { var text_1_value; @@ -39,7 +39,10 @@ function create_main_fragment ( state, component ) { } } - destroyEach( each_block_iterations, true, each_block_value.length ); + for ( ; i < each_block_iterations.length; i += 1 ) { + each_block_iterations[i].unmount(); + each_block_iterations[i].destroy(); + } each_block_iterations.length = each_block_value.length; } @@ -48,13 +51,17 @@ function create_main_fragment ( state, component ) { } }, - destroy: function ( detach ) { - destroyEach( each_block_iterations, detach, 0 ); - - if ( detach ) { - detachNode( text ); - detachNode( p ); + unmount: function () { + for ( var i = 0; i < each_block_iterations.length; i += 1 ) { + each_block_iterations[i].unmount(); } + + detachNode( text ); + detachNode( p ); + }, + + destroy: function () { + destroyEach( each_block_iterations, false, 0 ); } }; } @@ -110,13 +117,13 @@ function create_each_block ( state, each_block_value, comment, i, component ) { } }, - destroy: function ( detach ) { - if ( detach ) { - detachBetween( raw_before, raw_after ); + unmount: function () { + detachBetween( raw_before, raw_after ); - detachNode( div ); - } - } + detachNode( div ); + }, + + destroy: noop }; } @@ -153,7 +160,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/event-handlers-custom/_actual-bundle.js b/test/js/samples/event-handlers-custom/_actual-bundle.js deleted file mode 100644 index 3680d44d25..0000000000 --- a/test/js/samples/event-handlers-custom/_actual-bundle.js +++ /dev/null @@ -1,205 +0,0 @@ -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function appendNode ( node, target ) { - target.appendChild( node ); -} - -function insertNode ( node, target, anchor ) { - target.insertBefore( node, anchor ); -} - -function detachNode ( node ) { - node.parentNode.removeChild( node ); -} - -function createElement ( name ) { - return document.createElement( name ); -} - -function createText ( data ) { - return document.createTextNode( data ); -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -var template = (function () { - return { - methods: { - foo ( bar ) { - console.log( bar ); - } - }, - events: { - foo ( node, callback ) { - // code goes here - } - } - }; -}()); - -function create_main_fragment ( state, component ) { - var button = createElement( 'button' ); - - var foo_handler = template.events.foo.call( component, button, function ( event ) { - var state = component.get(); - component.foo( state.bar ); - }); - - appendNode( createText( "foo" ), button ); - - return { - mount: function ( target, anchor ) { - insertNode( button, target, anchor ); - }, - - destroy: function ( detach ) { - foo_handler.teardown(); - - if ( detach ) { - detachNode( button ); - } - } - }; -} - -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; - 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, template.methods, proto ); - -SvelteComponent.prototype._set = function _set ( newState ) { - var oldState = this._state; - this._state = assign( {}, oldState, newState ); - dispatchObservers( this, this._observers.pre, newState, oldState ); - 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; diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js index 3680d44d25..804c128f60 100644 --- a/test/js/samples/event-handlers-custom/expected-bundle.js +++ b/test/js/samples/event-handlers-custom/expected-bundle.js @@ -153,12 +153,12 @@ function create_main_fragment ( state, component ) { insertNode( button, target, anchor ); }, - destroy: function ( detach ) { - foo_handler.teardown(); + unmount: function () { + detachNode( button ); + }, - if ( detach ) { - detachNode( button ); - } + destroy: function () { + foo_handler.teardown(); } }; } @@ -195,7 +195,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js index ed40aae9df..c57bcd2870 100644 --- a/test/js/samples/event-handlers-custom/expected.js +++ b/test/js/samples/event-handlers-custom/expected.js @@ -30,12 +30,12 @@ function create_main_fragment ( state, component ) { insertNode( button, target, anchor ); }, - destroy: function ( detach ) { - foo_handler.teardown(); + unmount: function () { + detachNode( button ); + }, - if ( detach ) { - detachNode( button ); - } + destroy: function () { + foo_handler.teardown(); } }; } @@ -72,7 +72,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/if-block-no-update/_actual-bundle.js b/test/js/samples/if-block-no-update/_actual-bundle.js deleted file mode 100644 index 781adc2850..0000000000 --- a/test/js/samples/if-block-no-update/_actual-bundle.js +++ /dev/null @@ -1,239 +0,0 @@ -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function appendNode ( node, target ) { - target.appendChild( node ); -} - -function insertNode ( node, target, anchor ) { - target.insertBefore( node, anchor ); -} - -function detachNode ( node ) { - node.parentNode.removeChild( node ); -} - -function createElement ( name ) { - return document.createElement( name ); -} - -function createText ( data ) { - return document.createTextNode( data ); -} - -function createComment () { - return document.createComment( '' ); -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -function create_main_fragment ( state, component ) { - function get_block ( state ) { - if ( state.foo ) return create_if_block; - return create_if_block_1; - } - - var current_block = get_block( state ); - var if_block = current_block( state, component ); - - var if_block_anchor = createComment(); - - return { - mount: function ( target, anchor ) { - if_block.mount( target, anchor ); - insertNode( if_block_anchor, target, anchor ); - }, - - update: function ( changed, state ) { - if ( current_block !== ( current_block = get_block( state ) ) ) { - if_block.destroy( true ); - if_block = current_block( state, component ); - if_block.mount( if_block_anchor.parentNode, if_block_anchor ); - } - }, - - destroy: function ( detach ) { - if_block.destroy( detach ); - - if ( detach ) { - detachNode( if_block_anchor ); - } - } - }; -} - -function create_if_block ( state, 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 create_if_block_1 ( state, component ) { - var p = createElement( 'p' ); - appendNode( createText( "not 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; - 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 ); - 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; diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js index 781adc2850..d03f5b63fd 100644 --- a/test/js/samples/if-block-no-update/expected-bundle.js +++ b/test/js/samples/if-block-no-update/expected-bundle.js @@ -1,3 +1,5 @@ +function noop () {} + function assign ( target ) { var k, source, i = 1, len = arguments.length; for ( ; i < len; i++ ) { @@ -146,18 +148,24 @@ function create_main_fragment ( state, component ) { update: function ( changed, state ) { if ( current_block !== ( current_block = get_block( state ) ) ) { - if_block.destroy( true ); + { + if_block.unmount(); + if_block.destroy(); + } if_block = current_block( state, component ); if_block.mount( if_block_anchor.parentNode, if_block_anchor ); } }, - destroy: function ( detach ) { - if_block.destroy( detach ); + unmount: function () { + detachNode( if_block_anchor ); + }, - if ( detach ) { - detachNode( if_block_anchor ); - } + destroy: function () { + { + if_block.unmount(); + if_block.destroy(); + } } }; } @@ -171,11 +179,11 @@ function create_if_block ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -188,11 +196,11 @@ function create_if_block_1 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -229,7 +237,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index 7010121fb5..a4a22ba105 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -1,4 +1,4 @@ -import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js"; +import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, noop, proto } from "svelte/shared.js"; function create_main_fragment ( state, component ) { function get_block ( state ) { @@ -19,18 +19,24 @@ function create_main_fragment ( state, component ) { update: function ( changed, state ) { if ( current_block !== ( current_block = get_block( state ) ) ) { - if_block.destroy( true ); + { + if_block.unmount(); + if_block.destroy(); + } if_block = current_block( state, component ); if_block.mount( if_block_anchor.parentNode, if_block_anchor ); } }, - destroy: function ( detach ) { - if_block.destroy( detach ); + unmount: function () { + detachNode( if_block_anchor ); + }, - if ( detach ) { - detachNode( if_block_anchor ); - } + destroy: function () { + { + if_block.unmount(); + if_block.destroy(); + } } }; } @@ -44,11 +50,11 @@ function create_if_block ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -61,11 +67,11 @@ function create_if_block_1 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -102,7 +108,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/if-block-simple/_actual-bundle.js b/test/js/samples/if-block-simple/_actual-bundle.js deleted file mode 100644 index 67abd439bb..0000000000 --- a/test/js/samples/if-block-simple/_actual-bundle.js +++ /dev/null @@ -1,220 +0,0 @@ -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function appendNode ( node, target ) { - target.appendChild( node ); -} - -function insertNode ( node, target, anchor ) { - target.insertBefore( node, anchor ); -} - -function detachNode ( node ) { - node.parentNode.removeChild( node ); -} - -function createElement ( name ) { - return document.createElement( name ); -} - -function createText ( data ) { - return document.createTextNode( data ); -} - -function createComment () { - return document.createComment( '' ); -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -function create_main_fragment ( state, component ) { - var if_block = (state.foo) && create_if_block( state, component ); - - var if_block_anchor = createComment(); - - return { - mount: function ( target, anchor ) { - if ( if_block ) if_block.mount( target, anchor ); - insertNode( if_block_anchor, target, anchor ); - }, - - update: function ( changed, state ) { - if ( state.foo ) { - if ( !if_block ) { - if_block = create_if_block( state, 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 ( state, 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; - 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 ); - 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; diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js index 67abd439bb..730f56c546 100644 --- a/test/js/samples/if-block-simple/expected-bundle.js +++ b/test/js/samples/if-block-simple/expected-bundle.js @@ -1,3 +1,5 @@ +function noop () {} + function assign ( target ) { var k, source, i = 1, len = arguments.length; for ( ; i < len; i++ ) { @@ -145,17 +147,19 @@ function create_main_fragment ( state, component ) { if_block.mount( if_block_anchor.parentNode, if_block_anchor ); } } else if ( if_block ) { - if_block.destroy( true ); + if_block.unmount(); + if_block.destroy(); if_block = null; } }, - destroy: function ( detach ) { - if ( if_block ) if_block.destroy( detach ); + unmount: function () { + if ( if_block ) if_block.unmount(); + detachNode( if_block_anchor ); + }, - if ( detach ) { - detachNode( if_block_anchor ); - } + destroy: function () { + if ( if_block ) if_block.destroy(); } }; } @@ -169,11 +173,11 @@ function create_if_block ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -210,7 +214,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index b1fb14fa18..8f87d57802 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -1,4 +1,4 @@ -import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js"; +import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, noop, proto } from "svelte/shared.js"; function create_main_fragment ( state, component ) { var if_block = (state.foo) && create_if_block( state, component ); @@ -18,17 +18,19 @@ function create_main_fragment ( state, component ) { if_block.mount( if_block_anchor.parentNode, if_block_anchor ); } } else if ( if_block ) { - if_block.destroy( true ); + if_block.unmount(); + if_block.destroy(); if_block = null; } }, - destroy: function ( detach ) { - if ( if_block ) if_block.destroy( detach ); + unmount: function () { + if ( if_block ) if_block.unmount(); + detachNode( if_block_anchor ); + }, - if ( detach ) { - detachNode( if_block_anchor ); - } + destroy: function () { + if ( if_block ) if_block.destroy(); } }; } @@ -42,11 +44,11 @@ function create_if_block ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -83,7 +85,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/non-imported-component/_actual-bundle.js b/test/js/samples/non-imported-component/_actual-bundle.js deleted file mode 100644 index b0995e4498..0000000000 --- a/test/js/samples/non-imported-component/_actual-bundle.js +++ /dev/null @@ -1,201 +0,0 @@ -import Imported from 'Imported.html'; - -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function insertNode ( node, target, anchor ) { - target.insertBefore( node, anchor ); -} - -function detachNode ( node ) { - node.parentNode.removeChild( node ); -} - -function createText ( data ) { - return document.createTextNode( data ); -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -var template = (function () { - return { - components: { - NonImported - } - }; -}()); - -function create_main_fragment ( state, component ) { - var imported = new Imported({ - target: null, - _root: component._root - }); - - var text = createText( "\n" ); - - var nonimported = new template.components.NonImported({ - target: null, - _root: component._root - }); - - return { - mount: function ( target, anchor ) { - imported._fragment.mount( target, anchor ); - insertNode( text, target, anchor ); - nonimported._fragment.mount( target, anchor ); - }, - - destroy: function ( detach ) { - imported.destroy( detach ); - nonimported.destroy( detach ); - - if ( detach ) { - detachNode( text ); - } - } - }; -} - -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; - this._yield = options._yield; - - this._torndown = false; - this._renderHooks = []; - - this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) this._fragment.mount( options.target, null ); - this._flush(); -} - -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 ); - dispatchObservers( this, this._observers.post, newState, oldState ); - this._flush(); -}; - -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; diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js index b0995e4498..f66a1e1421 100644 --- a/test/js/samples/non-imported-component/expected-bundle.js +++ b/test/js/samples/non-imported-component/expected-bundle.js @@ -145,13 +145,15 @@ function create_main_fragment ( state, component ) { nonimported._fragment.mount( target, anchor ); }, - destroy: function ( detach ) { - imported.destroy( detach ); - nonimported.destroy( detach ); + unmount: function () { + imported._fragment.unmount(); + detachNode( text ); + nonimported._fragment.unmount(); + }, - if ( detach ) { - detachNode( text ); - } + destroy: function () { + imported.destroy( false ); + nonimported.destroy( false ); } }; } @@ -191,7 +193,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index 602b33086e..52a943887b 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -30,13 +30,15 @@ function create_main_fragment ( state, component ) { nonimported._fragment.mount( target, anchor ); }, - destroy: function ( detach ) { - imported.destroy( detach ); - nonimported.destroy( detach ); + unmount: function () { + imported._fragment.unmount(); + detachNode( text ); + nonimported._fragment.unmount(); + }, - if ( detach ) { - detachNode( text ); - } + destroy: function () { + imported.destroy( false ); + nonimported.destroy( false ); } }; } @@ -76,7 +78,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/onrender-onteardown-rewritten/_actual-bundle.js b/test/js/samples/onrender-onteardown-rewritten/_actual-bundle.js deleted file mode 100644 index 4c035dc8fa..0000000000 --- a/test/js/samples/onrender-onteardown-rewritten/_actual-bundle.js +++ /dev/null @@ -1,172 +0,0 @@ -function noop () {} - -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -var template = (function () { - return { - // this test should be removed in v2 - oncreate () {}, - ondestroy () {} - }; -}()); - -function create_main_fragment ( state, component ) { - - - return { - mount: noop, - - destroy: noop - }; -} - -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; - this._yield = options._yield; - - this._torndown = false; - - this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) this._fragment.mount( options.target, null ); - - if ( options._root ) { - options._root._renderHooks.push( template.oncreate.bind( this ) ); - } else { - template.oncreate.call( this ); - } -} - -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 ); - dispatchObservers( this, this._observers.post, newState, oldState ); -}; - -SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { - this.fire( 'destroy' ); - template.ondestroy.call( this ); - - this._fragment.destroy( detach !== false ); - this._fragment = null; - - this._state = {}; - this._torndown = true; -}; - -export default SvelteComponent; diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js index 4c035dc8fa..88472296ad 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js @@ -119,6 +119,8 @@ function create_main_fragment ( state, component ) { return { mount: noop, + unmount: noop, + destroy: noop }; } @@ -162,7 +164,8 @@ SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = functio this.fire( 'destroy' ); template.ondestroy.call( this ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/onrender-onteardown-rewritten/expected.js b/test/js/samples/onrender-onteardown-rewritten/expected.js index 8e8f81e692..f0b4cbd24b 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected.js @@ -14,6 +14,8 @@ function create_main_fragment ( state, component ) { return { mount: noop, + unmount: noop, + destroy: noop }; } @@ -57,7 +59,8 @@ SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = functio this.fire( 'destroy' ); template.ondestroy.call( this ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/use-elements-as-anchors/_actual-bundle.js b/test/js/samples/use-elements-as-anchors/_actual-bundle.js deleted file mode 100644 index 5277d03f53..0000000000 --- a/test/js/samples/use-elements-as-anchors/_actual-bundle.js +++ /dev/null @@ -1,371 +0,0 @@ -function assign ( target ) { - var k, source, i = 1, len = arguments.length; - for ( ; i < len; i++ ) { - source = arguments[i]; - for ( k in source ) target[k] = source[k]; - } - - return target; -} - -function appendNode ( node, target ) { - target.appendChild( node ); -} - -function insertNode ( node, target, anchor ) { - target.insertBefore( node, anchor ); -} - -function detachNode ( node ) { - node.parentNode.removeChild( node ); -} - -function createElement ( name ) { - return document.createElement( name ); -} - -function createText ( data ) { - return document.createTextNode( data ); -} - -function createComment () { - return document.createComment( '' ); -} - -function differs ( a, b ) { - return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); -} - -function dispatchObservers ( component, group, newState, oldState ) { - for ( var key in group ) { - if ( !( key in newState ) ) continue; - - var newValue = newState[ key ]; - var oldValue = oldState[ key ]; - - if ( differs( newValue, oldValue ) ) { - var callbacks = group[ key ]; - if ( !callbacks ) continue; - - for ( var i = 0; i < callbacks.length; i += 1 ) { - var callback = callbacks[i]; - if ( callback.__calling ) continue; - - callback.__calling = true; - callback.call( component, newValue, oldValue ); - callback.__calling = false; - } - } - } -} - -function get ( key ) { - return key ? this._state[ key ] : this._state; -} - -function fire ( eventName, data ) { - var handlers = eventName in this._handlers && this._handlers[ eventName ].slice(); - if ( !handlers ) return; - - for ( var i = 0; i < handlers.length; i += 1 ) { - handlers[i].call( this, data ); - } -} - -function observe ( key, callback, options ) { - var group = ( options && options.defer ) ? this._observers.post : this._observers.pre; - - ( group[ key ] || ( group[ key ] = [] ) ).push( callback ); - - if ( !options || options.init !== false ) { - callback.__calling = true; - callback.call( this, this._state[ key ] ); - callback.__calling = false; - } - - return { - cancel: function () { - var index = group[ key ].indexOf( callback ); - if ( ~index ) group[ key ].splice( index, 1 ); - } - }; -} - -function on ( eventName, handler ) { - if ( eventName === 'teardown' ) return this.on( 'destroy', handler ); - - var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] ); - handlers.push( handler ); - - return { - cancel: function () { - var index = handlers.indexOf( handler ); - if ( ~index ) handlers.splice( index, 1 ); - } - }; -} - -function set ( newState ) { - this._set( assign( {}, newState ) ); - this._root._flush(); -} - -function _flush () { - if ( !this._renderHooks ) return; - - while ( this._renderHooks.length ) { - this._renderHooks.pop()(); - } -} - -var proto = { - get: get, - fire: fire, - observe: observe, - on: on, - set: set, - _flush: _flush -}; - -function create_main_fragment ( state, component ) { - var div = createElement( 'div' ); - - var if_block = (state.a) && create_if_block( state, component ); - - if ( if_block ) if_block.mount( div, null ); - var text = createText( "\n\n\t" ); - appendNode( text, div ); - var p = createElement( 'p' ); - appendNode( p, div ); - appendNode( createText( "this can be used as an anchor" ), p ); - appendNode( createText( "\n\n\t" ), div ); - - var if_block_1 = (state.b) && create_if_block_1( state, component ); - - if ( if_block_1 ) if_block_1.mount( div, null ); - var text_3 = createText( "\n\n\t" ); - appendNode( text_3, div ); - - var if_block_2 = (state.c) && create_if_block_2( state, component ); - - if ( if_block_2 ) if_block_2.mount( div, null ); - var text_4 = createText( "\n\n\t" ); - appendNode( text_4, div ); - var p_1 = createElement( 'p' ); - appendNode( p_1, div ); - appendNode( createText( "so can this" ), p_1 ); - appendNode( createText( "\n\n\t" ), div ); - - var if_block_3 = (state.d) && create_if_block_3( state, component ); - - if ( if_block_3 ) if_block_3.mount( div, null ); - var text_7 = createText( "\n\n\t" ); - appendNode( text_7, div ); - var text_8 = createText( "\n\n" ); - - var if_block_4 = (state.e) && create_if_block_4( state, component ); - - var if_block_4_anchor = createComment(); - - return { - mount: function ( target, anchor ) { - insertNode( div, target, anchor ); - insertNode( text_8, target, anchor ); - if ( if_block_4 ) if_block_4.mount( target, anchor ); - insertNode( if_block_4_anchor, target, anchor ); - }, - - update: function ( changed, state ) { - if ( state.a ) { - if ( !if_block ) { - if_block = create_if_block( state, component ); - if_block.mount( div, text ); - } - } else if ( if_block ) { - if_block.destroy( true ); - if_block = null; - } - - if ( state.b ) { - if ( !if_block_1 ) { - if_block_1 = create_if_block_1( state, component ); - if_block_1.mount( div, text_3 ); - } - } else if ( if_block_1 ) { - if_block_1.destroy( true ); - if_block_1 = null; - } - - if ( state.c ) { - if ( !if_block_2 ) { - if_block_2 = create_if_block_2( state, component ); - if_block_2.mount( div, text_4 ); - } - } else if ( if_block_2 ) { - if_block_2.destroy( true ); - if_block_2 = null; - } - - if ( state.d ) { - if ( !if_block_3 ) { - if_block_3 = create_if_block_3( state, component ); - if_block_3.mount( div, text_7 ); - } - } else if ( if_block_3 ) { - if_block_3.destroy( true ); - if_block_3 = null; - } - - if ( state.e ) { - if ( !if_block_4 ) { - if_block_4 = create_if_block_4( state, component ); - if_block_4.mount( if_block_4_anchor.parentNode, if_block_4_anchor ); - } - } else if ( if_block_4 ) { - if_block_4.destroy( true ); - if_block_4 = null; - } - }, - - destroy: function ( detach ) { - if ( if_block ) if_block.destroy( false ); - if ( if_block_1 ) if_block_1.destroy( false ); - if ( if_block_2 ) if_block_2.destroy( false ); - if ( if_block_3 ) if_block_3.destroy( false ); - if ( if_block_4 ) if_block_4.destroy( detach ); - - if ( detach ) { - detachNode( div ); - detachNode( text_8 ); - detachNode( if_block_4_anchor ); - } - } - }; -} - -function create_if_block ( state, component ) { - var p = createElement( 'p' ); - appendNode( createText( "a" ), p ); - - return { - mount: function ( target, anchor ) { - insertNode( p, target, anchor ); - }, - - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } - }; -} - -function create_if_block_1 ( state, component ) { - var p = createElement( 'p' ); - appendNode( createText( "b" ), p ); - - return { - mount: function ( target, anchor ) { - insertNode( p, target, anchor ); - }, - - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } - }; -} - -function create_if_block_2 ( state, component ) { - var p = createElement( 'p' ); - appendNode( createText( "c" ), p ); - - return { - mount: function ( target, anchor ) { - insertNode( p, target, anchor ); - }, - - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } - }; -} - -function create_if_block_3 ( state, component ) { - var p = createElement( 'p' ); - appendNode( createText( "d" ), p ); - - return { - mount: function ( target, anchor ) { - insertNode( p, target, anchor ); - }, - - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } - }; -} - -function create_if_block_4 ( state, component ) { - var p = createElement( 'p' ); - appendNode( createText( "e" ), 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; - 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 ); - 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; diff --git a/test/js/samples/use-elements-as-anchors/expected-bundle.js b/test/js/samples/use-elements-as-anchors/expected-bundle.js index 5277d03f53..d39c029eed 100644 --- a/test/js/samples/use-elements-as-anchors/expected-bundle.js +++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js @@ -1,3 +1,5 @@ +function noop () {} + function assign ( target ) { var k, source, i = 1, len = arguments.length; for ( ; i < len; i++ ) { @@ -182,7 +184,8 @@ function create_main_fragment ( state, component ) { if_block.mount( div, text ); } } else if ( if_block ) { - if_block.destroy( true ); + if_block.unmount(); + if_block.destroy(); if_block = null; } @@ -192,7 +195,8 @@ function create_main_fragment ( state, component ) { if_block_1.mount( div, text_3 ); } } else if ( if_block_1 ) { - if_block_1.destroy( true ); + if_block_1.unmount(); + if_block_1.destroy(); if_block_1 = null; } @@ -202,7 +206,8 @@ function create_main_fragment ( state, component ) { if_block_2.mount( div, text_4 ); } } else if ( if_block_2 ) { - if_block_2.destroy( true ); + if_block_2.unmount(); + if_block_2.destroy(); if_block_2 = null; } @@ -212,7 +217,8 @@ function create_main_fragment ( state, component ) { if_block_3.mount( div, text_7 ); } } else if ( if_block_3 ) { - if_block_3.destroy( true ); + if_block_3.unmount(); + if_block_3.destroy(); if_block_3 = null; } @@ -222,23 +228,29 @@ function create_main_fragment ( state, component ) { if_block_4.mount( if_block_4_anchor.parentNode, if_block_4_anchor ); } } else if ( if_block_4 ) { - if_block_4.destroy( true ); + if_block_4.unmount(); + if_block_4.destroy(); if_block_4 = null; } }, - destroy: function ( detach ) { - if ( if_block ) if_block.destroy( false ); - if ( if_block_1 ) if_block_1.destroy( false ); - if ( if_block_2 ) if_block_2.destroy( false ); - if ( if_block_3 ) if_block_3.destroy( false ); - if ( if_block_4 ) if_block_4.destroy( detach ); - - if ( detach ) { - detachNode( div ); - detachNode( text_8 ); - detachNode( if_block_4_anchor ); - } + unmount: function () { + detachNode( div ); + if ( if_block ) if_block.unmount(); + if ( if_block_1 ) if_block_1.unmount(); + if ( if_block_2 ) if_block_2.unmount(); + if ( if_block_3 ) if_block_3.unmount(); + detachNode( text_8 ); + if ( if_block_4 ) if_block_4.unmount(); + detachNode( if_block_4_anchor ); + }, + + destroy: function () { + if ( if_block ) if_block.destroy(); + if ( if_block_1 ) if_block_1.destroy(); + if ( if_block_2 ) if_block_2.destroy(); + if ( if_block_3 ) if_block_3.destroy(); + if ( if_block_4 ) if_block_4.destroy(); } }; } @@ -252,11 +264,11 @@ function create_if_block ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -269,11 +281,11 @@ function create_if_block_1 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -286,11 +298,11 @@ function create_if_block_2 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -303,11 +315,11 @@ function create_if_block_3 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -320,11 +332,11 @@ function create_if_block_4 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -361,7 +373,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index 0073faafd0..2c1d8b18c5 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -1,4 +1,4 @@ -import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, proto } from "svelte/shared.js"; +import { appendNode, assign, createComment, createElement, createText, detachNode, dispatchObservers, insertNode, noop, proto } from "svelte/shared.js"; function create_main_fragment ( state, component ) { var div = createElement( 'div' ); @@ -55,7 +55,8 @@ function create_main_fragment ( state, component ) { if_block.mount( div, text ); } } else if ( if_block ) { - if_block.destroy( true ); + if_block.unmount(); + if_block.destroy(); if_block = null; } @@ -65,7 +66,8 @@ function create_main_fragment ( state, component ) { if_block_1.mount( div, text_3 ); } } else if ( if_block_1 ) { - if_block_1.destroy( true ); + if_block_1.unmount(); + if_block_1.destroy(); if_block_1 = null; } @@ -75,7 +77,8 @@ function create_main_fragment ( state, component ) { if_block_2.mount( div, text_4 ); } } else if ( if_block_2 ) { - if_block_2.destroy( true ); + if_block_2.unmount(); + if_block_2.destroy(); if_block_2 = null; } @@ -85,7 +88,8 @@ function create_main_fragment ( state, component ) { if_block_3.mount( div, text_7 ); } } else if ( if_block_3 ) { - if_block_3.destroy( true ); + if_block_3.unmount(); + if_block_3.destroy(); if_block_3 = null; } @@ -95,23 +99,29 @@ function create_main_fragment ( state, component ) { if_block_4.mount( if_block_4_anchor.parentNode, if_block_4_anchor ); } } else if ( if_block_4 ) { - if_block_4.destroy( true ); + if_block_4.unmount(); + if_block_4.destroy(); if_block_4 = null; } }, - destroy: function ( detach ) { - if ( if_block ) if_block.destroy( false ); - if ( if_block_1 ) if_block_1.destroy( false ); - if ( if_block_2 ) if_block_2.destroy( false ); - if ( if_block_3 ) if_block_3.destroy( false ); - if ( if_block_4 ) if_block_4.destroy( detach ); - - if ( detach ) { - detachNode( div ); - detachNode( text_8 ); - detachNode( if_block_4_anchor ); - } + unmount: function () { + detachNode( div ); + if ( if_block ) if_block.unmount(); + if ( if_block_1 ) if_block_1.unmount(); + if ( if_block_2 ) if_block_2.unmount(); + if ( if_block_3 ) if_block_3.unmount(); + detachNode( text_8 ); + if ( if_block_4 ) if_block_4.unmount(); + detachNode( if_block_4_anchor ); + }, + + destroy: function () { + if ( if_block ) if_block.destroy(); + if ( if_block_1 ) if_block_1.destroy(); + if ( if_block_2 ) if_block_2.destroy(); + if ( if_block_3 ) if_block_3.destroy(); + if ( if_block_4 ) if_block_4.destroy(); } }; } @@ -125,11 +135,11 @@ function create_if_block ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -142,11 +152,11 @@ function create_if_block_1 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -159,11 +169,11 @@ function create_if_block_2 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -176,11 +186,11 @@ function create_if_block_3 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -193,11 +203,11 @@ function create_if_block_4 ( state, component ) { insertNode( p, target, anchor ); }, - destroy: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } + unmount: function () { + detachNode( p ); + }, + + destroy: noop }; } @@ -234,7 +244,8 @@ SvelteComponent.prototype._set = function _set ( newState ) { SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); - this._fragment.destroy( detach !== false ); + if ( detach !== false ) this._fragment.unmount(); + this._fragment.destroy(); this._fragment = null; this._state = {}; diff --git a/test/runtime/samples/component-yield-nested-if/Inner.html b/test/runtime/samples/component-yield-nested-if/Inner.html new file mode 100644 index 0000000000..d87e45af56 --- /dev/null +++ b/test/runtime/samples/component-yield-nested-if/Inner.html @@ -0,0 +1 @@ +Inner diff --git a/test/runtime/samples/component-yield-nested-if/Outer.html b/test/runtime/samples/component-yield-nested-if/Outer.html new file mode 100644 index 0000000000..c9557e4532 --- /dev/null +++ b/test/runtime/samples/component-yield-nested-if/Outer.html @@ -0,0 +1,3 @@ +{{#if foo}} + {{yield}} +{{/if}} diff --git a/test/runtime/samples/component-yield-nested-if/_config.js b/test/runtime/samples/component-yield-nested-if/_config.js new file mode 100644 index 0000000000..44548b2f16 --- /dev/null +++ b/test/runtime/samples/component-yield-nested-if/_config.js @@ -0,0 +1,14 @@ +export default { + html: ` + One + Inner + `, + + test ( assert, component, target ) { + component.set({ foo: false }); + assert.htmlEqual( target.innerHTML, `` ); + + component.set({ foo: true }); + assert.htmlEqual( target.innerHTML, `One\nInner` ); + } +}; diff --git a/test/runtime/samples/component-yield-nested-if/main.html b/test/runtime/samples/component-yield-nested-if/main.html new file mode 100644 index 0000000000..fbdaf0cb6f --- /dev/null +++ b/test/runtime/samples/component-yield-nested-if/main.html @@ -0,0 +1,14 @@ + + One + + + + diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js index 66f2699fff..c5836041f4 100644 --- a/test/server-side-rendering/index.js +++ b/test/server-side-rendering/index.js @@ -107,10 +107,12 @@ describe( 'ssr', () => { } } - const resolved = require.resolve( `../runtime/samples/${dir}/main.html` ); - delete require.cache[ resolved ]; + fs.readdirSync( `test/runtime/samples/${dir}` ).forEach( file => { + const resolved = require.resolve( `../runtime/samples/${dir}/${file}` ); + delete require.cache[ resolved ]; + }); - const component = require( resolved ); + const component = require( `../runtime/samples/${dir}/main.html` ); let html; try {