@microsoft/fast-element 2.0.0-beta.3 → 2.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.json +81 -0
  2. package/CHANGELOG.md +20 -1
  3. package/dist/dts/components/fast-definitions.d.ts +9 -8
  4. package/dist/dts/components/fast-element.d.ts +8 -4
  5. package/dist/dts/context.d.ts +1 -1
  6. package/dist/dts/di/di.d.ts +854 -0
  7. package/dist/dts/hooks.d.ts +2 -2
  8. package/dist/dts/interfaces.d.ts +38 -7
  9. package/dist/dts/observation/observable.d.ts +19 -13
  10. package/dist/dts/styles/element-styles.d.ts +6 -0
  11. package/dist/dts/templating/binding-signal.d.ts +10 -27
  12. package/dist/dts/templating/binding-two-way.d.ts +16 -41
  13. package/dist/dts/templating/binding.d.ts +79 -118
  14. package/dist/dts/templating/html-directive.d.ts +28 -2
  15. package/dist/dts/templating/render.d.ts +277 -0
  16. package/dist/dts/templating/repeat.d.ts +12 -16
  17. package/dist/dts/templating/template.d.ts +3 -3
  18. package/dist/dts/templating/when.d.ts +3 -3
  19. package/dist/dts/testing/exports.d.ts +2 -0
  20. package/dist/dts/testing/fixture.d.ts +90 -0
  21. package/dist/dts/testing/timeout.d.ts +7 -0
  22. package/dist/esm/components/fast-definitions.js +25 -27
  23. package/dist/esm/components/fast-element.js +16 -8
  24. package/dist/esm/context.js +5 -1
  25. package/dist/esm/debug.js +34 -4
  26. package/dist/esm/di/di.js +1349 -0
  27. package/dist/esm/observation/observable.js +4 -4
  28. package/dist/esm/platform.js +1 -1
  29. package/dist/esm/styles/element-styles.js +14 -0
  30. package/dist/esm/templating/binding-signal.js +56 -61
  31. package/dist/esm/templating/binding-two-way.js +51 -35
  32. package/dist/esm/templating/binding.js +137 -156
  33. package/dist/esm/templating/compiler.js +29 -7
  34. package/dist/esm/templating/html-directive.js +12 -1
  35. package/dist/esm/templating/render.js +392 -0
  36. package/dist/esm/templating/repeat.js +54 -40
  37. package/dist/esm/templating/template.js +8 -5
  38. package/dist/esm/templating/when.js +5 -4
  39. package/dist/esm/testing/exports.js +2 -0
  40. package/dist/esm/testing/fixture.js +88 -0
  41. package/dist/esm/testing/timeout.js +24 -0
  42. package/dist/fast-element.api.json +3257 -3151
  43. package/dist/fast-element.d.ts +210 -209
  44. package/dist/fast-element.debug.js +329 -248
  45. package/dist/fast-element.debug.min.js +1 -1
  46. package/dist/fast-element.js +295 -244
  47. package/dist/fast-element.min.js +1 -1
  48. package/dist/fast-element.untrimmed.d.ts +218 -214
  49. package/docs/api-report.md +83 -85
  50. package/package.json +13 -1
@@ -62,7 +62,7 @@ export type Aspect = typeof Aspect[Exclude<keyof typeof Aspect, "assign" | "none
62
62
  // @public
63
63
  export interface Aspected {
64
64
  aspectType: Aspect;
65
- binding?: Binding;
65
+ dataBinding?: Binding;
66
66
  sourceAspect: string;
67
67
  targetAspect: string;
68
68
  }
@@ -110,38 +110,29 @@ export interface Behavior<TSource = any, TParent = any> {
110
110
  }
111
111
 
112
112
  // @public
113
- export function bind<T = any>(binding: Binding<T>, config?: BindingConfig | DefaultBindingOptions): CaptureType<T>;
113
+ export function bind<T = any>(binding: Expression<T>, isVolatile?: boolean): Binding<T>;
114
114
 
115
115
  // @public
116
- export type Binding<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
117
-
118
- // @public
119
- export interface BindingConfig<T = any> {
120
- mode: BindingMode;
121
- options: T;
116
+ export abstract class Binding<TSource = any, TReturn = any, TParent = any> {
117
+ abstract createObserver(directive: HTMLDirective, subscriber: Subscriber): ExpressionObserver<TSource, TReturn, TParent>;
118
+ evaluate: Expression<TSource, TReturn, TParent>;
119
+ isVolatile?: boolean;
120
+ options?: any;
122
121
  }
123
122
 
124
123
  // @public
125
- export const BindingConfig: Readonly<{
126
- define<T>(mode: BindingMode, defaultOptions: T): BindingConfig<T> & BindingConfigResolver<T>;
127
- }>;
128
-
129
- // @public
130
- export type BindingConfigResolver<T> = (options: T) => BindingConfig<T>;
131
-
132
- // @public
133
- export type BindingMode = Record<Aspect, (directive: HTMLBindingDirective) => Pick<ViewBehaviorFactory, "createBehavior">>;
134
-
135
- // @public
136
- export const BindingMode: Readonly<{
137
- define(UpdateType: typeof UpdateBinding, EventType?: typeof EventBinding): BindingMode;
138
- }>;
139
-
140
- // @public
141
- export interface BindingObserver<TSource = any, TReturn = any, TParent = any> extends Notifier, Disposable {
142
- observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
143
- records(): IterableIterator<ObservationRecord>;
144
- setMode(isAsync: boolean): void;
124
+ export class BindingBehavior implements ViewBehavior {
125
+ constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
126
+ bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
127
+ createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
128
+ // (undocumented)
129
+ readonly directive: HTMLBindingDirective;
130
+ protected getObserver(target: Node): ExpressionObserver;
131
+ // @internal (undocumented)
132
+ handleChange(binding: Expression, observer: ExpressionObserver): void;
133
+ unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
134
+ // (undocumented)
135
+ protected updateTarget: UpdateTarget;
145
136
  }
146
137
 
147
138
  // @public
@@ -156,16 +147,6 @@ export type Callable = typeof Function.prototype.call | {
156
147
  export interface CaptureType<TSource> {
157
148
  }
158
149
 
159
- // @public
160
- export class ChangeBinding extends UpdateBinding {
161
- constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
162
- bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
163
- protected getObserver(target: Node): BindingObserver;
164
- // @internal (undocumented)
165
- handleChange(binding: Binding, observer: BindingObserver): void;
166
- unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
167
- }
168
-
169
150
  // @public
170
151
  export interface ChildListDirectiveOptions<T = any> extends NodeBehaviorOptions<T>, Omit<MutationObserverInit, "subtree" | "childList"> {
171
152
  }
@@ -210,6 +191,24 @@ export type ConstructibleStyleStrategy = {
210
191
  new (styles: (string | CSSStyleSheet)[]): StyleStrategy;
211
192
  };
212
193
 
194
+ // @public
195
+ export class ContentBehavior extends BindingBehavior {
196
+ unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
197
+ }
198
+
199
+ // @public
200
+ export interface ContentTemplate {
201
+ create(): ContentView;
202
+ }
203
+
204
+ // @public
205
+ export interface ContentView {
206
+ bind(source: any, context: ExecutionContext): void;
207
+ insertBefore(node: Node): void;
208
+ remove(): void;
209
+ unbind(): void;
210
+ }
211
+
213
212
  // @public
214
213
  export class Controller<TElement extends HTMLElement = HTMLElement> extends PropertyChangeNotifier {
215
214
  // @internal
@@ -275,9 +274,6 @@ export function customElement(nameOrDef: string | PartialFASTElementDefinition):
275
274
  // @public
276
275
  export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "property">;
277
276
 
278
- // @public
279
- export type DefaultBindingOptions = AddEventListenerOptions;
280
-
281
277
  // @public
282
278
  export interface Disposable {
283
279
  dispose(): void;
@@ -306,6 +302,7 @@ export class ElementStyles {
306
302
  readonly behaviors: ReadonlyArray<Behavior<HTMLElement>> | null;
307
303
  // @internal (undocumented)
308
304
  isAttachedTo(target: StyleTarget): boolean;
305
+ static normalize(styles: ComposableStyles | ComposableStyles[] | undefined): ElementStyles | undefined;
309
306
  // @internal (undocumented)
310
307
  removeStylesFrom(target: StyleTarget): void;
311
308
  static setDefaultStrategy(Strategy: ConstructibleStyleStrategy): void;
@@ -332,7 +329,7 @@ export interface ElementViewTemplate<TSource = any, TParent = any> {
332
329
  export const emptyArray: readonly never[];
333
330
 
334
331
  // @public
335
- export class EventBinding {
332
+ export class EventBehavior {
336
333
  constructor(directive: HTMLBindingDirective);
337
334
  bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
338
335
  createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
@@ -366,6 +363,20 @@ export class ExecutionContext<TParentSource = any> {
366
363
  updatePosition(index: number, length: number): void;
367
364
  }
368
365
 
366
+ // @public
367
+ export type Expression<TSource = any, TReturn = any, TParent = any> = (source: TSource, context: ExecutionContext<TParent>) => TReturn;
368
+
369
+ // @public
370
+ export interface ExpressionNotifier<TSource = any, TReturn = any, TParent = any> extends Notifier, ExpressionObserver<TSource, TReturn, TParent> {
371
+ records(): IterableIterator<ObservationRecord>;
372
+ setMode(isAsync: boolean): void;
373
+ }
374
+
375
+ // @public
376
+ export interface ExpressionObserver<TSource = any, TReturn = any, TParent = any> extends Disposable {
377
+ observe(source: TSource, context?: ExecutionContext<TParent>): TReturn;
378
+ }
379
+
369
380
  // Warning: (ae-internal-missing-underscore) The name "FAST" should be prefixed with an underscore because the declaration is marked as @internal
370
381
  //
371
382
  // @internal
@@ -386,15 +397,15 @@ export const FASTElement: (new () => HTMLElement & FASTElement) & {
386
397
  new (): HTMLElement;
387
398
  prototype: HTMLElement;
388
399
  }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
389
- define<TType extends Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
390
- metadata<TType_1 extends Constructable<HTMLElement> = Constructable<HTMLElement>>(type: TType_1, nameOrDef?: string | PartialFASTElementDefinition): FASTElementDefinition<TType_1>;
400
+ define: typeof define;
401
+ compose: typeof compose;
391
402
  };
392
403
 
393
404
  // @public
394
405
  export class FASTElementDefinition<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>> {
395
- constructor(type: TType, nameOrConfig?: PartialFASTElementDefinition | string);
396
406
  readonly attributeLookup: Record<string, AttributeDefinition>;
397
407
  readonly attributes: ReadonlyArray<AttributeDefinition>;
408
+ static compose<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): FASTElementDefinition<TType>;
398
409
  define(registry?: CustomElementRegistry): this;
399
410
  readonly elementOptions?: ElementDefinitionOptions;
400
411
  static readonly getByType: (key: Function) => FASTElementDefinition<Constructable<HTMLElement>> | undefined;
@@ -413,12 +424,12 @@ export class FASTElementDefinition<TType extends Constructable<HTMLElement> = Co
413
424
  // @internal
414
425
  export interface FASTGlobal {
415
426
  addMessages(messages: Record<number, string>): void;
416
- error(code: number, ...args: any[]): Error;
427
+ error(code: number, values?: Record<string, any>): Error;
417
428
  getById<T>(id: string | number): T | null;
418
429
  // (undocumented)
419
430
  getById<T>(id: string | number, initialize: () => T): T;
420
431
  readonly versions: string[];
421
- warn(code: number, ...args: any[]): void;
432
+ warn(code: number, values?: Record<string, any>): void;
422
433
  }
423
434
 
424
435
  // @public
@@ -426,18 +437,14 @@ export function html<TSource = any, TParent = any>(strings: TemplateStringsArray
426
437
 
427
438
  // @public
428
439
  export class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, Aspected {
429
- constructor(binding: Binding, mode: BindingMode, options: any);
440
+ constructor(dataBinding: Binding);
430
441
  aspectType: Aspect;
431
- // (undocumented)
432
- binding: Binding;
433
442
  createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
434
443
  createHTML(add: AddViewBehaviorFactory): string;
435
- id: string;
436
444
  // (undocumented)
437
- mode: BindingMode;
445
+ dataBinding: Binding;
446
+ id: string;
438
447
  nodeId: string;
439
- // (undocumented)
440
- options: any;
441
448
  sourceAspect: string;
442
449
  targetAspect: string;
443
450
  }
@@ -491,6 +498,9 @@ export interface LengthObserver extends Subscriber {
491
498
  // @public
492
499
  export function lengthOf<T>(array: readonly T[]): number;
493
500
 
501
+ // @public
502
+ export function listener<T = any>(binding: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
503
+
494
504
  // @public
495
505
  export const Markup: Readonly<{
496
506
  interpolation: (id: string) => string;
@@ -523,6 +533,9 @@ export abstract class NodeObservationDirective<T extends NodeBehaviorOptions> ex
523
533
  protected updateTarget(source: any, value: ReadonlyArray<any>): void;
524
534
  }
525
535
 
536
+ // @public
537
+ export function normalizeBinding<TSource = any, TReturn = any, TParent = any>(value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {}): Binding<TSource, TReturn, TParent>;
538
+
526
539
  // @public
527
540
  export interface Notifier {
528
541
  notify(args: any): void;
@@ -543,8 +556,8 @@ export const Observable: Readonly<{
543
556
  notify(source: unknown, args: any): void;
544
557
  defineProperty(target: {}, nameOrAccessor: string | Accessor): void;
545
558
  getAccessors: (target: {}) => Accessor[];
546
- binding<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn, any>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): BindingObserver<TSource, TReturn, any>;
547
- isVolatileBinding<TSource_1 = any, TReturn_1 = any>(binding: Binding<TSource_1, TReturn_1, any>): boolean;
559
+ binding<TSource = any, TReturn = any>(binding: Expression<TSource, TReturn, any>, initialSubscriber?: Subscriber, isVolatileBinding?: boolean): ExpressionNotifier<TSource, TReturn, any>;
560
+ isVolatileBinding<TSource_1 = any, TReturn_1 = any>(binding: Expression<TSource_1, TReturn_1, any>): boolean;
548
561
  }>;
549
562
 
550
563
  // @public
@@ -557,15 +570,7 @@ export interface ObservationRecord {
557
570
  }
558
571
 
559
572
  // @public
560
- export const onChange: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
561
-
562
- // @public
563
- export const oneTime: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
564
-
565
- // @public
566
- export class OneTimeBinding extends UpdateBinding {
567
- bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
568
- }
573
+ export function oneTime<T = any>(binding: Expression<T>): Binding<T>;
569
574
 
570
575
  // @public
571
576
  export const Parser: Readonly<{
@@ -606,24 +611,24 @@ export class RefDirective extends StatelessAttachedAttributeDirective<string> {
606
611
  }
607
612
 
608
613
  // @public
609
- export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(itemsBinding: Binding<TSource, TArray, ExecutionContext<TSource>>, templateOrTemplateBinding: ViewTemplate | Binding<TSource, ViewTemplate>, options?: RepeatOptions): CaptureType<TSource>;
614
+ export function repeat<TSource = any, TArray extends ReadonlyArray<any> = ReadonlyArray<any>>(items: Expression<TSource, TArray, ExecutionContext<TSource>> | Binding<TSource, TArray> | ReadonlyArray<any>, template: Expression<TSource, ViewTemplate> | Binding<TSource, ViewTemplate> | ViewTemplate, options?: RepeatOptions): CaptureType<TSource>;
610
615
 
611
616
  // @public
612
617
  export class RepeatBehavior<TSource = any> implements Behavior, Subscriber {
613
- constructor(location: Node, itemsBinding: Binding<TSource, any[]>, isItemsBindingVolatile: boolean, templateBinding: Binding<TSource, SyntheticViewTemplate>, isTemplateBindingVolatile: boolean, options: RepeatOptions);
618
+ constructor(directive: RepeatDirective, location: Node);
614
619
  bind(source: TSource, context: ExecutionContext): void;
615
- handleChange(source: any, args: Splice[]): void;
620
+ handleChange(source: any, args: Splice[] | ExpressionObserver): void;
616
621
  unbind(): void;
617
622
  }
618
623
 
619
624
  // @public
620
625
  export class RepeatDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory {
621
- constructor(itemsBinding: Binding, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
626
+ constructor(dataBinding: Binding<TSource>, templateBinding: Binding<TSource, SyntheticViewTemplate>, options: RepeatOptions);
622
627
  createBehavior(targets: ViewBehaviorTargets): RepeatBehavior<TSource>;
623
628
  createHTML(add: AddViewBehaviorFactory): string;
624
- id: string;
625
629
  // (undocumented)
626
- readonly itemsBinding: Binding;
630
+ readonly dataBinding: Binding<TSource>;
631
+ id: string;
627
632
  nodeId: string;
628
633
  // (undocumented)
629
634
  readonly options: RepeatOptions;
@@ -757,7 +762,7 @@ export interface SyntheticViewTemplate<TSource = any, TParent = any> {
757
762
  }
758
763
 
759
764
  // @public
760
- export type TemplateValue<TSource, TParent = any> = Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource>;
765
+ export type TemplateValue<TSource, TParent = any> = Expression<TSource, any, TParent> | Binding<TSource, any, TParent> | HTMLDirective | CaptureType<TSource>;
761
766
 
762
767
  // @public
763
768
  export type TrustedTypes = {
@@ -789,18 +794,6 @@ export interface TypeRegistry<TDefinition extends TypeDefinition> {
789
794
  register(definition: TDefinition): boolean;
790
795
  }
791
796
 
792
- // @public
793
- export class UpdateBinding implements ViewBehavior {
794
- constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
795
- bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
796
- createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
797
- // (undocumented)
798
- readonly directive: HTMLBindingDirective;
799
- unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
800
- // (undocumented)
801
- protected updateTarget: UpdateTarget;
802
- }
803
-
804
797
  // @public
805
798
  export interface UpdateQueue {
806
799
  enqueue(callable: Callable): void;
@@ -865,7 +858,12 @@ export class ViewTemplate<TSource = any, TParent = any> implements ElementViewTe
865
858
  export function volatile(target: {}, name: string | Accessor, descriptor: PropertyDescriptor): PropertyDescriptor;
866
859
 
867
860
  // @public
868
- export function when<TSource = any, TReturn = any>(binding: Binding<TSource, TReturn>, templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
861
+ export function when<TSource = any, TReturn = any>(condition: Expression<TSource, TReturn> | boolean, templateOrTemplateBinding: SyntheticViewTemplate | Expression<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
862
+
863
+ // Warnings were encountered during analysis:
864
+ //
865
+ // dist/dts/components/fast-element.d.ts:73:5 - (ae-forgotten-export) The symbol "define" needs to be exported by the entry point index.d.ts
866
+ // dist/dts/components/fast-element.d.ts:78:5 - (ae-forgotten-export) The symbol "compose" needs to be exported by the entry point index.d.ts
869
867
 
870
868
  // (No @packageDocumentation comment for this package)
871
869
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@microsoft/fast-element",
3
3
  "description": "A library for constructing Web Components",
4
- "version": "2.0.0-beta.3",
4
+ "version": "2.0.0-beta.4",
5
5
  "author": {
6
6
  "name": "Microsoft",
7
7
  "url": "https://discord.gg/FcSNfg4"
@@ -46,6 +46,10 @@
46
46
  "types": "./dist/dts/templating/binding-signal.d.ts",
47
47
  "default": "./dist/esm/templating/binding-signal.js"
48
48
  },
49
+ "./render": {
50
+ "types": "./dist/dts/templating/render.d.ts",
51
+ "default": "./dist/esm/templating/render.js"
52
+ },
49
53
  "./utilities": {
50
54
  "types": "./dist/dts/utilities.d.ts",
51
55
  "default": "./dist/esm/utilities.js"
@@ -61,6 +65,14 @@
61
65
  "./metadata": {
62
66
  "types": "./dist/dts/metadata.d.ts",
63
67
  "default": "./dist/esm/metadata.js"
68
+ },
69
+ "./testing": {
70
+ "types": "./dist/dts/testing/exports.d.ts",
71
+ "default": "./dist/esm/testing/exports.js"
72
+ },
73
+ "./di": {
74
+ "types": "./dist/dts/di/di.d.ts",
75
+ "default": "./dist/esm/di/di.js"
64
76
  }
65
77
  },
66
78
  "unpkg": "dist/fast-element.min.js",