@furystack/shades 13.1.2 → 13.2.1

package/src/vnode.spec.ts

@@ -27,7 +27,7 @@ const vtext = (text: string): VTextNode => ({ _brand: 'vtext', text })
 const vel = (tag: string, props: Record<string, unknown> | null, ...children: VChild[]): VNode => ({
   _brand: 'vnode',
   type: tag,
-  props,
+  props: props ?? {},
   children,
 })
 
@@ -77,6 +77,12 @@ describe('vnode', () => {
       expect(vnode.children).toHaveLength(1)
       expect((vnode.children[0] as VTextNode).text).toBe('42')
     })
+
+    it('should normalize null props to empty object', () => {
+      const vnode = createVNode('div', null)
+      expect(vnode.props).toEqual({})
+      expect(vnode.props).not.toBeNull()
+    })
   })
 
   describe('flattenVChildren', () => {
@@ -122,10 +128,8 @@ describe('vnode', () => {
       expect(shallowEqual({ a: 1 }, { a: 1, b: 2 })).toBe(false)
     })
 
-    it('should handle null comparisons', () => {
-      expect(shallowEqual(null, null)).toBe(true)
-      expect(shallowEqual(null, {})).toBe(false)
-      expect(shallowEqual({}, null)).toBe(false)
+    it('should return true for two empty objects', () => {
+      expect(shallowEqual({}, {})).toBe(true)
     })
   })
 
@@ -213,7 +217,7 @@ describe('vnode', () => {
       const parent = document.createElement('div')
       const existing = document.createElement('span')
       existing.textContent = 'existing'
-      const child: VNode = { _brand: 'vnode', type: EXISTING_NODE, props: null, children: [], _el: existing }
+      const child: VNode = { _brand: 'vnode', type: EXISTING_NODE, props: {}, children: [], _el: existing }
       mountChild(child, parent)
       expect(parent.firstChild).toBe(existing)
     })
@@ -268,7 +272,7 @@ describe('vnode', () => {
 
     it('should not mount EXISTING_NODE when _el is undefined', () => {
       const parent = document.createElement('div')
-      const child: VNode = { _brand: 'vnode', type: EXISTING_NODE, props: null, children: [] }
+      const child: VNode = { _brand: 'vnode', type: EXISTING_NODE, props: {}, children: [] }
       const result = mountChild(child, parent)
       expect(result).toBeUndefined()
       expect(parent.childNodes.length).toBe(0)
@@ -307,7 +311,7 @@ describe('vnode', () => {
   describe('patchProps', () => {
     it('should add new props', () => {
       const el = document.createElement('div')
-      patchProps(el, null, { id: 'new' })
+      patchProps(el, {}, { id: 'new' })
       expect(el.id).toBe('new')
     })
 
@@ -343,7 +347,7 @@ describe('vnode', () => {
 
     it('should set data attributes', () => {
       const el = document.createElement('div')
-      patchProps(el, null, { 'data-testid': 'foo' })
+      patchProps(el, {}, { 'data-testid': 'foo' })
       expect(el.getAttribute('data-testid')).toBe('foo')
     })
 
@@ -357,7 +361,7 @@ describe('vnode', () => {
     describe('SVG elements', () => {
       it('should set attributes via setAttribute on SVG elements', () => {
         const el = document.createElementNS(SVG_NS, 'rect')
-        patchProps(el, null, { width: '100', height: '50', rx: '5' })
+        patchProps(el, {}, { width: '100', height: '50', rx: '5' })
         expect(el.getAttribute('width')).toBe('100')
         expect(el.getAttribute('height')).toBe('50')
         expect(el.getAttribute('rx')).toBe('5')
@@ -365,7 +369,7 @@ describe('vnode', () => {
 
       it('should set className as class attribute on SVG elements', () => {
         const el = document.createElementNS(SVG_NS, 'g')
-        patchProps(el, null, { className: 'my-group' })
+        patchProps(el, {}, { className: 'my-group' })
         expect(el.getAttribute('class')).toBe('my-group')
       })
 
@@ -393,7 +397,7 @@ describe('vnode', () => {
       it('should set event handlers as properties on SVG elements', () => {
         const el = document.createElementNS(SVG_NS, 'rect')
         const handler = vi.fn()
-        patchProps(el, null, { onclick: handler })
+        patchProps(el, {}, { onclick: handler })
         expect((el as unknown as Record<string, unknown>).onclick).toBe(handler)
       })
     })
@@ -495,11 +499,11 @@ describe('vnode', () => {
       const real = document.createElement('span')
       real.textContent = 'real'
 
-      const old: VChild[] = [{ _brand: 'vnode', type: EXISTING_NODE, props: null, children: [], _el: real }]
+      const old: VChild[] = [{ _brand: 'vnode', type: EXISTING_NODE, props: {}, children: [], _el: real }]
       patchChildren(parent, [], old)
       expect(parent.firstChild).toBe(real)
 
-      const updated: VChild[] = [{ _brand: 'vnode', type: EXISTING_NODE, props: null, children: [], _el: real }]
+      const updated: VChild[] = [{ _brand: 'vnode', type: EXISTING_NODE, props: {}, children: [], _el: real }]
       patchChildren(parent, old, updated)
       expect(parent.firstChild).toBe(real)
     })
@@ -553,6 +557,30 @@ describe('vnode', () => {
         expect(fakeShadeEl.props).toEqual({ count: 2 })
       })
 
+      it('should set empty object (not null) on Shade when props transition to none', () => {
+        const parent = document.createElement('div')
+
+        const fakeShadeEl = document.createElement('my-shade-3') as unknown as JSX.Element
+        const updateFn = vi.fn()
+        ;(fakeShadeEl as unknown as Record<string, unknown>).updateComponentSync = updateFn
+        ;(fakeShadeEl as unknown as Record<string, unknown>).props = { elevation: 2 }
+        ;(fakeShadeEl as unknown as Record<string, unknown>).shadeChildren = undefined
+
+        const factory = vi.fn(() => fakeShadeEl as unknown as JSX.Element)
+
+        const old: VChild[] = [
+          { _brand: 'vnode', type: factory, props: { elevation: 2 }, children: [], _el: fakeShadeEl },
+        ]
+        parent.appendChild(fakeShadeEl)
+
+        const updated: VChild[] = [{ _brand: 'vnode', type: factory, props: {}, children: [] }]
+        patchChildren(parent, old, updated)
+
+        expect(updateFn).toHaveBeenCalledOnce()
+        expect(fakeShadeEl.props).toEqual({})
+        expect(fakeShadeEl.props).not.toBeNull()
+      })
+
       it('should NOT call updateComponentSync when props are unchanged', () => {
         const parent = document.createElement('div')
 

package/src/vnode.ts

@@ -39,7 +39,7 @@ export const EXISTING_NODE: unique symbol = Symbol('existing-node')
 export type VNode = {
   _brand: typeof VNODE_BRAND
   type: string | ((...args: unknown[]) => unknown) | typeof FRAGMENT | typeof EXISTING_NODE
-  props: Record<string, unknown> | null
+  props: Record<string, unknown>
   children: VChild[]
   _el?: Node
 }
@@ -99,7 +99,7 @@ export const flattenVChildren = (raw: unknown[]): VChild[] => {
     } else if (child instanceof Node) {
       // Real DOM node from shadeChildren (created outside render mode).
       // Wrap it so the reconciler can track it.
-      result.push({ _brand: VNODE_BRAND, type: EXISTING_NODE, props: null, children: [], _el: child })
+      result.push({ _brand: VNODE_BRAND, type: EXISTING_NODE, props: {}, children: [], _el: child })
     }
   }
   return result
@@ -125,7 +125,7 @@ export const createVNode = (
   const vnode: VNode = {
     _brand: VNODE_BRAND,
     type: type === null ? FRAGMENT : type,
-    props: props ? { ...props } : null,
+    props: props ? { ...props } : {},
     children,
   }
 
@@ -134,21 +134,20 @@ export const createVNode = (
   if (typeof type === 'string') {
     const v = vnode as unknown as Record<string, unknown>
     v.setAttribute = (name: string, value: string) => {
-      if (!vnode.props) vnode.props = {}
       vnode.props[name] = value
     }
     v.removeAttribute = (name: string) => {
-      if (vnode.props) delete vnode.props[name]
+      delete vnode.props[name]
     }
     v.getAttribute = (name: string) => {
-      return (vnode.props?.[name] as string) ?? null
+      return (vnode.props[name] as string) ?? null
     }
     v.hasAttribute = (name: string) => {
-      return vnode.props ? name in vnode.props : false
+      return name in vnode.props
     }
     v.appendChild = (child: unknown) => {
       if (child instanceof Node) {
-        vnode.children.push({ _brand: VNODE_BRAND, type: EXISTING_NODE, props: null, children: [], _el: child })
+        vnode.children.push({ _brand: VNODE_BRAND, type: EXISTING_NODE, props: {}, children: [], _el: child })
       } else if (isVNode(child) || isVTextNode(child)) {
         vnode.children.push(child)
       }
@@ -168,9 +167,8 @@ export const createVNode = (
 /**
  * Shallow-compares two props objects. Returns true if all keys and values match.
  */
-export const shallowEqual = (a: Record<string, unknown> | null, b: Record<string, unknown> | null): boolean => {
+export const shallowEqual = (a: Record<string, unknown>, b: Record<string, unknown>): boolean => {
   if (a === b) return true
-  if (!a || !b) return false
   const keysA = Object.keys(a)
   const keysB = Object.keys(b)
   if (keysA.length !== keysB.length) return false
@@ -201,13 +199,13 @@ export const toVChildArray = (renderResult: unknown): VChild[] => {
     return Array.from(renderResult.childNodes).map((node) => ({
       _brand: VNODE_BRAND as typeof VNODE_BRAND,
       type: EXISTING_NODE,
-      props: null,
+      props: {} as Record<string, unknown>,
       children: [] as VChild[],
       _el: node,
     }))
   }
   if (renderResult instanceof Node) {
-    return [{ _brand: VNODE_BRAND, type: EXISTING_NODE, props: null, children: [], _el: renderResult }]
+    return [{ _brand: VNODE_BRAND, type: EXISTING_NODE, props: {}, children: [], _el: renderResult }]
   }
   return []
 }
@@ -291,8 +289,7 @@ const patchStyle = (
 /**
  * Applies all props to a freshly created element (initial mount).
  */
-const applyProps = (el: Element, props: Record<string, unknown> | null): void => {
-  if (!props) return
+const applyProps = (el: Element, props: Record<string, unknown>): void => {
   for (const [key, value] of Object.entries(props)) {
     setProp(el, key, value)
   }
@@ -301,26 +298,19 @@ const applyProps = (el: Element, props: Record<string, unknown> | null): void =>
 /**
  * Diffs old and new props and applies minimal updates to a live DOM element.
  */
-export const patchProps = (
-  el: Element,
-  oldProps: Record<string, unknown> | null,
-  newProps: Record<string, unknown> | null,
-): void => {
-  const oldP = oldProps || {}
-  const newP = newProps || {}
-
+export const patchProps = (el: Element, oldProps: Record<string, unknown>, newProps: Record<string, unknown>): void => {
   // Remove props that no longer exist
-  for (const key of Object.keys(oldP)) {
-    if (!(key in newP)) {
+  for (const key of Object.keys(oldProps)) {
+    if (!(key in newProps)) {
       removeProp(el, key)
     }
   }
 
   // Add / update props
-  for (const [key, value] of Object.entries(newP)) {
+  for (const [key, value] of Object.entries(newProps)) {
     if (key === 'style') {
-      patchStyle(el, oldP.style as Record<string, string> | undefined, value as Record<string, string> | undefined)
-    } else if (oldP[key] !== value) {
+      patchStyle(el, oldProps.style as Record<string, string> | undefined, value as Record<string, string> | undefined)
+    } else if (oldProps[key] !== value) {
       setProp(el, key, value)
     }
   }
@@ -352,7 +342,7 @@ export const mountChild = (child: VChild, parent: Node | null): Node => {
   // Shade component
   if (typeof child.type === 'function') {
     const factory = child.type as (props: unknown, children?: ChildrenList) => JSX.Element
-    const el = factory(child.props || {}, child.children as unknown as ChildrenList)
+    const el = factory(child.props, child.children as unknown as ChildrenList)
     child._el = el
     if (parent) parent.appendChild(el)
     return el