@server/next 0.28.0 → 0.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@server/next",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "A fully-fledged web server with routing, file uploads, sessions, static files, schema validation, websockets, testing, etc.",
   "homepage": "https://server-js.com/",
   "repository": "https://github.com/franciscop/server-next.git",

package/src/jsx/jsx-runtime.js

@@ -40,8 +40,35 @@ const minifyCss = (str) =>
     .replace(/(\{) (\w)/g, "$1$2")
     .trim();
 
+const isReactElement = (val) =>
+  val !== null && typeof val === "object" && "type" in val && "props" in val;
+
+const renderChild = (child) => {
+  if (!isValidChild(child)) return "";
+  if (typeof child === "function") return child();
+  if (typeof child === "number") return String(child);
+  if (typeof child === "string") return encode(child);
+  if (Array.isArray(child)) return child.flat().map(renderChild).join("");
+  if (isReactElement(child)) {
+    const result = jsx(child.type, child.props || {});
+    return typeof result === "function" ? result() : result ?? "";
+  }
+  return "";
+};
+
 const jsx = (tag, { children, ...props }) => {
-  if (typeof tag === "function") return tag({ children, ...props });
+  if (typeof tag === "function") {
+    const result = tag({ children, ...props });
+    if (isReactElement(result)) return jsx(result.type, result.props || {});
+    return result ?? (() => "");
+  }
+
+  // Handle React forwardRef objects: { render: fn }
+  if (typeof tag === "object" && tag !== null && typeof tag.render === "function") {
+    const result = tag.render({ children, ...props }, null);
+    if (isReactElement(result)) return jsx(result.type, result.props || {});
+    return result ?? (() => "");
+  }
 
   if (tag === "script" && children) {
     const src = children;
@@ -58,11 +85,9 @@ const jsx = (tag, { children, ...props }) => {
   }
 
   if (!isValidChild(children)) children = [];
-  if (typeof children === "string") children = [children];
 
-  children = (Array.isArray(children) ? children : [children])
-    .flat()
-    .map((c) => (typeof c === "function" ? c() : encode(c)))
+  children = (Array.isArray(children) ? children.flat() : [children])
+    .map(renderChild)
     .join("");
 
   if (!tag) return () => children;

package/src/jsx/jsx-runtime.test.jsx

@@ -45,3 +45,53 @@ describe("jsx", () => {
     );
   });
 });
+
+describe("React element interop", () => {
+  // Simulate a component built with React's jsx runtime, which returns plain
+  // objects { type, props } instead of @server/next functions
+  const reactEl = (type, props = {}) => ({ type, props });
+
+  it("renders a React element returned from a function component", () => {
+    const Greeting = () => reactEl("h1", { children: "Hello" });
+    expect(<Greeting />).toRender("<h1>Hello</h1>");
+  });
+
+  it("renders nested React elements", () => {
+    const Card = () =>
+      reactEl("div", {
+        children: [
+          reactEl("h2", { children: "Title" }),
+          reactEl("p", { children: "Body" }),
+        ],
+      });
+    expect(<Card />).toRender("<div><h2>Title</h2><p>Body</p></div>");
+  });
+
+  it("renders React elements as children of a native element", () => {
+    const child = reactEl("strong", { children: "bold" });
+    expect(<p>{child}</p>).toRender("<p><strong>bold</strong></p>");
+  });
+
+  it("renders a mix of React elements and plain strings as children", () => {
+    const em = reactEl("em", { children: "world" });
+    expect(<p>Hello {em}!</p>).toRender("<p>Hello <em>world</em>!</p>");
+  });
+
+  it("renders a React element with attributes", () => {
+    const Link = () => reactEl("a", { href: "https://example.com", children: "click" });
+    expect(<Link />).toRender(`<a href="https://example.com">click</a>`);
+  });
+
+  it("renders deeply nested React elements", () => {
+    const Deep = () =>
+      reactEl("div", {
+        children: reactEl("ul", {
+          children: [
+            reactEl("li", { children: "one" }),
+            reactEl("li", { children: "two" }),
+          ],
+        }),
+      });
+    expect(<Deep />).toRender("<div><ul><li>one</li><li>two</li></ul></div>");
+  });
+});