@patternfly/pfe-core 2.0.0-next.8 → 2.0.0-rc.1
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/README.md +2 -2
- package/controllers/cascade-controller.js +136 -2
- package/controllers/cascade-controller.js.map +1 -7
- package/controllers/css-variable-controller.js +13 -2
- package/controllers/css-variable-controller.js.map +1 -7
- package/controllers/floating-dom-controller.d.ts +35 -14
- package/controllers/floating-dom-controller.js +115 -2
- package/controllers/floating-dom-controller.js.map +1 -7
- package/controllers/internals-controller.d.ts +52 -0
- package/controllers/internals-controller.js +52 -0
- package/controllers/internals-controller.js.map +1 -0
- package/controllers/light-dom-controller.js +38 -2
- package/controllers/light-dom-controller.js.map +1 -7
- package/controllers/logger.js +90 -2
- package/controllers/logger.js.map +1 -7
- package/controllers/perf-controller.js +36 -2
- package/controllers/perf-controller.js.map +1 -7
- package/controllers/property-observer-controller.d.ts +3 -3
- package/controllers/property-observer-controller.js +33 -2
- package/controllers/property-observer-controller.js.map +1 -7
- package/controllers/roving-tabindex-controller.d.ts +48 -0
- package/controllers/roving-tabindex-controller.js +166 -0
- package/controllers/roving-tabindex-controller.js.map +1 -0
- package/controllers/scroll-spy-controller.d.ts +37 -0
- package/controllers/scroll-spy-controller.js +120 -0
- package/controllers/scroll-spy-controller.js.map +1 -0
- package/controllers/slot-controller.d.ts +3 -3
- package/controllers/slot-controller.js +148 -2
- package/controllers/slot-controller.js.map +1 -7
- package/controllers/style-controller.js +42 -2
- package/controllers/style-controller.js.map +1 -7
- package/core.d.ts +1 -1
- package/core.js +68 -2
- package/core.js.map +1 -7
- package/custom-elements.json +6315 -1
- package/decorators/bound.js +27 -2
- package/decorators/bound.js.map +1 -7
- package/decorators/cascades.js +18 -2
- package/decorators/cascades.js.map +1 -7
- package/decorators/deprecation.d.ts +1 -1
- package/decorators/deprecation.js +44 -2
- package/decorators/deprecation.js.map +1 -7
- package/decorators/initializer.js +21 -2
- package/decorators/initializer.js.map +1 -7
- package/decorators/observed.d.ts +1 -1
- package/decorators/observed.js +52 -2
- package/decorators/observed.js.map +1 -7
- package/decorators/time.js +36 -2
- package/decorators/time.js.map +1 -7
- package/decorators/trace.js +21 -2
- package/decorators/trace.js.map +1 -7
- package/decorators.d.ts +0 -2
- package/decorators.js +8 -2
- package/decorators.js.map +1 -7
- package/functions/debounce.js +28 -2
- package/functions/debounce.js.map +1 -7
- package/functions/deprecatedCustomEvent.js +12 -2
- package/functions/deprecatedCustomEvent.js.map +1 -7
- package/functions/isElementInView.d.ts +12 -0
- package/functions/isElementInView.js +31 -0
- package/functions/isElementInView.js.map +1 -0
- package/functions/random.js +9 -2
- package/functions/random.js.map +1 -7
- package/package.json +13 -24
- package/context.d.ts +0 -53
- package/context.js +0 -2
- package/context.js.map +0 -7
- package/controllers/color-context.d.ts +0 -114
- package/controllers/color-context.js +0 -2
- package/controllers/color-context.js.map +0 -7
- package/controllers/color-context.scss +0 -84
- package/decorators/color-context.d.ts +0 -4
- package/decorators/color-context.js +0 -2
- package/decorators/color-context.js.map +0 -7
- package/decorators/pfelement.d.ts +0 -10
- package/decorators/pfelement.js +0 -2
- package/decorators/pfelement.js.map +0 -7
package/decorators/bound.js
CHANGED
|
@@ -1,2 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
const configurable = true;
|
|
2
|
+
/**
|
|
3
|
+
* Binds a class method to the instance
|
|
4
|
+
*
|
|
5
|
+
* @example Binding an event listener
|
|
6
|
+
* ```ts
|
|
7
|
+
* private mo = new MutationObserver(this.onMutation);
|
|
8
|
+
*
|
|
9
|
+
* @bound onMutation(records: MutationRecord[]) {
|
|
10
|
+
* this.count = this.children.length;
|
|
11
|
+
* }
|
|
12
|
+
* ```
|
|
13
|
+
*/
|
|
14
|
+
export function bound(_, key, descriptor) {
|
|
15
|
+
if (typeof descriptor?.value !== 'function') {
|
|
16
|
+
throw new TypeError(`Only methods can be decorated with @bound. <${key ?? _.name}> is not a method!`);
|
|
17
|
+
} /* c8 ignore next */
|
|
18
|
+
return {
|
|
19
|
+
configurable,
|
|
20
|
+
get() {
|
|
21
|
+
const value = descriptor.value.bind(this);
|
|
22
|
+
Object.defineProperty(this, key, { value, configurable, writable: true });
|
|
23
|
+
return value;
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=bound.js.map
|
package/decorators/bound.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["bound.ts"],
|
|
4
|
-
"sourcesContent": ["const configurable = true;\n\n/**\n * Binds a class method to the instance\n *\n * @example Binding an event listener\n * ```ts\n * private mo = new MutationObserver(this.onMutation);\n *\n * @bound onMutation(records: MutationRecord[]) {\n * this.count = this.children.length;\n * }\n * ```\n */\nexport function bound(_: unknown, key: string, descriptor: PropertyDescriptor): PropertyDescriptor {\n if (typeof descriptor?.value !== 'function') {\n throw new TypeError(`Only methods can be decorated with @bound. <${key ?? (_ as () => void).name}> is not a method!`);\n } /* c8 ignore next */\n return {\n configurable,\n get() {\n const value = descriptor.value.bind(this);\n Object.defineProperty(this, key, { value, configurable, writable: true });\n return value;\n },\n };\n}\n"],
|
|
5
|
-
"mappings": "AAcO,SAASA,EAAMC,EAAYC,EAAaC,EAAoD,CACjG,GAAI,OAAOA,GAAY,OAAU,WAC/B,MAAM,IAAI,UAAU,+CAA+CD,GAAQD,EAAiB,wBAAwB,EAEtH,MAAO,CACL,gBACA,KAAM,CACJ,IAAMG,EAAQD,EAAW,MAAM,KAAK,IAAI,EACxC,cAAO,eAAe,KAAMD,EAAK,CAAE,MAAAE,EAAO,gBAAc,SAAU,EAAK,CAAC,EACjEA,CACT,CACF,CACF",
|
|
6
|
-
"names": ["bound", "_", "key", "descriptor", "value"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"bound.js","sourceRoot":"","sources":["bound.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,KAAK,CAAC,CAAU,EAAE,GAAW,EAAE,UAA8B;IAC3E,IAAI,OAAO,UAAU,EAAE,KAAK,KAAK,UAAU,EAAE;QAC3C,MAAM,IAAI,SAAS,CAAC,+CAA+C,GAAG,IAAK,CAAgB,CAAC,IAAI,oBAAoB,CAAC,CAAC;KACvH,CAAC,oBAAoB;IACtB,OAAO;QACL,YAAY;QACZ,GAAG;YACD,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1C,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;YAC1E,OAAO,KAAK,CAAC;QACf,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["const configurable = true;\n\n/**\n * Binds a class method to the instance\n *\n * @example Binding an event listener\n * ```ts\n * private mo = new MutationObserver(this.onMutation);\n *\n * @bound onMutation(records: MutationRecord[]) {\n * this.count = this.children.length;\n * }\n * ```\n */\nexport function bound(_: unknown, key: string, descriptor: PropertyDescriptor): PropertyDescriptor {\n if (typeof descriptor?.value !== 'function') {\n throw new TypeError(`Only methods can be decorated with @bound. <${key ?? (_ as () => void).name}> is not a method!`);\n } /* c8 ignore next */\n return {\n configurable,\n get() {\n const value = descriptor.value.bind(this);\n Object.defineProperty(this, key, { value, configurable, writable: true });\n return value;\n },\n };\n}\n"]}
|
package/decorators/cascades.js
CHANGED
|
@@ -1,2 +1,18 @@
|
|
|
1
|
-
import{CascadeController
|
|
2
|
-
|
|
1
|
+
import { CascadeController } from '../controllers/cascade-controller.js';
|
|
2
|
+
/**
|
|
3
|
+
* Cascades the decorated attribute to children
|
|
4
|
+
*/
|
|
5
|
+
export function cascades(...items) {
|
|
6
|
+
return function (proto, key) {
|
|
7
|
+
proto.constructor.addInitializer(x => {
|
|
8
|
+
const instance = x;
|
|
9
|
+
// You can have multiple `@cascades` decorators on an element
|
|
10
|
+
// and it will only get one CascadeController for all of them
|
|
11
|
+
if (!CascadeController.instances.has(instance)) {
|
|
12
|
+
CascadeController.instances.set(instance, new CascadeController(instance));
|
|
13
|
+
}
|
|
14
|
+
CascadeController.instances.get(instance)?.initProp(key, items);
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=cascades.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["cascades.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ReactiveElement } from 'lit';\n\nimport { CascadeController } from '../controllers/cascade-controller.js';\n\n/**\n * Cascades the decorated attribute to children\n */\nexport function cascades<T extends ReactiveElement>(...items: string[]): PropertyDecorator {\n return function(proto: T, key: string & keyof T) {\n (proto.constructor as typeof ReactiveElement).addInitializer(x => {\n const instance = x as ReactiveElement;\n // You can have multiple `@cascades` decorators on an element\n // and it will only get one CascadeController for all of them\n if (!CascadeController.instances.has(instance)) {\n CascadeController.instances.set(instance, new CascadeController(instance));\n }\n\n CascadeController.instances.get(instance)?.initProp(key, items);\n });\n } as PropertyDecorator;\n}\n"],
|
|
5
|
-
"mappings": "AAEA,OAAS,qBAAAA,MAAyB,uCAK3B,SAASC,KAAuCC,EAAoC,CACzF,OAAO,SAASC,EAAUC,EAAuB,CAC9CD,EAAM,YAAuC,eAAeE,GAAK,CAChE,IAAMC,EAAWD,EAGZL,EAAkB,UAAU,IAAIM,CAAQ,GAC3CN,EAAkB,UAAU,IAAIM,EAAU,IAAIN,EAAkBM,CAAQ,CAAC,EAG3EN,EAAkB,UAAU,IAAIM,CAAQ,GAAG,SAASF,EAAKF,CAAK,CAChE,CAAC,CACH,CACF",
|
|
6
|
-
"names": ["CascadeController", "cascades", "items", "proto", "key", "x", "instance"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"cascades.js","sourceRoot":"","sources":["cascades.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE;;GAEG;AACH,MAAM,UAAU,QAAQ,CAA4B,GAAG,KAAe;IACpE,OAAO,UAAS,KAAQ,EAAE,GAAqB;QAC5C,KAAK,CAAC,WAAsC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;YAC/D,MAAM,QAAQ,GAAG,CAAoB,CAAC;YACtC,6DAA6D;YAC7D,6DAA6D;YAC7D,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBAC9C,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;aAC5E;YAED,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;IACL,CAAsB,CAAC;AACzB,CAAC","sourcesContent":["import type { ReactiveElement } from 'lit';\n\nimport { CascadeController } from '../controllers/cascade-controller.js';\n\n/**\n * Cascades the decorated attribute to children\n */\nexport function cascades<T extends ReactiveElement>(...items: string[]): PropertyDecorator {\n return function(proto: T, key: string & keyof T) {\n (proto.constructor as typeof ReactiveElement).addInitializer(x => {\n const instance = x as ReactiveElement;\n // You can have multiple `@cascades` decorators on an element\n // and it will only get one CascadeController for all of them\n if (!CascadeController.instances.has(instance)) {\n CascadeController.instances.set(instance, new CascadeController(instance));\n }\n\n CascadeController.instances.get(instance)?.initProp(key, items);\n });\n } as PropertyDecorator;\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactiveElement, PropertyDeclaration } from 'lit';
|
|
2
|
-
export
|
|
2
|
+
export type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {
|
|
3
3
|
alias: string & K;
|
|
4
4
|
attribute: string;
|
|
5
5
|
};
|
|
@@ -1,2 +1,44 @@
|
|
|
1
|
-
import{Logger
|
|
2
|
-
|
|
1
|
+
import { Logger } from '../controllers/logger.js';
|
|
2
|
+
/**
|
|
3
|
+
* Aliases the decorated field to an existing property, and logs a warning if it is used
|
|
4
|
+
* @example deprecating an attribute
|
|
5
|
+
* ```ts
|
|
6
|
+
* @property({ reflect: true, attribute: 'color-palette'})
|
|
7
|
+
* colorPalette: ColorPalette = 'base';
|
|
8
|
+
*
|
|
9
|
+
* @deprecation('colorPalette') color?: ColorPalette;
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
export function deprecation(options) {
|
|
13
|
+
return function (proto, key) {
|
|
14
|
+
const { alias, ...deprecationOptions } = options;
|
|
15
|
+
const klass = proto.constructor;
|
|
16
|
+
const declaration = klass.getPropertyOptions(alias);
|
|
17
|
+
klass.createProperty(key, { ...declaration, ...deprecationOptions });
|
|
18
|
+
klass.addInitializer(instance => {
|
|
19
|
+
instance.addController(new Deprecation(instance, options, key));
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
class Deprecation {
|
|
24
|
+
constructor(host, options, deprecatedKey) {
|
|
25
|
+
this.host = host;
|
|
26
|
+
this.options = options;
|
|
27
|
+
this.deprecatedKey = deprecatedKey;
|
|
28
|
+
this.logged = false;
|
|
29
|
+
this.logger = new Logger(host);
|
|
30
|
+
}
|
|
31
|
+
hostUpdate() {
|
|
32
|
+
const { deprecatedKey, options: { alias } } = this;
|
|
33
|
+
if (this.host[deprecatedKey]) {
|
|
34
|
+
if (this.host[alias] !== this.host[deprecatedKey]) {
|
|
35
|
+
if (!this.logged) {
|
|
36
|
+
this.logger.warn(`${deprecatedKey} is deprecated, use ${alias} instead`);
|
|
37
|
+
this.logged = true;
|
|
38
|
+
}
|
|
39
|
+
this.host[alias] = this.host[deprecatedKey];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=deprecation.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["deprecation.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ReactiveElement, PropertyDeclaration, ReactiveController } from 'lit';\n\nimport { Logger } from '../controllers/logger.js';\n\nexport type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {\n alias: string & K;\n attribute: string;\n}\n\n/**\n * Aliases the decorated field to an existing property, and logs a warning if it is used\n * @example deprecating an attribute\n * ```ts\n * @property({ reflect: true, attribute: 'color-palette'})\n * colorPalette: ColorPalette = 'base';\n *\n * @deprecation('colorPalette') color?: ColorPalette;\n * ```\n */\nexport function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>) {\n return function<T extends ReactiveElement, L extends PropertyKey>(\n proto: Partial<Record<K | L, T>>,\n key: string & keyof T\n ) {\n const { alias, ...deprecationOptions } = options;\n const klass = (proto.constructor as typeof ReactiveElement);\n const declaration = klass.getPropertyOptions(alias);\n klass.createProperty(key, { ...declaration, ...deprecationOptions });\n klass.addInitializer(instance => {\n instance.addController(new Deprecation(instance as T, options, key));\n });\n };\n}\n\nclass Deprecation<T extends ReactiveElement, K extends PropertyKey> implements ReactiveController {\n private logger: Logger;\n\n private logged = false;\n\n constructor(\n private host: T,\n private options: DeprecationDeclaration<K>,\n private deprecatedKey: string & keyof T\n ) {\n this.logger = new Logger(host);\n }\n\n hostUpdate() {\n const { deprecatedKey, options: { alias } } = this;\n if (this.host[deprecatedKey]) {\n if (this.host[alias as keyof T] !== this.host[deprecatedKey]) {\n if (!this.logged) {\n this.logger.warn(`${deprecatedKey} is deprecated, use ${alias} instead`);\n this.logged = true;\n }\n this.host[alias as keyof T] = this.host[deprecatedKey];\n }\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "AAEA,OAAS,UAAAA,MAAc,2BAiBhB,SAASC,EAAmCC,EAAoC,CACrF,OAAO,SACLC,EACAC,EACA,CACA,GAAM,CAAE,MAAAC,KAAUC,CAAmB,EAAIJ,EACnCK,EAASJ,EAAM,YACfK,EAAcD,EAAM,mBAAmBF,CAAK,EAClDE,EAAM,eAAeH,EAAK,CAAE,GAAGI,EAAa,GAAGF,CAAmB,CAAC,EACnEC,EAAM,eAAeE,GAAY,CAC/BA,EAAS,cAAc,IAAIC,EAAYD,EAAeP,EAASE,CAAG,CAAC,CACrE,CAAC,CACH,CACF,CAEA,IAAMM,EAAN,KAAkG,CAKhG,YACUC,EACAT,EACAU,EACR,CAHQ,UAAAD,EACA,aAAAT,EACA,mBAAAU,EALV,KAAQ,OAAS,GAOf,KAAK,OAAS,IAAIZ,EAAOW,CAAI,CAC/B,CAEA,YAAa,CACX,GAAM,CAAE,cAAAC,EAAe,QAAS,CAAE,MAAAP,CAAM,CAAE,EAAI,KAC1C,KAAK,KAAKO,IACR,KAAK,KAAKP,KAAsB,KAAK,KAAKO,KACvC,KAAK,SACR,KAAK,OAAO,KAAK,GAAGA,wBAAoCP,WAAe,EACvE,KAAK,OAAS,IAEhB,KAAK,KAAKA,GAAoB,KAAK,KAAKO,GAG9C,CACF",
|
|
6
|
-
"names": ["Logger", "deprecation", "options", "proto", "key", "alias", "deprecationOptions", "klass", "declaration", "instance", "Deprecation", "host", "deprecatedKey"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"deprecation.js","sourceRoot":"","sources":["deprecation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAOlD;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAwB,OAAkC;IACnF,OAAO,UACL,KAAgC,EAChC,GAAqB;QAErB,MAAM,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,GAAG,OAAO,CAAC;QACjD,MAAM,KAAK,GAAI,KAAK,CAAC,WAAsC,CAAC;QAC5D,MAAM,WAAW,GAAG,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACpD,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,kBAAkB,EAAE,CAAC,CAAC;QACrE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;YAC9B,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAa,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;QACvE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,WAAW;IAKf,YACU,IAAO,EACP,OAAkC,EAClC,aAA+B;QAF/B,SAAI,GAAJ,IAAI,CAAG;QACP,YAAO,GAAP,OAAO,CAA2B;QAClC,kBAAa,GAAb,aAAa,CAAkB;QALjC,WAAM,GAAG,KAAK,CAAC;QAOrB,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,UAAU;QACR,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,GAAG,IAAI,CAAC;QACnD,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;YAC5B,IAAI,IAAI,CAAC,IAAI,CAAC,KAAgB,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE;gBAC5D,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;oBAChB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,aAAa,uBAAuB,KAAK,UAAU,CAAC,CAAC;oBACzE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;iBACpB;gBACD,IAAI,CAAC,IAAI,CAAC,KAAgB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACxD;SACF;IACH,CAAC;CACF","sourcesContent":["import type { ReactiveElement, PropertyDeclaration, ReactiveController } from 'lit';\n\nimport { Logger } from '../controllers/logger.js';\n\nexport type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {\n alias: string & K;\n attribute: string;\n}\n\n/**\n * Aliases the decorated field to an existing property, and logs a warning if it is used\n * @example deprecating an attribute\n * ```ts\n * @property({ reflect: true, attribute: 'color-palette'})\n * colorPalette: ColorPalette = 'base';\n *\n * @deprecation('colorPalette') color?: ColorPalette;\n * ```\n */\nexport function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>) {\n return function<T extends ReactiveElement, L extends PropertyKey>(\n proto: Partial<Record<K | L, T>>,\n key: string & keyof T\n ) {\n const { alias, ...deprecationOptions } = options;\n const klass = (proto.constructor as typeof ReactiveElement);\n const declaration = klass.getPropertyOptions(alias);\n klass.createProperty(key, { ...declaration, ...deprecationOptions });\n klass.addInitializer(instance => {\n instance.addController(new Deprecation(instance as T, options, key));\n });\n };\n}\n\nclass Deprecation<T extends ReactiveElement, K extends PropertyKey> implements ReactiveController {\n private logger: Logger;\n\n private logged = false;\n\n constructor(\n private host: T,\n private options: DeprecationDeclaration<K>,\n private deprecatedKey: string & keyof T\n ) {\n this.logger = new Logger(host);\n }\n\n hostUpdate() {\n const { deprecatedKey, options: { alias } } = this;\n if (this.host[deprecatedKey]) {\n if (this.host[alias as keyof T] !== this.host[deprecatedKey]) {\n if (!this.logged) {\n this.logger.warn(`${deprecatedKey} is deprecated, use ${alias} instead`);\n this.logged = true;\n }\n this.host[alias as keyof T] = this.host[deprecatedKey];\n }\n }\n }\n}\n"]}
|
|
@@ -1,2 +1,21 @@
|
|
|
1
|
-
import{LightDOMController
|
|
2
|
-
|
|
1
|
+
import { LightDOMController } from '../controllers/light-dom-controller.js';
|
|
2
|
+
/**
|
|
3
|
+
* Runs the decorated method in `connectedCallback`,
|
|
4
|
+
* provided the element has light children, and sets
|
|
5
|
+
* up a mutation observer to re-run the callback,
|
|
6
|
+
* unless opted-out with `{ observe: false }`
|
|
7
|
+
* @param options Set `observe` to `false` to skip mutation observer setup, or pass a MutationObserverInit as options
|
|
8
|
+
*/
|
|
9
|
+
export function initializer(options) {
|
|
10
|
+
return function (proto, key) {
|
|
11
|
+
// @TODO: allow multiple initializers
|
|
12
|
+
proto.constructor.addInitializer(instance => {
|
|
13
|
+
const initializer = proto[key];
|
|
14
|
+
const controller = new LightDOMController(instance, initializer, options);
|
|
15
|
+
if (instance.isConnected) {
|
|
16
|
+
controller.hostConnected();
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=initializer.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["initializer.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ReactiveElement } from 'lit';\nimport type { Options } from '../controllers/light-dom-controller.js';\n\nimport { LightDOMController } from '../controllers/light-dom-controller.js';\n\n/**\n * Runs the decorated method in `connectedCallback`,\n * provided the element has light children, and sets\n * up a mutation observer to re-run the callback,\n * unless opted-out with `{ observe: false }`\n * @param options Set `observe` to `false` to skip mutation observer setup, or pass a MutationObserverInit as options\n */\nexport function initializer<T extends ReactiveElement>(options?: Options) {\n return function(proto: T, key: string) {\n // @TODO: allow multiple initializers\n (proto.constructor as typeof ReactiveElement).addInitializer(instance => {\n const initializer = proto[key as keyof T] as unknown as () => void;\n const controller = new LightDOMController(instance as ReactiveElement, initializer, options);\n if (instance.isConnected) {\n controller.hostConnected();\n }\n });\n };\n}\n"],
|
|
5
|
-
"mappings": "AAGA,OAAS,sBAAAA,MAA0B,yCAS5B,SAASC,EAAuCC,EAAmB,CACxE,OAAO,SAASC,EAAUC,EAAa,CAEpCD,EAAM,YAAuC,eAAeE,GAAY,CACvE,IAAMJ,EAAcE,EAAMC,GACpBE,EAAa,IAAIN,EAAmBK,EAA6BJ,EAAaC,CAAO,EACvFG,EAAS,aACXC,EAAW,cAAc,CAE7B,CAAC,CACH,CACF",
|
|
6
|
-
"names": ["LightDOMController", "initializer", "options", "proto", "key", "instance", "controller"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"initializer.js","sourceRoot":"","sources":["initializer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAA4B,OAAiB;IACtE,OAAO,UAAS,KAAQ,EAAE,GAAW;QACnC,qCAAqC;QACpC,KAAK,CAAC,WAAsC,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;YACtE,MAAM,WAAW,GAAG,KAAK,CAAC,GAAc,CAA0B,CAAC;YACnE,MAAM,UAAU,GAAG,IAAI,kBAAkB,CAAC,QAA2B,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;YAC7F,IAAI,QAAQ,CAAC,WAAW,EAAE;gBACxB,UAAU,CAAC,aAAa,EAAE,CAAC;aAC5B;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type { ReactiveElement } from 'lit';\nimport type { Options } from '../controllers/light-dom-controller.js';\n\nimport { LightDOMController } from '../controllers/light-dom-controller.js';\n\n/**\n * Runs the decorated method in `connectedCallback`,\n * provided the element has light children, and sets\n * up a mutation observer to re-run the callback,\n * unless opted-out with `{ observe: false }`\n * @param options Set `observe` to `false` to skip mutation observer setup, or pass a MutationObserverInit as options\n */\nexport function initializer<T extends ReactiveElement>(options?: Options) {\n return function(proto: T, key: string) {\n // @TODO: allow multiple initializers\n (proto.constructor as typeof ReactiveElement).addInitializer(instance => {\n const initializer = proto[key as keyof T] as unknown as () => void;\n const controller = new LightDOMController(instance as ReactiveElement, initializer, options);\n if (instance.isConnected) {\n controller.hostConnected();\n }\n });\n };\n}\n"]}
|
package/decorators/observed.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ReactiveElement } from 'lit';
|
|
2
2
|
import type { ChangeCallback } from '../controllers/property-observer-controller.js';
|
|
3
|
-
|
|
3
|
+
type TypedFieldDecorator<T> = (proto: T, key: string | keyof T) => void;
|
|
4
4
|
/**
|
|
5
5
|
* Calls a _fooChanged method on the instance when the value changes.
|
|
6
6
|
* Works on any class field. When using on lit observed properties,
|
package/decorators/observed.js
CHANGED
|
@@ -1,2 +1,52 @@
|
|
|
1
|
-
import{observedController
|
|
2
|
-
|
|
1
|
+
import { observedController, PropertyObserverController, } from '../controllers/property-observer-controller.js';
|
|
2
|
+
export function observed(...as) {
|
|
3
|
+
/** @observed('_myCustomChangeCallback') */
|
|
4
|
+
if (as.length === 1) {
|
|
5
|
+
const [methodNameOrCallback] = as;
|
|
6
|
+
return function (proto, key) {
|
|
7
|
+
proto.constructor
|
|
8
|
+
.addInitializer(x => new PropertyObserverController(x));
|
|
9
|
+
observeProperty(proto, key, methodNameOrCallback);
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
else {
|
|
13
|
+
const [proto, key] = as;
|
|
14
|
+
proto.constructor
|
|
15
|
+
.addInitializer(x => new PropertyObserverController(x));
|
|
16
|
+
observeProperty(proto, key);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
export function observeProperty(proto, key, callbackOrMethod) {
|
|
20
|
+
const descriptor = Object.getOwnPropertyDescriptor(proto, key);
|
|
21
|
+
Object.defineProperty(proto, key, {
|
|
22
|
+
...descriptor,
|
|
23
|
+
configurable: true,
|
|
24
|
+
set(newVal) {
|
|
25
|
+
const oldVal = this[key];
|
|
26
|
+
// first, call any pre-existing setters, e.g. `@property`
|
|
27
|
+
descriptor?.set?.call(this, newVal);
|
|
28
|
+
// if the user passed a callback, call it
|
|
29
|
+
// e.g. `@observed((_, newVal) => console.log(newVal))`
|
|
30
|
+
// safe to call before connectedCallback, because it's impossible to get a `this` ref.
|
|
31
|
+
if (typeof callbackOrMethod === 'function') {
|
|
32
|
+
callbackOrMethod.call(this, oldVal, newVal);
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
// if the user passed a string method name, call it on `this`
|
|
36
|
+
// e.g. `@observed('_renderOptions')`
|
|
37
|
+
// otherwise, use a default method name e.g. `_fooChanged`
|
|
38
|
+
const actualMethodName = callbackOrMethod || `_${key}Changed`;
|
|
39
|
+
// if the component has already connected to the DOM, run the callback
|
|
40
|
+
// otherwise, If the component has not yet connected to the DOM,
|
|
41
|
+
// cache the old and new values. See PropertyObserverController above
|
|
42
|
+
if (this.hasUpdated) {
|
|
43
|
+
this[actualMethodName]?.(oldVal, newVal);
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
this[observedController].cache(key, actualMethodName, oldVal, newVal);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=observed.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["observed.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ReactiveElement } from 'lit';\nimport type {\n ChangeCallback,\n ChangeCallbackName,\n PropertyObserverHost,\n} from '../controllers/property-observer-controller.js';\n\nimport {\n observedController,\n PropertyObserverController,\n} from '../controllers/property-observer-controller.js';\n\ntype TypedFieldDecorator<T> = (proto: T, key: string | keyof T) => void ;\n\n/**\n * Calls a _fooChanged method on the instance when the value changes.\n * Works on any class field. When using on lit observed properties,\n * Make sure `@observed` is to the left (i.e. called after) the `@property`\n * or `@state` decorator.\n *\n * @example observing a lit property\n * ```ts\n * @observed @property() foo = 'bar';\n *\n * protected _fooChanged(oldValue?: string, newValue?: string) {}\n * ```\n *\n * @example using a custom callback\n * ```ts\n * @observed('_myCallback') size = 'lg';\n *\n * _myCallback(_, size) {...}\n * ```\n *\n * @example using an arrow function\n * ```ts\n * @observed((oldVal, newVal) => console.log(`Size changed from ${oldVal} to ${newVal}`))\n * ```\n */\nexport function observed<T extends ReactiveElement>(methodName: string): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(cb: ChangeCallback<T>): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(proto: T, key: string): void\nexport function observed<T extends ReactiveElement>(...as: any[]): void|TypedFieldDecorator<T> {\n /** @observed('_myCustomChangeCallback') */\n if (as.length === 1) {\n const [methodNameOrCallback] = as;\n return function(proto, key) {\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key as string & keyof T, methodNameOrCallback);\n };\n } else {\n const [proto, key] = as;\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key);\n }\n}\n\nexport function observeProperty<T extends ReactiveElement>(\n proto: T,\n key: string & keyof T,\n callbackOrMethod?: ChangeCallback<T>\n) {\n const descriptor = Object.getOwnPropertyDescriptor(proto, key);\n Object.defineProperty(proto, key, {\n ...descriptor,\n configurable: true,\n set(this: PropertyObserverHost<T>, newVal: T[keyof T]) {\n const oldVal = this[key as keyof T];\n // first, call any pre-existing setters, e.g. `@property`\n descriptor?.set?.call(this, newVal);\n\n // if the user passed a callback, call it\n // e.g. `@observed((_, newVal) => console.log(newVal))`\n // safe to call before connectedCallback, because it's impossible to get a `this` ref.\n if (typeof callbackOrMethod === 'function') {\n callbackOrMethod.call(this, oldVal, newVal);\n } else {\n // if the user passed a string method name, call it on `this`\n // e.g. `@observed('_renderOptions')`\n // otherwise, use a default method name e.g. `_fooChanged`\n const actualMethodName = callbackOrMethod || `_${key}Changed`;\n\n // if the component has already connected to the DOM, run the callback\n // otherwise, If the component has not yet connected to the DOM,\n // cache the old and new values. See PropertyObserverController above\n if (this.hasUpdated) {\n this[actualMethodName as ChangeCallbackName]?.(oldVal, newVal);\n } else {\n this[observedController].cache(key as string, actualMethodName, oldVal, newVal);\n }\n }\n },\n });\n}\n"],
|
|
5
|
-
"mappings": "AAOA,OACE,sBAAAA,EACA,8BAAAC,MACK,iDAgCA,SAASC,KAAuCC,EAAwC,CAE7F,GAAIA,EAAG,SAAW,EAAG,CACnB,GAAM,CAACC,CAAoB,EAAID,EAC/B,OAAO,SAASE,EAAOC,EAAK,CACzBD,EAAM,YACJ,eAAeE,GAAK,IAAIN,EAA2BM,CAAC,CAAC,EACxDC,EAAgBH,EAAOC,EAAyBF,CAAoB,CACtE,CACF,KAAO,CACL,GAAM,CAACC,EAAOC,CAAG,EAAIH,EACpBE,EAAM,YACJ,eAAeE,GAAK,IAAIN,EAA2BM,CAAC,CAAC,EACxDC,EAAgBH,EAAOC,CAAG,CAC5B,CACF,CAEO,SAASE,EACdH,EACAC,EACAG,EACA,CACA,IAAMC,EAAa,OAAO,yBAAyBL,EAAOC,CAAG,EAC7D,OAAO,eAAeD,EAAOC,EAAK,CAChC,GAAGI,EACH,aAAc,GACd,IAAmCC,EAAoB,CACrD,IAAMC,EAAS,KAAKN,GAOpB,GALAI,GAAY,KAAK,KAAK,KAAMC,CAAM,EAK9B,OAAOF,GAAqB,WAC9BA,EAAiB,KAAK,KAAMG,EAAQD,CAAM,MACrC,CAIL,IAAME,EAAmBJ,GAAoB,IAAIH,WAK7C,KAAK,WACP,KAAKO,KAA0CD,EAAQD,CAAM,EAE7D,KAAKX,GAAoB,MAAMM,EAAeO,EAAkBD,EAAQD,CAAM,CAElF,CACF,CACF,CAAC,CACH",
|
|
6
|
-
"names": ["observedController", "PropertyObserverController", "observed", "as", "methodNameOrCallback", "proto", "key", "x", "observeProperty", "callbackOrMethod", "descriptor", "newVal", "oldVal", "actualMethodName"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"observed.js","sourceRoot":"","sources":["observed.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,gDAAgD,CAAC;AAgCxD,MAAM,UAAU,QAAQ,CAA4B,GAAG,EAAS;IAC9D,2CAA2C;IAC3C,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE;QACnB,MAAM,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAAC;QAClC,OAAO,UAAS,KAAK,EAAE,GAAG;YACvB,KAAK,CAAC,WAAsC;iBAC1C,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1D,eAAe,CAAC,KAAK,EAAE,GAAuB,EAAE,oBAAoB,CAAC,CAAC;QACxE,CAAC,CAAC;KACH;SAAM;QACL,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC;QACvB,KAAK,CAAC,WAAsC;aAC1C,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1D,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;KAC7B;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,KAAQ,EACR,GAAqB,EACrB,gBAAoC;IAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC/D,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE;QAChC,GAAG,UAAU;QACb,YAAY,EAAE,IAAI;QAClB,GAAG,CAAgC,MAAkB;YACnD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAc,CAAC,CAAC;YACpC,yDAAyD;YACzD,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAEpC,yCAAyC;YACzC,uDAAuD;YACvD,sFAAsF;YACtF,IAAI,OAAO,gBAAgB,KAAK,UAAU,EAAE;gBAC1C,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;aAC7C;iBAAM;gBACL,6DAA6D;gBAC7D,qCAAqC;gBACrC,0DAA0D;gBAC1D,MAAM,gBAAgB,GAAG,gBAAgB,IAAI,IAAI,GAAG,SAAS,CAAC;gBAE9D,sEAAsE;gBACtE,gEAAgE;gBAChE,qEAAqE;gBACrE,IAAI,IAAI,CAAC,UAAU,EAAE;oBACnB,IAAI,CAAC,gBAAsC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;iBAChE;qBAAM;oBACL,IAAI,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,GAAa,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;iBACjF;aACF;QACH,CAAC;KACF,CAAC,CAAC;AACL,CAAC","sourcesContent":["import type { ReactiveElement } from 'lit';\nimport type {\n ChangeCallback,\n ChangeCallbackName,\n PropertyObserverHost,\n} from '../controllers/property-observer-controller.js';\n\nimport {\n observedController,\n PropertyObserverController,\n} from '../controllers/property-observer-controller.js';\n\ntype TypedFieldDecorator<T> = (proto: T, key: string | keyof T) => void ;\n\n/**\n * Calls a _fooChanged method on the instance when the value changes.\n * Works on any class field. When using on lit observed properties,\n * Make sure `@observed` is to the left (i.e. called after) the `@property`\n * or `@state` decorator.\n *\n * @example observing a lit property\n * ```ts\n * @observed @property() foo = 'bar';\n *\n * protected _fooChanged(oldValue?: string, newValue?: string) {}\n * ```\n *\n * @example using a custom callback\n * ```ts\n * @observed('_myCallback') size = 'lg';\n *\n * _myCallback(_, size) {...}\n * ```\n *\n * @example using an arrow function\n * ```ts\n * @observed((oldVal, newVal) => console.log(`Size changed from ${oldVal} to ${newVal}`))\n * ```\n */\nexport function observed<T extends ReactiveElement>(methodName: string): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(cb: ChangeCallback<T>): TypedFieldDecorator<T>\nexport function observed<T extends ReactiveElement>(proto: T, key: string): void\nexport function observed<T extends ReactiveElement>(...as: any[]): void|TypedFieldDecorator<T> {\n /** @observed('_myCustomChangeCallback') */\n if (as.length === 1) {\n const [methodNameOrCallback] = as;\n return function(proto, key) {\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key as string & keyof T, methodNameOrCallback);\n };\n } else {\n const [proto, key] = as;\n (proto.constructor as typeof ReactiveElement)\n .addInitializer(x => new PropertyObserverController(x));\n observeProperty(proto, key);\n }\n}\n\nexport function observeProperty<T extends ReactiveElement>(\n proto: T,\n key: string & keyof T,\n callbackOrMethod?: ChangeCallback<T>\n) {\n const descriptor = Object.getOwnPropertyDescriptor(proto, key);\n Object.defineProperty(proto, key, {\n ...descriptor,\n configurable: true,\n set(this: PropertyObserverHost<T>, newVal: T[keyof T]) {\n const oldVal = this[key as keyof T];\n // first, call any pre-existing setters, e.g. `@property`\n descriptor?.set?.call(this, newVal);\n\n // if the user passed a callback, call it\n // e.g. `@observed((_, newVal) => console.log(newVal))`\n // safe to call before connectedCallback, because it's impossible to get a `this` ref.\n if (typeof callbackOrMethod === 'function') {\n callbackOrMethod.call(this, oldVal, newVal);\n } else {\n // if the user passed a string method name, call it on `this`\n // e.g. `@observed('_renderOptions')`\n // otherwise, use a default method name e.g. `_fooChanged`\n const actualMethodName = callbackOrMethod || `_${key}Changed`;\n\n // if the component has already connected to the DOM, run the callback\n // otherwise, If the component has not yet connected to the DOM,\n // cache the old and new values. See PropertyObserverController above\n if (this.hasUpdated) {\n this[actualMethodName as ChangeCallbackName]?.(oldVal, newVal);\n } else {\n this[observedController].cache(key as string, actualMethodName, oldVal, newVal);\n }\n }\n },\n });\n}\n"]}
|
package/decorators/time.js
CHANGED
|
@@ -1,2 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Tracks the time a method takes to complete using the [performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
|
|
3
|
+
*/
|
|
4
|
+
export function time(tag) {
|
|
5
|
+
return function (_, key, descriptor) {
|
|
6
|
+
const { value: f } = descriptor ?? {};
|
|
7
|
+
if (!(typeof f === 'function')) {
|
|
8
|
+
throw new Error('@time() may only decorate class methods');
|
|
9
|
+
}
|
|
10
|
+
descriptor.value = function (...args) {
|
|
11
|
+
const TAG = tag ?? `${this.constructor.name}-${key}`;
|
|
12
|
+
const START_TAG = `start-${TAG}`;
|
|
13
|
+
const END_TAG = `end-${TAG}`;
|
|
14
|
+
if (window.PfeConfig.trackPerformance) {
|
|
15
|
+
performance.mark(START_TAG);
|
|
16
|
+
}
|
|
17
|
+
const x = f.call(this, ...args);
|
|
18
|
+
const ret = () => {
|
|
19
|
+
if (window.PfeConfig.trackPerformance) {
|
|
20
|
+
performance.mark(END_TAG);
|
|
21
|
+
performance.measure(TAG, START_TAG, END_TAG);
|
|
22
|
+
// eslint-disable-next-line no-console
|
|
23
|
+
console.log(Array.from(performance.getEntriesByName(TAG)).pop());
|
|
24
|
+
}
|
|
25
|
+
return x;
|
|
26
|
+
};
|
|
27
|
+
if (x instanceof Promise) {
|
|
28
|
+
return x.then(ret);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
return ret();
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=time.js.map
|
package/decorators/time.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["time.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Tracks the time a method takes to complete using the [performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)\n */\nexport function time(tag?: string) {\n return function(_: unknown, key: string, descriptor: PropertyDescriptor) {\n const { value: f } = descriptor ?? {};\n\n if (!(typeof f === 'function')) {\n throw new Error('@time() may only decorate class methods');\n }\n\n descriptor.value = function(...args: any[]) {\n const TAG = tag ?? `${this.constructor.name}-${key}`;\n const START_TAG = `start-${TAG}`;\n const END_TAG = `end-${TAG}`;\n\n if (window.PfeConfig.trackPerformance) {\n performance.mark(START_TAG);\n }\n\n const x = f.call(this, ...args);\n\n const ret = () => {\n if (window.PfeConfig.trackPerformance) {\n performance.mark(END_TAG);\n performance.measure(TAG, START_TAG, END_TAG);\n // eslint-disable-next-line no-console\n console.log(Array.from(performance.getEntriesByName(TAG)).pop());\n }\n return x;\n };\n\n if (x instanceof Promise) {\n return x.then(ret);\n } else {\n return ret();\n }\n };\n };\n}\n"],
|
|
5
|
-
"mappings": "AAGO,SAASA,EAAKC,EAAc,CACjC,OAAO,SAASC,EAAYC,EAAaC,EAAgC,CACvE,GAAM,CAAE,MAAOC,CAAE,EAAID,GAAc,CAAC,EAEpC,GAAM,OAAOC,GAAM,WACjB,MAAM,IAAI,MAAM,yCAAyC,EAG3DD,EAAW,MAAQ,YAAYE,EAAa,CAC1C,IAAMC,EAAMN,GAAO,GAAG,KAAK,YAAY,QAAQE,IACzCK,EAAY,SAASD,IACrBE,EAAU,OAAOF,IAEnB,OAAO,UAAU,kBACnB,YAAY,KAAKC,CAAS,EAG5B,IAAME,EAAIL,EAAE,KAAK,KAAM,GAAGC,CAAI,EAExBK,EAAM,KACN,OAAO,UAAU,mBACnB,YAAY,KAAKF,CAAO,EACxB,YAAY,QAAQF,EAAKC,EAAWC,CAAO,EAE3C,QAAQ,IAAI,MAAM,KAAK,YAAY,iBAAiBF,CAAG,CAAC,EAAE,IAAI,CAAC,GAE1DG,GAGT,OAAIA,aAAa,QACRA,EAAE,KAAKC,CAAG,EAEVA,EAAI,CAEf,CACF,CACF",
|
|
6
|
-
"names": ["time", "tag", "_", "key", "descriptor", "f", "args", "TAG", "START_TAG", "END_TAG", "x", "ret"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"time.js","sourceRoot":"","sources":["time.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,GAAY;IAC/B,OAAO,UAAS,CAAU,EAAE,GAAW,EAAE,UAA8B;QACrE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,UAAU,IAAI,EAAE,CAAC;QAEtC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,UAAU,CAAC,EAAE;YAC9B,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;SAC5D;QAED,UAAU,CAAC,KAAK,GAAG,UAAS,GAAG,IAAW;YACxC,MAAM,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC;YACrD,MAAM,SAAS,GAAG,SAAS,GAAG,EAAE,CAAC;YACjC,MAAM,OAAO,GAAG,OAAO,GAAG,EAAE,CAAC;YAE7B,IAAI,MAAM,CAAC,SAAS,CAAC,gBAAgB,EAAE;gBACrC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aAC7B;YAED,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;YAEhC,MAAM,GAAG,GAAG,GAAG,EAAE;gBACf,IAAI,MAAM,CAAC,SAAS,CAAC,gBAAgB,EAAE;oBACrC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;oBAC1B,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;oBAC7C,sCAAsC;oBACtC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;iBAClE;gBACD,OAAO,CAAC,CAAC;YACX,CAAC,CAAC;YAEF,IAAI,CAAC,YAAY,OAAO,EAAE;gBACxB,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACpB;iBAAM;gBACL,OAAO,GAAG,EAAE,CAAC;aACd;QACH,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Tracks the time a method takes to complete using the [performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)\n */\nexport function time(tag?: string) {\n return function(_: unknown, key: string, descriptor: PropertyDescriptor) {\n const { value: f } = descriptor ?? {};\n\n if (!(typeof f === 'function')) {\n throw new Error('@time() may only decorate class methods');\n }\n\n descriptor.value = function(...args: any[]) {\n const TAG = tag ?? `${this.constructor.name}-${key}`;\n const START_TAG = `start-${TAG}`;\n const END_TAG = `end-${TAG}`;\n\n if (window.PfeConfig.trackPerformance) {\n performance.mark(START_TAG);\n }\n\n const x = f.call(this, ...args);\n\n const ret = () => {\n if (window.PfeConfig.trackPerformance) {\n performance.mark(END_TAG);\n performance.measure(TAG, START_TAG, END_TAG);\n // eslint-disable-next-line no-console\n console.log(Array.from(performance.getEntriesByName(TAG)).pop());\n }\n return x;\n };\n\n if (x instanceof Promise) {\n return x.then(ret);\n } else {\n return ret();\n }\n };\n };\n}\n"]}
|
package/decorators/trace.js
CHANGED
|
@@ -1,2 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/** Logs the result of a class method */
|
|
2
|
+
export function trace(tag) {
|
|
3
|
+
return function (_, key, descriptor) {
|
|
4
|
+
const { value: f } = descriptor;
|
|
5
|
+
descriptor.value = function (...args) {
|
|
6
|
+
const x = f.call(this, ...args);
|
|
7
|
+
const ret = () => {
|
|
8
|
+
// eslint-disable-next-line no-console
|
|
9
|
+
console.log(tag ?? key, x);
|
|
10
|
+
return x;
|
|
11
|
+
};
|
|
12
|
+
if (x instanceof Promise) {
|
|
13
|
+
return x.then(ret);
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
return ret();
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=trace.js.map
|
package/decorators/trace.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["trace.ts"],
|
|
4
|
-
"sourcesContent": ["/** Logs the result of a class method */\nexport function trace(tag?: string) {\n return function(_: unknown, key: string, descriptor: PropertyDescriptor) {\n const { value: f } = descriptor;\n descriptor.value = function(...args: any[]) {\n const x = f.call(this, ...args);\n\n const ret = () => {\n // eslint-disable-next-line no-console\n console.log(tag ?? key, x);\n return x;\n };\n\n if (x instanceof Promise) {\n return x.then(ret);\n } else {\n return ret();\n }\n };\n };\n}\n"],
|
|
5
|
-
"mappings": "AACO,SAASA,EAAMC,EAAc,CAClC,OAAO,SAASC,EAAYC,EAAaC,EAAgC,CACvE,GAAM,CAAE,MAAOC,CAAE,EAAID,EACrBA,EAAW,MAAQ,YAAYE,EAAa,CAC1C,IAAMC,EAAIF,EAAE,KAAK,KAAM,GAAGC,CAAI,EAExBE,EAAM,KAEV,QAAQ,IAAIP,GAAOE,EAAKI,CAAC,EAClBA,GAGT,OAAIA,aAAa,QACRA,EAAE,KAAKC,CAAG,EAEVA,EAAI,CAEf,CACF,CACF",
|
|
6
|
-
"names": ["trace", "tag", "_", "key", "descriptor", "f", "args", "x", "ret"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"trace.js","sourceRoot":"","sources":["trace.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,MAAM,UAAU,KAAK,CAAC,GAAY;IAChC,OAAO,UAAS,CAAU,EAAE,GAAW,EAAE,UAA8B;QACrE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,UAAU,CAAC;QAChC,UAAU,CAAC,KAAK,GAAG,UAAS,GAAG,IAAW;YACxC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;YAEhC,MAAM,GAAG,GAAG,GAAG,EAAE;gBACf,sCAAsC;gBACtC,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC;gBAC3B,OAAO,CAAC,CAAC;YACX,CAAC,CAAC;YAEF,IAAI,CAAC,YAAY,OAAO,EAAE;gBACxB,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aACpB;iBAAM;gBACL,OAAO,GAAG,EAAE,CAAC;aACd;QACH,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC","sourcesContent":["/** Logs the result of a class method */\nexport function trace(tag?: string) {\n return function(_: unknown, key: string, descriptor: PropertyDescriptor) {\n const { value: f } = descriptor;\n descriptor.value = function(...args: any[]) {\n const x = f.call(this, ...args);\n\n const ret = () => {\n // eslint-disable-next-line no-console\n console.log(tag ?? key, x);\n return x;\n };\n\n if (x instanceof Promise) {\n return x.then(ret);\n } else {\n return ret();\n }\n };\n };\n}\n"]}
|
package/decorators.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
export * from './decorators/bound.js';
|
|
2
2
|
export * from './decorators/cascades.js';
|
|
3
|
-
export * from './decorators/color-context.js';
|
|
4
3
|
export * from './decorators/deprecation.js';
|
|
5
4
|
export * from './decorators/initializer.js';
|
|
6
5
|
export * from './decorators/observed.js';
|
|
7
|
-
export * from './decorators/pfelement.js';
|
|
8
6
|
export * from './decorators/time.js';
|
|
9
7
|
export * from './decorators/trace.js';
|
package/decorators.js
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
export*from
|
|
2
|
-
|
|
1
|
+
export * from './decorators/bound.js';
|
|
2
|
+
export * from './decorators/cascades.js';
|
|
3
|
+
export * from './decorators/deprecation.js';
|
|
4
|
+
export * from './decorators/initializer.js';
|
|
5
|
+
export * from './decorators/observed.js';
|
|
6
|
+
export * from './decorators/time.js';
|
|
7
|
+
export * from './decorators/trace.js';
|
|
8
|
+
//# sourceMappingURL=decorators.js.map
|
package/decorators.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["decorators.ts"],
|
|
4
|
-
"sourcesContent": ["export * from './decorators/bound.js';\nexport * from './decorators/cascades.js';\nexport * from './decorators/color-context.js';\nexport * from './decorators/deprecation.js';\nexport * from './decorators/initializer.js';\nexport * from './decorators/observed.js';\nexport * from './decorators/pfelement.js';\nexport * from './decorators/time.js';\nexport * from './decorators/trace.js';\n"],
|
|
5
|
-
"mappings": "AAAA,WAAc,wBACd,WAAc,2BACd,WAAc,gCACd,WAAc,8BACd,WAAc,8BACd,WAAc,2BACd,WAAc,4BACd,WAAc,uBACd,WAAc",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"decorators.js","sourceRoot":"","sources":["decorators.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './decorators/bound.js';\nexport * from './decorators/cascades.js';\nexport * from './decorators/deprecation.js';\nexport * from './decorators/initializer.js';\nexport * from './decorators/observed.js';\nexport * from './decorators/time.js';\nexport * from './decorators/trace.js';\n"]}
|
package/functions/debounce.js
CHANGED
|
@@ -1,2 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Debounce helper function
|
|
3
|
+
* @see https://davidwalsh.name/javascript-debounce-function
|
|
4
|
+
*
|
|
5
|
+
* @param func Function to be debounced
|
|
6
|
+
* @param delay How long until it will be run
|
|
7
|
+
* @param immediate Whether it should be run at the start instead of the end of the debounce
|
|
8
|
+
*/
|
|
9
|
+
export function debounce(func, delay, immediate = false) {
|
|
10
|
+
let timeout;
|
|
11
|
+
return function (...args) {
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
13
|
+
const context = this;
|
|
14
|
+
const later = function () {
|
|
15
|
+
timeout = null;
|
|
16
|
+
if (!immediate) {
|
|
17
|
+
func.apply(context, args);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
const callNow = immediate && !timeout;
|
|
21
|
+
clearTimeout(timeout);
|
|
22
|
+
timeout = window.setTimeout(later, delay);
|
|
23
|
+
if (callNow) {
|
|
24
|
+
func.apply(context, args);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=debounce.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["debounce.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Debounce helper function\n * @see https://davidwalsh.name/javascript-debounce-function\n *\n * @param func Function to be debounced\n * @param delay How long until it will be run\n * @param immediate Whether it should be run at the start instead of the end of the debounce\n */\nexport function debounce(\n func: (...args: any[]) => unknown,\n delay: number,\n immediate = false\n) {\n let timeout: number|null;\n return function(this: unknown, ...args: any[]) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const context = this;\n const later = function() {\n timeout = null;\n if (!immediate) {\n func.apply(context, args);\n }\n };\n const callNow = immediate && !timeout;\n clearTimeout(timeout as number);\n timeout = window.setTimeout(later, delay);\n if (callNow) {\n func.apply(context, args);\n }\n };\n}\n"],
|
|
5
|
-
"mappings": "AAQO,SAASA,EACdC,EACAC,EACAC,EAAY,GACZ,CACA,IAAIC,EACJ,OAAO,YAA2BC,EAAa,CAE7C,IAAMC,EAAU,KACVC,EAAQ,UAAW,CACvBH,EAAU,KACLD,GACHF,EAAK,MAAMK,EAASD,CAAI,CAE5B,EACMG,EAAUL,GAAa,CAACC,EAC9B,aAAaA,CAAiB,EAC9BA,EAAU,OAAO,WAAWG,EAAOL,CAAK,EACpCM,GACFP,EAAK,MAAMK,EAASD,CAAI,CAE5B,CACF",
|
|
6
|
-
"names": ["debounce", "func", "delay", "immediate", "timeout", "args", "context", "later", "callNow"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"debounce.js","sourceRoot":"","sources":["debounce.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CACtB,IAAiC,EACjC,KAAa,EACb,SAAS,GAAG,KAAK;IAEjB,IAAI,OAAoB,CAAC;IACzB,OAAO,UAAwB,GAAG,IAAW;QAC3C,4DAA4D;QAC5D,MAAM,OAAO,GAAG,IAAI,CAAC;QACrB,MAAM,KAAK,GAAG;YACZ,OAAO,GAAG,IAAI,CAAC;YACf,IAAI,CAAC,SAAS,EAAE;gBACd,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aAC3B;QACH,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,SAAS,IAAI,CAAC,OAAO,CAAC;QACtC,YAAY,CAAC,OAAiB,CAAC,CAAC;QAChC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC1C,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Debounce helper function\n * @see https://davidwalsh.name/javascript-debounce-function\n *\n * @param func Function to be debounced\n * @param delay How long until it will be run\n * @param immediate Whether it should be run at the start instead of the end of the debounce\n */\nexport function debounce(\n func: (...args: any[]) => unknown,\n delay: number,\n immediate = false\n) {\n let timeout: number|null;\n return function(this: unknown, ...args: any[]) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const context = this;\n const later = function() {\n timeout = null;\n if (!immediate) {\n func.apply(context, args);\n }\n };\n const callNow = immediate && !timeout;\n clearTimeout(timeout as number);\n timeout = window.setTimeout(later, delay);\n if (callNow) {\n func.apply(context, args);\n }\n };\n}\n"]}
|
|
@@ -1,2 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Construct a CustomEvent with the given name and detail.
|
|
3
|
+
* The event bubbles and is composed.
|
|
4
|
+
*/
|
|
5
|
+
export function deprecatedCustomEvent(name, detail) {
|
|
6
|
+
return new CustomEvent(name, {
|
|
7
|
+
bubbles: true,
|
|
8
|
+
composed: true,
|
|
9
|
+
detail,
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=deprecatedCustomEvent.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["deprecatedCustomEvent.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Construct a CustomEvent with the given name and detail.\n * The event bubbles and is composed.\n */\nexport function deprecatedCustomEvent<T>(name: string, detail?: T): CustomEvent<T> {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail,\n });\n}\n"],
|
|
5
|
-
"mappings": "AAIO,SAASA,EAAyBC,EAAcC,EAA4B,CACjF,OAAO,IAAI,YAAYD,EAAM,CAC3B,QAAS,GACT,SAAU,GACV,OAAAC,CACF,CAAC,CACH",
|
|
6
|
-
"names": ["deprecatedCustomEvent", "name", "detail"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"deprecatedCustomEvent.js","sourceRoot":"","sources":["deprecatedCustomEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAI,IAAY,EAAE,MAAU;IAC/D,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;QAC3B,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM;KACP,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * Construct a CustomEvent with the given name and detail.\n * The event bubbles and is composed.\n */\nexport function deprecatedCustomEvent<T>(name: string, detail?: T): CustomEvent<T> {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail,\n });\n}\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This function returns whether or not an element is within the viewable area of a container. If partial is true,
|
|
3
|
+
* then this function will return true even if only part of the element is in view.
|
|
4
|
+
*
|
|
5
|
+
* @param container The container to check if the element is in view of.
|
|
6
|
+
* @param element The element to check if it is view
|
|
7
|
+
* @param partial true if partial view is allowed
|
|
8
|
+
* @param strict true if strict mode is set, never consider the container width and element width
|
|
9
|
+
*
|
|
10
|
+
* @returns True if the component is in View.
|
|
11
|
+
*/
|
|
12
|
+
export declare function isElementInView(container: HTMLElement, element: HTMLElement, partial?: boolean, strict?: boolean): boolean;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This function returns whether or not an element is within the viewable area of a container. If partial is true,
|
|
3
|
+
* then this function will return true even if only part of the element is in view.
|
|
4
|
+
*
|
|
5
|
+
* @param container The container to check if the element is in view of.
|
|
6
|
+
* @param element The element to check if it is view
|
|
7
|
+
* @param partial true if partial view is allowed
|
|
8
|
+
* @param strict true if strict mode is set, never consider the container width and element width
|
|
9
|
+
*
|
|
10
|
+
* @returns True if the component is in View.
|
|
11
|
+
*/
|
|
12
|
+
export function isElementInView(container, element, partial = false, strict = false) {
|
|
13
|
+
if (!container || !element) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
const containerBounds = container.getBoundingClientRect();
|
|
17
|
+
const elementBounds = element.getBoundingClientRect();
|
|
18
|
+
const containerBoundsLeft = Math.ceil(containerBounds.left);
|
|
19
|
+
const containerBoundsRight = Math.floor(containerBounds.right);
|
|
20
|
+
const elementBoundsLeft = Math.ceil(elementBounds.left);
|
|
21
|
+
const elementBoundsRight = Math.floor(elementBounds.right);
|
|
22
|
+
// Check if in view
|
|
23
|
+
const isTotallyInView = elementBoundsLeft >= containerBoundsLeft &&
|
|
24
|
+
elementBoundsRight <= containerBoundsRight;
|
|
25
|
+
const isPartiallyInView = (partial || (!strict && containerBounds.width < elementBounds.width)) &&
|
|
26
|
+
((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) ||
|
|
27
|
+
(elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight));
|
|
28
|
+
// Return outcome
|
|
29
|
+
return isTotallyInView || isPartiallyInView;
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=isElementInView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isElementInView.js","sourceRoot":"","sources":["isElementInView.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAC7B,SAAsB,EACtB,OAAoB,EACpB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK;IAEd,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE;QAC1B,OAAO,KAAK,CAAC;KACd;IACD,MAAM,eAAe,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACtD,MAAM,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE3D,mBAAmB;IACnB,MAAM,eAAe,GACnB,iBAAiB,IAAI,mBAAmB;QACxC,kBAAkB,IAAI,oBAAoB,CAAC;IAC7C,MAAM,iBAAiB,GACrB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,IAAI,eAAe,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QACrE,CAAC,CAAC,iBAAiB,GAAG,mBAAmB,IAAI,kBAAkB,GAAG,mBAAmB,CAAC;YACpF,CAAC,kBAAkB,GAAG,oBAAoB,IAAI,iBAAiB,GAAG,oBAAoB,CAAC,CAAC,CAAC;IAE7F,iBAAiB;IACjB,OAAO,eAAe,IAAI,iBAAiB,CAAC;AAC9C,CAAC","sourcesContent":["/**\n * This function returns whether or not an element is within the viewable area of a container. If partial is true,\n * then this function will return true even if only part of the element is in view.\n *\n * @param container The container to check if the element is in view of.\n * @param element The element to check if it is view\n * @param partial true if partial view is allowed\n * @param strict true if strict mode is set, never consider the container width and element width\n *\n * @returns True if the component is in View.\n */\nexport function isElementInView(\n container: HTMLElement,\n element: HTMLElement,\n partial = false,\n strict = false\n): boolean {\n if (!container || !element) {\n return false;\n }\n const containerBounds = container.getBoundingClientRect();\n const elementBounds = element.getBoundingClientRect();\n const containerBoundsLeft = Math.ceil(containerBounds.left);\n const containerBoundsRight = Math.floor(containerBounds.right);\n const elementBoundsLeft = Math.ceil(elementBounds.left);\n const elementBoundsRight = Math.floor(elementBounds.right);\n\n // Check if in view\n const isTotallyInView =\n elementBoundsLeft >= containerBoundsLeft &&\n elementBoundsRight <= containerBoundsRight;\n const isPartiallyInView =\n (partial || (!strict && containerBounds.width < elementBounds.width)) &&\n ((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) ||\n (elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight));\n\n // Return outcome\n return isTotallyInView || isPartiallyInView;\n}\n"]}
|
package/functions/random.js
CHANGED
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* A quick way to fetch a random ID value.
|
|
3
|
+
* _Note:_ All values are prefixed automatically to ensure an ID-safe value is returned.
|
|
4
|
+
* @param prefix id-safe string prefix
|
|
5
|
+
*/
|
|
6
|
+
export function getRandomId(prefix = 'pfe') {
|
|
7
|
+
return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=random.js.map
|
package/functions/random.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["random.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * A quick way to fetch a random ID value.\n * _Note:_ All values are prefixed automatically to ensure an ID-safe value is returned.\n * @param prefix id-safe string prefix\n */\nexport function getRandomId(prefix = 'pfe') {\n return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;\n}\n"],
|
|
5
|
-
"mappings": "AAKO,SAASA,EAAYC,EAAS,MAAO,CAC1C,MAAO,GAAGA,KAAU,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,EAAG,CAAC,GAC5D",
|
|
6
|
-
"names": ["getRandomId", "prefix"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"random.js","sourceRoot":"","sources":["random.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,MAAM,GAAG,KAAK;IACxC,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;AAChE,CAAC","sourcesContent":["/**\n * A quick way to fetch a random ID value.\n * _Note:_ All values are prefixed automatically to ensure an ID-safe value is returned.\n * @param prefix id-safe string prefix\n */\nexport function getRandomId(prefix = 'pfe') {\n return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;\n}\n"]}
|