On May 19th, Samuel Štancl announced the release of Airwire. Samuel is well known in the Laravel community for his open source packages like: Tenancy for Laravel, StackJobs, Laravel Code Tips, Lean Admin, and much more.

In the release blog post, Samuel discribes Airwire as follows:

Airwire is simple, yet extremely powerful tool for communicating between frontend JavaScript components and backend PHP code.

https://archte.ch/blog/introducing-airwire

Airwire is providing a great way of having your templates written in JavaScript (framework agnostig) and keep your logic in back-end PHP.

It lets you write Livewire-style OOP components like this:

https://github.com/archtechx/airwire
  class CreateUser extends Component
  {
      #[Wired]
      public string $name = '';

      #[Wired]
      public string $email = '';

      #[Wired]
      public string $password = '';

      #[Wired]
      public string $password_confirmation = '';

      public function rules()
      {
          return [
              'name' => ['required', 'min:5', 'max:25', 'unique:users'],
              'email' => ['required', 'unique:users'],
              'password' => ['required', 'min:8', 'confirmed'],
          ];
      }

      #[Wired]
      public function submit(): User
      {
          $user = User::create($this->validated());

          $this->meta('notification', __('users.created', ['id' => $user->id, 'name' => $user->name]));

          $this->reset();

          return $user;
      }
  }

Then, it generates a TypeScript definition like this:

https://github.com/archtechx/airwire
  interface CreateUser {
      name: string;
      email: string;
      password: string;
      password_confirmation: string;
      submit(): AirwirePromise<User>;
      errors: { ... }

      // ...
  }

And Airwire will wire the two parts together. It’s up to you what frontend framework you use (if any), Airwire will simply forward calls and sync state between the frontend and the backend.

https://github.com/archtechx/airwire

There’s no point for me to go more in-depth of how it works because Samuel provided plenty of examples and information on Github’s repository readme file or on the release post here.

We recommend go ahead and give it a try and you’ll be surprised how pleasent is to work with Airwire.

You can install it via composer:

  composer require archtechx/airwire

Then go to your webpack.mix.js and register the watcher plugin. It will refresh the TypeScript definitions whenever you make a change to PHP code:

  mix.webpackConfig({
      plugins: [
          new (require('./vendor/archtechx/airwire/resources/js/AirwireWatcher'))(require('chokidar')),
      ],
  })

Next, generate the initial TS files:

  php artisan airwire:generate

This will create airwire.ts and airwired.d.ts. Open your app.ts and import the former:

  import Airwire from './airwire'

If you’re using TypeScript for the first time, you’ll also need a tsconfig.json file in the root of your project. You can use this one to get started:

  {
    "compilerOptions": {
      "target": "es2017",
      "strict": true,
      "module": "es2015",
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "sourceMap": true,
      "skipLibCheck": true
    },
    "include": ["resources/js/**/*"]
  }

Airwire is fully installed.

Github repo: https://github.com/archtechx/airwire

The release blog post: https://archte.ch/blog/introducing-airwire

Samuel on Twitter: @samuelstancl

Spread the word!

Leave a Reply

Your email address will not be published. Required fields are marked *