Merge pull request #706 from preactjs/resource-management

feat: dispose effect() with resource management

Author: marvinhagemeister

.changeset/short-meals-fail.md

@@ -0,0 +1,30 @@
+---
+"@preact/signals-core": minor
+---
+
+feat: support disposing `effect()` with resource management
+
+This allows `effect()`'s to be disposed with the new `using` keyword from [the explicit resource management proposal](https://github.com/tc39/proposal-explicit-resource-management).
+
+Whenever an effect goes out of scope the `Symbol.dispose` function is called automatically.
+
+```js
+const count = signal(0);
+
+function doSomething() {
+	// The `using` keyword calls dispose at the end of
+	// this function scope
+	using _ = effect(() => {
+		console.log(count.value);
+		return () => console.log("disposed");
+	});
+
+	console.log("hey");
+}
+
+doSomething();
+// Logs:
+//  0
+//  hey
+//  disposed
+```

karma.conf.js

@@ -184,11 +184,16 @@ function createEsbuildPlugin(filteredPkgList) {
 						},
 					];
 
+					const explicitResourceManagement = [
+						"@babel/plugin-proposal-explicit-resource-management",
+					];
+
 					const tmp = await babel.transformAsync(result, {
 						filename: args.path,
 						sourceMaps: "inline",
 						presets: downlevel ? [ts, jsx, downlevelPlugin] : [ts, jsx],
 						plugins: [
+							explicitResourceManagement,
 							signalsTransform,
 							coverage && coveragePlugin,
 							minify && renamePlugin,

package.json

@@ -46,17 +46,17 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/plugin-proposal-explicit-resource-management": "^7.23.3",
-    "@babel/plugin-syntax-jsx": "^7.23.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-    "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "@babel/plugin-transform-typescript": "^7.19.1",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@babel/register": "^7.22.15",
-    "@babel/standalone": "^7.23.4",
+    "@babel/core": "^7.27.7",
+    "@babel/plugin-proposal-explicit-resource-management": "^7.27.4",
+    "@babel/plugin-syntax-jsx": "^7.27.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
+    "@babel/plugin-transform-typescript": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@babel/register": "^7.27.1",
+    "@babel/standalone": "^7.27.7",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
     "@types/babel__traverse": "^7.18.5",
@@ -90,7 +90,7 @@
     "shx": "^0.3.4",
     "sinon": "^14.0.0",
     "sinon-chai": "^3.7.0",
-    "typescript": "~5.1.6"
+    "typescript": "~5.8.3"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,yml,json,md}": [

packages/core/src/index.ts

@@ -858,7 +858,7 @@ Effect.prototype.dispose = function () {
  * @param fn The effect callback.
  * @returns A function for disposing the effect.
  */
-function effect(fn: EffectFn): () => void {
+function effect(fn: EffectFn): { (): void; [Symbol.dispose](): void } {
 	const effect = new Effect(fn);
 	try {
 		effect._callback();
@@ -868,7 +868,9 @@ function effect(fn: EffectFn): () => void {
 	}
 	// Return a bound function instead of a wrapper like `() => effect._dispose()`,
 	// because bound functions seem to be just as fast and take up a lot less memory.
-	return effect._dispose.bind(effect);
+	const dispose = effect._dispose.bind(effect);
+	(dispose as any)[Symbol.dispose] = dispose;
+	return dispose as any;
 }
 
 export { computed, effect, batch, untracked, Signal, ReadonlySignal };

packages/core/test/signal.test.tsx

@@ -786,6 +786,18 @@ describe("effect()", () => {
 		expect(() => dispose()).not.to.throw();
 	});
 
+	it("should support resource management disposal", () => {
+		const a = signal(0);
+		const spy = sinon.spy();
+		{
+			using _dispose = effect(() => {
+				a.value;
+				return spy;
+			});
+		}
+		expect(spy).to.be.calledOnce;
+	});
+
 	it("should allow disposing a running effect", () => {
 		const a = signal(0);
 		const spy = sinon.spy();