@server/next 0.28.0 → 0.28.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@server/next",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "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

@@ -3,6 +3,7 @@ const entities = {
   "<": "&lt;",
   ">": "&gt;",
   '"': "&quot;",
+  "'": "&#39;",
 };
 
 const encode = (str = "") => {
@@ -40,8 +41,55 @@ const minifyCss = (str) =>
     .replace(/(\{) (\w)/g, "$1$2")
     .trim();
 
+const REACT_ELEMENT_TYPE = Symbol.for("react.element");
+
+const isReactElement = (val) =>
+  val !== null &&
+  typeof val === "object" &&
+  (val.$$typeof === REACT_ELEMENT_TYPE || // real React
+    ("type" in val && "props" in val)); // your test objects
+
+const resolve = (val) => {
+  while (typeof val === "function") val = val();
+  if (isReactElement(val)) {
+    val = jsx(val.type, val.props || {});
+  }
+  return val ?? "";
+};
+
+const renderChild = (child) => {
+  while (typeof child === "function") child = child();
+
+  if (Array.isArray(child)) {
+    return child.map(renderChild).join("");
+  }
+
+  if (isReactElement(child)) {
+    return resolve(jsx(child.type, child.props || {}));
+  }
+
+  if (typeof child === "string") return encode(child);
+  if (typeof child === "number") return String(child);
+
+  if (!isValidChild(child)) return "";
+
+  console.warn("Unknown child:", child);
+  return "";
+};
+
 const jsx = (tag, { children, ...props }) => {
-  if (typeof tag === "function") return tag({ children, ...props });
+  if (typeof tag === "function") {
+    return () => renderChild(tag({ children, ...props }));
+  }
+
+  // Handle React forwardRef objects: { render: fn }
+  if (
+    typeof tag === "object" &&
+    tag !== null &&
+    typeof tag.render === "function"
+  ) {
+    return () => renderChild(tag.render({ children, ...props }, null));
+  }
 
   if (tag === "script" && children) {
     const src = children;
@@ -58,11 +106,10 @@ 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)
+    .map((c) => (typeof c === "string" ? c : ""))
     .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>");
+  });
+});