Add an "all" mode to the react transform (#421)

"All" mode transforms all components to be reactive to signals. You can still opt-out using `/** @notrackSignals */`.

Related: #412

Author: andrewiggins

.changeset/proud-dogs-study.md

@@ -0,0 +1,5 @@
+---
+"@preact/signals-react-transform": patch
+---
+
+Add an "all" mode to the react transform that transforms all components to be reactive to signals

packages/react-transform/src/index.ts

@@ -160,6 +160,10 @@ function shouldTransform(
 	// Opt-in opts in to transformation regardless of mode
 	if (isOptedIntoSignalTracking(path)) return true;
 
+	if (options.mode === "all") {
+		return isComponentFunction(path);
+	}
+
 	if (options.mode == null || options.mode === "auto") {
 		return (isComponentFunction(path) || isCustomHook(path))
 			&& getData(path.scope, maybeUsesSignal) === true // Function appears to use signals;
@@ -311,8 +315,9 @@ export interface PluginOptions {
 	 * Specify the mode to use:
 	 * - `auto`: Automatically wrap all components that use signals.
 	 * - `manual`: Only wrap components that are annotated with `@trackSignals` in a JSX comment.
+	 * - `all`: Makes all components reactive to signals.
 	 */
-	mode?: "auto" | "manual";
+	mode?: "auto" | "manual" | "all";
 	/** Specify a custom package to import the `useSignals` hook from. */
 	importSource?: string;
 	experimental?: {

packages/react-transform/test/node/index.test.tsx

@@ -834,6 +834,126 @@ describe("React Signals Babel Transform", () => {
 		});
 	});
 
+	describe("all mode transformations", () => {
+		it("skips transforming arrow function component with leading opt-out JSDoc comment before variable declaration", () => {
+			const inputCode = `
+				/** @noTrackSignals */
+				const MyComponent = () => {
+					return <div>{signal.value}</div>;
+				};
+			`;
+
+			const expectedOutput = inputCode;
+
+			runTest(inputCode, expectedOutput, { mode: "all" });
+		});
+
+		it("skips transforming function declaration components with leading opt-out JSDoc comment", () => {
+			const inputCode = `
+				/** @noTrackSignals */
+				function MyComponent() {
+					return <div>{signal.value}</div>;
+				}
+			`;
+
+			const expectedOutput = inputCode;
+
+			runTest(inputCode, expectedOutput, { mode: "all" });
+		});
+
+		it("transforms function declaration component that doesn't use signals", () => {
+			const inputCode = `
+				function MyComponent() {
+					return <div>Hello World</div>;
+				}
+			`;
+
+			const expectedOutput = `
+				import { useSignals as _useSignals } from "@preact/signals-react/runtime";
+				function MyComponent() {
+					var _effect = _useSignals();
+					try {
+						return <div>Hello World</div>;
+					} finally {
+						_effect.f();
+					}
+				}
+			`;
+
+			runTest(inputCode, expectedOutput, { mode: "all" });
+		});
+
+		it("transforms arrow function component with return statement that doesn't use signals", () => {
+			const inputCode = `
+				const MyComponent = () => {
+					return <div>Hello World</div>;
+				};
+			`;
+
+			const expectedOutput = `
+				import { useSignals as _useSignals } from "@preact/signals-react/runtime";
+				const MyComponent = () => {
+					var _effect = _useSignals();
+					try {
+						return <div>Hello World</div>;
+					} finally {
+						_effect.f();
+					}
+				};
+			`;
+
+			runTest(inputCode, expectedOutput, { mode: "all" });
+		});
+
+		it("transforms function declaration component that uses signals", () => {
+			const inputCode = `
+				function MyComponent() {
+					signal.value;
+					return <div>Hello World</div>;
+				}
+			`;
+
+			const expectedOutput = `
+				import { useSignals as _useSignals } from "@preact/signals-react/runtime";
+				function MyComponent() {
+					var _effect = _useSignals();
+					try {
+						signal.value;
+						return <div>Hello World</div>;
+					} finally {
+						_effect.f();
+					}
+				}
+			`;
+
+			runTest(inputCode, expectedOutput, { mode: "all" });
+		});
+
+		it("transforms arrow function component with return statement that uses signals", () => {
+			const inputCode = `
+				const MyComponent = () => {
+					signal.value;
+					return <div>Hello World</div>;
+				};
+			`;
+
+			const expectedOutput = `
+				import { useSignals as _useSignals } from "@preact/signals-react/runtime";
+				const MyComponent = () => {
+					var _effect = _useSignals();
+					try {
+						signal.value;
+						return <div>Hello World</div>;
+					} finally {
+						_effect.f();
+					}
+				};
+			`;
+
+			runTest(inputCode, expectedOutput, { mode: "all" });
+		});
+	});
+
 	describe("noTryFinally option", () => {
 		it("prepends arrow function component with useSignals call", () => {
 			const inputCode = `