Preview Transpiler
We’ve integrated a transpiler into the Custom Tile editor which will translate the JavaScript in your editor to ES5 which is supported by legacy browsers all the way back to 2009.
This means you can write your Custom Tile code using modern syntax that you’re accustomed to like arrow functions, async/await, string templates and you can easily have it transpiled into ES5 so it works with legacy browsers.
For me, this has been a game-changer for making it much easier to develop custom tiles while still supporting the old browsers that some people are still using.
Source:
let getGreeting = (name="there") => {
console.log(`Hello ${name}, nice to meet you!`)
}
Output:
var getGreeting = function() {
var name = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "there";
console.log("Hello ".concat(name, ", nice to meet you!"));
};
During this preview, we are not automatically transpiling code when you save/preview. You must manually invoke the Preview Transpile option from the menu within the editor. This will transpile the code and display the converted code in an overlay.
Example Workflow
I keep most of my code in GitHub, so I’ve created a new folder for the ‘source’ and have started saving the transpiled code as the main code that is shared in my import URLs. For example, my directory structure looks something like:
/custom-tiles
my-cool-tile.html <-- This is the transpiled code that I share
/src
my-cool-tile.html <-- This is the 'original' code I wrote
Since I was normally just editing a single file, I was previously just tapping the pencil icon in the file toolbar in GitHub while I was viewing the file. Since I now want to include two files in a single commit and I don’t want to deal with syncing the files to my computer, I just tap the . key when I’m viewing my repository and it opens an integrated VS Code editor.
I can then copy my original source code and transpiled code into the respective files and then commit the changes together.
The beauty of this approach is I keep the original raw source code, with all the fancy modern features, that is easy to read… and even if I’ve already shared a Custom Tile import URL that other people are using, I can still just update that original file with the transpiled source and if they decide to update their tile, things keep working as normal for them.