https://github.com/betterthancode/ottavino

tiny, fast and declarative ui - using custom elements API (but not only)
https://github.com/betterthancode/ottavino

Last synced: 16 days ago
JSON representation

tiny, fast and declarative ui - using custom elements API (but not only)

• Host: GitHub
• URL: https://github.com/betterthancode/ottavino
• Owner: betterthancode
• License: mit
• Created: 2019-05-13T10:38:11.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T17:40:18.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T08:18:26.749Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 840 KB
• Stars: 74
• Watchers: 3
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ottavino

> The piccolo /ˈpɪkəloʊ/ (Italian pronunciation: [ˈpikkolo]; Italian for "small", but named ottavino in Italy)

![](https://user-images.githubusercontent.com/1084459/57871139-55c10100-7811-11e9-8499-cbb4cfafb315.png)

## Tiny, Fast and Declarative User Interface Development

Using native custom elements API (but not only)

[![Build Status](https://semaphoreci.com/api/v1/eavichay/ottavino/branches/master/badge.svg)](https://semaphoreci.com/eavichay/ottavino)

As simple as it gets.

### [See the docs](https://betterthancode.github.io/ottavino/globals.html)

```typescript

import { component } from 'ottavino'

component({

  tag: 'tiny-moji',

  template: '{{this.moodIcon}}',

  shadow: true, // optional shadow DOM

  properties: {

    moodIcon: '😃'

  },

  attributes: {

    mood: function(newValue /*, oldValue, domElement */) {

      this.moodIcon = newValue === 'sad' ? '😢' : '😃'

    }

  }

})

```

```html

```

IIFE Version (no es-modules)

```html

```

```javascript

window.ottavino.component({

  // here you go

});

```

## Footprint (KBGzipped) ~1.5

Small: ![npm bundle size](https://img.shields.io/bundlephobia/minzip/ottavino?label=bundle%20size)

## API

`component(options: ComponentDescriptor) => ComponentProxy`

### ComponentDescriptor

- **tag**? When creating a custom element, this will be the DOM tag name.

- **mount**? When you want to "upgrade" a legacy element on the DOM (like a `
`) and make it behave just like it was a custom element. It can be a queryselector to be executed on the document or a reference to an element instance

  - If no `tag` nor `mount` are used (or both used) - expect dragons.

- **template**: string (or reference for an existing HTML template element for reuse)

- **properties**? key-value properties that are reflected from the DOM element into the component handler ("proxy")

- **attributes**? key-value of functions handling attribute changes. Functions receives the new and old values and a reference to the DOM element. `this` will refer to the handler

- **init**? Initialization function during component construction. The passed argument is the DOM reference

- **this**? Your (optional) component handler. Anything can go here. From within the template, and usage of `this` would reach this object. If none defined, it will generate a default component proxy

- **shadow**? opt in for shadow DOM

- **closed**? opt in for **closed** mode shadow DOM

- **connectedCallback**? linked with the DOM connectedCallback

- **disconnectedCallback**? linked with the DOM disconnectedCallback


### Under the hood

```html

{{this.counter}}

Count UP!

Reset