Syntax Highlighting

When you author Joystick components, your component's render() method will expect you to return a template literal string. By default in most editors, because this is just a string (albeit a special type), most editors just style the entirety of the HTML inside as a string (monochrome).

To get around this, Joystick offers two solutions:

1. If you're using VSCode, it's highly recommend that you install the Template Literals package by julienetie. This automatically enables syntax highlighting of HTML in template literal strings.

2. Use Joystick's built-in html() render method to help you "tag" your template literal and enable syntax highlighting (and code folding) via the lit-html (VSCode) package by Matt Bierner.

Using the html() render method

To utilize the HTML render method, inside of your component's render() method—using destructuring on the component instance passed to render()—you'll want to define the html property and return a call to it with your HTML string from render():

import joystick from "@joystick.js/ui-canary";
import Button from "../../components/button/index.js";
import format_iso_to_human_readable from "../../../lib/format_iso_to_human_readable.js";
import supported_languages from "../../../lib/supported_languages.js";

const Index = joystick.component({
  test: {
    name: 'index_page',
  },
  data: async (api = {}) => {
    return {
      index: await api.get('index'),
    };
  },
  state: {
    websockets_connected: false,
  },
  websockets: (instance = {}) => {
    ...
  },
  css: {
    ...
  },
  events: {
    ...
  },
  render: ({ props, html, data, component, state, i18n, user, language, each }) => {
    return html`
      <div class="index-page">
        ...
      </div>
    `;
  },
});

export default Index;

Above, we destructure html from the component instance passed to render() and then call it like html\HTML for component goes here...``. Once we have this in our component, with the lit-html package installed, we should get syntax highlighting and code folding, right inside of VSCode.

{% alert theme="warning" title="Other IDE Support" } If you're using a different IDE, it's recommended that you leverage the html() render method to enable syntax highlighting unless your IDE of choice has a package similar to the two mentioned above. {% /alert %}