@server/next 0.28.9 → 0.28.10

package/package.json

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

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)) {
@@ -133,7 +142,15 @@ 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;
 

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

@@ -537,3 +537,95 @@ describe("styles", () => {
     ).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>',
+    );
+  });
+});