https://github.com/aggre/ullr

Functional Web Components
https://github.com/aggre/ullr

Last synced: 10 days ago
JSON representation

Functional Web Components

• Host: GitHub
• URL: https://github.com/aggre/ullr
• Owner: aggre
• License: mit
• Created: 2018-06-05T16:44:46.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-12-02T22:10:57.000Z (11 days ago)
• Last Synced: 2024-12-02T23:20:49.547Z (10 days ago)
• Language: TypeScript
• Size: 3.13 MB
• Stars: 63
• Watchers: 3
• Forks: 3
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-lit - `ullr` - Build Web Components with functional programming using Lit. (Extensions)

README

        
Functional Web Components

**Building Web Components with Functional Programming.**

![CI](https://github.com/aggre/ullr/workflows/CI/badge.svg)

[![Published on npm](https://img.shields.io/npm/v/@aggre/ullr.svg)](https://www.npmjs.com/package/@aggre/ullr)

```

      ___                                       ___

     /__/\                                     /  /\

     \  \:\                                   /  /::\

      \  \:\    ___     ___   ___     ___    /  /:/\:\

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

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

 \  \:\ /  /:/  \  \:\  /:/   \  \:\  /:/  \  \:\/:::::/

  \  \:\  /:/    \  \:\/:/     \  \:\/:/    \  \::/~~~~

   \  \:\/:/      \  \::/       \  \::/      \  \:\

    \  \::/        \__\/         \__\/        \  \:\

     \__\/                                     \__\/

```

---

# Installation

Add to a lit project:

```bash

npm i @aggre/ullr

```

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

```bash

npm i @aggre/ullr lit rxjs

```

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

# APIs

## `shadow`

`shadow` is a lit directive.

Encapsulate the template with Shadow DOM.

```ts

import { html } from 'lit'

import { shadow } from '@aggre/ullr'

export const main = (title: string, desc: string) =>

	shadow(html`

		

			h1 {

				color: blue;

			}

		

		

			
${title}

			
${desc}

		

	`)

```


| Browser | Node.js                                                                                             |

| ------- | --------------------------------------------------------------------------------------------------- |

| ✅      | 🚸 
 Shadow Dom isn't supported. An inside content of Shadow Dom is shown as just an innerHTML. |

---

## `subscribe`

`subscribe` is a lit directive.

Subscribe to `Observable` of RxJS and re-rendering with the passed callback function.

When the directive part is removed or the passed observable is changed, the unused subscription will automatically `unsubscribe`.

```ts

import { html } from 'lit'

import { subscribe } from '@aggre/ullr'

import { timer as _timer } from 'rxjs'

export const timer = (initialDelay: number, period: number) =>

	subscribe(

		_timer(initialDelay, period),

		(x) => html` 
${x}
 `,

		html` 
Default content
 `,

	)

```


| Browser | Node.js |

| ------- | ------- |

| ✅      | ✅      |

---

## `createCustomElements`

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

```ts

import { createCustomElements } from '@aggre/ullr'

import { main } from './main'

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

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

window.customElements.define(

	'x-app',

	createCustomElements(template, observedAttributes),

)

```

| Browser | Node.js |

| ------- | ------- |

| ✅      | ❌      |

---