w3console build fails

[olizilla]

We need to be able to build the w3console project to a static site so we can deploy it, per #287

Currently the vite dev build works, but when compiling to a static site, rollup can't find the preact/jsx-runtime modules and errors:

[vite]: Rollup failed to resolve import "preact/jsx-runtime" from "/Users/oli/Code/web3-storage/w3ui/packages/react/src/UploadsList.tsx".
This is most likely unintended because it can break your application at runtime.

What I know so far

• Our react* packages have a peer dependency on React.
• the plugin @preact/preset-vite
  • configures vite to optimizeDeps for preact/jsx-runtime which I think is what allows it to find that dep for the dev server. source
  • adds babel config to use @babel/plugin-transform-react-jsx to use the runtime: automatic and importSource: preact which would automatically insert an import for the new react/jsx-runtime (see blog post) in files that don't directly import React but do use jsx, and rewrite it to use preact as the module to import it from rather than react source
  • adds resolve alias' for react* imports so direct imports are rewritten to use preact instead. source

this all works for the dev server, but rollup tries to locate preact/* deps for our react ui and headless components from their respective package trees... they are pnpm workspace:^ style deps so they are symlinked into the dep treee for w3console...

this peer deps plus workspace deps issue is discussed in the pnpm docs and repo issues as solved by setting dependenciesMeta.*.injected config to tell pnpm to hardlink the workspace dep into the node_modules of the package dir that depends on them, but this broke the vite dev servers ability to locate the preact deps. https://pnpm.io/package_json#dependenciesmetainjected

[olizilla]

A modified version of a fix proposed in preactjs/preset-vite#56 works here!

Instead of aliasing the react* imports to their bare preact/* counterparts, we alias to a more web module friendly absolute path, so that rollup is forced to resolve the peer dependencies on preact from the local w3console node_modules dir rather than the other workspace package.

we also need to add an alias for preact/jsx-runtime for the same reason... rollup can't find that dep in the ui packages either, unless we force the alias to our local node_modules.

[olizilla]

side note that our react packages are using the old style explict import React from 'react' which is no longer the cool way to do it per https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

we can remove those imports and update our babel config to use runtime: automatic to switch to the new style.