@seahax/elemental 0.5.16 → 0.5.17
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
CHANGED
|
@@ -274,7 +274,8 @@ import { extendComponentDefinition } from '@seahax/elemental';
|
|
|
274
274
|
// function) with hooks (callbacks) that can be used to add shared
|
|
275
275
|
// behavior to all defined components.
|
|
276
276
|
export const defineComponent = extendComponentDefinition({
|
|
277
|
-
|
|
277
|
+
preInit: (shadow) => {...},
|
|
278
|
+
postInit: (shadow) => {...},
|
|
278
279
|
preRender: (shadow) => {...},
|
|
279
280
|
postRender: (shadow) => {...},
|
|
280
281
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Ref } from './hooks/useRef.ts';
|
|
2
|
-
type UnsafeProps = 'connectedCallback' | 'connectedMoveCallback' | 'disconnectedCallback' | 'adoptedCallback' | 'formResetCallback' | 'formStateRestoreCallback' | 'formDisabledCallback';
|
|
2
|
+
type UnsafeProps = 'connectedCallback' | 'connectedMoveCallback' | 'disconnectedCallback' | 'adoptedCallback' | 'formResetCallback' | 'formStateRestoreCallback' | 'formDisabledCallback' | 'setAdoptedStyleSheets';
|
|
3
3
|
type SafePropKeys<TProps> = Exclude<keyof TProps, keyof HTMLElement | UnsafeProps>;
|
|
4
4
|
export interface ComponentConstructor<TProps extends object> {
|
|
5
5
|
/**
|
|
@@ -7,11 +7,6 @@ export interface ComponentConstructor<TProps extends object> {
|
|
|
7
7
|
*/
|
|
8
8
|
readonly formAssociated: boolean;
|
|
9
9
|
new (): ComponentWithProps<TProps>;
|
|
10
|
-
/**
|
|
11
|
-
* Helper that sets the shadow root adopted stylesheets array from strings or
|
|
12
|
-
* style sheets.
|
|
13
|
-
*/
|
|
14
|
-
setAdoptedStyleSheets(...styles: (string | CSSStyleSheet)[]): void;
|
|
15
10
|
}
|
|
16
11
|
export interface ComponentOptions<TProps extends object> {
|
|
17
12
|
/** Register the component as a custom element with this tag name. */
|
|
@@ -40,6 +35,12 @@ export type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'
|
|
|
40
35
|
readonly host: ComponentWithProps<TProps>;
|
|
41
36
|
};
|
|
42
37
|
export type ComponentWithProps<TProps extends object> = HTMLElement & {
|
|
38
|
+
/**
|
|
39
|
+
* Helper that sets the shadow root adopted stylesheets array from strings or
|
|
40
|
+
* style sheets.
|
|
41
|
+
*/
|
|
42
|
+
setAdoptedStyleSheets(...styles: (string | CSSStyleSheet)[]): void;
|
|
43
|
+
} & {
|
|
43
44
|
-readonly [P in SafePropKeys<TProps>]: TProps[P];
|
|
44
45
|
};
|
|
45
46
|
export type ComponentPropRefs<TProps extends object> = {
|
|
@@ -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 /**\n * True to mark the component as form-associated.\n */\n readonly formAssociated: boolean;\n\n new (): ComponentWithProps<TProps>;\n
|
|
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 | 'setAdoptedStyleSheets';\n\ntype SafePropKeys<TProps> = Exclude<keyof TProps, keyof HTMLElement | UnsafeProps>;\n\nexport interface ComponentConstructor<TProps extends object> {\n /**\n * True to mark the component as form-associated.\n */\n readonly formAssociated: boolean;\n\n new (): ComponentWithProps<TProps>;\n}\n\nexport interface ComponentOptions<TProps extends object> {\n /** Register the component as a custom element with this tag name. */\n readonly tagName?: `${string}-${string}`;\n /** True to mark the component as form-associated. */\n readonly formAssociated?: boolean;\n /** Component custom property descriptors. */\n readonly props?: ComponentPropDescriptors<TProps>;\n /** Shadow root attachment options. */\n readonly shadow?: Partial<ShadowRootInit>;\n /** Styles to be adopted by the shadow root after creation. */\n readonly styles?: readonly (string | CSSStyleSheet)[];\n /** Called after the component instance is created, before rendering. */\n readonly init?: (shadow: ComponentShadowRoot<TProps>) => void;\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 /**\n * Helper that sets the shadow root adopted stylesheets array from strings or\n * style sheets.\n */\n setAdoptedStyleSheets(...styles: (string | CSSStyleSheet)[]): void;\n} & {\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 { tagName, formAssociated = false, props, shadow, styles = [], init: postCreate }: ComponentOptions<TProps> = {},\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 (formAssociated) {\n this.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 as ComponentPropDescriptors<Record<string, unknown>>)) {\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 this.setAdoptedStyleSheets(...styles);\n postCreate?.(this.#shadow);\n }\n\n setAdoptedStyleSheets(...styles: (string | CSSStyleSheet)[]): void {\n this.#shadow.adoptedStyleSheets = styles.map((style) => {\n if (typeof style === 'string') {\n const styleSheet = new CSSStyleSheet();\n styleSheet.replaceSync(style);\n return styleSheet;\n }\n\n return style;\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":";;AA6EA,SAAgB,EACd,GACA,EAAE,YAAS,oBAAiB,IAAO,UAAO,WAAQ,YAAS,EAAE,EAAE,MAAM,MAAyC,EAAE,EAClF;CAC9B,MAAM,UAAyB,YAAY;EACzC,OAAgB,iBAAiB;EAEjC;EACA;EACA,KAAkB,EAAE;EAEpB,cAAc;AAmBZ,OAlBA,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,KACF,KAAK,iBAAiB,EAGpB,GAAO;IACT,IAAM,IAAyC,MAAA;AAE/C,SAAK,IAAM,CAAC,GAAK,MAAkB,OAAO,QAAQ,EAA2D,EAAE;AAC7G,SAAI,KAAO,KAAM;KAEjB,IAAM,IAAa,EAAc,EADX,KAAO,MAAA,EAAiB,UAAe,KAAA,EAAU,EACjC,KAAK;AAC3C,YAAO,eAAe,MAAM,GAAK,EAAW;;;AAKhD,GADA,KAAK,sBAAsB,GAAG,EAAO,EACrC,IAAa,MAAA,EAAa;;EAG5B,sBAAsB,GAAG,GAA0C;AACjE,SAAA,EAAa,qBAAqB,EAAO,KAAK,MAAU;AACtD,QAAI,OAAO,KAAU,UAAU;KAC7B,IAAM,IAAa,IAAI,eAAe;AAEtC,YADA,EAAW,YAAY,EAAM,EACtB;;AAGT,WAAO;KACP;;EAGJ,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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { defineComponent } from './defineComponent.js';
|
|
1
|
+
import { type ComponentShadowRoot, defineComponent } from './defineComponent.js';
|
|
2
2
|
export interface ExtendComponentDefinitionOptions {
|
|
3
|
-
/** Called
|
|
4
|
-
|
|
3
|
+
/** Called before the component `init` option is called. */
|
|
4
|
+
preInit?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
5
|
+
/** Called after the component `init` option is called. */
|
|
6
|
+
postInit?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
5
7
|
/** Called before the component render function. */
|
|
6
|
-
preRender?: (shadow:
|
|
8
|
+
preRender?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
7
9
|
/** Called after the component render function. */
|
|
8
|
-
postRender?: (shadow:
|
|
10
|
+
postRender?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
9
11
|
}
|
|
10
12
|
/**
|
|
11
13
|
* Create a new component factory function (ie. `defineComponent`) with
|
|
@@ -13,4 +15,4 @@ export interface ExtendComponentDefinitionOptions {
|
|
|
13
15
|
*
|
|
14
16
|
* NOTE: Does not support `tagName` or `props` option defaults.
|
|
15
17
|
*/
|
|
16
|
-
export declare function extendComponentDefinition({
|
|
18
|
+
export declare function extendComponentDefinition({ preInit, postInit, preRender, postRender, }: ExtendComponentDefinitionOptions): typeof defineComponent;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { defineComponent as e } from "./defineComponent.js";
|
|
2
2
|
//#region src/extendComponentDefinition.ts
|
|
3
|
-
function t({
|
|
4
|
-
return (
|
|
5
|
-
|
|
3
|
+
function t({ preInit: t, postInit: n, preRender: r, postRender: i }) {
|
|
4
|
+
return (a, o) => e((e, t) => {
|
|
5
|
+
r?.(e), a(e, t), i?.(e);
|
|
6
6
|
}, {
|
|
7
|
-
...
|
|
7
|
+
...o,
|
|
8
8
|
init: (e) => {
|
|
9
|
-
t?.(e),
|
|
9
|
+
t?.(e), o?.init?.(e), n?.(e);
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extendComponentDefinition.js","names":[],"sources":["../src/extendComponentDefinition.ts"],"sourcesContent":["import { defineComponent } from './defineComponent.js';\n\nexport interface ExtendComponentDefinitionOptions {\n /** Called
|
|
1
|
+
{"version":3,"file":"extendComponentDefinition.js","names":[],"sources":["../src/extendComponentDefinition.ts"],"sourcesContent":["import { type ComponentShadowRoot, defineComponent } from './defineComponent.js';\n\nexport interface ExtendComponentDefinitionOptions {\n /** Called before the component `init` option is called. */\n preInit?: (shadow: ComponentShadowRoot<{}>) => void;\n /** Called after the component `init` option is called. */\n postInit?: (shadow: ComponentShadowRoot<{}>) => void;\n /** Called before the component render function. */\n preRender?: (shadow: ComponentShadowRoot<{}>) => void;\n /** Called after the component render function. */\n postRender?: (shadow: ComponentShadowRoot<{}>) => void;\n}\n\n/**\n * Create a new component factory function (ie. `defineComponent`) with\n * modified default options or render hooks.\n *\n * NOTE: Does not support `tagName` or `props` option defaults.\n */\nexport function extendComponentDefinition({\n preInit,\n postInit,\n preRender,\n postRender,\n}: ExtendComponentDefinitionOptions): typeof defineComponent {\n return (render, options) => {\n return defineComponent(\n (shadow, propRefs) => {\n preRender?.(shadow);\n render(shadow, propRefs);\n postRender?.(shadow);\n },\n {\n ...options,\n init: (shadow) => {\n preInit?.(shadow);\n options?.init?.(shadow);\n postInit?.(shadow);\n },\n },\n );\n };\n}\n"],"mappings":";;AAmBA,SAAgB,EAA0B,EACxC,YACA,aACA,cACA,iBAC2D;AAC3D,SAAQ,GAAQ,MACP,GACJ,GAAQ,MAAa;AAGpB,EAFA,IAAY,EAAO,EACnB,EAAO,GAAQ,EAAS,EACxB,IAAa,EAAO;IAEtB;EACE,GAAG;EACH,OAAO,MAAW;AAGhB,GAFA,IAAU,EAAO,EACjB,GAAS,OAAO,EAAO,EACvB,IAAW,EAAO;;EAErB,CACF"}
|
package/package.json
CHANGED