signalium 1.2.2 → 2.0.0

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

@@ -1,95 +0,0 @@
-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

@@ -1,181 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-react';
-import { state, reactive, createContext, useContext, setRootContexts } from '../../index.js';
-import { ContextProvider, setupReact, useScope } 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('provider inherits from root scope', async () => {
-    const defaultValue1 = state('default1');
-    const defaultValue2 = state('default2');
-    const ctx1 = createContext(defaultValue1);
-    const ctx2 = createContext(defaultValue2);
-    const rootOverride1 = state('root1');
-    const rootOverride2 = state('root2');
-
-    // Set root contexts
-    setRootContexts([
-      [ctx1, rootOverride1],
-      [ctx2, rootOverride2],
-    ]);
-
-    // Component that uses both contexts
-    function Component({ testId }: { testId: string }): React.ReactNode {
-      const value1 = useContext(ctx1);
-      const value2 = useContext(ctx2);
-      const derived = reactive(() => `${value1.get()}-${value2.get()}`);
-      return <div data-testid={testId}>{derived()}</div>;
-    }
-    const localOverride1 = state('local1');
-    const localOverride2 = state('local2');
-
-    // Should inherit from root scope when no local overrides
-    const { getByTestId } = render(
-      <>
-        <ContextProvider contexts={[]}>
-          <Component testId="result" />
-        </ContextProvider>
-        <ContextProvider contexts={[[ctx1, localOverride1]]}>
-          <Component testId="result2" />
-        </ContextProvider>
-        <ContextProvider
-          contexts={[
-            [ctx1, localOverride1],
-            [ctx2, localOverride2],
-          ]}
-        >
-          <Component testId="result3" />
-        </ContextProvider>
-      </>,
-    );
-
-    await expect.element(getByTestId('result')).toHaveTextContent('root1-root2');
-
-    // Should inherit from root scope for unoverridden contexts
-    await expect.element(getByTestId('result2')).toHaveTextContent('local1-root2');
-
-    // Should use local overrides when provided
-    await expect.element(getByTestId('result3')).toHaveTextContent('local1-local2');
-
-    // Changes to root contexts should be reflected in inherited contexts
-    rootOverride1.set('updated-root1');
-    rootOverride2.set('updated-root2');
-
-    await expect.element(getByTestId('result')).toHaveTextContent('updated-root1-updated-root2');
-
-    // Local overrides should remain unaffected by root context changes
-    await expect.element(getByTestId('result2')).toHaveTextContent('local1-updated-root2');
-    await expect.element(getByTestId('result3')).toHaveTextContent('local1-local2');
-  });
-
-  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();
-  });
-
-  test('useScope returns undefined outside of rendering context', async () => {
-    // Direct call outside of rendering should return undefined
-    expect(useScope()).toBeUndefined();
-
-    // Inside a component during rendering, it should return the scope
-    function TestComponent() {
-      const scope = useScope();
-      return <div data-testid="scope">{scope ? 'has-scope' : 'no-scope'}</div>;
-    }
-
-    const { getByTestId } = render(
-      <ContextProvider contexts={[]}>
-        <TestComponent />
-      </ContextProvider>,
-    );
-
-    await expect.element(getByTestId('scope')).toHaveTextContent('has-scope');
-  });
-});

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

@@ -1,49 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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,14 +0,0 @@
-import { createContext, useContext } from 'react';
-import { SignalScope } from '../internals/contexts.js';
-import { isRendering } from './rendering.js';
-
-export const ScopeContext = createContext<SignalScope | undefined>(undefined);
-
-export function useScope() {
-  if (!isRendering()) {
-    return undefined;
-  }
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useContext(ScopeContext);
-}

package/src/react/index.ts

@@ -1,6 +0,0 @@
-export { ContextProvider } from './provider.js';
-export { useScope } from './context.js';
-export { setupReact } from './setup.js';
-export { useStateSignal } from './state.js';
-
-export { runReactiveSafe } from './rendering.js';

package/src/react/provider.tsx

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

package/src/react/rendering.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-
-// 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
-// and production, and it doesn't appear that the React team wants to add one. This
-// 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).__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
-
-const IS_REACT_18 = !!REACT_INTERNALS.ReactCurrentDispatcher;
-const ReactCurrentDispatcher = REACT_INTERNALS.ReactCurrentDispatcher || REACT_INTERNALS;
-
-let RENDERING_SAFE_MODE_COUNT = 0;
-
-/**
- * Reactive functions can be called anywhere, but React Hooks cannot. When calling reactive functions
- * in code that _may or may not_ be used while rendering, we need to use this function to wrap the
- * call. This will ensure that we will not be in a rendering context when the reactive function is called.
- */
-export const runReactiveSafe = <T>(fn: () => T): T => {
-  RENDERING_SAFE_MODE_COUNT++;
-
-  try {
-    return fn();
-  } finally {
-    RENDERING_SAFE_MODE_COUNT--;
-  }
-};
-
-export function isRendering() {
-  const dispatcher = IS_REACT_18 ? ReactCurrentDispatcher.current : ReactCurrentDispatcher.H;
-
-  return (
-    RENDERING_SAFE_MODE_COUNT === 0 &&
-    !!dispatcher &&
-    // dispatcher can be in a state where it's defined, but all hooks are invalid to call.
-    // Only way we can tell is that if they are invalid, they will all be equal to each other
-    // (e.g. because it's the function that throws an error)
-    dispatcher.useState !== dispatcher.useEffect
-  );
-}

package/src/react/setup.ts

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

package/src/react/signal-value.ts

@@ -1,50 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { 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';
-import { isRendering } from './rendering.js';
-
-export function useStateSignal<T>(signal: StateSignal<T>): T {
-  if (!isRendering()) {
-    return signal.peek();
-  }
-
-  return useSyncExternalStore(
-    useCallback(onStoreChange => signal.addListener(onStoreChange), [signal]),
-    () => signal.peek(),
-    () => signal.peek(),
-  );
-}
-
-export function useDerivedSignal<T, Args extends unknown[]>(signal: DerivedSignal<T, Args>): ReactiveValue<T> {
-  if (!isRendering()) {
-    return signal.get();
-  }
-
-  const value = useSyncExternalStore(
-    signal.addListenerLazy(),
-    () => signal.get(),
-    () => signal.get(),
-  );
-
-  // 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>;
-}

package/src/react/state.ts

@@ -1,13 +0,0 @@
-import { useRef } from 'react';
-import { state } from '../hooks.js';
-import { SignalOptions, StateSignal } from '../types.js';
-
-export function useStateSignal<T>(value: T, opts?: SignalOptions<T, unknown[]>): StateSignal<T> {
-  const ref = useRef<StateSignal<T> | undefined>(undefined);
-
-  if (!ref.current) {
-    ref.current = state(value, opts);
-  }
-
-  return ref.current;
-}