Repository: facebook/react
File: compiler/apps/playground/components/Editor/ConfigEditor.tsx (TypeScript)

Code before:
  if (a === b) return true;
  if (typeof a !== typeof b) return false;
  if (typeof a === 'function') {
    return a.toString() === b.toString();
  }
  if (a instanceof Map && b instanceof Map) {
    if (a.size !== b.size) return false;
    for (const [key, value] of a) {
      if (!b.has(key) || !isEqual(value, b.get(key))) return false;
    }
    return true;
  }
  if (Array.isArray(a) && Array.isArray(b)) {
    if (a.length !== b.length) return false;
    return a.every((item, index) => isEqual(item, b[index]));
  }
  if (typeof a === 'object') {
    const keysA = Object.keys(a);
    const keysB = Object.keys(b);
    if (keysA.length !== keysB.length) return false;
    return keysA.every(key => keysB.includes(key) && isEqual(a[key], b[key]));
  }

  return false;
}

/**
 * Recursive function to extract overridden values
 */
function getOverriddenValues(current: any, defaults: any): Record<string, any> {
  if (isEqual(current, defaults)) return {};
  if (
    current &&
    defaults &&
    typeof current === 'object' &&
    typeof defaults === 'object' &&
    !Array.isArray(current) &&
    !Array.isArray(defaults)
  ) {
    const overrides: Record<string, any> = {};

    for (const key in current) {
      const nested = getOverriddenValues(current[key], defaults[key]);
      if (
        Object.keys(nested).length > 0 ||
        !isEqual(current[key], defaults[key])
      ) {
        overrides[key] = Object.keys(nested).length > 0 ? nested : current[key];
      }
    }
    return overrides;

Review comment (suggestion):
Let's disable the editor while we don't have this hooked up. Output tab does this for example. In a future PR when the handler is added it can be re-enabled.

Code after:
  useEffect(() => {
    const pragma = store.source.substring(0, store.source.indexOf('\n'));
    const configString = `(${parseConfigPragmaAsString(pragma)})`;

    prettier
      .format(configString, {
        semi: true,
        parser: 'babel-ts',
        plugins: [parserBabel, prettierPluginEstree],
      })
      .then(formatted => {
        setConfigJavaScript(formatted);
      })
      .catch(error => {
        console.error('Error formatting config:', error);
        setConfigJavaScript('({})'); // Return empty object if not valid for now
        //TODO: Add validation and error handling for config
      });
    console.log('Config:', configString);
  }, [store.source]);

  const handleChange: (value: string | undefined) => void = value => {
    if (!value) return;

    // TODO: Implement sync logic to update pragma comments in the source
    console.log('Config changed:', value);
  };

  const handleMount: (
    _: editor.IStandaloneCodeEditor,
    monaco: Monaco,
  ) => void = (_, monaco) => {
    setMonaco(monaco);

    const uri = monaco.Uri.parse(`file:///config.js`);
    const model = monaco.editor.getModel(uri);
    if (model) {
      model.updateOptions({tabSize: 2});
    }
  };

  return (
    <div className="relative flex flex-col flex-none border-r border-gray-200">
      <h2 className="p-4 duration-150 ease-in border-b cursor-default border-grey-200 font-light text-secondary">
        Config Overrides
      </h2>
      <Resizable
        minWidth={300}
        maxWidth={600}
        defaultSize={{width: 350, height: 'auto'}}
        enable={{right: true}}