https://github.com/henriquelimas/osagai

🀄️A tiny library for creating WebComponents in a Functional way
https://github.com/henriquelimas/osagai

functional-programming tiny-library webcomponents

Last synced: about 1 month ago
JSON representation

🀄️A tiny library for creating WebComponents in a Functional way

• Host: GitHub
• URL: https://github.com/henriquelimas/osagai
• Owner: HenriqueLimas
• Created: 2018-11-18T00:40:00.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-01T19:57:03.000Z (over 4 years ago)
• Last Synced: 2024-10-11T16:41:37.654Z (about 1 month ago)
• Topics: functional-programming, tiny-library, webcomponents
• Language: JavaScript
• Homepage: https://osagai.js.org
• Size: 1.42 MB
• Stars: 50
• Watchers: 5
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Osagai 🀄️ [![Build Status](https://travis-ci.com/HenriqueLimas/osagai.svg?branch=master)](https://travis-ci.com/HenriqueLimas/osagai)

A tiny library in a functional and browser way.

## Why?

Creating WebComponent shouldn't be limited to extending `class`es. It should be easy to create and in a functional way.

It should be able to be framework-agnostic and be reused in different libraries. Updating components should be fast and it should

use native solutions without VirtualDOM and data binding magics. It should not need build processes for compiling non

native solution (JSX) and take advantage in what the language has. ([Template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals))

- [Documentation](https://osagai.js.org/docs/)

## Install

You can get it on npm.

```

npm install osagai

```

Or import from unpkg

```js

import { define } from "https://unpkg.com/osagai/osagai.mjs";

import { on } from "https://unpkg.com/osagai/events.mjs";

```

## Define a Web component

Osagai comes with a function called `define` that defines a new custom element that you can use in your application.

`define` receives the name of the custom element (it must contain a hyphen) and the Osagai component.

The Osagai component is a function that returns a Template with a string representing the layout of the web component.

```javascript

import { define } from 'osagai'

function MyComponent() {

	return () => `
Hi 👋!
`

}


define('waving-hand', MyComponent)

```

Now, you just need to use your new custom element in your application.

```html

```

## Example

```html

  Osagai demo

  

  

    import { define } from "https://unpkg.com/osagai/osagai.mjs";

    import { on } from "https://unpkg.com/osagai/events.mjs";

    import { update } from "https://unpkg.com/osagai/dom.mjs";

    function Items({ element, query }) {

      const initialState = {

        items: []

      };

      on("click", query(".btn"), () => {

        update(element, ({ items } = initialState) => {

          items.push({

            name: `Item nr ${items.length + 1}`

          });

          return {

            items

          };

        });

      });

      return ({ items } = initialState) => `

        <div>

          <button class="btn">Add item</button>

          <ul class="list">

            ${items.map(item => `<li>${item.name}</li>`).join("")}

          </ul>

        </div>`;

    }

    define("x-items", Items);

  

```

- Hacker News PWA example: https://github.com/HenriqueLimas/osagai-hn

## Project status

Osagai is still under development and it needs some feedback from the community. If you want to collaborate, please

add an [issue](https://github.com/HenriqueLimas/osagai/issues) or [PR](https://github.com/HenriqueLimas/osagai/pulls) with

your suggestions or concerns.