📦 Installation

Modular Installation

OnigiriJS uses a modular architecture. Load only what you need!

Minimal Setup (Core Only)

<!-- Just the essentials -->
<script src="onigiri-core.js"></script>

<script>
// You can now use O() or Onigiri()
O('#app').text('Hello OnigiriJS! 🍙');
</script>

Recommended Setup

For most applications, this combination provides the best features:

<!-- Core functionality -->
<script src="onigiri-core.js"></script>
<script src="onigiri-events.js"></script>
<script src="onigiri-components.js"></script>

<!-- Security (highly recommended) -->
<script src="onigiri-security.js"></script>
<script src="onigiri-ajax.js"></script>

<!-- Utilities -->
<script src="onigiri-storage.js"></script>
<script src="onigiri-validation.js"></script>
<script src="onigiri-animate.js"></script>
<script src="onigiri-translation.js"></script>

Full Stack Setup

Load all modules for complete functionality:

<!-- Load modules in order -->
<script src="onigiri-core.js"></script>
<script src="onigiri-events.js"></script>
<script src="onigiri-components.js"></script>
<script src="onigiri-security.js"></script>
<script src="onigiri-ajax.js"></script>
<script src="onigiri-storage.js"></script>
<script src="onigiri.pjax.js"></script>
<script src="onigiri-validation.js"></script>
<script src="onigiri-animate.js"></script>
<script src="onigiri-translation.js"></script>
<script src="onigiri-humhub.js"></script>

<script>
// Initialize security and translations
Onigiri.security.init({ autoInjectCSRF: true });
Onigiri.i18n.init({ locale: 'en', autoDetect: true });

// Check loaded modules
console.log('Loaded modules:', Onigiri.modules);
</script>

📋 Module Dependencies

🌐 CDN Installation

Load OnigiriJS directly from CDN (replace @main with specific version tag in production):

<!-- Core -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/core/onigiri-core.js"></script>

<!-- Events -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/events/onigiri-events.js"></script>

<!-- Components -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/components/onigiri-components.js"></script>

<!-- Security -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/security/onigiri-security.js"></script>

<!-- AJAX -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/ajax/onigiri-ajax.js"></script>

<!-- Storage -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/storage/onigiri-storage.js"></script>

<!-- PJAX -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/pjax/onigiri.pjax.js"></script>

<!-- Validation -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/validation/onigiri-validation.js"></script>

<!-- Animation -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/animate/onigiri-animate.js"></script>

<!-- Translation -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/translation/onigiri-translation.js"></script>

<!-- HumHub Integration -->
<script src="https://cdn.jsdelivr.net/gh/OnigiriJS/onigirijs@main/src/framework/humhub/onigiri-humhub.js"></script>

📦 NPM Installation (Coming Soon...)

Install via npm for build tool integration:

npm install onigirijs

Then import modules as needed:

// ES6 Modules
import Onigiri from 'onigirijs/core';
import 'onigirijs/security';
import 'onigirijs/ajax';
import 'onigirijs/translation';

// CommonJS
const Onigiri = require('onigirijs/core');
require('onigirijs/security');
require('onigirijs/ajax');
require('onigirijs/translation');

🔌 HumHub Module Integration

modules/yourmodule/resources/js/onigiri/

class YourModuleAsset extends AssetBundle
{
    public $sourcePath = '@yourmodule/resources';
    
    public $js = [
        // Core modules
        'js/onigiri/onigiri-core.js',
        'js/onigiri/onigiri-events.js',
        'js/onigiri/onigiri-components.js',
        
        // Security (recommended)
        'js/onigiri/onigiri-security.js',
        'js/onigiri/onigiri-ajax.js',
        
        // Additional modules as needed
        'js/onigiri/onigiri-storage.js',
        'js/onigiri/onigiri-validation.js',
        'js/onigiri/onigiri-translation.js',
        
        // HumHub integration
        'js/onigiri/onigiri-humhub.js',
        
        // Your application code
        'js/your-app.js'
    ];
    
    public $depends = [
        'humhub\assets\CoreApiAsset'
    ];
}

<?php
use yii\helpers\Html;
?>

<!-- CSRF Token -->
<?= Html::csrfMetaTags() ?>

// your-app.js
(function() {
    'use strict';
    
    // Initialize security
    Onigiri.security.init({
        autoInjectCSRF: true
    });
    
    // Initialize translations with HumHub locale
    if (typeof humhub !== 'undefined') {
        const locale = humhub.config.get('language') || 'en';
        Onigiri.i18n.init({ 
            locale: locale,
            autoDetect: false 
        });
        
        // Add translations
        Onigiri.i18n.addTranslations(locale, {
            module: {
                title: 'My Module',
                save: 'Save',
                cancel: 'Cancel'
            }
        });
    }
    
    // Create HumHub module
    Onigiri.humhub('yourModule', {
        selector: '.your-module-container',
        pjax: true, // Auto-remount on PJAX navigation
        
        data: {
            items: [],
            loading: false
        },
        
        methods: {
            async loadItems() {
                this.loading = true;
                try {
                    const data = await Onigiri.get(
                        humhub.config.get('baseUrl') + '/yourmodule/api/items'
                    );
                    this.items = data;
                } catch (error) {
                    console.error('Failed to load items:', error);
                } finally {
                    this.loading = false;
                }
            },
            
            async saveItem(item) {
                await Onigiri.post(
                    humhub.config.get('baseUrl') + '/yourmodule/api/items',
                    item
                );
                this.loadItems();
            }
        },
        
        created() {
            console.log('🍙 Module created!');
        },
        
        mounted() {
            // Translate page elements
            Onigiri.i18n.translatePage();
            
            // Load data
            this.loadItems();
            
            console.log('🍙 Module mounted!');
        }
    });
})();

<div class="your-module-container">
    <h2 data-i18n="module.title"></h2>
    
    <button class="btn btn-primary" 
            data-i18n="module.save">
    </button>
    
    <button class="btn btn-default" 
            data-i18n="module.cancel">
    </button>
</div>

✅ Verify Installation

Open your browser console and check that OnigiriJS is loaded:

// Check if OnigiriJS is loaded
console.log(typeof Onigiri !== 'undefined' ? '🍙 OnigiriJS loaded!' : '❌ Not loaded');

// Check version
console.log('Version:', Onigiri.version);

// Check loaded modules
console.log('Modules:', Object.keys(Onigiri.modules).filter(m => Onigiri.modules[m]));

// Test basic functionality
O('body').addClass('onigiri-ready');
console.log('🍙 Body class added successfully!');

🎯 Module Selection Guide

🚀 Next Steps