Welcome, !
\n\n <%- rnx.component('Button', { variant: 'primary', label: 'Save' }) %>\n\n```\n\n### 3. Available Methods\n\n```javascript\n// In your Express route handlers\napp.get('/profile', (req, res) => {\n const user = req.user; // Your user object\n\n res.render('profile', {\n user: user,\n // res.locals.rnx helpers are automatically available\n });\n});\n```\n\n## Middleware Configuration\n\nConfigure the middleware when initializing:\n\n```javascript\napp.use(rnxMiddleware({\n // Include rnxJS scripts (default: true)\n cdn: true,\n\n // Theme variant (default: 'bootstrap')\n // Options: 'bootstrap', 'm3', 'plugins', or null\n theme: 'bootstrap',\n\n // Storage configuration\n storagePrefix: 'myapp_',\n\n // Router configuration\n routerMode: 'hash',\n\n // Toast configuration\n toastPosition: 'top-right',\n toastDuration: 3000,\n toastMax: 5\n}));\n```\n\n## View Helpers Reference\n\n### rnx.scripts()\n\nInclude rnxJS library and stylesheets.\n\n**Syntax:**\n```javascript\nrnx.scripts(cdn, theme)\n```\n\n**Parameters:**\n- `cdn` (boolean, default: true) - Use CDN for resources\n- `theme` (string, default: 'bootstrap') - Theme variant\n\n**Example:**\n```ejs\n\n <%- rnx.scripts(true, 'm3') %>\n\n```\n\n### rnx.state()\n\nCreate reactive state from server data.\n\n**Syntax:**\n```javascript\nrnx.state(data, varName)\n```\n\n**Parameters:**\n- `data` - JavaScript object or array to serialize\n- `varName` (string, default: 'state') - Global state variable name\n\n**Example:**\n```ejs\n<%\n const appData = {\n user: {\n name: req.user.name,\n email: req.user.email,\n role: req.user.role\n },\n notifications: notifications,\n routes: {\n home: '/',\n profile: '/profile',\n settings: '/settings'\n }\n };\n%>\n\n<%- rnx.state(appData, 'appState') %>\n\n\n\n```\n\n### rnx.component()\n\nRender rnxJS components.\n\n**Syntax:**\n```javascript\nrnx.component(name, props)\n```\n\n**Parameters:**\n- `name` (string) - Component name\n- `props` (object, optional) - Component properties\n\n**Example:**\n```ejs\n<%- rnx.component('Button', { variant: 'primary', label: 'Save' }) %>\n\n<%- rnx.component('Input', {\n type: 'email',\n placeholder: 'user@example.com',\n data_bind: 'state.email'\n}) %>\n\n<%- rnx.component('DataTable', {\n data: 'state.users',\n columns: 'state.columns',\n sortable: true,\n pageable: true\n}) %>\n```\n\n### rnx.plugin()\n\nInitialize rnxJS plugins.\n\n**Syntax:**\n```javascript\nrnx.plugin(name, options)\n```\n\n**Parameters:**\n- `name` (string) - Plugin name ('router', 'toast', 'storage')\n- `options` (object, optional) - Plugin configuration\n\n**Example:**\n```ejs\n<%- rnx.plugin('router', { mode: 'hash', default_route: '/' }) %>\n\n<%- rnx.plugin('toast', {\n position: 'top-right',\n duration: 3000,\n max_toasts: 5\n}) %>\n\n<%- rnx.plugin('storage', {\n prefix: 'myapp_',\n storage: 'localStorage'\n}) %>\n```\n\n### rnx.dataBind()\n\nCreate a data-bind attribute.\n\n**Syntax:**\n```javascript\nrnx.dataBind(path)\n```\n\n**Example:**\n```ejs\n>\n\n```\n\n### rnx.dataRule()\n\nCreate a validation rule attribute.\n\n**Syntax:**\n```javascript\nrnx.dataRule(rules)\n```\n\n**Example:**\n```ejs\n />\n\n\n />\n```\n\n## Complete Example\n\n### app.js\n\n```javascript\nconst express = require('express');\nconst rnxMiddleware = require('@arnelirobles/express-rnx');\n\nconst app = express();\n\n// Middleware\napp.use(express.static('public'));\napp.use(rnxMiddleware({\n cdn: true,\n theme: 'bootstrap',\n toastPosition: 'top-right',\n toastDuration: 3000\n}));\n\napp.set('view engine', 'ejs');\napp.set('views', './views');\n\n// Mock user\nconst mockUser = {\n id: 1,\n name: 'John Doe',\n email: 'john@example.com',\n role: 'admin'\n};\n\nconst mockNotifications = [\n { id: 1, title: 'Welcome', message: 'Welcome to the app!', type: 'info' },\n { id: 2, title: 'Success', message: 'Your profile was updated', type: 'success' }\n];\n\n// Routes\napp.get('/', (req, res) => {\n res.render('index', {\n user: mockUser,\n notifications: mockNotifications\n });\n});\n\napp.get('/profile', (req, res) => {\n res.render('profile', {\n user: mockUser\n });\n});\n\napp.get('/components', (req, res) => {\n const users = [\n { id: 1, name: 'Alice', email: 'alice@example.com', status: 'active' },\n { id: 2, name: 'Bob', email: 'bob@example.com', status: 'inactive' },\n { id: 3, name: 'Charlie', email: 'charlie@example.com', status: 'active' }\n ];\n\n const columns = [\n { key: 'id', label: 'ID' },\n { key: 'name', label: 'Name' },\n { key: 'email', label: 'Email' },\n { key: 'status', label: 'Status' }\n ];\n\n res.render('components', {\n users: users,\n columns: columns\n });\n});\n\napp.listen(3000, () => {\n console.log('Server running on http://localhost:3000');\n});\n```\n\n### views/layout.ejs\n\n```ejs\n\n\n\n \n \nHello, !
\n\nEmail:
\nRole:
\n\n <%- rnx.component('Button', {\n variant: 'primary',\n label: 'Edit Profile',\n onclick: 'window.rnx.toast.info(\"Opening edit dialog\")'\n }) %>\n\n <%- rnx.component('Button', {\n variant: 'danger',\n label: 'Logout',\n onclick: 'window.rnx.toast.warning(\"Logging out...\")'\n }) %>\n