Data fetching++

[DrSensor]

Inspired from htmx but use any arbitrary data format for data binding instead of swapping html.

Note
When linking JSON data, the format is determined by http header N-Data-Format with the value is either column or row.

<link -let=str href=./string.js>
.
.
<table -let=tab -load.data=table.csv
  -keyfmt=str.kebabcase
  @scrollbottom=$reload
  $reload.param="page=[@scrollbottom.count]
                 count=[tab.#initialRow]"
  $reload.header="
    X-Table-From: profile
    X-Table-Select: name, location, bod
  ">
  <tr>
    <th -map=str.lastWord
        -filter=str.isAlphabet>Name</th>
    <th>Location</th>
    <th -key=bod>Birth Day</th>
  </tr>
  <!-- default template and action-target pair
       either template or attributes can be omitted -->
  <template $reload.action=clone
            $reload.action.target.self>
    <tr>
      <td ~ #text=tab.name></td>
      <td ~ #text=tab.location></td>
      <td ~ #text=tab.bod></td>
    </tr>
  </template>
</table>

Note
For single data (not table), the value of N-Data-Format is either record or entry.

<label id=item -let=my -load.data=/data
  -header="
    {GET} Accept: text/json; charset=utf-8

    {POST PUT PATCH}
    Content-Type: text/json

    {*} X-Request-From: [my.name]"

  $send.method=PUT
  $send-request.param="user=[my.name~>str.snakecase]"

  $update.method=PATCH
  $update.param="formatkey=snakecase"

  $reload.method=GET
  -load.method=GET>

  name: <input type=text ~ 
    .value="my.name<~>str.capitalize">
</label>

<!-- the default trigger for $<act> attribute is @click when used on <button> -->

<button disabled ~ !disabled
  $reload=#item
  @click=debounce:$reload>
  Reload
</button>

<button disabled ~ !disabled 
  $update=#item @click=$update
  $update.toggle=disabled>
  Update
</button>

<button disabled ~ !disabled 
  $send=#item
  -request.0=/notify/user
  -request.1=/notify/group
  @click="$send $send-request">
  Force Update
</button>

Note
Those paired http methods are the default, everything else is custom

Note
Sometimes N-Data-Format can be inferred based on the data shape itself.

Use <link> to handle multiple data.

<ul id=panel -load.data -keyfmt=str.kebabcase>
  <link -let=my type=text/json href=/user -ignore="$reload $send">
  <link -let=my type=text/json href=/resource -ignore="[POST] [PUT]">

  <li>Name<input type=text ~ @change=set:my.name>
  <li>Project<input type=text ~ @change=set:my.repo>
</ul>

<button disabled ~ !disabled
  $reload=#panel>
  Reload [GET] multiple data
</button>

<button disabled ~ !disabled 
  $update=#panel
  $update.toggle=[#self.disabled]>
  Update [POST] multiple data
</button>

<button disabled ~ !disabled
  $send=#item
  -request=/notify/user>
  Force Update [POST] multiple data
</button>

In that example, each <link> is a record. However, it also applicable on table too (i.e via html attribute type=text/csv or response header N-Data-Format: column) which need <template> to render each <li>.

[DrSensor]

I'm thinking to support swapping html too but it may require morphdom. Maybe this case should be handled by <go-to> or <morph-to> element #12 rather than specifying it as additional attributes 🤔

---

EDIT: Apparently there is separate issue for that 😅 #29

[DrSensor]

TODO:

• think on a syntax for how to trigger %action when sequence of events have been met. For example, reload data after mouseleave if button has been clicked
• give purpose on <data> element akin to <th> something similar to <th> but without <table> 🤔
• integrate with microdata model
  1. bind element value that has itemprop attribute
  2. group them based on itemscope attribute via -let="<ident>"
  3. send the item to server on trigger (e.g button click)
• cases on client-side paginated <table>, <ul>, etc
• batch request (example). Browser FormData only know multipart/form-data, so don't pursue multipart/mixed (caveat) and just use multipart/form-data 🤔 (where each item is Content-Type: application/http)

[DrSensor]

Most likely gonna change:

• -load.data into -itemsrc
• $update and friends into #item.update and so on

Hopefully this make the attribute name reflect the microdata model pattern 🤲

[DrSensor]

About batch request, I think this might work

const form = new FormData()
form.append(uuid, new Blob(
  req_toHTTP1_str(
    new Request(...)).toWellFormed(),
  { type: "application/http" }
))

fetch(url, {
  method: "POST",
  headers,
  cache: "no-store",
  body: form,
  signal: abort.signal,
})

[DrSensor]

Although this use GAS (Google Apps Script), not Web API, at least it give a general idea how to do batch request
https://github.com/tanaikech/BatchRequest/blob/master/BatchRequests.js#L234,