feat: render resolved string

Author: kt3k

deno.json

@@ -21,6 +21,7 @@
   },
   "imports": {
     "@b-fuze/deno-dom": "jsr:@b-fuze/deno-dom@^0.1.47",
-    "@std/assert": "jsr:@std/assert@^0.226.0"
+    "@std/assert": "jsr:@std/assert@^0.226.0",
+    "@std/async": "jsr:@std/async@^0.224.2"
   }
 }

deno.lock

@@ -47,7 +47,7 @@ export interface Context<EL = HTMLElement> {
 /** The component type */
 export type Component<EL extends HTMLElement> = (
   ctx: Context<EL>,
-) => string | undefined | void;
+) => string | undefined | void | PromiseLike<void | string>;
 
 /** The event handler type */
 export type EventHandler = (e: Event) => void;
@@ -195,6 +195,12 @@ export function register<EL extends HTMLElement>(
       const html = component(context);
       if (typeof html === "string") {
         el.innerHTML = html;
+      } else if (html && typeof html.then === "function") {
+        html.then((html) => {
+          if (typeof html === "string") {
+            el.innerHTML = html;
+          }
+        });
       }
     }
   };

mod.ts

@@ -1,6 +1,7 @@
 // Copyright 2022 Yoshiya Hinosawa. All rights reserved. MIT license.
 
 import { assert, assertEquals, assertExists, assertThrows } from "@std/assert";
+import { delay } from "@std/async";
 import "./dom_polyfill.ts";
 import { type Context, mount, register, unmount } from "./mod.ts";
 
@@ -393,3 +394,14 @@ Deno.test("Returned string from Component is rendered", () => {
   register(Component, name);
   assertEquals(queryByClass(name).innerHTML, "<p>hello</p>");
 });
+
+Deno.test("Resolved string from Component is rendered as innerHTML", async () => {
+  const name = randomName();
+  document.body.innerHTML = `<div class="${name}"><div>`;
+  function Component() {
+    return Promise.resolve("<p>hello</p>");
+  }
+  register(Component, name);
+  await delay(100);
+  assertEquals(queryByClass(name).innerHTML, "<p>hello</p>");
+});