@server/next 0.28.8 → 0.28.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@server/next",
-  "version": "0.28.8",
+  "version": "0.28.10",
   "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",
@@ -47,6 +47,7 @@
     "@types/bun": "^1.3.0",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.10.0",
+    "bun": "^1.3.13",
     "check-dts": "^0.8.2",
     "jest": "^29.7.0",
     "polystore": "^0.18.0",

package/readme.md

@@ -1 +1 @@
-# Server JS
+# Server JS [![test badge](https://github.com/franciscop/server-next/workflows/tests/badge.svg)](https://github.com/franciscop/server-next/actions)

package/src/jsx/jsx-runtime.js

@@ -1,4 +1,4 @@
-const entities = {
+const ENTITIES = {
   "&": "&",
   "<": "&lt;",
   ">": "&gt;",
@@ -6,23 +6,34 @@ const entities = {
   "'": "&#39;",
 };
 
-const encode = (str = "") => {
-  if (typeof str === "number") str = String(str);
-  if (typeof str !== "string") return "";
-  return str.replace(/[&<>"']/g, (tag) => entities[tag]);
-};
-
 const SELFCLOSE = new Set(
   "area,base,br,col,embed,hr,img,input,link,meta,source,track,wbr".split(","),
 );
 
+const SVG_TAGS = new Set([
+  "svg",
+  "circle",
+  "rect",
+  "path",
+  "line",
+  "g",
+  "text",
+  "defs",
+]);
+
 const REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
 
-const altAttrs = {
+const ALT_NAMES = {
   classname: "class",
   htmlfor: "for",
 };
 
+const encode = (str = "") => {
+  if (typeof str === "number") str = String(str);
+  if (typeof str !== "string") return "";
+  return str.replace(/[&<>"']/g, (tag) => ENTITIES[tag]);
+};
+
 // valid primitives only — null, undefined, false, true are all skipped
 const isValidChild = (child) =>
   child != null && child !== false && child !== true;
@@ -53,7 +64,6 @@ const renderChild = (child) => {
 
   if (typeof child === "function") {
     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);
@@ -63,7 +73,6 @@ const renderChild = (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)) {
@@ -99,7 +108,9 @@ const jsx = (tag, { children, ...props } = {}) => {
     const parts = Array.isArray(children) ? children : [children];
     const content = parts
       .filter(isValidChild)
-      .map((c) => (typeof c === "string" ? c : typeof c === "number" ? String(c) : ""))
+      .map((c) =>
+        typeof c === "string" ? c : typeof c === "number" ? String(c) : "",
+      )
       .join("");
     children = raw(content);
   }
@@ -131,10 +142,28 @@ const jsx = (tag, { children, ...props } = {}) => {
     .filter(([k, v]) => !/on[A-Z]/.test(k) && typeof v !== "function")
     .filter(([, v]) => v !== false)
     .map(([k, v]) => {
-      const key = altAttrs[k.toLowerCase()] || encode(k);
+      const preserveSvg = k === "viewBox" || k === "preserveAspectRatio";
+
+      const key =
+        ALT_NAMES[k.toLowerCase()] ||
+        (SVG_TAGS.has(tag)
+          ? preserveSvg
+            ? k
+            : k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
+          : encode(k));
 
       if (v === true) return key;
 
+      if (k === "style" && v && typeof v === "object") {
+        v = Object.entries(v)
+          .filter(([, val]) => val != null)
+          .map(([prop, val]) => {
+            const cssKey = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+            return `${cssKey}:${val}`;
+          })
+          .join(";");
+      }
+
       const value =
         typeof v === "string" || typeof v === "number" ? encode(String(v)) : "";
 

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

@@ -142,9 +142,13 @@ describe("text encoding", () => {
 
   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>",
-    );
+    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", () => {
@@ -171,9 +175,7 @@ describe("attribute encoding", () => {
   });
 
   it("encodes ' in attribute values", () => {
-    expect(<div title={"it's"}></div>).toRender(
-      '<div title="it&#39;s"></div>',
-    );
+    expect(<div title={"it's"}></div>).toRender('<div title="it&#39;s"></div>');
   });
 
   it("maps className to class", () => {
@@ -316,9 +318,9 @@ describe("style tag", () => {
   });
 
   it("preserves child combinator in selectors", () => {
-    expect(
-      <style>{":not(pre) > code { background: none; }"}</style>,
-    ).toRender("<style>:not(pre)>code{background:none}</style>");
+    expect(<style>{":not(pre) > code { background: none; }"}</style>).toRender(
+      "<style>:not(pre)>code{background:none}</style>",
+    );
   });
 
   it("preserves sibling combinators in selectors", () => {
@@ -328,21 +330,21 @@ describe("style tag", () => {
   });
 
   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>");
+    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>");
+    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>");
+    expect(<style>{"a { content: '</style>'; }"}</style>).toRender(
+      "<style>a{content:'<\\/style>'}</style>",
+    );
   });
 });
 
@@ -368,9 +370,9 @@ describe("dangerouslySetInnerHTML", () => {
   });
 
   it("does not render dangerouslySetInnerHTML as an attribute", () => {
-    expect(
-      <div dangerouslySetInnerHTML={{ __html: "hi" }}></div>,
-    ).toRender("<div>hi</div>");
+    expect(<div dangerouslySetInnerHTML={{ __html: "hi" }}></div>).toRender(
+      "<div>hi</div>",
+    );
   });
 });
 
@@ -411,18 +413,14 @@ describe("function components", () => {
 
   it("encodes text returned by a component", () => {
     const Unsafe = () => "<script>alert(1)</script>";
-    expect(<Unsafe />).toRender(
-      "&lt;script&gt;alert(1)&lt;/script&gt;",
-    );
+    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>",
-    );
+    expect(<Button>click me</Button>).toRender("<button>click me</button>");
   });
 
   it("passes props to render function", () => {
@@ -487,3 +485,147 @@ describe("React element interop", () => {
     expect(<Deep />).toRender("<div><ul><li>one</li><li>two</li></ul></div>");
   });
 });
+describe("styles", () => {
+  it("stringifies style object into CSS", () => {
+    expect(
+      <div
+        style={{
+          display: "inline-block",
+          padding: "2px 8px",
+          borderRadius: "4px",
+        }}
+      />,
+    ).toRender(
+      '<div style="display:inline-block;padding:2px 8px;border-radius:4px"></div>',
+    );
+  });
+
+  it("handles numbers and mixed style values", () => {
+    expect(
+      <div
+        style={{
+          fontSize: 12,
+          lineHeight: 1.5,
+          fontWeight: "600",
+        }}
+      />,
+    ).toRender(
+      '<div style="font-size:12;line-height:1.5;font-weight:600"></div>',
+    );
+  });
+
+  it("converts camelCase CSS properties", () => {
+    expect(
+      <div
+        style={{
+          backgroundColor: "#fff",
+          marginTop: "10px",
+        }}
+      />,
+    ).toRender('<div style="background-color:#fff;margin-top:10px"></div>');
+  });
+
+  it("ignores null and undefined style values", () => {
+    expect(
+      <div
+        style={{
+          color: "red",
+          padding: null,
+          margin: undefined,
+        }}
+      />,
+    ).toRender('<div style="color:red"></div>');
+  });
+});
+
+describe("svg attributes", () => {
+  it("converts strokeWidth to stroke-width", () => {
+    expect(
+      <svg>
+        <circle strokeWidth="2" />
+      </svg>,
+    ).toRender('<svg><circle stroke-width="2"></circle></svg>');
+  });
+
+  it("converts fillOpacity to fill-opacity", () => {
+    expect(
+      <svg>
+        <rect fillOpacity="0.5" />
+      </svg>,
+    ).toRender('<svg><rect fill-opacity="0.5"></rect></svg>');
+  });
+
+  it("converts strokeLinecap to stroke-linecap", () => {
+    expect(
+      <svg>
+        <line strokeLinecap="round" />
+      </svg>,
+    ).toRender('<svg><line stroke-linecap="round"></line></svg>');
+  });
+
+  it("does NOT break viewBox casing", () => {
+    expect(
+      <svg viewBox="0 0 100 100">
+        <rect />
+      </svg>,
+    ).toRender('<svg viewBox="0 0 100 100"><rect></rect></svg>');
+  });
+
+  it("handles mixed SVG attributes correctly", () => {
+    expect(
+      <svg viewBox="0 0 10 10">
+        <circle strokeWidth="1" fillOpacity="0.2" />
+      </svg>,
+    ).toRender(
+      '<svg viewBox="0 0 10 10"><circle stroke-width="1" fill-opacity="0.2"></circle></svg>',
+    );
+  });
+
+  it("keeps viewBox unchanged", () => {
+    expect(
+      <svg viewBox="0 0 100 100">
+        <rect />
+      </svg>,
+    ).toRender('<svg viewBox="0 0 100 100"><rect></rect></svg>');
+  });
+
+  it("does NOT convert viewBox to view-box", () => {
+    expect(<svg viewBox="0 0 10 10"></svg>).toRender(
+      '<svg viewBox="0 0 10 10"></svg>',
+    );
+  });
+
+  it("converts strokeWidth to stroke-width", () => {
+    expect(
+      <svg>
+        <circle strokeWidth="2" />
+      </svg>,
+    ).toRender('<svg><circle stroke-width="2"></circle></svg>');
+  });
+
+  it("converts fillOpacity to fill-opacity", () => {
+    expect(
+      <svg>
+        <rect fillOpacity="0.5" />
+      </svg>,
+    ).toRender('<svg><rect fill-opacity="0.5"></rect></svg>');
+  });
+
+  it("converts strokeLinecap to stroke-linecap", () => {
+    expect(
+      <svg>
+        <line strokeLinecap="round" />
+      </svg>,
+    ).toRender('<svg><line stroke-linecap="round"></line></svg>');
+  });
+
+  it("handles mixed SVG attributes correctly", () => {
+    expect(
+      <svg viewBox="0 0 10 10">
+        <circle strokeWidth="1" fillOpacity="0.2" />
+      </svg>,
+    ).toRender(
+      '<svg viewBox="0 0 10 10"><circle stroke-width="1" fill-opacity="0.2"></circle></svg>',
+    );
+  });
+});