@server/next 0.44.1 → 0.45.0

package/index.d.ts

@@ -1,4 +1,5 @@
 import * as http from 'http';
+import { Readable } from 'node:stream';
 export { default as kv } from 'polystore';
 export { default as bucket } from 'bucket';
 
@@ -9,6 +10,7 @@ type LimitOptions = {
 };
 
 type CookieOptions = string | string[] | Cookie | Cookie[] | null;
+type SendBody = SerializableValue | JSX.Element | Uint8Array | ReadableStream | Readable | Response | Reply$1 | BucketFile | Promise<SendBody>;
 interface ResponseData {
     headers: Headers;
     status?: number;
@@ -22,10 +24,10 @@ declare class Reply$1 {
     headers(key: string | Record<string, string | string[]>, value?: string | string[]): this;
     cache(value: CacheOption): this;
     cookies(key: string | Record<string, CookieOptions>, value?: CookieOptions): this;
-    json(body: unknown): Response;
-    redirect(path: string): Response;
+    json(body: unknown): Promise<Response>;
+    redirect(path: string): Promise<Response>;
     file(path: string | BucketFile): Promise<Response>;
-    send(body?: string | Buffer | ReadableStream | any): Response;
+    send(input?: SendBody): Promise<Response>;
 }
 type Params<K extends keyof Reply$1> = Reply$1[K] extends (...args: infer A) => any ? A : never;
 declare const status: (...args: Params<"status">) => Reply$1;
@@ -34,25 +36,23 @@ declare const type: (...args: Params<"type">) => Reply$1;
 declare const cache: (...args: Params<"cache">) => Reply$1;
 declare const download: (...args: Params<"download">) => Reply$1;
 declare const cookies: (...args: Params<"cookies">) => Reply$1;
-declare const send: (...args: Params<"send">) => Response;
-declare const json: (...args: Params<"json">) => Response;
+declare const send: (...args: Params<"send">) => Promise<Response>;
+declare const json: (...args: Params<"json">) => Promise<Response>;
 declare const file: (...args: Params<"file">) => Promise<Response>;
-declare const redirect: (...args: Params<"redirect">) => Response;
+declare const redirect: (...args: Params<"redirect">) => Promise<Response>;
 
 type Reply = ReturnType<typeof status>;
 type Method = "get" | "post" | "put" | "patch" | "delete" | "head" | "options" | "socket";
 type ContextTypes = {
-    session?: any;
     user?: any;
     params?: any;
     query?: any;
     body?: any;
 };
 type Field<C, K extends keyof ContextTypes, Fallback> = K extends keyof C ? SchemaOutput<C[K], C[K]> : Fallback;
-declare namespace JSX {
+declare namespace JSX$1 {
     interface Element {
-        type: any;
-        props: any;
+        (): string;
     }
     interface IntrinsicElements {
         [elem: string]: any;
@@ -203,6 +203,7 @@ type AuthOption = `${Strategy}:${Provider}` | {
     strategy: Strategy;
     providers?: Provider | Provider[];
     users?: StoreSource;
+    sessions?: StoreSource;
     redirect?: string;
     onProfile?: (raw: any, provider: Provider) => ProfileUser | Promise<ProfileUser>;
     onLogin?: (loginUser: AuthUser, existingUser: AuthUser | null, ctx: Context) => ProfileUser | Promise<ProfileUser>;
@@ -214,6 +215,7 @@ type AuthSettings = {
     providers: Provider[];
     strategy: Strategy;
     users: KVStore;
+    sessions: KVStore;
     onProfile?: (raw: any, provider: Provider) => ProfileUser | Promise<ProfileUser>;
     onLogin?: (loginUser: AuthUser, existingUser: AuthUser | null, ctx: Context) => ProfileUser | Promise<ProfileUser>;
     onUser: <T = AuthUser>(user: T, ctx: Context) => T | Promise<T>;
@@ -256,7 +258,6 @@ type Options = {
     secret?: string;
     public?: string | Bucket;
     uploads?: string | Bucket | UploadOptions;
-    sessions?: StoreSource;
     cors?: CorsOptions;
     auth?: AuthOption;
     openapi?: boolean | string | {
@@ -279,8 +280,6 @@ type Settings = {
     uploads?: ({
         bucket: Bucket;
     } & LimitOptions) | null;
-    sessions: KVStore;
-    sessionsDefault?: boolean;
     cors?: CorsSettings;
     auth?: AuthSettings;
     openapi?: {
@@ -339,7 +338,6 @@ type Context<C extends ContextTypes = {}> = {
     time?: Time;
     socket?: WebSocket;
     sockets?: WebSocket[];
-    session: Field<C, "session", Record<string, any>>;
     user?: Field<C, "user", Record<string, any>>;
     init: number;
     app: Server;
@@ -351,7 +349,7 @@ type Context<C extends ContextTypes = {}> = {
 type InlineReply = Response | Reply | BucketFile | {
     body: string;
     headers?: Headers;
-} | SerializableValue | JSX.Element | Buffer | ReadableStream;
+} | SerializableValue | JSX$1.Element | Buffer | ReadableStream;
 type Body = InlineReply;
 type Middleware<C extends ContextTypes = {}> = (ctx: Context<C>) => InlineReply | Promise<InlineReply> | void | Promise<void>;
 
@@ -373,7 +371,7 @@ declare class ServerError extends Error {
 declare const TypedServerError: typeof ServerError & ServerErrorConstructor;
 
 declare global {
-    var env: Record<string, any>;
+    var env: Record<string, string | undefined>;
 }
 
 type Fn<C extends ContextTypes> = (ctx: Context<C>) => ReturnType<Middleware>;
@@ -440,7 +438,7 @@ declare class ValidationError extends StatusError {
 declare class Server<C extends ContextTypes = {}> extends Router<C> {
     settings: Settings;
     platform: Platform;
-    sockets: any[];
+    sockets: WebSocket[];
     websocket: any;
     port?: number;
     constructor(options?: Options);

package/index.js

@@ -49,8 +49,6 @@ ServerError_default.extend({
     status: 400,
     message: "Missing the OAuth 'code' in the request body"
   },
-  SESSION_JWT: "The `jwt` strategy is stateless, so there is no `ctx.session` (tried '{key}'). Use the `token` strategy for server-side sessions, or `cookie` for browsers",
-  SESSION_GUEST: "No `ctx.session` for this request (tried '{key}'): the `token` strategy carries the session in the Authorization header, and this request has none. Sign in first, or use the `cookie` strategy for guest sessions",
   AUTH_INVALID_HEADER: {
     status: 401,
     message: "Invalid authorization header {type}, must send 'Bearer {TOKEN}' (with space)"
@@ -799,7 +797,7 @@ function isReadableStream(obj) {
 
 // src/reply.ts
 var EXPIRED2 = (/* @__PURE__ */ new Date(0)).toUTCString();
-var Reply = class {
+var Reply = class _Reply {
   res;
   constructor() {
     this.res = {
@@ -870,10 +868,12 @@ var Reply = class {
   }
   async file(path) {
     if (typeof path !== "string") {
-      if (!await path.exists()) return this.status(404).send();
+      if (!await path.exists()) return new Response(null, { status: 404 });
       return this.type(fileType(path)).send(path.stream());
     }
-    if (/(?:^|[\\/])\.\.(?:[\\/]|$)/.test(path)) return this.status(404).send();
+    if (/(?:^|[\\/])\.\.(?:[\\/]|$)/.test(path)) {
+      return new Response(null, { status: 404 });
+    }
     try {
       const fs = await import("fs");
       const ext = path.split(".").pop();
@@ -882,23 +882,55 @@ var Reply = class {
       return this.type(ext).send(stream);
     } catch (error) {
       if (error.code === "ENOENT" || error.code === "EISDIR") {
-        return this.status(404).send();
+        return new Response(null, { status: 404 });
       }
       throw error;
     }
   }
-  send(body = "") {
+  // Accepts everything a route can return, so `send(x)` and `return x` agree.
+  // Async because a bucket file has to be read before its status is known;
+  // routes await whatever they return, so this is invisible in normal use.
+  async send(input = "") {
     const { status: status2 = 200, headers: headers2 } = this.res;
+    let body = input;
     if (status2 === 101 || status2 === 204 || status2 === 205 || status2 === 304) {
       return new Response(null, { status: status2, headers: headers2 });
     }
     if (body === null) body = "";
+    if (typeof body?.then === "function") body = await body;
     if (typeof body === "function") body = body();
     if (typeof body?.then === "function") {
       throw new Error(
-        "send() received a promise, likely an async component. Await it first, or return it from the route, which resolves it for you."
+        "Cannot render an async component: components must be synchronous. Await the data before rendering and pass it in as props."
       );
     }
+    if (body instanceof _Reply) body = await body.send();
+    if (body instanceof Response) {
+      const merged = new Headers(body.headers);
+      for (const [key, value] of headers2) {
+        if (key === "set-cookie") continue;
+        merged.set(key, value);
+      }
+      for (const cookie of headers2.getSetCookie?.() ?? []) {
+        merged.append("set-cookie", cookie);
+      }
+      if (body.url && /^(br|gzip)$/.test(merged.get("content-encoding") || "")) {
+        merged.delete("content-encoding");
+      }
+      return new Response(body.body, {
+        status: this.res.status ?? body.status,
+        headers: merged
+      });
+    }
+    if (body && typeof body.stream === "function" && typeof body.bytes === "function" && typeof body.exists === "function" && typeof body.name === "string") {
+      return this.file(body);
+    }
+    if (body instanceof Blob) {
+      if (!headers2.get("content-type") && body.type) {
+        headers2.set("content-type", body.type);
+      }
+      return new Response(body, { status: status2, headers: headers2 });
+    }
     if (typeof body === "string") {
       if (!headers2.get("content-type")) {
         headers2.set("content-type", isHtml(body) ? mimes_default.html : mimes_default.text);
@@ -924,6 +956,12 @@ var Reply = class {
     if (isReadableStream(body)) {
       return new Response(toWeb(body), { status: status2, headers: headers2 });
     }
+    if (!Array.isArray(body) && body?.[Symbol.iterator]) {
+      return new Response(iteratorToReadable(body), { status: status2, headers: headers2 });
+    }
+    if (body?.[Symbol.asyncIterator]) {
+      return new Response(iteratorAsyncToReadable(body), { status: status2, headers: headers2 });
+    }
     if (!headers2.get("content-type")) {
       headers2.set("content-type", "application/json");
     }
@@ -1039,48 +1077,11 @@ function findSessionId(ctx) {
   return ctx.cookies.session || void 0;
 }
 
-// src/middle/session.ts
-var loaded = /* @__PURE__ */ new WeakMap();
-function noSession(error) {
-  const target = {};
-  return new Proxy(target, {
-    get(target2, key) {
-      if (typeof key === "symbol" || key === "then") return target2[key];
-      throw error(String(key));
-    },
-    set(target2, key, value) {
-      if (typeof key === "symbol") {
-        target2[key] = value;
-        return true;
-      }
-      throw error(String(key));
-    }
-  });
-}
-async function session(ctx) {
-  const strategy = ctx.options.auth?.strategy;
-  if (strategy?.includes("jwt")) {
-    ctx.session = noSession((key) => ServerError_default.SESSION_JWT({ key }));
-    return;
-  }
-  const id = findSessionId(ctx);
-  if (!id && strategy?.includes("token")) {
-    ctx.session = noSession((key) => ServerError_default.SESSION_GUEST({ key }));
-    return;
-  }
-  ctx.session = id && await ctx.options.sessions.get(id) || {};
-  loaded.set(ctx, { id, data: JSON.stringify(ctx.session) });
-}
-
 // src/auth/finishLogin.ts
 async function finishLogin(ctx, input, opts = {}) {
   const settings = ctx.options.auth;
   const { strategy, onLogin, onUser, onToken } = settings;
   const key = String(input.key);
-  if (!strategy.includes("jwt") && !loaded.has(ctx)) {
-    ctx.session = {};
-    loaded.set(ctx, { id: void 0, data: "{}" });
-  }
   const auth2 = {
     user: key,
     provider: input.provider,
@@ -1106,12 +1107,10 @@ async function finishLogin(ctx, input, opts = {}) {
     assertUser(exposed, "onUser");
     return status(201).json({ ...exposed, token });
   }
-  const prev = loaded.get(ctx);
-  if (prev?.id) await ctx.options.sessions.del(prev.id);
+  const prev = findSessionId(ctx);
+  if (prev) await settings.sessions.del(prev);
   const id = createId();
-  Object.assign(ctx.session, auth2);
-  await ctx.options.sessions.set(id, ctx.session);
-  loaded.set(ctx, { id, data: JSON.stringify(ctx.session) });
+  await settings.sessions.set(id, auth2);
   if (strategy.includes("token")) {
     const exposed = await onUser(user, ctx);
     assertUser(exposed, "onUser");
@@ -1631,6 +1630,7 @@ function parseAuthOptions(auth2) {
   const onUser = auth2.onUser || defaultOnUser;
   const onToken = auth2.onToken || defaultOnUser;
   const users = auth2.users ? toStore(auth2.users) : null;
+  const sessions = auth2.sessions ? toStoreExpiring(auth2.sessions, "1w") : null;
   return {
     strategy,
     providers: list,
@@ -1640,7 +1640,8 @@ function parseAuthOptions(auth2) {
     onUser,
     onToken,
     onLogout,
-    users
+    users,
+    sessions
   };
 }
 
@@ -1830,7 +1831,8 @@ function config(options = {}) {
   const level = raw === true ? "info" : raw === false ? void 0 : raw;
   const log = createLogger(level);
   const settings = {
-    port: options.port || env2.PORT || 3e3,
+    // `env.PORT` is a string, so coerce it: `settings.port` is a number
+    port: options.port || Number(env2.PORT) || 3e3,
     secret: options.secret || env2.SECRET || `unsafe-${createId()}`,
     log,
     // How request bodies are read: parsed into ctx.body by default; `raw` keeps
@@ -1838,11 +1840,7 @@ function config(options = {}) {
     parser: options.parser ?? "parse",
     // Secure-by-default response headers + trustProxy for ctx.ip. `false` turns
     // the added headers off; see resolveSecurity for the defaults.
-    security: resolveSecurity(options.security),
-    // Sessions: one record per device, exposed as ctx.session. Anything
-    // polystore accepts works; raw sources (a Map, a Redis client) get a 1w
-    // expiry, a built store is honored as-is, prefix and expiry included.
-    sessions: toStoreExpiring(options.sessions ?? /* @__PURE__ */ new Map(), "1w")
+    security: resolveSecurity(options.security)
   };
   if (options.cache !== void 0) settings.cache = options.cache;
   options.cors = options.cors || env2.CORS || null;
@@ -1885,10 +1883,10 @@ function config(options = {}) {
   settings.public = publicDir ? bucket(publicDir) : null;
   settings.uploads = resolveUploads(options.uploads);
   const production = env2.NODE_ENV === "production";
-  const defaulted = options.sessions == null;
-  settings.sessionsDefault = defaulted;
   if (options.auth || env2.AUTH) {
-    settings.auth = parseAuthOptions(options.auth || env2.AUTH || null);
+    settings.auth = parseAuthOptions(
+      options.auth || env2.AUTH || null
+    );
   }
   if (settings.auth) {
     if (!settings.auth.users) {
@@ -1899,10 +1897,13 @@ function config(options = {}) {
       }
       settings.auth.users = toStore(/* @__PURE__ */ new Map());
     }
-    if (production && defaulted && !settings.auth.strategy.includes("jwt")) {
-      throw new Error(
-        "Auth in production needs a persistent `sessions` store, like sessions: kv(redis).prefix('session:')."
-      );
+    if (!settings.auth.sessions && !settings.auth.strategy.includes("jwt")) {
+      if (production) {
+        throw new Error(
+          "Auth in production needs a persistent `sessions` store, like auth: { ..., sessions: kv(redis).prefix('session:') }."
+        );
+      }
+      settings.auth.sessions = toStoreExpiring(/* @__PURE__ */ new Map(), "1w");
     }
   }
   if (settings.auth?.strategy.includes("jwt") && settings.secret.startsWith("unsafe-")) {
@@ -1928,7 +1929,6 @@ function config(options = {}) {
   }
   if (settings.public) log.message("public", loc(options.public));
   if (settings.uploads) log.message("uploads", loc(options.uploads));
-  if (options.sessions) log.message("sessions", "enabled");
   if (settings.cors) {
     const origin = settings.cors.origin === true ? "*" : String(settings.cors.origin);
     log.message("cors", origin);
@@ -2038,74 +2038,17 @@ function getMachine() {
 }
 
 // src/parseResponse.ts
-var warned = false;
-var warnDefault = () => {
-  if (warned) return;
-  warned = true;
-  console.warn(
-    "[server:sessions] Using the default in-memory session store in production: sessions are lost on restart and not shared across instances. Configure one with sessions: kv(redis).prefix('session:')."
-  );
-};
 async function parseResponse(out, ctx) {
   if (!out && typeof out !== "string") return null;
   if (typeof out === "function") {
     out = await out(ctx);
-  }
-  if (out && typeof out.send === "function" && out.res?.headers instanceof Headers) {
-    out = out.send();
-  }
-  if (out instanceof Blob) {
-    out = new Response(out, { headers: { "Content-Type": out.type } });
-  }
-  if (out && typeof out.stream === "function" && typeof out.bytes === "function" && typeof out.exists === "function" && typeof out.name === "string") {
-    if (!await out.exists()) {
-      out = new Response(null, { status: 404 });
-    } else {
-      const type2 = fileType(out);
-      out = new Response(
-        out.stream(),
-        type2 ? { headers: { "content-type": type2 } } : void 0
-      );
-    }
-  }
-  if (out instanceof ReadableStream) {
-    out = new Response(out);
-  }
-  if (out instanceof Uint8Array) {
-    out = new Response(out);
+    if (!out && typeof out !== "string") return null;
   }
   if (typeof out === "number") {
-    out = new Response(void 0, { status: out });
+    out = new Response(null, { status: out });
   }
-  if (typeof out === "string") {
-    const type2 = isHtml(out) ? mimes_default.html : mimes_default.text;
-    out = new Response(out, {
-      headers: {
-        "content-type": type2,
-        "content-length": String(Buffer.byteLength(out))
-      }
-    });
-  }
-  if (out?.constructor === Object || Array.isArray(out)) {
-    out = json(out);
-  }
-  if (out[Symbol.iterator]) {
-    out = new Response(iteratorToReadable(out));
-  }
-  if (out[Symbol.asyncIterator] && !(out instanceof Response)) {
-    out = new Response(iteratorAsyncToReadable(out));
-  }
-  if (out instanceof Response && out.url && out.body) {
-    out = new Response(out.body, {
-      status: out.status,
-      headers: out.headers
-    });
-    if (/^(br|gzip)$/.test(out.headers.get("content-encoding") || "")) {
-      out.headers.delete("content-encoding");
-    }
-  }
-  if (!(out instanceof Response)) {
-    throw new Error(`Invalid response type ${out}`);
+  if (!(out instanceof Response) || out.url) {
+    out = await send(out);
   }
   applyCors(out, ctx);
   applySecurity(out, ctx);
@@ -2113,27 +2056,6 @@ async function parseResponse(out, ctx) {
   if (ctx.time?.times?.length > 1) {
     out.headers.set("Server-Timing", ctx.time.headers());
   }
-  const prev = loaded.get(ctx);
-  if (prev && JSON.stringify(ctx.session ?? {}) !== prev.data) {
-    if (ctx.options.sessionsDefault && ctx.platform.production) {
-      warnDefault();
-    }
-    let id = prev.id;
-    if (!id) {
-      id = createId();
-      out.headers.append(
-        "set-cookie",
-        createCookies("session", {
-          value: id,
-          path: "/",
-          httpOnly: true,
-          secure: ctx.platform.production,
-          sameSite: "Lax"
-        })
-      );
-    }
-    ctx.options.sessions.set(id, ctx.session);
-  }
   return out;
 }
 
@@ -2472,14 +2394,10 @@ async function getJwtUser(ctx) {
   return exposed;
 }
 async function getAuthSession(ctx) {
-  if (loaded.has(ctx)) {
-    const session3 = ctx.session;
-    return session3?.user ? session3 : void 0;
-  }
   const id = findSessionId(ctx);
   if (!id) return;
-  const session2 = await ctx.options.sessions.get(id);
-  return session2?.user ? session2 : void 0;
+  const session = await ctx.options.auth.sessions.get(id);
+  return session?.user ? session : void 0;
 }
 async function getUser(ctx) {
   if (!ctx.options.auth) return;
@@ -2504,10 +2422,8 @@ async function getUser(ctx) {
 async function logout(ctx) {
   const { strategy } = ctx.options.auth;
   if (!strategy.includes("jwt")) {
-    const prev = loaded.get(ctx);
-    if (prev?.id) await ctx.options.sessions.del(prev.id);
-    ctx.session = {};
-    loaded.set(ctx, { id: void 0, data: "{}" });
+    const prev = findSessionId(ctx);
+    if (prev) await ctx.options.auth.sessions.del(prev);
   }
   if (ctx.options.auth.onLogout) await ctx.options.auth.onLogout(ctx);
   if (strategy.includes("token") || strategy.includes("jwt")) {
@@ -3034,7 +2950,6 @@ async function createNode(req, app, signal = new AbortController().signal) {
     headers: headers2,
     cookies: cookies2,
     signal,
-    session: {},
     init,
     app,
     ip: clientIp(headers2, {
@@ -3075,7 +2990,6 @@ async function createWinter(req, app, server2) {
     headers: headers2,
     cookies: cookies2,
     signal: req.signal,
-    session: {},
     init,
     app,
     ip: clientIp(headers2, {
@@ -3326,7 +3240,6 @@ var Server = class extends Router {
     app.use(timer);
     if (this.settings.cors) app.use(preflight);
     app.use(assets);
-    app.use(session);
     if (this.settings.auth) {
       auth(app);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@server/next",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "description": "A fully-fledged web server with routing, file uploads, sessions, static files, schema validation, websockets, testing, etc.",
   "homepage": "https://server-js.com/",
   "repository": "github:franciscop/server-next",
@@ -25,7 +25,8 @@
   "types": "index.d.ts",
   "files": [
     "index.d.ts",
-    "src/jsx/"
+    "src/jsx/*.js",
+    "src/jsx/jsx-runtime.d.ts"
   ],
   "exports": {
     ".": "./index.js",
@@ -45,6 +46,7 @@
     "menu": {
       "Documentation": "/documentation",
       "Tutorials": "/tutorials",
+      "Donate": "https://www.paypal.com/paypalme/franciscopresencia/19",
       "Github": "https://github.com/franciscop/server-next"
     },
     "documentation": {

package/readme.md

@@ -15,16 +15,24 @@ export default server({ uploads: './uploads' })
   .post('/avatar', (ctx) => ctx.body.avatar.path);
 ```
 
-Key-value stores and file storage come included, so `sessions` work out of the box and `uploads` takes a folder path. For Redis, S3 and the rest, pass the client straight in:
+Key-value stores and file storage come included, so logins work out of the box and `uploads` takes a folder path. For Redis, S3 and the rest, pass the client straight in:
 
 ```js
-import server, { bucket } from '@server/next';
+import server, { bucket, kv } from '@server/next';
 import { createClient } from 'redis';
 
-const sessions = createClient({ url });
+const redis = kv(createClient({ url }));
 const uploads = bucket.S3('my-bucket', { id, key });
 
-export default server({ sessions, uploads });
+export default server({
+  uploads,
+  auth: {
+    strategy: 'cookie',
+    providers: ['github'],
+    users: redis.prefix('user:'),
+    sessions: redis.prefix('session:'),
+  },
+});
 ```
 
 See the [full documentation](https://serverjs.io/documentation).

package/src/jsx/jsx-runtime.d.ts

@@ -1,12 +1,31 @@
-export declare function jsx(type: any, props: any, key?: any): any;
-export declare function jsxs(type: any, props: any, key?: any): any;
-export declare function jsxDEV(type: any, props: any, key?: any): any;
-export declare const Fragment: unique symbol;
+// What a JSX tag can be: an intrinsic name, a Fragment, a function component,
+// or an object exposing `render` (the shape forwardRef-style components take)
+type Tag =
+  | string
+  | symbol
+  | ((props: any) => unknown)
+  | { render: (props: any, ref: unknown) => unknown };
+
+export declare function jsx(
+  type: Tag,
+  props?: any,
+  key?: string | number,
+): JSX.Element;
+export declare function jsxs(
+  type: Tag,
+  props?: any,
+  key?: string | number,
+): JSX.Element;
+export declare function jsxDEV(
+  type: Tag,
+  props?: any,
+  key?: string | number,
+): JSX.Element;
+export declare const Fragment: symbol;
 
 export declare namespace JSX {
   interface Element {
-    type: any;
-    props: any;
+    (): string;
   }
   interface IntrinsicElements {
     [elem: string]: any;
@@ -16,8 +35,7 @@ export declare namespace JSX {
 declare global {
   namespace JSX {
     interface Element {
-      type: any;
-      props: any;
+      (): string;
     }
     interface IntrinsicElements {
       [elem: string]: any;

package/src/jsx/jsx-runtime.js

@@ -21,8 +21,6 @@ const SVG_TAGS = new Set([
   "defs",
 ]);
 
-const REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-
 const ALT_NAMES = {
   classname: "class",
   htmlfor: "for",
@@ -100,8 +98,9 @@ const renderChild = (child) => {
 };
 
 const jsx = (tag, { children, ...props } = {}) => {
-  // Fragment (Symbol-safe)
-  if (tag === REACT_FRAGMENT_TYPE || tag === Fragment) {
+  // Fragment. It is the registered React symbol, so a compiled React library
+  // matches whether it imports Fragment or inlines Symbol.for("react.fragment")
+  if (tag === Fragment) {
     return () => renderChild(children);
   }
 
@@ -158,7 +157,9 @@ const jsx = (tag, { children, ...props } = {}) => {
     // `minify` drives <style>, it isn't an HTML attribute
     .filter(([k]) => !(tag === "style" && k === "minify"))
     .filter(([k, v]) => !/on[A-Z]/.test(k) && typeof v !== "function")
-    .filter(([, v]) => v !== false)
+    // `false`, `null` and `undefined` drop the attribute (as React does),
+    // rather than rendering it empty
+    .filter(([, v]) => v !== false && v != null)
     .map(([k, v]) => {
       const preserveSvg = k === "viewBox" || k === "preserveAspectRatio";
 
@@ -180,6 +181,7 @@ const jsx = (tag, { children, ...props } = {}) => {
             return `${cssKey}:${val}`;
           })
           .join(";");
+        if (!v) return null; // an empty style object adds nothing
       }
 
       const value =
@@ -187,6 +189,7 @@ const jsx = (tag, { children, ...props } = {}) => {
 
       return `${key}="${value}"`;
     })
+    .filter((attr) => attr !== null)
     .join(" ");
 
   if (attrStr) attrStr = ` ${attrStr}`;

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

@@ -1,694 +0,0 @@
-/** @jsxImportSource . */
-
-expect.extend({
-  toRender(fn, rendered) {
-    const html = fn();
-    if (this.isNot) {
-      const msg = `Expected "${html}"  to render differently`;
-      return { pass: html === rendered, message: () => msg };
-    }
-    const msg = `Expected "${html}" to be rendered as "${rendered}"`;
-    return { pass: html === rendered, message: () => msg };
-  },
-});
-
-describe("jsx", () => {
-  it("can render a div", () => {
-    expect(<div>Hello</div>).toRender("<div>Hello</div>");
-  });
-
-  it("can render an input with attributes", () => {
-    expect(<input name="hello" />).toRender(`<input name="hello" />`);
-  });
-
-  it("will stringify an attribute", () => {
-    expect(<input value={5.2} />).toRender('<input value="5.2" />');
-  });
-
-  it("will ignore a boolean attribute", () => {
-    expect(<input disabled />).toRender("<input disabled />");
-    expect(<input disabled={true} />).toRender("<input disabled />");
-    expect(<input disabled={false} />).toRender("<input />");
-  });
-
-  it("will remove events", () => {
-    expect(<input onChange={() => console.log("hello")} />).toRender(
-      "<input />",
-    );
-  });
-
-  it("will inject the doctype for html", () => {
-    // biome-ignore lint/a11y/useHtmlLang: This is an example, not user code
-    expect(<html>Hello</html>).toRender("<!DOCTYPE html><html>Hello</html>");
-    expect(<html lang="en">Hello</html>).toRender(
-      `<!DOCTYPE html><html lang="en">Hello</html>`,
-    );
-  });
-
-  it("can render a pre with text", () => {
-    expect(<pre>hello</pre>).toRender("<pre>hello</pre>");
-  });
-
-  it("can render a pre with newlines", () => {
-    expect(<pre>line1{"\n"}line2</pre>).toRender("<pre>line1\nline2</pre>");
-  });
-
-  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>
-        <pre>line1{"\n"}line2</pre>
-      </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", () => {
-  it("does not crash on symbol-based element types (React internals)", () => {
-    expect(
-      <>
-        <span>Hello</span> world
-      </>,
-    ).toRender("<span>Hello</span> world");
-  });
-
-  it("renders nested fragments", () => {
-    expect(
-      <>
-        <>
-          <span>A</span>
-        </>
-        B
-      </>,
-    ).toRender("<span>A</span>B");
-  });
-
-  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 the CSS as written", () => {
-    expect(<style>{"body { color: red; }"}</style>).toRender(
-      "<style>body { color: red; }</style>",
-    );
-  });
-
-  it("keeps comments and whitespace without `minify`", () => {
-    expect(<style>{"/* reset */ body {\n  margin: 0;\n}"}</style>).toRender(
-      "<style>/* reset */ body {\n  margin: 0;\n}</style>",
-    );
-  });
-
-  it("sends the content raw, like <script>", () => {
-    // Encoding it would break the CSS, so user input must never reach here
-    expect(<style>{"a::after { content: '>'; }"}</style>).toRender(
-      "<style>a::after { content: '>'; }</style>",
-    );
-  });
-
-  it("escapes </style> either way, so it can't close the tag early", () => {
-    expect(<style>{"a { content: '</style>'; }"}</style>).toRender(
-      "<style>a { content: '<\\/style>'; }</style>",
-    );
-    expect(<style minify>{"a { content: '</style>'; }"}</style>).toRender(
-      "<style>a{content:'<\\/style>'}</style>",
-    );
-  });
-
-  it("never renders `minify` as an attribute", () => {
-    expect(<style minify>{"a { color: red; }"}</style>).toRender(
-      "<style>a{color:red}</style>",
-    );
-  });
-
-  describe("with `minify`", () => {
-    it("minifies whitespace in style content", () => {
-      expect(
-        <style minify>{"body {\n  color:   red;\n  margin: 0;\n}"}</style>,
-      ).toRender("<style>body{color:red;margin:0}</style>");
-    });
-
-    it("strips CSS comments", () => {
-      expect(
-        <style minify>{"/* reset */ body { margin: 0; } /* end */"}</style>,
-      ).toRender("<style>body{margin:0}</style>");
-    });
-
-    it("preserves child combinator in selectors", () => {
-      expect(
-        <style minify>{":not(pre) > code { background: none; }"}</style>,
-      ).toRender("<style>:not(pre)>code{background:none}</style>");
-    });
-
-    it("preserves sibling combinators in selectors", () => {
-      // `+` keeps a single space, since removing it breaks calc() below
-      expect(
-        <style minify>
-          {"h2  +  p { margin: 0; } h2 ~ p { color: red; }"}
-        </style>,
-      ).toRender("<style>h2 + p{margin:0}h2~p{color:red}</style>");
-    });
-
-    it("keeps the spaces calc() needs around + and -", () => {
-      // `calc(100%+10px)` is invalid CSS: the operators need their whitespace
-      expect(<style minify>{"a { top: calc(100% + 10px); }"}</style>).toRender(
-        "<style>a{top:calc(100% + 10px)}</style>",
-      );
-      expect(<style minify>{"a { top: calc(100% - 10px); }"}</style>).toRender(
-        "<style>a{top:calc(100% - 10px)}</style>",
-      );
-    });
-
-    it("removes spaces around braces, colons, and semicolons", () => {
-      expect(
-        <style minify>{"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 minify>{"p { margin: 0; padding: 0; }"}</style>).toRender(
-        "<style>p{margin:0;padding:0}</style>",
-      );
-    });
-
-    it("leaves quoted values alone", () => {
-      // The spaces and delimiters in here are content, not formatting
-      expect(<style minify>{'a::after { content: ", "; }'}</style>).toRender(
-        '<style>a::after{content:", "}</style>',
-      );
-      expect(
-        <style minify>{'a::after { content: "a; b: c"; }'}</style>,
-      ).toRender('<style>a::after{content:"a; b: c"}</style>');
-      expect(
-        <style minify>{"a::after { content: 'x  y'; }"}</style>,
-      ).toRender("<style>a::after{content:'x  y'}</style>");
-    });
-
-    it("handles an escaped quote inside a value", () => {
-      expect(
-        <style minify>{'a::after { content: "say \\" hi"; }'}</style>,
-      ).toRender('<style>a::after{content:"say \\" hi"}</style>');
-    });
-
-    it("still strips a comment written inside a value", () => {
-      // Comments are stripped first, unconditionally
-      expect(
-        <style minify>{'a::after { content: "/* hi */"; }'}</style>,
-      ).toRender('<style>a::after{content:""}</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", () => {
-  // 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>");
-  });
-});
-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>',
-    );
-  });
-});