[BUG-29] Acronym hook names are unreachable (camelToKebab roundtrip breaks)

[shroy]

Severity: P2 · Batch: B11 (input validation)

Location

src/utils/strings.js:6-17; src/core/hookRegistry.js:9-14; lookup miss at src/core/scanDirectives.js:73, extraction filter at :39

Root cause

camelToKebab('useURLParser') → use-urlparser, kebabToCamel back → useUrlparser ≠ registered name → selector matches but lookup misses → "Unknown hook" warn per scan. Also hookRegistry.js accepts any use… string (useful passes; usefoo produces a [usefoo] selector whose attrs then fail the use- extraction filter).

Proposed fix

Validate hook names as use[A-Z][A-Za-z0-9]* with no consecutive caps (or normalize lookups through kebab keys).

Verification recipe

Spec: register useURLParser; element with use-urlparser; scan; assert hook executed. Expected on unmodified code: "Unknown hook" warning, hook not executed → confirmed. Also assert registerHook(function useful(){}) is accepted (validation gap).

[shroy]

Phase 1 verification: CONFIRMED

Method: runtime repro (vitest + jsdom), corroborated by static analysis of the string helpers.

Root cause (as filed): camelToKebab/kebabToCamel are not inverses for names containing acronyms. camelToKebab('useURLParser') lowercases the whole string producing use-urlparser; kebabToCamel('use-urlparser') only re-capitalizes the single letter after each dash, producing useUrlparser. Since createHookSelector (src/core/scanDirectives.js:22) builds the selector from the registered name via camelToKebab, the element IS matched, but the per-attribute lookup key computed at src/core/scanDirectives.js:69 via kebabToCamel becomes useUrlparser, which misses the registry (getRegisteredHook at :73) and falls to the Unknown hook warn at :127. Separately, isValidHookName (src/core/hookRegistry.js:9-14) only checks the use prefix + length, so non-hook words like useful are wrongly accepted.

Repro spec (src/tests/__verify__/issue-40.spec.js, deleted after run):

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import {
  registerHook,
  clearHookRegistry
} from '../../core/hookRegistry.js'
import { scanDirectives } from '../../core/scanDirectives.js'
import { initConfig } from '../../core/config.js'
import { camelToKebab, kebabToCamel } from '../../utils/strings.js'
import { logger } from '../../utils/logger.js'

describe('BUG-29: acronym hook names are unreachable (camelToKebab roundtrip)', () => {
  beforeEach(() => {
    document.body.innerHTML = ''
    clearHookRegistry()
    initConfig({ debug: false }) // default '' prefix
    vi.restoreAllMocks()
  })

  afterEach(() => {
    vi.restoreAllMocks()
    document.body.innerHTML = ''
    clearHookRegistry()
  })

  it('roundtrips an acronym hook name back to itself (documented invariant)', () => {
    const name = 'useURLParser'
    const roundtrip = kebabToCamel(camelToKebab(name))
    expect(roundtrip).toBe(name)
  })

  it('executes an acronym-named hook placed via its kebab attribute', () => {
    // Capture execution in an OUTER spy. processElementHooks() calls the hook
    // inside withHookContext (BUG-34 swallows thrown errors), so we record and
    // assert outside the framework.
    const executed = vi.fn()

    // eslint-disable-next-line no-unused-vars
    function useURLParser(_el, _props) {
      executed()
    }

    const attr = camelToKebab('useURLParser') // 'use-urlparser'
    expect(registerHook(useURLParser)).toBe(true)

    document.body.innerHTML = `<div id="acr" ${attr}></div>`

    const warnSpy = vi.spyOn(logger, 'warn')

    const processed = scanDirectives()

    // Selector matches the element (attribute derived from the name)...
    expect(processed).toBe(1)
    // ...and the CORRECT behavior is that the acronym hook actually runs.
    expect(executed).toHaveBeenCalledTimes(1)

    const unknownWarned = warnSpy.mock.calls.some(
      (args) => typeof args[0] === 'string' && args[0].includes('Unknown hook')
    )
    expect(unknownWarned).toBe(false)
  })

  it('rejects a non-hook word like "useful" (name-validation gap)', () => {
    function useful() {}
    expect(registerHook(useful)).toBe(false)
  })
})

Decisive output (all three assertions fail on unmodified code; note the real runtime Unknown hook "useUrlparser" warning):

stderr | ... > executes an acronym-named hook placed via its kebab attribute
[HookTML] Unknown hook "useUrlparser" requested on element: HTMLDivElement { ... }

 ❯ src/tests/__verify__/issue-40.spec.js  (3 tests | 3 failed)
   → roundtrips an acronym hook name back to itself
     expected 'useUrlparser' to be 'useURLParser' // Object.is equality
   → executes an acronym-named hook placed via its kebab attribute
     expected "spy" to be called 1 times, but got 0 times
   → rejects a non-hook word like "useful" (name-validation gap)
     expected true to be false // Object.is equality

 Test Files  1 failed (1)
      Tests  3 failed (3)

Interpretation: The bug reproduces exactly as filed. An acronym-named hook (useURLParser) is placed on the DOM using the very attribute the framework derives from its name (use-urlparser); the selector matches, but the reverse conversion yields useUrlparser, so the registry lookup misses and the hook is never executed — the framework logs Unknown hook "useUrlparser". The name-validation gap is also confirmed: registerHook(useful) returns true when it should be rejected. CONFIRMED.