diff --git a/src/compile/Component.ts b/src/compile/Component.ts index 037880eff5..bbcc290518 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -26,6 +26,7 @@ type ComponentOptions = { namespace?: string; tag?: string; immutable?: boolean; + accessors?: boolean; }; // We need to tell estree-walker that it should always @@ -52,6 +53,7 @@ export default class Component { componentOptions: ComponentOptions; namespace: string; tag: string; + accessors: boolean; vars: Var[] = []; var_lookup: Map = new Map(); @@ -1155,7 +1157,10 @@ export default class Component { function process_component_options(component: Component, nodes) { const componentOptions: ComponentOptions = { - immutable: component.compileOptions.immutable || false + immutable: component.compileOptions.immutable || false, + accessors: 'accessors' in component.compileOptions + ? component.compileOptions.accessors + : !!component.compileOptions.customElement }; const node = nodes.find(node => node.name === 'svelte:options'); @@ -1229,14 +1234,15 @@ function process_component_options(component: Component, nodes) { break; } + case 'accessors': case 'immutable': - const code = `invalid-immutable-value`; - const message = `immutable attribute must be true or false` + const code = `invalid-${name}-value`; + const message = `${name} attribute must be true or false` const value = get_value(attribute, code, message); if (typeof value !== 'boolean') component.error(attribute, { code, message }); - componentOptions.immutable = value; + componentOptions[name] = value; break; default: @@ -1250,7 +1256,7 @@ function process_component_options(component: Component, nodes) { else { component.error(attribute, { code: `invalid-options-attribute`, - message: ` can only have static 'tag', 'namespace' and 'immutable' attributes` + message: ` can only have static 'tag', 'namespace', 'accessors' and 'immutable' attributes` }); } }); diff --git a/src/compile/index.ts b/src/compile/index.ts index 704d5bd706..aee72fcd9e 100644 --- a/src/compile/index.ts +++ b/src/compile/index.ts @@ -16,6 +16,7 @@ const valid_options = [ 'cssOutputFilename', 'sveltePath', 'dev', + 'accessors', 'immutable', 'hydratable', 'legacy', diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index 5def2edd04..b7a5698c93 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -102,7 +102,7 @@ export default function dom( return ${x.name}; } `); - } else { + } else if (component.componentOptions.accessors) { body.push(deindent` get ${x.export_name}() { return this.$$.ctx.${x.name}; @@ -111,12 +111,14 @@ export default function dom( } if (variable.writable && !renderer.readonly.has(x.export_name)) { - body.push(deindent` - set ${x.export_name}(${x.name}) { - this.$set({ ${x.name} }); - @flush(); - } - `); + if (component.componentOptions.accessors) { + body.push(deindent` + set ${x.export_name}(${x.name}) { + this.$set({ ${x.name} }); + @flush(); + } + `); + } } else if (component.compileOptions.dev) { body.push(deindent` set ${x.export_name}(value) { diff --git a/src/interfaces.ts b/src/interfaces.ts index b3e778a48b..bc2a672c47 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -49,6 +49,7 @@ export interface CompileOptions { sveltePath?: string; dev?: boolean; + accessors?: boolean; immutable?: boolean; hydratable?: boolean; legacy?: boolean; diff --git a/test/hydration/samples/element-ref/main.svelte b/test/hydration/samples/element-ref/main.svelte index 20aaa794fa..f81f55e42d 100644 --- a/test/hydration/samples/element-ref/main.svelte +++ b/test/hydration/samples/element-ref/main.svelte @@ -1,3 +1,5 @@ + + diff --git a/test/hydration/samples/if-block-update/main.svelte b/test/hydration/samples/if-block-update/main.svelte index 5c22693283..136266a445 100644 --- a/test/hydration/samples/if-block-update/main.svelte +++ b/test/hydration/samples/if-block-update/main.svelte @@ -1,3 +1,5 @@ + +