Merge pull request #794 from sveltejs/gh-550

attach options to component (#550)

src/generators/dom/index.ts

@@ -151,9 +151,9 @@ export default function dom(
 	// TODO deprecate component.teardown()
 	builder.addBlock(deindent`
 		function ${name} ( options ) {
-			options = options || {};
 			${options.dev &&
-				`if ( !options.target && !options._root ) throw new Error( "'target' is a required option" );`}
+				`if ( !options || (!options.target && !options._root) ) throw new Error( "'target' is a required option" );`}
+			this.options = options;
 			${generator.usesRefs && `this.refs = {};`}
 			this._state = ${templateProperties.data
 				? `@assign( @template.data(), options.data )`

test/js/samples/collapses-text-around-comments/expected-bundle.js

@@ -217,7 +217,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = assign( template.data(), options.data );
 
 	this._observers = {

test/js/samples/collapses-text-around-comments/expected.js

@@ -53,7 +53,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = assign( template.data(), options.data );
 
 	this._observers = {

test/js/samples/computed-collapsed-if/expected-bundle.js

@@ -165,7 +165,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 	this._recompute( {}, this._state, {}, true );
 

test/js/samples/computed-collapsed-if/expected.js

@@ -25,7 +25,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 	this._recompute( {}, this._state, {}, true );
 

test/js/samples/css-media-query/expected-bundle.js

@@ -199,7 +199,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/css-media-query/expected.js

@@ -39,7 +39,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/each-block-changed-check/expected-bundle.js

@@ -313,7 +313,7 @@ function create_each_block ( state, each_block_value, comment, i, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/each-block-changed-check/expected.js

@@ -140,7 +140,7 @@ function create_each_block ( state, each_block_value, comment, i, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/event-handlers-custom/expected-bundle.js

@@ -210,7 +210,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/event-handlers-custom/expected.js

@@ -50,7 +50,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/if-block-no-update/expected-bundle.js

@@ -252,7 +252,7 @@ function select_block_type ( state ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/if-block-no-update/expected.js

@@ -88,7 +88,7 @@ function select_block_type ( state ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/if-block-simple/expected-bundle.js

@@ -228,7 +228,7 @@ function create_if_block ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/if-block-simple/expected.js

@@ -64,7 +64,7 @@ function create_if_block ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/legacy-input-type/expected-bundle.js

@@ -186,7 +186,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/legacy-input-type/expected.js

@@ -28,7 +28,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/non-imported-component/expected-bundle.js

@@ -202,7 +202,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/non-imported-component/expected.js

@@ -50,7 +50,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/onrender-onteardown-rewritten/expected-bundle.js

@@ -164,7 +164,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/onrender-onteardown-rewritten/expected.js

@@ -24,7 +24,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/setup-method/expected-bundle.js

@@ -175,7 +175,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/setup-method/expected.js

@@ -35,7 +35,7 @@ function create_main_fragment ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/use-elements-as-anchors/expected-bundle.js

@@ -412,7 +412,7 @@ function create_if_block_4 ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/js/samples/use-elements-as-anchors/expected.js

@@ -248,7 +248,7 @@ function create_if_block_4 ( state, component ) {
 }
 
 function SvelteComponent ( options ) {
-	options = options || {};
+	this.options = options;
 	this._state = options.data || {};
 
 	this._observers = {

test/runtime/index.js

@@ -81,6 +81,12 @@ describe("runtime", () => {
 						code.slice(0, startIndex).split('\n').map(x => spaces(x.length)).join('\n') +
 						code.slice(startIndex).replace(/export default .+/, "");
 					acorn.parse(es5, { ecmaVersion: 5 });
+
+					if (/Object\.assign/.test(es5)) {
+						throw new Error(
+							"cannot use Object.assign in generated code, as it is not supported everywhere"
+						);
+					}
 				} catch (err) {
 					failed.add(dir);
 					showOutput(cwd, { shared }); // eslint-disable-line no-console
@@ -133,11 +139,6 @@ describe("runtime", () => {
 					throw err;
 				}
 
-				let usedObjectAssign = false;
-				Object.assign = () => {
-					usedObjectAssign = true;
-				};
-
 				global.window = window;
 
 				// Put the constructor on window for testing
@@ -151,13 +152,13 @@ describe("runtime", () => {
 					warnings.push(warning);
 				};
 
-				const component = new SvelteComponent({
+				const options = Object.assign({}, {
 					target,
 					hydrate,
 					data: config.data
-				});
+				}, config.options || {});
 
-				Object.assign = Object_assign;
+				const component = new SvelteComponent(options);
 
 				console.warn = warn;
 
@@ -183,15 +184,7 @@ describe("runtime", () => {
 					component.destroy();
 					assert.equal(target.innerHTML, "");
 				}
-
-				if (usedObjectAssign) {
-					throw new Error(
-						"cannot use Object.assign in generated code, as it is not supported everywhere"
-					);
-				}
 			} catch (err) {
-				Object.assign = Object_assign;
-
 				if (config.error && !unintendedError) {
 					config.error(assert, err);
 				} else {

test/runtime/samples/options/_config.js

@@ -0,0 +1,12 @@
+export default {
+	'skip-ssr': true,
+	html: `<p>from this.options</p>`,
+
+	options: {
+		text: 'from this.options'
+	},
+
+	test(assert, component) {
+		assert.equal(component.options.text, 'from this.options');
+	}
+};

test/runtime/samples/options/main.html

@@ -0,0 +1,11 @@
+<p>{{text}}</p>
+
+<script>
+	export default {
+		oncreate() {
+			this.set({
+				text: this.options.text
+			});
+		}
+	};
+</script>

test/runtime/samples/pass-no-options/_config.js

@@ -1,8 +0,0 @@
-export default {
-	html: '<h1>Just some static HTML</h1>',
-
-	test ( assert, component, target, window ) {
-		const newComp = new window.SvelteComponent();
-		assert.equal(newComp instanceof window.SvelteComponent, true);
-	}
-};

test/runtime/samples/pass-no-options/main.html

@@ -1 +0,0 @@
-<h1>Just some static HTML</h1>