PHPackages                             arnelirobles/laravel-rnx - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. arnelirobles/laravel-rnx

ActiveLibrary[Templating & Views](/categories/templating)

arnelirobles/laravel-rnx
========================

rnxJS integration for Laravel - Blade directives and helpers for reactive components

00JavaScript

Since Dec 21Pushed 4mo agoCompare

[ Source](https://github.com/BaryoDev/rnxjs)[ Packagist](https://packagist.org/packages/arnelirobles/laravel-rnx)[ RSS](/packages/arnelirobles-laravel-rnx/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

rnxJS
=====

[](#rnxjs)

[![npm version](https://camo.githubusercontent.com/c834b66c2930bfbb4da96d4cfec872f8e6e26d694e307a3962557de74ac0bae1/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4061726e656c69726f626c65732f726e786a73)](https://www.npmjs.com/package/@arnelirobles/rnxjs)[![npm downloads](https://camo.githubusercontent.com/7a433cf132a9a553812fb87887b1e042a79f3d6527e3a9404bbf1be0dcf2dbde/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f4061726e656c69726f626c65732f726e786a73)](https://www.npmjs.com/package/@arnelirobles/rnxjs)[![Bundle Size](https://camo.githubusercontent.com/45b4e5c92cee93dcc655d30187ab4beda97ca32089767de55e2e184da9dc81d0/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e7a69702f4061726e656c69726f626c65732f726e786a73)](https://bundlephobia.com/package/@arnelirobles/rnxjs)[![License](https://camo.githubusercontent.com/84b88a6a29e06c04b7ed9047ffd11edfe9815bec62d79d7143f333fe0f73dc7a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f4061726e656c69726f626c65732f726e786a73)](https://github.com/BaryoDev/rnxjs/blob/main/LICENSE)[![Tests](https://camo.githubusercontent.com/68e9ff4775894a8d1762c401fb3adfeedb68333a7cac5604a8ac45c712e509b4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74657374732d36303025324225323070617373696e672d627269676874677265656e)](https://github.com/BaryoDev/rnxjs)

**The Bootstrap-Native Framework for Production Apps.**

> Build Reactive Bootstrap Apps without a Build Step. Designed for Backend Developers (Django, Rails, Laravel) and Internal Tools.

---

📚 Documentation
---------------

[](#-documentation)

GuideDescription[**📰 v1.0.0 Release Post**](./docs/BLOG-V1.0.0.md)Complete overview of v1.0.0 features, benchmarks, and comparisons[**✅ Release Status Report**](./docs/V1.0.0-RELEASE-STATUS.md)Verification status for all packages and publication readiness[**Quick Start**](./docs/QUICK-START.md)Get started in 5 minutes[**Component Library**](./docs/COMPONENTS.md)Complete reference for all 46 components with examples[**API Reference**](./docs/API.md)Complete API documentation with stability guarantees[**Migration Guide**](./docs/MIGRATION.md)Migrate from jQuery to rnxJS[**Benchmarks**](./docs/BENCHMARKS.md)Performance comparisons with jQuery, Vue, React[**Publication Checklist**](./docs/PUBLICATION-CHECKLIST.md)v1.0.0 publication guide for all package registries---

🛡️ Production Readiness
-----------------------

[](#️-production-readiness)

rnxJS is tested and production-ready for v1.0.0.

- **Test Coverage**: 600+ tests covering core reactivity, 34 components, plugins, and edge cases.
- **Stability**: Verified against rapid state updates, race conditions, and memory leaks.
- **Browser Support**: Compatible with all modern browsers (Chrome, Firefox, Safari, Edge).
- **Zero Dependencies**: CDN version only requires Bootstrap CSS.
- **Bundle Size**: ~10KB gzipped with all 34 components included.

> **Note**: rnxJS is designed as a lightweight, no-build alternative to React/Vue for backend-driven apps and internal tools. For massive, complex Single Page Applications, consider a full framework.

---

⚡ Quick Start (CLI)
-------------------

[](#-quick-start-cli)

The fastest way to start is using our CLI tool:

```
npx @arnelirobles/create-rnxjs-app@latest
```

📂 Samples
---------

[](#-samples)

You can find working examples and samples here: [https://github.com/BaryoDev/rnxJS\_samples](https://github.com/BaryoDev/rnxJS_samples)

---

🚀 Zero to Hero: Build Your First App
------------------------------------

[](#-zero-to-hero-build-your-first-app)

Welcome to rnxJS! In this 5-minute tutorial, we'll build a reactive **Employee Directory** with a search filter. No Webpack, no Bundlers, just HTML and JS.

### Step 1: The Setup (`index.html`)

[](#step-1-the-setup-indexhtml)

Create an `index.html` file and include Bootstrap + rnxJS.

```
>

    rnxJS App

```

### Step 2: The Logic (`app.js`)

[](#step-2-the-logic-appjs)

Create `app.js`. We'll initialize our **Reactive State**.

```
// app.js
const { createReactiveState, autoRegisterComponents, loadComponents } = rnx;

// 1. Define your data model
const state = createReactiveState({
    searchQuery: '',
    employees: [
        { id: 1, name: 'Alice Johnson', role: 'Engineer', dept: 'Tech' },
        { id: 2, name: 'Bob Smith', role: 'Designer', dept: 'Creative' },
        { id: 3, name: 'Charlie Kim', role: 'Manager', dept: 'Sales' },
    ],
    // Computed property (derived state works by manually updating or logical getters)
    // For simplicity in rnxJS v0, we handle filtering in the view or listeners
});

// 2. Register Bootstrap Components
autoRegisterComponents();

// 3. Hydrate the DOM
loadComponents(document.body, state);
```

### Step 3: The UI

[](#step-3-the-ui)

Update the `` in `index.html`. We use `data-bind` to sync inputs and text.

```

        Employee Directory

                Searching for:

```

### Step 4: Making it Dynamic

[](#step-4-making-it-dynamic)

rnxJS works great with vanilla JS logic. Let's add a listener to filter the list.

```
// Add this to app.js

function renderList() {
    const listContainer = document.getElementById('employee-list');
    const query = state.searchQuery.toLowerCase();

    // Filter logic
    const filtered = state.employees.filter(emp =>
        emp.name.toLowerCase().includes(query) ||
        emp.role.toLowerCase().includes(query)
    );

    // Vanilla JS rendering (fast and simple)
    listContainer.innerHTML = filtered.map(emp => `

                    ${emp.name}
                    ${emp.dept}
                    ${emp.role}

    `).join('');
}

// Subscribe to search changes to re-render
state.subscribe('searchQuery', renderList);

// Initial render
renderList();
```

🎉 **That's it!** You have a reactive app with search, Bootstrap styling, and Material components.

---

📖 Core Concepts & API
-------------------------

[](#-core-concepts--api)

### 1. Reactive State

[](#1-reactive-state)

The heart of rnxJS is the `createReactiveState` function. It wraps your object in a Proxy to detect changes.

```
const state = rnx.createReactiveState({
    user: { name: 'Arnel', points: 100 },
    items: ['Apple', 'Banana']
});
```

**Key Features:**

- **Deeply Nested**: Works on `state.user.name`.
- **Arrays**: `push`, `pop`, `splice` trigger updates automatically.
- **`state.subscribe(path, callback)`**: Listen for changes.
    - Path examples: `'user.name'`, `'items'`, `'items.0'`.
- **`state.$unsubscribeAll()`**: Cleanup all listeners (useful for Single Page Apps).

### 2. Data Binding (`data-bind`)

[](#2-data-binding-data-bind)

Connect your DOM to State without event listeners.

ElementBinding TypeBehavior``, ``**Two-Way**Updates state on typing; updates value on state change.``**Two-Way**Updates selection state.``**Two-Way**Binds to boolean state.``, ``, ``**One-Way**Updates `textContent` when state changes.**Validation (`data-rule`)**: Add rules to inputs to populate `state.errors`.

```

```

Rules: `required`, `email`, `numeric`, `min:5`, `max:10`, `pattern:^A.*`.

### 3. Components (`rnxJS Components`)

[](#3-components-rnxjs-components)

rnxJS provides **34 production-ready** Bootstrap/Material components.

**Standard**: ``, ``, ``, ``, ``, ``, ``. **Forms**: ``, ``, ``, ``, ``, ``, ``, ``. **Layout**: ``, ``, ``, ``. **Material (M3)**: ``, ``, ``, ``, ``, ``. **Advanced**: ``, ``, ``, ``, ``, ``, ``, ``.

**Usage:**

1. **Auto Register**: `rnx.autoRegisterComponents()` registers all of them.
2. **Manual Register**: `rnx.registerComponent('MyBtn', Button)`.
3. **Props**: Attributes are passed as props. `data-bind` works on components too! ```

    ```

### 4. Lifecycle Hooks

[](#4-lifecycle-hooks)

When creating custom components, use hooks to manage resources.

```
const component = createComponent(templateFn, props);

component.useEffect((self) => {
    console.log('Mounted!');

    const interval = setInterval(() => console.log('Tick'), 1000);

    // Return cleanup function (called on unmount)
    return () => clearInterval(interval);
});

component.onUnmount(() => {
    console.log('Destroyed');
});
```

---

🛠 Project Structure
-------------------

[](#-project-structure)

For a clean codebase, we recommend this folder structure:

```
/
├── index.html        # Entry point
├── css/
│   └── styles.css    # Custom styles / overlays
├── js/
│   ├── app.js        # Main logic (State init, Load)
│   ├── components/   # Custom components
│   │   └── UserCard.js
│   └── utils/        # Helpers
└── assets/

```

### Building Custom Components

[](#building-custom-components)

Create reusable functional components:

```
// js/components/UserCard.js
import { createComponent } from '@arnelirobles/rnxjs';

export function UserCard({ name, role }) {
    // Template
    const template = (state) => `

                ${name}
                ${role}

    `;

    return createComponent(template);
}

// Register it
import { registerComponent } from '@arnelirobles/rnxjs';
registerComponent('UserCard', UserCard);
```

Use it in HTML: ``

---

📦 Installation Options
----------------------

[](#-installation-options)

### 1. NPM (Recommended for Vite/Webpack)

[](#1-npm-recommended-for-vitewebpack)

```
npm install @arnelirobles/rnxjs
```

```
import { createReactiveState, loadComponents } from '@arnelirobles/rnxjs';
import '@arnelirobles/rnxjs/css/bootstrap-m3-theme.css'; // Optional M3 theme
```

### 2. CDN (No Build)

[](#2-cdn-no-build)

Use `unpkg` or `jsdelivr`.

```

```

---

🚀 Why rnxJS?
------------

[](#-why-rnxjs)

FeaturernxJSjQueryVue 3React 18**Bundle Size (gzipped)****~10KB**~30KB~16KB~42KB**Zero Build Required****✅ Yes**✅ Yes⚠️ Recommended❌ Required**Built-in Components****34**000**Two-Way Binding****✅ Built-in**❌ Manual✅ v-model❌ Manual**Form Validation****✅ Built-in**❌ Plugin❌ Library❌ Library**Learning Curve****1 hour**1 hour1 day1 week**Backend Integration****✅ Django/Rails/Laravel/Express**✅ Any⚠️ Nuxt⚠️ Next.js**Perfect for:**

- **Backend Devs**: Django/Rails/Laravel developers who want interactivity without a separate SPA repo.
- **Internal Tools**: Rapidly build admin panels using standard Bootstrap.
- **Prototypes**: "Zero to Hero" in 5 minutes.
- **jQuery Migrations**: Modern reactivity with similar simplicity.

See [full benchmarks](./docs/BENCHMARKS.md) for detailed performance comparisons.

---

Icons
-----

[](#icons)

rnxJS now uses **Bootstrap Icons** by default. Ensure you include the Bootstrap Icons stylesheet in your project:

```

```

When using the `icon` prop in components like `Button`, `FAB`, `Icon`, etc., simply provide the icon name (e.g., `moon-stars`, `check-circle`). The library automatically applies the `bi bi-[name]` classes.

```

```

❓ Troubleshooting & FAQ
---------------------------

[](#-troubleshooting--faq)

### 1. My `` or custom component isn't rendering

[](#1-my-fab-or-custom-component-isnt-rendering)

- Ensure you have called `rnx.autoRegisterComponents()` or manually registered it via `rnx.registerComponent('FAB', FAB)`.
- Check if you have the Material Symbols font included if icons are missing: ``
- If using `data-if`, ensure the condition evaluates to true.

### 2. Data Binding isn't working on some elements

[](#2-data-binding-isnt-working-on-some-elements)

- As of **v0.3.4**, `data-bind` is synchronous. Ensure `loadComponents(document, state)` is called **after** the DOM is ready (e.g., at the end of `` or inside `DOMContentLoaded`).
- Check your browser console for warnings like `[rnxJS] Invalid data-bind path`.
- Ensure your state object was created with `createReactiveState`.

### 3. "Bootstrap is not defined" error

[](#3-bootstrap-is-not-defined-error)

- Use `setBootstrap(window.bootstrap)` if you are using a bundler and Bootstrap isn't attached to the global window object.

### 4. How to contribute?

[](#4-how-to-contribute)

- We welcome contributions! Please verify potential changes with existing tests: `npm test`.

---

📋 Changelog
-----------

[](#-changelog)

### Version 1.0.0 (Stable Release) - December 2025

[](#version-100-stable-release---december-2025)

**The first stable release of rnxJS!**

- **34 Production Components**: Complete component library with full test coverage
- **600+ Tests**: Comprehensive test suite covering all components, reactivity, and edge cases
- **Plugin System**: Extensible architecture with 3 official plugins (Router, Toast, Storage)
- **Backend Integrations**: Official packages for Django, Rails, Laravel, and Express
- **Complete Documentation**:
    - [API Reference](./docs/API.md) with stability guarantees
    - [Migration Guide](./docs/MIGRATION.md) for jQuery users
    - [Quick Start](./docs/QUICK-START.md) for new users
    - [Benchmarks](./docs/BENCHMARKS.md) vs jQuery/Vue/React
- **Performance**: ~10KB gzipped, <100ms time to interactive

---

### Version 0.4.0 (Phase 2 Enhancement) - December 2025

[](#version-040-phase-2-enhancement---december-2025)

- **Phase 2 Components**: Added 6 advanced enhancement components (FileUpload, ProgressBar, Tooltip, Sidebar, Stepper, Dropdown)
- **Comprehensive Testing**: 68 unit test cases + 23 performance benchmarks for Phase 2 components
- **Production Ready**: Full test coverage with performance metrics and stability verification
- **Component Library**: Now includes 22+ production-ready components with professional documentation
- **CLI Enhancement**: Multi-template scaffolding with 4 templates (blank, dashboard, landing, form)

---

### Version 0.3.16 (Release) - December 2025

[](#version-0316-release---december-2025)

- **Stability**: Added comprehensive stability tests for race conditions and rapid updates.
- **Docs**: Added "Production Readiness", "Disclaimer", and improved "Troubleshooting" sections.

---

### Version 0.3.5 (Stability Hardening) - December 2025

[](#version-035-stability-hardening---december-2025)

**🛡️ Critical Stability Updates**

- **Infinite Loop Prevention**: Implemented a recursion guard in `DataBinder`. Input elements are now flagged during updates to prevent state changes from re-triggering the input listener, fixing potential browser crashes.
- **Component Hydration**: Added validation checks in `loadComponents` to ensure replacement nodes are valid before attempting to mount, preventing silent failures.
- **Testing**: Added specialized regression tests for DataBinder stability and FAB rendering.

---

### Version 0.3.15 (Documentation Update) - December 2025

[](#version-0315-documentation-update---december-2025)

- **Docs**: Added "Quick Start" key and "Samples" links to README for better onboarding.

---

### Version 0.3.4 (Hotfix Release) - December 2025

[](#version-034-hotfix-release---december-2025)

**🐛 Bug Fixes**

- **Data Binding Synchronization**: Fixed a race condition where `data-bind` on vanilla HTML elements (like ``, ``) would sometimes fail to populate or remain empty. Data binding is now synchronous and guaranteed to run immediately after component loading.
- **FAB Rendering**: Fixed `` component not rendering correctly in certain environments. It now correctly uses the reactive state and renders as a button with the `.m3-fab` class.

---

### Version 0.3.3 (Critical Fixes) - December 2025

[](#version-033-critical-fixes---december-2025)

**🐛 Critical Bug Fixes & Improvements**

- **Circular Dependency**: Fixed circular dependency in `AutoRegistry` by refactoring internal exports.
- **Bootstrap Config**: Added `setBootstrap()` and `getBootstrap()` to manually configure Bootstrap instance (fixing issues in bundlers where `window.bootstrap` is missing).
- **CSS Exports**: `package.json` now correctly exports `./css/*` for M3 theme imports.
- **Button Props**: `Button` component now correctly passes data attributes (e.g., `data-bs-toggle`) to the DOM element.
- **M3 Colors**: Adjusted M3 Secondary colors to be more neutral/gray to fit standard expectations.
- **Docs**: Clarified `Material Symbols` dependency in README.

---

### Version 0.3.0 (Material Design 3) - December 2025

[](#version-030-material-design-3---december-2025)

**🎨 Material Design 3 & New Components**

- **Theme**: Added `bootstrap-m3-theme.css` for M3 styling overrides.
- **New Components**: `FAB`, `NavigationDrawer`, `Switch`, `Chips`, `Slider`, `TopAppBar`, `NavigationBar`, `List`, `Search`, `SegmentedButton`, `Icon`.
- **Updates**: `Button` (M3 variants: filled, tonal, elevated, text), `Card` (M3 variants), `Input` (floating labels).
- **Icons**: Added `Icon` component and support for Bootstrap Icons.

**🧪 Testing & Stability**

- **Tests**: Added full Vitest suite for new components and Playwright E2E tests for the M3 Demo.
- **Framework Fix**: Fixed critical issue in `createComponent` where state updates detached event listeners in re-rendered DOM nodes.

---

### Version 0.2.2 (NPM Release) - December 2025

[](#version-022-npm-release---december-2025)

- **Release Bump**: Version bump to retry NPM publication.
- **Includes**: All fixes from v0.2.1 (Col rename, validation fixes).

---

### Version 0.2.1 (Maintenance Release) - December 2025

[](#version-021-maintenance-release---december-2025)

**🐛 Bug Fixes & Improvements**

- **Component Rename**: `` renamed to `` to avoid conflict with native HTML `` void element.
- **Validation**: Fixed `onclick` and string-based event attribute validation warnings.
- **Framework**: `createComponent` now correctly identifies root-level slots.
- **Input**: `Input` component now passes through all unknown attributes (enabling `data-bind` support).

**⚠️ Breaking Changes**

- **`` is now ``**: Please update your layouts to use `` instead of ``.

---

### Version 0.2.0 (Feature Release) - December 2025

[](#version-020-feature-release---december-2025)

**✨ New Features**

- **Built-in Form Validation**: Add validation rules directly to your inputs!

    ```

    ```

    - Supported rules: `required`, `email`, `numeric`, `min:n`, `max:n`, `pattern:regex`
    - Errors automatically populate `state.errors`
- **Global IntelliSense**: Full VS Code autocompletion support for CDN users via `global.d.ts`.

    - Just add `/// ` or rely on automatic detection.

**⚠️ Breaking Changes**

- **Reserved State Property**: The validation system now reserves `state.errors` for validation messages. If you were using `errors` for other purposes in your state root, please rename it.

---

### Version 0.1.10 - December 2025

[](#version-0110---december-2025)

**🐛 Bug Fixes**

- Fixed race condition in `useEffect` cleanup during rapid state updates.

---

### Version 0.1.9 - December 2025

[](#version-019---december-2025)

**🎉 Major Stability Release - Production Ready!**

This release focuses on **framework stabilization**, fixing 13 identified bugs, improving error handling, and adding comprehensive test coverage. The framework is now production-ready with **61 passing tests**.

Important

**NO BREAKING CHANGES** - All improvements are backward compatible. Existing code will continue to work without modifications.

#### 🐛 Critical Bug Fixes

[](#-critical-bug-fixes)

- **Memory Leak Prevention**: Fixed memory leaks in reactive state subscriptions

    - Added `$unsubscribeAll()` and `$destroy()` cleanup methods
    - Automatic subscription cleanup tracking
    - Event listeners now properly removed on component destruction
- **Security Fix**: Replaced unsafe `eval()` usage in conditional rendering

    - Implemented safer `Function` constructor with limited scope
    - Added strict mode and proper error boundaries
    - Protects against potential XSS vulnerabilities
- **Error Boundaries**: Added comprehensive error handling

    - Try-catch blocks in all critical operations
    - Helpful error messages with `[rnxJS]` prefix
    - Single component errors no longer crash the entire app

#### ✨ New Features & Improvements

[](#-new-features--improvements)

- **Array Reactivity**: Array mutation methods now trigger reactivity

    ```
    state.items.push(4);    // ✅ Now works!
    state.items.pop();      // ✅ Now works!
    state.items.splice(1, 1); // ✅ Now works!
    ```
- **Input Validation**: Enhanced data binding with validation

    - Path format validation
    - State object validation
    - Helpful error messages for invalid inputs
- **Type Coercion**: Number inputs now return actual numbers

    ```

    ```
- **Circular Reference Protection**: Handles circular references safely

    - WeakSet tracking to prevent infinite loops
    - Warnings when circular references detected
- **Performance Improvements**: Proxy caching for better performance

    - Reuses proxies instead of creating new ones
    - Significant improvement for deeply nested objects
- **Lifecycle Hooks**: New `onUnmount()` hook for cleanup

    ```
    component.onUnmount(() => {
      // Cleanup code here
    });
    component.destroy(); // Manually trigger cleanup
    ```
- **Data Binding Cleanup**: New `unbindData()` function

    ```
    unbindData(element); // Remove all bindings
    ```

#### 🧪 Testing

[](#-testing)

- **61 comprehensive tests** covering all core functionality
- Test framework: Vitest with happy-dom
- Full coverage for: reactive state, components, data binding
- Edge cases and error scenarios tested

#### 📦 New Package Scripts

[](#-new-package-scripts)

```
{
  "test": "vitest run",
  "test:watch": "vitest",
  "test:ui": "vitest --ui",
  "test:coverage": "vitest run --coverage"
}
```

#### 🔧 Internal Improvements

[](#-internal-improvements)

- Better focus preservation in component re-renders
- Improved error messages and logging
- Code quality improvements
- Removed duplicate code from examples

---

### Version 0.1.8 - November 2025

[](#version-018---november-2025)

**🐛 Bug Fixes**

- Fixed a `TypeError` in `createReactiveState` when using array spread syntax (e.g., `[...state.array]`) or other Symbol-based operations.

---

### Version 0.1.7 - November 2025

[](#version-017---november-2025)

**✨ New Features**

- **Reactive Data Binding**: Automatic two-way data binding with `data-bind` attribute

    ```

    Hello, !

      const state = rnx.createReactiveState({ username: '' });
      rnx.loadComponents(document, state);

    ```
- **`createReactiveState()`**: Create reactive state objects with Proxy-based observation

    ```
    const state = rnx.createReactiveState({
      user: { name: '', email: '' }
    });

    // Subscribe to changes
    state.subscribe('user.email', (newValue) => {
      console.log('Email changed:', newValue);
    });
    ```
- **`bindData()`**: Manually bind data to DOM elements

    ```
    rnx.bindData(document.getElementById('form'), state);
    ```

**🔧 Improvements**

- Fixed `autoRegisterComponents()` to work correctly in global bundle context
- Added lazy loading for DataBinder to reduce bundle size when not used
- Updated README with comprehensive reactive binding documentation

**📦 API Additions**

- `rnx.createReactiveState(initialState)` - Create reactive state
- `rnx.bindData(rootElement, state)` - Bind data to elements
- `loadComponents()` now accepts optional `reactiveState` parameter

---

### Version 0.1.6 - October 2025

[](#version-016---october-2025)

**✨ Features**

- Bootstrap-compatible component system
- 19 built-in components (Button, Input, Card, Modal, etc.)
- Automatic component registration with `autoRegisterComponents()`
- Conditional rendering with `data-if` attribute
- Slot-based content insertion
- Global bundle for script tag usage

**📦 Components Available**

- Form: `Button`, `Input`, `Checkbox`, `Radio`, `Select`, `Textarea`, `FormGroup`
- Layout: `Container`, `Row`, `Column`
- UI: `Alert`, `Badge`, `Card`, `Modal`, `Spinner`, `Toast`, `Pagination`
- Advanced: `Tabs`, `Accordion`

**Example Usage**

```

  rnx.autoRegisterComponents();
  rnx.loadComponents();

```

---

### Version 0.1.0 - 0.1.5

[](#version-010---015)

**Initial Release**

- Core component system
- Component registration via `registerComponent()`
- Manual component loading
- Bootstrap class mapping
- ES Module support

---

📃 License
---------

[](#-license)

MPL-2.0 © Arnel Isiderio Robles

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance51

Moderate activity, may be stable

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/11a71879ca75a16d172e0422a10310448128f5c5bfa57f39766f1b6f01bcc784?d=identicon)[arnelirobles](/maintainers/arnelirobles)

---

Top Contributors

[![arnelirobles](https://avatars.githubusercontent.com/u/3198856?v=4)](https://github.com/arnelirobles "arnelirobles (70 commits)")

### Embed Badge

![Health badge](/badges/arnelirobles-laravel-rnx/health.svg)

```
[![Health](https://phpackages.com/badges/arnelirobles-laravel-rnx/health.svg)](https://phpackages.com/packages/arnelirobles-laravel-rnx)
```

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)