@lexical/react/useLexicalExtensionSignalValue.dev.mjs

This package provides Lexical components and hooks for React applications.

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { useExtensionDependency } from '@lexical/react/useExtensionComponent';
import { useMemo, useSyncExternalStore } from 'react';

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */


/**
 * A React hook that subscribes to a signal and returns its current value.
 * The component will re-render whenever the signal's value changes.
 *
 * @param s - The ReadonlySignal to subscribe to
 * @returns The current value of the signal
 *
 * @example
 * ```tsx
 * const signal = new Signal(0);
 * function MyComponent() {
 *   const value = useSignalValue(signal);
 *   return <div>Value: {value}</div>;
 * }
 * ```
 */
function useSignalValue(s) {
  const [subscribe, getSnapshot] = useMemo(() => [s.subscribe.bind(s), s.peek.bind(s)], [s]);
  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
}

/**
 * Type helper that extracts the value type from a ReadonlySignal.
 * If the type is not a ReadonlySignal, it returns never.
 *
 * @example
 * ```tsx
 * type MySignal = ReadonlySignal<number>;
 * type Value = SignalValue<MySignal>; // number
 * ```
 */

/**
 * A React hook that subscribes to a signal property from a Lexical extension's output
 * and returns its current value. The component will re-render whenever the signal's value changes.
 *
 * This hook combines the functionality of useExtensionDependency and useSignalValue,
 * providing a convenient way to access reactive values from Lexical extensions.
 *
 * @param extension - The Lexical extension instance
 * @param prop - The property name in the extension's output that contains a signal
 * @returns The current value of the signal property
 *
 * @example
 * ```tsx
 * import {useExtensionSignalValue} from '@lexical/react/useExtensionSignalValue';
 * import {MyExtension} from './MyExtension';
 *
 * function MyComponent() {
 *   // Assuming MyExtension has a signal property 'count' in its output
 *   const count = useExtensionSignalValue(MyExtension, 'count');
 *   return <div>Count: {count}</div>;
 * }
 * ```
 */
function useExtensionSignalValue(extension, prop) {
  const signal = useExtensionDependency(extension).output[prop];
  return useSignalValue(signal);
}

export { useExtensionSignalValue, useSignalValue };