How to import modules in Swift's JavaScriptCore?

Question

I'm trying to use Swift's JavaScriptCore framework to take advantage of an existing JavaScript library that uses ES6 modules. Specifically, morse-pro by Stephen C Phillips. I've added the files to an Xcode playground, then used this code to load the library and run it in the JavaScript context:

import JavaScriptCore
var jsContext = JSContext()
// set up exception handler for javascript errors
jsContext?.exceptionHandler = { context, exception in
    if let exc = exception {
        print("JS Exception:", exc.toString())
    }
}
// read the javascript files in and evaluate
if let jsSourcePath = Bundle.main.path(forResource: "morse-pro-master/src/morse-pro-message", ofType: "js") {
    do {
        let jsSourceContents = try String(contentsOfFile: jsSourcePath)
        jsContext?.evaluateScript(jsSourceContents)
    } catch {
        print(error.localizedDescription)
    }
}

This approach works fine with simple "Hello world" sort of tests, but it chokes on the morse-pro library with this JavaScript error:

SyntaxError: Unexpected token '*'. import call expects exactly one argument.

The error appears to be caused by this line in morse-pro-message.js:

import * as Morse from './morse-pro';

which I believe is trying to import all the morse-pro files as a module.

I'm not familiar with ES6 modules, but the library appears to be working for others in normal JavaScript contexts. Is there something wrong with the way I'm loading the library in Swift? Or are modules a feature that JavaScriptCore doesn't support? (The documentation just says it supports "JavaScript" and doesn't get any more specific.)

I would appreciate any suggestions that point me in the direction of getting this library running in a JavaScriptCore VM.

Answer 1

After much bumbling around in the dark, I found a way to make the library available to Swift without having to manually alter it.

First, as @estus suggested, I installed the library using NPM, which converts it to ES5 but does not resolve the dependencies. So it's still a bunch of separate files that call each other with require and export keywords that neither browsers nor JavaScriptCore understand.

Then I used Browserify to bundle all the dependencies into a single file so that JavaScriptCore could understand it. The normal operation of Browserify hides all the code, so I used the "--standalone" flag to tell it to make marked functions available. If you export the ES5 file directly, it creates a generic object and puts your exported functions under .default. I want them slightly more accessible, so I created a new file to list the exports and then ran Browserify on that. So for example, a file called "morse-export.js" containing:

module.exports.MorseMessage = require('./lib/morse-pro-message.js').default;

Then I run Browserify on it like this:

browserify ./morse-export.js --standalone Morse > ./morse-bundle.js

And include the morse-bundle.js file in my Swift code using Bundle.main.path(forResource). Now I can access the MorseMessage class using Morse.MorseMessage, so back in Swift:

jsContext?.evaluateScript("var morseMessage = new Morse.MorseMessage()")
print(jsContext!.evaluateScript("morseMessage.translate('abc')"))

prints ".- -... -.-." as you would expect.

The downside of this is that you have to manually add whatever classes and functions you want exported to your export file. Still, this seems to be the simplest way to do it. If there's a better way, I would love to hear about it!