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

[bjohansebas]

At what point would we generate the styles, given that the future component package will come with Tailwind styles that have not yet been compiled?

[AugustinMauroy]

At what point would we generate the styles, given that the future component package will come with Tailwind styles that have not yet been compiled?

we will import our design syteme from nodejs/nodejs.org but for that we need to finish the migration to monorepo

[avivkeller]

I've self assigned this since it's the natural progression from #273.

My plan:

1. Take the AST from feat(jsx): add jsx generator #273
2. Add the imports
3. AST -> Code
4. Bundle with Webpack/ESBuild/insert-bundler-here¹

Footnotes

1. We use Webpack in nodejs/nodejs.org, so I feel like I'll attempt that ↩