How to "Transpile away" log statements

I have my typescript project which has a bunch of code which only creates debug information. After profiling my application it turns out, that those have significant performance impact.

My current approach is setting a global variable let debug=true, and

function log(statement: string):void {
  if(debug) console.log(statement);
}

// somewhere in the application
...
log(`hi mom! ${Factory.createDebugStatement()}`);
...

And this Factory.createDebugStatement() is computationally heavy.
Further, I want to avoid to clutter my application with if(debug) log(...). I want typescript to remove the entire log statement.

Basically, I'm looking for a (convenient) TS 'equivalent' of the the idea in the following C structure:

// header file
#ifdef ENABLE_DEBUG
#define DEBUG(...) printf(__VA_ARGS__)
#else
#define DEBUG(...)                                                             \
  {}
#endif

//application

main(){
...
DEBUG("hi mom!");
...
}

Then, I can use cc -DENABLE_DEBUG=1 main.c to have those debug messages, if I omit the -DENABLE_DEBUG, the entire code is removed.

For that I'd normally use a bundler that has "Tree-shaking", for example https://esbuild.github.io/api/#tree-shaking or https://parceljs.org/features/scope-hoisting/

In esbuild it's relatively easy: https://esbuild.github.io/api/#define

You define the debug variable* and the bundler automatically removes code branches that are never executed.

*Though you should use another name like DEBUG_YOUR_PACKAGE_NAME that is less likely to clash with code from your dependencies)

Credit: Thanks to Simon Lax for pointing me to focus on the bundler parts...

I am using rollup.js, with the plugin-strip plugin.
Then, with one switch in my rollup.config.js I can enable/disable the 'transpile away'

// src/main.ts
import fs from "fs";
class Service {
  expensive(res = ""): string {
    for (let i = 0; i < 1000; i++) res += i;
    return res;
  }
  normal(): string {
    return "Hi mom!";
  }
}

class Logger {
  public static log<T>(statement: T): T | undefined {
    console.log(statement);
    return statement;
  }
}

const s = new Service();

Logger.log(`${s.expensive()}`);

console.log(s.normal());

// and I can even use it in different situations, which usually expect the output.
fs.writeFileSync(
  "/tmp/abc",
  Logger.log(
    "not printed to screen nor to file but I wont have runtime exceptions, because TS hints me to catch the undefined case with the null'ish concealing",
  ) ?? "",
);

// rollup.config.js
import typescript from "@rollup/plugin-typescript";
import strip from "@rollup/plugin-strip";

export default [
  {
    external: ["fs"],
    input: ["src/main.ts"],
    output: {
      dir: "dist",
      format: "es",
    },
    strictDeprecations: true,
    plugins: [
      strip({
        include: ["**/*.ts"],
        functions: process.env.DEBUG ? [] : ["logger.log"],
      }),
      typescript(),
    ],
  },
];

// package.json
 
 "type": "module",
  "scripts": {
    "bundle": "rollup --config rollup.config.js"
  },
  "devDependencies": {
    "@rollup/plugin-strip": "^3.0.2",
    "@rollup/plugin-typescript": "^11.0.0",
    "rollup": "^3.15.0",
    "typescript": "^4.9.5"
  },

then after running npm run bundle it will create the stripped version

// dist/main.js
import fs from 'fs';

class Service {
    expensive(res = "") {
        for (let i = 0; i < 1000; i++)
            res += i;
        return res;
    }
    normal() {
        return "Hi mom!";
    }
}
const s = new Service();
console.log(s.normal());
// and I can even use it in different situations, which usually expect the output.
fs.writeFileSync("/tmp/abc", "");

and running DEBUG=1 npm run bundle it will create the full version

// dist/main.js
import fs from 'fs';

class Service {
    expensive(res = "") {
        for (let i = 0; i < 1000; i++)
            res += i;
        return res;
    }
    normal() {
        return "Hi mom!";
    }
}
class Logger {
    static log(statement) {
        console.log(statement);
        return statement;
    }
}
const s = new Service();
Logger.log(`${s.expensive()}`);
console.log(s.normal());
// and I can even use it in different situations, which usually expect the output.
fs.writeFileSync("/tmp/abc", Logger.log("not printed to screen nor to file but I wont have runtime exceptions, because TS hints me to catch the undefined case with the null'ish concealing") ?? "");

(for completeness, my tsconfig.json)

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "dist",
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "baseUrl": "."
  },
  "ts-node": {
    "transpileOnly": true
  }
}

If you're having trouble with Rollup to shake those statements off, alternatively you can prevent the Factory.createDebugStatement() from being invoked by passing Factory.createDebugStatement as a reference.

e.g.

Factory.createDebugStatement = (arg1, arg2) => {
  return `${arg1}-${arg2}`;
};

function log(statement: string, ...args: any[]): void {
  if (debug) {
    console.log(statement.replace('%s', args.map((arg) => (typeof arg === 'function' ? arg() : arg)).join('')));
  }
}

// somewhere in the application
log('hi %s mom!', Factory.createDebugStatement.bind(null, 'hello', 'world'));
// Output: hi hello-world mom!

Of course if your Factory.createDebugStatement don't take any argument, then you can simply do...

log('hi %s mom!', Factory.createDebugStatement);

The above won't invoke Factory.createDebugStatement if debug=false.
And this complies with 'Build Once Deploy Many' strategy.