monkeysjs
v1.0.1TypeScript
A lightweight, reactive JavaScript library with built-in HTTP client, declarative DOM binding, caching, WebSockets, and more
0/weekUpdated 3 weeks agoMITUnpacked: 719.2 KB
Published by Jorge Peraza
npm install monkeysjsMonkeysJS
The robust, reactive JavaScript library that replaces Alpine.js and Axios.
Built-in HTTP client, advanced DOM binding, WebSockets, and powerful form handling in one lightweight package.
Installation •
Quick Start •
Features •
Documentation •
Examples
---
Why MonkeysJS?
MonkeysJS is designed to be a complete solution for modern web interfaces. Instead of stitching together Alpine.js for interactivity and Axios for requests, getting disparate libraries to talk to each other, MonkeysJS provides a unified, reactive system where your data, DOM, and network requests work in harmony.
Features
✨ Advanced Reactivity - Fine-grained reactivity system (ref, reactive, computed, watch) that powers everything.
🌐 Production-Ready HTTP - A robust alternative to Axios with caching, retries, deduplication, and file upload progress (useUpload).
🎯 Pro-Level DOM Binding - More than just text updates. Includes $dispatch, $watch, formatted inputs with m-mask, and lifecycle hooks.
📡 WebSocket Client - integrated useWebSocket with auto-reconnect, heartbeats, and reactive state.
📝 Form handling - Native useForm with validation, dirty checking, and async submission.
🔄 Smart Data Fetching - Declarative m-fetch for zero-boilerplate data loading.
📦 Zero Dependencies - ~14KB gzipped. No bloat.
Installation
$3
``bash`
npm install monkeysjs
$3
`html`
Quick Start
$3
` html`
$3
`javascript
import { reactive, http, useUpload } from "monkeysjs";
// Reactive state
const state = reactive({ count: 0 });
// File Upload with Progress
const { upload, progress } = useUpload("/api/files");
async function handleFile(file) {
await upload(file);
console.log("Upload complete!");
}
`
Documentation
$3
MonkeysJS offers a superset of directives you might expect, plus power-user features.
#### $dispatch(event, detail)
Emit custom events that bubble up the DOM.
`html`
#### $watch(source, callback)
React to changes declaratively.
`html
>
`
####
Built-in input masking for dates, phones, and more.
-
: Numeric
- a: Alpha
- *: Alphanumeric`html
`$3
Forget Axios. MonkeysJS has you covered.
####
Upload files with built-in progress tracking.
javascript
import { useUpload } from "monkeysjs";const { upload, progress, isUploading, error } = useUpload("/api/upload");
// In your view
//
`####
Reactive data fetching.
javascript
import { useFetch } from "monkeysjs";const { data, error, isLoading, execute } = useFetch("/api/users");
`$3
Built-in reactive WebSocket client.
javascript
import { useWebSocket } from "monkeysjs";const { send, data, isConnected } = useWebSocket("wss://api.example.com");
``License
MIT
Contributors
 Jorge Peraza |