TypeScript preprocessor for vs community ?

[Samuel Girardin]

Hi, 

That's not really bjs related, But does anyone know if there is a TypeScript preprocessor plugin. for  vs communty  It could be useful to have some #DEFINE #IF etc, to manage different version ? 

 I only found some exotic workflow and not related to visual studio. Any infos ?

[Wingnut]

Hi Sam.  Sorry if I'm butting-in (talking about things that are over my head)... but... did you read this thing?  They seem to be debating about the things you speak-of.

It looks like about half of the opinions are pro- #DEFINE #IF, and the other half are "do it in a separate external process". 

I found it with a google search for ts preprocessor.  In that search, there are some links to "Karma"... which might be something.

Many more and smarter comments coming soon, I'm sure.  Hope you're doing well and having a fun summer.

[unintellisense]

I don't know of a Visual Studio specific solution, nor a solution specific to any IDE for that matter. I have accomplished this using build/bundling process, gulp/browserify with the tsify, envify and uglify plugins.

This is how I implemented it, hopefully it makes sense as I am just copy/pasting and not trimming it down to the bare example.

gulp.task('browser:watch:min', ['browser:clean', 'browser:static:min'], () => {
  let bundler = browserify(path.join(__dirname, 'src', 'browserMain.ts'), { paths: ['./src'] })
    .plugin(tsify, tsconfig.compilerOptions)
    .transform(browserifyCss)
    .transform(envify, { BUILD_FLAG: 'production', BUILD_MODE: 'browser' })
    .plugin(watchify);

  bundler.on('update', () => { loadBundle(bundler, true) });
  loadBundle(bundler, true);
});

gulp.task('browser:watch:max', ['browser:clean', 'browser:static:max'], () => {
  let bundler = browserify(path.join(__dirname, 'src', 'browserMain.ts'), { paths: ['./src'] })
    .plugin(tsify, tsconfig.compilerOptions)
    .transform(browserifyCss)
    .transform(envify, { BUILD_FLAG: 'development', BUILD_MODE: 'browser' })
    .plugin(watchify);

  bundler.on('update', () => { loadBundle(bundler, false) });
  loadBundle(bundler, false);
});

function loadBundle(bundler, makeUgly) {
  let now = new Date();
  console.log(` ${(now.getHours() < 10 ? '0' : '') + now.getHours()}:${(now.getMinutes() < 10 ? '0' : '') + now.getMinutes()}:${(now.getSeconds() < 10 ? '0' : '') + now.getSeconds()} reloading bundle...`);

  let newBundle = bundler.bundle().on('error', (error) => console.error(error.toString()))
    .pipe(source('bundle.js'));
  if (makeUgly) {
    newBundle.pipe(streamify(uglify()));
  }
  newBundle.pipe(gulp.dest(__dirname + '/build'))
    .on('end', function () {
      let now = new Date();
      console.log(` ${(now.getHours() < 10 ? '0' : '') + now.getHours()}:${(now.getMinutes() < 10 ? '0' : '') + now.getMinutes()}:${(now.getSeconds() < 10 ? '0' : '') + now.getSeconds()} bundle reloaded...`);
    });
}

'browser:watch:min' and 'browser:watch:max' are the gulp tasks which will pass a different argument to envify, the BUILD_FLAG property in particular being used later. I do the same thing on the server side but just using gulp-envify and gulp-uglify.

Then in a ts file, you can refer to BUILD_FLAG, which when compiled gets converted by envidy to the literal value passed in the gulp task.

if ("development" === process.env.BUILD_FLAG) {
	console.log(`attachControl: TopDownFocusCameraMouseInput`)
}

When compiled (with browser:watch:min task in this example) becomes 

if ("development" === "production") {
	console.log(`attachControl: TopDownFocusCameraMouseInput`)
}

Finally, uglifys dead code removal would completely remove this from the emitted js file.

Depending on your build setup you may be able to accomplish this with less pieces. There is a webpack loader https://github.com/nippur72/ifdef-loader that lets you use something closer to compiler directives, but I don't use webpack and don't really like the approach, for some reason the directives being in comments (that would be ignored if the ts gets built differently, I.E. without webpack) rubs me the wrong way. Hope this helps. I am also curious to see what solutions others might use.

 

[Samuel Girardin]

Hi @Wingnut, thanks for the link. When I was asking myself that it would be cool to have this preprocessor thing, I didn't realize the subject is open since 2 years... My side is pro #DEFINE #IF. But I'm really a rookie on this part. I'm testing performances on 'low' level memory access for my project. I have plenty of methods like : 

//#IF SAFE
         this.q = ETools.Malloc_new_quaternion();
         E.dGeomGetQuaternion(this.dxGeom, this.q);
         return ETools.Pointer_To_Vector4(this.q, true);
// #IF FAST
        return [Module.HEAPF64[((this.pointer_rot) >> 3)], - Module.HEAPF64[((this.pointer_rot + 8) >> 3)], - Module.HEAPF64[((this.pointer_rot + 16) >> 3)], - Module.HEAPF64[((this.pointer_rot + 24) >> 3)]]

And it would be really cool to compile the safe or the fast project easily with only the code I need. Performance test will be easier, and  my 'productivity' will increase. I will stay tune on this preprocessor thing. And it's not to hot on the boat for the moment.. I hope you're doing well too.

@unintellisense, thanks for your post. I'm really bad with gulp, etc. I never took time to learn how to use it. That's why I was asking for a 'ready to fly' magic preprocessor button ! Maybe I will write a simple parser that will erase the unwanted code before compiling.