Render

About The Render Function

const tagName = {
  mapping: {},
  async render(template, styles, attrs, innerText) {
    await template(``);
  },
};

The render function is run whenever the template tag is compiled.

Render Parameters

template

The function that adds the template to the widget. A template must only have one root element, or it will not be rendered as expected.

styles

A JSON of the styles (CSS and attributes) for the tag with the names as the keys and values as the values. Attributes overwrite the CSS properties. This object will already be validated based on the mapping object. All unused styles will be set to null.

attrs

A JSON of the attributes for the tag with the attribute names as the keys and values as the values. This object will already be validated based on the mapping object. All unused attributes will be set to null.

innerText

A string of the inner text of the tag.

Template Function

The template function compiles and adds the input to the widget. The input should be made up of the normal tags and attributes, but not the <style> tag. These tags will not be affected by CSS, as they will automatically have the no-css attribute.

Here is an example that would make a <hr>:

async render(template, styles, attrs, innerText) {
  await template(`
    <stack 
      background="${styles.background ?? "#000-#fff"}" 
      url="${styles.url}" 
      cornerRadius="${styles.cornerRadius}"
    >
      ${styles.width === null && "<spacer/>"}
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" image-size="${
        styles.width ?? 100
      },${styles.height ?? 1}"/>
      ${styles.width === null && "<spacer/>"}
    </stack>
  `);
},

A Few Quick Notes About The Code Above

background="${styles.background ?? "#000-#fff"}"

This sets the background to the input background, or if it doesn’t have a value, it sets it to "#000-#fff"

${styles.width === null && "<spacer/>"}

This will add a spacer to the code to automatically expand it if the width style has no value.

The Children Attribute

The children attribute is a bool type attribute that can go on any tags throughout the template. This attribute will move the children of the original element to this element to be compiled within the template. For example, if you wanted to make a stack-like element that is always laid out vertically, you can do this:

await template(`
  <stack layout="vertically" children="true">
  </stack>
`)