@microsoft/fast-element 2.0.0-beta.1 → 2.0.0-beta.10
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.
- package/CHANGELOG.json +333 -0
- package/CHANGELOG.md +106 -1
- package/dist/dts/components/attributes.d.ts +10 -0
- package/dist/dts/components/{controller.d.ts → element-controller.d.ts} +24 -25
- package/dist/dts/components/fast-definitions.d.ts +43 -9
- package/dist/dts/components/fast-element.d.ts +15 -21
- package/dist/dts/context.d.ts +157 -0
- package/dist/dts/di/di.d.ts +899 -0
- package/dist/dts/index.d.ts +2 -2
- package/dist/dts/interfaces.d.ts +44 -12
- package/dist/dts/metadata.d.ts +25 -0
- package/dist/dts/observation/arrays.d.ts +1 -1
- package/dist/dts/observation/observable.d.ts +101 -75
- package/dist/dts/pending-task.d.ts +20 -0
- package/dist/dts/platform.d.ts +6 -0
- package/dist/dts/state/exports.d.ts +3 -0
- package/dist/dts/state/reactive.d.ts +8 -0
- package/dist/dts/state/state.d.ts +141 -0
- package/dist/dts/state/visitor.d.ts +6 -0
- package/dist/dts/state/watch.d.ts +10 -0
- package/dist/dts/styles/css-directive.d.ts +2 -2
- package/dist/dts/styles/element-styles.d.ts +9 -3
- package/dist/dts/styles/host.d.ts +68 -0
- package/dist/dts/templating/binding-signal.d.ts +21 -0
- package/dist/dts/templating/binding-two-way.d.ts +39 -0
- package/dist/dts/templating/binding.d.ts +69 -294
- package/dist/dts/templating/children.d.ts +1 -1
- package/dist/dts/templating/compiler.d.ts +1 -2
- package/dist/dts/templating/html-directive.d.ts +93 -35
- package/dist/dts/templating/node-observation.d.ts +4 -5
- package/dist/dts/templating/ref.d.ts +5 -13
- package/dist/dts/templating/render.d.ts +272 -0
- package/dist/dts/templating/repeat.d.ts +20 -75
- package/dist/dts/templating/slotted.d.ts +1 -1
- package/dist/dts/templating/template.d.ts +12 -61
- package/dist/dts/templating/view.d.ts +77 -12
- package/dist/dts/templating/when.d.ts +3 -3
- package/dist/dts/testing/exports.d.ts +3 -0
- package/dist/dts/testing/fakes.d.ts +4 -0
- package/dist/dts/testing/fixture.d.ts +84 -0
- package/dist/dts/testing/timeout.d.ts +7 -0
- package/dist/{tsdoc-metadata.json → dts/tsdoc-metadata.json} +0 -0
- package/dist/dts/utilities.d.ts +0 -18
- package/dist/esm/components/attributes.js +13 -4
- package/dist/esm/components/{controller.js → element-controller.js} +95 -105
- package/dist/esm/components/fast-definitions.js +38 -28
- package/dist/esm/components/fast-element.js +31 -12
- package/dist/esm/context.js +163 -0
- package/dist/esm/debug.js +36 -4
- package/dist/esm/di/di.js +1435 -0
- package/dist/esm/index.js +2 -1
- package/dist/esm/interfaces.js +4 -0
- package/dist/esm/metadata.js +60 -0
- package/dist/esm/observation/arrays.js +304 -3
- package/dist/esm/observation/observable.js +81 -87
- package/dist/esm/pending-task.js +16 -0
- package/dist/esm/platform.js +25 -1
- package/dist/esm/state/exports.js +3 -0
- package/dist/esm/state/reactive.js +34 -0
- package/dist/esm/state/state.js +148 -0
- package/dist/esm/state/visitor.js +28 -0
- package/dist/esm/state/watch.js +36 -0
- package/dist/esm/styles/css.js +4 -4
- package/dist/esm/styles/element-styles.js +14 -0
- package/dist/esm/{observation/behavior.js → styles/host.js} +0 -0
- package/dist/esm/templating/binding-signal.js +83 -0
- package/dist/esm/templating/binding-two-way.js +103 -0
- package/dist/esm/templating/binding.js +134 -414
- package/dist/esm/templating/compiler.js +30 -7
- package/dist/esm/templating/html-directive.js +100 -28
- package/dist/esm/templating/node-observation.js +9 -8
- package/dist/esm/templating/ref.js +4 -12
- package/dist/esm/templating/render.js +391 -0
- package/dist/esm/templating/repeat.js +96 -72
- package/dist/esm/templating/template.js +11 -29
- package/dist/esm/templating/view.js +107 -29
- package/dist/esm/templating/when.js +5 -4
- package/dist/esm/testing/exports.js +3 -0
- package/dist/esm/testing/fakes.js +76 -0
- package/dist/esm/testing/fixture.js +86 -0
- package/dist/esm/testing/timeout.js +24 -0
- package/dist/esm/utilities.js +0 -95
- package/dist/fast-element.api.json +9034 -10524
- package/dist/fast-element.d.ts +707 -811
- package/dist/fast-element.debug.js +1133 -850
- package/dist/fast-element.debug.min.js +1 -1
- package/dist/fast-element.js +1097 -846
- package/dist/fast-element.min.js +1 -1
- package/dist/fast-element.untrimmed.d.ts +724 -818
- package/docs/api-report.md +264 -305
- package/package.json +39 -10
- package/dist/dts/hooks.d.ts +0 -20
- package/dist/dts/observation/behavior.d.ts +0 -19
- package/dist/dts/observation/splice-strategies.d.ts +0 -13
- package/dist/esm/hooks.js +0 -32
- package/dist/esm/observation/splice-strategies.js +0 -400
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import "./interfaces.js";
|
|
2
|
+
import { Metadata } from "./metadata.js";
|
|
3
|
+
import { FAST } from "./platform.js";
|
|
4
|
+
const contextEventType = "context-request";
|
|
5
|
+
let requestStrategy;
|
|
6
|
+
/**
|
|
7
|
+
* Enables using the {@link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md | W3C Community Context protocol.}
|
|
8
|
+
* @beta
|
|
9
|
+
*/
|
|
10
|
+
export const Context = Object.freeze({
|
|
11
|
+
/**
|
|
12
|
+
* The event type used for W3C Context Protocol requests.
|
|
13
|
+
*/
|
|
14
|
+
eventType: contextEventType,
|
|
15
|
+
/**
|
|
16
|
+
* Creates a W3C Community Protocol-based Context object to use in requesting/providing
|
|
17
|
+
* context through the DOM.
|
|
18
|
+
* @param name - The name to use for the connext. Useful in debugging.
|
|
19
|
+
* @param initialValue - An optional initial value to use if a context handler isn't found.
|
|
20
|
+
*/
|
|
21
|
+
create(name, initialValue) {
|
|
22
|
+
const Interface = function (target, property, index) {
|
|
23
|
+
if (target == null || new.target !== undefined) {
|
|
24
|
+
throw FAST.error(1501 /* Message.noRegistrationForContext */, {
|
|
25
|
+
name: Interface.name,
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
if (property) {
|
|
29
|
+
Context.defineProperty(target, property, Interface);
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
const types = Metadata.getOrCreateAnnotationParamTypes(target);
|
|
33
|
+
types[index] = Interface;
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
Interface.$isInterface = true;
|
|
37
|
+
Interface.initialValue = initialValue;
|
|
38
|
+
Reflect.defineProperty(Interface, "name", { value: name });
|
|
39
|
+
Interface.handle = (target, callback) => Context.handle(target, callback, Interface);
|
|
40
|
+
Interface.provide = (target, value) => Context.provide(target, Interface, value);
|
|
41
|
+
Interface.get = (target) => Context.get(target, Interface);
|
|
42
|
+
Interface.request = (target, callback, multiple) => Context.request(target, Interface, callback, multiple);
|
|
43
|
+
Interface.toString = () => `Context<${Interface.name}>`;
|
|
44
|
+
return Interface;
|
|
45
|
+
},
|
|
46
|
+
/**
|
|
47
|
+
* Sets the strategy used by all FAST-specific context requests made through the
|
|
48
|
+
* Context.request, Context.get, Context.defineProperty, and ContextDecorator APIs.
|
|
49
|
+
* @param strategy - The strategy to use. By default, the strategy is Context.dispatch.
|
|
50
|
+
*/
|
|
51
|
+
setDefaultRequestStrategy(strategy) {
|
|
52
|
+
requestStrategy = strategy;
|
|
53
|
+
},
|
|
54
|
+
/**
|
|
55
|
+
* Gets the context value for the target node or returns the initial value if
|
|
56
|
+
* a context handler is not found.
|
|
57
|
+
* @param target - The target to get the context for.
|
|
58
|
+
* @param context - The context to locate.
|
|
59
|
+
* @returns The context value.
|
|
60
|
+
* @remarks
|
|
61
|
+
* Uses the default request strategy to locate the context. If no context is found
|
|
62
|
+
* then the initial value of the context is returned.
|
|
63
|
+
*/
|
|
64
|
+
get(target, context) {
|
|
65
|
+
var _a;
|
|
66
|
+
let value;
|
|
67
|
+
requestStrategy(target, context, found => (value = found), false);
|
|
68
|
+
return (_a = value) !== null && _a !== void 0 ? _a : context.initialValue;
|
|
69
|
+
},
|
|
70
|
+
/**
|
|
71
|
+
* Requests the context value for the target node.
|
|
72
|
+
* @param target - The target to request the context for.
|
|
73
|
+
* @param context - The context to locate.
|
|
74
|
+
* @param callback - A callback to invoke with the context value.
|
|
75
|
+
* @param multiple - Whether the context requestor expects to handle updates
|
|
76
|
+
* to the context value after the initial request.
|
|
77
|
+
* @remarks
|
|
78
|
+
* Uses the default request strategy to locate the context.
|
|
79
|
+
*/
|
|
80
|
+
request(target, context, callback, multiple = false) {
|
|
81
|
+
requestStrategy(target, context, callback, multiple);
|
|
82
|
+
},
|
|
83
|
+
/**
|
|
84
|
+
*
|
|
85
|
+
* @param target - The target to dispatch the context event on.
|
|
86
|
+
* @param context - The context to locate.
|
|
87
|
+
* @param callback - The callback to invoke with the context value.
|
|
88
|
+
* @param multiple - Whether the context requestor expects to handle updates
|
|
89
|
+
* to the context value after the initial request.
|
|
90
|
+
* @remarks
|
|
91
|
+
* This API does NOT use the default request strategy. It always dispatches
|
|
92
|
+
* an event through the DOM.
|
|
93
|
+
*/
|
|
94
|
+
dispatch(target, context, callback, multiple = false) {
|
|
95
|
+
target.dispatchEvent(new ContextEvent(context, callback, multiple));
|
|
96
|
+
},
|
|
97
|
+
provide(target, context, value) {
|
|
98
|
+
this.handle(target, (event) => {
|
|
99
|
+
event.stopImmediatePropagation();
|
|
100
|
+
event.callback(value);
|
|
101
|
+
}, context);
|
|
102
|
+
},
|
|
103
|
+
/**
|
|
104
|
+
*
|
|
105
|
+
* @param target - The target on which to handle context requests.
|
|
106
|
+
* @param callback - The callback to invoke when a context request is received.
|
|
107
|
+
* @param context - The context to handle requests for.
|
|
108
|
+
* @remarks
|
|
109
|
+
* If a context is not provided then the callback will be invoked for all context
|
|
110
|
+
* requests that are received on the target.
|
|
111
|
+
*/
|
|
112
|
+
handle(target, callback, context) {
|
|
113
|
+
if (context) {
|
|
114
|
+
target.addEventListener(contextEventType, (event) => {
|
|
115
|
+
if (event.context === context) {
|
|
116
|
+
callback(event);
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
target.addEventListener(contextEventType, callback);
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
/**
|
|
125
|
+
* Defines a getter-only property on the target that will return the context
|
|
126
|
+
* value for the target.
|
|
127
|
+
* @param target The target to define the property on.
|
|
128
|
+
* @param propertyName The name of the property to define.
|
|
129
|
+
* @param context The context that will be used to retrieve the property value.
|
|
130
|
+
* @remarks
|
|
131
|
+
* Uses the default request strategy to locate the context and will return the
|
|
132
|
+
* initialValue if the context isn't handled.
|
|
133
|
+
*/
|
|
134
|
+
defineProperty(target, propertyName, context) {
|
|
135
|
+
const field = `$di_${propertyName}`;
|
|
136
|
+
Reflect.defineProperty(target, propertyName, {
|
|
137
|
+
get: function () {
|
|
138
|
+
var _a;
|
|
139
|
+
return (_a = this[field]) !== null && _a !== void 0 ? _a : (this[field] = Context.get(this, context));
|
|
140
|
+
},
|
|
141
|
+
});
|
|
142
|
+
},
|
|
143
|
+
});
|
|
144
|
+
Context.setDefaultRequestStrategy(Context.dispatch);
|
|
145
|
+
/**
|
|
146
|
+
* An event fired by a context requester to signal it desires a named context.
|
|
147
|
+
*
|
|
148
|
+
* A provider should inspect the `context` property of the event to determine if it has a value that can
|
|
149
|
+
* satisfy the request, calling the `callback` with the requested value if so.
|
|
150
|
+
*
|
|
151
|
+
* If the requested context event contains a truthy `multiple` value, then a provider can call the callback
|
|
152
|
+
* multiple times if the value is changed, if this is the case the provider should pass a `dispose`
|
|
153
|
+
* method to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
|
|
154
|
+
* @public
|
|
155
|
+
*/
|
|
156
|
+
export class ContextEvent extends Event {
|
|
157
|
+
constructor(context, callback, multiple) {
|
|
158
|
+
super(contextEventType, { bubbles: true, composed: true });
|
|
159
|
+
this.context = context;
|
|
160
|
+
this.callback = callback;
|
|
161
|
+
this.multiple = multiple;
|
|
162
|
+
}
|
|
163
|
+
}
|
package/dist/esm/debug.js
CHANGED
|
@@ -11,19 +11,51 @@ const debugMessages = {
|
|
|
11
11
|
[1101 /* needsArrayObservation */]: "Must call enableArrayObservation before observing arrays.",
|
|
12
12
|
[1201 /* onlySetHTMLPolicyOnce */]: "The HTML policy can only be set once.",
|
|
13
13
|
[1202 /* bindingInnerHTMLRequiresTrustedTypes */]: "To bind innerHTML, you must use a TrustedTypesPolicy.",
|
|
14
|
+
[1203 /* twoWayBindingRequiresObservables */]: "View=>Model update skipped. To use twoWay binding, the target property must be observable.",
|
|
15
|
+
[1204 /* hostBindingWithoutHost */]: "No host element is present. Cannot bind host with ${name}.",
|
|
16
|
+
[1205 /* unsupportedBindingBehavior */]: "The requested binding behavior is not supported by the binding engine.",
|
|
14
17
|
[1401 /* missingElementDefinition */]: "Missing FASTElement definition.",
|
|
18
|
+
[1501 /* noRegistrationForContext */]: "No registration for Context/Interface '${name}'.",
|
|
19
|
+
[1502 /* noFactoryForResolver */]: "Dependency injection resolver for '${key}' returned a null factory.",
|
|
20
|
+
[1503 /* invalidResolverStrategy */]: "Invalid dependency injection resolver strategy specified '${strategy}'.",
|
|
21
|
+
[1504 /* cannotAutoregisterDependency */]: "Unable to autoregister dependency.",
|
|
22
|
+
[1505 /* cannotResolveKey */]: "Unable to resolve dependency injection key '${key}'.",
|
|
23
|
+
[1506 /* cannotConstructNativeFunction */]: "'${name}' is a native function and therefore cannot be safely constructed by DI. If this is intentional, please use a callback or cachedCallback resolver.",
|
|
24
|
+
[1507 /* cannotJITRegisterNonConstructor */]: "Attempted to jitRegister something that is not a constructor '${value}'. Did you forget to register this dependency?",
|
|
25
|
+
[1508 /* cannotJITRegisterIntrinsic */]: "Attempted to jitRegister an intrinsic type '${value}'. Did you forget to add @inject(Key)?",
|
|
26
|
+
[1509 /* cannotJITRegisterInterface */]: "Attempted to jitRegister an interface '${value}'.",
|
|
27
|
+
[1510 /* invalidResolver */]: "A valid resolver was not returned from the register method.",
|
|
28
|
+
[1511 /* invalidKey */]: "Key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?",
|
|
29
|
+
[1512 /* noDefaultResolver */]: "'${key}' not registered. Did you forget to add @singleton()?",
|
|
30
|
+
[1513 /* cyclicDependency */]: "Cyclic dependency found '${name}'.",
|
|
31
|
+
[1514 /* connectUpdateRequiresController */]: "Injected properties that are updated on changes to DOM connectivity require the target object to be an instance of FASTElement.",
|
|
15
32
|
};
|
|
33
|
+
const allPlaceholders = /(\$\{\w+?})/g;
|
|
34
|
+
const placeholder = /\$\{(\w+?)}/g;
|
|
35
|
+
const noValues = Object.freeze({});
|
|
36
|
+
function formatMessage(message, values) {
|
|
37
|
+
return message
|
|
38
|
+
.split(allPlaceholders)
|
|
39
|
+
.map(v => {
|
|
40
|
+
var _a;
|
|
41
|
+
const replaced = v.replace(placeholder, "$1");
|
|
42
|
+
return String((_a = values[replaced]) !== null && _a !== void 0 ? _a : v);
|
|
43
|
+
})
|
|
44
|
+
.join("");
|
|
45
|
+
}
|
|
16
46
|
Object.assign(FAST, {
|
|
17
47
|
addMessages(messages) {
|
|
18
48
|
Object.assign(debugMessages, messages);
|
|
19
49
|
},
|
|
20
|
-
warn(code,
|
|
50
|
+
warn(code, values = noValues) {
|
|
21
51
|
var _a;
|
|
22
|
-
|
|
52
|
+
const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Warning";
|
|
53
|
+
console.warn(formatMessage(message, values));
|
|
23
54
|
},
|
|
24
|
-
error(code,
|
|
55
|
+
error(code, values = noValues) {
|
|
25
56
|
var _a;
|
|
26
|
-
|
|
57
|
+
const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Error";
|
|
58
|
+
return new Error(formatMessage(message, values));
|
|
27
59
|
},
|
|
28
60
|
});
|
|
29
61
|
export {};
|