hunk.code_window: /* eslint-disable no-async-promise-executor */
   import { spawn } from 'node:child_process';
   import { readFileSync } from 'node:fs';
   import path from 'node:path';
   import electronPath from 'electron';
   import * as esbuild from 'esbuild';
  
hunk.labels: keep keep replace replace keep keep keep
hunk.file_path: apps/electron/scripts/dev.mjs
hunk.type: replace
file: import {
    addCleanup,
    pluginHeaderItemAtom,
  } from '@toeverything/infra/__internal__/plugin';
  import { useAtomValue } from 'jotai';
  import { startTransition, useCallback, useRef } from 'react';
  
  import * as styles from './styles.css';
  export const PluginHeader = () => {
    const headerItem = useAtomValue(pluginHeaderItemAtom);
    const pluginsRef = useRef<string[]>([]);
  
    return (
      <div
        className={styles.pluginHeaderItems}
        ref={useCallback(
          (root: HTMLDivElement | null) => {
            if (root) {
              Object.entries(headerItem).forEach(([pluginName, create]) => {
                if (pluginsRef.current.includes(pluginName)) {
                  return;
                }
                pluginsRef.current.push(pluginName);
                const div = document.createElement('div');
                div.setAttribute('plugin-id', pluginName);
                startTransition(() => {
                  const cleanup = create(div);
                  root.appendChild(div);
                  addCleanup(pluginName, () => {
                    pluginsRef.current = pluginsRef.current.filter(
                      name => name !== pluginName
                    );
                    root.removeChild(div);
                    cleanup();
                  });
                });
              });
            }
          },
          [headerItem]
        )}
      />
    );
  };
  