Implement fragment support

jsx/meta.json

@@ -1,6 +1,6 @@
 {
    "name": "@denreg-jsx",
-   "version": "0.1.1",
+   "version": "0.1.2",
    "description": "Denreg JSX renderer",
    "author": "Fabian Stamm <dev@fabianstamm.de>",
    "contributors": [],

jsx/mod.ts

@@ -12,7 +12,7 @@ declare namespace JSX {
 export { Fragment };
 
 export type Element = {
-  component: Component | string;
+  component: Component | string | typeof Fragment;
   props: any;
   children: any[];
 };
@@ -38,7 +38,10 @@ export async function renderSSR(element: Element | string): Promise<string> {
   if (typeof element === "string") return element;
   else if (typeof element.component === "string")
     return await renderHTML(element as Element);
-  else if (typeof element.component === "function")
+  else if (
+    typeof element.component === "function" ||
+    element.component === Fragment
+  )
     return await renderCustom(element as Element);
 
   console.warn("renderSSR: invalid element", element);
@@ -112,19 +115,29 @@ async function renderCustom(element: Element) {
   if (typeof element.component === "string")
     throw new Error("Internal consistency error");
 
-  const res = await Promise.resolve(
-    element.component(
-      {
-        ...element.props,
-        children: element.children,
-      },
-      element.children
-    )
-  );
+  if (element.component === Fragment) {
+    const ch = (
+      await Promise.all(
+        cleanChildren(element.children).map((child) => renderSSR(child))
+      )
+    ).join("");
 
-  const ch = (
-    await Promise.all(cleanChildren(res).map((child) => renderSSR(child)))
-  ).join("");
+    return ch;
+  } else {
+    const res = await Promise.resolve(
+      element.component(
+        {
+          ...element.props,
+          children: element.children,
+        },
+        element.children
+      )
+    );
 
-  return ch;
+    const ch = (
+      await Promise.all(cleanChildren(res).map((child) => renderSSR(child)))
+    ).join("");
+
+    return ch;
+  }
 }

registry/src/deps.ts

@@ -23,7 +23,7 @@ export { Marked } from "https://deno.hibas123.de/raw/markdown/mod.ts";
 
 import DS from "https://raw.githubusercontent.com/hibas123/dndb/master/mod.ts";
 
-import * as Pico from "https://deno.hibas123.de/raw/@denreg-jsx@0.1.1/mod.ts";
+import * as Pico from "https://deno.hibas123.de/raw/@denreg-jsx@0.1.2/mod.ts";
 
 export { Pico };