Function extractExamples

scripts/extractExamplesS2.mjs:20–167

()

let distDir = 'dist/docs-examples';

async function extractExamples() {
  try {
    await fs.rm(distDir, {recursive: true});
  } catch {}
  await fs.mkdir(distDir, {recursive: true});

  let pages = [];
  for await (let page of fs.glob('packages/dev/s2-docs/pages/**/*.mdx')) {
    pages.push(page);
  }

  await Promise.all(
    pages.map(async page => {
      let code = await fs.readFile(page, 'utf8');

      code = code.replace(
        /(<ExampleSwitcher type="component" examples={(\[.*?\])}>)((?:.|\n)*?)<\/ExampleSwitcher>/g,
        (m, start, examples, inner) => {
          if (inner.includes('COMPONENT')) {
            let components = json5.parse(examples);
            inner = components
              .map(component => inner.replace(/COMPONENT/g, component))
              .join('\n\n');
            return start + inner + '</ExampleSwitcher>';
          }

          return m;
        }
      );

      // Replace /* PROPS */ placeholders with initialProps values from code fence metadata
      // Match initialProps={{ ... }} handling one level of nested braces
      // Skip blocks with propsObject attribute since those props don't go directly on the component
      code = code.replace(
        /```tsx([^\n]*initialProps=\{\{((?:[^{}]|\{[^{}]*\})*)\}\}[^\n]*)\n([\s\S]*?)```/g,
        (m, meta, propsStr, inner) => {
          // Skip if props go to a different object (e.g. propsObject="layoutOptions")
          if (meta.includes('propsObject=')) {
            return m;
          }
          if (inner.includes('/* PROPS */')) {
            // Parse the initialProps using json5, e.g. "isLoading: true" -> {isLoading: true}
            let parsed = json5.parse(`{${propsStr}}`);
            // Convert to JSX props string, but skip props that are already in the code
            let props = Object.entries(parsed)
              .map(([key, value]) => {
                // Skip if this prop is already present in the inner code (to avoid duplicates)
                let propRegex = new RegExp(`\\b${key.replace('-', '\\-')}\\s*=`);
                if (propRegex.test(inner)) {
                  return '';
                }
                if (typeof value === 'string') {
                  return ` ${key}="${value}"`;
                }
                return ` ${key}={${JSON.stringify(value)}}`;
              })
              .join('');
            inner = inner.replace(/\/\* PROPS \*\//g, props);