Function PackageJsonProvider

packages/web/src/components/use-package-json.tsx:49–127

({ channel, children }: ProviderPropsType)

 *    as a cell since we want to move away from that.
 */
export function PackageJsonProvider({ channel, children }: ProviderPropsType) {
  const { cells, updateCell: updateCellOnClient, getOutput, clearOutput } = useCells();

  const cell = cells.find((cell) => cell.type === 'package.json') as PackageJsonCellType;

  // outdated means package.json is out of date and needs to install deps.
  //
  // If outdated is an array, it means the specific entries in the array are
  // packages that are not yet listed in package.json's dependencies. In this
  // case, we must ensure we install these packages and save them to package.json.
  //
  // If outdated is true, it means there are packages in package.json that need
  // to be installed. This can happen if user created or imported a srcbook and
  // forgot to run `npm install` or when AI adds packages to package.json.
  //
  const [outdated, setOutdated] = useState<boolean | string[]>(false);

  const [validationError, setValidationError] = useState<string | null>(null);

  useEffectOnce(() => {
    channel.push('deps:validate', {});
  });

  const npmInstall = useCallback(
    (packages?: string[]) => {
      const error = getValidationError(cell.source);
      setValidationError(error);
      if (error === null) {
        updateCellOnClient({ ...cell, status: 'running' });
        clearOutput(cell.id);
        setOutdated(false);
        channel.push('deps:install', { packages });
      }
    },
    [cell, channel, updateCellOnClient, clearOutput],
  );

  useEffect(() => {
    const callback = (response: DepsValidateResponsePayloadType) => {
      // If we receive a response at all, it means there are outdated packages.
      setOutdated(response.packages ?? true);
    };

    channel.on('deps:validate:response', callback);
    return () => channel.off('deps:validate:response', callback);
  }, [channel, npmInstall]);

  function updateCellOnServer(updates: PackageJsonCellUpdateAttrsType) {
    channel.push('cell:update', {
      cellId: cell.id,
      updates,
    });
  }

  function onChangeSource(source: string) {
    const updates = { ...cell, source };
    updateCellOnClient(updates);