9

Github GitHub - radio-js/radio: A component-centric backend communication layer...

 3 years ago
source link: https://github.com/radio-js/radio
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

A component-centric backend communication layer for Alpine.js.

Installation

Install using the following command:

composer require radio/radio

Install the @radioScripts into your Blade template, along with Alpine.js:

<html>
    <head>
        ...
        
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
    </head>
    
    <body>
        ...
    
        @radioScripts
    </body>
</html>

Usage

  1. Create a new component class, and apply the Radio\Radio trait. The class may be located anywhere in your codebase, we recommend App\Http\Components:
<?php

namespace App\Http\Components;

use Radio\Radio;

class MyComponent
{
    use Radio;
    
    // ...
}
  1. Use the @radio Blade directive to connect your Alpine.js component to your Radio PHP class:
<div x-data="@radio(App\Http\Components\MyComponent::class)">
    ...
</div>

  1. Use your PHP class with Alpine.js!

    • Interact with public methods and properties:

      public $name = '';

public function saveName()
{
    auth()->user()->update([
        'name' => $this->name,
    ]);

    return $this->name;
}
      <input x-model="name" type="text" />

<button @click="await saveName()">Save name</button>

    • Dispatch browser events:

      use Radio\Concerns\WithEvents;

public function closeUser($userId)
{
    $this->dispatchEvent('closeUser', [
        'id' => $userId,
    ]);
}

    • Render validation errors:

      <template x-if="$radio.errors.has('name')">
    <p x-text="$radio.errors.get('name')[0]"></p>
</template>

    • Interact with PHP object properties:

      // `Collection`s and `EloquentCollection`s are automatically cast using property type hinting. Note: objects within a collection are not cast with it.
public Collection $users;

// ...as well as `Stringable` objects.
public Stringable $slug;

// Implement the `Radio\Contracts\Castable` interface on any object for custom DTO support using `fromRadio()` and `toRadio` for hydration and dehydration.
public CustomObject $dto;

    • Define computed properties:

      #[Computed('getWelcomeMessage')]
public $welcomeMessage;

public function getWelcomeMessage()
{
    $name = auth()->user()->name;

    return "Welcome {$name}!";
}

Need Help?

beetle If you spot a bug with this package, please submit a detailed issue, and wait for assistance.

thinking If you have a question or feature request, please start a new discussion.

closed_lock_with_key If you discover a vulnerability within the package, please review our security policy.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK