Extend alpine-ajax for JSON APIs?

[fchtngr]

Hey! 👋

I've been using alpine-ajax for HTML responses and it's great! I recently built a custom directive focused specifically on JSON API requests and thought it might be interesting to share.

The idea: While alpine-ajax handles HTML responses beautifully, many apps also need to work with JSON APIs. My plugin (x-req) provides a declarative way to handle JSON requests with similar Alpine-friendly syntax. Fetch data from an API and use alpine to render it (e.g. s-show, x-if, x-for etc.)

Example:

<div x-data="{ 
  loading: false, 
  post: null 
}">
  <button x-req="/api/posts/1"
          @x-req:before="loading = true"
          @x-req:after="loading = false"
          @x-req:ok="post = $event.detail"
          @x-req:err="console.error($event.detail.error)"
          :disabled="loading">
    <span x-show="!loading">Load Post</span>
    <span x-show="loading">Loading...</span>
  </button>
  
  <div x-show="post">
    <h3 x-text="post?.title"></h3>
    <p x-text="post?.body"></p>
  </div>
</div>

Would this be interesting as part of the alpine-ajax ecosystem? The plugin would then be able to handle both HTML and JSON responses. Or is it out of scope for alpine-ajax and I just continue developing it as a separate alpine plugin?

Repo if you want to take a look: https://github.com/fchtngr/alpine-req

Anyway, would love to hear your thoughts!

[imacrayon]

Cool! I’ve been considering exposing more of the Alpine AJAX internal API so even if this solution isn’t absorbed into Alpine AJAX maybe it can all run on the same underlying code