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

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 (104) hide show
  1. package/.eslintrc.json +1 -12
  2. package/CHANGELOG.json +387 -1
  3. package/CHANGELOG.md +74 -2
  4. package/README.md +2 -2
  5. package/dist/dts/components/attributes.d.ts +4 -1
  6. package/dist/dts/components/controller.d.ts +12 -11
  7. package/dist/dts/components/fast-definitions.d.ts +10 -2
  8. package/dist/dts/components/fast-element.d.ts +12 -5
  9. package/dist/dts/context.d.ts +157 -0
  10. package/dist/dts/debug.d.ts +1 -0
  11. package/dist/dts/hooks.d.ts +20 -0
  12. package/dist/dts/index.d.ts +16 -15
  13. package/dist/dts/index.debug.d.ts +2 -0
  14. package/dist/dts/index.rollup.d.ts +2 -0
  15. package/dist/dts/index.rollup.debug.d.ts +3 -0
  16. package/dist/dts/interfaces.d.ts +145 -0
  17. package/dist/dts/metadata.d.ts +25 -0
  18. package/dist/dts/observation/arrays.d.ts +207 -0
  19. package/dist/dts/observation/behavior.d.ts +4 -4
  20. package/dist/dts/observation/notifier.d.ts +18 -18
  21. package/dist/dts/observation/observable.d.ts +56 -18
  22. package/dist/dts/observation/splice-strategies.d.ts +13 -0
  23. package/dist/dts/observation/update-queue.d.ts +40 -0
  24. package/dist/dts/platform.d.ts +18 -67
  25. package/dist/dts/polyfills.d.ts +8 -0
  26. package/dist/dts/styles/css-directive.d.ts +43 -5
  27. package/dist/dts/styles/css.d.ts +19 -3
  28. package/dist/dts/styles/element-styles.d.ts +42 -62
  29. package/dist/dts/templating/binding-signal.d.ts +38 -0
  30. package/dist/dts/templating/binding-two-way.d.ts +56 -0
  31. package/dist/dts/templating/binding.d.ts +233 -65
  32. package/dist/dts/templating/children.d.ts +18 -15
  33. package/dist/dts/templating/compiler.d.ts +46 -28
  34. package/dist/dts/templating/dom.d.ts +41 -0
  35. package/dist/dts/templating/html-directive.d.ts +181 -43
  36. package/dist/dts/templating/markup.d.ts +48 -0
  37. package/dist/dts/templating/node-observation.d.ts +45 -29
  38. package/dist/dts/templating/ref.d.ts +6 -12
  39. package/dist/dts/templating/repeat.d.ts +26 -14
  40. package/dist/dts/templating/slotted.d.ts +13 -14
  41. package/dist/dts/templating/template.d.ts +27 -21
  42. package/dist/dts/templating/view.d.ts +15 -22
  43. package/dist/{tsdoc-metadata.json → dts/tsdoc-metadata.json} +1 -1
  44. package/dist/dts/utilities.d.ts +40 -0
  45. package/dist/esm/components/attributes.js +25 -24
  46. package/dist/esm/components/controller.js +77 -57
  47. package/dist/esm/components/fast-definitions.js +16 -22
  48. package/dist/esm/components/fast-element.js +10 -2
  49. package/dist/esm/context.js +159 -0
  50. package/dist/esm/debug.js +30 -0
  51. package/dist/esm/hooks.js +32 -0
  52. package/dist/esm/index.debug.js +2 -0
  53. package/dist/esm/index.js +19 -14
  54. package/dist/esm/index.rollup.debug.js +3 -0
  55. package/dist/esm/index.rollup.js +2 -0
  56. package/dist/esm/interfaces.js +8 -1
  57. package/dist/esm/metadata.js +60 -0
  58. package/dist/esm/observation/arrays.js +269 -0
  59. package/dist/esm/observation/notifier.js +27 -35
  60. package/dist/esm/observation/observable.js +93 -68
  61. package/dist/esm/observation/{array-change-records.js → splice-strategies.js} +136 -62
  62. package/dist/esm/observation/update-queue.js +67 -0
  63. package/dist/esm/platform.js +36 -42
  64. package/dist/esm/polyfills.js +85 -0
  65. package/dist/esm/styles/css-directive.js +29 -13
  66. package/dist/esm/styles/css.js +27 -40
  67. package/dist/esm/styles/element-styles.js +65 -104
  68. package/dist/esm/templating/binding-signal.js +84 -0
  69. package/dist/esm/templating/binding-two-way.js +82 -0
  70. package/dist/esm/templating/binding.js +306 -153
  71. package/dist/esm/templating/children.js +33 -23
  72. package/dist/esm/templating/compiler.js +236 -152
  73. package/dist/esm/templating/dom.js +49 -0
  74. package/dist/esm/templating/html-directive.js +128 -40
  75. package/dist/esm/templating/markup.js +75 -0
  76. package/dist/esm/templating/node-observation.js +50 -45
  77. package/dist/esm/templating/ref.js +7 -16
  78. package/dist/esm/templating/repeat.js +39 -36
  79. package/dist/esm/templating/slotted.js +23 -20
  80. package/dist/esm/templating/template.js +51 -95
  81. package/dist/esm/templating/view.js +44 -43
  82. package/dist/esm/templating/when.js +2 -1
  83. package/dist/esm/utilities.js +139 -0
  84. package/dist/fast-element.api.json +11789 -5377
  85. package/dist/fast-element.d.ts +1178 -530
  86. package/dist/fast-element.debug.js +3722 -0
  87. package/dist/fast-element.debug.min.js +1 -0
  88. package/dist/fast-element.js +3484 -4033
  89. package/dist/fast-element.min.js +1 -1
  90. package/dist/fast-element.untrimmed.d.ts +2699 -0
  91. package/docs/api-report.md +472 -219
  92. package/docs/fast-element-2-changes.md +15 -0
  93. package/docs/guide/declaring-templates.md +4 -4
  94. package/docs/guide/defining-elements.md +2 -2
  95. package/docs/guide/next-steps.md +2 -2
  96. package/docs/guide/observables-and-state.md +1 -1
  97. package/docs/guide/using-directives.md +1 -1
  98. package/karma.conf.cjs +6 -17
  99. package/package.json +63 -15
  100. package/dist/dts/dom.d.ts +0 -112
  101. package/dist/dts/observation/array-change-records.d.ts +0 -48
  102. package/dist/dts/observation/array-observer.d.ts +0 -9
  103. package/dist/esm/dom.js +0 -207
  104. package/dist/esm/observation/array-observer.js +0 -177
@@ -1,177 +0,0 @@
1
- import { DOM } from "../dom.js";
2
- import { calcSplices, newSplice, projectArraySplices } from "./array-change-records.js";
3
- import { SubscriberSet } from "./notifier.js";
4
- import { Observable } from "./observable.js";
5
- let arrayObservationEnabled = false;
6
- function adjustIndex(changeRecord, array) {
7
- let index = changeRecord.index;
8
- const arrayLength = array.length;
9
- if (index > arrayLength) {
10
- index = arrayLength - changeRecord.addedCount;
11
- }
12
- else if (index < 0) {
13
- index =
14
- arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
15
- }
16
- if (index < 0) {
17
- index = 0;
18
- }
19
- changeRecord.index = index;
20
- return changeRecord;
21
- }
22
- class ArrayObserver extends SubscriberSet {
23
- constructor(source) {
24
- super(source);
25
- this.oldCollection = void 0;
26
- this.splices = void 0;
27
- this.needsQueue = true;
28
- this.call = this.flush;
29
- Reflect.defineProperty(source, "$fastController", {
30
- value: this,
31
- enumerable: false,
32
- });
33
- }
34
- subscribe(subscriber) {
35
- this.flush();
36
- super.subscribe(subscriber);
37
- }
38
- addSplice(splice) {
39
- if (this.splices === void 0) {
40
- this.splices = [splice];
41
- }
42
- else {
43
- this.splices.push(splice);
44
- }
45
- if (this.needsQueue) {
46
- this.needsQueue = false;
47
- DOM.queueUpdate(this);
48
- }
49
- }
50
- reset(oldCollection) {
51
- this.oldCollection = oldCollection;
52
- if (this.needsQueue) {
53
- this.needsQueue = false;
54
- DOM.queueUpdate(this);
55
- }
56
- }
57
- flush() {
58
- const splices = this.splices;
59
- const oldCollection = this.oldCollection;
60
- if (splices === void 0 && oldCollection === void 0) {
61
- return;
62
- }
63
- this.needsQueue = true;
64
- this.splices = void 0;
65
- this.oldCollection = void 0;
66
- const finalSplices = oldCollection === void 0
67
- ? projectArraySplices(this.source, splices)
68
- : calcSplices(this.source, 0, this.source.length, oldCollection, 0, oldCollection.length);
69
- this.notify(finalSplices);
70
- }
71
- }
72
- /* eslint-disable prefer-rest-params */
73
- /* eslint-disable @typescript-eslint/explicit-function-return-type */
74
- /**
75
- * Enables the array observation mechanism.
76
- * @remarks
77
- * Array observation is enabled automatically when using the
78
- * {@link RepeatDirective}, so calling this API manually is
79
- * not typically necessary.
80
- * @public
81
- */
82
- export function enableArrayObservation() {
83
- if (arrayObservationEnabled) {
84
- return;
85
- }
86
- arrayObservationEnabled = true;
87
- Observable.setArrayObserverFactory((collection) => {
88
- return new ArrayObserver(collection);
89
- });
90
- const proto = Array.prototype;
91
- // Don't patch Array if it has already been patched
92
- // by another copy of fast-element.
93
- if (proto.$fastPatch) {
94
- return;
95
- }
96
- Reflect.defineProperty(proto, "$fastPatch", {
97
- value: 1,
98
- enumerable: false,
99
- });
100
- const pop = proto.pop;
101
- const push = proto.push;
102
- const reverse = proto.reverse;
103
- const shift = proto.shift;
104
- const sort = proto.sort;
105
- const splice = proto.splice;
106
- const unshift = proto.unshift;
107
- proto.pop = function () {
108
- const notEmpty = this.length > 0;
109
- const methodCallResult = pop.apply(this, arguments);
110
- const o = this.$fastController;
111
- if (o !== void 0 && notEmpty) {
112
- o.addSplice(newSplice(this.length, [methodCallResult], 0));
113
- }
114
- return methodCallResult;
115
- };
116
- proto.push = function () {
117
- const methodCallResult = push.apply(this, arguments);
118
- const o = this.$fastController;
119
- if (o !== void 0) {
120
- o.addSplice(adjustIndex(newSplice(this.length - arguments.length, [], arguments.length), this));
121
- }
122
- return methodCallResult;
123
- };
124
- proto.reverse = function () {
125
- let oldArray;
126
- const o = this.$fastController;
127
- if (o !== void 0) {
128
- o.flush();
129
- oldArray = this.slice();
130
- }
131
- const methodCallResult = reverse.apply(this, arguments);
132
- if (o !== void 0) {
133
- o.reset(oldArray);
134
- }
135
- return methodCallResult;
136
- };
137
- proto.shift = function () {
138
- const notEmpty = this.length > 0;
139
- const methodCallResult = shift.apply(this, arguments);
140
- const o = this.$fastController;
141
- if (o !== void 0 && notEmpty) {
142
- o.addSplice(newSplice(0, [methodCallResult], 0));
143
- }
144
- return methodCallResult;
145
- };
146
- proto.sort = function () {
147
- let oldArray;
148
- const o = this.$fastController;
149
- if (o !== void 0) {
150
- o.flush();
151
- oldArray = this.slice();
152
- }
153
- const methodCallResult = sort.apply(this, arguments);
154
- if (o !== void 0) {
155
- o.reset(oldArray);
156
- }
157
- return methodCallResult;
158
- };
159
- proto.splice = function () {
160
- const methodCallResult = splice.apply(this, arguments);
161
- const o = this.$fastController;
162
- if (o !== void 0) {
163
- o.addSplice(adjustIndex(newSplice(+arguments[0], methodCallResult, arguments.length > 2 ? arguments.length - 2 : 0), this));
164
- }
165
- return methodCallResult;
166
- };
167
- proto.unshift = function () {
168
- const methodCallResult = unshift.apply(this, arguments);
169
- const o = this.$fastController;
170
- if (o !== void 0) {
171
- o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));
172
- }
173
- return methodCallResult;
174
- };
175
- }
176
- /* eslint-enable prefer-rest-params */
177
- /* eslint-enable @typescript-eslint/explicit-function-return-type */