https://github.com/mikeal/rza

Create simple HTML elements
https://github.com/mikeal/rza

Last synced: about 2 months ago
JSON representation

Create simple HTML elements

• Host: GitHub
• URL: https://github.com/mikeal/rza
• Owner: mikeal
• Created: 2017-10-07T21:15:37.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-14T22:41:27.000Z (over 6 years ago)
• Last Synced: 2024-07-28T15:49:36.248Z (about 2 months ago)
• Language: JavaScript
• Size: 32.2 KB
• Stars: 92
• Watchers: 6
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# RZA 

Create simple HTML elements



  

    

  



```javascript

const RZA = require('rza')

class MyElement extends RZA {

  get defaults () {

    // default render settings

    return { wrap: false }

  }

  async render (settings, innerHTML) {

    if (settings.wrap) {

      return `${innerHTML}`

    } else {

      return innerHTML

    }

  }

}

window.customElements.define('my-element', MyElement)

```

```html

Test

  Test

Test

  

    Test

  

  let elem = document.querySelector('my-element')

  elem.setAttribute('wrap', false)

  /* or we can just set element properties for the same thing */

  elem.wrap = false

  /* changing the element value ALSO triggers a rerender */

  elem.textContent = 'New Test'

  New Test

```

See also: [markdown-element](https://github.com/mikeal/markdown-element).

## render() function.

The render function you define will be called whenever relevant state

(settings) are altered.

Returning a string will reset the innerHTML of the `` element.

Returning the previous element value is a `noop`, RZA assumes that because

you are returning the prior element you have manipulated it correctly.

Returning an HTML Element will append that element as a child and put

it in the `render` slot of the shadowDOM so that it can be seen.

## default types.

Setting an array for defaults defines those property names as settings

but with no real defaults.

This means that element attributes and properties of these names will

be treated as settings, and alterations to them will cause re-renders.

```javascript

class MyElement extends RZA {

  get defaults () {

    return ['propname']

  }

}

```

Functions (sync and async) can be used as dynamic initializers for

default properties.

```javascript

class MyElement extends RZA {

  get defaults () {

    return { prop: async () => 'example' }

  }

}

```