{"_id":"@buildwithdarsh/aura.js","_rev":"2-b4e8c5e940dc654fb57d571b0f698533","name":"@buildwithdarsh/aura.js","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@buildwithdarsh/aura.js","version":"1.1.0","keywords":["framework","spa","routing","state-management","templating","i18n"],"author":{"name":"Darsh Gupta"},"license":"MIT","_id":"@buildwithdarsh/aura.js@1.1.0","maintainers":[{"name":"withdarsh","email":"withdarsh@gmail.com"}],"dist":{"shasum":"1b7fa9a5ef8fc43775f8854f668764ac7230fbe1","tarball":"https://registry.npmjs.org/@buildwithdarsh/aura.js/-/aura.js-1.1.0.tgz","fileCount":7,"integrity":"sha512-5I6jqXroM2PKe8w+1z3Fd3GM+PSLbattPCpDvbMqCgz2ZO/zy1gTXoI3STfjrvE3ArWYXMWn57pC9NAYrZQqfA==","signatures":[{"sig":"MEUCIBT4I8iRSQOh6F2cTTmGP4jvh+k6Xwkw6oK9bd6mWhAlAiEA+E2cEYS6vBbYODge3aMKzcz+KzyVTVn1NYfG2NRAmug=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":381789},"main":"dist/aura.umd.js","type":"module","types":"dist/aura.d.ts","module":"dist/aura.esm.js","gitHead":"0d204ab793b29fd728621f135ff1a9c622a71511","scripts":{"dev":"rollup -c -w","build":"rollup -c && rm -rf example/dist && cp -r dist example/dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"withdarsh","email":"withdarsh@gmail.com"},"_npmVersion":"10.9.3","description":"A lightweight, modular JavaScript framework for client-side web applications","directories":{},"_nodeVersion":"22.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.34.8","typescript":"^5.7.3","rollup-plugin-dts":"^6.1.1","@rollup/plugin-terser":"^1.0.0","@rollup/plugin-typescript":"^12.1.2"},"_npmOperationalInternal":{"tmp":"tmp/aura.js_1.1.0_1778411263569_0.16425199911032284","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to @buildwithdarsh/aurajs — install that instead: npm install @buildwithdarsh/aurajs"}},"time":{"created":"2026-05-10T11:07:43.506Z","modified":"2026-05-18T04:07:17.203Z","1.1.0":"2026-05-10T11:07:43.734Z"},"author":{"name":"Darsh Gupta"},"license":"MIT","keywords":["framework","spa","routing","state-management","templating","i18n"],"description":"A lightweight, modular JavaScript framework for client-side web applications","maintainers":[{"name":"withdarsh","email":"withdarsh@gmail.com"}],"readme":"> This project is made with the help of Claude (1M context).\n\n<div align=\"center\">\n\n<br />\n\n<img src=\"https://img.shields.io/badge/aura.js-v1.0.0-2997ff?style=for-the-badge&labelColor=000000\" alt=\"version\" />\n<img src=\"https://img.shields.io/badge/minified-32KB-30d158?style=for-the-badge&labelColor=000000\" alt=\"size\" />\n<img src=\"https://img.shields.io/badge/gzip-~11KB-ff9f0a?style=for-the-badge&labelColor=000000\" alt=\"gzip\" />\n<img src=\"https://img.shields.io/badge/dependencies-0-bf5af2?style=for-the-badge&labelColor=000000\" alt=\"deps\" />\n<img src=\"https://img.shields.io/badge/modules-20-64d2ff?style=for-the-badge&labelColor=000000\" alt=\"modules\" />\n<img src=\"https://img.shields.io/badge/license-MIT-ff375f?style=for-the-badge&labelColor=000000\" alt=\"license\" />\n\n<br /><br />\n\n# Aura.js\n\n**The everything framework in one script tag.**\n\nBuild full-featured SPAs with routing, state, hooks, i18n, IndexedDB, PWA support, API mocking, and more — without Node, without a build step, without dependencies.\n\n[Live Demo](https://aurajs.work.withdarsh.com/) &nbsp;&middot;&nbsp; [Documentation](https://aurajs.work.withdarsh.com/docs/router.html) &nbsp;&middot;&nbsp; [Get Started](#-quick-start)\n\n<br />\n\n</div>\n\n---\n\n## Why Aura.js?\n\n| | React + ecosystem | Vue 3 | **Aura.js** |\n|---|---|---|---|\n| Setup time | ~2 min (Node + CLI) | ~2 min (Node + CLI) | **10 seconds** |\n| Bundle (min+gzip) | ~46KB + router + state | ~44KB + router | **~11KB (everything)** |\n| Requires Node | Yes | Yes | **No** |\n| Requires build step | Yes | Yes | **No** |\n| Built-in router | No (react-router) | No (vue-router) | **Yes** |\n| Built-in state | No (redux/zustand) | Yes | **Yes** |\n| Built-in HTTP client | No (axios/fetch) | No | **Yes** |\n| Built-in i18n | No (react-intl) | No (vue-i18n) | **Yes** |\n| Built-in mock API | No (MSW) | No | **Yes** |\n| Built-in IndexedDB | No | No | **Yes** |\n| PWA + Service Worker | No | No | **Yes** |\n| Composable hooks | Yes | Composition API | **Yes** |\n\n---\n\n## Quick Start\n\n**No install. No CLI. No config.** Just a script tag.\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <script src=\"https://aurajs.work.withdarsh.com/dist/aura.umd.js\"></script>\n</head>\n<body>\n  <script>\n    // Define routes\n    Aura.route('/', (ctx) => {\n      Aura.template.renderString('<h1>Hello, {{name}}!</h1>', { name: 'World' });\n    });\n\n    Aura.route('/users/:id', (ctx) => {\n      console.log('User ID:', ctx.params.id);\n    });\n\n    // Start the app\n    Aura.init();\n  </script>\n</body>\n</html>\n```\n\nThat's it. You have a fully routed SPA.\n\n> **Refresh-safe on any static host.** Aura's router encodes logical paths as a query\n> parameter (`/?_r=/users/42`) so refreshes, bookmarks, and shared links always resolve\n> to your real `index.html` &mdash; no server rewrite rules, no 404s, no hosting config.\n> Works out of the box on GitHub Pages, S3, Vercel, Netlify, Cloudflare Pages, or any\n> plain file server.\n\n---\n\n## All 20 Modules\n\n<table>\n<tr>\n<td width=\"50%\">\n\n### Core\n| Module | Description |\n|--------|-------------|\n| [**Router**](https://aurajs.work.withdarsh.com/docs/router.html) | SPA routing, dynamic params, wildcards, groups, middleware, guards, refresh-safe query-param URLs |\n| [**State**](https://aurajs.work.withdarsh.com/docs/state.html) | Reactive state, subscriptions, computed, batch, persist, actions |\n| [**Events**](https://aurajs.work.withdarsh.com/docs/events.html) | Pub/sub, wildcard namespaces, priority ordering, auto-unsub |\n| [**Template**](https://aurajs.work.withdarsh.com/docs/template.html) | Handlebars-style rendering, #if/#each/#unless, partials, caching |\n| [**API Client**](https://aurajs.work.withdarsh.com/docs/api.html) | HTTP client, interceptors, retry, timeout, abort, upload |\n| [**i18n**](https://aurajs.work.withdarsh.com/docs/i18n.html) | Translation, pluralization, Intl formatting, RTL, DOM translate |\n| [**Hooks**](https://aurajs.work.withdarsh.com/docs/hooks.html) | useState, useEvent, useFetch, useStorage, useComputed, custom hooks |\n\n</td>\n<td width=\"50%\">\n\n### Platform & Tools\n| Module | Description |\n|--------|-------------|\n| [**Device**](https://aurajs.work.withdarsh.com/docs/device.html) | Detection, fingerprint, battery, network, dark mode, online/offline |\n| [**Geolocation**](https://aurajs.work.withdarsh.com/docs/geo.html) | GPS with IP fallback, Haversine distance, watching, permissions |\n| [**Performance**](https://aurajs.work.withdarsh.com/docs/perf.html) | Operation timing, memory tracking, threshold filtering |\n| [**Delegate**](https://aurajs.work.withdarsh.com/docs/delegate.html) | Event delegation with CSS selectors, dynamic elements |\n| [**Storage**](https://aurajs.work.withdarsh.com/docs/storage.html) | localStorage, sessionStorage, cookies — namespaced with TTL |\n| [**Utils**](https://aurajs.work.withdarsh.com/docs/utils.html) | Debounce, throttle, deepClone, slugify, pipe, uid, and more |\n| [**Mock API**](https://aurajs.work.withdarsh.com/docs/mock.html) | Intercept fetch, mock routes from JSON files, persist, share |\n| [**IndexedDB**](https://aurajs.work.withdarsh.com/docs/idb.html) | Promise-based IDB wrapper — stores, indexes, queries, cursors |\n| [**Logger**](https://aurajs.work.withdarsh.com/docs/logger.html) | Levels, tagged loggers, custom transports, history, events |\n| [**tryThis**](https://aurajs.work.withdarsh.com/docs/try.html) | `[err, data]` tuple pattern — kill try/catch boilerplate |\n| [**PWA**](https://aurajs.work.withdarsh.com/docs/pwa.html) | Service worker, caching strategies, install prompt, offline |\n\n</td>\n</tr>\n</table>\n\n---\n\n## Module Highlights\n\n### Hooks — React-style, but framework-agnostic\n\n```js\n// Reactive state — returns [getter, setter]\nconst [count, setCount] = Aura.hooks.useState('count', 0);\nsetCount(5);\nconsole.log(count()); // 5\n\n// Auto-fetch with loading/error state\nconst { data, loading, error, refetch } = Aura.hooks.useFetch('/api/users');\n\n// localStorage-backed state\nconst [theme, setTheme] = Aura.hooks.useStorage('theme', 'dark');\n\n// Auto-cleanup setup\nconst teardown = Aura.hooks.useSetup(() => {\n  Aura.hooks.useEvent('resize', handler);\n  Aura.hooks.useWatch('user', updateUI);\n});\nteardown(); // cleans up everything\n```\n\n### tryThis — Never write try/catch again\n\n```js\n// Sync\nconst [err, data] = Aura.tryThis(() => JSON.parse(rawInput));\n\n// Async\nconst [err, users] = await Aura.tryThis(() => Aura.api.get('/users'));\n\n// Direct promise\nconst [err, res] = await Aura.tryThis(fetch('/api/health'));\n\n// Chain with Logger\nif (err) Aura.log.error('Request failed', err);\n```\n\n### Mock API — Frontend doesn't wait for backend\n\n```js\n// Register mocks — inline or from JSON files\nAura.mock.load({\n  'GET /api/users':     { body: [{ id: 1, name: 'Alex' }], delay: 300 },\n  'GET /api/users/:id': { body: { id: 1, name: 'Alex' } },\n  'POST /api/users':    { status: 201, body: { id: 2 } },\n  'GET /api/products':  '/mocks/products.json',  // from file\n});\n\nAura.mock.enable();  // intercepts window.fetch\nAura.mock.save();    // persist to localStorage\nAura.mock.export();  // share with teammates\n```\n\n### IndexedDB — The ugly API, made beautiful\n\n```js\nawait Aura.idb.open('myApp', 1, [{\n  name: 'users',\n  keyPath: 'id',\n  indexes: [{ name: 'email', keyPath: 'email', unique: true }]\n}]);\n\nawait Aura.idb.set('users', { id: 1, name: 'Alex', email: 'a@b.com' });\nconst user = await Aura.idb.get('users', 1);\nconst all  = await Aura.idb.getAll('users');\nconst found = await Aura.idb.query('users', 'email', 'a@b.com');\n```\n\n### PWA + Service Worker — Offline in 5 lines\n\n```js\nawait Aura.pwa.register('/aura-sw.js');\n\nAura.pwa.addStrategy({ name: 'images', strategy: 'cache-first', match: /\\.(png|jpg|svg)$/ });\nAura.pwa.addStrategy({ name: 'api', strategy: 'network-first', match: '/api/' });\nAura.pwa.precache(['/', '/app.js', '/styles.css']);\n\nAura.pwa.onInstallPrompt(() => showInstallBanner());\n```\n\n### Logger — Structured, tagged, transportable\n\n```js\nAura.log.info('App started');\nAura.log.error('Payment failed', { orderId: 42 });\n\n// Tagged loggers\nconst auth = Aura.log.tag('Auth');\nauth.info('User logged in');  // => [INFO][Auth] User logged in\n\n// Custom transport\nAura.log.addTransport((entry) => {\n  if (entry.level === 'error') sendToSentry(entry);\n});\n\n// Listen via Events\nAura.on('log:error', showToast);\n```\n\n---\n\n## Install\n\n### CDN (recommended — no build step)\n\n```html\n<script src=\"https://aurajs.work.withdarsh.com/dist/aura.umd.js\"></script>\n```\n\n### npm (for bundler setups)\n\n```bash\nnpm install @buildwithdarsh/aura.js\n```\n\n```js\nimport Aura from '@buildwithdarsh/aura.js';\n\nAura.route('/', handler);\nAura.init();\n```\n\nOr via CDN:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@buildwithdarsh/aura.js\"></script>\n```\n\n---\n\n## Project Structure\n\n```\nsrc/\n├── api/          # HTTP client with interceptors\n├── delegate/     # Event delegation\n├── device/       # Device detection & fingerprinting\n├── events/       # Pub/sub event system\n├── geo/          # Geolocation\n├── hooks/        # Composable hooks (useState, useFetch, etc.)\n├── i18n/         # Internationalization\n├── idb/          # IndexedDB wrapper\n├── logger/       # Structured logging\n├── mock/         # API mocking (fetch interceptor)\n├── perf/         # Performance monitoring\n├── pwa/          # PWA + Service Worker management\n├── router/       # SPA routing\n├── state/        # Reactive state management\n├── storage/      # localStorage/session/cookies\n├── template/     # Handlebars-style templating\n├── try/          # tryThis error wrapper\n├── utils/        # Utility functions\n└── index.ts      # Main entry — exports Aura singleton\n```\n\n---\n\n## Development\n\n```bash\n# Install dev dependencies\nnpm install\n\n# Build (outputs to dist/)\nnpm run build\n\n# Watch mode\nnpm run dev\n\n# Type check\nnpm run typecheck\n```\n\n---\n\n## Browser Support\n\nWorks in all modern browsers. No polyfills needed.\n\n| Chrome | Firefox | Safari | Edge |\n|--------|---------|--------|------|\n| 80+ | 78+ | 14+ | 80+ |\n\n---\n\n## Philosophy\n\n1. **One script tag** — No Node, no CLI, no webpack, no config\n2. **Everything built-in** — Router, state, hooks, i18n, DB, PWA, mocking, logging\n3. **Zero dependencies** — 32KB minified, ~11KB gzipped\n4. **Progressively adoptable** — Use one module or all twenty\n5. **Developer-first** — Clean APIs, TypeScript types, comprehensive docs\n\n---\n\n<div align=\"center\">\n\n**[Live Demo](https://aurajs.work.withdarsh.com/)** &nbsp;&middot;&nbsp; **[Full Documentation](https://aurajs.work.withdarsh.com/docs/router.html)**\n\nMade by [Darsh Gupta](https://github.com/darshgupta)\n\nMIT License\n\n</div>\n","readmeFilename":"README.md"}