@server/next 0.28.5 → 0.28.7

package/package.json

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

@@ -9,7 +9,7 @@ const entities = {
 const encode = (str = "") => {
   if (typeof str === "number") str = String(str);
   if (typeof str !== "string") return "";
-  return str.replace(/[&<>"]/g, (tag) => entities[tag]);
+  return str.replace(/[&<>"']/g, (tag) => entities[tag]);
 };
 
 const SELFCLOSE = new Set(
@@ -20,39 +20,52 @@ const REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
 
 const altAttrs = {
   classname: "class",
+  htmlfor: "for",
 };
 
-// valid primitives only
-const isValidChild = (child) => child === 0 || child === "" || !!child;
-
-// CSS helpers
-const escapeCSS = (value) => String(value).replace(/[<>&"'`]/g, "\\$&");
+// valid primitives only — null, undefined, false, true are all skipped
+const isValidChild = (child) =>
+  child != null && child !== false && child !== true;
 
 const minifyCss = (str) =>
   str
+    .replace(/\/\*[\s\S]*?\*\//g, "")
     .replace(/\s+/g, " ")
-    .replace(/\/\*[^*]*\*\//g, "")
+    .replace(/\s*([{}:;,>~+])\s*/g, "$1")
+    .replace(/;}/g, "}")
+    .replace(/<\/style>/gi, "<\\/style>")
     .trim();
 
-// React element detection (safe for your custom objects too)
+// React element detection (safe for custom objects too)
 const isReactElement = (val) =>
   val !== null && typeof val === "object" && "type" in val && "props" in val;
 
-// 🔥 CRITICAL: single-pass renderer (NO recursion cycles)
+// Marker for raw (pre-escaped) content that bypasses HTML encoding
+const RAW = Symbol("raw");
+const raw = (str) => ({ [RAW]: String(str) });
+
 const renderChild = (child) => {
-  if (child == null || child === false) return "";
+  if (child == null || child === false || child === true) return "";
 
   if (Array.isArray(child)) {
     return child.map(renderChild).join("");
   }
 
   if (typeof child === "function") {
-    return renderChild(child());
+    const result = child();
+    // Strings returned by functions are pre-rendered HTML — don't re-encode them
+    if (result == null || result === false || result === true) return "";
+    if (typeof result === "string") return result;
+    if (typeof result === "number") return String(result);
+    return renderChild(result);
   }
 
-  if (typeof child === "string") return child;
+  if (typeof child === "string") return encode(child);
   if (typeof child === "number") return String(child);
 
+  // Raw marker bypasses encoding (used by script, style, dangerouslySetInnerHTML)
+  if (typeof child === "object" && RAW in child) return child[RAW];
+
   if (isReactElement(child)) {
     return jsx(child.type, child.props || {})();
   }
@@ -62,7 +75,7 @@ const renderChild = (child) => {
 };
 
 const jsx = (tag, { children, ...props } = {}) => {
-  // 🔥 Fragment (Symbol-safe)
+  // Fragment (Symbol-safe)
   if (tag === REACT_FRAGMENT_TYPE || tag === Fragment) {
     return () => renderChild(children);
   }
@@ -81,21 +94,24 @@ const jsx = (tag, { children, ...props } = {}) => {
     return () => renderChild(tag.render({ children, ...props }, null));
   }
 
-  // script special-case
-  if (tag === "script" && children) {
-    const src = children;
-    children = () => src;
+  // script: raw content (JS must not be HTML-encoded)
+  if (tag === "script" && children != null) {
+    const parts = Array.isArray(children) ? children : [children];
+    const content = parts
+      .filter(isValidChild)
+      .map((c) => (typeof c === "string" ? c : typeof c === "number" ? String(c) : ""))
+      .join("");
+    children = raw(content);
   }
 
-  // style special-case
+  // style: minified raw content
   if (tag === "style" && typeof children === "string") {
-    const src = minifyCss(escapeCSS(children));
-    children = () => src;
+    children = raw(minifyCss(children));
   }
 
   // dangerouslySetInnerHTML
   if (props?.dangerouslySetInnerHTML) {
-    children = () => props.dangerouslySetInnerHTML.__html;
+    children = raw(props.dangerouslySetInnerHTML.__html ?? "");
   }
 
   // normalize children
@@ -104,7 +120,7 @@ const jsx = (tag, { children, ...props } = {}) => {
     .map(renderChild)
     .join("");
 
-  // 🔥 CRITICAL SAFETY GATE (prevents Symbol/string crash)
+  // safety gate (prevents Symbol/unknown-type crash)
   if (!tag || typeof tag !== "string") {
     return () => flatChildren;
   }
@@ -120,7 +136,7 @@ const jsx = (tag, { children, ...props } = {}) => {
       if (v === true) return key;
 
       const value =
-        typeof v === "string" || typeof v === "number" ? encode(v) : "";
+        typeof v === "string" || typeof v === "number" ? encode(String(v)) : "";
 
       return `${key}="${value}"`;
     })
@@ -137,6 +153,6 @@ const jsx = (tag, { children, ...props } = {}) => {
   return () => `${doctype}<${tag}${attrStr}>${flatChildren}</${tag}>`;
 };
 
-const Fragment = "";
+const Fragment = Symbol.for("react.fragment");
 
 export { jsx, jsx as jsxs, jsx as jsxDEV, Fragment };

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

@@ -56,6 +56,7 @@ describe("jsx", () => {
   it("can render a pre with indented text", () => {
     expect(<pre>{`  indented`}</pre>).toRender("<pre>  indented</pre>");
   });
+
   it("can render a pre inside a div", () => {
     expect(
       <div>
@@ -63,6 +64,189 @@ describe("jsx", () => {
       </div>,
     ).toRender("<div><pre>line1\nline2</pre></div>");
   });
+
+  it("does NOT render the <pre>", () => {
+    expect(<code>{"<pre>"}</code>).toRender("<code>&lt;pre&gt;</code>");
+  });
+});
+
+describe("text encoding", () => {
+  it("encodes < and > to prevent XSS", () => {
+    expect(<div>{"<script>alert(1)</script>"}</div>).toRender(
+      "<div>&lt;script&gt;alert(1)&lt;/script&gt;</div>",
+    );
+  });
+
+  it("encodes & in text content", () => {
+    expect(<div>{"a & b"}</div>).toRender("<div>a &amp; b</div>");
+  });
+
+  it('encodes " in text content', () => {
+    expect(<div>{'say "hi"'}</div>).toRender("<div>say &quot;hi&quot;</div>");
+  });
+
+  it("encodes ' in text content", () => {
+    expect(<div>{"it's"}</div>).toRender("<div>it&#39;s</div>");
+  });
+
+  it("renders 0 as a child", () => {
+    expect(<div>{0}</div>).toRender("<div>0</div>");
+  });
+
+  it("renders positive integers", () => {
+    expect(<div>{42}</div>).toRender("<div>42</div>");
+  });
+
+  it("renders floats", () => {
+    expect(<div>{3.14}</div>).toRender("<div>3.14</div>");
+  });
+
+  it("renders negative numbers", () => {
+    expect(<div>{-1}</div>).toRender("<div>-1</div>");
+  });
+
+  it("renders nothing for null", () => {
+    expect(<div>{null}</div>).toRender("<div></div>");
+  });
+
+  it("renders nothing for undefined", () => {
+    expect(<div>{undefined}</div>).toRender("<div></div>");
+  });
+
+  it("renders nothing for false", () => {
+    expect(<div>{false}</div>).toRender("<div></div>");
+  });
+
+  it("renders nothing for true", () => {
+    expect(<div>{true}</div>).toRender("<div></div>");
+  });
+
+  it("renders conditional content", () => {
+    const show = true;
+    expect(<div>{show && <span>yes</span>}</div>).toRender(
+      "<div><span>yes</span></div>",
+    );
+    const hide = false;
+    expect(<div>{hide && <span>no</span>}</div>).toRender("<div></div>");
+  });
+
+  it("renders multiple children in order", () => {
+    expect(
+      <ul>
+        <li>a</li>
+        <li>b</li>
+        <li>c</li>
+      </ul>,
+    ).toRender("<ul><li>a</li><li>b</li><li>c</li></ul>");
+  });
+
+  it("renders array children", () => {
+    const items = ["x", "y", "z"];
+    expect(<span>{items.map((i) => <b key={i}>{i}</b>)}</span>).toRender(
+      "<span><b>x</b><b>y</b><b>z</b></span>",
+    );
+  });
+
+  it("treats string returned from a function child as raw HTML", () => {
+    const getHtml = () => "<b>bold</b>";
+    expect(<div>{getHtml}</div>).toRender("<div><b>bold</b></div>");
+  });
+});
+
+describe("attribute encoding", () => {
+  it("encodes < and > in attribute values", () => {
+    expect(<div title="<b>hi</b>"></div>).toRender(
+      '<div title="&lt;b&gt;hi&lt;/b&gt;"></div>',
+    );
+  });
+
+  it("encodes & in attribute values", () => {
+    expect(<div title="a & b"></div>).toRender('<div title="a &amp; b"></div>');
+  });
+
+  it('encodes " in attribute values', () => {
+    expect(<div title={`say "hi"`}></div>).toRender(
+      '<div title="say &quot;hi&quot;"></div>',
+    );
+  });
+
+  it("encodes ' in attribute values", () => {
+    expect(<div title={"it's"}></div>).toRender(
+      '<div title="it&#39;s"></div>',
+    );
+  });
+
+  it("maps className to class", () => {
+    expect(<div className="foo bar"></div>).toRender(
+      '<div class="foo bar"></div>',
+    );
+  });
+
+  it("maps htmlFor to for", () => {
+    expect(<label htmlFor="email"></label>).toRender(
+      '<label for="email"></label>',
+    );
+  });
+
+  it("supports data-* attributes", () => {
+    expect(<div data-id="42" data-name="test"></div>).toRender(
+      '<div data-id="42" data-name="test"></div>',
+    );
+  });
+
+  it("supports aria-* attributes", () => {
+    expect(<button aria-label="close" aria-expanded={false}></button>).toRender(
+      '<button aria-label="close"></button>',
+    );
+  });
+
+  it("supports numeric attribute values", () => {
+    expect(<input tabIndex={3} />).toRender('<input tabIndex="3" />');
+  });
+
+  it("strips function-valued attributes", () => {
+    expect(<div onFoo={() => {}} ref={() => {}}></div>).toRender("<div></div>");
+  });
+});
+
+describe("self-closing tags", () => {
+  it("renders br", () => {
+    expect(<br />).toRender("<br />");
+  });
+
+  it("renders hr", () => {
+    expect(<hr />).toRender("<hr />");
+  });
+
+  it("renders img with attributes", () => {
+    expect(<img src="cat.png" alt="A cat" />).toRender(
+      '<img src="cat.png" alt="A cat" />',
+    );
+  });
+
+  it("renders input with type and name", () => {
+    expect(<input type="text" name="q" />).toRender(
+      '<input type="text" name="q" />',
+    );
+  });
+
+  it("renders link tag", () => {
+    expect(<link rel="stylesheet" href="style.css" />).toRender(
+      '<link rel="stylesheet" href="style.css" />',
+    );
+  });
+
+  it("renders meta tag", () => {
+    expect(<meta name="description" content="hello" />).toRender(
+      '<meta name="description" content="hello" />',
+    );
+  });
+
+  it("renders source tag", () => {
+    expect(<source src="video.mp4" type="video/mp4" />).toRender(
+      '<source src="video.mp4" type="video/mp4" />',
+    );
+  });
 });
 
 describe("fragments", () => {
@@ -88,6 +272,169 @@ describe("fragments", () => {
   it("handles empty fragments", () => {
     expect(<></>).toRender("");
   });
+
+  it("encodes text inside a fragment", () => {
+    expect(<>{"<b>"}</>).toRender("&lt;b&gt;");
+  });
+});
+
+describe("script tag", () => {
+  it("renders script content without encoding", () => {
+    expect(<script>{"const x = 1 < 2 && 3 > 0;"}</script>).toRender(
+      "<script>const x = 1 < 2 && 3 > 0;</script>",
+    );
+  });
+
+  it("renders script with src attribute and no children", () => {
+    expect(<script src="app.js"></script>).toRender(
+      '<script src="app.js"></script>',
+    );
+  });
+
+  it("renders empty script tag", () => {
+    expect(<script></script>).toRender("<script></script>");
+  });
+});
+
+describe("style tag", () => {
+  it("renders style content", () => {
+    expect(<style>{"body { color: red; }"}</style>).toRender(
+      "<style>body{color:red}</style>",
+    );
+  });
+
+  it("minifies whitespace in style content", () => {
+    expect(
+      <style>{"body {\n  color:   red;\n  margin: 0;\n}"}</style>,
+    ).toRender("<style>body{color:red;margin:0}</style>");
+  });
+
+  it("strips CSS comments", () => {
+    expect(
+      <style>{"/* reset */ body { margin: 0; } /* end */"}</style>,
+    ).toRender("<style>body{margin:0}</style>");
+  });
+
+  it("preserves child combinator in selectors", () => {
+    expect(
+      <style>{":not(pre) > code { background: none; }"}</style>,
+    ).toRender("<style>:not(pre)>code{background:none}</style>");
+  });
+
+  it("preserves sibling combinators in selectors", () => {
+    expect(
+      <style>{"h2 + p { margin: 0; } h2 ~ p { color: red; }"}</style>,
+    ).toRender("<style>h2+p{margin:0}h2~p{color:red}</style>");
+  });
+
+  it("removes spaces around braces, colons, and semicolons", () => {
+    expect(
+      <style>{"a { color : red ; font-size : 1em ; }"}</style>,
+    ).toRender("<style>a{color:red;font-size:1em}</style>");
+  });
+
+  it("removes trailing semicolon before closing brace", () => {
+    expect(
+      <style>{"p { margin: 0; padding: 0; }"}</style>,
+    ).toRender("<style>p{margin:0;padding:0}</style>");
+  });
+
+  it("does not break </style> injection", () => {
+    expect(
+      <style>{"a { content: '</style>'; }"}</style>,
+    ).toRender("<style>a{content:'<\\/style>'}</style>");
+  });
+});
+
+describe("dangerouslySetInnerHTML", () => {
+  it("renders raw HTML without encoding", () => {
+    expect(
+      <div dangerouslySetInnerHTML={{ __html: "<b>bold</b>" }}></div>,
+    ).toRender("<div><b>bold</b></div>");
+  });
+
+  it("does not double-encode HTML entities", () => {
+    expect(
+      <div dangerouslySetInnerHTML={{ __html: "&amp; &lt;" }}></div>,
+    ).toRender("<div>&amp; &lt;</div>");
+  });
+
+  it("preserves script tags in raw HTML", () => {
+    expect(
+      <div
+        dangerouslySetInnerHTML={{ __html: "<script>alert(1)</script>" }}
+      ></div>,
+    ).toRender("<div><script>alert(1)</script></div>");
+  });
+
+  it("does not render dangerouslySetInnerHTML as an attribute", () => {
+    expect(
+      <div dangerouslySetInnerHTML={{ __html: "hi" }}></div>,
+    ).toRender("<div>hi</div>");
+  });
+});
+
+describe("function components", () => {
+  it("renders a simple function component", () => {
+    const Greeting = ({ name }) => <p>Hello, {name}!</p>;
+    expect(<Greeting name="world" />).toRender("<p>Hello, world!</p>");
+  });
+
+  it("renders a component with children", () => {
+    const Box = ({ children }) => <div className="box">{children}</div>;
+    expect(
+      <Box>
+        <span>inside</span>
+      </Box>,
+    ).toRender('<div class="box"><span>inside</span></div>');
+  });
+
+  it("renders nested components", () => {
+    const Inner = () => <em>inner</em>;
+    const Outer = () => (
+      <div>
+        <Inner />
+      </div>
+    );
+    expect(<Outer />).toRender("<div><em>inner</em></div>");
+  });
+
+  it("renders a component returning null", () => {
+    const Empty = () => null;
+    expect(<Empty />).toRender("");
+  });
+
+  it("renders a component returning a string", () => {
+    const Text = () => "hello";
+    expect(<Text />).toRender("hello");
+  });
+
+  it("encodes text returned by a component", () => {
+    const Unsafe = () => "<script>alert(1)</script>";
+    expect(<Unsafe />).toRender(
+      "&lt;script&gt;alert(1)&lt;/script&gt;",
+    );
+  });
+});
+
+describe("forwardRef-like components", () => {
+  it("renders an object with a render function", () => {
+    const Button = { render: ({ children }) => <button>{children}</button> };
+    expect(<Button>click me</Button>).toRender(
+      "<button>click me</button>",
+    );
+  });
+
+  it("passes props to render function", () => {
+    const Input = {
+      render: ({ type, placeholder }) => (
+        <input type={type} placeholder={placeholder} />
+      ),
+    };
+    expect(<Input type="email" placeholder="you@example.com" />).toRender(
+      '<input type="email" placeholder="you@example.com" />',
+    );
+  });
 });
 
 describe("React element interop", () => {