docs: update react port desc & README

.changeset/perfect-dogs-relax.md

@@ -0,0 +1,5 @@
+---
+'@kaiverse/signal': patch
+---
+
+docs update

README.md

@@ -8,15 +8,15 @@
 <p>A simple reactive system for your Javascript application.<br/>Zero dependency, TypeScript fully supported.</p>
 </div>
 
-[JS Signals proposal](https://github.com/tc39/proposal-signals) is currently in Stage 1. This package draws strong inspiration from [KnockoutJS](https://github.com/knockout/knockout)'s concepts and [SolidJS](https://github.com/solidjs)'s Signal, enabling us to use Signals in vanilla JavaScript.
+This package draws strong inspiration from [KnockoutJS](https://github.com/knockout/knockout)'s concepts and [SolidJS](https://github.com/solidjs)'s Signal, enabling us to use Signals in vanilla JavaScript. [JS Signals proposal](https://github.com/tc39/proposal-signals) is currently in Stage 1.
 
 ## Docs
 
 [Documentation page](packages/signal/README.md)
 
 ## Run this monorepo locally
 
-Please check the root `package.json`'s `engines` field for the env requirement, then run:
+Please check the root [`package.json`](https://github.com/kaisergeX/signal-proxy/blob/main/package.json#L29)'s `engines` field for the env requirement, then run:
 
 ```
 pnpm i

apps/playground/src/hooks/react-signal.ts

@@ -43,15 +43,21 @@ export function useSignal<T>(
 }
 
 /**
- * Signal effect inside a React component.
+ * Signal effect inside React component.
+ * ___
+ * ⚠️ [Experimental] Implementation of React adapter. **DO NOT** use in production. Known issues:
+ * - Some devices has this issue: When there're `N` (N>1) `useSignalEffect` in 1 component, each tracking a diff Signal, and only 1 Signal changes, those effects sometime trigger `N` times.
+ * No idea. The issue might be occurring because of multiple empty deps useEffect.
+ * Reproduce?: Playground page - Hit the "`Local multiplier 4x`" button multiple times
+ *
  * @param effect Imperative function that will run whenever dependencies change. Dependencies are Signals that are used inside the Effect itself.
  */
 export const useSignalEffect = (effect: SignalEffect) => {
-  const [_, forceUpdate] = useReducer((x) => x + 1, 0);
+  // const [_, forceUpdate] = useReducer((x) => x + 1, 0);
 
   useEffect(() => {
     const cleanupEffect = createEffect(effect);
-    forceUpdate();
+    // forceUpdate();
     return () => cleanupEffect();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

apps/playground/src/routes/signal/-components/PlaygroundChild3.tsx

@@ -6,20 +6,20 @@ const [globalCount] = playgroundSignal;
 
 createEffect(() => {
   console.log(
-    '%c[createEffect] PlaygroundChild3',
+    '%c[createEffect] Child3',
     'color: #f9fafb; background-color: #0ea5e9;',
-    `Global Signal value = ${globalCount()}`,
+    `globalCount = ${globalCount()}`,
   );
 });
 
 const PlaygroundChild3 = () => {
-  const computedCount = useComputed(globalCount);
+  const doubledGlobalCount = useComputed(() => globalCount() * 2);
 
   return (
     <div className="h-full rounded-lg p-4 shadow">
       <h3>PlaygroundChild 3</h3>
 
-      <pre className="my-4">Global Signal value: {computedCount()}</pre>
+      <code className="my-4 block">Global count doubled value: {doubledGlobalCount()}</code>
     </div>
   );
 };

apps/playground/src/routes/signal/route.lazy.tsx

@@ -13,16 +13,21 @@ const [globalCount, setGlobalCount] = playgroundSignal;
 function PlaygroundChild1() {
   const [multiple, setMultiple] = useSignal(1);
   const [count, setCount] = useState(0);
+  const isUnSafeInterger = multiple() >= Number.MAX_SAFE_INTEGER;
 
   useSignalEffect(() => {
-    console.log('%c[useSignalEffect]', 'color:#059669', `Local Signal value = ${multiple()}`);
+    console.log(
+      '%c[useSignalEffect] Child1',
+      'color:#059669',
+      `Local Signal value = ${multiple()}`,
+    );
   });
 
   useSignalEffect(() => {
     console.log(
-      '%c[useSignalEffect]',
+      '%c[useSignalEffect] Child1',
       'color:white;background-color:#059669',
-      `Global Signal value = ${globalCount()}`,
+      `globalCount = ${globalCount()}`,
     );
   });
 
@@ -58,16 +63,23 @@ function PlaygroundChild1() {
       </pre>
 
       <h2 className="mt-4 mb-2">Signal update:</h2>
-      <button className="button mr-2" type="button" onClick={() => setMultiple(multiple() * 2)}>
-        Local multiplier 2x
-      </button>
-      <button
-        className="button-secondary"
-        type="button"
-        onClick={() => setGlobalCount(globalCount() + 1)}
-      >
-        Global counter ++
-      </button>
+      <div className="flex flex-wrap items-center gap-2">
+        <button
+          className="button"
+          type="button"
+          onClick={() => setMultiple((v) => v * 4)}
+          disabled={isUnSafeInterger}
+        >
+          {isUnSafeInterger ? 'Greater than MAX_SAFE_INTEGER' : 'Local multiplier 4x'}
+        </button>
+        <button
+          className="button-secondary"
+          type="button"
+          onClick={() => setGlobalCount(globalCount() + 1)}
+        >
+          Global counter ++
+        </button>
+      </div>
 
       <h2 className="mt-4 mb-2">State update:</h2>
       <button className="button mr-2" type="button" onClick={() => setCount((c) => c + 1)}>
@@ -78,7 +90,7 @@ function PlaygroundChild1() {
 }
 
 function PlaygroundChild2() {
-  const doubledGlobalCount = useComputed(() => globalCount() * 2);
+  const computedGlobalCount = useComputed(globalCount);
 
   // @todo fix useSignal setter causing rerender twice on strict mode
   // const [_, forceRerender] = useSignal(undefined, {equals: false});
@@ -88,7 +100,7 @@ function PlaygroundChild2() {
     <div className="h-full rounded-lg p-4 shadow">
       <h3>PlaygroundChild 2</h3>
 
-      <code className="my-4 block">Global count doubled value: {doubledGlobalCount()}</code>
+      <code className="my-4 block">Global Signal value: {computedGlobalCount()}</code>
 
       {/* <button className="button mr-2" type="button" onClick={() => forceRerender()}>
         Force rerender

packages/signal/README.md

@@ -6,7 +6,7 @@
 <p>A simple reactive system for your Javascript application.<br/>Zero dependency, TypeScript fully supported.</p>
 </div>
 
-[JS Signals proposal](https://github.com/tc39/proposal-signals) is currently in Stage 1. This package draws strong inspiration from [KnockoutJS](https://github.com/knockout/knockout)'s concepts and [SolidJS](https://github.com/solidjs)'s Signal, enabling us to use Signals in vanilla JavaScript.
+This package draws strong inspiration from [KnockoutJS](https://github.com/knockout/knockout)'s concepts and [SolidJS](https://github.com/solidjs)'s Signal, enabling us to use Signals in vanilla JavaScript. [JS Signals proposal](https://github.com/tc39/proposal-signals) is currently in Stage 1.
 
 ## Installation
 
@@ -16,8 +16,6 @@
 npm i @kaiverse/signal
 ```
 
-or
-
 ```
 pnpm add @kaiverse/signal
 ```
@@ -28,33 +26,33 @@ pnpm add @kaiverse/signal
 deno add @kaiverse/signal
 ```
 
-or
-
 ```
 npx jsr add @kaiverse/signal
 ```
 
-or
-
 ```
 pnpm dlx jsr add @kaiverse/signal
 ```
 
-### Via `unpkg` CDN:
+### Via CDN:
 
 ```
 unpkg.com/@kaiverse/signal
 ```
 
 ## Compatibility
 
-Signal is a [**Proxy**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy) object at its core, please check [compatibility section](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy#browser_compatibility).
+Signal is a [`Proxy`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy) object at its core, please check [compatibility section](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy#browser_compatibility).
+
+## Documentation
+
+[Functions & Types](https://jsr.io/@kaiverse/signal/doc)
 
 ## Example
 
 [Playground source code](https://github.com/kaisergeX/signal-proxy/blob/main/packages/signal/src/playground/index.ts)
 
-### Use Signal Proxy
+### 🔗Signal Proxy
 
 ````js
 /**
@@ -90,7 +88,9 @@ function fetchNextUser() {
 }
 ````
 
-### Signal utilities examples
+### 🚦Signal utilities
+
+If you have experience with SolidJS or ReactJS, you'll find these utility functions very familiar.
 
 ```js
 import {createComputed, createEffect, createSignal} from '@kaiverse/signal';
@@ -117,8 +117,8 @@ createEffect(() => {
 
 ### React
 
-[Experimental] [React signal hooks](https://github.com/kaisergeX/signal-proxy/blob/main/apps/playground/src/hooks/react-signal.ts) implementation. **DO NOT** use in production.
+[React signal hooks](https://github.com/kaisergeX/signal-proxy/blob/main/apps/playground/src/hooks/react-signal.ts) implementation. Experimental. **DO NOT** use in production.
 
 <small>Those hooks work, but its lack of testing and seems that the usage of memory is inefficient. An alternative approach may be better. Please feel free to open PRs. Your contributions are welcomed and appreciated.</small>
 
-[React playground source code](https://github.com/kaisergeX/signal-proxy/blob/main/apps/playground/src/routes/signal/route.lazy.tsx)
+[React playground](https://codesandbox.io/p/devbox/kaiverse-signal-react-port-c7sp3v) (codesandbox) - [source code](https://github.com/kaisergeX/signal-proxy/blob/main/apps/playground/src/routes/signal/route.lazy.tsx)

packages/signal/jsr.json

@@ -1,6 +1,6 @@
 {
     "name": "@kaiverse/signal",
-    "version": "0.2.1+001",
+    "version": "0.2.2",
     "exports": "./src/index.ts",
     "publish": {
         "exclude": [