Merge branch 'piranha:main' into main

site.tmpl

@@ -89,14 +89,12 @@
 
 <div id="debug-requests" style="display: none;">
   Server Requests
-  <a class="show_show" href="#" ts-action="prevent, target #debug-requests, class+ show">↑ Show</a>
+  <a class="show_show" href="#" ts-action="prevent, target #debug-requests, class^ show">↑ Show</a>
   <a class="show_hide" href="#" ts-action="prevent, target #debug-requests, class- show">↓ Hide</a>
 
   <div class="columns">
-    <div class="column col-3">
-      <ol id="debug-timeline" reversed>
-      </ol>
-    </div>
+    <ol id="debug-timeline" class="column col-3" reversed>
+    </ol>
     <div id="debug-details" class="column col-9">
       <div class="d-hide">
       </div>
@@ -132,9 +130,11 @@
           var id = `debug${i++}`;
           window['debug-timeline'].insertAdjacentHTML(
             'afterbegin',
-            `<li><a style="cursor:pointer" rel="${id}" onclick="switchResponse('${id}')">
-                     <code><b>${method}</b> ${url}</code>
-               </a></li>`
+            // this uses concat instead of single string to avoid whitespace
+            // between tags - and this causes a spacing in the underline
+            `<li><a style="cursor:pointer" rel="${id}" onclick="switchResponse('${id}')">` +
+            `<code><b>${method}</b> ${url}</code>` +
+            `</a></li>`
           );
 
           var headers = '';

twinspark.js

@@ -500,7 +500,7 @@
 
   /**
    * Merge two sets of parameters into one
-   * @param {FormData|URLSearchParams} p1 Collection of parameters to be updated.
+   * @param {FormData} p1 Collection of parameters to be updated.
    * @param {FormData|URLSearchParams|Iterable} p2 Collection of parameters to be merged in.
    * @param {boolean=} removeEmpty Indicate if empty ('' or null) parameters from p2 should be removed.
    * @return FormData|URLSearchParams
@@ -1371,9 +1371,8 @@
       return opts;
     }
 
-    var issimple = (Array.from(body.entries())
-                    .every((x) => typeof x[1] === "string"));
-    if (!issimple) {
+    if (typeof body === "string" ||
+        !Array.from(body.entries()).every((x) => typeof x[1] === "string")) {
       opts.body = body;
       return opts;
     }
@@ -1390,9 +1389,21 @@
 
     var url = batch[0].url;
     var method = batch[0].method;
-    var data = batch.reduce(function(acc, req) {
-      return mergeParams(acc, req.opts.data);
-    }, new FormData());
+    var data;
+
+    let json = getattr(batch[0].el, 'ts-json');
+
+    if (json) {
+      if (batch.length > 1) {
+        throw extraerr('Cannot batch json requests', {batch});
+      }
+      data = json;
+      batch[0].opts.headers['Content-Type'] = "application/json";
+    } else {
+      data = batch.reduce(function(acc, req) {
+        return mergeParams(acc, req.opts.data);
+      }, new FormData());
+    }
 
     var qs = method == 'GET' ? new URLSearchParams(data).toString() : null;
     var body = method != 'GET' ? data : null;

www/api.md

@@ -23,6 +23,7 @@ title: API
 <tr><td><a href="ts-req-strategy/">ts-req-strategy</a></td>  <td>How to deal with multiple requests being generated</td></tr>
 <tr><td><a href="ts-req-history/">ts-req-history</a></td>    <td>Change URL after request</td></tr>
 <tr><td><a href="ts-data/">ts-data</a></td>                  <td>Additional data for request</td></tr>
+<tr><td><a href="ts-json/">ts-json</a></td>                  <td>As <code>ts-data</code>, but for JSON requests</td></tr>
 <tr><td><a href="ts-req-batch/">ts-req-batch</a></td>        <td>Combine multiple requests into a single one</td></tr>
 
 </table>

www/api/ts-json.md

@@ -0,0 +1,19 @@
+title: ts-json
+----
+
+# `ts-json` {.text-center}
+
+The `ts-json` attribute is designed to handle multi-level nested data
+structures in JSON format that are not possible with `ts-data`.
+
+When a request is triggered, TwinSpark will use the `ts-json` attribute
+to directly parse the JSON string from the originating element and will
+set the `Content-Type=application/json` request header.
+
+There are a few limitations to note with `ts-json` compared to `ts-data`:
+- Attributes under `ts-json` do not merge.
+  Each `ts-json` represents a standalone dataset.
+- Requests utilizing `ts-json` cannot be batched.
+
+
+{{ template "examples" . }}

www/api/ts-req.md

@@ -26,6 +26,7 @@ with help of [ts-swap-push]({{ $.Rel "/api/ts-swap-push/" }}).
 - [ts-req-strategy]({{ $.Rel "/api/ts-req-strategy/" }}) to deal with multiple requests from a single location.
 - [ts-req-history]({{ $.Rel "/api/ts-req-history/" }}) to change URL after request.
 - [ts-data]({{ $.Rel "/api/ts-data/" }}) to append data to a request.
+- [ts-json]({{ $.Rel "/api/ts-json/" }}) to append data as a JSON string.
 - [ts-req-batch]({{ $.Rel "/api/ts-req-batch/" }}) to combine multiple requests into a single one.
 
 

www/api/ts-swap.md

@@ -9,7 +9,7 @@ origin element. Can be one of the following keywords:
 <table class="table">
 <tr><th>Strategy</th> <th>Description</th></tr>
 
-<tr><td><code>replace</code></td>     <td>replace <a href="../ts-target/">target</a> element with an incoming element <small>(default)</small></td></tr>
+<tr><td><code>replace</code></td>     <td><small>(default)</small> replace <a href="../ts-target/">target</a> element with an incoming element</td></tr>
 <tr><td><code>inner</code></td>       <td>replaces target's children with an incoming element</td></tr>
 <tr><td><code>prepend</code></td>     <td>inserts incoming element as a first child of the target</td></tr>
 <tr><td><code>append</code></td>      <td>inserts incoming element as a last child of the target</td></tr>

www/examples/260-json.html

@@ -0,0 +1,35 @@
+id: json
+title: Request JSON API
+tags: ts-json
+----
+<p>
+    Simple <code>POST</code> request with JSON body.
+</p>
+
+<div class="card example">
+  <div class="card-header">
+    <h5 class="d-inline mr-2">Demo</h5>
+    <button class="btn btn-link btn-sm reset">Reset</button>
+    <button class="btn btn-link btn-sm source">View Source</button>
+  </div>
+
+  <p class="card-body">
+      <a href="/json"
+         ts-json="{&quot;user&quot;:{&quot;name&quot;:&quot;Sanya&quot;}}"
+         ts-req
+         ts-req-method="post">Send!</a>
+  </p>
+
+  <script>
+    XHRMock.post("/json", function(req, res) {
+      return res.status(200)
+      .body('<span>' + JSON.parse(req.body()).user.name + '</span>');
+    });
+    test(async (el, t) => {
+      el.$('a').click();
+      await t.delay(1);
+      let res = decodeURIComponent(el.$('span').innerText);
+      t.assert(res + ' == Sanya', res == 'Sanya');
+    });
+  </script>
+</div>

www/static/examples.js

@@ -96,6 +96,7 @@ window.addEventListener('popstate', _ => setTimeout(enableExamples, 16));
 
 /// Tests
 
+// this function is to write tests, see `www/examples/*` for example usage
 window.test = (function() {
   var TESTS = [];