[BUG-30] use-component triggers 'Unknown hook useComponent' warnings

[shroy]

Severity: P2 · Batch: B8 (scan-pipeline unification)

Location

src/core/scanDirectives.js:34-45 extracts all use-* attributes; :127 warns unconditionally (logger.warn is always-on)

Failure scenario

On elements that combine use-component="Name" binding with any real hook → prod console spam per scan.

Proposed fix

Skip the reserved use-component attribute in directive extraction.

Verification recipe

Spec: spy on console.warn; element <div use-component="Thing" use-real-hook>; scan; assert no "Unknown hook useComponent" warning. Expected on unmodified code: warning fired → confirmed.

[shroy]

Phase 1 verification: CONFIRMED

Method: runtime repro (vitest + jsdom against unmodified code).

Root cause

getHookAttributesFromElement (src/core/scanDirectives.js:34-45) filters element attributes by attr.name.startsWith('use-') and returns all of them, including the reserved use-component component-binding attribute. processElementHooks then runs kebabToCamel('use-component') → useComponent, fails to find it in the hook registry, and falls into the else branch at :127:

logger.warn(`Unknown hook "${hookName}" requested on element:`, element)

logger.warn is always-on (src/utils/logger.js:58-62 has no debug gate), so every scan of an element that combines use-component="Name" with a real hook emits [HookTML] Unknown hook "useComponent" requested on element: to the console.

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

/**
 * @vitest-environment jsdom
 *
 * BUG-30 / issue #41 verification.
 *
 * Claim: `getHookAttributesFromElement` (src/core/scanDirectives.js:34-45)
 * extracts *every* `use-*` attribute, including the RESERVED `use-component`
 * binding. `processElementHooks` then tries to resolve `useComponent` as a hook,
 * fails to find it in the hook registry, and unconditionally fires the always-on
 * `logger.warn(...)` at :127 ("Unknown hook \"useComponent\" requested ...").
 * On any element that combines `use-component="Name"` with a real hook, this is
 * console spam on every scan.
 *
 * This spec asserts the CORRECT / documented behavior: scanning an element that
 * binds a component AND uses a real registered hook must NOT emit an
 * "Unknown hook useComponent" warning. On unmodified code it should FAIL because
 * the warning fires.
 */
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { scanDirectives } from '../../core/scanDirectives.js'
import { registerHook, clearHookRegistry } from '../../core/hookRegistry.js'
import { initConfig } from '../../core/config.js'

describe('issue #41 — use-component must not warn as an unknown hook', () => {
  let consoleWarnSpy

  beforeEach(() => {
    initConfig() // default config: no attribute prefix, debug off
    clearHookRegistry()
    document.body.innerHTML = ''
    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
  })

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

  it('does not warn "Unknown hook useComponent" when use-component sits beside a real hook', () => {
    // A genuine, registered hook. Named function so registerHook derives the
    // name "useRealHook" (attribute: use-real-hook). No-op body: it neither
    // registers effects nor returns a teardown, so nothing else is exercised.
    const realHookImpl = vi.fn()
    function useRealHook(el, props) {
      realHookImpl(el, props)
    }
    expect(registerHook(useRealHook)).toBe(true)

    // Element combines the reserved `use-component` component binding with a
    // real hook. The real hook is what makes scanDirectives select the element.
    document.body.innerHTML = `
      <div id="target" use-component="Thing" use-real-hook></div>
    `

    // Run the REAL scan pipeline (not a mock).
    const processed = scanDirectives()

    // Sanity: the element was actually selected and the real hook ran, so the
    // scan genuinely walked this element's use-* attributes (including
    // use-component). If this failed, the test below would be vacuous.
    expect(processed).toBe(1)
    expect(realHookImpl).toHaveBeenCalledTimes(1)

    // The reserved component-binding attribute must NOT be reported as a hook.
    // logger.warn prefixes with "[HookTML] " and emits:
    //   Unknown hook "useComponent" requested on element:
    const warnedUnknownComponent = consoleWarnSpy.mock.calls.some(
      (args) =>
        typeof args[0] === 'string' &&
        args[0].includes('Unknown hook "useComponent"')
    )

    expect(warnedUnknownComponent).toBe(false)
  })
})

Decisive output (unmodified code)

 FAIL  src/tests/__verify__/issue-41.spec.js > issue #41 — use-component must not warn as an unknown hook > does not warn "Unknown hook useComponent" when use-component sits beside a real hook
AssertionError: expected true to be false // Object.is equality
 ❯ src/tests/__verify__/issue-41.spec.js:74:36
     74|     expect(warnedUnknownComponent).toBe(false)
       |                                    ^
 Test Files  1 failed (1)
      Tests  1 failed (1)

The sanity assertions passed (processed === 1, real hook invoked once), so the scan genuinely walked the element's use-* attributes. A follow-up probe captured the exact and only warn call: ["[HookTML] Unknown hook \"useComponent\" requested on element:"].

Interpretation

The bug reproduces exactly as described: an element combining use-component="Thing" with a real hook produces an always-on Unknown hook "useComponent" console warning on every scan. The proposed fix — excluding the reserved use-component attribute from directive extraction in getHookAttributesFromElement — is the correct remedy.