Merge pull request #11 from andersk/compatibility

Improve compatibility with other JSX engines

Author: cowboyd

html.ts

@@ -4,11 +4,13 @@ export type HTMLChild =
   | string
   | number
   | boolean
+  | undefined
+  | null
   | hast.Element
   | hast.Root
   | hast.Text;
 
-export type HTMLChildren = HTMLChild | Iterable<HTMLChild>;
+export type HTMLChildren = HTMLChild | Iterable<HTMLChildren>;
 
 export interface HTMLVoidElement extends HTMLElement {
   children?: never;

jsx-runtime.ts

@@ -4,9 +4,15 @@ import type * as svg from "./svg.ts";
 
 export type Element = hast.Element;
 
-export type JSXChild = string | number | boolean | JSXElement;
+export type JSXChild =
+  | string
+  | number
+  | boolean
+  | undefined
+  | null
+  | JSXElement;
 
-export type JSXChildren = JSXChild | JSXChild[];
+export type JSXChildren = JSXChild | JSXChildren[];
 
 export type JSXElement = hast.Element | hast.Root | hast.Text;
 
@@ -18,12 +24,12 @@ export type JSXComponentProps = Record<string, unknown> & {
 };
 
 export interface JSXComponent {
-  (props: JSXComponentProps): JSXElement;
+  (props: JSXComponentProps): JSXChildren;
 }
 
 export interface JSXElementConstructor {
   //deno-lint-ignore no-explicit-any
-  (...args: any[]): JSXElement;
+  (...args: any[]): JSXChildren;
 }
 
 declare global {
@@ -61,43 +67,47 @@ export function jsx(
       type: "element",
       tagName,
       properties: { ...properties, ...className },
-      children: read(children),
+      children: read(children).filter((child) => child.type !== "doctype"),
     };
   } else {
-    return type({ ...props, ...(key ? { key } : {}) });
+    return {
+      type: "root",
+      children: read(type({ ...props, ...(key ? { key } : {}) })),
+    };
   }
 }
 
 export const jsxs = jsx;
 export const jsxDEV = jsx;
 
-export function Fragment(
-  props: { children?: JSXChild | JSXChild[] },
-): hast.Root {
+export function Fragment(props: { children?: JSXChildren }): hast.Root {
   let { children = [] } = props;
   return {
     type: "root",
     children: read(children),
   };
 }
 
-function read(children?: JSXChild | JSXChild[]): (hast.Element | hast.Text)[] {
-  let nodes = Array.isArray(children) ? children : (children ? [children] : []);
-  return nodes.flatMap((child) => {
-    switch (typeof child) {
-      case "number":
-      case "boolean":
-      case "string":
-        return [{
-          type: "text",
-          value: String(child),
-        }];
-      default:
-        if (child.type === "root") {
-          return child.children as Array<hast.Element | hast.Text>;
-        } else {
-          return [child];
-        }
-    }
-  });
+function read(children?: JSXChildren): hast.RootContent[] {
+  switch (typeof children) {
+    case "undefined":
+    case "boolean":
+      return [];
+    case "number":
+    case "string":
+      return [{
+        type: "text",
+        value: String(children),
+      }];
+    default:
+      if (children === null) {
+        return [];
+      } else if (Array.isArray(children)) {
+        return children.flatMap(read);
+      } else if (children.type === "root") {
+        return children.children;
+      } else {
+        return [children];
+      }
+  }
 }

test/jsx.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it } from "jsr:@std/testing@^1/bdd";
 import { expect } from "jsr:@std/expect@^1";
 import { h } from "npm:hastscript@9.0.0";
+import type { JSXChild, JSXChildren } from "../jsx-runtime.ts";
 
 describe("JSX runtime", () => {
   it("generates simple tags", () => {
@@ -60,9 +61,24 @@ describe("JSX runtime", () => {
     );
   });
 
-  it("can embed boolean expressions inside", () => {
+  it("ignores boolean expressions inside", () => {
     expect(<title>{false} witness</title>).toEqual(
-      h("title", "false", " witness"),
+      h("title", " witness"),
+    );
+    expect(<title>{true} love</title>).toEqual(
+      h("title", " love"),
+    );
+  });
+
+  it("ignores undefined", () => {
+    expect(<title>{undefined} behavior</title>).toEqual(
+      h("title", " behavior"),
+    );
+  });
+
+  it("ignores null", () => {
+    expect(<title>{null} hypothesis</title>).toEqual(
+      h("title", " hypothesis"),
     );
   });
 
@@ -89,6 +105,12 @@ describe("JSX runtime", () => {
     expect(<ul>{...[1, 2, 3].map((i) => <li>{i}</li>)}</ul>).toEqual(
       h("ul", h("li", "1"), h("li", "2"), h("li", "3")),
     );
+    expect(
+      <ul>
+        <li>0</li>
+        {...[1, 2, 3].map((i) => <li>{i}</li>)}
+      </ul>,
+    ).toEqual(h("ul", h("li", "0"), h("li", "1"), h("li", "2"), h("li", "3")));
   });
 
   it("passes the key attribute", () => {
@@ -114,4 +136,17 @@ describe("JSX runtime", () => {
     //@ts-expect-error yo.
     expect(el.properties.className).toEqual("button");
   });
+
+  it("strips <!DOCTYPE> from element children", () => {
+    const root: JSXChild = { type: "root", children: [{ type: "doctype" }] };
+    expect(<>{root}</>).toEqual(root);
+    expect(<div>{root}</div>).toEqual(h("div"));
+  });
+
+  it("allows components returning primitives or arrays", () => {
+    const Id = ({ children }: { children?: JSXChildren }) => children;
+    expect(<Id />).toEqual(<></>);
+    expect(<Id>{1}</Id>).toEqual(<>{1}</>);
+    expect(<Id>s {1}</Id>).toEqual(<>s {1}</>);
+  });
 });