docs: add react hooks bundle size

Author: crimx

.export-size-svg.mjs

@@ -47,5 +47,10 @@ export default defineConfig({
       code: "export { reactiveMap } from './src/collections/reactiveMap.ts';export { reactiveSet } from './src/collections/reactiveSet.ts';export { reactiveArray } from './src/collections/reactiveArray.ts'",
       externals: ["../batch", "../readable", "../utils"],
     },
+    {
+      title: "React Hooks",
+      code: "export * from './src/react/index.ts'",
+      externals: ["@embra/reactivity", "react"],
+    },
   ],
 });

src/react/useCombine.ts

@@ -1,5 +1,7 @@
 import {
   combine,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type Readable,
   type Config,
   type MapReadablesToValues,
   type OwnedReadable,
@@ -39,7 +41,7 @@ export interface UseCombine {
  * In other words, no extra care is needed to use this in React components. All args will be updated properly.
  *
  * @example
- * ```jsx
+ * ```tsx
  * import { useCombine, useValue } from "@embra/reactivity/react";
  *
  * function App({ width$, height$ }) {

src/react/useCombined.ts

@@ -1,4 +1,10 @@
-import { type Config, type MapReadablesToValues, type ReadableLike } from "@embra/reactivity";
+import {
+  type Config,
+  type MapReadablesToValues,
+  type ReadableLike,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type Readable,
+} from "@embra/reactivity";
 
 import { useCombine } from "./useCombine";
 import { useValue } from "./useValue";
@@ -31,7 +37,7 @@ export interface UseCombined {
  * In other words, no extra care is needed to use this in React components. All args will be updated properly.
  *
  * @example
- * ```jsx
+ * ```tsx
  * import { useCombined } from "@embra/reactivity/react";
  *
  * function App({ width$, height$ }) {

src/react/useDerive.ts

@@ -1,6 +1,8 @@
 import {
   derive,
   strictEqual,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type Readable,
   type Config,
   type OwnedReadable,
   type ReadableLike,
@@ -58,7 +60,7 @@ export interface UseDerive {
  * In other words, no extra care is needed to use this in React components. All args will be updated properly.
  *
  * @example
- * ```jsx
+ * ```tsx
  * import { useDerive, useValue } from "@embra/reactivity/react";
  *
  * function App({ position3d$ }) {

src/react/useDerived.ts

@@ -1,4 +1,9 @@
-import { type Config, type ReadableLike } from "@embra/reactivity";
+import {
+  type Config,
+  type ReadableLike,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type Readable,
+} from "@embra/reactivity";
 
 import { useDerive } from "./useDerive";
 import { useValue } from "./useValue";
@@ -37,7 +42,7 @@ export interface UseDerived {
  * In other words, no extra care is needed to use this in React components. All args will be updated properly.
  *
  * @example
- * ```jsx
+ * ```tsx
  * import { useDerived } from "@embra/reactivity/react";
  *
  * function App({ position3d$ }) {

src/react/useValue.ts

@@ -1,8 +1,13 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { type Readable, type ReadableLike, type Unwrap, getReadable } from "@embra/reactivity";
+import {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type Readable,
+  type ReadableLike,
+  type Unwrap,
+  getReadable,
+} from "@embra/reactivity";
 import { useDebugValue, useMemo, useSyncExternalStore } from "react";
 
-interface UseValue {
+export interface UseValue {
   /**
    * Accepts a {@link ReadableLike} and returns the latest value.
    * It only triggers re-rendering when new value emitted from $ (base on {@link Readable.$version} instead of React's `Object.is` comparison).
@@ -38,7 +43,7 @@ const defaultArgs = [returnsNoop, returnsNoop as () => any] as const;
  * @returns the value of the {@link ReadableLike}, or $ itself if $ is not a {@link ReadableLike}
  *
  * @example
- * ```jsx
+ * ```tsx
  * import { useValue } from "@embra/reactivity/react";
  *
  * function App({ count$ }) {