feat(fast-html): add |binding:none non-reactive static accessor syntax#7374
Draft
feat(fast-html): add |binding:none non-reactive static accessor syntax#7374
Conversation
Add support for {{foo|binding:none}} which creates a one-time (non-reactive)
accessor instead of a reactive binding. This means the value is read once when
the element connects and the DOM is not updated when the property changes.
Changes:
- Add noneBindingModifier to syntax.ts
- Add hasNoneBindingModifier and stripNoneBindingModifier helpers in utilities.ts
- Import oneTime from @microsoft/fast-element in template.ts
- Use oneTime binding when |binding:none modifier is detected in content bindings
- Add test fixtures in packages/fast-html/test/fixtures/static-accessor
- Update README.md with Static accessor section
- Apply biome formatting fixes across the package
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…ntax
Replace the single-purpose noneBindingModifier with a general pipe-based
argument parsing system for declarative binding expressions.
Syntax: {{path|key1:value1|key2:value2}}
- The first segment (before any |) is always the property path
- Each subsequent segment is split on : into a key/value modifier pair
Changes:
- syntax.ts: replace noneBindingModifier with bindingArgSeparator (|),
bindingArgKeyValueSeparator (:), bindingKey, and noneBinding constants
- utilities.ts: replace hasNoneBindingModifier/stripNoneBindingModifier with
parseBindingExpression() returning { path, modifiers }
- template.ts: use parseBindingExpression and check modifiers[bindingKey]
=== noneBinding to detect one-time accessor intent
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Add a 'Binding arguments' section under Syntax explaining the general
pipe-separator format: {{path|key1:value1|key2:value2}}
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
Adds support for
{{foo|binding:none}}syntax in@microsoft/fast-htmltemplates. This creates a one-time (non-reactive) static accessor instead of a reactive binding.Motivation
All current
{{}}bindings are reactive — they set up observers so the DOM updates whenever the bound property changes. This PR adds a way to opt out of reactivity for cases where a value only needs to be read once on element connect.Changes
packages/fast-htmlsrc/components/syntax.ts: AddnoneBindingModifier = "|binding:none"constantsrc/components/utilities.ts: AddhasNoneBindingModifierandstripNoneBindingModifierhelper functionssrc/components/template.ts: ImportoneTimefrom@microsoft/fast-element; detect|binding:nonemodifier in content bindings and useoneTime()instead of a reactive functiontest/fixtures/static-accessor/: New test fixture verifying non-reactive renderingREADME.md: Document the newStatic accessorsyntaxBehavior
{{text}}${x => x.text}${x.text}(one-time)Test
New test in
test/fixtures/static-accessor/static-accessor.spec.tsverifies: