fix: parse filter elements(...) syntax in f-children directive#7638
fix: parse filter elements(...) syntax in f-children directive#7638Prasad48432 wants to merge 1 commit into
Conversation
|
Azure Pipelines: There may be pipelines that require an authorized user to comment /azp run to run. |
|
@Prasad48432 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
| new URL("../../test/pure-declarative-main.ts", import.meta.url).pathname | ||
| }`; | ||
|
|
||
| test.describe("TemplateParser", () => { |
There was a problem hiding this comment.
We test in browser for declarative format, please check the fixture files for examples of how to do this. In this case you should see fast-element/test/declarative/fixtures/directives/children.
| property: string; | ||
| filter?: ReturnType<typeof elements>; | ||
| } { | ||
| const parts = propName.trim().split(" filter "); |
There was a problem hiding this comment.
split(" filter ") also splits inside valid CSS selectors. For example, f-children="{items filter elements([data-kind="a filter b"])}" leaves parts[1] as elements([data-kind="a, so lastIndexOf(")") is -1 and this falls back to elements(undefined), matching every element instead of the requested selector. Please parse the filter elements(...) suffix without discarding the rest of the selector (for example, split only on the first directive delimiter and keep the remaining selector text). As more directive modifiers are added, it would also be better to make this a small modifier parser/registry supplied by the directive rather than hard-coding each new option in TemplateParser, which keeps the pure declarative parser from growing with every directive-specific feature.
Pull Request
📖 Description
This PR fixes parsing of the
filter elements(...)syntax for the declarativef-childrendirective.Previously,
TemplateParserpassed the entire directive value directly tochildren(), causing expressions such asf-children="{childItems filter elements(li)}"to be treated as a literal property name instead of parsing the filter. As a result, no element filter was applied.This change extracts the filter parsing into a shared helper used by both the
childrenandslotteddirective cases. When afilter elements(...)clause is present, the parser now constructs the appropriate options object and passes it tochildren(), while preserving the existing behavior for directives without filters.🎫 Issues
Closes #7631
👩💻 Reviewer Notes
packages/fast-element/src/declarative/template-parser.ts.filter elements(...)syntax is now shared between thechildrenandslotteddirective implementations to avoid duplicate logic.f-children="{property}"is preserved. The options object is only used when a filter is specified.📑 Test Plan
Added declarative parser tests covering:
f-children="{listItems}"resolves to aChildrenDirectivewith the expected property and no filter.f-children="{childItems filter elements()}"produces a filter that accepts element nodes and rejects text nodes.f-children="{childItems filter elements(li)}"produces a selector-based filter that accepts<li>elements and rejects other elements and text nodes.✅ Checklist
General
$ npm run changeAgents
⏭ Next Steps
npm run changeif required by the maintainers.f-childrenfilter syntax is intended to be part of the public API.