Getting Started

Install

Using package managers

You can get it on npm.

npm install osagai

Or with yarn

yarn add osagai

Import from a CDN

You can also import directly from unpkg

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

CDN links

Osagai are available over a CDN.

<script src="https://unpkg.com/osagai/osagai.umd.js"></script>

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>

Modules

Osagai is separated by different modules, in a way that you can import only what you need for your custom element.

osagai

This is the main module where you can find the function for defining your custom element.

import { define } from 'osagai'

dom

This is the module with useful methods like update for efficiently update the DOM tree of your custom element

import { update } from 'osagai/dom'

events

This is the module with useful methods like on for adding event listeners to components

import { on } from 'osagai/events'

lifecycles

This is the module for the custom elements lifecyles like connectedCallback and disconnectedCallback

import { onConnected, onDisconnected } from 'osagai/lifecycles'