fix(prerendering): async h() function

Co-authored-by: Adam Bradley <adamdbradley@users.noreply.github.com>

src/hydrate/platform/h-async.ts

@@ -0,0 +1,9 @@
+import * as d from '../../declarations';
+import { h } from '@runtime';
+
+export const hAsync = async (nodeName: any, vnodeData: any, ...children: d.ChildType[]) => {
+  if (children) {
+    children = await Promise.all(children);
+  }
+  return h(nodeName, vnodeData, ...children);
+};

src/hydrate/platform/index.ts

@@ -142,4 +142,33 @@ export const modeResolutionChain: d.ResolutionHandler[] = [];
 export { BUILD, NAMESPACE } from '@app-data';
 export { hydrateApp } from './hydrate-app';
 
-export * from '@runtime';
+export {
+  addHostEventListeners,
+  attachShadow,
+  defineCustomElement,
+  forceModeUpdate,
+  proxyCustomElement,
+  bootstrapLazy,
+  connectedCallback,
+  createEvent,
+  disconnectedCallback,
+  getAssetPath,
+  setAssetPath,
+  getConnect,
+  getContext,
+  getElement,
+  getValue,
+  setValue,
+  Host,
+  insertVdomAnnotations,
+  parsePropertyValue,
+  forceUpdate,
+  postUpdateComponent,
+  getRenderingRef,
+  proxyComponent,
+  renderVdom,
+  setMode,
+  getMode,
+} from '@runtime';
+
+export { hAsync as h } from './h-async';

src/runtime/update-component.ts

@@ -66,7 +66,7 @@ const dispatchHooks = (hostRef: d.HostRef, isInitialLoad: boolean) => {
   return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
 
-const updateComponent = (hostRef: d.HostRef, instance: any, isInitialLoad: boolean) => {
+const updateComponent = async (hostRef: d.HostRef, instance: any, isInitialLoad: boolean) => {
   // updateComponent
   const elm = hostRef.$hostElement$ as d.RenderNode;
   const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
@@ -86,7 +86,11 @@ const updateComponent = (hostRef: d.HostRef, instance: any, isInitialLoad: boole
       // looks like we've got child nodes to render into this host element
       // or we need to update the css class/attrs on the host element
       // DOM WRITE!
-      renderVdom(hostRef, callRender(hostRef, instance));
+      if (BUILD.hydrateServerSide) {
+        renderVdom(hostRef, await callRender(hostRef, instance));
+      } else {
+        renderVdom(hostRef, callRender(hostRef, instance));
+      }
     } else {
       elm.textContent = callRender(hostRef, instance);
     }

test/hello-world/src/components/hello-world.tsx

@@ -1,11 +1,16 @@
-import { Component } from '@stencil/core';
-import { HelloWorldText } from 'hello-world-text';
+import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'hello-world'
+  tag: 'hello-world',
 })
 export class HelloWorld {
   render() {
-    return HelloWorldText;
+    return <div>{getData()}</div>;
   }
 }
+
+const getData = async () => {
+  const rsp = await fetch('http://ionic.io/');
+  const txt = await rsp.text();
+  return txt;
+};