@yaijs/core

v1.1.6

Published

16 days ago

Advanced web components with YEH (Yai Event Hub) - the world's first DOM Event Scoping System. Everything you need in one package.

YaiJS

Advanced web components with YEH (Yai Event Hub) - Enterprise-grade tabs with efficient event delegation

Build deeply nested, event-heavy interfaces with constant-time listener delegation and zero manual lifecycle handling. Everything you need in one package.

Why YaiJS?

Event Delegation – One listener per event type per container, even across X nested components
YEH Integrated – Event hub included directly in @yaijs/core package
Enterprise Tabs – Feature-complete with accessibility, dynamic loading, routing, animations
Pure ESM – Works from file://, CDN, or bundler with zero build required
Event Hub Pattern – Turn any tab into a complete application event system

Quick Start

CDN (No Build Required)

Live on JSFiddle

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaijs/core@latest/tabs/yai-tabs.css">
</head>
<body>
    <div data-yai-tabs data-theme="default">
        <nav data-controller>
            <button data-tab-action="open" data-open="1">Tab 1</button>
            <button data-tab-action="open" data-open="2">Tab 2</button>
        </nav>
        <div data-content>
            <div data-tab="1">Content 1</div>
            <div data-tab="2">Content 2</div>
        </div>
    </div>

    <script type="module">
        import { YaiTabs } from 'https://cdn.jsdelivr.net/npm/@yaijs/core@latest/dist/yai-bundle.js';
        new YaiTabs();
    </script>
</body>
</html>

NPM Installation

npm install @yaijs/core

import { YaiTabs, YEH } from '@yaijs/core';

const tabs = new YaiTabs({
    defaultBehavior: 'fade',
    autoFocus: true
});

// Or extend YEH directly for custom event orchestration
class AppBus extends YEH {
    constructor() {
        super({ '#app': ['click', 'input', 'change'] });
    }
}

Component Highlights

YEH Event Hub

Complete YEH Documentation →

Scope-aware event delegation
Automatic target resolution for nested elements
Built-in throttle/debounce helpers
Chainable API (.on().emit())
Multi-handler resolution
Performance metrics and stats

YaiTabs

Complete YaiTabs Documentation → | Live Demo →

9 animation behaviors (fade, slide, zoom, flip, blur, etc.) + instant mode
4 navigation positions (top, right, bottom, left)
WCAG 2.1 AA compliance with full ARIA support
Hash-based routing with state preservation
Dynamic content loading via data-url with abort controllers
Touch/swipe navigation (YaiTabsSwipe)
Built-in hooks: tabOpened, tabReady, eventClick, eventInput, etc.

Utilities

Complete Documentation →

YaiInputUtils – Headless form utilities with validation, counters, and keyboard shortcuts (Demo →)
YaiTabsSwipe – Circular navigation, nested ascend/descend, axis locking
YaiViewport – Observer-free visibility tracking with throttled events
YaiAutoSwitch – Automated tab cycling for demos (bundle-full only)

Event Hub & Hooks

YaiTabs doubles as an application event hub. Add any event type and get automatic hooks:

const tabs = new YaiTabs({
    events: {
        setListener: {
            '[data-yai-tabs]': ['click', 'keydown', 'input', 'change', 'submit']
        }
    }
});

// All events are automatically available as hooks
tabs.hook('eventClick', ({ event, target, container, action }) => {
    console.log('Click action:', action); // Extracted from data-click
});

tabs.hook('eventInput', ({ event, target, container, action }) => {
    console.log('Input action:', action); // Extracted from data-input
});

tabs.hook('tabOpened', ({ detail }) => {
    console.log('Tab opened:', detail.id);
});

Multiple hooks per event:

tabs
    .hook('tabOpened', (ctx) => trackAnalytics(ctx))
    .hook('tabOpened', (ctx) => updateUI(ctx))
    .hook('tabOpened', (ctx) => loadContent(ctx));

Documentation

Documentation Hub – Complete framework documentation
YaiTabs Guide – Component reference with examples
Utilities Overview – YaiTabsSwipe, YaiViewport utilities
YEH Event Hub – Event system foundation

Live Examples

Interactive Demo – 50+ nested components with all features
Performance Benchmark – Stress test with 400+ nesting levels
YaiInputUtils Demo – Headless input tools
JSFiddle – Quick start playground, Challenge: Copy the component and paste it into data-tab="1" or data-tab="2". And repeat the step in each pasted component. But set your expectations first, what's your first thought? And share your final conclusion.

Browser Support

Modern ES Modules: Opera 48+, Chrome 61+, Firefox 60+, Safari 11+, Edge 16+
Tested: Safari 15.6 (macOS 2015), Chrome 106 (Android), Opera/Chrome/Brave/Firefox (Ubuntu 24.04)
Legacy: Use bundler with polyfills for older browsers

Resources

GitHub Repository – Source code and issues
NPM Package – Install via npm
Report Issues – Bug reports and feature requests
GitHub Pages – Live documentation site

Author

Engin Ypsilon

License: MIT