@aggre/ullr

Functional Web Components

Usage no npm install needed!

<script type="module">
  import aggreUllr from 'https://cdn.skypack.dev/@aggre/ullr';
</script>

README

Functional Web Components

Building Web Components with Functional Programming.

CI Published on npm


      ___                                       ___
     /__/\                                     /  /\
     \  \:\                                   /  /::\
      \  \:\    ___     ___   ___     ___    /  /:/\:\
  ___  \  \:\  /__/\   /  /\ /__/\   /  /\  /  /:/~/:/
 /__/\  \__\:\ \  \:\ /  /:/ \  \:\ /  /:/ /__/:/ /:/___
 \  \:\ /  /:/  \  \:\  /:/   \  \:\  /:/  \  \:\/:::::/
  \  \:\  /:/    \  \:\/:/     \  \:\/:/    \  \::/~~~~
   \  \:\/:/      \  \::/       \  \::/      \  \:\
    \  \::/        \__\/         \__\/        \  \:\
     \__\/                                     \__\/


Installation

Add to lit-html project:

npm i @aggre/ullr

When creating a new project using lit-html as template and RxJS as the state management:

npm i @aggre/ullr lit-html rxjs

Partially supports run on Node.js (with jsdom).

APIs

component

component is a lit-html directive.

Encapsulate the template with Shadow DOM.

import { html } from 'lit-html'
import { component } from '@aggre/ullr'

export const main = (title: string, desc: string) =>
    component(html`
        <style>
            h1 {
                color: blue;
            }
        </style>
        <main>
            <h1>${title}</h1>
            <p>${desc}</p>
        </main>
    `)
Browser Node.js
🚸
Shadow Dom isn't supported. An inside content of Shadow Dom is shown as just an innerHTML.

💡 How to preprocess style tags with PostCSS: 💅 https://github.com/aggre/lit-style

subscribe

subscribe is a lit-html directive.

Subscribe to Observable<T> of RxJS and re-rendering with a callback function.

When the directive part is removed, it will automatically unsubscribe.

import { html } from 'lit-html'
import { subscribe } from '@aggre/ullr'
import { timer as _timer } from 'rxjs'

export const timer = (initialDelay: number, period: number) =>
    subscribe(
        _timer(initialDelay, period),
        (x) => html` <p>${x}</p> `,
        html` <p>Default content</p> `
    )
Browser Node.js
🚸
Create string as a DOM is supported. But auto-unsubscribe isn't supported.

customElements

customElements creates a class that can be passed to customElements.define.

import { customElements } from '@aggre/ullr'
import { main } from './main'

const observedAttributes = ['title', 'desc']

const template = ([title, desc]) => main(title, desc)

window.customElements.define(
    'x-app',
    customElements(template, observedAttributes)
)
Browser Node.js