Record arg-bound component attrs as DynamicValue placeholders

[johanrd]

Summary

A component template like:

<template>
  <iframe ...attributes title={{@label}} src={{@src}} />
</template>

provides title and src at runtime via consumer-passed @args, but the splatted-root extractor previously skipped non-literal values (skipping MustacheStatement and ConcatStatement) per a "caller can't anticipate the value" comment. Result: html-validate's element-required-attributes FP-fires on the substituted <iframe> because no title or src was injected at the consumer's call site.

This change records those attrs with a 3-space whitespace placeholder. The blanker then injects title=' ' / src=' ' at the consumer's open tag into a Glimmer-only blank slot, and processAttribute's existing DynamicValue conversion (transform.ts:116-122) treats the value as "present, value unknowable" — exactly the right signal for required-attribute rules.

The header comment for lib/component-attrs.ts is updated to reflect both value forms now recorded.

Surfaced by

Ecosystem CI on hashicorp/design-system (39× <iframe> missing title, all from <ShwFrame @label="..." @src="..." /> showcase wrapper).

Test plan

• New test asserts <iframe ...attributes title={{@label}} src={{@src}} /> records title and src as whitespace placeholders
• npm test — 128/128 passing
• npm run typecheck:tests — clean
• npm run build — clean

[Copilot]

Pull request overview

This PR improves how html-validate-ember propagates component template attributes to the substituted native element when the component’s splatted root (...attributes) uses arg-bound (non-literal) attribute values. This prevents false positives from html-validate rules (notably required-attribute checks) when required attributes are supplied at runtime via @args.

Changes:

• Record MustacheStatement and ConcatStatement attribute values on splatted roots as a 3-space whitespace placeholder so downstream processAttribute can convert them to DynamicValue.
• Add a Glint fixture (typed-iframe.gts) and a test asserting arg-bound required attrs are recorded as placeholders.
• Update lib/component-attrs.ts module header docs to reflect the new extraction behavior.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
lib/component-attrs.ts	Extends splatted-root attribute extraction to record dynamic (mustache/concat) attrs as DynamicValue placeholders.
test/glint.test.ts	Adds an integration test covering arg-bound required attrs being recorded for splatted roots.
test/glint-fixtures/typed-iframe.gts	Adds a cross-file .gts fixture with <iframe ...attributes title={{@label}} src={{@src}} /> to reproduce the FP scenario.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

blank.ts:914

• substituteSelfClosingComponent now appends all recorded splatted-root attrs into openTag, which increases minLen and can make substitutions fail (sourceLen < minLen) for short invocations. This is a behavioral regression vs the prior implementation (which only added the type attr for buttons) and can reintroduce false-positives when the function returns false and the caller falls back to transparent neutralization. Consider a fallback strategy that still substitutes but drops/limits extraAttrs when the span is too short (e.g. try without extraAttrs, or include attrs until the tag fits).

  // Embed the rest of the splatted-root attrs (other than type, handled
  // above for button). Without this, components whose Signature['Element']
  // resolves to a non-void native carrying *required* attrs sourced from
  // arg-bindings (e.g. `<iframe title={{@label}} src={{@src}}>`) would
  // emit a bare `<iframe></iframe>` and FP-fire
  // `element-required-attributes`.
  let extraAttrs = '';
  for (const [name, value] of Object.entries(attrCtx?.attrs ?? {})) {
    if (resolved === 'button' && name === 'type') continue; // already in typeAttr
    // Boolean attrs emit presence-only; see tryInjectComponentAttrs's
    // matching branch for the rationale.
    if (isBooleanAttr(resolved, name)) {
      extraAttrs += ` ${name}`;
      continue;
    }
    const safeValue = isLiteralSafeForAttr(value) ? value : DYNAMIC_VALUE_PLACEHOLDER;
    extraAttrs += ` ${name}='${safeValue}'`;
  }
  const openTag = `<${resolved}${typeAttr}${extraAttrs}>`;
  const closeTag = `</${resolved}>`;
  const minLen = openTag.length + closeTag.length;
  const sourceLen = elementEnd - elementStart;
  if (sourceLen < minLen) {
    return false;
  }
  const inner = ' '.repeat(sourceLen - minLen);
  ctx.renames.push([elementStart, elementEnd, openTag + inner + closeTag]);
  ctx.fullyBlankedRanges.push([elementStart, elementEnd]);

[johanrd]

@copilot resolve the merge conflicts in this pull request

[johanrd]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved — I merged origin/main into this branch and fixed the conflict in test/integration.test.ts in commit 33c7859.

[Copilot]

@copilot resolve the merge conflicts in this pull request

Done — conflicts are already resolved on this branch in commit 33c7859.