Custom Tile Editor Improvements

Our latest platform update includes a number of improvements in the Custom Tile editor, including a new transpiler feature which is available in preview!

  • Fixed full-screen functionality in editor
  • Added dark-mode preview to match dark editor (and added dark scrollbars to editor)
  • Hide tile settings fields for imported tiles by default (toggleable)
  • Add keyboard shortcuts to the editor:
    • Ctrl+S = Save
    • Ctrl+Enter = Preview
  • Add option to click header during a Settings Diff to select all items in a column
  • Added a Preview Transpiler feature which can transpile modern code to support old browsers
    (see below)

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.

:information_source: 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.

image

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. :slight_smile:

1 Like

Thanks for the continual platform improvements.

Having mastered Super Tiles, I’m ready to move on to Custom Tiles.

1 Like