element-vir 6.3.3 → 7.0.0
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 +91 -2
- package/package.json +23 -27
- package/dist/augments/array.d.ts +0 -1
- package/dist/augments/array.js +0 -3
- package/dist/augments/type.d.ts +0 -8
- package/dist/augments/type.js +0 -13
- package/dist/declarative-element/css-vars.d.ts +0 -6
- package/dist/declarative-element/css-vars.js +0 -22
- package/dist/declarative-element/declarative-element-init.d.ts +0 -34
- package/dist/declarative-element/declarative-element-init.js +0 -1
- package/dist/declarative-element/declarative-element.d.ts +0 -48
- package/dist/declarative-element/declarative-element.js +0 -18
- package/dist/declarative-element/define-element-no-inputs.d.ts +0 -5
- package/dist/declarative-element/define-element-no-inputs.js +0 -133
- package/dist/declarative-element/define-element.d.ts +0 -5
- package/dist/declarative-element/define-element.js +0 -13
- package/dist/declarative-element/definition-options.d.ts +0 -5
- package/dist/declarative-element/definition-options.js +0 -4
- package/dist/declarative-element/directives/assign-with-clean-up.directive.d.ts +0 -23
- package/dist/declarative-element/directives/assign-with-clean-up.directive.js +0 -43
- package/dist/declarative-element/directives/assign.directive.d.ts +0 -12
- package/dist/declarative-element/directives/assign.directive.js +0 -28
- package/dist/declarative-element/directives/awaiting.directive.d.ts +0 -18
- package/dist/declarative-element/directives/awaiting.directive.js +0 -42
- package/dist/declarative-element/directives/directive-helpers.d.ts +0 -14
- package/dist/declarative-element/directives/directive-helpers.js +0 -21
- package/dist/declarative-element/directives/listen.directive.d.ts +0 -14
- package/dist/declarative-element/directives/listen.directive.js +0 -47
- package/dist/declarative-element/directives/on-dom-created.directive.d.ts +0 -11
- package/dist/declarative-element/directives/on-dom-created.directive.js +0 -23
- package/dist/declarative-element/directives/on-resize.directive.d.ts +0 -15
- package/dist/declarative-element/directives/on-resize.directive.js +0 -36
- package/dist/declarative-element/element-events.d.ts +0 -10
- package/dist/declarative-element/element-events.js +0 -24
- package/dist/declarative-element/element-properties.d.ts +0 -16
- package/dist/declarative-element/element-properties.js +0 -72
- package/dist/declarative-element/has-declarative-element-parent.d.ts +0 -1
- package/dist/declarative-element/has-declarative-element-parent.js +0 -16
- package/dist/declarative-element/host-classes.d.ts +0 -21
- package/dist/declarative-element/host-classes.js +0 -12
- package/dist/declarative-element/render-callback.d.ts +0 -22
- package/dist/declarative-element/render-callback.js +0 -21
- package/dist/declarative-element/styles.d.ts +0 -23
- package/dist/declarative-element/styles.js +0 -32
- package/dist/declarative-element/tag-name.d.ts +0 -2
- package/dist/declarative-element/tag-name.js +0 -4
- package/dist/declarative-element-marker-symbol.d.ts +0 -1
- package/dist/declarative-element-marker-symbol.js +0 -1
- package/dist/index.d.ts +0 -18
- package/dist/index.js +0 -17
- package/dist/require-declarative-element.d.ts +0 -2
- package/dist/require-declarative-element.js +0 -4
- package/dist/template-transforms/has-static-tag-name.d.ts +0 -4
- package/dist/template-transforms/has-static-tag-name.js +0 -6
- package/dist/template-transforms/nested-mapped-templates.d.ts +0 -6
- package/dist/template-transforms/nested-mapped-templates.js +0 -96
- package/dist/template-transforms/transform-template.d.ts +0 -16
- package/dist/template-transforms/transform-template.js +0 -87
- package/dist/template-transforms/vir-css/css-transform.d.ts +0 -7
- package/dist/template-transforms/vir-css/css-transform.js +0 -12
- package/dist/template-transforms/vir-css/vir-css.d.ts +0 -3
- package/dist/template-transforms/vir-css/vir-css.js +0 -12
- package/dist/template-transforms/vir-html/html-transform.d.ts +0 -3
- package/dist/template-transforms/vir-html/html-transform.js +0 -44
- package/dist/template-transforms/vir-html/vir-html.d.ts +0 -3
- package/dist/template-transforms/vir-html/vir-html.js +0 -16
- package/dist/typed-event/typed-event.d.ts +0 -19
- package/dist/typed-event/typed-event.js +0 -32
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { noChange } from 'lit';
|
|
2
|
-
import { directive, Directive } from 'lit/directive.js';
|
|
3
|
-
import { extractDeclarativeElement } from './directive-helpers';
|
|
4
|
-
/** Assign an object matching an element's inputs to its inputs. */
|
|
5
|
-
export function assign(declarativeElement, inputsObject) {
|
|
6
|
-
/**
|
|
7
|
-
* The directive generics (in listenDirective) are not strong enough to maintain their values.
|
|
8
|
-
* Thus, the directive call is wrapped in this function.
|
|
9
|
-
*/
|
|
10
|
-
return assignDirective(declarativeElement, inputsObject);
|
|
11
|
-
}
|
|
12
|
-
const assignDirective = directive(class extends Directive {
|
|
13
|
-
constructor(partInfo) {
|
|
14
|
-
super(partInfo);
|
|
15
|
-
this.element = extractDeclarativeElement(partInfo, 'assign');
|
|
16
|
-
}
|
|
17
|
-
render(elementDefinition, inputsObject) {
|
|
18
|
-
assignInputsObject(elementDefinition, this.element, inputsObject);
|
|
19
|
-
return noChange;
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
export function assignInputsObject(expectedElementConstructor, element, assignmentObject) {
|
|
23
|
-
if (element.tagName.toLowerCase() !== expectedElementConstructor.tagName.toLowerCase()) {
|
|
24
|
-
console.error(element, expectedElementConstructor);
|
|
25
|
-
throw new Error(`Assignment mismatch. Assignment was made for ${element.tagName.toLowerCase()} but it's attached to ${expectedElementConstructor.tagName.toLowerCase()}`);
|
|
26
|
-
}
|
|
27
|
-
element.assignInputs(assignmentObject);
|
|
28
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export type MaybePromise<T> = (T extends Promise<infer ValueType> ? T | ValueType : Promise<T> | T) | undefined | {
|
|
2
|
-
error: Error;
|
|
3
|
-
};
|
|
4
|
-
export type CreateStateUpdatingPromiseInputs<InnerValueGeneric, KeyGeneric extends PropertyKey, StateGeneric extends Readonly<Record<KeyGeneric, MaybePromise<InnerValueGeneric>>>> = {
|
|
5
|
-
updateState: (newState: Partial<StateGeneric>) => void;
|
|
6
|
-
stateKey: KeyGeneric;
|
|
7
|
-
} & ({
|
|
8
|
-
createPromiseCallback: () => Promise<InnerValueGeneric>;
|
|
9
|
-
promise?: undefined;
|
|
10
|
-
} | {
|
|
11
|
-
promise: Promise<InnerValueGeneric>;
|
|
12
|
-
createPromiseCallback?: undefined;
|
|
13
|
-
});
|
|
14
|
-
export declare function createStateUpdatingPromiseIfUndefined<InnerValueGeneric, KeyGeneric extends PropertyKey, StateGeneric extends Readonly<Record<KeyGeneric, MaybePromise<InnerValueGeneric>>>>(inputs: CreateStateUpdatingPromiseInputs<InnerValueGeneric, KeyGeneric, StateGeneric> & {
|
|
15
|
-
state: StateGeneric;
|
|
16
|
-
}): void;
|
|
17
|
-
export declare function awaiting<ValueGeneric, FallbackGeneric, CallbackReturnGeneric>(input: MaybePromise<ValueGeneric>, notResolvedYetFallback: FallbackGeneric, resolvedCallback: (resolved: ValueGeneric) => CallbackReturnGeneric): CallbackReturnGeneric | FallbackGeneric | Error | undefined;
|
|
18
|
-
export declare function ensureError(input: unknown): Error;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { extractErrorMessage, isPromiseLike, typedHasProperty } from '@augment-vir/common';
|
|
2
|
-
export function createStateUpdatingPromiseIfUndefined(inputs) {
|
|
3
|
-
const { state, stateKey } = inputs;
|
|
4
|
-
const currentValue = state[stateKey];
|
|
5
|
-
if (currentValue === undefined) {
|
|
6
|
-
createStateUpdatingPromise(inputs);
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
function createStateUpdatingPromise({ updateState, stateKey, createPromiseCallback: promiseCallback, promise, }) {
|
|
10
|
-
const output = promise !== null && promise !== void 0 ? promise : promiseCallback();
|
|
11
|
-
// as casts below are required because, even though all the generics agree, TypeScript can't figure that out here
|
|
12
|
-
if (output instanceof Promise) {
|
|
13
|
-
output
|
|
14
|
-
.then((result) => {
|
|
15
|
-
updateState({ [stateKey]: result });
|
|
16
|
-
})
|
|
17
|
-
.catch((thrownError) => {
|
|
18
|
-
const guaranteedError = ensureError(thrownError);
|
|
19
|
-
updateState({ [stateKey]: { error: guaranteedError } });
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
updateState({ [stateKey]: output });
|
|
23
|
-
}
|
|
24
|
-
export function awaiting(input, notResolvedYetFallback, resolvedCallback) {
|
|
25
|
-
if (isPromiseLike(input) || input == undefined) {
|
|
26
|
-
return notResolvedYetFallback;
|
|
27
|
-
}
|
|
28
|
-
else if (typedHasProperty(input, 'error')) {
|
|
29
|
-
return input.error;
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
return resolvedCallback(input);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
export function ensureError(input) {
|
|
36
|
-
if (input instanceof Error) {
|
|
37
|
-
return input;
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
return new Error(extractErrorMessage(input));
|
|
41
|
-
}
|
|
42
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ElementPartInfo, PartInfo } from 'lit/directive.js';
|
|
2
|
-
import { DeclarativeElement } from '../declarative-element';
|
|
3
|
-
/** For some reason these aren't defined in lit's types already. */
|
|
4
|
-
export type ExtraPartInfoProperties = {
|
|
5
|
-
element: Element;
|
|
6
|
-
options: {
|
|
7
|
-
host: Element;
|
|
8
|
-
renderBefore: Element;
|
|
9
|
-
isConnected: boolean;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
export declare function extractDeclarativeElement(partInfo: PartInfo, directiveName: string): DeclarativeElement;
|
|
13
|
-
export declare function extractElement<ElementType = HTMLElement>(partInfo: PartInfo, directiveName: string, constructorClass: (new () => ElementType) | (abstract new () => ElementType)): ElementType;
|
|
14
|
-
export declare function assertsIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { PartType } from 'lit/directive.js';
|
|
2
|
-
import { DeclarativeElement } from '../declarative-element';
|
|
3
|
-
export function extractDeclarativeElement(partInfo, directiveName) {
|
|
4
|
-
return extractElement(partInfo, directiveName, DeclarativeElement);
|
|
5
|
-
}
|
|
6
|
-
export function extractElement(partInfo, directiveName, constructorClass) {
|
|
7
|
-
assertsIsElementPartInfo(partInfo, directiveName);
|
|
8
|
-
const element = partInfo.element;
|
|
9
|
-
if (!(element instanceof constructorClass)) {
|
|
10
|
-
throw new Error(`${directiveName} attached to non ${constructorClass.name} element.`);
|
|
11
|
-
}
|
|
12
|
-
return element;
|
|
13
|
-
}
|
|
14
|
-
export function assertsIsElementPartInfo(partInfo, directiveName) {
|
|
15
|
-
if (partInfo.type !== PartType.ELEMENT) {
|
|
16
|
-
throw new Error(`${directiveName} directive can only be attached directly to an element.`);
|
|
17
|
-
}
|
|
18
|
-
if (!partInfo.element) {
|
|
19
|
-
throw new Error(`${directiveName} directive found no element.`);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { DirectiveResult } from 'lit/directive.js';
|
|
2
|
-
import { DefinedTypedEvent, TypedEvent } from '../../typed-event/typed-event';
|
|
3
|
-
/**
|
|
4
|
-
* Listen to events. These can be native DOM events (use a string for the inputType argument) or
|
|
5
|
-
* typed events (pass in a return value from defineTypedEvent).
|
|
6
|
-
*
|
|
7
|
-
* @param definedTypedEvent Needs to come either from a declarative element (like
|
|
8
|
-
* MyDeclarativeElement.events.eventName) or from a typed event created via the defineTypedEvent
|
|
9
|
-
* function.
|
|
10
|
-
* @param listener The callback to fire when an event is caught. Assuming the definedTypedEvent
|
|
11
|
-
* input is properly typed, the event given to this callback will also be typed.
|
|
12
|
-
*/
|
|
13
|
-
export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: DefinedTypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>, listener: (event: TypedEvent<TypedEventTypeNameGeneric, TypedEventDetailGeneric>) => void): DirectiveResult<any>;
|
|
14
|
-
export declare function listen<TypedEventTypeNameGeneric extends string, TypedEventDetailGeneric, NativeElementEventNameGeneric extends keyof HTMLElementEventMap>(eventType: NativeElementEventNameGeneric, listener: (event: HTMLElementEventMap[NativeElementEventNameGeneric]) => void): DirectiveResult<any>;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { noChange } from 'lit';
|
|
2
|
-
import { directive, Directive } from 'lit/directive.js';
|
|
3
|
-
import { extractElement } from './directive-helpers';
|
|
4
|
-
export function listen(eventType, listener) {
|
|
5
|
-
return listenDirective(eventType, listener);
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* The directive generics here are not strong enough to maintain their values. Thus, the directive
|
|
9
|
-
* call is wrapped in the function above.
|
|
10
|
-
*/
|
|
11
|
-
const listenDirective = directive(class extends Directive {
|
|
12
|
-
constructor(partInfo) {
|
|
13
|
-
super(partInfo);
|
|
14
|
-
this.element = extractElement(partInfo, 'listen', HTMLElement);
|
|
15
|
-
}
|
|
16
|
-
resetListener(listenerMetaData) {
|
|
17
|
-
if (this.lastListenerMetaData) {
|
|
18
|
-
this.element.removeEventListener(this.lastListenerMetaData.eventType, this.lastListenerMetaData.listener);
|
|
19
|
-
}
|
|
20
|
-
this.element.addEventListener(listenerMetaData.eventType, listenerMetaData.listener);
|
|
21
|
-
this.lastListenerMetaData = listenerMetaData;
|
|
22
|
-
}
|
|
23
|
-
createListenerMetaData(eventType, callback) {
|
|
24
|
-
return {
|
|
25
|
-
eventType,
|
|
26
|
-
callback,
|
|
27
|
-
listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
render(eventTypeInput, callback) {
|
|
31
|
-
const eventType = typeof eventTypeInput === 'string' ? eventTypeInput : eventTypeInput.type;
|
|
32
|
-
if (typeof eventType !== 'string') {
|
|
33
|
-
throw new Error(`Cannot listen to an event with a name that is not a string. Given event name: "${eventType}"`);
|
|
34
|
-
}
|
|
35
|
-
if (this.lastListenerMetaData && this.lastListenerMetaData.eventType === eventType) {
|
|
36
|
-
/**
|
|
37
|
-
* Store the callback here so we don't have to update the attached listener every
|
|
38
|
-
* time the callback is updated.
|
|
39
|
-
*/
|
|
40
|
-
this.lastListenerMetaData.callback = callback;
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
this.resetListener(this.createListenerMetaData(eventType, callback));
|
|
44
|
-
}
|
|
45
|
-
return noChange;
|
|
46
|
-
}
|
|
47
|
-
});
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { PartInfo } from 'lit/directive.js';
|
|
2
|
-
export type OnDomCreatedCallback = (element: Element) => void;
|
|
3
|
-
/** Only fires once, when the element has been created. */
|
|
4
|
-
export declare const onDomCreated: (callback: OnDomCreatedCallback) => import("lit-html/directive").DirectiveResult<{
|
|
5
|
-
new (partInfo: PartInfo): {
|
|
6
|
-
element: Element | undefined;
|
|
7
|
-
update(partInfo: PartInfo, [callback]: [OnDomCreatedCallback]): undefined;
|
|
8
|
-
render(callback: OnDomCreatedCallback): undefined;
|
|
9
|
-
readonly _$isConnected: boolean;
|
|
10
|
-
};
|
|
11
|
-
}>;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { directive, Directive } from 'lit/directive.js';
|
|
2
|
-
import { assertsIsElementPartInfo } from './directive-helpers';
|
|
3
|
-
const directiveName = 'onDomCreated';
|
|
4
|
-
/** Only fires once, when the element has been created. */
|
|
5
|
-
export const onDomCreated = directive(class extends Directive {
|
|
6
|
-
constructor(partInfo) {
|
|
7
|
-
super(partInfo);
|
|
8
|
-
assertsIsElementPartInfo(partInfo, directiveName);
|
|
9
|
-
}
|
|
10
|
-
update(partInfo, [callback]) {
|
|
11
|
-
assertsIsElementPartInfo(partInfo, directiveName);
|
|
12
|
-
const newElement = partInfo.element;
|
|
13
|
-
if (newElement !== this.element) {
|
|
14
|
-
// use requestAnimationFrame here so it can fire property changes outside of a render loop
|
|
15
|
-
requestAnimationFrame(() => callback(newElement));
|
|
16
|
-
this.element = newElement;
|
|
17
|
-
}
|
|
18
|
-
return this.render(callback);
|
|
19
|
-
}
|
|
20
|
-
render(callback) {
|
|
21
|
-
return undefined;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { PartInfo } from 'lit/directive.js';
|
|
2
|
-
export type OnResizeCallback = (
|
|
3
|
-
/** Only these two properties are supported in all major modern browsers */
|
|
4
|
-
entry: Readonly<Pick<ResizeObserverEntry, 'target' | 'contentRect'>>) => void;
|
|
5
|
-
export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive").DirectiveResult<{
|
|
6
|
-
new (partInfo: PartInfo): {
|
|
7
|
-
element: Element | undefined;
|
|
8
|
-
readonly resizeObserver: ResizeObserver;
|
|
9
|
-
callback: OnResizeCallback | undefined;
|
|
10
|
-
fireCallback(entries: ResizeObserverEntry[]): void;
|
|
11
|
-
update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
|
|
12
|
-
render(callback: OnResizeCallback): undefined;
|
|
13
|
-
readonly _$isConnected: boolean;
|
|
14
|
-
};
|
|
15
|
-
}>;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { directive, Directive } from 'lit/directive.js';
|
|
2
|
-
import { assertsIsElementPartInfo } from './directive-helpers';
|
|
3
|
-
const directiveName = 'onResize';
|
|
4
|
-
export const onResize = directive(class extends Directive {
|
|
5
|
-
constructor(partInfo) {
|
|
6
|
-
super(partInfo);
|
|
7
|
-
this.resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
|
|
8
|
-
assertsIsElementPartInfo(partInfo, directiveName);
|
|
9
|
-
}
|
|
10
|
-
fireCallback(entries) {
|
|
11
|
-
var _a;
|
|
12
|
-
const resizeEntry = entries[0];
|
|
13
|
-
if (!resizeEntry) {
|
|
14
|
-
console.error(entries);
|
|
15
|
-
throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
|
|
16
|
-
}
|
|
17
|
-
(_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
|
|
18
|
-
}
|
|
19
|
-
update(partInfo, [callback]) {
|
|
20
|
-
assertsIsElementPartInfo(partInfo, directiveName);
|
|
21
|
-
this.callback = callback;
|
|
22
|
-
const newElement = partInfo.element;
|
|
23
|
-
// if the element changes we need to observe the new one
|
|
24
|
-
if (newElement !== this.element) {
|
|
25
|
-
if (this.element) {
|
|
26
|
-
this.resizeObserver.unobserve(this.element);
|
|
27
|
-
}
|
|
28
|
-
this.resizeObserver.observe(newElement);
|
|
29
|
-
this.element = newElement;
|
|
30
|
-
}
|
|
31
|
-
return this.render(callback);
|
|
32
|
-
}
|
|
33
|
-
render(callback) {
|
|
34
|
-
return undefined;
|
|
35
|
-
}
|
|
36
|
-
});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { DefinedTypedEvent, DefinedTypedEventNameDefinition, TypedEvent } from '../typed-event/typed-event';
|
|
2
|
-
export type EventsInitMap = Record<string, DefinedTypedEventNameDefinition<any>>;
|
|
3
|
-
export declare function defineElementEvent<EventDetailGeneric>(): DefinedTypedEventNameDefinition<EventDetailGeneric>;
|
|
4
|
-
export type EventInitMapEventDetailExtractor<EventTypeNameGeneric extends keyof EventsInitGeneric, EventsInitGeneric extends EventsInitMap> = EventsInitGeneric[EventTypeNameGeneric] extends DefinedTypedEventNameDefinition<infer R> ? R : never;
|
|
5
|
-
export type EventDescriptorMap<EventsInitGeneric extends EventsInitMap> = {
|
|
6
|
-
[CurrentEventTypeName in keyof EventsInitGeneric]: DefinedTypedEvent<CurrentEventTypeName extends string ? CurrentEventTypeName : never, EventInitMapEventDetailExtractor<CurrentEventTypeName, EventsInitGeneric>>;
|
|
7
|
-
};
|
|
8
|
-
export type EventObjectEventDetailExtractor<EventObjectGeneric extends DefinedTypedEvent<any, any>> = EventObjectGeneric extends DefinedTypedEvent<string, infer R> ? R : never;
|
|
9
|
-
export type ElementEventDetailExtractor<ElementEventGeneric extends TypedEvent<any, any>> = ElementEventGeneric extends TypedEvent<string, infer R> ? R : never;
|
|
10
|
-
export declare function createEventDescriptorMap<EventsInitGeneric extends EventsInitMap>(eventsInit: EventsInitGeneric | undefined): EventDescriptorMap<EventsInitGeneric>;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { defineTypedEvent, } from '../typed-event/typed-event';
|
|
2
|
-
export function defineElementEvent() {
|
|
3
|
-
return defineTypedEvent();
|
|
4
|
-
}
|
|
5
|
-
export function createEventDescriptorMap(eventsInit) {
|
|
6
|
-
if (!eventsInit) {
|
|
7
|
-
return {};
|
|
8
|
-
}
|
|
9
|
-
return Object.keys(eventsInit)
|
|
10
|
-
.filter((currentElementEventKey) => {
|
|
11
|
-
if (typeof currentElementEventKey !== 'string') {
|
|
12
|
-
throw new Error(`Expected event key of type string but got type "${typeof currentElementEventKey}" for key ${String(currentElementEventKey)}`);
|
|
13
|
-
}
|
|
14
|
-
if (currentElementEventKey === '') {
|
|
15
|
-
throw new Error(`Got empty string for events key.`);
|
|
16
|
-
}
|
|
17
|
-
return true;
|
|
18
|
-
})
|
|
19
|
-
.reduce((accum, currentElementEventKey) => {
|
|
20
|
-
const eventObject = defineTypedEvent()(currentElementEventKey);
|
|
21
|
-
accum[currentElementEventKey] = eventObject;
|
|
22
|
-
return accum;
|
|
23
|
-
}, {});
|
|
24
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { DeclarativeElement } from './declarative-element';
|
|
2
|
-
export type PropertyInitMapBase = Record<PropertyKey, unknown>;
|
|
3
|
-
export type ElementProperty<KeyGeneric extends string | number | symbol, ValueGeneric> = {
|
|
4
|
-
name: KeyGeneric;
|
|
5
|
-
setProp(value: ValueGeneric): void;
|
|
6
|
-
getProp(): ValueGeneric;
|
|
7
|
-
};
|
|
8
|
-
export type StaticElementPropertyDescriptor<PropName extends string, PropValue> = {
|
|
9
|
-
propName: PropName;
|
|
10
|
-
initValue: PropValue;
|
|
11
|
-
};
|
|
12
|
-
export type ElementPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase> = {
|
|
13
|
-
[Property in keyof PropertyInitGeneric]: StaticElementPropertyDescriptor<string, PropertyInitGeneric[Property]>;
|
|
14
|
-
};
|
|
15
|
-
export declare function createElementUpdaterProxy<PropertyInitGeneric extends PropertyInitMapBase>(element: DeclarativeElement, verifyExists: boolean): PropertyInitGeneric;
|
|
16
|
-
export declare function createPropertyDescriptorMap<PropertyInitGeneric extends PropertyInitMapBase>(propertyInit: PropertyInitGeneric | undefined): ElementPropertyDescriptorMap<PropertyInitGeneric>;
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
function assertValidPropertyName(propKey, element, elementTagName) {
|
|
2
|
-
if (typeof propKey !== 'string' && typeof propKey !== 'number' && typeof propKey !== 'symbol') {
|
|
3
|
-
throw new Error(`Property name must be a string, got type "${typeof propKey}" from: "${String(propKey)}" for ${elementTagName.toLowerCase()}`);
|
|
4
|
-
}
|
|
5
|
-
if (!(propKey in element)) {
|
|
6
|
-
throw new Error(`Property "${String(propKey)}" does not exist on ${elementTagName.toLowerCase()}.`);
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
export function createElementUpdaterProxy(element, verifyExists) {
|
|
10
|
-
/**
|
|
11
|
-
* Lit element updates state and inputs by setting them directly on the element, so we must do
|
|
12
|
-
* that here. DeclarativeElement's types, however, do not expose this behavior, so we add that
|
|
13
|
-
* back in here.
|
|
14
|
-
*/
|
|
15
|
-
const elementAsProps = element;
|
|
16
|
-
const propsProxy = new Proxy({}, {
|
|
17
|
-
get: (target, propertyName) => {
|
|
18
|
-
if (verifyExists) {
|
|
19
|
-
assertValidPropertyName(propertyName, element, element.tagName);
|
|
20
|
-
}
|
|
21
|
-
const targetValue = target[propertyName];
|
|
22
|
-
if (typeof targetValue === 'function') {
|
|
23
|
-
return targetValue.bind(target);
|
|
24
|
-
}
|
|
25
|
-
return elementAsProps[propertyName];
|
|
26
|
-
},
|
|
27
|
-
set: (target, propertyName, value) => {
|
|
28
|
-
if (verifyExists) {
|
|
29
|
-
assertValidPropertyName(propertyName, element, element.tagName);
|
|
30
|
-
}
|
|
31
|
-
target[propertyName] = value;
|
|
32
|
-
elementAsProps[propertyName] = value;
|
|
33
|
-
return true;
|
|
34
|
-
},
|
|
35
|
-
ownKeys: (target) => Reflect.ownKeys(target),
|
|
36
|
-
getOwnPropertyDescriptor(target, propertyName) {
|
|
37
|
-
if (propertyName in target) {
|
|
38
|
-
return {
|
|
39
|
-
get value() {
|
|
40
|
-
return target[propertyName];
|
|
41
|
-
},
|
|
42
|
-
configurable: true,
|
|
43
|
-
enumerable: true,
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
return undefined;
|
|
47
|
-
},
|
|
48
|
-
has: (target, propertyName) => Reflect.has(target, propertyName),
|
|
49
|
-
});
|
|
50
|
-
return propsProxy;
|
|
51
|
-
}
|
|
52
|
-
export function createPropertyDescriptorMap(propertyInit) {
|
|
53
|
-
if (!propertyInit) {
|
|
54
|
-
return {};
|
|
55
|
-
}
|
|
56
|
-
return Object.keys(propertyInit)
|
|
57
|
-
.filter((key) => {
|
|
58
|
-
if (typeof key === 'string') {
|
|
59
|
-
return true;
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
throw new Error(`Property init cannot have non string keys: "${key}"`);
|
|
63
|
-
}
|
|
64
|
-
})
|
|
65
|
-
.reduce((accum, currentKey) => {
|
|
66
|
-
accum[currentKey] = {
|
|
67
|
-
propName: currentKey,
|
|
68
|
-
initValue: propertyInit[currentKey],
|
|
69
|
-
};
|
|
70
|
-
return accum;
|
|
71
|
-
}, {});
|
|
72
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function hasDeclarativeElementParent(input: Element): boolean;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { DeclarativeElement } from './declarative-element';
|
|
2
|
-
export function hasDeclarativeElementParent(input) {
|
|
3
|
-
const rootNode = input.getRootNode();
|
|
4
|
-
if (!(rootNode instanceof ShadowRoot)) {
|
|
5
|
-
// declarative elements all use shadow DOM, so if a shadow root doesn't exist then we're not
|
|
6
|
-
// in a declarative element.
|
|
7
|
-
return false;
|
|
8
|
-
}
|
|
9
|
-
const host = rootNode.host;
|
|
10
|
-
if (host instanceof DeclarativeElement) {
|
|
11
|
-
return true;
|
|
12
|
-
}
|
|
13
|
-
else {
|
|
14
|
-
return hasDeclarativeElementParent(host);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { PropertyInitMapBase } from './element-properties';
|
|
2
|
-
import { WithTagName } from './tag-name';
|
|
3
|
-
export type HostClassToggleCallbackInput<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase> = {
|
|
4
|
-
state: Readonly<StateGeneric>;
|
|
5
|
-
inputs: Readonly<InputsGeneric>;
|
|
6
|
-
};
|
|
7
|
-
export type HostClassToggleCallback<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase> = (inputs: HostClassToggleCallbackInput<InputsGeneric, StateGeneric>) => boolean;
|
|
8
|
-
export type HostClassesInitMap<HostClassKeys extends string, InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase> = Record<HostClassKeys,
|
|
9
|
-
/**
|
|
10
|
-
* Callback to determine when host class should be enabled (based on current inputs and state),
|
|
11
|
-
* or just undefined to mark that this host class name will only be manually applied.
|
|
12
|
-
*/
|
|
13
|
-
HostClassToggleCallback<InputsGeneric, StateGeneric> | false>;
|
|
14
|
-
export type HostClassName<TagName extends string, HostClassPropName extends string> = `${TagName}-${HostClassPropName}`;
|
|
15
|
-
export type HostClassNamesMap<TagName extends string, HostClassKeys extends string> = Record<HostClassKeys, WithTagName<TagName, string>>;
|
|
16
|
-
export declare function createHostClassNamesMap<TagName extends string, HostClassKeys extends string, HostClassesInitGeneric extends HostClassesInitMap<HostClassKeys,
|
|
17
|
-
/**
|
|
18
|
-
* We can use any here because we don't care what the state or input names are, we just care
|
|
19
|
-
* what the host class names are
|
|
20
|
-
*/
|
|
21
|
-
any, any>>(tagName: TagName, hostClassesInit?: HostClassesInitGeneric): HostClassNamesMap<TagName, HostClassKeys>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { mapObjectValues } from '@augment-vir/common';
|
|
2
|
-
import { toHtmlSafeWithTagName } from './tag-name';
|
|
3
|
-
export function createHostClassNamesMap(tagName, hostClassesInit) {
|
|
4
|
-
if (hostClassesInit) {
|
|
5
|
-
return mapObjectValues(hostClassesInit, (key) => {
|
|
6
|
-
return toHtmlSafeWithTagName(tagName, String(key));
|
|
7
|
-
});
|
|
8
|
-
}
|
|
9
|
-
else {
|
|
10
|
-
return {};
|
|
11
|
-
}
|
|
12
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { TemplateResult } from 'lit';
|
|
2
|
-
import { TypedEvent } from '../typed-event/typed-event';
|
|
3
|
-
import { DeclarativeElement, HostInstanceType } from './declarative-element';
|
|
4
|
-
import { EventDescriptorMap, EventInitMapEventDetailExtractor, EventsInitMap } from './element-events';
|
|
5
|
-
import { PropertyInitMapBase } from './element-properties';
|
|
6
|
-
export type RenderCallback<InputsGeneric extends PropertyInitMapBase = any, StateGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any, HostClassKeys extends string = any, CssVarKeys extends string = any> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => TemplateResult;
|
|
7
|
-
export type InitCallback<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = (params: RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>) => void;
|
|
8
|
-
export type UpdateStateCallback<StateGeneric extends PropertyInitMapBase> = (newState: Partial<StateGeneric>) => void;
|
|
9
|
-
export type RenderParams<InputsGeneric extends PropertyInitMapBase, StateInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string> = {
|
|
10
|
-
state: Readonly<StateInitGeneric>;
|
|
11
|
-
updateState: UpdateStateCallback<StateInitGeneric>;
|
|
12
|
-
events: EventDescriptorMap<EventsInitGeneric>;
|
|
13
|
-
host: HostInstanceType<InputsGeneric, StateInitGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
|
|
14
|
-
dispatch: <EventTypeNameGeneric extends keyof EventsInitGeneric>(event: TypedEvent<EventTypeNameGeneric extends string ? EventTypeNameGeneric : never, EventInitMapEventDetailExtractor<EventTypeNameGeneric, EventsInitGeneric>>) => boolean;
|
|
15
|
-
inputs: InputsGeneric;
|
|
16
|
-
/**
|
|
17
|
-
* Same as dispatchElementEvent but without the extra types. This allows you to emit any events,
|
|
18
|
-
* even events from other custom elements.
|
|
19
|
-
*/
|
|
20
|
-
genericDispatch: (event: Event) => boolean;
|
|
21
|
-
};
|
|
22
|
-
export declare function createRenderParams<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap, HostClassKeys extends string, CssVarKeys extends string>(element: DeclarativeElement<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>, eventsMap: EventDescriptorMap<EventsInitGeneric>): RenderParams<InputsGeneric, StateGeneric, EventsInitGeneric, HostClassKeys, CssVarKeys>;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { getObjectTypedKeys } from '@augment-vir/common';
|
|
2
|
-
export function createRenderParams(element, eventsMap) {
|
|
3
|
-
const renderParams = {
|
|
4
|
-
/**
|
|
5
|
-
* These two dispatch properties do the same thing but their interfaces are different.
|
|
6
|
-
* DispatchEvent's type interface is much stricter.
|
|
7
|
-
*/
|
|
8
|
-
dispatch: (event) => element.dispatchEvent(event),
|
|
9
|
-
genericDispatch: (event) => element.dispatchEvent(event),
|
|
10
|
-
updateState: (partialProps) => {
|
|
11
|
-
getObjectTypedKeys(partialProps).forEach((propKey) => {
|
|
12
|
-
element.instanceState[propKey] = partialProps[propKey];
|
|
13
|
-
});
|
|
14
|
-
},
|
|
15
|
-
inputs: element.instanceInputs,
|
|
16
|
-
host: element,
|
|
17
|
-
state: element.instanceState,
|
|
18
|
-
events: eventsMap,
|
|
19
|
-
};
|
|
20
|
-
return renderParams;
|
|
21
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { CSSResult } from 'lit';
|
|
2
|
-
import { CssVarNameOrValueMap } from './css-vars';
|
|
3
|
-
import { PropertyInitMapBase } from './element-properties';
|
|
4
|
-
import { HostClassesInitMap, HostClassNamesMap } from './host-classes';
|
|
5
|
-
export type StylesCallbackInput<HostClassKeys extends string, CssVarKeys extends string> = {
|
|
6
|
-
hostClassSelectors: Record<HostClassKeys, CSSResult>;
|
|
7
|
-
hostClassNames: Record<HostClassKeys, CSSResult>;
|
|
8
|
-
cssVarNames: Record<CssVarKeys, CSSResult>;
|
|
9
|
-
cssVarValues: Record<CssVarKeys, CSSResult>;
|
|
10
|
-
};
|
|
11
|
-
export type StylesCallback<HostClassKeys extends string, CssVarKeys extends string> = (input: StylesCallbackInput<HostClassKeys, CssVarKeys>) => CSSResult;
|
|
12
|
-
export declare function hostClassNamesToStylesInput<HostClassKeys extends string, CssVarKeys extends string>({ hostClassNames, cssVarNames, cssVarValues, }: {
|
|
13
|
-
hostClassNames: HostClassNamesMap<string, HostClassKeys>;
|
|
14
|
-
cssVarNames: CssVarNameOrValueMap<CssVarKeys>;
|
|
15
|
-
cssVarValues: CssVarNameOrValueMap<CssVarKeys>;
|
|
16
|
-
}): StylesCallbackInput<HostClassKeys, CssVarKeys>;
|
|
17
|
-
export declare function applyHostClasses<InputsGeneric extends PropertyInitMapBase, StateGeneric extends PropertyInitMapBase, HostClassKeys extends string>({ host, hostClassesInit, hostClassNames, state, inputs, }: {
|
|
18
|
-
host: HTMLElement;
|
|
19
|
-
hostClassesInit: Readonly<HostClassesInitMap<HostClassKeys, InputsGeneric, StateGeneric>> | undefined;
|
|
20
|
-
hostClassNames: HostClassNamesMap<string, HostClassKeys>;
|
|
21
|
-
state: Readonly<StateGeneric>;
|
|
22
|
-
inputs: Readonly<InputsGeneric>;
|
|
23
|
-
}): void;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { getObjectTypedKeys, mapObjectValues } from '@augment-vir/common';
|
|
2
|
-
import { unsafeCSS } from 'lit';
|
|
3
|
-
export function hostClassNamesToStylesInput({ hostClassNames, cssVarNames, cssVarValues, }) {
|
|
4
|
-
return {
|
|
5
|
-
hostClassSelectors: mapObjectValues(hostClassNames, (key, name) => {
|
|
6
|
-
return unsafeCSS(`:host(.${name})`);
|
|
7
|
-
}),
|
|
8
|
-
hostClassNames: mapObjectValues(hostClassNames, (key, name) => {
|
|
9
|
-
return unsafeCSS(name);
|
|
10
|
-
}),
|
|
11
|
-
cssVarNames: cssVarNames,
|
|
12
|
-
cssVarValues: cssVarValues,
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
export function applyHostClasses({ host, hostClassesInit, hostClassNames, state, inputs, }) {
|
|
16
|
-
if (!hostClassesInit) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
getObjectTypedKeys(hostClassesInit).forEach((hostClassKey) => {
|
|
20
|
-
const maybeCallback = hostClassesInit[hostClassKey];
|
|
21
|
-
const hostClassName = hostClassNames[hostClassKey];
|
|
22
|
-
if (typeof maybeCallback === 'function') {
|
|
23
|
-
const shouldApplyHostClass = maybeCallback({ state, inputs });
|
|
24
|
-
if (shouldApplyHostClass) {
|
|
25
|
-
host.classList.add(hostClassName);
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
host.classList.remove(hostClassName);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const DeclarativeElementMarkerSymbol: unique symbol;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const DeclarativeElementMarkerSymbol = Symbol('this-is-an-element-vir-declarative-element');
|
package/dist/index.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export * from './declarative-element/declarative-element';
|
|
2
|
-
export * from './declarative-element/define-element';
|
|
3
|
-
export * from './declarative-element/define-element-no-inputs';
|
|
4
|
-
export type { DeclarativeElementDefinitionOptions } from './declarative-element/definition-options';
|
|
5
|
-
export * from './declarative-element/directives/assign-with-clean-up.directive';
|
|
6
|
-
export * from './declarative-element/directives/assign.directive';
|
|
7
|
-
export * from './declarative-element/directives/awaiting.directive';
|
|
8
|
-
export * from './declarative-element/directives/directive-helpers';
|
|
9
|
-
export * from './declarative-element/directives/listen.directive';
|
|
10
|
-
export * from './declarative-element/directives/on-dom-created.directive';
|
|
11
|
-
export * from './declarative-element/directives/on-resize.directive';
|
|
12
|
-
export * from './declarative-element/element-events';
|
|
13
|
-
export * from './declarative-element/element-properties';
|
|
14
|
-
export * from './declarative-element/render-callback';
|
|
15
|
-
export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
|
|
16
|
-
export * from './template-transforms/vir-css/vir-css';
|
|
17
|
-
export * from './template-transforms/vir-html/vir-html';
|
|
18
|
-
export * from './typed-event/typed-event';
|
package/dist/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export * from './declarative-element/declarative-element';
|
|
2
|
-
export * from './declarative-element/define-element';
|
|
3
|
-
export * from './declarative-element/define-element-no-inputs';
|
|
4
|
-
export * from './declarative-element/directives/assign-with-clean-up.directive';
|
|
5
|
-
export * from './declarative-element/directives/assign.directive';
|
|
6
|
-
export * from './declarative-element/directives/awaiting.directive';
|
|
7
|
-
export * from './declarative-element/directives/directive-helpers';
|
|
8
|
-
export * from './declarative-element/directives/listen.directive';
|
|
9
|
-
export * from './declarative-element/directives/on-dom-created.directive';
|
|
10
|
-
export * from './declarative-element/directives/on-resize.directive';
|
|
11
|
-
export * from './declarative-element/element-events';
|
|
12
|
-
export * from './declarative-element/element-properties';
|
|
13
|
-
export * from './declarative-element/render-callback';
|
|
14
|
-
export { requireAllCustomElementsToBeDeclarativeElements } from './require-declarative-element';
|
|
15
|
-
export * from './template-transforms/vir-css/vir-css';
|
|
16
|
-
export * from './template-transforms/vir-html/vir-html';
|
|
17
|
-
export * from './typed-event/typed-event';
|