Merge pull request #2263 from sveltejs/gh-2262

Fix getter/setter inclusion logic

src/compile/render-dom/index.ts

@@ -96,33 +96,39 @@ export default function dom(
 	props.forEach(x => {
 		const variable = component.var_lookup.get(x.name);
 
-		if (variable.hoistable) {
+		if (!variable.writable || component.component_options.accessors) {
 			body.push(deindent`
 				get ${x.export_name}() {
-					return ${x.name};
+					return ${x.hoistable ? x.name : 'this.$$.ctx.' + x.name};
 				}
 			`);
-		} else if (component.component_options.accessors) {
+		} else if (component.compile_options.dev) {
 			body.push(deindent`
 				get ${x.export_name}() {
-					return this.$$.ctx.${x.name};
+					throw new Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
 				}
 			`);
 		}
 
-		if (variable.writable && !renderer.readonly.has(x.export_name)) {
-			if (component.component_options.accessors) {
+		if (component.component_options.accessors) {
+			if (variable.writable && !renderer.readonly.has(x.name)) {
 				body.push(deindent`
 					set ${x.export_name}(${x.name}) {
 						this.$set({ ${x.name === x.export_name ? x.name : `${x.export_name}: ${x.name}`} });
 						@flush();
 					}
 				`);
+			} else if (component.compile_options.dev) {
+				body.push(deindent`
+					set ${x.export_name}(value) {
+						throw new Error("<${component.tag}>: Cannot set read-only property '${x.export_name}'");
+					}
+				`);
 			}
 		} else if (component.compile_options.dev) {
 			body.push(deindent`
 				set ${x.export_name}(value) {
-					throw new Error("<${component.tag}>: Cannot set read-only property '${x.export_name}'");
+					throw new Error("<${component.tag}>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
 				}
 			`);
 		}

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

@@ -40,6 +40,14 @@ class SvelteComponent extends SvelteComponent_1 {
 		super();
 		init(this, options, instance, create_fragment, safe_not_equal, ["x", "a", "b"]);
 	}
+
+	get a() {
+		return this.$$.ctx.a;
+	}
+
+	get b() {
+		return this.$$.ctx.b;
+	}
 }
 
 export default SvelteComponent;

test/js/samples/debug-empty/expected.js

@@ -82,6 +82,14 @@ class SvelteComponent extends SvelteComponentDev {
 			console.warn("<SvelteComponent> was created without expected prop 'name'");
 		}
 	}
+
+	get name() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set name(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
 }
 
 export default SvelteComponent;

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -180,6 +180,38 @@ class SvelteComponent extends SvelteComponentDev {
 			console.warn("<SvelteComponent> was created without expected prop 'baz'");
 		}
 	}
+
+	get things() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set things(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get foo() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set foo(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get bar() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set bar(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get baz() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set baz(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
 }
 
 export default SvelteComponent;

test/js/samples/debug-foo/expected.js

@@ -172,6 +172,22 @@ class SvelteComponent extends SvelteComponentDev {
 			console.warn("<SvelteComponent> was created without expected prop 'foo'");
 		}
 	}
+
+	get things() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set things(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get foo() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set foo(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
 }
 
 export default SvelteComponent;

test/js/samples/dev-warning-missing-data-computed/expected.js

@@ -88,6 +88,14 @@ class SvelteComponent extends SvelteComponentDev {
 			console.warn("<SvelteComponent> was created without expected prop 'foo'");
 		}
 	}
+
+	get foo() {
+		throw new Error("<SvelteComponent>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set foo(value) {
+		throw new Error("<SvelteComponent>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
 }
 
 export default SvelteComponent;

test/runtime/samples/prop-accessors/_config.js

@@ -0,0 +1,12 @@
+export default {
+	accessors: false,
+	test({ assert, component }) {
+		assert.equal(component.foo1, 42);
+		assert.equal(component.foo2(), 42);
+		assert.equal(component.bar, undefined);
+		component.foo1 = null;
+		component.foo2 = null;
+		assert.equal(component.foo1, 42);
+		assert.equal(component.foo2(), 42);
+	}
+};

test/runtime/samples/prop-accessors/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	export const foo1 = 42;
+	export const foo2 = () => 42;
+	export let bar = 42;
+</script>