HenriqueLimas / Osagai
Programming Languages
Projects that are alternatives of or similar to Osagai
Osagai đïž 
A tiny library in a functional and browser way.
Why?
Creating WebComponent shouldn't be limited to extending classes. 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)
Install
You can get it on npm.
npm install osagai
Or import from unpkg
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.
import { define } from 'osagai'
function MyComponent() {
return () => `<h1>Hi đ!</h1>`
}
define('waving-hand', MyComponent)
Now, you just need to use your new custom element in your application.
<waving-hand></waving-hand>
Example
<!DOCTYPE html>
<html lang="en">
<title>Osagai demo</title>
<x-items></x-items>
<script type="module">
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);
</script>
</html>
- 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 or PR with your suggestions or concerns.