Trying to mess with ServerComponentsPlugin, hitting error

[altano]

What version of Bun is running?

0.7.0

What platform is your computer?

Darwin 22.5.0 arm64 arm

What steps can reproduce the bug?

Try to run this script:

import ServerComponentsPlugin from "bun-plugin-server-components";

const result = await Bun.build({
  entrypoints: ["./rsc/page.tsx"],
  outdir: "./rsc/.build/server",
  plugins: [ServerComponentsPlugin({})],
});

Gives this error:

➜  bun run rsc/build.ts
1 | import ServerComponentsPlugin from "bun-plugin-server-components";
2 | 
3 | const result = await Bun.build({
                         ^
TypeError: Expected directive to be an object
 code: "ERR_INVALID_ARG_TYPE"

The location seems to be a red herring. I only get this error when trying to use the ServerComponentsPlugin plugin. For example, this works without error:

import ServerComponentsPlugin from "bun-plugin-server-components";

const result = await Bun.build({
  entrypoints: ["./rsc/page.tsx"],
  outdir: "./rsc/.build/server",
  plugins: [],
});

What is the expected behavior?

Code runs cleanly with no errors

What do you see instead?

TypeError: Expected directive to be an object

Additional information

No response

[altano]

(issue reproduces in 0.8.0)

[dieppe]

Tried to do the same and hit the same issue.

After digging a bit, it appears that server components are not supported since the introduction of a new bundler: #2312

If you look at the JSBundler code, here is the line that causes the error:
https://github.com/oven-sh/bun/blob/58e69ef9f4e99163c582c54fc96f672ea0a67f95/src/bun.js/api/JSBundler.zig#L104C22-L104C22

Edit: I was wrong regarding the fact it's not supported. After a few hours investigating, here is how I got to the "read the manifest" part:

import {ByteBuffer} from 'peechy/bb';
import * as path from 'path';
import ServerComponentsPlugin from 'bun-plugin-server-components';
import {renderToReadableStream} from 'react-dom/server';

const PROJECT_ROOT = import.meta.dir;
const PAGE_DIR = path.resolve(PROJECT_ROOT, 'pages');
const PUBLIC_DIR = path.resolve(PROJECT_ROOT, 'public');
const BUILD_DIR = path.resolve(PROJECT_ROOT, '.build');

const srcRouter = new Bun.FileSystemRouter({
  dir: PAGE_DIR,
  style: 'nextjs',
});

const buildResult = await Bun.build({
  entrypoints: [
    ...Object.values(srcRouter.routes),
  ],
  outdir: BUILD_DIR,
  manifest: true,
  plugins: [
    ServerComponentsPlugin({
      directive: {
        client: [''],
        server: [''],
      },
    }),
  ],
});

function decodeStringPointer(bb: ByteBuffer) {
  let result: any = {};

  result['offset'] = bb.readUint32();
  result['length'] = bb.readUint32();
  return result;
}

function decodeClientServerModule(bb: ByteBuffer) {
  const result: any = {};

  result['moduleId'] = bb.readUint32();
  result['inputName'] = decodeStringPointer(bb);
  result['assetName'] = decodeStringPointer(bb);
  result['exportNames'] = decodeStringPointer(bb);
  return result;
}

function decodeClientServerModuleManifest(bb: ByteBuffer) {
  const result: any = {};

  result['version'] = bb.readUint32();
  let length = bb.readVarUint();
  let values = (result['clientModules'] = Array(length));
  for (let i = 0; i < length; i++) values[i] = decodeClientServerModule(bb);
  length = bb.readVarUint();
  values = result['serverModules'] = Array(length);
  for (let i = 0; i < length; i++) values[i] = decodeClientServerModule(bb);
  length = bb.readVarUint();
  values = result['ssrModules'] = Array(length);
  for (let i = 0; i < length; i++) values[i] = decodeClientServerModule(bb);
  length = bb.readVarUint();
  values = result['exportNames'] = Array(length);
  for (let i = 0; i < length; i++) values[i] = decodeStringPointer(bb);
  result['contents'] = bb.readByteArray();
  return result;
}

const manifestBuffer = new Uint8Array(await Bun.file(buildResult.outputs[2].path).arrayBuffer());
let manifest = new ByteBuffer(manifestBuffer);
const decoded = decodeClientServerModuleManifest(manifest);
console.log(decoded);

Now I have no idea what the "directive" options are for, and I guess this is all too experimental for now, but it's nice to see it's not that far away.

Anyway, SSR will amply do for now :)

[gtrabanco]

Same issue with 1.0.3+25aa51dfc4976d1477d2714e5742393f190dc39f