@seahax/elemental 0.5.12 → 0.5.14
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.
|
@@ -13,7 +13,7 @@ export interface ComponentOptions<TProps extends object> {
|
|
|
13
13
|
/** True to mark the component as form-associated. */
|
|
14
14
|
readonly formAssociated?: boolean;
|
|
15
15
|
/** Register the component as a custom element with this tag name. */
|
|
16
|
-
readonly tagName?: string
|
|
16
|
+
readonly tagName?: `${string}-${string}`;
|
|
17
17
|
}
|
|
18
18
|
export type ComponentPropDescriptors<TProps extends object> = {
|
|
19
19
|
readonly [P in SafePropKeys<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;
|
|
@@ -23,15 +23,16 @@ export interface ComponentPropDescriptor<T> extends Omit<PropertyDescriptor, 'va
|
|
|
23
23
|
get(): T;
|
|
24
24
|
set?(value: T): void;
|
|
25
25
|
}
|
|
26
|
-
export type
|
|
27
|
-
-readonly [P in SafePropKeys<TProps>]: TProps[P];
|
|
28
|
-
};
|
|
26
|
+
export type ComponentRender<TProps extends object> = (shadowRoot: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void;
|
|
29
27
|
export type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {
|
|
30
28
|
readonly host: ComponentWithProps<TProps>;
|
|
31
29
|
};
|
|
30
|
+
export type ComponentWithProps<TProps extends object> = HTMLElement & {
|
|
31
|
+
-readonly [P in SafePropKeys<TProps>]: TProps[P];
|
|
32
|
+
};
|
|
32
33
|
export type ComponentPropRefs<TProps extends object> = {
|
|
33
34
|
readonly [P in SafePropKeys<TProps>]: Ref<TProps[P] | undefined>;
|
|
34
35
|
};
|
|
35
36
|
/** Define a custom `HTMLElement` that is functional and reactive. */
|
|
36
|
-
export declare function defineComponent<TProps extends object = {}>(render:
|
|
37
|
+
export declare function defineComponent<TProps extends object = {}>(render: ComponentRender<TProps>, { props, shadow, formAssociated, tagName }?: ComponentOptions<Record<string, unknown>>): ComponentConstructor<TProps>;
|
|
37
38
|
export {};
|
package/dist/defineComponent.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createController as e } from "./internal/createController.js";
|
|
2
2
|
//#region src/defineComponent.ts
|
|
3
|
-
function t(t, { props: n, shadow: r, formAssociated: i = !1 } = {}) {
|
|
4
|
-
|
|
3
|
+
function t(t, { props: n, shadow: r, formAssociated: i = !1, tagName: a } = {}) {
|
|
4
|
+
class o extends HTMLElement {
|
|
5
5
|
static formAssociated = i;
|
|
6
6
|
#e;
|
|
7
7
|
#t;
|
|
@@ -49,7 +49,8 @@ function t(t, { props: n, shadow: r, formAssociated: i = !1 } = {}) {
|
|
|
49
49
|
formStateRestoreCallback(e, t) {
|
|
50
50
|
this.#t.formStateRestoreCallback(e, t);
|
|
51
51
|
}
|
|
52
|
-
}
|
|
52
|
+
}
|
|
53
|
+
return a && customElements.define(a, o), o;
|
|
53
54
|
}
|
|
54
55
|
//#endregion
|
|
55
56
|
export { t as defineComponent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defineComponent.js","names":["#shadow","#controller","#props"],"sources":["../src/defineComponent.ts"],"sourcesContent":["import { type Ref } from './hooks/useRef.ts';\nimport { type Controller, createController } from './internal/createController.ts';\n\ntype UnsafeProps =\n | 'connectedCallback'\n | 'connectedMoveCallback'\n | 'disconnectedCallback'\n | 'adoptedCallback'\n | 'formResetCallback'\n | 'formStateRestoreCallback'\n | 'formDisabledCallback';\n\ntype SafePropKeys<TProps> = Exclude<keyof TProps, keyof HTMLElement | UnsafeProps>;\n\nexport interface ComponentConstructor<TProps extends object> {\n readonly formAssociated: boolean;\n new (): ComponentWithProps<TProps>;\n}\n\nexport interface ComponentOptions<TProps extends object> {\n /** Shadow root attachment options. */\n readonly shadow?: Partial<ShadowRootInit>;\n /** Component custom property descriptors. */\n readonly props?: ComponentPropDescriptors<TProps>;\n /** True to mark the component as form-associated. */\n readonly formAssociated?: boolean;\n /** Register the component as a custom element with this tag name. */\n readonly tagName?: string
|
|
1
|
+
{"version":3,"file":"defineComponent.js","names":["#shadow","#controller","#props"],"sources":["../src/defineComponent.ts"],"sourcesContent":["import { type Ref } from './hooks/useRef.ts';\nimport { type Controller, createController } from './internal/createController.ts';\n\ntype UnsafeProps =\n | 'connectedCallback'\n | 'connectedMoveCallback'\n | 'disconnectedCallback'\n | 'adoptedCallback'\n | 'formResetCallback'\n | 'formStateRestoreCallback'\n | 'formDisabledCallback';\n\ntype SafePropKeys<TProps> = Exclude<keyof TProps, keyof HTMLElement | UnsafeProps>;\n\nexport interface ComponentConstructor<TProps extends object> {\n readonly formAssociated: boolean;\n new (): ComponentWithProps<TProps>;\n}\n\nexport interface ComponentOptions<TProps extends object> {\n /** Shadow root attachment options. */\n readonly shadow?: Partial<ShadowRootInit>;\n /** Component custom property descriptors. */\n readonly props?: ComponentPropDescriptors<TProps>;\n /** True to mark the component as form-associated. */\n readonly formAssociated?: boolean;\n /** Register the component as a custom element with this tag name. */\n readonly tagName?: `${string}-${string}`;\n}\n\nexport type ComponentPropDescriptors<TProps extends object> = {\n readonly [P in SafePropKeys<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;\n};\n\nexport type ComponentPropDescriptorFactory<TType> = (\n ref: Ref<TType | undefined>,\n host: HTMLElement,\n) => ComponentPropDescriptor<TType>;\n\nexport interface ComponentPropDescriptor<T> extends Omit<PropertyDescriptor, 'value' | 'get' | 'set'> {\n get(): T;\n set?(value: T): void;\n}\n\nexport type ComponentRender<TProps extends object> = (\n shadowRoot: ComponentShadowRoot<TProps>,\n props: ComponentPropRefs<TProps>,\n) => void;\n\nexport type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {\n readonly host: ComponentWithProps<TProps>;\n};\n\nexport type ComponentWithProps<TProps extends object> = HTMLElement & {\n -readonly [P in SafePropKeys<TProps>]: TProps[P];\n};\n\nexport type ComponentPropRefs<TProps extends object> = {\n readonly [P in SafePropKeys<TProps>]: Ref<TProps[P] | undefined>;\n};\n\n/** Define a custom `HTMLElement` that is functional and reactive. */\nexport function defineComponent<TProps extends object = {}>(\n render: ComponentRender<TProps>,\n { props, shadow, formAssociated = false, tagName }: ComponentOptions<Record<string, unknown>> = {},\n): ComponentConstructor<TProps> {\n class ComponentElement extends HTMLElement {\n static readonly formAssociated = formAssociated;\n\n readonly #shadow: ComponentShadowRoot<TProps>;\n readonly #controller: Controller;\n readonly #props = {} as ComponentPropRefs<TProps>;\n\n constructor() {\n super();\n\n this.#shadow = this.attachShadow({\n ...shadow,\n mode: shadow?.mode ?? 'open',\n }) as ComponentShadowRoot<TProps>;\n\n this.#controller = createController({\n host: this,\n formAssociated,\n render: () => render(this.#shadow, this.#props),\n attachInternals: () => super.attachInternals(),\n });\n\n if (props) {\n const propRefs: Record<string, Ref<unknown>> = this.#props;\n\n for (const [key, getDescriptor] of Object.entries(props)) {\n if (key in this) continue;\n const ref = (propRefs[key] = this.#controller.createRef<any>(undefined));\n const descriptor = getDescriptor(ref, this);\n Object.defineProperty(this, key, descriptor);\n }\n }\n\n if (formAssociated) {\n this.attachInternals();\n }\n }\n\n override attachInternals(): ElementInternals {\n return this.#controller.attachInternals();\n }\n\n protected connectedCallback(): void {\n this.#controller.connectedCallback();\n }\n\n protected connectedMoveCallback(): void {\n this.#controller.connectedMoveCallback();\n }\n\n protected disconnectedCallback(): void {\n this.#controller.disconnectedCallback();\n }\n\n protected adoptedCallback(): void {\n this.#controller.adoptedCallback();\n }\n\n protected formDisabledCallback(disabled: boolean): void {\n this.#controller.formDisabledCallback(disabled);\n }\n\n protected formResetCallback(): void {\n this.#controller.formResetCallback();\n }\n\n protected formStateRestoreCallback(state: string | File | FormData, reason: 'restore' | 'autocomplete'): void {\n this.#controller.formStateRestoreCallback(state, reason);\n }\n }\n\n if (tagName) {\n customElements.define(tagName, ComponentElement);\n }\n\n return ComponentElement as unknown as ComponentConstructor<TProps>;\n}\n"],"mappings":";;AA8DA,SAAgB,EACd,GACA,EAAE,UAAO,WAAQ,oBAAiB,IAAO,eAAuD,EAAE,EACpE;CAC9B,MAAM,UAAyB,YAAY;EACzC,OAAgB,iBAAiB;EAEjC;EACA;EACA,KAAkB,EAAE;EAEpB,cAAc;AAeZ,OAdA,OAAO,EAEP,MAAA,IAAe,KAAK,aAAa;IAC/B,GAAG;IACH,MAAM,GAAQ,QAAQ;IACvB,CAAC,EAEF,MAAA,IAAmB,EAAiB;IAClC,MAAM;IACN;IACA,cAAc,EAAO,MAAA,GAAc,MAAA,EAAY;IAC/C,uBAAuB,MAAM,iBAAiB;IAC/C,CAAC,EAEE,GAAO;IACT,IAAM,IAAyC,MAAA;AAE/C,SAAK,IAAM,CAAC,GAAK,MAAkB,OAAO,QAAQ,EAAM,EAAE;AACxD,SAAI,KAAO,KAAM;KAEjB,IAAM,IAAa,EAAc,EADX,KAAO,MAAA,EAAiB,UAAe,KAAA,EAAU,EACjC,KAAK;AAC3C,YAAO,eAAe,MAAM,GAAK,EAAW;;;AAIhD,GAAI,KACF,KAAK,iBAAiB;;EAI1B,kBAA6C;AAC3C,UAAO,MAAA,EAAiB,iBAAiB;;EAG3C,oBAAoC;AAClC,SAAA,EAAiB,mBAAmB;;EAGtC,wBAAwC;AACtC,SAAA,EAAiB,uBAAuB;;EAG1C,uBAAuC;AACrC,SAAA,EAAiB,sBAAsB;;EAGzC,kBAAkC;AAChC,SAAA,EAAiB,iBAAiB;;EAGpC,qBAA+B,GAAyB;AACtD,SAAA,EAAiB,qBAAqB,EAAS;;EAGjD,oBAAoC;AAClC,SAAA,EAAiB,mBAAmB;;EAGtC,yBAAmC,GAAiC,GAA0C;AAC5G,SAAA,EAAiB,yBAAyB,GAAO,EAAO;;;AAQ5D,QAJI,KACF,eAAe,OAAO,GAAS,EAAiB,EAG3C"}
|
package/package.json
CHANGED