Add react-web generator

[ovflowd]

The react-web generator depends upon the #6 generator.

The react-web parser receives a JSX Node. Then it builds into a JavaScript bundle by using esbuild JavaScript APIs and finally returns the output from the ESbuild pipeline into VFiles (?) (This is an open topic, as the build will probably return a bunch of different outputs which are probably the numerous chunks if we use chunk loading of the build);

The react-web generator aims to receive a top-level JSX element, wrap it with ReactDOM, build it as an ES2017 (or newer) target output, and return the parsed/built content to be stored in files.

Also, the react-web will receive the final contents of the generated pipeline. The output is pretty much JavaScript, which can then be used/added elsewhere.

I'm not sure if we should use esbuild or how to deal with the Web part of the bundling/generation of the API docs because:

• The mdx-react generator handles individual doc files
• Somewhere between mdx-react and react-web we need to handle building the rest of the website (such as navigation, footer, header, etc)
  • I had an idea that it could look like:

  import loadDocFile from './loader.mjs';
  import parseDocFile from './parser.mjs';
  import getNodeRease from './release.mjs';
  import mdxGenerator from './generators/mdx';
  import mdxReactGenerator from './generators/mdx-react';
  import webGenerator from './generators/react-web';
  
  // Returns an array of Promises of VFile's
  const promises = docFiles.map(fileName => 
    loadDocFile(fileName )
      .then(parseDocFile)
      .then(mdxGenerator)
      .then(mdxReactGenerator)
  );
  
  const vFiles = await Promise.all(promises);
  const release = await getNodeRease('22.0');
  
  // Web Generator takes an array of VFiles
  // And then generates the navigation, header, footer, and each page?
  const javaScriptBundle = await webGenerator(vFiles, release);
  
  // Do something with the bundle ??
  // Save them on chunk files on the out directory ??
  Would you please do something?

  • Note that the example above is just an example entry point, since we provide a generic API, users can use the CLI entry point which by default outputs to FILES in the given output directory; we can also have the DevServer entry Point with Vite (?) which requires the build to happen first or something...

I'd like input on this cc @nodejs/web-infra as this is the most complex part for outputting to Web