Render await blocks

Author: Timothy Johnson

dest/background.js

@@ -21,7 +21,7 @@ function instrument(str) {
         ${post}`
     )
     .replace(
-      /(\/\/.+?({(?:#|:).+})?\s+function\s+create_((?:each|if|else)_block(?:_\d+?)?(?:\$\d+?)?)\s*\(\s*ctx\s*\)\s*{[^]+?)return\s+({[^]+?}\s*;)\s*}/g,
+      /(\/\/.+?({(?:#|:).+})?\s+function\s+create_((?:each|if|else|pending|then|catch)_block(?:_\d+?)?(?:\$\d+?)?)\s*\(\s*ctx\s*\)\s*{[^]+?)return\s+({[^]+?}\s*;)\s*}/g,
       (_, fn, source, blockId, block) => `${fn}
         const block = ${block}
         document.dispatchEvent(new CustomEvent("SvelteRegisterBlock", { detail: { block, blockId: '${blockId}', source: "${

dest/privilegedContent.js

@@ -221,12 +221,14 @@
     }
   })
 
+  let lastPromiseParent = null
   document.addEventListener('SvelteRegisterBlock', e => {
     const mountFn = e.detail.block.m
     const patchFn = e.detail.block.p
     const detachFn = e.detail.block.d
     const blockId = e.detail.blockId
     e.detail.block.m = (target, anchor) => {
+      const tagName = blockId.substring(0, blockId.indexOf('_'))
       let node = nodeMap.get(blockId)
       if (!node) {
         node = {
@@ -236,8 +238,11 @@
             ctx: e.detail.ctx,
             source: e.detail.source
           },
-          tagName: blockId.substring(0, blockId.indexOf('_')),
-          parentComponent: currentComponent
+          tagName: tagName == 'pending' ? 'await' : tagName,
+          parentComponent:
+            tagName == 'then' || tagName == 'catch'
+              ? currentComponent || lastPromiseParent
+              : currentComponent
         }
         nodeMap.set(blockId, node)
         addNode(node, target, anchor)
@@ -263,6 +268,8 @@
 
     e.detail.block.d = detaching => {
       const node = nodeMap.get(blockId)
+      if (node.tagName == 'await') lastPromiseParent = node.parentComponent
+
       nodeMap.delete(node.id)
       nodeMap.delete(node.detail)
       nodeMap.delete(blockId)

test/src/Blocks.svelte

@@ -3,6 +3,10 @@
 
   let value = 0
   setTimeout(() => (value = 1), 0)
+
+  let promise = new Promise((resolve, reject) =>
+    setTimeout(() => resolve(5), 2000)
+  )
 </script>
 
 <div>
@@ -15,9 +19,47 @@
     <span>{value}</span>
   {/each}
 
-  <br />
+  <div>
+    {#if value > 10}
+      Value is over 10
+    {:else if value > 5}Value is over 5{:else}Value is under 5{/if}
+  </div>
+
+  <div>
+    {#await promise}
+      waiting for the promise to resolve...
+    {:then value}
+      Promise resolved to {value}
+    {:catch error}
+      Something went wrong {error.message}
+    {/await}
+  </div>
+  <div>
+    {#await new Promise(() => {})}
+      Pending forever
+    {:then value}
+      Something went wrong {value}
+    {:catch error}
+      Something went wrong {error.message}
+    {/await}
+  </div>
 
-  {#if value > 10}
-    Value is over 10
-  {:else if value > 5}Value is over 5{:else}Value is under 5{/if}
+  <div>
+    {#await Promise.resolve(5)}
+      Something went wrong
+    {:then value}
+      Promise resolved to {value}
+    {:catch error}
+      Something went wrong {error.message}
+    {/await}
+  </div>
+  <div>
+    {#await Promise.reject('rejected')}
+      Something went wrong
+    {:then value}
+      Something went wrong {value}
+    {:catch error}
+      Should reject {error}
+    {/await}
+  </div>
 </div>