Improve web bundler integration

[kratico]

Using Capi with a web bundler requires extra configuration to shim/polyfill the Capi dnt npm module.
One reason is that dnt targets node.
Another reason is that capi have the capi cli (serve/sync) in the same npm module.

Perhaps, there could be 2 npm packages capi and capi-cli (as suggested by @peetzweg).

For example, for capi@0.1.0-beta40 and vite this config is used

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    target: "esnext",
    rollupOptions: {
      shimMissingExports: true,
    },
  },
  optimizeDeps: {
    esbuildOptions: { target: "es2022" },
  },
  define: {
    "process.env.CAPI_SERVER": process.env.CAPI_SERVER,
    "process.env.CAPI_TARGET": process.env.CAPI_TARGET,
  },
});

Note: for a vite prod build, the process global var needs to be shimmed differently because vite define define entries as globals during dev but it statically replace them during build.

Something similar is required for webpack

import webpack from 'webpack'

export default {
  // ...
  resolve: {
    fallback: {
      crypto: 'crypto-browserify',
      stream: 'stream-browserify',
    }
  },
  externals: {
    "node:net": {},
    "node:stream": {},
    "node:fs/promises": {},
  },
  experiments: {
    topLevelAwait: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          CAPI_SERVER: JSON.stringify(process.env.CAPI_SERVER),
          CAPI_TARGET: JSON.stringify(process.env.CAPI_TARGET),
        }
      }
    }),
  ],
};

[peetzweg]

Deno dnt is only transpiling deno code to nodejs code, but we need a proper browser version.
Deno itself refers for this purpose to esbuild.

https://deno.com/manual@v1.34.1/tools/bundler#bundling-for-the-web

[kratico]

I would say that dnt transpiles TS and rewrites imports.
That seems to be fine.

I think that the issue is that the main Capi entry point is transitive depedent on a some node requires.
As far as I know, those node requires are used in the Capi CLI (sync/serve).
So the solution could be to identify that shared dependency and make sure that it doesn't land in the main Capi entry point dependencies.

So far, based on the vite build output, it seems that the dependencies are

node:http > Missing export "createServer" has been shimmed in module "__vite-browser-external".
node:net > Missing export "createConnection" has been shimmed in module "__vite-browser-external".
node:fs/promises > Missing export "open" has been shimmed in module "__vite-browser-external".
node:stream > Missing export "Writable" has been shimmed in module "__vite-browser-external".

[ryanleecode]

closed by #1070 (as written in the description of #1070)