Rift

A lightweight micro-framework that connects Blade, Livewire, Alpine.js, and JavaScript classes seamlessly for modern Laravel projects.

🚀 Features

✅ Generate Livewire, Blade, and JS components in one command
✅ Connect Blade ↔ Alpine.js ↔ JavaScript ↔ Livewire effortlessly
✅ Automatic JS dependency injection with clean syntax
✅ Lightweight, clean API
✅ Supports hot-reload, dynamic mounting, and reactivity

🛠️ Installation

PHP (Laravel)

Install via Composer:

composer require singlephon/rift

JavaScript (NPM)

A) If published on npm

npm install @singlephon/rift

or

yarn add @singlephon/rift

Import Rift in your resources/js/app.js:

...

import { Rift } from "@singlephon/rift";

new Rift(import.meta.glob('./rift/**/*.js', { eager: true })).start();

Getting Started with Rift

1️⃣ Generate a new Rift component

php artisan rift:make counter

✅ You will see:

COMPONENT CREATED 🤙

CLASS: app/Livewire/Rift/Counter.php
VIEW:  resources/views/rift/counter.blade.php
JS:    resources/js/rift/counter.js

2️⃣ Add logic to your generated JS class

Open:

resources/js/rift/counter.js

Replace contents with:

import { RiftComponent } from '@singlephon/rift';

export default class Counter extends RiftComponent {
    count = 1;

    increase() {
        this.count++;
    }

    decrease() {
        this.count--;
    }
}

3️⃣ Add UI to your generated Blade view

Open:

resources/views/rift/counter.blade.php

Replace contents with:

<x-rift component="counter">
    <p x-text="rift.count"></p>
    <button x-on:click="rift.increase()">+</button>
    <button x-on:click="rift.decrease()">-</button>
</x-rift>

4️⃣ Test your component

Add this to any page or Livewire component:

<livewire:rift.counter />

✅ Now visit your page:

• You will see a counter with + and - buttons.
• Clicking + increases the counter.
• Clicking - decreases the counter.
• The state is reactive and persistent across Livewire updates.

Why Rift?

• ✅ Seamlessly binds Blade, Alpine.js, JS classes, and Livewire.
• ✅ Clean syntax with no boilerplate.
• ✅ CLI generator for automatic structure creation.
• ✅ Ready for complex UI composition with clean separation of concerns.

🗂 Project Structure

• php package (Composer): manages Blade + Livewire generation
• js package (npm): manages RiftContainer, RiftComponent, and automatic mounting

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Rakhat Bakytzhanov
• All Contributors

License

The MIT License (MIT). Please see License File for more information.