diff --git a/.changeset/perfect-dogs-relax.md b/.changeset/perfect-dogs-relax.md new file mode 100644 index 0000000..5ef4ae5 --- /dev/null +++ b/.changeset/perfect-dogs-relax.md @@ -0,0 +1,5 @@ +--- +'@kaiverse/signal': patch +--- + +docs update diff --git a/README.md b/README.md index ba6ba4d..0836837 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@

A simple reactive system for your Javascript application.
Zero dependency, TypeScript fully supported.

-[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 @@ -16,7 +16,7 @@ ## 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 diff --git a/apps/playground/src/hooks/react-signal.ts b/apps/playground/src/hooks/react-signal.ts index c3c8d2e..76fdc26 100644 --- a/apps/playground/src/hooks/react-signal.ts +++ b/apps/playground/src/hooks/react-signal.ts @@ -43,15 +43,21 @@ export function useSignal( } /** - * 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 }, []); diff --git a/apps/playground/src/routes/signal/-components/PlaygroundChild3.tsx b/apps/playground/src/routes/signal/-components/PlaygroundChild3.tsx index a57b266..210c9ad 100644 --- a/apps/playground/src/routes/signal/-components/PlaygroundChild3.tsx +++ b/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 (

PlaygroundChild 3

- 
Global Signal value: {computedCount()}
+ Global count doubled value: {doubledGlobalCount()}
); }; diff --git a/apps/playground/src/routes/signal/route.lazy.tsx b/apps/playground/src/routes/signal/route.lazy.tsx index 5795919..fcbd6d5 100644 --- a/apps/playground/src/routes/signal/route.lazy.tsx +++ b/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() {

Signal update:

- - +
+ + +

State update: