From f5f35b5a50deb34371322dca1970b916cf754472 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 2 Sep 2017 18:41:45 -0400 Subject: [PATCH] scoped styles --- src/css/Stylesheet.ts | 10 +- src/generators/Generator.ts | 4 +- src/generators/dom/index.ts | 26 +- .../dom/visitors/Element/Element.ts | 2 +- src/generators/server-side-rendering/index.ts | 4 +- .../expected-bundle.js | 2 +- .../expected.js | 2 +- .../computed-collapsed-if/expected-bundle.js | 2 +- .../samples/computed-collapsed-if/expected.js | 2 +- .../css-media-query/expected-bundle.js | 2 +- test/js/samples/css-media-query/expected.js | 2 +- .../custom-element-basic/expected-bundle.js | 4 +- .../samples/custom-element-basic/expected.js | 4 +- .../custom-element-slot/expected-bundle.js | 4 +- .../samples/custom-element-slot/expected.js | 4 +- .../samples/custom-element-styled/_config.js | 5 + .../custom-element-styled/expected-bundle.js | 245 ++++++++++++++++++ .../samples/custom-element-styled/expected.js | 84 ++++++ .../samples/custom-element-styled/input.html | 13 + .../expected-bundle.js | 2 +- .../each-block-changed-check/expected.js | 2 +- .../event-handlers-custom/expected-bundle.js | 2 +- .../samples/event-handlers-custom/expected.js | 2 +- .../if-block-no-update/expected-bundle.js | 2 +- .../js/samples/if-block-no-update/expected.js | 2 +- .../if-block-simple/expected-bundle.js | 2 +- test/js/samples/if-block-simple/expected.js | 2 +- .../legacy-input-type/expected-bundle.js | 2 +- test/js/samples/legacy-input-type/expected.js | 2 +- .../non-imported-component/expected-bundle.js | 2 +- .../non-imported-component/expected.js | 2 +- .../expected-bundle.js | 2 +- .../onrender-onteardown-rewritten/expected.js | 2 +- .../samples/setup-method/expected-bundle.js | 2 +- test/js/samples/setup-method/expected.js | 2 +- .../expected-bundle.js | 2 +- .../use-elements-as-anchors/expected.js | 2 +- 37 files changed, 411 insertions(+), 46 deletions(-) create mode 100644 test/js/samples/custom-element-styled/_config.js create mode 100644 test/js/samples/custom-element-styled/expected-bundle.js create mode 100644 test/js/samples/custom-element-styled/expected.js create mode 100644 test/js/samples/custom-element-styled/input.html diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts index 03c711044f..f79abc1d75 100644 --- a/src/css/Stylesheet.ts +++ b/src/css/Stylesheet.ts @@ -337,7 +337,7 @@ export default class Stylesheet { } } - render(cssOutputFilename: string) { + render(cssOutputFilename: string, shouldTransformSelectors: boolean) { if (!this.hasStyles) { return { css: null, cssMap: null }; } @@ -351,9 +351,11 @@ export default class Stylesheet { } }); - this.children.forEach((child: (Atrule|Rule)) => { - child.transform(code, this.id, this.keyframes, this.cascade); - }); + if (shouldTransformSelectors) { + this.children.forEach((child: (Atrule|Rule)) => { + child.transform(code, this.id, this.keyframes, this.cascade); + }); + } let c = 0; this.children.forEach(child => { diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts index fa7a47060f..d912f151e6 100644 --- a/src/generators/Generator.ts +++ b/src/generators/Generator.ts @@ -389,7 +389,9 @@ export default class Generator { addString(finalChunk); addString('\n\n' + getOutro(format, name, options, this.imports)); - const { css, cssMap } = this.stylesheet.render(options.cssOutputFilename); + const { css, cssMap } = this.customElement ? + { css: null, cssMap: null } : + this.stylesheet.render(options.cssOutputFilename, true); return { ast: this.ast, diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index cdb5bc39e9..1d1e8b2608 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -111,18 +111,17 @@ export default function dom( `); } - if (generator.stylesheet.hasStyles && options.css !== false) { - const { css, cssMap } = generator.stylesheet.render(options.filename); - - const textContent = stringify(options.dev ? - `${css}\n/*# sourceMappingURL=${cssMap.toUrl()} */` : - css, { onlyEscapeAtSymbol: true }); + const { css, cssMap } = generator.stylesheet.render(options.filename, !generator.customElement); + const styles = generator.stylesheet.hasStyles && stringify(options.dev ? + `${css}\n/*# sourceMappingURL=${cssMap.toUrl()} */` : + css, { onlyEscapeAtSymbol: true }); + if (styles && generator.options.css !== false && !generator.customElement) { builder.addBlock(deindent` function @add_css () { var style = @createElement( 'style' ); style.id = '${generator.stylesheet.id}-style'; - style.textContent = ${textContent}; + style.textContent = ${styles}; @appendNode( style, document.head ); } `); @@ -148,7 +147,7 @@ export default function dom( .join(',\n')} }`; - const target = generator.customElement ? `this.attachShadow({ mode: 'open' })` : `options.target`; + const target = generator.customElement ? `this.shadowRoot` : `options.target`; const anchor = generator.customElement ? `null` : `options.anchor || null`; const constructorBody = deindent` @@ -184,9 +183,14 @@ export default function dom( this._bind = options._bind; ${generator.slots.size && `this._slotted = options.slots || {};`} - ${generator.stylesheet.hasStyles && - options.css !== false && - `if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`} + ${generator.customElement ? + deindent` + this.attachShadow({ mode: 'open' }); + ${css && `this.shadowRoot.innerHTML = '';`} + ` : + (generator.stylesheet.hasStyles && options.css !== false && + `if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`) + } ${templateProperties.oncreate && `var oncreate = @template.oncreate.bind( this );`} diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts index 94d1336a57..a230b52cd3 100644 --- a/src/generators/dom/visitors/Element/Element.ts +++ b/src/generators/dom/visitors/Element/Element.ts @@ -88,7 +88,7 @@ export default function visitElement( // add CSS encapsulation attribute // TODO add a helper for this, rather than repeating it - if (node._needsCssAttribute) { + if (node._needsCssAttribute && !generator.customElement) { generator.needsEncapsulateHelper = true; block.builders.hydrate.addLine( `@encapsulateStyles( ${name} );` diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts index a7cc04bedc..a56e53dc8d 100644 --- a/src/generators/server-side-rendering/index.ts +++ b/src/generators/server-side-rendering/index.ts @@ -94,7 +94,9 @@ export default function ssr( visit(generator, mainBlock, node); }); - const { css, cssMap } = generator.stylesheet.render(options.filename); + const { css, cssMap } = generator.customElement ? + { css: null, cssMap: null } : + generator.stylesheet.render(options.filename, true); const result = deindent` ${hasJs && `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`} 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 b485e8ae40..d2dda757ef 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -236,7 +236,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 88dd6ab34f..deb4d4d303 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -71,7 +71,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js index 8f13660642..2ebbbcb13d 100644 --- a/test/js/samples/computed-collapsed-if/expected-bundle.js +++ b/test/js/samples/computed-collapsed-if/expected-bundle.js @@ -183,7 +183,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index 340622cd28..6bb4ebaf9e 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/test/js/samples/computed-collapsed-if/expected.js @@ -42,7 +42,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js index 9b5f69f529..afcf12bb19 100644 --- a/test/js/samples/css-media-query/expected-bundle.js +++ b/test/js/samples/css-media-query/expected-bundle.js @@ -218,7 +218,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index 86167afeb1..23839e6c0d 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -57,7 +57,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/custom-element-basic/expected-bundle.js b/test/js/samples/custom-element-basic/expected-bundle.js index f234f6dca8..77a7b3bc0f 100644 --- a/test/js/samples/custom-element-basic/expected-bundle.js +++ b/test/js/samples/custom-element-basic/expected-bundle.js @@ -210,11 +210,13 @@ class SvelteComponent extends HTMLElement { this._yield = options._yield; this._bind = options._bind; + this.attachShadow({ mode: 'open' }); + this._fragment = create_main_fragment( this._state, this ); if ( !options._root ) { this._fragment.create(); - this._fragment.mount( this.attachShadow({ mode: 'open' }), null ); + this._fragment.mount( this.shadowRoot, null ); } } diff --git a/test/js/samples/custom-element-basic/expected.js b/test/js/samples/custom-element-basic/expected.js index 1e1b8deac0..21437ee293 100644 --- a/test/js/samples/custom-element-basic/expected.js +++ b/test/js/samples/custom-element-basic/expected.js @@ -49,11 +49,13 @@ class SvelteComponent extends HTMLElement { this._yield = options._yield; this._bind = options._bind; + this.attachShadow({ mode: 'open' }); + this._fragment = create_main_fragment( this._state, this ); if ( !options._root ) { this._fragment.create(); - this._fragment.mount( this.attachShadow({ mode: 'open' }), null ); + this._fragment.mount( this.shadowRoot, null ); } } diff --git a/test/js/samples/custom-element-slot/expected-bundle.js b/test/js/samples/custom-element-slot/expected-bundle.js index 1250dbb624..78011c2cb6 100644 --- a/test/js/samples/custom-element-slot/expected-bundle.js +++ b/test/js/samples/custom-element-slot/expected-bundle.js @@ -223,11 +223,13 @@ class SvelteComponent extends HTMLElement { this._yield = options._yield; this._bind = options._bind; + this.attachShadow({ mode: 'open' }); + this._fragment = create_main_fragment( this._state, this ); if ( !options._root ) { this._fragment.create(); - this._fragment.mount( this.attachShadow({ mode: 'open' }), null ); + this._fragment.mount( this.shadowRoot, null ); } } diff --git a/test/js/samples/custom-element-slot/expected.js b/test/js/samples/custom-element-slot/expected.js index 831cfce1d0..8b162fa50d 100644 --- a/test/js/samples/custom-element-slot/expected.js +++ b/test/js/samples/custom-element-slot/expected.js @@ -58,11 +58,13 @@ class SvelteComponent extends HTMLElement { this._yield = options._yield; this._bind = options._bind; + this.attachShadow({ mode: 'open' }); + this._fragment = create_main_fragment( this._state, this ); if ( !options._root ) { this._fragment.create(); - this._fragment.mount( this.attachShadow({ mode: 'open' }), null ); + this._fragment.mount( this.shadowRoot, null ); } } diff --git a/test/js/samples/custom-element-styled/_config.js b/test/js/samples/custom-element-styled/_config.js new file mode 100644 index 0000000000..735dd07e62 --- /dev/null +++ b/test/js/samples/custom-element-styled/_config.js @@ -0,0 +1,5 @@ +export default { + options: { + customElement: true + } +}; \ No newline at end of file diff --git a/test/js/samples/custom-element-styled/expected-bundle.js b/test/js/samples/custom-element-styled/expected-bundle.js new file mode 100644 index 0000000000..5d2d44f38e --- /dev/null +++ b/test/js/samples/custom-element-styled/expected-bundle.js @@ -0,0 +1,245 @@ +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 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 destroy(detach) { + this.destroy = noop; + this.fire('destroy'); + this.set = this.get = noop; + + if (detach !== false) this._fragment.unmount(); + this._fragment.destroy(); + this._fragment = this._state = null; +} + +function differs(a, b) { + return a !== b || ((a && typeof a === 'object') || typeof a === 'function'); +} + +function dispatchObservers(component, group, changed, newState, oldState) { + for (var key in group) { + if (!changed[key]) continue; + + var newValue = newState[key]; + var oldValue = oldState[key]; + + 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)); + if (this._root._lock) return; + this._root._lock = true; + callAll(this._root._beforecreate); + callAll(this._root._oncreate); + callAll(this._root._aftercreate); + this._root._lock = false; +} + +function _set(newState) { + var oldState = this._state, + changed = {}, + dirty = false; + + for (var key in newState) { + if (differs(newState[key], oldState[key])) changed[key] = dirty = true; + } + if (!dirty) return; + + this._state = assign({}, oldState, newState); + this._recompute(changed, this._state, oldState, false); + if (this._bind) this._bind(changed, this._state); + dispatchObservers(this, this._observers.pre, changed, this._state, oldState); + this._fragment.update(changed, this._state); + dispatchObservers(this, this._observers.post, changed, this._state, oldState); +} + +function callAll(fns) { + while (fns && fns.length) fns.pop()(); +} + +var proto = { + destroy: destroy, + get: get, + fire: fire, + observe: observe, + on: on, + set: set, + teardown: destroy, + _recompute: noop, + _set: _set +}; + +function create_main_fragment ( state, component ) { + var h1, text, text_1, text_2; + + return { + create: function () { + h1 = createElement( 'h1' ); + text = createText( "Hello " ); + text_1 = createText( state.name ); + text_2 = createText( "!" ); + }, + + mount: function ( target, anchor ) { + insertNode( h1, target, anchor ); + appendNode( text, h1 ); + appendNode( text_1, h1 ); + appendNode( text_2, h1 ); + }, + + update: function ( changed, state ) { + if ( changed.name ) { + text_1.data = state.name; + } + }, + + unmount: function () { + detachNode( h1 ); + }, + + destroy: noop + }; +} + +class SvelteComponent extends HTMLElement { + constructor(options = {}) { + super(); + this.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._bind = options._bind; + + this.attachShadow({ mode: 'open' }); + this.shadowRoot.innerHTML = ''; + + this._fragment = create_main_fragment( this._state, this ); + + if ( !options._root ) { + this._fragment.create(); + this._fragment.mount( this.shadowRoot, null ); + } + } + + static get observedAttributes() { + return ["name"]; + } + + get name() { + return this.get('name'); + } + + set name(value) { + this.set({ name: value }); + } + + attributeChangedCallback ( attr, oldValue, newValue ) { + this.set({ [attr]: newValue }); + } +} + +customElements.define('custom-element', SvelteComponent); + +assign( SvelteComponent.prototype, proto ); + +export default SvelteComponent; diff --git a/test/js/samples/custom-element-styled/expected.js b/test/js/samples/custom-element-styled/expected.js new file mode 100644 index 0000000000..ef6a614f00 --- /dev/null +++ b/test/js/samples/custom-element-styled/expected.js @@ -0,0 +1,84 @@ +import { appendNode, assign, createElement, createText, detachNode, insertNode, noop, proto } from "svelte/shared.js"; + +function create_main_fragment ( state, component ) { + var h1, text, text_1, text_2; + + return { + create: function () { + h1 = createElement( 'h1' ); + text = createText( "Hello " ); + text_1 = createText( state.name ); + text_2 = createText( "!" ); + }, + + mount: function ( target, anchor ) { + insertNode( h1, target, anchor ); + appendNode( text, h1 ); + appendNode( text_1, h1 ); + appendNode( text_2, h1 ); + }, + + update: function ( changed, state ) { + if ( changed.name ) { + text_1.data = state.name; + } + }, + + unmount: function () { + detachNode( h1 ); + }, + + destroy: noop + }; +} + +class SvelteComponent extends HTMLElement { + constructor(options = {}) { + super(); + this.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._bind = options._bind; + + this.attachShadow({ mode: 'open' }); + this.shadowRoot.innerHTML = ''; + + this._fragment = create_main_fragment( this._state, this ); + + if ( !options._root ) { + this._fragment.create(); + this._fragment.mount( this.shadowRoot, null ); + } + } + + static get observedAttributes() { + return ["name"]; + } + + get name() { + return this.get('name'); + } + + set name(value) { + this.set({ name: value }); + } + + attributeChangedCallback ( attr, oldValue, newValue ) { + this.set({ [attr]: newValue }); + } +} + +customElements.define('custom-element', SvelteComponent); + +assign( SvelteComponent.prototype, proto ); + +export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/custom-element-styled/input.html b/test/js/samples/custom-element-styled/input.html new file mode 100644 index 0000000000..78c7ad685b --- /dev/null +++ b/test/js/samples/custom-element-styled/input.html @@ -0,0 +1,13 @@ +

Hello {{name}}!

+ + + + \ No newline at end of file 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 6353bf3ee1..65e244108a 100644 --- a/test/js/samples/each-block-changed-check/expected-bundle.js +++ b/test/js/samples/each-block-changed-check/expected-bundle.js @@ -328,7 +328,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 7dcdb66696..c4cde082d8 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -154,7 +154,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js index 159e569519..3edd91e778 100644 --- a/test/js/samples/event-handlers-custom/expected-bundle.js +++ b/test/js/samples/event-handlers-custom/expected-bundle.js @@ -227,7 +227,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/event-handlers-custom/expected.js b/test/js/samples/event-handlers-custom/expected.js index e713056e73..1af3570e3b 100644 --- a/test/js/samples/event-handlers-custom/expected.js +++ b/test/js/samples/event-handlers-custom/expected.js @@ -66,7 +66,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } 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 3f5fd5ceab..141fb94d96 100644 --- a/test/js/samples/if-block-no-update/expected-bundle.js +++ b/test/js/samples/if-block-no-update/expected-bundle.js @@ -269,7 +269,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index ca082058f4..f36c614c95 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -104,7 +104,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js index 5de96e35cc..7047170311 100644 --- a/test/js/samples/if-block-simple/expected-bundle.js +++ b/test/js/samples/if-block-simple/expected-bundle.js @@ -245,7 +245,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index 1eedecd147..eaf0415502 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -80,7 +80,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/legacy-input-type/expected-bundle.js b/test/js/samples/legacy-input-type/expected-bundle.js index 9730de31f9..92bd8c1608 100644 --- a/test/js/samples/legacy-input-type/expected-bundle.js +++ b/test/js/samples/legacy-input-type/expected-bundle.js @@ -203,7 +203,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js index 33a277bb4a..46277e3c98 100644 --- a/test/js/samples/legacy-input-type/expected.js +++ b/test/js/samples/legacy-input-type/expected.js @@ -44,7 +44,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js index 37f5543dc2..a56d55b6d3 100644 --- a/test/js/samples/non-imported-component/expected-bundle.js +++ b/test/js/samples/non-imported-component/expected-bundle.js @@ -225,7 +225,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index af524aa1aa..1d23ee8f9e 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -72,7 +72,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js index e18be3c8d0..6d4a4814aa 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js @@ -190,7 +190,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/onrender-onteardown-rewritten/expected.js b/test/js/samples/onrender-onteardown-rewritten/expected.js index ca473e83c7..d19bed1529 100644 --- a/test/js/samples/onrender-onteardown-rewritten/expected.js +++ b/test/js/samples/onrender-onteardown-rewritten/expected.js @@ -49,7 +49,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/setup-method/expected-bundle.js b/test/js/samples/setup-method/expected-bundle.js index 14af614e67..8f162ec7b5 100644 --- a/test/js/samples/setup-method/expected-bundle.js +++ b/test/js/samples/setup-method/expected-bundle.js @@ -192,7 +192,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js index 9e33fb3921..6b554eb781 100644 --- a/test/js/samples/setup-method/expected.js +++ b/test/js/samples/setup-method/expected.js @@ -51,7 +51,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } 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 cda8dbedbb..35eec6f965 100644 --- a/test/js/samples/use-elements-as-anchors/expected-bundle.js +++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js @@ -429,7 +429,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); } diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index f65d1fe288..7bc5165be0 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -264,7 +264,7 @@ function SvelteComponent ( options ) { this._fragment = create_main_fragment( this._state, this ); - if ( options.target ) { + if ( !options._root ) { this._fragment.create(); this._fragment.mount( options.target, options.anchor || null ); }