diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts
index 6678b21872..ade9ed6096 100644
--- a/src/compile/render-dom/index.ts
+++ b/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 ''");
}
`);
}
- 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 ''");
}
`);
}