From 5c9fa293a6e52496aa631ae19d3d9b15bf659571 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 18 Mar 2019 13:56:06 -0400 Subject: [PATCH 1/3] fix logic for inclusion of getters/setters on components (32262) --- src/compile/render-dom/index.ts | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) 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 ''"); } `); } From a8e59d7fd7aa59f096a1726594793b084ecdfcea Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 18 Mar 2019 14:01:45 -0400 Subject: [PATCH 2/3] update tests --- .../samples/computed-collapsed-if/expected.js | 8 +++++ test/js/samples/debug-empty/expected.js | 8 +++++ .../debug-foo-bar-baz-things/expected.js | 32 +++++++++++++++++++ test/js/samples/debug-foo/expected.js | 16 ++++++++++ .../expected.js | 8 +++++ 5 files changed, 72 insertions(+) diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index 754d202429..bc01e0dfc0 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/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; \ No newline at end of file diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index f122a7b979..73eebd73ca 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -82,6 +82,14 @@ class SvelteComponent extends SvelteComponentDev { console.warn(" was created without expected prop 'name'"); } } + + get name() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set name(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } } export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js index b8b134606c..2ba87abfd9 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -180,6 +180,38 @@ class SvelteComponent extends SvelteComponentDev { console.warn(" was created without expected prop 'baz'"); } } + + get things() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set things(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + + get foo() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set foo(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + + get bar() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set bar(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + + get baz() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set baz(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } } export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 94f580ed9d..09502f6025 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -172,6 +172,22 @@ class SvelteComponent extends SvelteComponentDev { console.warn(" was created without expected prop 'foo'"); } } + + get things() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set things(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } + + get foo() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set foo(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } } export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js index 447477bea5..18ec0e5074 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -88,6 +88,14 @@ class SvelteComponent extends SvelteComponentDev { console.warn(" was created without expected prop 'foo'"); } } + + get foo() { + throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); + } + + set foo(value) { + throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); + } } export default SvelteComponent; \ No newline at end of file From d769924b4e490d93bfd893052189be0d614c86a9 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 18 Mar 2019 16:14:31 -0400 Subject: [PATCH 3/3] add test --- test/runtime/samples/prop-accessors/_config.js | 12 ++++++++++++ test/runtime/samples/prop-accessors/main.svelte | 5 +++++ 2 files changed, 17 insertions(+) create mode 100644 test/runtime/samples/prop-accessors/_config.js create mode 100644 test/runtime/samples/prop-accessors/main.svelte diff --git a/test/runtime/samples/prop-accessors/_config.js b/test/runtime/samples/prop-accessors/_config.js new file mode 100644 index 0000000000..2f0f0eb442 --- /dev/null +++ b/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); + } +}; diff --git a/test/runtime/samples/prop-accessors/main.svelte b/test/runtime/samples/prop-accessors/main.svelte new file mode 100644 index 0000000000..a412ac3e3c --- /dev/null +++ b/test/runtime/samples/prop-accessors/main.svelte @@ -0,0 +1,5 @@ +