{"_id":"@ahriknow/lux","name":"@ahriknow/lux","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@ahriknow/lux","version":"0.0.1","description":"Lightweight Web Components framework with reactive properties, template engine, router, and i18n","type":"module","main":"dist/lux.iife.js","module":"dist/lux.js","exports":{".":{"import":"./dist/lux.js","require":"./dist/lux.iife.js","default":"./dist/lux.js"},"./template":{"import":"./dist/lux.template.js","default":"./dist/lux.template.js"},"./element":"./src/element.js","./router":"./src/router.js","./code":"./src/components/lux-code/index.js"},"scripts":{"build":"rollup -c && node -e \"const fs=require('fs'),p=require('path');['docs/themes','dist/themes'].forEach(d=>{fs.mkdirSync(d,{recursive:true});fs.readdirSync('src/themes').filter(f=>f.endsWith('.css')).forEach(f=>fs.copyFileSync(p.join('src/themes',f),p.join(d,f)))})\"","dev":"npx serve ./docs -l 6001","format":"prettier --write \"src/**/*.js\" \"docs/**/*.js\"","format:check":"prettier --check \"src/**/*.js\" \"docs/**/*.js\""},"keywords":["web-components","shadow-dom","router","template","components","ui","library","framework","ui library"],"author":{"name":"ahriknow","email":"ahriknow@ahriknow.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ahriknow/lux.git"},"bugs":{"url":"https://github.com/ahriknow/lux/issues"},"homepage":"https://github.com/ahriknow/lux#readme","devDependencies":{"@rollup/plugin-terser":"^1.0.0","prettier":"^3.9.6","rollup":"^4.62.2"},"engines":{"node":">=18.0.0"},"gitHead":"453b725e2ec751d9cb586d6fb19c7721b67a4d92","_id":"@ahriknow/lux@0.0.1","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-/aFahhLeKmF45MLbGysHs9FqCHwo6Pi9/RMoSPzyR4kS1sLl0N5VEzLGpbI4cdnx1Ua9bDqMGdvc+X9ZiP8sYQ==","shasum":"755da3d8de7ed9ac093c3a6fa0d0ad099be720a8","tarball":"https://registry.npmjs.org/@ahriknow/lux/-/lux-0.0.1.tgz","fileCount":64,"unpackedSize":980451,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@ahriknow%2flux@0.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDeVnnXpj/Tn0HUUiq9RpV2BzLmtx6t8eVFiZ+nkhfZ0gIhAPoCB0zGeJC79bNI5hfSBNaajCaVIZV/WLtHtMETD7ET"}]},"_npmUser":{"name":"ahriknow","email":"ahriknow@ahriknow.com"},"directories":{},"maintainers":[{"name":"ahriknow","email":"ahriknow@ahriknow.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lux_0.0.1_1784971667014_0.9230960701695603"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-25T09:27:46.858Z","0.0.1":"2026-07-25T09:27:47.153Z","modified":"2026-07-25T09:27:47.530Z"},"maintainers":[{"name":"ahriknow","email":"ahriknow@ahriknow.com"}],"description":"Lightweight Web Components framework with reactive properties, template engine, router, and i18n","homepage":"https://github.com/ahriknow/lux#readme","keywords":["web-components","shadow-dom","router","template","components","ui","library","framework","ui library"],"repository":{"type":"git","url":"git+https://github.com/ahriknow/lux.git"},"author":{"name":"ahriknow","email":"ahriknow@ahriknow.com"},"bugs":{"url":"https://github.com/ahriknow/lux/issues"},"license":"MIT","readme":"<div align=\"center\">\n\n# Lux\n\n**English** | [中文](./README_zh-CN.md)\n\nA lightweight Web Components framework with reactive properties, template engine, router, and i18n.\n\n[![npm version](https://img.shields.io/npm/v/@ahriknow/lux.svg)](https://www.npmjs.com/package/@ahriknow/lux)\n[![license](https://img.shields.io/npm/l/@ahriknow/lux.svg)](./LICENSE)\n\n</div>\n\n---\n\n## Features\n\n- **Reactive Properties** — Declare `static properties`, Lux handles change detection, batching, and incremental DOM updates\n- **Shadow DOM Styles** — `static styles` with `css` tagged template, injected via `adoptedStyleSheets`\n- **Template Engine** — Tagged template literals with event, property, boolean, class, and style bindings\n- **repeat() Directive** — Keyed list rendering with O(n) diff algorithm\n- **Router** — Hash-based SPA routing with params, nested routes, lazy loading, and guards\n- **i18n** — ICU MessageFormat with number/date formatting\n- **Theme System** — CSS custom properties for light/dark themes\n- **Zero Dependencies** — Pure JS, no build-time requirements for end users\n\n## Bundle Size\n\n| Module | Size |\n|--------|------|\n| Template | 4.5 KB |\n| Core | 10.7 KB |\n| Router | 4.1 KB |\n| i18n | 1.4 KB |\n| Theme | 4.0 KB |\n| Full | 20.1 KB |\n\n## Install\n\n```bash\nnpm install @ahriknow/lux\n```\n\n## Quick Start\n\n```javascript\nimport { html, css, LuxElement, registerComponent } from '@ahriknow/lux';\n\nclass MyCounter extends LuxElement {\n  static styles = css`\n    :host { display: flex; gap: 12px; align-items: center; }\n    button { padding: 8px 16px; border-radius: 6px; cursor: pointer; }\n  `;\n\n  static properties = { count: { type: Number } };\n\n  constructor() {\n    super();\n    this.count = 0;\n  }\n\n  render() {\n    return html`\n      <button @click=${() => this.count--}>-</button>\n      <span>${this.count}</span>\n      <button @click=${() => this.count++}>+</button>\n    `;\n  }\n}\n\nregisterComponent('my-counter', MyCounter);\n```\n\n## Template Bindings\n\n| Syntax | Type | Description |\n|--------|------|-------------|\n| `${value}` | Text | Text interpolation |\n| `@click=${fn}` | Event | Event listener |\n| `.value=${val}` | Property | Property binding |\n| `?hidden=${bool}` | Boolean | Attribute toggle |\n| `class=${classMap({...})}` | Class | Class binding |\n| `style=${styleMap({...})}` | Style | Style binding |\n| `ref=${fn}` | Ref | Element reference |\n\n## Directives\n\n- `repeat(items, keyFn, renderFn)` — Keyed list rendering\n- `when(condition, trueFn, falseFn?)` — Conditional rendering\n- `show(condition)` — Display toggle (`\"\"` or `\"none\"`)\n- `nothing` — Symbol to clear a container\n\n## Router\n\n```javascript\nimport { createRouter } from '@ahriknow/lux';\n\ncreateRouter({\n  routes: [\n    { path: '/', component: HomePage, redirect: '/home', children: [\n      { path: '/home', component: () => import('./home.js') },\n      { path: '/users/:id', component: () => import('./profile.js') },\n    ]}\n  ]\n});\n```\n\n## i18n\n\n```javascript\nimport { createI18n, msg } from '@ahriknow/lux';\n\ncreateI18n({\n  locale: 'en',\n  messages: {\n    'en': { hello: 'Hello', items: '{count, plural, =0{No items} other{# items}}' },\n    'ru': { hello: 'Привет', items: '{count, plural, =0{Нет элементов} other{# элементов}}' },\n  }\n});\n\nmsg('hello');                // \"Hello\"\nmsg('items', { count: 5 });  // \"5 items\"\n```\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","_rev":"1-87aa2e2c2ecbd22fa6bdd846ded39996"}