flixtechs-labs/stimulus-extra

The missing laravel blade helpers for turbo and stimulus

0.0.5 2024-03-15 19:43 UTC

Requires

• php: ^8.0
• hotwired-laravel/stimulus-laravel: ^0.3|^1.1
• illuminate/support: ^7.0|^8.0|^9.23|^10.0|^11.0

Requires (Dev)

• laravel/pint: ^1.1
• orchestra/testbench: ^7.6
• pestphp/pest: ^1.21
• phpstan/phpstan: ^1.8

MIT

• Given Ncube

README

Turbo Laravel Helpers

The missing stimulus helpers for laravel blade! This package contains a bunch of helpers that pairs nicely with hotwired/stimulus-laravel package. Inspired by Symfony UX Stimulus.

Installation

  composer require flixtechs-labs/stimulus-extra

Usage

The are 3 main helpers

• stimulus_controller() to add a controller
• stimulus_action() to specifiy the action
• stimulus_target() to specifiy the target

<div {{ stimulus_controller('say-hello') }}>
    <input type="text" {{ stimulus_target('say-hello', 'name') }}>

    <button {{ stimulus_action('say-hello', 'greet') }}>
        Greet
    </button>

    <div {{ stimulus_target('say-hello', 'output') }}></div>
</div>

The stimulus_controller('say-hello') renders a data-controller="say-hello" attribute. Whenever this element appears on the page, Stimulus will automatically look for and initialize a controller called say-hello-controller.js. Create that in your resources/js/controllers/ directory:

// resources/js/controllers/say_hello_controller.js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['name', 'output']

    greet() {
      this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
    }
}

Testing

composer test

License

MIT