Template

About The 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>:

await template(`
    <stack background="${styles.background || "black-white"}" url="${
      styles.url || "null"
    }" cornerRadius="${styles.cornerRadius || "null"}">
      ${styles.width ? "" : "<spacer/>"}
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" image-size="${
        styles.width || 100
      },${styles.hight || 1}"/>
      ${styles.width ? "" : "<spacer/>"}
    </stack>
  `)
}

A Few Quick Notes About The Code Above

background="${styles.background || "black-white"}"

This sets the background to the the input background or, if it doesn’t have value, it sets it to "black-white"

${styles.width ? "" : "<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 alway layed out vertically you can do this:

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

Current Code

const tagName = async (validate, template, update, styles, attrs, innerText) => {

const mapping = {…}

validate(attrs, styles, mapping)

// update(styles, mapping)

await template(`
 …
`)
}