forked from microsoft/fast
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: enable data binding in CSS (microsoft#6654)
* feat: make HostController extend ExpressionController * feat: add CSSBindingDirective * feat: integrate css binding with css string template & refactor binding * fix: foundation updates to binding helpers * fix: properly update package export paths * feat: finish css binding variable generation * test: add tests for css lambda and binding interpolation and fix var bug * style: apply prettier to new fast-element code * test: add css binding tests * Change files * chore: fix change files * fix: reset bindings if the styles are overwritten via setAttribute * refactor: rename BindingSource to BindingDirective
- Loading branch information
1 parent
0535a97
commit 70eb15b
Showing
32 changed files
with
668 additions
and
245 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@microsoft-fast-element-9637b066-dcec-4363-8950-a5927dcc8e91.json
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "feat: enable data binding in CSS", | ||
| "packageName": "@microsoft/fast-element", | ||
| "email": "rob@bluespire.com", | ||
| "dependentChangeType": "prerelease" | ||
| } |
7 changes: 7 additions & 0 deletions
7
change/@microsoft-fast-foundation-c7bd0890-d921-4e07-a11a-2955445ff5fb.json
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "fix: update components to new binding APIs", | ||
| "packageName": "@microsoft/fast-foundation", | ||
| "email": "rob@bluespire.com", | ||
| "dependentChangeType": "prerelease" | ||
| } |
This file contains 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
This file contains 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
59 changes: 59 additions & 0 deletions
59
packages/web-components/fast-element/src/binding/binding.ts
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import type { DOMAspect, DOMPolicy } from "../dom.js"; | ||
| import type { Subscriber } from "../observation/notifier.js"; | ||
| import type { Expression, ExpressionObserver } from "../observation/observable.js"; | ||
|
|
||
| /** | ||
| * The directive from which a binding originates. | ||
| * | ||
| * @public | ||
| */ | ||
| export interface BindingDirective { | ||
| /** | ||
| * The binding. | ||
| */ | ||
| readonly dataBinding: Binding; | ||
|
|
||
| /** | ||
| * The evaluated target aspect. | ||
| */ | ||
| readonly targetAspect?: string; | ||
|
|
||
| /** | ||
| * The type of aspect to target. | ||
| */ | ||
| readonly aspectType?: DOMAspect; | ||
| } | ||
|
|
||
| /** | ||
| * Captures a binding expression along with related information and capabilities. | ||
| * | ||
| * @public | ||
| */ | ||
| export abstract class Binding<TSource = any, TReturn = any, TParent = any> { | ||
| /** | ||
| * Options associated with the binding. | ||
| */ | ||
| options?: any; | ||
|
|
||
| /** | ||
| * Creates a binding. | ||
| * @param evaluate - Evaluates the binding. | ||
| * @param policy - The security policy to associate with this binding. | ||
| * @param isVolatile - Indicates whether the binding is volatile. | ||
| */ | ||
| public constructor( | ||
| public evaluate: Expression<TSource, TReturn, TParent>, | ||
| public policy?: DOMPolicy, | ||
| public isVolatile: boolean = false | ||
| ) {} | ||
|
|
||
| /** | ||
| * Creates an observer capable of notifying a subscriber when the output of a binding changes. | ||
| * @param subscriber - The subscriber to changes in the binding. | ||
| * @param directive - The Binding directive to create the observer for. | ||
| */ | ||
| abstract createObserver( | ||
| subscriber: Subscriber, | ||
| directive: BindingDirective | ||
| ): ExpressionObserver<TSource, TReturn, TParent>; | ||
| } |
21 changes: 21 additions & 0 deletions
21
packages/web-components/fast-element/src/binding/normalize.ts
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { isFunction } from "../interfaces.js"; | ||
| import type { Expression } from "../observation/observable.js"; | ||
| import { Binding } from "./binding.js"; | ||
| import { oneWay } from "./one-way.js"; | ||
| import { oneTime } from "./one-time.js"; | ||
|
|
||
| /** | ||
| * Normalizes the input value into a binding. | ||
| * @param value - The value to create the default binding for. | ||
| * @returns A binding configuration for the provided value. | ||
| * @public | ||
| */ | ||
| export function normalizeBinding<TSource = any, TReturn = any, TParent = any>( | ||
| value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {} | ||
| ): Binding<TSource, TReturn, TParent> { | ||
| return isFunction(value) | ||
| ? oneWay(value) | ||
| : value instanceof Binding | ||
| ? value | ||
| : oneTime(() => value); | ||
| } |
36 changes: 36 additions & 0 deletions
36
packages/web-components/fast-element/src/binding/one-time.ts
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import type { DOMPolicy } from "../dom.js"; | ||
| import type { | ||
| Expression, | ||
| ExpressionController, | ||
| ExpressionObserver, | ||
| } from "../observation/observable.js"; | ||
| import { makeSerializationNoop } from "../platform.js"; | ||
| import { Binding } from "./binding.js"; | ||
|
|
||
| class OneTimeBinding<TSource = any, TReturn = any, TParent = any> | ||
| extends Binding<TSource, TReturn, TParent> | ||
| implements ExpressionObserver<TSource, TReturn, TParent> { | ||
| createObserver(): ExpressionObserver<TSource, TReturn, TParent> { | ||
| return this; | ||
| } | ||
|
|
||
| bind(controller: ExpressionController): TReturn { | ||
| return this.evaluate(controller.source, controller.context); | ||
| } | ||
| } | ||
|
|
||
| makeSerializationNoop(OneTimeBinding); | ||
|
|
||
| /** | ||
| * Creates a one time binding | ||
| * @param expression - The binding to refresh when signaled. | ||
| * @param policy - The security policy to associate with th binding. | ||
| * @returns A binding configuration. | ||
| * @public | ||
| */ | ||
| export function oneTime<T = any>( | ||
| expression: Expression<T>, | ||
| policy?: DOMPolicy | ||
| ): Binding<T> { | ||
| return new OneTimeBinding(expression, policy); | ||
| } |
48 changes: 48 additions & 0 deletions
48
packages/web-components/fast-element/src/binding/one-way.ts
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import type { DOMPolicy } from "../dom.js"; | ||
| import type { Subscriber } from "../observation/notifier.js"; | ||
| import { Expression, ExpressionObserver, Observable } from "../observation/observable.js"; | ||
| import { Binding } from "./binding.js"; | ||
|
|
||
| class OneWayBinding<TSource = any, TReturn = any, TParent = any> extends Binding< | ||
| TSource, | ||
| TReturn, | ||
| TParent | ||
| > { | ||
| createObserver( | ||
| subscriber: Subscriber | ||
| ): ExpressionObserver<TSource, TReturn, TParent> { | ||
| return Observable.binding(this.evaluate, subscriber, this.isVolatile); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Creates an standard binding. | ||
| * @param expression - The binding to refresh when changed. | ||
| * @param policy - The security policy to associate with th binding. | ||
| * @param isVolatile - Indicates whether the binding is volatile or not. | ||
| * @returns A binding configuration. | ||
| * @public | ||
| */ | ||
| export function oneWay<T = any>( | ||
| expression: Expression<T>, | ||
| policy?: DOMPolicy, | ||
| isVolatile = Observable.isVolatileBinding(expression) | ||
| ): Binding<T> { | ||
| return new OneWayBinding(expression, policy, isVolatile); | ||
| } | ||
|
|
||
| /** | ||
| * Creates an event listener binding. | ||
| * @param expression - The binding to invoke when the event is raised. | ||
| * @param options - Event listener options. | ||
| * @returns A binding configuration. | ||
| * @public | ||
| */ | ||
| export function listener<T = any>( | ||
| expression: Expression<T>, | ||
| options?: AddEventListenerOptions | ||
| ): Binding<T> { | ||
| const config = new OneWayBinding(expression); | ||
| config.options = options; | ||
| return config; | ||
| } |
This file contains 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
Oops, something went wrong.