I have been working quite a bit on a Cordova/PhoneGap plugin Cordova/PhoneGap SQLite plugin (introduced here) and have encountered a need for round-trip conversions between CoffeeScript and JavaScript. The Javascript portion of the iOS version was originally authored in CoffeeScript and compiled to Javascript. For the Android version, I had originally made an adaptation from a version in the Cordova/PhoneGap repository as of October 2011 and then the Javascript portion was largely rebuilt by someone else, based on generated code from the iOS version, to provide some improvements for batch processing. I would like to refactor the code to a common base that can be easily enhanced and maintained in both CoffeeScript and Javascript.
The problem
I already posted several reasons why I find CoffeeScript so much better to work with and I continue to feel the same way for this project, however there are still people in the community who try to stay away from CoffeeScript. Yes there are tools like js2coffee to convert Javascript back to CoffeeScript but there are quite a few problems right now including:
- By default, the coffee compiler puts the entire code into a special top-level block with the extra indentation but js2coffee does not take the code back out of the block. The only workaround is to add a -b flag to coffee to skip the extra block.
- Every CoffeeScript class is converted to a block that is achieving the effect in Javascript using constructor functions and prototype members. The conversion back to CoffeeScript will make a small tree of constructor and prototype functions. This becomes worse when class members and/or class functions are used.
- When var declarations are generated in Javascript, the conversion back to CoffeeScript adds extra statements assigning the variables to undefined.
- Of course, comments and perhaps extra line spacing are normally ignored. I believe there is a version of js2coffee that can preserve the comment lines but have not taken an opportunity to try it out.
Approach
Of course, the biggest challenge programming-wise is to convert the classes to using constructor and prototype functions. Fortunately I do not have to deal with inheritance for this case so basically each member function is converted to a prototype member declaration, static members get special treatment, and the class declarations are replaced with constructor functions.
The other major change is to enclose the entire CoffeeScript code into a do block, so that only 2 functions will have to be exported.
Changing a member function into a prototype function would indent the function code one block less, while putting the code into a do block would indent the code one block more. So I was able to let the function code remain with some extra indentation, which will be perfect when the code will be put into a do block.
Sample class
So here is a CoffeeScript class, to handle a sqlite transaction:
class SQLitePluginTransaction
constructor: (@dbPath) ->
@executes = []
executeSql: (sql, values, success, error) ->
txself = @
successcb = null
if success
successcb = (execres) ->
saveres = execres
res =
rows:
item: (i) ->
saveres.rows[i]
length: saveres.rows.length
rowsAffected: saveres.rowsAffected
insertId: saveres.insertId || null
success(txself, res)
errorcb = null
if error
errorcb = (res) ->
error(txself, res)
@executes.push getOptions({ query: [sql].concat(values || []), path: @dbPath }, successcb, errorcb)
return
complete: (success, error) ->
throw new Error "Transaction already run" if @__completed
@__completed = true
txself = @
successcb = (res) ->
success(txself, res)
errorcb = (res) ->
error(txself, res)
begin_opts = getOptions({ query: [ "BEGIN;" ], path: @dbPath })
commit_opts = getOptions({ query: [ "COMMIT;" ], path: @dbPath }, successcb, errorcb)
executes = [ begin_opts ].concat(@executes).concat([ commit_opts ])
opts = { executes: executes }
Cordova.exec("SQLitePlugin.backgroundExecuteSqlBatch", opts)
@executes = []
return
and the generated Javascript (with no extra block indentation, small font to save space):
SQLitePluginTransaction = (function() {
function SQLitePluginTransaction(dbPath) {
this.dbPath = dbPath;
this.executes = [];
}
SQLitePluginTransaction.prototype.executeSql = function(sql, values, success, error) {
var errorcb, successcb, txself;
txself = this;
successcb = null;
if (success) {
successcb = function(execres) {
var res, saveres;
saveres = execres;
res = {
rows: {
item: function(i) {
return saveres.rows[i];
},
length: saveres.rows.length
},
rowsAffected: saveres.rowsAffected,
insertId: saveres.insertId || null
};
return success(txself, res);
};
}
errorcb = null;
if (error) {
errorcb = function(res) {
return error(txself, res);
};
}
this.executes.push(getOptions({
query: [sql].concat(values || []),
path: this.dbPath
}, successcb, errorcb));
};
SQLitePluginTransaction.prototype.complete = function(success, error) {
var begin_opts, commit_opts, errorcb, executes, opts, successcb, txself;
if (this.__completed) throw new Error("Transaction already run");
this.__completed = true;
txself = this;
successcb = function(res) {
return success(txself, res);
};
errorcb = function(res) {
return error(txself, res);
};
begin_opts = getOptions({
query: ["BEGIN;"],
path: this.dbPath
});
commit_opts = getOptions({
query: ["COMMIT;"],
path: this.dbPath
}, successcb, errorcb);
executes = [begin_opts].concat(this.executes).concat([commit_opts]);
opts = {
executes: executes
};
Cordova.exec("SQLitePlugin.backgroundExecuteSqlBatch", opts);
this.executes = [];
};
return SQLitePluginTransaction;
})();
and when converted back to CoffeeScript:
SQLitePluginTransaction = (->
SQLitePluginTransaction = (dbPath) ->
@dbPath = dbPath
@executes = []
SQLitePluginTransaction::executeSql = (sql, values, success, error) ->
errorcb = undefined
successcb = undefined
txself = undefined
txself = this
successcb = null
if success
successcb = (execres) ->
res = undefined
saveres = undefined
saveres = execres
res =
rows:
item: (i) ->
saveres.rows[i]
length: saveres.rows.length
rowsAffected: saveres.rowsAffected
insertId: saveres.insertId or null
success txself, res
errorcb = null
if error
errorcb = (res) ->
error txself, res
@executes.push getOptions(
query: [ sql ].concat(values or [])
path: @dbPath
, successcb, errorcb)
SQLitePluginTransaction::complete = (success, error) ->
begin_opts = undefined
commit_opts = undefined
errorcb = undefined
executes = undefined
opts = undefined
successcb = undefined
txself = undefined
throw new Error("Transaction already run") if @__completed
@__completed = true
txself = this
successcb = (res) ->
success txself, res
errorcb = (res) ->
error txself, res
begin_opts = getOptions(
query: [ "BEGIN;" ]
path: @dbPath
)
commit_opts = getOptions(
query: [ "COMMIT;" ]
path: @dbPath
, successcb, errorcb)
executes = [ begin_opts ].concat(@executes).concat([ commit_opts ])
opts = executes: executes
Cordova.exec "SQLitePlugin.backgroundExecuteSqlBatch", opts
@executes = []
SQLitePluginTransaction
)()
This code is not so great to work with, considering the extra block with indentation that is added in the round trip from a class declaration.
Prototype members
So the first task is to convert the member functions to prototype members, the diffsS are shown here:
@@ -111,7 +112,7 @@ class SQLitePluginTransaction
constructor: (@dbPath) ->
@executes = []
- executeSql: (sql, values, success, error) ->
+SQLitePluginTransaction::executeSql = (sql, values, success, error) ->
txself = @
successcb = null
if success
@@ -132,7 +133,7 @@ class SQLitePluginTransaction
@executes.push getOptions({ query: [sql].concat(values || []), path: @dbPath }, successcb, errorcb)
return
- complete: (success, error) ->
+SQLitePluginTransaction::complete = (success, error) ->
throw new Error "Transaction already run" if @__completed
@__completed = true
txself = @
So all that remains in the original class block is the constructor function. The generated Javascript is omitted in order to save some space. Here is the CoffeeScript that comes out of the round trip:
SQLitePluginTransaction = (->
SQLitePluginTransaction = (dbPath) ->
@dbPath = dbPath
@executes = []
SQLitePluginTransaction
)()
SQLitePluginTransaction::executeSql = (sql, values, success, error) ->
errorcb = undefined
successcb = undefined
txself = undefined
txself = this
successcb = null
if success
successcb = (execres) ->
res = undefined
saveres = undefined
saveres = execres
res =
rows:
item: (i) ->
saveres.rows[i]
length: saveres.rows.length
rowsAffected: saveres.rowsAffected
insertId: saveres.insertId or null
success txself, res
errorcb = null
if error
errorcb = (res) ->
error txself, res
@executes.push getOptions(
query: [ sql ].concat(values or [])
path: @dbPath
, successcb, errorcb)
SQLitePluginTransaction::complete = (success, error) ->
begin_opts = undefined
commit_opts = undefined
errorcb = undefined
executes = undefined
opts = undefined
successcb = undefined
txself = undefined
throw new Error("Transaction already run") if @__completed
@__completed = true
txself = this
successcb = (res) ->
success txself, res
errorcb = (res) ->
error txself, res
begin_opts = getOptions(
query: [ "BEGIN;" ]
path: @dbPath
)
commit_opts = getOptions(
query: [ "COMMIT;" ]
path: @dbPath
, successcb, errorcb)
executes = [ begin_opts ].concat(@executes).concat([ commit_opts ])
opts = executes: executes
Cordova.exec "SQLitePlugin.backgroundExecuteSqlBatch", opts
@executes = []
So the member functions are much better to work with after going through the round trip and now the issue remains with the constructor.
Constructor function
So all that remains of the class declaration:ss
class SQLitePluginTransaction
constructor: (@dbPath) ->
@executes = []
So to replace this with the constructor function, we can extract the constructor function from the generated code above leaving out the extra declaration block:
SQLitePluginTransaction = (dbPath) ->
@dbPath = dbPath
@executes = []
But there is something that js2coffee does not tell us: we need to add an empty return statement otherwise the constructor function will return the last expression evaluated and the user application code will fail. So here is the desired function constructor code:
SQLitePluginTransaction = (dbPath) ->
@dbPath = dbPath
@executes = []
return
and after a round trip:
SQLitePluginTransaction = (dbPath) ->
@dbPath = dbPath
@executes = []
SQLitePluginTransaction::executeSql = (sql, values, success, error) ->
errorcb = undefined
successcb = undefined
txself = undefined
txself = this
successcb = null
if success
successcb = (execres) ->
res = undefined
saveres = undefined
saveres = execres
res =
rows:
item: (i) ->
saveres.rows[i]
length: saveres.rows.length
rowsAffected: saveres.rowsAffected
insertId: saveres.insertId or null
success txself, res
errorcb = null
if error
errorcb = (res) ->
error txself, res
@executes.push getOptions(
query: [ sql ].concat(values or [])
path: @dbPath
, successcb, errorcb)
SQLitePluginTransaction::complete = (success, error) ->
begin_opts = undefined
commit_opts = undefined
errorcb = undefined
executes = undefined
opts = undefined
successcb = undefined
txself = undefined
throw new Error("Transaction already run") if @__completed
@__completed = true
txself = this
successcb = (res) ->
success txself, res
errorcb = (res) ->
error txself, res
begin_opts = getOptions(
query: [ "BEGIN;" ]
path: @dbPath
)
commit_opts = getOptions(
query: [ "COMMIT;" ]
path: @dbPath
, successcb, errorcb)
executes = [ begin_opts ].concat(@executes).concat([ commit_opts ])
opts = executes: executes
Cordova.exec "SQLitePlugin.backgroundExecuteSqlBatch", opts
@executes = []
Much better, hey? The only major problem I see is that the empty return statements were forgotten by js2coffee. Yeah some extra undefined declarations can also be removed. But at least this is usable, in case I receive patches to the Javascript version.
Class members and methods
I have actually just learned something about how class members work in CoffeeScript, which will lose their meaning in the translation to Javascript. So for one of the classes, I had first factored the regular member functions into prototype members and the following remains:
class SQLitePlugin
constructor: (@dbPath, @openSuccess, @openError) ->
throw new Error "Cannot create a SQLitePlugin instance without a dbPath" unless dbPath
@openSuccess ||= () ->
console.log "DB opened: #{dbPath}"
return
@openError ||= (e) ->
console.log e.message
return
@open(@openSuccess, @openError)
# Note: Class member
# All instances will interact directly on the prototype openDBs object.
# One instance that closes a db path will remove it from any other instance's perspective as well.
openDBs: {}
# Note: Class method
@handleCallback: (ref, type, obj) ->
callbacks[ref]?[type]?(obj)
callbacks[ref] = null
delete callbacks[ref]
return
Which becomes after a round-trip:
SQLitePlugin = (->
SQLitePlugin = (dbPath, openSuccess, openError) ->
@dbPath = dbPath
@openSuccess = openSuccess
@openError = openError
throw new Error("Cannot create a SQLitePlugin instance without a dbPath") unless dbPath
@openSuccess or (@openSuccess = ->
console.log "DB opened: " + dbPath
)
@openError or (@openError = (e) ->
console.log e.message
)
@open @openSuccess, @openError
SQLitePlugin::openDBs = {}
SQLitePlugin.handleCallback = (ref, type, obj) ->
_ref = undefined
_ref[type] obj if typeof _ref[type] is "function" if (_ref = callbacks[ref])?
callbacks[ref] = null
delete callbacks[ref]
SQLitePlugin
)()
and the hints show up again: class member like SQLitePlugin::openDBs = ... and class method like SQLitePlugin.handleCallback = ...
So to fix the class member and method:
@@ -62,13 +61,13 @@ class SQLitePlugin
return
@open(@openSuccess, @openError)
- # Note: Class member
- # All instances will interact directly on the prototype openDBs object.
- # One instance that closes a db path will remove it from any other instance's perspective as well.
- openDBs: {}
+# Note: Class member
+# All instances will interact directly on the prototype openDBs object.
+# One instance that closes a db path will remove it from any other instance's perspective as well.
+SQLitePlugin::openDBs = {}
- # Note: Class method
- @handleCallback: (ref, type, obj) ->
+# Note: Class method (will be exported by a member of root.sqlitePlugin)
+SQLitePlugin.handleCallback = (ref, type, obj) ->
callbacks[ref]?[type]?(obj)
callbacks[ref] = null
delete callbacks[ref]
So to fix the constructor:
@@ -50,8 +50,11 @@ getOptions = (opts, success, error) ->
opts.callback = cbref(cb) if has_cbs
opts
-class SQLitePlugin
- constructor: (@dbPath, @openSuccess, @openError) ->
+# Prototype constructor function
+SQLitePlugin = (dbPath, openSuccess, openError) ->
+ @dbPath = dbPath
+ @openSuccess = openSuccess
+ @openError = openError
throw new Error "Cannot create a SQLitePlugin instance without a dbPath" unless dbPath
@openSuccess ||= () ->
console.log "DB opened: #{dbPath}"
@@ -60,6 +63,7 @@ class SQLitePlugin
console.log e.message
return
@open(@openSuccess, @openError)
+ return
Further
The one thing I have not really gone through here is to put the contents into a do -> block and then use the -b flag to tell the coffee compiler not to add an extra block. Then the results of round-trip transformations between CoffeeScript and Javascript should start to become less painful.
