feat: Signal based hooks()

Closes #50

Author: bfanger

docs/hooks.md

@@ -1,7 +1,6 @@
 # hooks
 
 Using React hooks inside Svelte components.
-Because React doesn't have a synchronous render (by-design), the initial value of the store will be `undefined`.
 
 The `hooks()` function uses Svelte lifecycle functions, so you can only call the function during component initialization.
 
@@ -11,29 +10,28 @@ The `hooks()` function uses Svelte lifecycle functions, so you can only call the
 <script lang="ts">
   import { hooks } from "svelte-preprocess-react";
 
-  const store = hooks(() => useState(0));
+  const [count, setCount] = $derived.by(hooks(() => useState(0)));
 </script>
 
-{#if $store}
-  {@const [count, setCount] = $store}
-  <h2>Count: {count}</h2>
-  <button onclick={() => setCount(count + 1)}>+</button>
-{/if}
+<h2>Count: {count}</h2>
+<button onclick={() => setCount(count + 1)}>+</button>
 ```
 
-What is returned from the hook becomes the value of the store, so to calling multiple hooks is fine, but [the rules of hooks](https://reactjs.org/docs/hooks-rules.html) still apply.
+hooks() returns a function, when that function retrieves the reactive state, by using $derived.by, the updates from React are applied. Inside the callback you can call multiple hooks, but [the rules of hooks](https://reactjs.org/docs/hooks-rules.html) still apply.
 
 ```ts
-const store = hooks(() => {
-  const multiplier = useContext(MultiplierContext);
-  const [count, setCount] = useState(0);
-  return {
-    multiply: () => setCount(count * multiplier),
-    reset: () => setCount(0),
-  };
-});
+const actions = $derived.by(
+  hooks(() => {
+    const multiplier = useContext(MultiplierContext);
+    const [count, setCount] = useState(0);
+    return {
+      multiply: () => setCount(count * multiplier),
+      reset: () => setCount(0),
+    };
+  }),
+);
 
 function onReset() {
-  $store?.reset();
+  actions.reset();
 }
 ```

src/lib/global.d.ts

@@ -19,7 +19,7 @@ declare global {
     [K in keyof T]: Sveltified<T[K]> & StaticPropComponents;
   } & IntrinsicElementComponents;
 
-  function hooks<T>(callback: () => T): Readable<T | undefined>;
+  function hooks<T>(callback: () => T): (() => T) & Readable<T>;
 
   const react: IntrinsicElementComponents & {
     [component: string]: Component & StaticPropComponents;

src/lib/hooks.svelte.ts

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { getContext, onDestroy } from "svelte";
+import { type Readable, writable } from "svelte/store";
+import type { ReactDependencies, TreeNode } from "./internal/types";
+import type { Root } from "react-dom/client";
+
+type Dependencies = Omit<ReactDependencies, "createPortal">;
+
+export default function hooks<T>(
+  callback: () => T,
+  dependencies?: Dependencies,
+): (() => T) & Readable<T> {
+  let state = $state<T>();
+  const store = writable<T>();
+
+  const parent = getContext<TreeNode | undefined>("ReactWrapper");
+
+  function Hook() {
+    state = callback();
+    store.set(state);
+    return null;
+  }
+
+  if (!dependencies || !dependencies.ReactDOM || !dependencies.flushSync) {
+    throw new Error(
+      "{ ReactDOM, flushSync } are not injected, check svelte.config.js for: `preprocess: [preprocessReact()],`",
+    );
+  }
+  if (parent) {
+    const hook = { Hook, key: autoKey(parent) };
+    parent.hooks.push(hook);
+
+    dependencies.flushSync(() => {
+      parent.rerender?.("hooks");
+    });
+
+    onDestroy(() => {
+      const index = parent.hooks.findIndex((h) => h === hook);
+      if (index !== -1) {
+        parent.hooks.splice(index, 1);
+      }
+    });
+  } else {
+    onDestroy(standalone(Hook, dependencies));
+  }
+  let subscribe = (fn: (value: T | undefined) => void) => {
+    console.warn(
+      "Using a hooks() as store is deprecated, instead use $derived.by: `let [state, setState] = $derived.by(hooks(() => useState(1)));`",
+    );
+    subscribe = store.subscribe;
+    return store.subscribe(fn);
+  };
+  function signal() {
+    return state;
+  }
+  signal.subscribe = (fn: (value: T | undefined) => void) => {
+    return subscribe(fn);
+  };
+  return signal as any;
+}
+
+function standalone(Hook: React.FC, dependencies: Dependencies) {
+  const { renderToString, ReactDOM, flushSync } = dependencies;
+  if (typeof document === "undefined") {
+    if (!renderToString) {
+      throw new Error("renderToString parameter is required for SSR");
+    }
+    renderToString(React.createElement(Hook));
+    return () => {};
+  }
+  const el = document.createElement("react-hooks");
+  let root: Root | undefined;
+  if ("createRoot" in ReactDOM) {
+    root = ReactDOM.createRoot?.(el);
+    flushSync(() => {
+      root?.render(React.createElement(Hook));
+    });
+  } else {
+    ReactDOM.render(React.createElement(Hook), el);
+  }
+  return () => {
+    if (root) {
+      root.unmount();
+    } else if ("unmountComponentAtNode" in ReactDOM) {
+      ReactDOM.unmountComponentAtNode(el);
+    }
+  };
+}
+
+const keys = new WeakMap();
+/**
+ * Get incrementing number per node.
+ */
+function autoKey(node: TreeNode | undefined) {
+  if (!node) {
+    return -1;
+  }
+  let key: number | undefined = keys.get(node);
+  if (key === undefined) {
+    key = 0;
+  } else {
+    key += 1;
+  }
+  keys.set(node, key);
+  return key;
+}

src/lib/hooks.ts

@@ -1,6 +1,6 @@
 /// <reference types="./global" />
 
-export { default as hooks } from "./hooks.js";
+export { default as hooks } from "./hooks.svelte.js";
 export { default as reactify } from "./reactify.js";
 export { default as sveltify } from "./sveltify.svelte.js";
 export { default as used } from "./used.js";

src/lib/index.ts

@@ -6,19 +6,21 @@ import portalTag from "svelte-preprocess-react/internal/portalTag.js";
 
 type BridgeProps = {
   node: TreeNode;
-  createPortal?: ReactDependencies["createPortal"];
+  createPortal: ReactDependencies["createPortal"];
+  source?: "hooks";
 };
-const Bridge: React.FC<BridgeProps> = ({ node, createPortal }) => {
+const Bridge: React.FC<BridgeProps> = ({ node, createPortal, source }) => {
   const fresh = useRef(false);
-  const [result, setResult] = useState<React.ReactNode>(() =>
-    renderBridge(node, createPortal, true),
-  );
+  const mounted = useRef(false);
+  const [result, setResult] = useState<React.ReactNode>(() => {
+    return renderBridge(node, createPortal, mounted, source);
+  });
   useEffect(
     () =>
       $effect.root(() => {
         $effect(() => {
           fresh.current = true;
-          setResult(renderBridge(node, createPortal, false));
+          setResult(renderBridge(node, createPortal, mounted, source));
         });
       }),
     [],
@@ -27,13 +29,14 @@ const Bridge: React.FC<BridgeProps> = ({ node, createPortal }) => {
     fresh.current = false;
     return result;
   }
-  return renderBridge(node, createPortal, false);
+  return renderBridge(node, createPortal, mounted, source);
 };
 
 function renderBridge(
   node: TreeNode,
   createPortal: BridgeProps["createPortal"],
-  initialRender: boolean,
+  mounted: { current: boolean },
+  source?: "hooks",
 ) {
   let { children } = node.props;
   const props = { ...node.props.reactProps };
@@ -74,13 +77,13 @@ function renderBridge(
       ? createElement(node.reactComponent, props)
       : createElement(node.reactComponent, props, children),
   );
-  if (portalTarget && createPortal) {
-    if (initialRender) {
+  if (portalTarget) {
+    if (source !== "hooks" && mounted.current === false) {
       portalTarget.innerHTML = ""; // Remove injected SSR content
+      mounted.current = true;
     }
     return createPortal(vdom, portalTarget);
   }
-
   return createElement(
     portalTag("react", "portal", "source", node.key),
     { style: { display: "none" } },

src/lib/internal/Bridge.svelte.ts

@@ -59,7 +59,7 @@ export type TreeNode = SvelteInit & {
   key: string;
   autoKey: number;
   nodes: TreeNode[];
-  rerender?: () => void;
+  rerender?: (source?: "hooks") => void;
   unroot?: () => void;
 };
 
@@ -108,12 +108,14 @@ export type ReactDependencies = {
       }
     | {
         render(component: React.ReactNode, container: Element): void; // React 17 and below
+        unmountComponentAtNode(container: Element): void;
       };
   createPortal: (
     children: React.ReactNode,
     container: Element | DocumentFragment,
     key?: null | string,
   ) => React.ReactPortal;
+  flushSync: (cb: () => void) => void;
   renderToString?: typeof ReactDOMServer.renderToString;
 };