https://github.com/oncebuilder/xon
Modern Declarative JavaScript Framework. Build interactive web applications with HTML attributes. No built process required.
https://github.com/oncebuilder/xon
Last synced: 3 months ago
JSON representation
Modern Declarative JavaScript Framework. Build interactive web applications with HTML attributes. No built process required.
- Host: GitHub
- URL: https://github.com/oncebuilder/xon
- Owner: oncebuilder
- License: other
- Created: 2025-12-23T09:35:02.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-12-27T12:18:31.000Z (6 months ago)
- Last Synced: 2026-01-02T15:04:26.249Z (6 months ago)
- Language: JavaScript
- Homepage: https://xonjs.com
- Size: 60.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
⚡ XON Framework vBeta Reference
⚡ XON Framework v1.0.0 Release in January
Build reactive web applications with HTML attributes only.
No build process. No complex configuration. Pure declarative JavaScript.
Features •
Installation •
Quick Start •
Documentation •
Examples •
API •
Contributing
📚 Live Documentation •
🚀 Live Examples •
🐛 Report Bug
---
# ✨ Why XON Framework?
XON Framework enables you to build modern, reactive web applications using only HTML attributes. It brings the power of reactive programming to vanilla HTML without the complexity of build tools or configuration files.
## 🚀 XON Framework JSON Approach
```
Increment
```
## ✨ Features
🚀 Declarative Syntax Build apps with HTML attributes, no JavaScript configuration needed ⚡ Reactive State Automatic DOM updates with computed properties and memoization 🔗 Auto-Binding DOM elements automatically sync with state changes 🎯 Enhanced Events Delegated events with context variables ($this, $event, $data) 📦 Component System Auto-rendering components with file loading 🛡️ Security First Built-in sanitization and dangerous pattern blocking 📄 Template Engine Powerful templating with form integration 🔄 Built-in Router Client-side routing with history management ⚙️ Performance Memoization, batching, and template caching 🌐 Modern Browsers Works in Chrome 60+, Firefox 55+, Safari 10+, Edge 79+
# 🚀 Quick Start
## CDN (Recommended)
```
```
## Local Installation
### Download the file:
```
https://raw.githubusercontent.com/oncebuilder/xonjs/vBeta/xon.js
```
### Using curl
```
curl -O https://raw.githubusercontent.com/oncebuilder/xonjs/vBeta/xon.js
```
### Using wget
```
wget https://raw.githubusercontent.com/oncebuilder/xonjs/vBeta/xon.js
```
### Include in your HTML:
```
```
### NPM (Coming Soon) Planned for future release
```npm install xonjs```
# 🚀 Quick Start
## 📦 Examples
### Basic Counter
```
XON Counter App
Count:
Increment
Decrement
Reset
```
### Todo List App
```
XON Todo App
Todo List
Add Todo
{$text}
❌
{
"items": [],
"template": ["text", "done"]
}
```
### User Profile with Components
```
XON User Profile
Change Name
```
# 📖 Documentation
## Core Syntax
### Event Handling
```
Click Me
Submit
Process
Item 1
Item 2
```
### State Management
```
Set to 5
Increment
Decrement
Set Name
Set Email
Add Item
Remove First
```
### Templates
```
{
"items": [
{"name": "John", "email": "john@example.com", "age": 30},
{"name": "Jane", "email": "jane@example.com", "age": 25}
]
}
{$name}
{$email}
Age: {$age}
Load Form Data
```
### File Loading
```
```
### Routing
```
Go Home
Dashboard
Load Dashboard
# JSON Reactivity Containers
XON's most powerful feature is JSON Reactivity Containers:
```
Increment
Update Email
Toggle Theme
```
### Context Variables
XON provides enhanced context variables available in all event handlers:
| Variable | Description | Example |
|-----------|-------------------------------------|--------------------------------------------|
| `$this` | Current element | `$this.classList.add('active')` |
| `$source` | Source element with `data-xon` | `$source.dataset.id` |
| `$target` | Target element | `$target.innerHTML` |
| `$event` | Native event object | `$event.preventDefault()` |
| `$document`| Document object | `$document.title` |
| `$window` | Window object | `$window.scrollTo(0, 0)` |
| `$data` | Element dataset | `$data.id` |
| `$value` | Element value / text | `$value.trim()` |
| `$index` | Element index (templates) | `Item {$index + 1}` |
| `$parent` | Parent element | `$parent.removeChild($this)` |
| `$children`| Child elements | `$children.length` |
| `$xon` | XON framework instance | `$xon.debug.log('test')` |
| `$state` | Global reactive state | `$state.count++` |
| `$bind` | Binding system | `$bind.username = '.new-display'` |
# 🔧 API Reference
## Core API
```
// Initialize framework
xon.init();
// Render specific elements
xon.render('#app');
xon.render(document.getElementById('container'));
// Load resources
xon.loadScript('app.js', callback, true);
xon.loadStyle('styles.css', callback);
xon.loadJSON('data.json', callback, null, 'users');
// Query shortcuts
xon.by('#id'); // querySelector
xon.byAll('.class'); // querySelectorAll
xon.byId('element'); // getElementById
xon.byClass('items'); // getElementsByClassName
xon.byTag('div'); // getElementsByTagName
```
### Reactivity API
```
// Create reactive state
xon.reactivity.createState('app', {
counter: 0,
user: { name: '', email: '' }
});
// Create state with computed properties
xon.reactivity.createStateWithComputed('cart', {
items: [],
taxRate: 0.1
}, {
itemCount() { return this.items.length; },
subtotal() {
return this.items.reduce((sum, item) => sum + item.price, 0);
},
tax() { return this.subtotal * this.taxRate; },
total() { return this.subtotal + this.tax; }
});
// Memoization for expensive calculations
const result = xon.reactivity.memo(
['calculation', param1, param2],
() => expensiveOperation(param1, param2),
10000 // Cache for 10 seconds
);
// Batch multiple updates
xon.reactivity.batch(() => {
state.a = 1;
state.b = 2;
state.c = 3;
// Only one DOM update
});
// Clear cache
xon.reactivity.clearCache(); // All cache
xon.reactivity.clearCache('specificKey'); // Specific key
```
# Template API
```
// Render template to element
xon.template.renderTo('templateName', targetElement, form, priority, customHTML);
// Render large datasets in chunks
xon.template.renderLarge('bigTemplate', '#container', 50); // 50 items per chunk
// Populate form with template data
xon.template.populateForm(formElement, 'templateName');
// Clear template cache
xon.template.clearCache(); // Clear all cache
xon.template.clearCache('template'); // Clear specific template
```
# Router API
```
// Navigate to route
xon.router.routeTo('/dashboard');
// Get current route
const current = xon.router.getCurrent();
// Enable/disable router
xon.router.enable(true);
xon.router.enable(false);
// Listen to route changes
window.addEventListener('xonroutechange', (e) => {
console.log('Route changed:', e.detail.path);
});
window.addEventListener('xonroutepopstate', (e) => {
console.log('Browser navigation:', e.detail.path);
});
```
# DOM API
```
// CSS class operations
xon.dom.addClass('active', '.btn');
xon.dom.removeClass('hidden', '#element');
xon.dom.toggleClass('selected', element);
// Query with caching
xon.dom.all('.items'); // Returns NodeList, caches results
```
# Security API
```
// Add allowed namespaces
xon.security.allowed.add('myApp');
xon.security.allowed.add('utils');
// Check security
xon.security.isSafe('myApp.function'); // true
xon.security.isSafe('eval.something'); // false
xon.security.isDangerous('innerHTML'); // true
// Sanitization
const safeHTML = xon.security.sanitizeHTML(userInput);
const safeText = xon.security.sanitizeTextContent(userInput);
const safeCode = xon.security.sanitizeJSCode(jsCode);
```
# Registration API
```
// Register functions for data-xon
window.xonRegister('app.sayHello', function(message) {
console.log('Hello:', message);
});
// Register variables
window.xonRegisterVar('app.config', {
version: 'Beta',
debug: true,
apiUrl: 'https://api.example.com'
});
// Register classes
window.xonRegisterClass('App.User', class User {
constructor(name, email) {
this.name = name;
this.email = email;
}
display() {
return `${this.name} <${this.email}>`;
}
});
```
## Allow namespace
```
window.xonAllowNamespace('myNamespace');
```
## Auto-register namespace
```
window.xonRegisterNamespace('myNamespace');
```
# Debugging API
## Enable debug mode
```
xon.debug.toggle(true);
```
## Debug logs
```
xon.debug.log('Message');
xon.debug.warn('Warning');
xon.debug.error('Error');
```
## Debug utilities
```
xon.demoComputedProperties(); // Demo reactivity system
xon.testMemoization(); // Test memoization
xon.debugComputedProperties(); // Show computed properties
```
## Console utilities
```
console.getHistory(); // Get console history (last 50 entries)
console.showHistory(); // Show console history```
```
### Press F1 to clear console
Made with ❤️ for the web development community
If you find XON useful, please consider giving it a ⭐ on GitHub!