fix: add back missing timeout attribute (#9)

* fix: add missing timeout attribute
marko-js · Oct 24, 2022 · 385f054 · 385f054
1 parent f6b45f8
commit 385f054
Show file tree

Hide file tree

Showing 28 changed files with 504 additions and 82 deletions.
diff --git a/src/components/micro-frame-slot/marko-tag.json b/src/components/micro-frame-slot/marko-tag.json
@@ -25,6 +25,14 @@
       }
     ]
   },
+  "@timeout": {
+    "type": "number",
+    "autocomplete": [
+      {
+        "description": "An idle timeout in ms after which the request is ended (default 30 seconds)"
+      }
+    ]
+  },
   "@catch <catch>": {
     "attributes": {},
     "autocomplete": [

diff --git a/src/components/micro-frame-sse/README.md b/src/components/micro-frame-sse/README.md
@@ -179,6 +179,15 @@ Flag indicate if the slot need to be streamed out-of-order. Please refer to [cli
 <micro-frame-slot from="..." slot="..." client-reorder />
 ```
 
+## `timeout` in slot
+
+A timeout in `ms` (defaults to 30s) that will prematurely abort the slot. This will trigger the `<@catch>` if provided.
+If set to `0` the request will not time out.
+
+```marko
+<micro-frame-slot src="..." name="..." timeout=0/>
+```
+
 ## `<@catch|err|>`
 
 An [attribute tag](https://markojs.com/docs/syntax/#attribute-tag) rendered when there is a network error or timeout.

diff --git a/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.0.html b/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.0.html
@@ -0,0 +1,16 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+/>
diff --git a/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.1.html b/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.1.html
@@ -0,0 +1,20 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+</div>
diff --git a/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.2.html b/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.2.html
@@ -0,0 +1,46 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+>
+  <noscript
+    id="GENERATED-1"
+  />
+</div>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  next chunk for slot_1
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-3"
+>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+non-reorder data
+<div
+  id="GENERATED-4"
+  style="display:none"
+>
+  <noscript
+    id="GENERATED-5"
+  />
+</div>
+<div
+  id="GENERATED-6"
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
+</script>
diff --git a/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.3.html b/...__/__snapshots__/micro-frame-sse/ssr-client-reorder-false/renders.expected/loading.3.html
@@ -0,0 +1,38 @@
+<div>
+  Host app
+</div>
+<div
+  data-src="embed"
+  id="GENERATED-0"
+/>
+<div
+  data-from="test"
+  data-slot="slot_1"
+  id="GENERATED-1"
+>
+  <p>
+    test_html for slot_1
+  </p>
+  next chunk for slot_1
+</div>
+<div
+  data-from="test"
+  data-slot="slot_2"
+  id="GENERATED-2"
+>
+  <p>
+    test_html for slot_2
+  </p>
+</div>
+non-reorder data
+<div
+  id="GENERATED-3"
+  style="display:none"
+/>
+<div
+  id="GENERATED-4"
+  style="display:none"
+/>
+<script>
+  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
+</script>
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.1.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.1.html
@@ -27,25 +27,4 @@
     id="GENERATED-5"
   />
 </div>
-<div
-  id="GENERATED-6"
-  style="display:none"
->
-  <noscript
-    id="GENERATED-7"
-  />
-</div>
-<div
-  id="GENERATED-8"
-  style="display:none"
->
-  <p>
-    test_html for slot_1
-  </p>
-  <noscript
-    id="GENERATED-9"
-  />
-</div>
-<script>
-  function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
-</script>
+non-reorder data
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.2.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.2.html
@@ -14,9 +14,6 @@
   data-slot="slot_1"
   id="GENERATED-2"
 >
-  <p>
-    test_html for slot_1
-  </p>
   <noscript
     id="GENERATED-3"
   />
@@ -30,14 +27,26 @@
     id="GENERATED-5"
   />
 </div>
+non-reorder data
 <div
   id="GENERATED-6"
   style="display:none"
-/>
+>
+  <noscript
+    id="GENERATED-7"
+  />
+</div>
 <div
-  id="GENERATED-7"
+  id="GENERATED-8"
   style="display:none"
-/>
+>
+  <p>
+    test_html for slot_1
+  </p>
+  <noscript
+    id="GENERATED-9"
+  />
+</div>
 <script>
   function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
 </script>
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.3.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.3.html
@@ -30,6 +30,7 @@
     id="GENERATED-5"
   />
 </div>
+non-reorder data
 <div
   id="GENERATED-6"
   style="display:none"
@@ -40,18 +41,4 @@
 />
 <script>
   function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b&lt;f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b&lt;f;b++)c(a[b])}};$af(0);$af(1)
-</script>
-<div
-  id="GENERATED-8"
-  style="display:none"
->
-  <p>
-    test_html for slot_2
-  </p>
-  <noscript
-    id="GENERATED-9"
-  />
-</div>
-<script>
-  $af(2)
 </script>
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.4.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.4.html
@@ -26,13 +26,11 @@
   data-slot="slot_2"
   id="GENERATED-4"
 >
-  <p>
-    test_html for slot_2
-  </p>
   <noscript
     id="GENERATED-5"
   />
 </div>
+non-reorder data
 <div
   id="GENERATED-6"
   style="display:none"
@@ -47,7 +45,14 @@
 <div
   id="GENERATED-8"
   style="display:none"
-/>
+>
+  <p>
+    test_html for slot_2
+  </p>
+  <noscript
+    id="GENERATED-9"
+  />
+</div>
 <script>
   $af(2)
 </script>
diff --git a/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.5.html b/..._tests__/__snapshots__/micro-frame-sse/ssr-client-reorder/renders.expected/loading.5.html
@@ -33,6 +33,7 @@
     id="GENERATED-5"
   />
 </div>
+non-reorder data
 <div
   id="GENERATED-6"
   style="display:none"
@@ -50,28 +51,4 @@
 />
 <script>
   $af(2)
-</script>
-<div
-  id="GENERATED-9"
-  style="display:none"
-/>
-<div
-  id="GENERATED-10"
-  style="display:none"
->
-  next chunk for slot_1
-  <noscript
-    id="GENERATED-11"
-  />
-</div>
-<div
-  id="GENERATED-12"
-  style="display:none"
-/>
-<div
-  id="GENERATED-13"
-  style="display:none"
-/>
-<script>
-  $af(3);$af(4);$af(5);$af(6)
 </script>