Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aggre/ullr
Functional Web Components
https://github.com/aggre/ullr
Last synced: 3 months 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 (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-19T20:48:22.000Z (8 months ago)
- Last Synced: 2023-10-20T03:31:31.073Z (8 months ago)
- Language: TypeScript
- Size: 2.89 MB
- Stars: 56
- Watchers: 3
- Forks: 3
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-lit - `ullr` - Build Web Components with functional programming using Lit. (Extensions)
README
Functional Web Components
**Building Web Components with Functional Programming.**
[](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 |
| ------- | ------- |
| ✅ | ❌ |
---