Repository: adobe/react-spectrum
File: packages/dev/s2-docs/src/CodePlatter.tsx (TypeScript)

Code before:
    </pre>
  );
}

function getExampleFiles(codeRef: RefObject<HTMLDivElement | null>, files: DownloadFiles['files'], urls: {[name: string]: string}, entry: string | undefined): DownloadFiles['files'] {
  if (!entry) {
    return {
      ...files,
      'Example.tsx': {contents: getExampleCode(codeRef, urls)}
    };
  }

  return files;
}

function getExampleCode(codeRef: RefObject<HTMLDivElement | null>, urls: {[name: string]: string}) {
  let code = codeRef.current!.querySelector('pre')!.textContent!;
  let fileTabs = codeRef.current!.closest('[data-files]');
  if (fileTabs) {
    let example = fileTabs.querySelector('[data-example] pre');
    if (example) {
      code = example.textContent!;
    }
  }

  if (code.includes('export default function')) {
    return code
      // Add function wrapper around raw JSX in examples.
      .replace(/\n<((?:.|\n)+)/, (_, code) => {
        let res = '\nexport default function Example() {\n  return (\n    <';
        let lines = code.split('\n');
        res += lines.shift();

        for (let line of lines) {
          res += '\n    ' + line;
        }

        res += '\n  );\n}\n';
        return res;
      })
      // Resolve urls
      .replace(/import (.*?) from ['"](url:.*?)['"]/g, (_, name, specifier) => {
        return `const ${name} = '${urls[specifier]}'`;
      });
  }

  return code
    // Export the last function
    .replace(/\nfunction ([^(]+)((.|\n)+\n\}\n?)$/, '\nexport default function Example$2')
    // Add function wrapper around raw JSX in examples.
    .replace(/\n<((?:.|\n)+)/, (_, code) => {

Review comment (bug):
apologies, didn't mean to push this to your PR, meant to put it in it's own branch off of it. But I noticed that the react aria "examples" such as the emoji picker, were broken. If there were multiple functions, then they were all being renamed to Example and exported as the default from the same module

Code after:
    </pre>
  );
}

function getExampleFiles(codeRef: RefObject<HTMLDivElement | null>, files: DownloadFiles['files'], urls: {[name: string]: string}, entry: string | undefined): DownloadFiles['files'] {
  if (!entry) {
    return {
      ...files,
      'Example.tsx': {contents: getExampleCode(codeRef, urls)}
    };
  }

  return files;
}

function getExampleCode(codeRef: RefObject<HTMLDivElement | null>, urls: {[name: string]: string}) {
  let code = codeRef.current!.querySelector('pre')!.textContent!;
  let fileTabs = codeRef.current!.closest('[data-files]');
  if (fileTabs) {
    let example = fileTabs.querySelector('[data-example] pre');
    if (example) {
      code = example.textContent!;
    }
  }

  if (!code.includes('export default function')) {
    // Export the last function
    code = code.replace(/\nfunction ([^(]+)((.|\n)+\n\}\n?)$/, '\nexport default function Example$2');
  }

  return code
    // Add function wrapper around raw JSX in examples.
    .replace(/\n<((?:.|\n)+)/, (_, code) => {
      let res = '\nexport default function Example() {\n  return (\n    <';
      let lines = code.split('\n');
      res += lines.shift();

      for (let line of lines) {
        res += '\n    ' + line;
      }

      res += '\n  );\n}\n';
      return res;
    })
    // Resolve urls
    .replace(/import (.*?) from ['"](url:.*?)['"]/g, (_, name, specifier) => {
      return `const ${name} = '${urls[specifier]}'`;
    });
}

// const V0 = createIcon(props => (