[BUG-33] Pluralization collisions drop children; two children systems disagree on shape

[shroy]

Severity: P2 · Batch: B7 (children unification)

Location

src/utils/strings.js:24-32 + src/utils/children.js:25-37; divergence vs src/hooks/useChildren.js:107-118

Root cause

box/boxes markers collide (pluralize('boxes') → boxeses; addPluralizedChild silently no-ops when the plural key holds a non-array); single-child extraction creates no plural key at all in component props, while useChildren always creates both — the two children systems disagree on shape.

Proposed fix

Part of children unification (B7): one implementation with defined singular/plural shape; guard collisions.

Verification recipe

Spec: component with children markers box and boxes; extract props-children; document which markers are dropped/miskeyed. Also: single child via props → assert no plural key, vs useChildren → both keys (shape divergence).

[shroy]

Phase 1 verification: CONFIRMED

Method: runtime repro (vitest + jsdom) — both claims reproduced.

Both halves of the finding hold against the unmodified tree:

1. Pluralization collision drops a child. pluralize('box') === 'boxes' and pluralize('boxes') === 'boxeses', so the box and boxes markers collide on the key boxes. In extractChildren (src/utils/children.js:45-76) → addPluralizedChild (src/utils/children.js:25-37), when the plural key boxes is already occupied by a non-array value (a single dialog-boxes element seen first in document order), the second dialog-box element hits addPluralizedChild(children, 'box', el); pluralize('box') === 'boxes' is in children but isArray(children['boxes']) is false, so the if (isArray(...)) branch is skipped and the element is silently dropped — it appears nowhere in the result.

2. The two children systems disagree on shape. For a single matching child, useChildren (src/hooks/useChildren.js:107-118) always creates both a singular and a plural key, while extractChildren (the props-children path, src/utils/props.js:39) creates only the singular key.

Repro spec (src/tests/__verify__/issue-44.spec.js)

import { describe, it, expect } from 'vitest'
import { extractChildren } from '../../utils/children.js'
import { useChildren } from '../../hooks/useChildren.js'
import { pluralize } from '../../utils/strings.js'
import { isArray } from '../../utils/type-guards.js'
import { initConfig } from '../../core/config.js'

describe('issue #44 — pluralization collisions and children shape divergence', () => {
  it('sanity: pluralize is non-injective — box and boxes both map to "boxes"', () => {
    expect(pluralize('box')).toBe('boxes')
    expect(pluralize('boxes')).toBe('boxeses')
  })

  it('(A) does not silently drop a marker child when box/boxes collide', () => {
    initConfig() // default: empty formattedPrefix, so bare `dialog-*` attrs match

    const dialog = document.createElement('div')
    dialog.classList.add('Dialog')

    // Document order matters. The single `boxes` element comes FIRST, so it
    // occupies children['boxes'] as a NON-array value. Then two `box` elements
    // follow: the second triggers addPluralizedChild('box', ...), whose plural
    // key is 'boxes' — already present but not an array => dropped.
    const boxesEl = document.createElement('section')
    boxesEl.setAttribute('dialog-boxes', '')
    dialog.appendChild(boxesEl)

    const box1 = document.createElement('div')
    box1.setAttribute('dialog-box', '')
    dialog.appendChild(box1)

    const box2 = document.createElement('div')
    box2.setAttribute('dialog-box', '')
    dialog.appendChild(box2)

    const children = extractChildren(dialog, 'Dialog')

    const referenced = new Set()
    const collect = (val) => {
      if (isArray(val)) {
        val.forEach(collect)
      } else if (val) {
        referenced.add(val)
      }
    }
    Object.values(children).forEach(collect)

    expect(referenced.has(boxesEl)).toBe(true)
    expect(referenced.has(box1)).toBe(true)
    expect(referenced.has(box2)).toBe(true) // <-- predicted failure point
  })

  it('(B) single child has consistent shape across both children systems', () => {
    initConfig()

    const hookRoot = document.createElement('div')
    hookRoot.setAttribute('use-widget', '')
    const hookPanel = document.createElement('div')
    hookPanel.setAttribute('widget-panel', '')
    hookRoot.appendChild(hookPanel)

    const viaHook = useChildren(hookRoot, 'widget')
    expect(viaHook).toHaveProperty('panel')
    expect(viaHook).toHaveProperty('panels')

    const comp = document.createElement('div')
    comp.classList.add('Widget')
    const propPanel = document.createElement('div')
    propPanel.setAttribute('widget-panel', '')
    comp.appendChild(propPanel)

    const viaProps = extractChildren(comp, 'Widget')

    expect(viaProps).toHaveProperty('panel')
    expect(viaProps).toHaveProperty('panels') // <-- predicted failure point
    expect(Object.keys(viaProps).sort()).toEqual(Object.keys(viaHook).sort())
  })
})

Test output (trimmed to the decisive failures)

 ❯ src/tests/__verify__/issue-44.spec.js  (3 tests | 2 failed) 19ms

 FAIL  … > (A) does not silently drop a marker child when box/boxes collide
AssertionError: expected false to be true // Object.is equality
 ❯ src/tests/__verify__/issue-44.spec.js:76:34
     74|     expect(referenced.has(boxesEl)).toBe(true)
     75|     expect(referenced.has(box1)).toBe(true)
     76|     expect(referenced.has(box2)).toBe(true) // <-- predicted failure point

 FAIL  … > (B) single child has consistent shape across both children systems
AssertionError: expected { panel: <div widget-panel></div> } to have property "panels"
 ❯ src/tests/__verify__/issue-44.spec.js:106:22

 Test Files  1 failed (1)
      Tests  2 failed | 1 passed (3)

Interpretation

Both predicted failures fired at the exact predicted points. box2 (a dialog-box marker) is unreachable in the extracted children — silently dropped by the addPluralizedChild non-array no-op when box/boxes collide — and extractChildren returns { panel } with no panels key while useChildren returns both, confirming the shape divergence. The passing sanity test confirms the non-injective pluralize at the root of the collision. Finding CONFIRMED.