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);
 
@@ -283,8 +291,9 @@ export default function dom(
 
 				set ${prop}(value) {
 					this.set({ ${prop}: value });
-					}
+				}`).join('\n\n')}
-				`).join('\n\n')}
+
+				${classMethods.length && classMethods.join('\n\n')}
 
 				${generator.slots.size && deindent`
 				connectedCallback() {
@@ -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 (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;

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 (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;

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);
 		}
 	}
-}
-
-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) {
+	_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'");
 };
 
 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);
 		}
 	}
-}
-
-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) {
+	_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'");
+};
 export default SvelteComponent;