0.1.5 • Published 1 year ago
@arnelirobles/rnxjs v0.1.5
rnxJS
Minimalist Vanilla JS component system that doesn’t promise anything — just works.
Designed by @arnelirobles
Built to be Bootstrap-compatible and framework-free.
✨ Features
- ✅ Use components like
<Button>,<Input>,<Card>in pure HTML - ✅ Automatically maps attributes to props
- ✅ Supports
<slot>content and nesting - ✅ Recursive rendering of custom components
- ✅ Conditional rendering via
data-if - ✅ Lightweight: No virtual DOM, no bundler required
- ✅ Works with Bootstrap styles by default
🚀 Getting Started
📦 Install
npm install @arnelirobles/rnxjs🧪 Example Usage
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<Button label="Click Me" variant="primary" />
<script type="module" src="/main.js"></script>
</body>
</html>// main.js
import {
autoRegisterComponents,
loadComponents
} from '@arnelirobles/rnxjs';
autoRegisterComponents();
loadComponents();📚 Component Examples
<Input name="email" placeholder="Your email" />
<Checkbox label="I agree" />
<Alert variant="danger">Something went wrong!</Alert>
<FormGroup>
<Label>Email</Label>
<Input name="email" />
</FormGroup>All components follow Bootstrap classes under the hood.
🧠 Philosophy
rnxJS is for developers who:
- Prefer native HTML + JS over big frameworks
- Love Bootstrap’s UI system
- Want fast, zero-setup components that work instantly
- Enjoy simplicity, not promises
🛠 For Developers
If you want to create your own component:
import { createComponent } from '@arnelirobles/rnxjs';
export function MyButton(props) {
return createComponent(() => \`
<button class="btn btn-\${props.variant || 'primary'}">
\${props.label}
</button>
\`, props);
}Then register:
import { registerComponent } from '@arnelirobles/rnxjs';
registerComponent('MyButton', MyButton);💡 Future Plans
create-rnxjs-appscaffolding CLIrnxORMfor Dapper/LINQ-style querying in JS- Built-in form validation helpers
- Optional state management layer
- Full IntelliSense support via
global.d.ts
📃 License
MIT © Arnel Isiderio Robles