Add importSource plugin option

packages/react-transform/src/index.ts

@@ -20,7 +20,7 @@ interface PluginArgs {
 const optOutCommentIdentifier = /(^|\s)@noTrackSignals(\s|$)/;
 const optInCommentIdentifier = /(^|\s)@trackSignals(\s|$)/;
 const dataNamespace = "@preact/signals-react-transform";
-const importSource = "@preact/signals-react/runtime";
+const defaultImportSource = "@preact/signals-react/runtime";
 const importName = "useSignals";
 const getHookIdentifier = "getHookIdentifier";
 const maybeUsesSignal = "maybeUsesSignal";
@@ -290,6 +290,8 @@ export interface PluginOptions {
 	 * - `manual`: Only wrap components that are annotated with `@trackSignals` in a JSX comment.
 	 */
 	mode?: "auto" | "manual";
+	/** Specify a custom package to import the `useSignals` hook from. */
+	importSource?: string;
 	experimental?: {
 		/**
 		 * If set to true, the component body will not be wrapped in a try/finally
@@ -318,7 +320,7 @@ export default function signalsTransform(
 					set(
 						state,
 						getHookIdentifier,
-						createImportLazily(t, state, path, importName, importSource)
+						createImportLazily(t, state, path, importName, options.importSource ?? defaultImportSource)
 					);
 				},
 			},

packages/react-transform/test/browser/e2e.test.tsx

@@ -13,10 +13,12 @@ import {
 	getConsoleErrorSpy,
 } from "../../../react/test/shared/utils";
 
+const customSource = "useSignals-custom-source";
 const modules: Record<string, any> = {
 	"@preact/signals-core": signalsCore,
 	"@preact/signals-react/runtime": signalsRuntime,
 	"react/jsx-runtime": jsxRuntime,
+	[customSource]: signalsRuntime,
 };
 
 function testRequire(name: string) {
@@ -191,4 +193,23 @@ describe("React Signals babel transfrom - browser E2E tests", () => {
 		});
 		expect(scratch.innerHTML).to.equal("<div>Hello John!</div>");
 	});
+
+	it("loads useSignals from a custom source", async () => {
+		const { App } = await createComponent(
+			`
+			export function App({ name }) {
+				return <div>Hello {name.value}</div>;
+			}`,
+			{ importSource: customSource }
+		);
+
+		const name = signal("John");
+		await render(<App name={name} />);
+		expect(scratch.innerHTML).to.equal("<div>Hello John</div>");
+
+		await act(() => {
+			name.value = "Jane";
+		});
+		expect(scratch.innerHTML).to.equal("<div>Hello Jane</div>");
+	});
 });

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

@@ -806,4 +806,30 @@ describe("React Signals Babel Transform", () => {
 			});
 		});
 	});
+
+	describe("importSource option", () => {
+		it("imports useSignals from custom source", () => {
+			const inputCode = `
+				const MyComponent = () => {
+					signal.value;
+					return <div>Hello World</div>;
+				};
+			`;
+
+			const expectedOutput = `
+				import { useSignals as _useSignals } from "custom-source";
+				const MyComponent = () => {
+					var _stopTracking = _useSignals();
+					try {
+						signal.value;
+						return <div>Hello World</div>;
+					} finally {
+						_stopTracking();
+					}
+				};
+			`;
+
+			runTest(inputCode, expectedOutput, { importSource: "custom-source" });
+		});
+	});
 });