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);
     },

src/lib/internal/ReactWrapper.svelte

@@ -1,5 +1,6 @@
+import type React from "react";
 import type { ComponentClass, FunctionComponent } from "react";
-import type { Readable } from "svelte/store";
+import type { Readable, Writable } from "svelte/store";
 
 export type ConstructorOf<T> = {
   new (): T;
@@ -57,7 +58,8 @@ export type OmitEventProps<ReactProps> = Omit<
 export type TreeNode = Omit<SvelteInit, "onDestroy"> & {
   svelteInstance: Readable<any>;
   reactComponent: FunctionComponent<any> | ComponentClass<any>;
-  key: string;
+  key: number;
+  hooks: Writable<Array<{ Hook: React.FC; key: number }>>;
   nodes: TreeNode[];
 };
 
@@ -66,5 +68,6 @@ export type SvelteInit = {
   props: Readable<Record<string, any>>;
   target: Readable<HTMLElement | undefined>;
   slot: Readable<HTMLElement | undefined>;
+  hooks: Writable<Array<{ Hook: React.FC; key: number }>>;
   onDestroy: (callback: () => void) => void;
 };

src/lib/internal/types.ts

@@ -13,13 +13,14 @@ let autokey = 0;
 const never = writable() as Readable<any>;
 const target = writable<HTMLElement>();
 const tree: TreeNode = {
-  key: "root",
+  key: autokey,
   svelteInstance: never,
   reactComponent: ({ children }: any) => children,
   target,
   props: writable({}),
   slot: never,
   nodes: [],
+  hooks: writable([]),
 };
 
 type Sveltified<P> = ConstructorOf<SvelteComponentTyped<Omit<P, "children">>>;
@@ -88,12 +89,13 @@ export default function sveltify<P>(
         svelteInit(init: SvelteInit) {
           autokey += 1;
           const node = {
-            key: autokey.toString(),
+            key: autokey,
             svelteInstance,
             reactComponent,
             props: init.props,
             slot: init.slot,
             target: init.target,
+            hooks: init.hooks,
             nodes: [],
           };
           const parent = init.parent ?? tree;

src/lib/sveltify.ts

@@ -1,6 +1,8 @@
 /* eslint-disable  @typescript-eslint/no-unused-vars */
 
 /**
+ * This method does absolutely nothing, it's a no-op
+ *
  * Svelte/TypeScript is not (yet) able to detect usage of the <react:ComponentX> syntax.
  * This causes `X is declared but its value is never read. (ts:6133)` errors.
  *