signalium 0.3.8 → 1.0.1

package/src/react/__tests__/basic.test.tsx

@@ -0,0 +1,95 @@
+import { beforeEach, describe, expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { state, reactive, createContext, useContext } from 'signalium';
+import { ContextProvider, setupReact, useStateSignal } from '../index.js';
+import React, { useState } from 'react';
+import { userEvent } from '@vitest/browser/context';
+import { sleep } from '../../__tests__/utils/async.js';
+
+setupReact();
+
+describe('React > basic', () => {
+  test('basic state usage works', async () => {
+    const value = state('Hello');
+
+    function Component(): React.ReactNode {
+      return <div>{value.get()}</div>;
+    }
+
+    const { getByText } = render(<Component />);
+
+    await expect.element(getByText('Hello')).toBeInTheDocument();
+
+    value.set('World');
+
+    await expect.element(getByText('World')).toBeInTheDocument();
+  });
+
+  test('useStateSignal works', async () => {
+    function Component(): React.ReactNode {
+      const value = useStateSignal('Hello');
+
+      return (
+        <div>
+          {value.get()}
+          <button onClick={() => value.set('World')}>Toggle</button>
+        </div>
+      );
+    }
+
+    const { getByText } = render(<Component />);
+
+    await expect.element(getByText('Hello')).toBeInTheDocument();
+
+    await userEvent.click(getByText('Toggle'));
+
+    await expect.element(getByText('World')).toBeInTheDocument();
+  });
+
+  test('basic computed usage works', async () => {
+    const value = state('Hello');
+
+    const derived = reactive(() => `${value.get()}, World`);
+
+    function Component(): React.ReactNode {
+      return <div>{derived()}</div>;
+    }
+
+    const { getByText } = render(<Component />);
+
+    await expect.element(getByText('Hello, World')).toBeInTheDocument();
+
+    value.set('Hey');
+
+    await expect.element(getByText('Hey, World')).toBeInTheDocument();
+  });
+
+  test('computed updates when params change', async () => {
+    const value = state('Hello');
+
+    const derived = reactive((universe: boolean) => `${value.get()}, ${universe ? 'Universe' : 'World'}`);
+
+    function Component(): React.ReactNode {
+      const [universe, setUniverse] = useState(true);
+
+      return (
+        <div>
+          {derived(universe)}
+          <button onClick={() => setUniverse(!universe)}>Toggle Universe</button>
+        </div>
+      );
+    }
+
+    const { getByText } = render(<Component />);
+
+    await expect.element(getByText('Hello, Universe')).toBeInTheDocument();
+
+    value.set('Hey');
+
+    await expect.element(getByText('Hey, Universe')).toBeInTheDocument();
+
+    await userEvent.click(getByText('Toggle Universe'));
+
+    await expect.element(getByText('Hey, World')).toBeInTheDocument();
+  });
+});

package/src/react/__tests__/contexts.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { state, reactive, createContext, useContext } from 'signalium';
+import { ContextProvider, setupReact } from '../index.js';
+import React, { useState } from 'react';
+
+setupReact();
+
+describe('React > contexts', () => {
+  test('useContext works inside computed with default value', async () => {
+    const value = state('Hello');
+    const context = createContext(value);
+
+    const derived = reactive(() => `${useContext(context).get()}, World`);
+
+    function Component(): React.ReactNode {
+      return <div>{derived()}</div>;
+    }
+
+    const { getByText } = render(<Component />);
+
+    await expect.element(getByText('Hello, World')).toBeInTheDocument();
+
+    value.set('Hey');
+
+    await expect.element(getByText('Hey, World')).toBeInTheDocument();
+  });
+
+  test('useContext works at root level with default value', async () => {
+    const value = state('Hello');
+    const context = createContext(value);
+
+    function Component(): React.ReactNode {
+      const v = useContext(context);
+
+      return <div>{v.get()}, World</div>;
+    }
+
+    const { getByText } = render(
+      <ContextProvider contexts={[]}>
+        <Component />
+      </ContextProvider>,
+    );
+
+    await expect.element(getByText('Hello, World')).toBeInTheDocument();
+
+    value.set('Hey');
+
+    await expect.element(getByText('Hey, World')).toBeInTheDocument();
+  });
+
+  test('useContext works inside computed value passed via context provider', async () => {
+    const value = state('Hello');
+    const override = state('Hey');
+    const context = createContext(value);
+
+    const derived = reactive(() => `${useContext(context).get()}, World`);
+
+    function Component(): React.ReactNode {
+      return <div>{derived()}</div>;
+    }
+
+    const { getByText } = render(
+      <ContextProvider contexts={[[context, override]]}>
+        <Component />
+      </ContextProvider>,
+    );
+
+    await expect.element(getByText('Hey, World')).toBeInTheDocument();
+
+    override.set('Hi');
+
+    await expect.element(getByText('Hi, World')).toBeInTheDocument();
+  });
+
+  test('useContext works at root level with default value', async () => {
+    const value = state('Hello');
+    const override = state('Hey');
+    const context = createContext(value);
+
+    function Component(): React.ReactNode {
+      const v = useContext(context);
+
+      return <div>{v.get()}, World</div>;
+    }
+
+    const { getByText } = render(
+      <ContextProvider contexts={[[context, override]]}>
+        <Component />
+      </ContextProvider>,
+    );
+
+    await expect.element(getByText('Hey, World')).toBeInTheDocument();
+
+    override.set('Hi');
+
+    await expect.element(getByText('Hi, World')).toBeInTheDocument();
+  });
+});

package/src/react/__tests__/subscriptions.test.tsx

@@ -0,0 +1,49 @@
+import { describe, expect, test } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { state, reactive, subscription } from 'signalium';
+import { setupReact } from '../index.js';
+import React from 'react';
+import { sleep } from '../../__tests__/utils/async.js';
+
+setupReact();
+
+describe('React > subscriptions', () => {
+  test('subscriptions can be set by values accessed outside of normal run loop ', async () => {
+    const value = state('Hello');
+
+    const derived = reactive(() => {
+      return subscription<string>(({ set }) => {
+        const run = async () => {
+          await sleep(100);
+
+          try {
+            return `${value.get()}, World`;
+          } catch (e) {
+            console.error(e);
+            return 'Error';
+          }
+        };
+
+        set(run());
+      });
+    });
+
+    function GrandChild({ text }: { text: string }): React.ReactNode {
+      return <span>{text}</span>;
+    }
+
+    function Child({ asyncValue }: { asyncValue: { isPending: boolean; value: string | undefined } }): React.ReactNode {
+      return <div>{asyncValue.isPending ? 'Loading...' : <GrandChild text={asyncValue.value!} />}</div>;
+    }
+
+    function Parent(): React.ReactNode {
+      const d = derived();
+      return <Child asyncValue={d} />;
+    }
+
+    const { getByText } = render(<Parent />);
+
+    await expect.element(getByText('Loading...')).toBeInTheDocument();
+    await expect.element(getByText('Hello, World')).toBeInTheDocument();
+  });
+});

package/src/react/__tests__/utils.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface RenderCounter<Props extends Record<string, unknown>> {
+  (props: Props): React.ReactNode;
+  testId: number;
+  renderCount: number;
+}
+
+let CURRENT_ID = 0;
+
+export type ComponentType<P = any> = (props: P) => React.ReactNode;
+export type HOC<InProps = any, OutProps = InProps> = (Component: ComponentType<InProps>) => ComponentType<OutProps>;
+
+/**
+ * The wrapper passed to createRenderCounter is a HOC that will wrap the component
+ * with additional functionality. The reason we don't pass a component directly is
+ * because introducing additional components would mess with the real render counts.
+ */
+const EmptyWrapper: HOC = Component => props => Component(props);
+
+export function createRenderCounter<Props extends Record<string, unknown>>(
+  Component: (props: Props) => React.ReactNode,
+  wrapper: HOC<Props> = EmptyWrapper,
+): RenderCounter<Props> {
+  const id = CURRENT_ID++;
+
+  const RenderCounterComponent = wrapper((props: Props) => {
+    RenderCounterComponent.renderCount++;
+
+    // Call the component manually so it's not a separate React component
+    const children = Component(props);
+
+    return <div data-testid={id}>{children}</div>;
+  }) as RenderCounter<Props>;
+
+  RenderCounterComponent.testId = id;
+  RenderCounterComponent.renderCount = 0;
+
+  return RenderCounterComponent;
+}

package/src/react/context.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { SignalScope } from '../hooks.js';
+import { SignalScope } from '../internals/contexts.js';
 
 export const ScopeContext = createContext<SignalScope | undefined>(undefined);
 

package/src/react/provider.tsx

@@ -1,18 +1,26 @@
 import { useContext } from 'react';
-import { SignalScope, SignalStoreMap } from '../hooks.js';
 import { ScopeContext } from './context.js';
+import { ContextImpl, ContextPair, SignalScope } from '../internals/contexts.js';
 
-export function ContextProvider({
+export function ContextProvider<C extends unknown[]>({
   children,
   contexts,
   inherit = true,
+  root = false,
 }: {
   children: React.ReactNode;
-  contexts: SignalStoreMap;
+  contexts: [...ContextPair<C>];
   inherit?: boolean;
+  root?: boolean;
 }) {
+  // if (root) {
+  //   useEffect(() => )
+
+  //   return <ScopeContext.Provider value={scope}>{children}</ScopeContext.Provider>;
+  // }
+
   const parentScope = useContext(ScopeContext);
-  const scope = new SignalScope(contexts, inherit ? parentScope : undefined);
+  const scope = new SignalScope(contexts as [ContextImpl<unknown>, unknown][], inherit ? parentScope : undefined);
 
   return <ScopeContext.Provider value={scope}>{children}</ScopeContext.Provider>;
 }

package/src/react/setup.ts

@@ -1,10 +1,11 @@
 import { setConfig } from '../config.js';
 import { useScope } from './context.js';
-import { useSignalValue } from './signal-value.js';
+import { useDerivedSignal, useStateSignal } from './signal-value.js';
 
 export function setupReact() {
   setConfig({
-    useSignalValue,
+    useDerivedSignal,
+    useStateSignal,
     getFrameworkScope: useScope,
   });
 }

package/src/react/signal-value.ts

@@ -1,7 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useCallback, useContext, useRef, useState, useSyncExternalStore } from 'react';
-import { ScopeContext } from './context.js';
-import { watcher } from '../hooks.js';
+import React, { useCallback, useSyncExternalStore } from 'react';
+import type { DerivedSignal } from '../internals/derived.js';
+import type { StateSignal } from '../internals/state.js';
+import type { ReactiveValue } from '../types.js';
+import { isReactivePromise } from '../internals/utils/type-utils.js';
+import { isReactiveSubscription } from '../internals/async.js';
 
 // This is a private React internal that we need to access to check if we are rendering.
 // There is no other consistent way to check if we are rendering in both development
@@ -9,85 +12,62 @@ import { watcher } from '../hooks.js';
 // should be checked on every major React version upgrade.
 const REACT_INTERNALS =
   (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ||
-  (React as any).__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  (React as any).__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ||
+  (React as any).__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
 const ReactCurrentDispatcher = REACT_INTERNALS.ReactCurrentDispatcher || REACT_INTERNALS;
+const ReactCurrentOwner = REACT_INTERNALS.ReactCurrentOwner || REACT_INTERNALS;
 
 const getReactCurrentDispatcher = () => {
-  return ReactCurrentDispatcher?.current || ReactCurrentDispatcher?.A || null;
+  return ReactCurrentDispatcher.current || REACT_INTERNALS.H;
+};
+
+const getReactCurrentOwner = () => {
+  return ReactCurrentOwner.current || REACT_INTERNALS.A;
 };
 
 function isRendering() {
-  return getReactCurrentDispatcher() !== null;
+  return !!getReactCurrentDispatcher() && !!getReactCurrentOwner();
 }
 
-export function useSignalValue<T>(key: string, fn: () => T): T {
+export function useStateSignal<T>(signal: StateSignal<T>): T {
   if (!isRendering()) {
-    return fn();
+    return signal.peek();
   }
 
-  const [, setVersion] = useState(0);
-  const scope = useContext(ScopeContext);
-  const ref = useRef<{
-    value: T | undefined;
-    sub: (() => () => void) | undefined;
-    unsub: (() => void) | undefined;
-    key: string | undefined;
-  }>({
-    value: undefined,
-    sub: undefined,
-    unsub: undefined,
-    key: undefined,
-  });
-
-  const currentKey = ref.current.key;
-
-  if (key !== currentKey) {
-    ref.current.unsub?.();
-
-    const w = watcher(fn, { scope });
-
-    let initialized = false;
-
-    ref.current.sub = () => {
-      if (ref.current.unsub) {
-        return ref.current.unsub;
-      }
-
-      const unsub = w.addListener(
-        value => {
-          ref.current.value = value;
-
-          // Trigger an update to the component
-          if (initialized) {
-            setVersion(v => v + 1);
-          }
-
-          initialized = true;
-        },
-        {
-          immediate: true,
-        },
-      );
-
-      ref.current.unsub = () => {
-        ref.current.unsub = undefined;
-        unsub();
-      };
-
-      return ref.current.unsub!;
-    };
-
-    ref.current.sub!();
+  return useSyncExternalStore(
+    useCallback(onStoreChange => signal.addListener(onStoreChange), [signal]),
+    () => signal.peek(),
+    () => signal.peek(),
+  );
+}
 
-    ref.current.key = key;
+export function useDerivedSignal<T>(signal: DerivedSignal<T, unknown[]>): ReactiveValue<T> {
+  if (!isRendering()) {
+    return signal.get();
   }
 
-  useSyncExternalStore(
-    ref.current.sub!,
-    () => ref.current.value!,
-    () => ref.current.value!,
+  const value = useSyncExternalStore(
+    signal.addListenerLazy(),
+    () => signal.get(),
+    () => signal.get(),
   );
 
-  return ref.current.value!;
+  // Reactive promises can update their value independently of the signal, since
+  // we reuse the same promise object for each result. We need to entangle the
+  // version of the promise here so that we can trigger a re-render when the
+  // promise value updates.
+  //
+  // If hooks could be called in dynamic order this would not be necessary, we
+  // could entangle the promise when it is used. But, because that is not the
+  // case, we need to eagerly entangle.
+  if (typeof value === 'object' && value !== null && isReactivePromise(value)) {
+    if (isReactiveSubscription(value)) {
+      useDerivedSignal(value['_signal'] as DerivedSignal<any, unknown[]>);
+    }
+
+    useStateSignal(value['_version']);
+  }
+
+  return value as ReactiveValue<T>;
 }