Allow plugin resolve callbacks to mark a module as side-effect free

[buffaybu]

I'm using esbuild to eliminate unneeded code by bundling a virtual entry that only re-exports the needed part and mark every imports as external.

An example that transforms originalCode to only keep client side code:

const { build } = require("esbuild");

const originalCode = `
  import { serverFn } from "./server-side";
  import { clientFn } from "./client-side";

  export function server() {
    serverFn();
  }
  export function client() {
    clientFn();
  }
`;

async function main() {
  const result = await build({
    stdin: {
      contents: `export { client } from 'ORIGINAL'`,
      loader: "ts",
    },
    bundle: true,
    format: "esm",
    write: false,
    plugins: [
      {
        name: "only-export-client",
        setup: (build) => {
          build.onResolve({ filter: /.*/ }, (args) => {
            if (args.path === "ORIGINAL") {
              return {
                path: "ORIGINAL",
                namespace: "proxy",
              };
            }
            return {
              external: true,
            };
          });
          build.onLoad({ filter: /.*/, namespace: "proxy" }, async (args) => {
            return {
              contents: originalCode,
              loader: "ts",
            };
          });
        },
      },
    ],
  });

  console.log(result.outputFiles[0].text);
}
main();

The output is:

// proxy:ORIGINAL
import {serverFn} from "./server-side";
import {clientFn} from "./client-side";
function client() {
  clientFn();
}
export {
  client
};

./server-side is still imported and I guess the reason is that esbuild doesn't know whether the module is side-effect free or not.

So if it's about side-effect, is it possible to allow plugin resolve callbacks to mark a module as side-effect free? Or is there any other solution to solve this problem?

[buffaybu]

I'm temporally solving this by transforming the output again by ts loader (leaving importsNotUsedAsValues as default which is "remove").

const { transformSync } = require("esbuild");

const code = `
// proxy:ORIGINAL
import {serverFn} from "./server-side";
import {clientFn} from "./client-side";
function client() {
  clientFn();
}
export {
  client
};
`;

const result = transformSync(code, {
  format: "esm",
  loader: "ts",
});

console.log(result.code);

import {clientFn} from "./client-side";
function client() {
  clientFn();
}
export {
  client
};

[ryanflorence]

@buffaybu we have a nearly identical plugin. If you set package.json sideEffects: false in the app directory of the code you're bundling, you'll get what you're looking for.

[chriscasola]

@evanw I can implement this, were you thinking of adding a field like SideEffectFree to OnResolveResult?

[buffaybu]

With v0.12.9 and sideEffects: false, the example of this issue still outputs the same result.

const esbuild = require("esbuild");

const originalCode = `
  import { serverFn } from "./server-side";
  import { clientFn } from "./client-side";

  export function server() {
    serverFn();
  }
  export function client() {
    clientFn();
  }
`;

async function main() {
  const result = await esbuild.build({
    stdin: {
      contents: `export { client } from 'ORIGINAL'`,
      loader: "js",
    },
    bundle: true,
    format: "esm",
    write: false,
    plugins: [
      {
        name: "only-export-client",
        setup: (build) => {
          build.onResolve({ filter: /.*/ }, (args) => {
            if (args.path === "ORIGINAL") {
              return {
                path: "ORIGINAL",
                namespace: "proxy",
                sideEffects: false,
              };
            }
            return {
              external: true,
              sideEffects: false,
            };
          });
          build.onLoad({ filter: /.*/, namespace: "proxy" }, async (args) => {
            return {
              contents: originalCode,
              loader: "js",
            };
          });
        },
      },
    ],
  });

  console.log(`// v${esbuild.version}\n`);
  console.log(result.outputFiles[0].text);
}
main();

// v0.12.9

// proxy:ORIGINAL
import { serverFn } from "./server-side";
import { clientFn } from "./client-side";
function client() {
  clientFn();
}
export {
  client
};

Import of ./server-side is not shaken off.

---

Update: After reading #1241 (comment) the above behavior now makes sense to me that sideEffects: false means don't bundle unused code from the importee, instead of don't import it. And by #705 external imports are reserved.