diff --git a/.gitignore b/.gitignore index d134f6249c..9115b3d274 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,6 @@ scratch .nyc_output coverage coverage.lcov -test/sourcemaps/*/output.js -test/sourcemaps/*/output.js.map -_actual.json \ No newline at end of file +test/sourcemaps/samples/*/output.js +test/sourcemaps/samples/*/output.js.map +_actual.json diff --git a/CHANGELOG.md b/CHANGELOG.md index ca749baeee..e67072b5f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Svelte changelog +## 1.11.3 + +* Undo CSS behaviour change in 1.11.2 ([#372](https://github.com/sveltejs/svelte/issues/372)) +* Pin version of css-tree ([#370](https://github.com/sveltejs/svelte/pull/370)) + ## 1.11.2 * Add component CSS to each document a component is rendered to ([#331](https://github.com/sveltejs/svelte/issues/331)) diff --git a/package.json b/package.json index 4211a65f5e..a2d3b61579 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "1.11.2", + "version": "1.11.3", "description": "The magical disappearing UI framework", "main": "compiler/svelte.js", "files": [ @@ -57,7 +57,7 @@ "babel-register": "^6.23.0", "codecov": "^1.0.1", "console-group": "^0.3.2", - "css-tree": "^1.0.0-alpha16", + "css-tree": "1.0.0-alpha16", "eslint": "^3.12.2", "eslint-plugin-import": "^2.2.0", "estree-walker": "^0.3.0", diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index c6c277bb59..77891d1c30 100644 --- a/src/generators/dom/index.js +++ b/src/generators/dom/index.js @@ -205,30 +205,16 @@ export default function dom ( parsed, source, options, names ) { getUniqueName: generator.getUniqueNameMaker() }); + parsed.html.children.forEach( node => generator.visit( node ) ); + + generator.addRenderer( generator.pop() ); + const builders = { main: new CodeBuilder(), init: new CodeBuilder(), _set: new CodeBuilder() }; - if ( parsed.css && options.css !== false ) { - generator.current.builders.mount.addLine( `if ( !target.ownerDocument.__sveltecss_${parsed.hash} ) addCss( target.ownerDocument );` ); - - builders.main.addBlock( deindent` - function addCss ( document ) { - var style = ${generator.helper( 'createElement' )}( 'style' ); - style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )}; - ${generator.helper( 'appendNode' )}( style, document.head ); - - document.__sveltecss_${parsed.hash} = true; - } - ` ); - } - - parsed.html.children.forEach( node => generator.visit( node ) ); - - generator.addRenderer( generator.pop() ); - if ( options.dev ) { builders._set.addBlock ( deindent` if ( typeof newState !== 'object' ) { @@ -271,11 +257,28 @@ export default function dom ( parsed, source, options, names ) { builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` ); } + if ( parsed.css && options.css !== false ) { + builders.main.addBlock( deindent` + var addedCss = false; + function addCss () { + var style = ${generator.helper( 'createElement' )}( 'style' ); + style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )}; + ${generator.helper( 'appendNode' )}( style, document.head ); + + addedCss = true; + } + ` ); + } + let i = generator.renderers.length; while ( i-- ) builders.main.addBlock( generator.renderers[i] ); builders.init.addLine( `this._torndown = false;` ); + if ( parsed.css && options.css !== false ) { + builders.init.addLine( `if ( !addedCss ) addCss();` ); + } + if ( generator.hasComponents ) { builders.init.addLine( `this._renderHooks = [];` ); } diff --git a/test/generator/samples/render-in-iframe/_config.js b/test/generator/samples/render-in-iframe/_config.js deleted file mode 100644 index 190a2b57de..0000000000 --- a/test/generator/samples/render-in-iframe/_config.js +++ /dev/null @@ -1,21 +0,0 @@ -export default { - test ( assert, component, target, window ) { - const iframe = window.document.createElement('iframe'); - window.document.body.appendChild(iframe); - - const otherTarget = iframe.contentWindow.document.body; - - new component.constructor({ - target: otherTarget - }); - - assert.equal( - window.getComputedStyle(target.querySelector('h1')).color, - 'rgb(255, 0, 0)' - ); - assert.equal( - window.getComputedStyle(otherTarget.querySelector('h1')).color, - 'rgb(255, 0, 0)' - ); - } -}; diff --git a/test/generator/samples/render-in-iframe/main.html b/test/generator/samples/render-in-iframe/main.html deleted file mode 100644 index c67978fa51..0000000000 --- a/test/generator/samples/render-in-iframe/main.html +++ /dev/null @@ -1,6 +0,0 @@ -

Just some static HTML

- diff --git a/test/sourcemaps/samples/basic/output.js b/test/sourcemaps/samples/basic/output.js deleted file mode 100644 index 6f8fe3ad76..0000000000 --- a/test/sourcemaps/samples/basic/output.js +++ /dev/null @@ -1,159 +0,0 @@ -function renderMainFragment ( root, component ) { - var last_text = root.foo.bar.baz - var text = createText( last_text ); - - return { - mount: function ( target, anchor ) { - insertNode( text, target, anchor ); - }, - - update: function ( changed, root ) { - var __tmp; - - if ( ( __tmp = root.foo.bar.baz ) !== last_text ) { - text.data = last_text = __tmp; - } - }, - - teardown: function ( 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._yield = options._yield; - - this._torndown = false; - - this._fragment = renderMainFragment( this._state, this ); - if ( options.target ) this._fragment.mount( options.target, null ); -} - -SvelteComponent.prototype.get = function get(key) { - return key ? this._state[key] : this._state; - }; - -SvelteComponent.prototype.fire = 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); - } - }; - -SvelteComponent.prototype.observe = function observe(key, callback, options) { - var group = options && options.defer ? this._observers.pre : this._observers.post; - - (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); - } - }; - }; - -SvelteComponent.prototype.on = function on(eventName, 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); - } - }; - }; - -SvelteComponent.prototype.set = function set(newState) { - this._set(newState); - (this._root || this)._flush(); - }; - -SvelteComponent.prototype._flush = function _flush() { - if (!this._renderHooks) return; - - while (this._renderHooks.length) { - var hook = this._renderHooks.pop(); - hook.fn.call(hook.context); - } - }; - -SvelteComponent.prototype._set = function _set ( newState ) { - var oldState = this._state; - this._state = Object.assign( {}, oldState, newState ); - - dispatchObservers( this, this._observers.pre, newState, oldState ); - if ( this._fragment ) this._fragment.update( newState, this._state ); - dispatchObservers( this, this._observers.post, newState, oldState ); -}; - -SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { - this.fire( 'teardown' ); - - this._fragment.teardown( detach !== false ); - this._fragment = null; - - this._state = {}; - this._torndown = true; -}; - -function createText(data) { - return document.createTextNode(data); - } - -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); - } - -function detachNode(node) { - node.parentNode.removeChild(node); - } - -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 (newValue === oldValue && typeof newValue !== 'object') continue; - - 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; - } - } - } - -export default SvelteComponent; -//# sourceMappingURL=output.js.map \ No newline at end of file diff --git a/test/sourcemaps/samples/basic/output.js.map b/test/sourcemaps/samples/basic/output.js.map deleted file mode 100644 index 62ae043b0b..0000000000 --- a/test/sourcemaps/samples/basic/output.js.map +++ /dev/null @@ -1,12 +0,0 @@ -{ - "version": 3, - "file": "output.js", - "sources": [ - "input.html" - ], - "sourcesContent": [ - "{{foo.bar.baz}}" - ], - "names": [], - "mappings": ";sBAAE,GAAG,CAAC,GAAG,CAAC,GAAG;;;;;;;;;;;uBAAX,GAAG,CAAC,GAAG,CAAC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;" -} \ No newline at end of file diff --git a/test/sourcemaps/samples/script/output.js b/test/sourcemaps/samples/script/output.js deleted file mode 100644 index e459766037..0000000000 --- a/test/sourcemaps/samples/script/output.js +++ /dev/null @@ -1,168 +0,0 @@ -var template = (function () { - return { - oncreate () { - console.log( 42 ); - } - } -}()); - -function renderMainFragment ( root, component ) { - var div = createElement( 'div' ); - - return { - mount: function ( target, anchor ) { - insertNode( div, target, anchor ); - }, - - update: noop, - - teardown: function ( detach ) { - if ( detach ) { - 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._yield = options._yield; - - this._torndown = false; - - this._fragment = renderMainFragment( this._state, this ); - if ( options.target ) this._fragment.mount( options.target, null ); - - if ( options._root ) { - options._root._renderHooks.push({ fn: template.oncreate, context: this }); - } else { - template.oncreate.call( this ); - } -} - -SvelteComponent.prototype.get = function get(key) { - return key ? this._state[key] : this._state; - }; - -SvelteComponent.prototype.fire = 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); - } - }; - -SvelteComponent.prototype.observe = function observe(key, callback, options) { - var group = options && options.defer ? this._observers.pre : this._observers.post; - - (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); - } - }; - }; - -SvelteComponent.prototype.on = function on(eventName, 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); - } - }; - }; - -SvelteComponent.prototype.set = function set(newState) { - this._set(newState); - (this._root || this)._flush(); - }; - -SvelteComponent.prototype._flush = function _flush() { - if (!this._renderHooks) return; - - while (this._renderHooks.length) { - var hook = this._renderHooks.pop(); - hook.fn.call(hook.context); - } - }; - -SvelteComponent.prototype._set = function _set ( newState ) { - var oldState = this._state; - this._state = Object.assign( {}, oldState, newState ); - - dispatchObservers( this, this._observers.pre, newState, oldState ); - if ( this._fragment ) this._fragment.update( newState, this._state ); - dispatchObservers( this, this._observers.post, newState, oldState ); -}; - -SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { - this.fire( 'teardown' ); - - this._fragment.teardown( detach !== false ); - this._fragment = null; - - this._state = {}; - this._torndown = true; -}; - -function createElement(name) { - return document.createElement(name); - } - -function detachNode(node) { - node.parentNode.removeChild(node); - } - -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); - } - -function noop() {} - -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 (newValue === oldValue && typeof newValue !== 'object') continue; - - 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; - } - } - } - -export default SvelteComponent; -//# sourceMappingURL=output.js.map \ No newline at end of file diff --git a/test/sourcemaps/samples/script/output.js.map b/test/sourcemaps/samples/script/output.js.map deleted file mode 100644 index 28d223637a..0000000000 --- a/test/sourcemaps/samples/script/output.js.map +++ /dev/null @@ -1,12 +0,0 @@ -{ - "version": 3, - "file": "output.js", - "sources": [ - "input.html" - ], - "sourcesContent": [ - "
\n\n" - ], - "names": [], - "mappings": "6BAEQ;CACP,OAAe;EACd,QAAQ,CAAC,GAAG;GACX,OAAO,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC;GAClB;EACD;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;" -} \ No newline at end of file diff --git a/test/sourcemaps/samples/static-no-script/output.js b/test/sourcemaps/samples/static-no-script/output.js deleted file mode 100644 index 2f8fa77c42..0000000000 --- a/test/sourcemaps/samples/static-no-script/output.js +++ /dev/null @@ -1,164 +0,0 @@ -function renderMainFragment ( root, component ) { - var p = createElement( 'p' ); - - appendNode( createText( "no moving parts" ), p ); - - return { - mount: function ( target, anchor ) { - insertNode( p, target, anchor ); - }, - - update: noop, - - teardown: function ( detach ) { - if ( detach ) { - detachNode( p ); - } - } - }; -} - -function SvelteComponent ( options ) { - options = options || {}; - this._state = options.data || {}; - - this._observers = { - pre: Object.create( null ), - post: Object.create( null ) - }; - - this._handlers = Object.create( null ); - - this._root = options._root; - this._yield = options._yield; - - this._torndown = false; - - this._fragment = renderMainFragment( this._state, this ); - if ( options.target ) this._fragment.mount( options.target, null ); -} - -SvelteComponent.prototype.get = function get(key) { - return key ? this._state[key] : this._state; - }; - -SvelteComponent.prototype.fire = 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); - } - }; - -SvelteComponent.prototype.observe = function observe(key, callback, options) { - var group = options && options.defer ? this._observers.pre : this._observers.post; - - (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); - } - }; - }; - -SvelteComponent.prototype.on = function on(eventName, 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); - } - }; - }; - -SvelteComponent.prototype.set = function set(newState) { - this._set(newState); - (this._root || this)._flush(); - }; - -SvelteComponent.prototype._flush = function _flush() { - if (!this._renderHooks) return; - - while (this._renderHooks.length) { - var hook = this._renderHooks.pop(); - hook.fn.call(hook.context); - } - }; - -SvelteComponent.prototype._set = function _set ( newState ) { - var oldState = this._state; - this._state = Object.assign( {}, oldState, newState ); - - dispatchObservers( this, this._observers.pre, newState, oldState ); - if ( this._fragment ) this._fragment.update( newState, this._state ); - dispatchObservers( this, this._observers.post, newState, oldState ); -}; - -SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { - this.fire( 'teardown' ); - - this._fragment.teardown( detach !== false ); - this._fragment = null; - - this._state = {}; - this._torndown = true; -}; - -function createElement(name) { - return document.createElement(name); - } - -function detachNode(node) { - node.parentNode.removeChild(node); - } - -function insertNode(node, target, anchor) { - target.insertBefore(node, anchor); - } - -function createText(data) { - return document.createTextNode(data); - } - -function appendNode(node, target) { - target.appendChild(node); - } - -function noop() {} - -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 (newValue === oldValue && typeof newValue !== 'object') continue; - - 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; - } - } - } - -export default SvelteComponent; -//# sourceMappingURL=output.js.map \ No newline at end of file diff --git a/test/sourcemaps/samples/static-no-script/output.js.map b/test/sourcemaps/samples/static-no-script/output.js.map deleted file mode 100644 index 0db89b3909..0000000000 --- a/test/sourcemaps/samples/static-no-script/output.js.map +++ /dev/null @@ -1,12 +0,0 @@ -{ - "version": 3, - "file": "output.js", - "sources": [ - "input.html" - ], - "sourcesContent": [ - "

no moving parts

" - ], - "names": [], - "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;" -} \ No newline at end of file