Tips on Converting Coffeescript to JavaScript (AngularJS)

So I had the daunting task of converting some Coffeescript to JavaScript (AngularJS more specifically). Here are some notes on the process which might help you if you ever face the same task.

Some tools to help:

decaffeinate
decaffeinate Online tool
Depercolator

Steps I did:

Run decaffeinate directory by directory (or file/file)
– refactored to use Angular class definitions
– use ‘ngInject’ (ng-annotate) + add missing ngInject’s
– Fix function arrows
– remove unnecessary return  statements
– replace __guard__ functions and use lodash _.get instead
– use es6 param defaults – replace if (initialValue == null) { initialValue = undefined; } with
– replaced Array.from usage into forEach loops (or such)
– removed unessarry anonymous functions
– removed unessarry const declared functions
– fixed screwed up for loops
– ensured singleton services have $get functions
– Fixed broken tests (if you have after every conversion)
Use eslint after to find/fix errors
– Update build steps to use browserify/babel/jest
– update package.json to contain browserify transform config
– fix broken spec tests (function declarations)

Some Useful Links:

Open source Angular biker router by Console: https://github.com/consoleau/bicker
Tips on coffee to js conversions https://blog.bugsnag.com/converting-a-large-react-codebase-from-coffeescript-to-es6/
Setting up grunt with balel and browserify https://mitchgavan.com/es6-modules/
CoffeeScript to Angular https://github.com/CaryLandholt/ng-classify
ng-annotate https://github.com/olov/ng-annotate

Before And After Code Snippets

Delcaring angular providers.

Before

After

 

Array.from usage

Before

After
This is ES5 blocked scope function.

 

es5 conversion __guard__ function

Before

After


 

$get functions

An AngularJS service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called  $get, which holds the service factory function.

TypeError: Cannot convert undefined or null to object

 

es6 default params

Before

After

 

const assigned functions

Before

After

screwed up for loops.

Before

 After

bizzare anonymous self executing functions

Before

After

Array.from

“The Array.from() method creates a new Array instance from an array-like or iterable object.”

Before

 After

Spacing is tabs and not characters

IntelliJ > Code > Reformat Code
Spacing is tabs and not characters

angular inject module error

missing 2 things.
  1. ngInject as the first line inside the functions which inject modules
  2. browserify config (below) in the package.json (yes that’s weird place to put it but it is what it is).

TypeError: Cannot read property ‘alpha’ of undefined

alphanumeric regex

Array.from / anonymous fn / spread operator

Before

After

fix broken spec tests (function declarations)

COFFEE

BEFORE

AFTER

Search Terms

“convert coffeescript to javascript export statements”

“convert coffeescript to angular”

javascript “$get function”
javascript “$get function” angularjs providers
Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

One thought on “Tips on Converting Coffeescript to JavaScript (AngularJS)

Leave a Reply

Your email address will not be published. Required fields are marked *