Package Exports

osagai
osagai/lifecycles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (osagai) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 --save

Or import from unpkg

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

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";

    function Items({ update, query }) {
      const initialState = {
        items: []
      }

      on("click", query(".btn"), () => {
        update(({ 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>

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.