Working on mimosa-traceur Issue #2

[Ken Carpenter]

I'm working on mimosa-traceur Issue #2, which would prevent Traceur from compiling third-party code.  In that case, Mimosa should just copy the .js files through to the public folder.

I have the exclude regex option in and working, and Traceur is only being used to compile the files that don't match the exclude pattern.

The problem is that Mimosa is not invoking the copy compiler instead, so I get a bunch of "dependency cannot be found" errors.

I've registered for the init step as well now:

var init = function (mimosaConfig, mimosaOptions, next) {

  if (isFileExcludedFromCompilation(mimosaOptions.inputFile, mimosaConfig.traceur.excludeRegex)) {

    console.log("UNCLAIMING FILE: " + mimosaOptions.inputFile + " excludeRegex=" + mimosaConfig.traceur.excludeRegex);

    mimosaOptions.destinationFile = undefined;

  }

  return next();

}

 

var registration = function ( mimosaConfig, register ) {

  register(['add','update','buildFile'], 'preCompile', compile, mimosaConfig.extensions.javascript);

  register(['add','update','buildFile'], 'init', init, mimosaConfig.extensions.javascript);

}

Then, in the compile() method, where it loops over each file, I set outputFileText to undefined.   

 

  return mimosaOptions.files.forEach(function(file) {

    // Check if this file is excluded from compilation

    if (isFileExcludedFromCompilation( file.inputFileName, mimosaConfig.traceur.excludeRegex )) {

      // Do nothing for files that are excluded from compilation

      console.log("SKIPPING COMPILATION OF: " + file.inputFileName);

      file.outputFileText = undefined;

      newFiles.push(file);

      done();

    }

The done() method is defined as:

  var done = function() {

    if (++i === whenDone) {

      mimosaOptions.files = newFiles;

      return next();

    }

  };

I wondered if perhaps the copy compiler was running before this module, so I tried changing the build step from preCompile to compile, but it seemed to make no difference.

I just had a brainwave while writing this though.  I removed the init processing step and just changed the code above to pass the input text through to the output text:

  return mimosaOptions.files.forEach(function(file) {

    // Check if this file is excluded from compilation

    if (isFileExcludedFromCompilation( file.inputFileName, mimosaConfig.traceur.excludeRegex )) {

      // Do nothing for files that are excluded from compilation

      console.log("SKIPPING COMPILATION OF: " + file.inputFileName);

      file.outputFileText = file.inputFileText;

      newFiles.push(file);

      done();

    }

This worked!

What do you think of doing it that way? 

[dbashford]

That's a great way of solving that problem.  Essentially the copy compiler is now rendered inert for .js and the traceur compiler is capable of handling the fairly trivial task of copying text over when there is nothing else to do with it.

The problem I've been unable to solve with Mimosa's compilers is one that is somewhat unique to traceur.   Mimosa is HEAVILY extension based.  Most "compilers" have their own extension.  Having to deal with files being compiled differently possessing the same extension is a difficult one to figure out.  If you, for instance, made the traceur compiler work with "file.es6" or somesuch, then we wouldn't have these issues.  The sharing of extension is hard though.

[Ken Carpenter]

Great, I'll go with this method then.  One other thing is that it works if I change the registration step from 'afterCompile' to 'compile'.  Do you think it's better to leave it as 'afterCompile' or change it to 'compile'?

With these changes I've made, it seems to be working pretty well for me.

React transforms the .jsx into .js and allows the ES6 syntax through with the harmony option (aside from Esprima not parsing arrow functions and destructuring on the same function).

Then Traceur compiles all my own files while simply passing through the files in the vendor folder.

The server files for node.js are left alone too, and I use the --harmony flag to allow ES6 code.

Ken

[dbashford]

afterCompile seems best.  For now, until an actual compiler pipeline can be built (react => es6 => js), its best to not treat this as a compiler and instead as a post-compile transform.

Pretty cool it all works!  You have a blog or something?  Should put something up.

[Ken Carpenter]

I have a blog on mindjuice.net, but it's mainly focused on games and iOS development.  I'm in the process of setting up a new blog focused on web dev topics.  I'll try to get a post up there in the next couple of weeks.

Ken

[David Bashford]

One thing that would be awesome is some sort of React + Traceur skeleton/example app of some sort.  Something showing off the two things joined.  Do you have a worthy example app that you used when doing the work on the module?

--
You received this message because you are subscribed to the Google Groups "mimosajs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mimosajs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ken Carpenter]

My example code was just some random ES6 code to make sure it was compiling/translating things properly.

I was thinking of making some minor changes to the React Backbone To Do example to use some ES6 features and then turning it into a skeleton.

I'll work on that and the blog post together, but it may be a week or two.

Ken

[dbashford]

That would be epic!  Let me know if you need any help or review.