Skip to content

fix: deduplicate deprecated event arg warning in fast-html template processing #7409

@radium-v

Description

@radium-v

🐛 Bug Report

console.warn for the deprecated e event argument fires once per event binding per template, flooding the console when many <f-template> elements are on the page.

💻 Repro or Code Sample

Load a page with multiple <f-template> definitions that use e in event bindings:

<f-template name="my-button" shadowrootmode="open">
    <template @click="{clickHandler(e)}">
        <slot></slot>
    </template>
</f-template>

<f-template name="my-checkbox" shadowrootmode="open">
    <template @click="{clickHandler(e)}" @keydown="{keydownHandler(e)}">
        <slot></slot>
    </template>
</f-template>

<!-- ...40 more templates... -->

<script type="module">
    import { TemplateElement } from "@microsoft/fast-html";
    TemplateElement.define({ name: "f-template" });
</script>

🤔 Expected Behavior

The deprecation warning should be logged once (or at most once per unique template name), informing the developer that e is deprecated in favor of $e.

😯 Current Behavior

The warning fires for every event binding across every template on the page. In a test harness that includes all component templates (e.g., 42 <f-template> elements), this produces 60+ identical console.warn messages:

[fast-html] Using "e" as an event argument is deprecated. Use "$e" instead.
[fast-html] Using "e" as an event argument is deprecated. Use "$e" instead.
[fast-html] Using "e" as an event argument is deprecated. Use "$e" instead.
...

💁 Possible Solution

Add a module-scoped flag to gate the warning so it only fires once:

// In template.ts
let deprecatedEventArgWarned = false;

// Inside the event binding processing:
if (parsedArgs.some(a => a.type === "deprecated-event") && !deprecatedEventArgWarned) {
    deprecatedEventArgWarned = true;
    console.warn(
        `[fast-html] Using "e" as an event argument is deprecated. Use "${eventArgAccessor}" instead.`,
    );
}

🌍 Your Environment

  • OS & Device: macOS on Apple Silicon
  • Browser: Chromium (via Playwright)
  • Version: @microsoft/fast-html@1.0.0-alpha.46

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions