{"_id":"@aerys/ui","_rev":"2-456ce5a459f2306ef481defebba41ed8","name":"@aerys/ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aerys/ui","version":"0.1.0","keywords":["aerys","aerysx","react","jsx-free","ui","view","components"],"author":{"name":"Juan Mercado"},"license":"SEE LICENSE IN LICENSE","_id":"@aerys/ui@0.1.0","maintainers":[{"name":"ariswilder","email":"juan.mercado@devscapellc.com"}],"dist":{"shasum":"5bfde2be3dac2f435890828e7090e79e94df687c","tarball":"https://registry.npmjs.org/@aerys/ui/-/ui-0.1.0.tgz","fileCount":17,"integrity":"sha512-CVFLQmNZtTsvFDjwgeI4BulQmB3NAMXdU3j2hIYLPBmMDs/KPUCL86ThEbfjAqZ4xtbsluI1ZPKIDRvSXVW++g==","signatures":[{"sig":"MEUCIQC1FRi17E77PMc+SAMaltOvU89ZZmhUcJcaZv6or9dIoAIgaHb2HLdlnluxNclNIFURnNGtvR48oaLEuwTGyBCo/VY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52084},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./tags":{"types":"./dist/tags.d.ts","import":"./dist/tags.mjs","require":"./dist/tags.js"},"./runtime":{"types":"./dist/runtime.d.ts","import":"./dist/runtime.mjs","require":"./dist/runtime.js"}},"gitHead":"c27e0b9fe0771e2600d789eeaed38c3cdab8ff05","scripts":{"dev":"tsup src/index.ts src/runtime.ts src/tags.ts --format cjs,esm --dts --watch --external react","test":"node --test test/*.test.mjs","build":"tsup src/index.ts src/runtime.ts src/tags.ts --format cjs,esm --dts --clean --target es2020 --external react","clean":"rimraf dist"},"_npmUser":{"name":"ariswilder","email":"juan.mercado@devscapellc.com"},"_npmVersion":"11.6.2","description":"Native Aerys UI — write React components in pure Aerys with no JSX. Provides h(), view(), and lowercase HTML-tag wrappers (button, div, h1, …).","directories":{},"_nodeVersion":"24.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.0.0","rimraf":"^5.0.0","typescript":"^5.4.0","@types/node":"^20.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1777491550353_0.07564477994944063","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aerys/ui","version":"0.1.1","description":"Native Aerys UI — write React components in pure Aerys with no JSX. Provides h(), view(), and lowercase HTML-tag wrappers (button, div, h1, …).","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./runtime":{"types":"./dist/runtime.d.ts","import":"./dist/runtime.mjs","require":"./dist/runtime.js"},"./tags":{"types":"./dist/tags.d.ts","import":"./dist/tags.mjs","require":"./dist/tags.js"}},"scripts":{"build":"tsup src/index.ts src/runtime.ts src/tags.ts --format cjs,esm --dts --clean --target es2020 --external react","dev":"tsup src/index.ts src/runtime.ts src/tags.ts --format cjs,esm --dts --watch --external react","test":"node --test test/*.test.mjs","clean":"rimraf dist"},"keywords":["aerys","aerysx","react","jsx-free","ui","view","components"],"author":{"name":"Juan Mercado"},"license":"SEE LICENSE IN LICENSE","publishConfig":{"access":"public"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0"},"devDependencies":{"@types/node":"^20.0.0","@types/react":"^18.0.0","react":"^18.0.0","rimraf":"^5.0.0","tsup":"^8.0.0","typescript":"^5.4.0"},"gitHead":"c7541d6b70b059e02b6f45151e5a8c1294e8d1e7","_id":"@aerys/ui@0.1.1","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-KutFsKcfS0lr7fhuGtgqQ+i5BZRjAv7/3bDuNpTD6tuazaxQyaeG51htmNvOOw1yaLRBvfSTFwfKhGelOnbT7A==","shasum":"57f879cdcde27f45d46670e1b09610f6f459781d","tarball":"https://registry.npmjs.org/@aerys/ui/-/ui-0.1.1.tgz","fileCount":17,"unpackedSize":52786,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDM8k+XgRdiEGz65kq3qhN8bPrwraUB/wsHSqAHJ4QJVwIga/g7eeg4/Ls5ejXAPQWd9EOtRJQaYtfwQdSMqsH7vb8="}]},"_npmUser":{"name":"ariswilder","email":"juan.mercado@devscapellc.com"},"directories":{},"maintainers":[{"name":"ariswilder","email":"juan.mercado@devscapellc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.1_1777492544916_0.23185696645335963"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-29T19:39:10.247Z","modified":"2026-04-29T19:55:45.174Z","0.1.0":"2026-04-29T19:39:10.490Z","0.1.1":"2026-04-29T19:55:45.062Z"},"author":{"name":"Juan Mercado"},"license":"SEE LICENSE IN LICENSE","keywords":["aerys","aerysx","react","jsx-free","ui","view","components"],"description":"Native Aerys UI — write React components in pure Aerys with no JSX. Provides h(), view(), and lowercase HTML-tag wrappers (button, div, h1, …).","maintainers":[{"name":"ariswilder","email":"juan.mercado@devscapellc.com"}],"readme":"# @aerys/ui\n\nNative UI primitives for [Aerys](https://aerys.dev). Write React\ncomponents in pure Aerys with zero JSX.\n\n```aerys\n// Counter.aerx — pure Aerys, no '<' anywhere\nlet { button, div, h1 } = require(\"@aerys/ui/tags\")\n\ncomponent Counter() {\n    let count = signal(0)\n    return div({ className = \"counter\" },\n        h1({}, `Count: @{count:get()}`),\n        button({ onClick = fn() { count:set(count:get() + 1) } }, \"+1\"),\n    )\n}\n```\n\nThe `.aerx` file above compiles to standard React. Tailwind, Radix,\nshadcn-ui, framer-motion, every other React-ecosystem library still\nworks — they're just functions you call in Aerys style.\n\n## Install\n\n```bash\nnpm install @aerys/ui\n```\n\nYou also need [`@aerys/aerysx`](https://www.npmjs.com/package/@aerys/aerysx)\nv0.2.0+ wired into your Vite config so `.aerx` files are compiled, and\n`react` 17/18/19 as a peer dependency.\n\n## What you get\n\nThree subpath entry points so bundlers tree-shake naturally:\n\n### `@aerys/ui/runtime`\n\nThe minimum surface for spelling React without JSX.\n\n```aerys\nlet { h, view, Fragment } = require(\"@aerys/ui/runtime\")\n```\n\n| Export | Behaviour |\n| --- | --- |\n| `h(tag, props, ...children)` | Universal element constructor. `tag` is a string (`\"div\"`) or a component reference. `props` may be `null`/`undefined`. |\n| `view(...children)` | Fragment shortcut. Returns a single child unwrapped, multiple children inside a `Fragment`, zero children as `null`. |\n| `Fragment` | Re-export of `React.Fragment` for users who prefer to spell it. |\n\nIn practice you rarely call `h` directly — the AerysX compiler\nauto-imports it whenever it sees `h(...)` or `view(...)` in your\nfile. Calling them in code \"just works.\"\n\n### `@aerys/ui/tags`\n\nLowercase wrappers for 130+ HTML and SVG elements. Each one is a thin\n`(props, ...children) => React.createElement(name, props, ...children)`\nfunction so it composes naturally with everything else.\n\nThree patterns, pick whichever feels right:\n\n**1) Destructure** — most explicit, best tree-shaking:\n\n```aerys\nlet { div, h1, p, button, ul, li, form, input, table, svg, path } =\n    require(\"@aerys/ui/tags\")\n```\n\n**2) `tags` proxy** — one import, every tag, no upfront list:\n\n```aerys\nlet { tags } = require(\"@aerys/ui/tags\")\n\ntags.div({}, tags.h1({}, \"Title\"), tags.button({}, \"Click\"))\n\n// Hyphenated / web-component names work via bracket access:\ntags[\"my-counter\"]({ count = 1 })\n```\n\nThe proxy caches each wrapper after first access, so repeated reads\nreturn the same function reference — `tags.section === tags.section`\nis `true` — keeping React's referential-equality optimizations\n(`memo`, `useCallback` deps) intact.\n\n**3) Universal `h()`** — for fully dynamic tag names:\n\n```aerys\nlet { h } = require(\"@aerys/ui/runtime\")\nlet level = 2\nlet heading = h(`h@{level}`, {}, \"Dynamic\")\n```\n\nThe full named-export list lives in\n[`src/tags.ts`](https://github.com/aerys-lang/aerys-ui/blob/main/packages/ui/src/tags.ts).\n\n### `@aerys/ui` (barrel)\n\nImports everything from both modules. Convenient for quick scripts:\n\n```aerys\nlet { h, view, button, div } = require(\"@aerys/ui\")\n```\n\nFor app code prefer the subpath imports — they're explicit about what\nyou're using and produce smaller bundles.\n\n## How the compiler hooks in\n\n`@aerys/aerysx` v0.2.0 added three transforms specifically for this\npackage:\n\n1. **`component NAME(...)`** is treated like a top-level `fn` — it\n   compiles to `function NAME(...)` with auto-`export default` for the\n   first one in a file.\n2. **Top-level `let { a, b } = require(\"path\")`** is rewritten to\n   `import { a, b } from \"path\"`. `let X = require(\"path\")` becomes a\n   default import.\n3. **`h(...)` and `view(...)`** auto-import from `@aerys/ui/runtime`\n   when used and not already imported.\n\nYou don't have to opt in — write Aerys, the compiler handles the rest.\n\n## Why no JSX?\n\nAerys is a complete language with its own syntax for tables,\ntemplates, signals, and lambdas. Writing `<button onClick={...}>` in a\n`.aerx` file means switching dialects mid-line. With `@aerys/ui` the\nfile is Aerys all the way down, but the output is still React — so\nevery component you've already written and every library you depend on\nkeeps working.\n\n## License\n\nProprietary. See `LICENSE`.\n","readmeFilename":"README.md"}