@server/next 0.28.8 → 0.28.9

package/package.json

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

@@ -99,7 +99,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);
   }
@@ -135,6 +137,16 @@ const jsx = (tag, { children, ...props } = {}) => {
 
       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,55 @@ 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>');
+  });
+});