refactor: Easer access to utlitites

- Removed default export: update to `import preprocessReact to "svelte-preprocess/preprocessReact"`
- Direct export utilities
- Documented utlitites
- Removed useWritable and rename useReadable to useStore

Author: Bob Fanger

CHANGELOG.md

@@ -0,0 +1 @@
+Visit https://github.com/bfanger/svelte-preprocess-react/releases for the release notes.

Readme.md README.mdReadme.md renamed to README.md

@@ -62,7 +62,7 @@ npm install svelte-preprocess-react
 
 ```js
 // svelte.config.js
-import preprocessReact from "svelte-preprocess-react";
+import preprocessReact from "svelte-preprocess-react/preprocessReact";
 
 export default {
   preprocess: preprocessReact(),
@@ -74,7 +74,7 @@ When using other processors like [svelte-preprocess]() use:
 ```js
 // svelte.config.js
 import preprocess from "svelte-preprocess";
-import preprocessReact from "svelte-preprocess-react";
+import preprocessReact from "svelte-preprocess-react/preprocessReact";
 
 export default {
   preprocess: preprocessReact({
@@ -93,7 +93,7 @@ The preprocessor that is passed as an option is applied before running the prepr
 Once you've converted a React component to Svelte, you'd want delete that React component, but some if other React components depended on that component you can use `reactify` to use the new Svelte component as a React component.
 
 ```jsx
-import reactify from "$lib/reactify";
+import { reactify } from "resvelte-preprocess-react";
 import ButtonSvelte from "../components/Button.svelte";
 
 const Button = reactify(ButtonSvelte);

docs/architecture.md

@@ -1,3 +1,7 @@
+# Architecture
+
+This document describes design desicions and implementation details of the preprocessor.
+
 ## Context
 
 ```jsx
@@ -10,7 +14,7 @@
 </App>
 ```
 
-Both svelte and react have component trees, for context to work in both Svelte needs to act as if the tree is:
+Both Svelte and React have component trees, for context to work in both, Svelte needs to act as if the tree is:
 
 ```jsx
 <App>
@@ -28,7 +32,7 @@ and React needs to act as if the tree is:
 
 ### Client mode
 
-sveltifyReact create a single React Root and based on the Hierachy of the ReactWrapper components we/re abel to built the react tree:
+sveltifyReact creates a single React Root and based on the Hierachy of the ReactWrapper components we're able to built the React tree:
 
 ```jsx
 <Bridge>
@@ -42,6 +46,9 @@ sveltifyReact create a single React Root and based on the Hierachy of the ReactW
 
 The `<Bridge>`s use React Portals to render the components into the DOM of the ReactWrapper Svelte component.
 
+This is why the childeren prop passed to your React is an array, even when you manually pass a children prop.
+This array allows svelte-preprocess-react to inject the slotted content into the correct place in the React tree.
+
 ### Server mode
 
 Based off on how the Svelte component is compiled we can detect SSR and utitilize the renderToString method th generate the html. (limited to leaf nodes a.t.m.)

docs/utilities.md

@@ -0,0 +1,64 @@
+# 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.
+
+## 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.

package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/bfanger/svelte-preprocess-react.git"
   },
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "type": "module",
   "scripts": {

src/lib/index.ts

@@ -1,3 +1,3 @@
-import preprocessReact from "./preprocess.js";
-
-export default preprocessReact;
+export { default as useStore } from "./useStore.js";
+export { default as reactify } from "./reactify.js";
+export { default as sveltify } from "./sveltify.js";

src/lib/internal/Bridge.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 import { createElement } from "react";
-import useReadable from "../useReadable.js";
+import useStore from "../useStore.js";
 import SvelteToReactContext from "./SvelteToReactContext.js";
 import Child from "./Child.js";
 import type { TreeNode } from "./types";
@@ -14,9 +14,9 @@ export type BridgeProps = {
   node: TreeNode;
 };
 const Bridge: React.FC<BridgeProps> = ({ createPortal, node }) => {
-  const target = useReadable(node.target);
-  let props = useReadable(node.props);
-  const slot = useReadable(node.slot);
+  const target = useStore(node.target);
+  let props = useStore(node.props);
+  const slot = useStore(node.slot);
 
   if (!target) {
     return null;

src/lib/preprocess.ts src/lib/preprocessReact.tssrc/lib/preprocess.ts renamed to src/lib/preprocessReact.ts

@@ -1,9 +1,19 @@
-import { useEffect as useLayoutEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { get, type Readable } from "svelte/store";
 
-export default function useReadable<T>(store: Readable<T>): T {
+/**
+ * Hook for using Svelte stores in React.
+ *
+ * Usage:
+ *
+ * const User: React.FC = () => {
+ *   const $user = useStore(userStore);
+ *   return <h1>Hello, {$user.name}</h1>;
+ * }
+ */
+export default function useStore<T>(store: Readable<T>): T {
   const [value, setValue] = useState(() => get(store));
-  useLayoutEffect(() => {
+  useEffect(() => {
     let first = true;
     const cancel = store.subscribe((next) => {
       if (first) {