Transform to VSCode Worker File

[cemalgnlts]

Hi,

My project uses ESM but VSCode Workers should be used as CJS and extra files should be included in the same file.

extension-guides/web-extensions

Importing or requiring other modules is not supported. importScripts is not available as well. As a consequence, the code must be packaged to a single file.

I tried this with Esbuild:

function extensionWorkerTranformer(): PluginOption {
  return {
    name: "ExtensionWorker",
    enforce: "post",
    apply: () => true,
    transform(code, id) {
      if (/extensions\/[\w]+\/worker.ts$/.test(id)) {
        const {
          outputFiles: [file],
        } = buildSync({
          stdin: { contents: code },
          write: false,
          platform: "node",
          format: "cjs",
          external: ["vscode"],
          bundle: true,
          minify: true,
        });

        return { code: file.text };
      }
    },
  };
}

It works fine but if I add a node module it can't find it. Also if I use "module/file.png?url" it still won't work.

7:37:42 PM [vite] Internal server error: Build failed with 2 errors:
<stdin>:2:27: ERROR: Could not resolve "test-module"
<stdin>:3:27: ERROR: Could not resolve "test-module/file.png?url"

I found this article: https://www.eliostruyf.com/vite-bundling-visual-studio-code-extension/

But I also use this file inside the page.

What should I do?

[cemalgnlts]

Fixed.

function extensionWorkerTranformer(): PluginOption {
  const Provider: Plugin = {
    name: "VSCodeExtensionProvier",
    setup(build) {
      build.onLoad({ filter: /\.wasm$/ }, (args) => {
        // @ts-expect-error process is node global namespace?
        const path = args.path.replace(process.cwd(), "");

        return {
          contents: `export default "${path}";`,
        };
      });
    },
  };

  return {
    name: "ExtensionWorker",
    enforce: "post",
    apply: () => true,
    async transform(code, id) {
      if (/extensions\/[\w]+\/worker.ts$/.test(id)) {
        const {
          outputFiles: [file],
        } = await build({
          // stdin: { contents: code },
          entryPoints: [id],
          plugins: [Provider],
          write: false,
          platform: "node",
          format: "cjs",
          external: ["vscode"],
          bundle: true,
          minify: true,
        });

        return { code: file.text };
      }
    },
  };
}