Add ability to define custom variables

[jaredpalmer]

Add --define flag for defining custom variables that will be replaced at build-time. It uses babel-plugin-transform-replace-expressions under the hood. to replace expressions with values in noth your source code (in src) and in your node_modules as well. Other babel transforms are NOT executed on node_modules at this time, just this special replace-expression plugin.

Usage

Pass a comma-separated list of key-values to the --define flag in your package.json. You do not need to add quotes for strings values. Numbers WILL be cast to numbers automagically.

tsdx --build --define FOO=hello # => FOO = "hello"
tsdx --build --define FOO=hello,VERSION=2 # => FOO = "hello", VERSION = 2

It works the same way for tsdx watch --define

Example

We want to define ZOOP as "foo" and VERSION as 2 to in our package.

First, to get TypeScript to play nicely, you should add a ./src/env.d.ts file with variable declarations.

// ./src/env.d.ts
declare var ZOOP: string;
declare var VERSION: number;

Now we can use these like they were magically equivalent to whatever we set them to. Since these are treated as values by TypeScript, you do not need to import them.

// src/index.ts
export function sup() {
  console.log(VERSION)
  console.log(ZOOP)
}

In our package.json, we use the --define flag

// package.json
"scripts": {
   "start": "tsdx watch --define ZOOP=foo,VERSION=2",
   "build": "tsdx build --define ZOOP=foo,VERSION=2"
}

When we run yarn build or yarn start, TSDX will do the replacements and our output will look like this... (note: only including CJS outputs for brevity, replacements are made in all module formats).

// dist/mylib.cjs.development.js
'use strict';

function sup() {
  console.log(2);
  console.log("foo");
}

exports.sup = sup;
//# sourceMappingURL=mylib.cjs.development.js.map

// dist/mylib.cjs.production.js
"use strict";exports.sup=function(){console.log(2);console.log("foo")};
//# sourceMappingURL=mylib.cjs.production.min.js.map	

Future Work / Discussion

• Ability to define different values for dev/prod?

[jaredpalmer]

Will cut a release tomorrrow when I land in Poland

[swyxio]

the example is well written, but i'm not sure when i would want this. whats the benefit? i assume this is something youre doing in formik. if you want my personal reaction, i feel this is a bit niche and something i'd lean on the .babelrc to set up separately.

and there's also the question of the api. if we added this to tsdx.config.js, we wouldn't need to automagically cast numbers, and we'd be able to resolve these values from dotenv, ternary it based on process.env, or pull from other data sources. feels a lot more powerful than just adding the flag, imo.

but this is me kinda bikeshedding. do what u want if u feel strong enough about it :)

[jaredpalmer]

Yeah i had started down this path before implementing tsdx.config.js.

[dfsa-bot]

Is this still applicable? Can't find any instructions in main readme file

[agilgur5]

@dfsa-bot as you can see above, this PR was closed, not merged. There aren't instructions as it never existed.
Per #636 and above comments, you can use babel-plugin-transform-replace-expressions for the same effect. It's not really worthwhile to increase the surface area of the TSDX API for a redundant flag.

[dfsa-bot]

@agilgur5 do you mind sharing an example of the above?

[agilgur5]

@dfsa-bot Sorry, this isn't a support forum and I do not have the resources to help with everyone's code, especially for a different library.

I would encourage you to look at the docs of babel-plugin-transform-replace-expressions, which has its own examples.