Merge pull request #1992 from sveltejs/gh-1488

Fix props for logic-less components
6 years ago · 6036f00dee
parent ca6ab95ea4 3c4d8b5c2c
commit 6036f00dee
28 changed files with 203 additions and 41 deletions
--- a/src/compile/render-dom/index.ts
+++ b/src/compile/render-dom/index.ts
@ -275,7 +275,7 @@ export default function dom(

 	const definition = has_definition
 		? component.alias('instance')
-		: '@identity';
+		: 'null';

 	const all_reactive_dependencies = new Set();
 	component.reactive_declarations.forEach(d => {
--- a/src/internal/Component.js
+++ b/src/internal/Component.js
@ -59,7 +59,7 @@ export function init(component, options, instance, create_fragment, not_equal) {

 	const $$ = component.$$ = {
 		fragment: null,
-		ctx: null,
+		ctx: options.props || {},

 		// state
 		set: noop,
@ -82,19 +82,21 @@ export function init(component, options, instance, create_fragment, not_equal) {

 	let ready = false;

-	$$.ctx = instance(component, options.props || {}, (key, value) => {
-		if ($$.bound[key]) $$.bound[key](value);
+	if (instance) {
+		$$.ctx = instance(component, $$.ctx, (key, value) => {
+			if ($$.bound[key]) $$.bound[key](value);

-		if ($$.ctx) {
-			const changed = not_equal(value, $$.ctx[key]);
-			if (ready && changed) {
-				make_dirty(component, key);
-			}
+			if ($$.ctx) {
+				const changed = not_equal(value, $$.ctx[key]);
+				if (ready && changed) {
+					make_dirty(component, key);
+				}

-			$$.ctx[key] = value;
-			return changed;
-		}
-	});
+				$$.ctx[key] = value;
+				return changed;
+			}
+		});
+	}

 	$$.update();
 	ready = true;
--- a/test/js/samples/action/expected.js
+++ b/test/js/samples/action/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var a, link_action;
@ -48,7 +48,7 @@ function link(node) {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/css-media-query/expected.js
+++ b/test/js/samples/css-media-query/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function add_css() {
 	var style = createElement("style");
@ -37,7 +37,7 @@ class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
 		if (!document.getElementById("svelte-1slhpfn-style")) add_css();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/css-shadow-dom-keyframes/expected.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteElement, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteElement, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var div;
@ -33,7 +33,7 @@ class SvelteComponent extends SvelteElement {

 		this.shadowRoot.innerHTML = `<style>div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}</style>`;

-		init(this, { target: this.shadowRoot }, identity, create_fragment, safe_not_equal);
+		init(this, { target: this.shadowRoot }, null, create_fragment, safe_not_equal);

 		if (options) {
 			if (options.target) {
--- a/test/js/samples/dynamic-import/expected.js
+++ b/test/js/samples/dynamic-import/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, identity, init, mount_component, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, init, mount_component, noop, safe_not_equal } from "svelte/internal";
 import LazyLoad from "./LazyLoad.html";

 function create_fragment($$, ctx) {
@ -43,7 +43,7 @@ function func() {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/event-handler-no-passive/expected.js
+++ b/test/js/samples/event-handler-no-passive/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var a, dispose;
@ -37,7 +37,7 @@ function touchstart_handler(e) {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/event-modifiers/expected.js
+++ b/test/js/samples/event-modifiers/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, identity, init, insert, noop, preventDefault, run_all, safe_not_equal, stopPropagation } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, preventDefault, run_all, safe_not_equal, stopPropagation } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var div, button0, text1, button1, text3, button2, dispose;
@ -57,7 +57,7 @@ function handleClick() {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/head-no-whitespace/expected.js
+++ b/test/js/samples/head-no-whitespace/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, init, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var meta0, meta1;
@ -33,7 +33,7 @@ function create_fragment($$, ctx) {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/hoisted-const/expected.js
+++ b/test/js/samples/hoisted-const/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var b, text_value = get_answer(), text;
@ -34,7 +34,7 @@ function get_answer() { return ANSWER; }
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/hoisted-let/expected.js
+++ b/test/js/samples/hoisted-let/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var b, text_value = get_answer(), text;
@ -34,7 +34,7 @@ function get_answer() { return ANSWER; }
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/legacy-input-type/expected.js
+++ b/test/js/samples/legacy-input-type/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal, setInputType } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, createElement, detachNode, init, insert, noop, safe_not_equal, setInputType } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var input;
@ -29,7 +29,7 @@ function create_fragment($$, ctx) {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/non-imported-component/expected.js
+++ b/test/js/samples/non-imported-component/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, createText, detachNode, identity, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, createText, detachNode, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal";
 import Imported from "Imported.html";

 function create_fragment($$, ctx) {
@ -54,7 +54,7 @@ function create_fragment($$, ctx) {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/non-mutable-reference/expected.js
+++ b/test/js/samples/non-mutable-reference/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var h1, text0, text1, text2;
@ -36,7 +36,7 @@ let name = 'world';
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/js/samples/setup-method/expected.js
+++ b/test/js/samples/setup-method/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, identity, init, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, init, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	return {
@ -21,7 +21,7 @@ function foo(bar) {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}

 	get foo() {
--- a/test/js/samples/svg-title/expected.js
+++ b/test/js/samples/svg-title/expected.js
@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal";
+import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal";

 function create_fragment($$, ctx) {
 	var svg, title, text;
@ -32,7 +32,7 @@ function create_fragment($$, ctx) {
 class SvelteComponent extends SvelteComponent_1 {
 	constructor(options) {
 		super();
-		init(this, options, identity, create_fragment, safe_not_equal);
+		init(this, options, null, create_fragment, safe_not_equal);
 	}
 }

--- a/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.html
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.html
@ -0,0 +1,5 @@
+<script>
+	export let x = 'no';
+</script>
+
+<p>Bar: {x}</p>
--- a/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.html
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.html
@ -0,0 +1,5 @@
+<script>
+	export let x = 'yes';
+</script>
+
+<p>Foo: {x}</p>
--- a/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js
@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>Foo: yes</p>
+		<p>x in parent: yes</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: yes</p>
+			<p>x in parent: yes</p>
+		`);
+
+		component.a = true;
+		assert.equal(component.x, 'yes');
+		component.x = undefined;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo: undefined</p>
+			<p>x in parent: undefined</p>
+		`);
+
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: no</p>
+		`);
+	}
+};
--- a/test/runtime/samples/component-binding-parent-supercedes-child-b/main.html
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/main.html
@ -0,0 +1,15 @@
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export let a = true;
+	export let x;
+</script>
+
+{#if a}
+	<Foo bind:x/>
+{:else}
+	<Bar bind:x/>
+{/if}
+
+<p>x in parent: {x}</p>
--- a/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.html
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.html
@ -0,0 +1,5 @@
+<script>
+	export let x = 'no';
+</script>
+
+<p>Bar: {x}</p>
--- a/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.html
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.html
@ -0,0 +1,5 @@
+<script>
+	export let x = 'yes';
+</script>
+
+<p>Foo: {x}</p>
--- a/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js
@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>Foo: yes</p>
+		<p>x in parent: yes</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: yes</p>
+			<p>x in parent: yes</p>
+		`);
+
+		component.a = true;
+		assert.equal(component.x, 'yes');
+		component.x = undefined;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo: undefined</p>
+			<p>x in parent: undefined</p>
+		`);
+
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: no</p>
+		`);
+	}
+};
--- a/test/runtime/samples/component-binding-parent-supercedes-child-c/main.html
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/main.html
@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export let a = true;
+	export let x;
+</script>
+
+<svelte:component this="{a ? Foo : Bar}" bind:x/>
+
+<p>x in parent: {x}</p>
--- a/test/runtime/samples/component-binding-private-state/Bar.html
+++ b/test/runtime/samples/component-binding-private-state/Bar.html
@ -0,0 +1,5 @@
+<script>
+	let x = 'no';
+</script>
+
+<p>Bar: {x}</p>
--- a/test/runtime/samples/component-binding-private-state/Foo.html
+++ b/test/runtime/samples/component-binding-private-state/Foo.html
@ -0,0 +1,5 @@
+<script>
+	let x = 'yes';
+</script>
+
+<p>Foo: {x}</p>
--- a/test/runtime/samples/component-binding-private-state/_config.js
+++ b/test/runtime/samples/component-binding-private-state/_config.js
@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>Foo: yes</p>
+		<p>x in parent: undefined</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: undefined</p>
+		`);
+
+		component.a = true;
+		assert.equal(component.x, undefined);
+		component.x = 'maybe';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo: yes</p>
+			<p>x in parent: maybe</p>
+		`);
+
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: maybe</p>
+		`);
+	}
+};
--- a/test/runtime/samples/component-binding-private-state/main.html
+++ b/test/runtime/samples/component-binding-private-state/main.html
@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+
+	export let a = true;
+	export let x;
+</script>
+
+<svelte:component this="{a ? Foo : Bar}" bind:x/>
+
+<p>x in parent: {x}</p>