fix(fast-html): only process single-brace bindings for event aspect#7325
Draft
fix(fast-html): only process single-brace bindings for event aspect#7325
Conversation
Single curly brace ({}) bindings in fast-html are now restricted to
event (@) and attribute directive (f-) bindings only. This prevents
CSS/JS curly braces from being misinterpreted as client-side bindings.
- Modified getNextBehavior() to skip non-event single-brace bindings
- Double-brace ({{ }}) and triple-brace ({{{ }}}) bindings are unaffected
- Added tests for CSS braces, non-event attributes, and mixed scenarios
Resolves #7295
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restricts single curly brace (
{}) client-side bindings in fast-html to only be processed when the DOMAspect is an event (@) or an attribute directive (f-). This prevents CSS/JS curly braces from being misinterpreted as bindings.Changes
utilities.ts: ModifiedgetNextBehavior()to loop and skip single-brace bindings that are not events or attribute directives. When a non-event{}is encountered, parsing advances past the closing}and continues searching for valid bindings.utilities.spec.ts: Added 4 new tests:<style>are correctly skippedWhat still works
@click="{handler()}"— event bindings ✅f-children="{list}"— attribute directives ✅{{text}}— double-brace server-side bindings ✅{{{html}}}— triple-brace unescaped bindings ✅What's now skipped
<style>.foo { color: red }</style>— CSS braces ✅<input type="{type}">— non-event single-brace attributes ✅Resolves #7295