diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index dc62ed136f..caae873e81 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -260,6 +260,14 @@ export default function dom( `} `; + const classMethods = []; + if (computations.length) { + classMethods.push(deindent` + _recompute(changed, state) { + ${computationBuilder} + }`); + } + if (generator.customElement) { const props = generator.props || Array.from(generator.expectedProperties); @@ -277,34 +285,35 @@ export default function dom( } ${props.map(prop => deindent` - get ${prop}() { - return this.get().${prop}; - } + get ${prop}() { + return this.get().${prop}; + } - set ${prop}(value) { - this.set({ ${prop}: value }); - } - `).join('\n\n')} + set ${prop}(value) { + this.set({ ${prop}: value }); + }`).join('\n\n')} + + ${classMethods.length && classMethods.join('\n\n')} ${generator.slots.size && deindent` - connectedCallback() { - Object.keys(this._slotted).forEach(key => { - this.appendChild(this._slotted[key]); - }); - }`} + connectedCallback() { + Object.keys(this._slotted).forEach(key => { + this.appendChild(this._slotted[key]); + }); + }`} attributeChangedCallback(attr, oldValue, newValue) { this.set({ [attr]: newValue }); } ${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent` - connectedCallback() { - ${generator.hasComponents && `this._lock = true;`} - ${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`} - ${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`} - ${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`} - ${generator.hasComponents && `this._lock = false;`} - } + connectedCallback() { + ${generator.hasComponents && `this._lock = true;`} + ${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`} + ${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`} + ${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`} + ${generator.hasComponents && `this._lock = false;`} + } `} } @@ -337,6 +346,8 @@ export default function dom( super(options); ${constructorBody} } + + ${classMethods.length && classMethods.join('\n\n')} } ${templateProperties.methods && `@assign(${name}.prototype, %methods);`} @@ -355,12 +366,6 @@ export default function dom( }; `} - ${computations.length ? deindent` - ${name}.prototype._recompute = function _recompute(changed, state) { - ${computationBuilder} - } - ` : (!sharedPath && `${name}.prototype._recompute = @noop;`)} - ${templateProperties.setup && `%setup(${name});`} ${templateProperties.preload && `${name}.preload = %preload;`} diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js index 1c4e9fb1e6..a3dfffaa3b 100644 --- a/test/js/samples/computed-collapsed-if/expected-bundle.js +++ b/test/js/samples/computed-collapsed-if/expected-bundle.js @@ -163,13 +163,13 @@ class SvelteComponent extends Component { this._mount(options.target, options.anchor); } } -} -SvelteComponent.prototype._recompute = function _recompute(changed, state) { - if (changed.x) { - if (this._differs(state.a, (state.a = a(state)))) changed.a = true; - if (this._differs(state.b, (state.b = b(state)))) changed.b = true; + _recompute(changed, state) { + if (changed.x) { + if (this._differs(state.a, (state.a = a(state)))) changed.a = true; + if (this._differs(state.b, (state.b = b(state)))) changed.b = true; + } } -}; +} export default SvelteComponent; diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index 2527cd6c3d..1c66ea443e 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/test/js/samples/computed-collapsed-if/expected.js @@ -37,12 +37,12 @@ class SvelteComponent extends Component { this._mount(options.target, options.anchor); } } -} -SvelteComponent.prototype._recompute = function _recompute(changed, state) { - if (changed.x) { - if (this._differs(state.a, (state.a = a(state)))) changed.a = true; - if (this._differs(state.b, (state.b = b(state)))) changed.b = true; + _recompute(changed, state) { + if (changed.x) { + if (this._differs(state.a, (state.a = a(state)))) changed.a = true; + if (this._differs(state.b, (state.b = b(state)))) changed.b = true; + } } } export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js b/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js index 9ca15e534e..254fc74faa 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js @@ -229,16 +229,16 @@ class SvelteComponent extends ComponentDev { this._mount(options.target, options.anchor); } } + + _recompute(changed, state) { + if (changed.foo) { + if (this._differs(state.bar, (state.bar = bar(state)))) changed.bar = true; + } + } } SvelteComponent.prototype._checkReadOnly = function _checkReadOnly(newState) { if ('bar' in newState && !this._updatingReadonlyProperty) throw new Error(": Cannot set read-only property 'bar'"); }; -SvelteComponent.prototype._recompute = function _recompute(changed, state) { - if (changed.foo) { - if (this._differs(state.bar, (state.bar = bar(state)))) changed.bar = true; - } -}; - export default SvelteComponent; 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 5f59f4ad2f..889873982b 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -57,15 +57,15 @@ class SvelteComponent extends ComponentDev { this._mount(options.target, options.anchor); } } + + _recompute(changed, state) { + if (changed.foo) { + if (this._differs(state.bar, (state.bar = bar(state)))) changed.bar = true; + } + } } SvelteComponent.prototype._checkReadOnly = function _checkReadOnly(newState) { if ('bar' in newState && !this._updatingReadonlyProperty) throw new Error(": Cannot set read-only property 'bar'"); }; - -SvelteComponent.prototype._recompute = function _recompute(changed, state) { - if (changed.foo) { - if (this._differs(state.bar, (state.bar = bar(state)))) changed.bar = true; - } -} export default SvelteComponent; \ No newline at end of file