feat: Using React Hooks inside Svelte components

Fixes #14

Author: bfanger

README.md

@@ -9,6 +9,7 @@ Supports:
 - Nesting (Slot & Children)
 - Contexts
 - SSR
+- Hooks ([useStore](./docs/useStore.md) & [hooks](./docs/hooks.md))
 
 # "Embrace, extend and extinguish"
 

docs/hooks.md

@@ -0,0 +1,39 @@
+# hooks
+
+Using React hooks inside Svelte components.
+Because React doesn't have an synchronous render anymore (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.
+
+### Usage:
+
+```svelte
+<script lang="ts">
+  import { hooks } from "$lib";
+
+  const store = hooks(() => useState(0));
+</script>
+
+{#if $store}
+  {@const [count, setCount] = $store}
+  <h2>Count: {count}</h2>
+  <button on:click={() => setCount(count + 1)}>+</button>
+{/if}
+```
+
+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.
+
+```ts
+const store = hooks(() => {
+  const multiplier = useContext(MultiplierContext);
+  const [count, setCount] = useState(0);
+  return {
+    multiply: () => setCount(count * multiplier),
+    reset: () => setCount(0),
+  };
+});
+
+function onReset() {
+  $store?.reset();
+}
+```

docs/reactify.md

@@ -0,0 +1,26 @@
+## reactify
+
+Convert a Svelte component into an React component.
+
+### Usage:
+
+```ts
+import { reactify } from "svelte-preprocess-react";
+import ButtonSvelte from "$lib/components/Button.svelte";
+
+const Button = reactify(ButtonSvelte);
+
+type Props = {
+  onClose: () => void;
+};
+const Dialog: React.FC<Props> = ({ onClose }) => (
+  <div className="dialog">
+    <h2>Thanks for subscribing!</h2>
+    <Button type="primary" onClick={() => onClose()}>
+      Close
+    </Button>
+  </div>
+);
+```
+
+React only has props, we we asume that the props starting with "on" followed by a capital letter are event handlers.

docs/useStore.md

@@ -0,0 +1,34 @@
+## useStore
+
+useStore is a React hook that allows using a Svelte Store in a React component.
+
+### Usage:
+
+```ts
+import { useStore } from "svelte-preprocess-react";
+const userStore = writable({ name: "John Doe" });
+
+const UserGreet: React.FC = () => {
+  const $user = useStore(userStore);
+  return <h1>Hello, {$user.name}</h1>;
+};
+export default UserGreet;
+```
+
+When the Svelte Store is updated the component will rerender and receive the new value from the useStore hook.
+
+### Writable stores
+
+Inside a Svelte component `$user = { name:'Jane Doe' }` or `$user.name = 'Jane Doe'` will trigger an update.
+In React and other regular javascript files this does _not_ work.
+To update the value and trigger an update use the `set` or `update` methods:
+
+```ts
+// Instead of `$user = { name:'Jane Doe' }`
+user.set({ name: "Jane Doe" });
+
+// Instead of `$user.name = 'Jane Doe'`
+user.update((user) => ({ ...user, name: "Jane Doe" }));
+```
+
+See https://svelte.dev/docs#run-time-svelte-store for more information.

docs/utilities.md

@@ -1,64 +1,7 @@
 # Utilities
 
-svelte-preprocess-react comes with a utilities to make using Svelte primitives inside React components easier.
-And to make using React primitives inside Svelte components easier.
+svelte-preprocess-react comes with utilities to make using Svelte primitives inside React components easier and vice versa.
 
-## reactify
-
-Convert a Svelte component into an React component.
-
-### Usage:
-
-```ts
-import ButtonSvelte from "$lib/components/Button.svelte";
-const Button = reactify(ButtonSvelte);
-
-type Props = {
-  onClose: () => void;
-};
-const Dialog: React.FC<Props> = ({ onClose }) => (
-  <div className="dialog">
-    <h2>Thanks for subscribing!</h2>
-    <Button type="primary" onClick={() => onClose()}>
-      Close
-    </Button>
-  </div>
-);
-```
-
-React only has props, we we asume that the props starting with "on" followed by a capital letter are event handlers.
-
-## useStore
-
-useStore is a React hook that allows using a Svelte Store in a React component.
-
-### Usage:
-
-```ts
-import { useStore } from "svelte-preprocess-react";
-const userStore = writable({ name: "John Doe" });
-
-const UserGreet: React.FC = () => {
-  const $user = useStore(userStore);
-  return <h1>Hello, {$user.name}</h1>;
-};
-export default UserGreet;
-```
-
-When the Svelte Store is updated the component will rerender and receive the new value from the useStore hook.
-
-### Writable stores
-
-Inside a Svelte component `$user = { name:'Jane Doe' }` or `$user.name = 'Jane Doe'` will trigger an update.
-In React and other regular javascript files this does _not_ work.
-To update the value and trigger an update use the `set` or `update` methods:
-
-```ts
-// Instead of `$user = { name:'Jane Doe' }`
-user.set({ name: "Jane Doe" });
-
-// Instead of `$user.name = 'Jane Doe'`
-user.update((user) => ({ ...user, name: "Jane Doe" }));
-```
-
-See https://svelte.dev/docs#run-time-svelte-store for more information.
+- [reactify](./reactify.md) - Create a React component from a Svelte component
+- [useStore](./useStore.md) - Use a Svelte store in a React component
+- [hooks](./hooks.md) - Use React hooks in a Svelte component

src/lib/Hook.svelte

@@ -0,0 +1,77 @@
+import React, { createElement } from "react";
+import { writable, type Readable } from "svelte/store";
+import type ReactDOMServer from "react-dom/server";
+import { getContext, onDestroy } from "svelte";
+import type { TreeNode } from "./internal/types";
+
+export default function hooks<T>(
+  callback: () => T,
+  ReactDOMClient?: any,
+  renderToString?: typeof ReactDOMServer.renderToString
+): Readable<T | undefined> {
+  const store = writable<T | undefined>();
+
+  const parent = getContext<TreeNode | undefined>("ReactWrapper");
+  function Hook() {
+    store.set(callback());
+    return null;
+  }
+
+  if (parent) {
+    const hook = { Hook, key: getKey(parent) };
+    parent.hooks.update(($hooks) => [...$hooks, hook]);
+    onDestroy(() => {
+      parent.hooks.update(($hooks) => $hooks.filter((entry) => entry !== hook));
+    });
+  } else if (ReactDOMClient) {
+    onDestroy(standalone(Hook, ReactDOMClient, renderToString));
+  } else if (typeof window !== "undefined") {
+    throw new Error(
+      "The ReactDOMClient parameter is required for hooks(), because no parent component was a sveltified React component"
+    );
+  }
+  return store;
+}
+
+function standalone(
+  Hook: React.FC,
+  ReactDOMClient: any,
+  renderToString?: typeof ReactDOMServer.renderToString
+) {
+  if (typeof document === "undefined") {
+    if (!renderToString) {
+      throw new Error("renderToString parameter is required for SSR");
+    }
+    renderToString(createElement(Hook));
+    return () => {};
+  }
+  const el = document.createElement("react-hooks");
+  const root = ReactDOMClient.createRoot?.(el);
+  if (root) {
+    root.render(createElement(Hook));
+  } else {
+    ReactDOMClient.render(createElement(Hook), el);
+  }
+  return () => {
+    if (root) {
+      root.unmount();
+    } else {
+      ReactDOMClient.unmountComponentAtNode(el);
+    }
+  };
+}
+
+const autokeys = new WeakMap();
+function getKey(node: TreeNode | undefined) {
+  if (!node) {
+    return undefined;
+  }
+  let autokey = autokeys.get(node);
+  if (autokey === undefined) {
+    autokey = 0;
+  } else {
+    autokey += 1;
+  }
+  autokeys.set(node, autokey);
+  return autokey;
+}

src/lib/hooks.ts

@@ -1,4 +1,5 @@
 export { default as useStore } from "./useStore.js";
 export { default as reactify } from "./reactify.js";
 export { default as sveltify } from "./sveltify.js";
-export { default as Hook } from "./Hook.svelte";
+export { default as used } from "./used.js";
+export { default as hooks } from "./hooks.js";

src/lib/index.ts

@@ -17,6 +17,7 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
   const target = useStore(node.target);
   let props = useStore(node.props);
   const slot = useStore(node.slot);
+  const hooks = useStore(node.hooks);
 
   if (!target) {
     return null;
@@ -36,6 +37,11 @@ const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
   if (slot) {
     children.push(createElement(Child, { key: "svelte-slot", el: slot }));
   }
+  if (hooks.length >= 0) {
+    children.push(
+      ...hooks.map(({ Hook, key }) => createElement(Hook, { key }))
+    );
+  }
   return createPortal(
     createElement(
       SvelteToReactContext.Provider,

src/lib/internal/Bridge.ts

@@ -2,12 +2,14 @@
   import { writable } from "svelte/store";
   import { beforeUpdate, getContext, onDestroy, setContext } from "svelte";
   import type { SvelteInit, TreeNode } from "./types";
+  import type React from "react";
 
   export let svelteInit: (options: SvelteInit) => TreeNode;
 
   const props = writable<Record<string, any>>(extractProps($$props));
   const target = writable<HTMLElement | undefined>();
   const slot = writable<HTMLElement | undefined>();
+  const hooks = writable<Array<{ Hook: React.FC; key: number }>>([]);
   const listeners: Array<() => void> = [];
 
   const parent = getContext<TreeNode | undefined>("ReactWrapper");
@@ -17,6 +19,7 @@
     props,
     target,
     slot,
+    hooks,
     onDestroy(callback) {
       listeners.push(callback);
     },