lite

install

npm i @vandeurenglenn/lite

usage

import { LiteElement, property, query, state, html, css, customElement } from '@vandeurenglenn/lite'
@customElement('some-element')
class SomeElement extends LiteElement {
  @property()
  accessor items = ['hello', 'world']

  render() {
    return html`${this.items.map((item) => html`${item}`)}`
  }
}

provides/consumes

basic data binding using pubsub

consumes

import { LiteElement, property, html, customElement } from '@vandeurenglenn/lite'
@customElement
class ConsumerEl extends LiteElement {
  @property({ consumes: true, type: Array })
  accessor items

  @property({ consumes: 'someunique-id', type: Boolean })
  accessor drawerOpen

  render() {
    return html`${this.items.map((item) => html`${item}`)}`
  }
}

provides

import { LiteElement, property, customElement } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
  @property({ provides: true })
  accessor items = ['hello', 'world']

  @property({ provides: 'someunique-id', type: Boolean })
  accessor drawerOpen = false
}

query

import { LiteElement, property, customElement, query } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
  @query('my-item') accessor item

  render() {
    return html`<my-item></my-item>`
  }
}

queryAll

import { LiteElement, property, customElement, queryAll } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
  @queryAll('my-item') accessor items

  render() {
    return html`<my-item></my-item><my-item></my-item>`
  }
}

darkMode

import { LiteElement, property, customElement, queryAll } from '@vandeurenglenn/lite'
@customElement
class AppShell extends LiteElement {
  @darkMode({ provides: true })
}

onChange

import { LiteElement, property, customElement } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
  @property({ type: Boolean })
  accessor drawerOpen = false

  // runs after render
  onChange(propertyKey, value) {}
}

willChange

import { LiteElement, property, customElement } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
  @property({ type: Boolean })
  accessor drawerOpen = false

  // runs before render
  willChange(propertyKey, value) {
    return value // always return
  }
}

firstRender

import { LiteElement, property, customElement } from '@vandeurenglenn/lite'
@customElement
class ProviderEl extends LiteElement {
  @property({ type: Boolean })
  accessor drawerOpen = false

  // runs after first render
  firstRender() {}
}