make _recompute a class method

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}() {
+				get ${prop}() {
-						return this.get().${prop};
+					return this.get().${prop};
-					}
+				}
 
-					set ${prop}(value) {
+				set ${prop}(value) {
-						this.set({ ${prop}: value });
+					this.set({ ${prop}: value });
-					}
+				}`).join('\n\n')}
-				`).join('\n\n')}
+
+				${classMethods.length && classMethods.join('\n\n')}
 
 				${generator.slots.size && deindent`
-					connectedCallback() {
+				connectedCallback() {
-						Object.keys(this._slotted).forEach(key => {
+					Object.keys(this._slotted).forEach(key => {
-							this.appendChild(this._slotted[key]);
+						this.appendChild(this._slotted[key]);
-						});
+					});
-					}`}
+				}`}
 
 				attributeChangedCallback(attr, oldValue, newValue) {
 					this.set({ [attr]: newValue });
 				}
 
 				${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
-					connectedCallback() {
+				connectedCallback() {
-						${generator.hasComponents && `this._lock = true;`}
+					${generator.hasComponents && `this._lock = true;`}
-						${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
+					${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
-						${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
+					${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
-						${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
+					${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
-						${generator.hasComponents && `this._lock = false;`}
+					${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;`}

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) {
+	_recompute(changed, state) {
-	if (changed.x) {
+		if (changed.x) {
-		if (this._differs(state.a, (state.a = a(state)))) changed.a = true;
+			if (this._differs(state.a, (state.a = a(state)))) changed.a = true;
-		if (this._differs(state.b, (state.b = b(state)))) changed.b = true;
+			if (this._differs(state.b, (state.b = b(state)))) changed.b = true;
+		}
 	}
-};
+}
 
 export default SvelteComponent;

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) {
+	_recompute(changed, state) {
-	if (changed.x) {
+		if (changed.x) {
-		if (this._differs(state.a, (state.a = a(state)))) changed.a = true;
+			if (this._differs(state.a, (state.a = a(state)))) changed.a = true;
-		if (this._differs(state.b, (state.b = b(state)))) changed.b = true;
+			if (this._differs(state.b, (state.b = b(state)))) changed.b = true;
+		}
 	}
 }
 export default SvelteComponent;

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("<SvelteComponent>: 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;

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("<SvelteComponent>: 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;