fix(runtime): various jsx-runtime behaviours (#6538)

* fix(runtime): stop jsx-runtime adding VDOM `key` attributes to DOM

* fix(runtime): jsx-runtime behaviours

* chore: revert stupidity

* chore: fix test

* chore: revert

Author: johnjenkins

package-lock.json

@@ -44,6 +44,10 @@ const visitCallExpressionArgs = (
     // These have the same signature as h() for metadata purposes
     visitCallExpressionArg(m, args[0]);
     gatherVdomMeta(m, args);
+    // TypeScript's jsx transform passes key as the 3rd argument
+    if (args.length > 2 && args[2]) {
+      m.hasVdomKey = true;
+    }
   } else if (args.length > 1 && fnName === 'createElementNS') {
     visitCallExpressionArg(m, args[1]);
   } else if (fnName === 'require' && args.length > 0 && (m as d.Module).originalImports) {

src/compiler/transformers/static-to-meta/call-expression.ts

@@ -116,7 +116,8 @@ export const newVNode = (tag: string, text: string) => {
   const vnode: d.VNode = {
     $flags$: 0,
     $tag$: tag,
-    $text$: text,
+    // Normalize undefined to null to prevent rendering "undefined" as text
+    $text$: text ?? null,
     $elm$: null,
     $children$: null,
   };

src/runtime/vdom/h.ts

@@ -33,18 +33,34 @@ export function jsxDEV(
   _source?: any,
   _self?: any,
 ) {
-  const { children, ...rest } = props;
+  const propsObj = props || {};
+  const { children, ...rest } = propsObj;
 
-  // In development mode, key might be passed separately
-  const vnodeData = key !== undefined ? { ...rest, key } : rest;
+  // Build vnodeData - key from props takes precedence over parameter
+  let vnodeData = rest;
+  if (key !== undefined && !('key' in rest)) {
+    vnodeData = { ...rest, key };
+  }
+
+  // If vnodeData is empty object, use null instead (matches old transform)
+  if (vnodeData && Object.keys(vnodeData).length === 0) {
+    vnodeData = null;
+  }
 
   // Note: source and self are debug info we could potentially use in the future
   // for better developer experience, but for now we ignore them
 
-  // If children is an array, spread it; otherwise pass as single child
-  if (Array.isArray(children)) {
-    return h(type, vnodeData, ...children);
-  } else if (children !== undefined) {
+  if (children !== undefined) {
+    // If children is already an array, spread it
+    if (Array.isArray(children)) {
+      return h(type, vnodeData, ...children);
+    }
+    // If single child is a VNode (has $flags$), pass it directly
+    // Otherwise it gets stringified
+    if (typeof children === 'object' && children !== null && '$flags$' in children) {
+      return h(type, vnodeData, children);
+    }
+    // For primitive values (strings, numbers), pass directly
     return h(type, vnodeData, children);
   }
 

src/runtime/vdom/jsx-dev-runtime.ts

@@ -25,18 +25,19 @@ export { Fragment } from '../fragment';
 export function jsx(type: any, props: any, key?: string) {
   const propsObj = props || {};
   const { children, ...rest } = propsObj;
-  // Build vnodeData - pass null if no props/key (matches old h() behavior)
+  // Build vnodeData - key from props takes precedence over parameter
   let vnodeData = rest;
-  if (key !== undefined) {
+  if (key !== undefined && !('key' in rest)) {
     vnodeData = { ...rest, key };
   }
+
   // If vnodeData is empty object, use null instead (matches old transform)
   if (vnodeData && Object.keys(vnodeData).length === 0) {
     vnodeData = null;
   }
 
   if (children !== undefined) {
-    // If children is array, spread it
+    // If children is already an array, spread it
     if (Array.isArray(children)) {
       return h(type, vnodeData, ...children);
     }

src/runtime/vdom/jsx-runtime.ts

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from '../jsx-runtime';
+import { jsxDEV } from '../jsx-dev-runtime';
+
+describe('jsx-runtime', () => {
+  describe('jsx() and jsxs()', () => {
+    it('should create a vnode with no props', () => {
+      const vnode = jsx('div', {});
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$attrs$).toBe(null);
+    });
+
+    it('should create a vnode with basic props', () => {
+      const vnode = jsx('div', { id: 'test', class: 'foo' });
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$attrs$).toEqual({ id: 'test', class: 'foo' });
+    });
+
+    it('should handle key passed as separate parameter', () => {
+      const vnode = jsx('div', { id: 'test' }, 'my-key');
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$key$).toBe('my-key');
+      expect(vnode.$attrs$).toEqual({ id: 'test', key: 'my-key' });
+    });
+
+    it('should handle key passed in props', () => {
+      const vnode = jsx('div', { id: 'test', key: 'props-key' });
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$key$).toBe('props-key');
+      expect(vnode.$attrs$).toEqual({ id: 'test', key: 'props-key' });
+    });
+
+    it('should prefer key from props over parameter', () => {
+      const vnode = jsx('div', { id: 'test', key: 'props-key' }, 'param-key');
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$key$).toBe('props-key');
+      expect(vnode.$attrs$).toEqual({ id: 'test', key: 'props-key' });
+    });
+
+    it('should handle ref in props', () => {
+      const refCallback = jest.fn();
+      const vnode = jsx('div', { id: 'test', ref: refCallback });
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$attrs$).toEqual({ id: 'test', ref: refCallback });
+    });
+
+    it('should handle both key and ref', () => {
+      const refCallback = jest.fn();
+      const vnode = jsx('div', { id: 'test', key: 'my-key', ref: refCallback }, undefined);
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$key$).toBe('my-key');
+      expect(vnode.$attrs$).toEqual({ id: 'test', key: 'my-key', ref: refCallback });
+    });
+
+    it('should handle children as array', () => {
+      const vnode = jsx('div', { children: ['Hello', 'World'] });
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$children$?.length).toBe(1);
+      expect(vnode.$children$![0].$text$).toBe('HelloWorld');
+    });
+
+    it('should handle single child', () => {
+      const vnode = jsx('div', { children: 'Hello' });
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$children$?.length).toBe(1);
+    });
+
+    it('should not include children in attrs', () => {
+      const vnode = jsx('div', { id: 'test', children: 'Hello' });
+      expect(vnode.$attrs$).toEqual({ id: 'test' });
+    });
+
+    it('jsxs should work the same as jsx', () => {
+      const vnode = jsxs('div', { id: 'test' }, 'my-key');
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$attrs$).toEqual({ id: 'test', key: 'my-key' });
+    });
+  });
+
+  describe('jsxDEV()', () => {
+    it('should handle key and ref like jsx()', () => {
+      const refCallback = jest.fn();
+      const vnode = jsxDEV('div', { id: 'test', key: 'my-key', ref: refCallback });
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$key$).toBe('my-key');
+      expect(vnode.$attrs$).toEqual({ id: 'test', key: 'my-key', ref: refCallback });
+    });
+
+    it('should handle key as separate parameter', () => {
+      const vnode = jsxDEV('div', { id: 'test' }, 'param-key');
+      expect(vnode.$tag$).toBe('div');
+      expect(vnode.$key$).toBe('param-key');
+      expect(vnode.$attrs$).toEqual({ id: 'test', key: 'param-key' });
+    });
+  });
+});

src/runtime/vdom/test/jsx-runtime.spec.ts

@@ -861,4 +861,9 @@ describe('renderer', () => {
     }
     return ret;
   }
+
+  it('should normalize undefined $text$ to null in newVNode', () => {
+    const vnode = newVNode(null, undefined as any);
+    expect(vnode.$text$).toBe(null);
+  });
 });

src/runtime/vdom/test/patch.spec.ts

@@ -72,7 +72,8 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
     );
   }
 
-  if (BUILD.vdomText && newVNode.$text$ !== null) {
+  // Use loose equality to handle both null and undefined
+  if (BUILD.vdomText && newVNode.$text$ != null) {
     // create text node
     elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$) as any;
   } else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
@@ -86,6 +87,7 @@ const createElm = (oldParentVNode: d.VNode, newParentVNode: d.VNode, childIndex:
       updateElement(null, newVNode, isSvgMode);
     }
   } else {
+    // Only create element if we have a valid tag name
     if (BUILD.svg && !isSvgMode) {
       isSvgMode = newVNode.$tag$ === 'svg';
     }
@@ -698,7 +700,8 @@ export const patch = (oldVNode: d.VNode, newVNode: d.VNode, isInitialRender = fa
   const text = newVNode.$text$;
   let defaultHolder: Comment;
 
-  if (!BUILD.vdomText || text === null) {
+  // Use loose equality to handle both null and undefined
+  if (!BUILD.vdomText || text == null) {
     if (BUILD.svg) {
       // test if we're rendering an svg element, or still rendering nodes inside of one
       // only add this to the when the compiler sees we're using an svg somewhere
@@ -893,6 +896,7 @@ export const nullifyVNodeRefs = (vNode: d.VNode) => {
  * @param parent parent node
  * @param newNode element to be inserted
  * @param reference anchor element
+ * @param isInitialLoad whether or not this is the first render
  * @returns inserted node
  */
 export const insertBefore = (