@seahax/elemental 0.5.16 → 0.5.18
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 +5 -3
- package/dist/defineComponent.d.ts +2 -7
- package/dist/defineComponent.js +14 -21
- package/dist/defineComponent.js.map +1 -1
- package/dist/extendComponentDefinition.d.ts +9 -6
- package/dist/extendComponentDefinition.js +6 -5
- package/dist/extendComponentDefinition.js.map +1 -1
- package/dist/internal/createStyleSheet.d.ts +2 -0
- package/dist/internal/createStyleSheet.js +9 -0
- package/dist/internal/createStyleSheet.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -271,10 +271,12 @@ const MyComponent = defineComponent((shadow) => {
|
|
|
271
271
|
import { extendComponentDefinition } from '@seahax/elemental';
|
|
272
272
|
|
|
273
273
|
// Create a new component definition factory (ie. `defineComponent`
|
|
274
|
-
// function) with hooks (callbacks) that can be used to
|
|
275
|
-
// behavior to all defined components.
|
|
274
|
+
// function) with common styles and hooks (callbacks) that can be used to
|
|
275
|
+
// add shared behavior to all defined components.
|
|
276
276
|
export const defineComponent = extendComponentDefinition({
|
|
277
|
-
|
|
277
|
+
styles: [...],
|
|
278
|
+
preInit: (shadow) => {...},
|
|
279
|
+
postInit: (shadow) => {...},
|
|
278
280
|
preRender: (shadow) => {...},
|
|
279
281
|
postRender: (shadow) => {...},
|
|
280
282
|
});
|
|
@@ -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. */
|
|
@@ -46,5 +41,5 @@ export type ComponentPropRefs<TProps extends object> = {
|
|
|
46
41
|
readonly [P in SafePropKeys<TProps>]: Ref<TProps[P] | undefined>;
|
|
47
42
|
};
|
|
48
43
|
/** Define a custom `HTMLElement` that is functional and reactive. */
|
|
49
|
-
export declare function defineComponent<TProps extends object = {}>(render: ComponentRender<TProps>, { tagName, formAssociated, props, shadow, styles, init
|
|
44
|
+
export declare function defineComponent<TProps extends object = {}>(render: ComponentRender<TProps>, { tagName, formAssociated, props, shadow, styles, init }?: ComponentOptions<TProps>): ComponentConstructor<TProps>;
|
|
50
45
|
export {};
|
package/dist/defineComponent.js
CHANGED
|
@@ -1,38 +1,31 @@
|
|
|
1
1
|
import { createController as e } from "./internal/createController.js";
|
|
2
|
+
import { createStyleSheet as t } from "./internal/createStyleSheet.js";
|
|
2
3
|
//#region src/defineComponent.ts
|
|
3
|
-
function
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
function n(n, { tagName: r, formAssociated: i = !1, props: a, shadow: o, styles: s = [], init: c } = {}) {
|
|
5
|
+
let l = s.map((e) => typeof e == "string" ? t(e) : e);
|
|
6
|
+
class u extends HTMLElement {
|
|
7
|
+
static formAssociated = i;
|
|
6
8
|
#e;
|
|
7
9
|
#t;
|
|
8
10
|
#n = {};
|
|
9
11
|
constructor() {
|
|
10
12
|
if (super(), this.#e = this.attachShadow({
|
|
11
|
-
...
|
|
12
|
-
mode:
|
|
13
|
+
...o,
|
|
14
|
+
mode: o?.mode ?? "open"
|
|
13
15
|
}), this.#t = e({
|
|
14
16
|
host: this,
|
|
15
|
-
formAssociated:
|
|
16
|
-
render: () =>
|
|
17
|
+
formAssociated: i,
|
|
18
|
+
render: () => n(this.#e, this.#n),
|
|
17
19
|
attachInternals: () => super.attachInternals()
|
|
18
|
-
}),
|
|
20
|
+
}), i && this.attachInternals(), a) {
|
|
19
21
|
let e = this.#n;
|
|
20
|
-
for (let [t, n] of Object.entries(
|
|
22
|
+
for (let [t, n] of Object.entries(a)) {
|
|
21
23
|
if (t in this) continue;
|
|
22
24
|
let r = n(e[t] = this.#t.createRef(void 0), this);
|
|
23
25
|
Object.defineProperty(this, t, r);
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
|
-
this.
|
|
27
|
-
}
|
|
28
|
-
setAdoptedStyleSheets(...e) {
|
|
29
|
-
this.#e.adoptedStyleSheets = e.map((e) => {
|
|
30
|
-
if (typeof e == "string") {
|
|
31
|
-
let t = new CSSStyleSheet();
|
|
32
|
-
return t.replaceSync(e), t;
|
|
33
|
-
}
|
|
34
|
-
return e;
|
|
35
|
-
});
|
|
28
|
+
this.#e.adoptedStyleSheets = l, c?.(this.#e);
|
|
36
29
|
}
|
|
37
30
|
attachInternals() {
|
|
38
31
|
return this.#t.attachInternals();
|
|
@@ -59,9 +52,9 @@ function t(t, { tagName: n, formAssociated: r = !1, props: i, shadow: a, styles:
|
|
|
59
52
|
this.#t.formStateRestoreCallback(e, t);
|
|
60
53
|
}
|
|
61
54
|
}
|
|
62
|
-
return
|
|
55
|
+
return r && customElements.define(r, u), u;
|
|
63
56
|
}
|
|
64
57
|
//#endregion
|
|
65
|
-
export {
|
|
58
|
+
export { n as defineComponent };
|
|
66
59
|
|
|
67
60
|
//# sourceMappingURL=defineComponent.js.map
|
|
@@ -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';\nimport { createStyleSheet } from './internal/createStyleSheet.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 -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 }: ComponentOptions<TProps> = {},\n): ComponentConstructor<TProps> {\n const styleSheets = styles.map((style) => (typeof style === 'string' ? createStyleSheet(style) : style));\n\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.#shadow.adoptedStyleSheets = styleSheets;\n\n init?.(this.#shadow);\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":";;;AAwEA,SAAgB,EACd,GACA,EAAE,YAAS,oBAAiB,IAAO,UAAO,WAAQ,YAAS,EAAE,EAAE,YAAmC,EAAE,EACtE;CAC9B,IAAM,IAAc,EAAO,KAAK,MAAW,OAAO,KAAU,WAAW,EAAiB,EAAM,GAAG,EAAO;CAExG,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;;;AAMhD,GAFA,MAAA,EAAa,qBAAqB,GAElC,IAAO,MAAA,EAAa;;EAGtB,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,14 @@
|
|
|
1
|
-
import { defineComponent } from './defineComponent.js';
|
|
1
|
+
import { type ComponentShadowRoot, defineComponent } from './defineComponent.js';
|
|
2
2
|
export interface ExtendComponentDefinitionOptions {
|
|
3
|
-
|
|
4
|
-
init
|
|
3
|
+
styles: readonly (string | CSSStyleSheet)[];
|
|
4
|
+
/** Called before the component `init` option is called. */
|
|
5
|
+
preInit?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
6
|
+
/** Called after the component `init` option is called. */
|
|
7
|
+
postInit?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
5
8
|
/** Called before the component render function. */
|
|
6
|
-
preRender?: (shadow:
|
|
9
|
+
preRender?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
7
10
|
/** Called after the component render function. */
|
|
8
|
-
postRender?: (shadow:
|
|
11
|
+
postRender?: (shadow: ComponentShadowRoot<{}>) => void;
|
|
9
12
|
}
|
|
10
13
|
/**
|
|
11
14
|
* Create a new component factory function (ie. `defineComponent`) with
|
|
@@ -13,4 +16,4 @@ export interface ExtendComponentDefinitionOptions {
|
|
|
13
16
|
*
|
|
14
17
|
* NOTE: Does not support `tagName` or `props` option defaults.
|
|
15
18
|
*/
|
|
16
|
-
export declare function extendComponentDefinition({
|
|
19
|
+
export declare function extendComponentDefinition({ styles, preInit, postInit, preRender, postRender, }: ExtendComponentDefinitionOptions): typeof defineComponent;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { defineComponent as e } from "./defineComponent.js";
|
|
2
2
|
//#region src/extendComponentDefinition.ts
|
|
3
|
-
function t({
|
|
4
|
-
return (
|
|
5
|
-
|
|
3
|
+
function t({ styles: t, preInit: n, postInit: r, preRender: i, postRender: a }) {
|
|
4
|
+
return (o, s) => e((e, t) => {
|
|
5
|
+
i?.(e), o(e, t), a?.(e);
|
|
6
6
|
}, {
|
|
7
|
-
...
|
|
7
|
+
...s,
|
|
8
|
+
styles: [...t, ...s?.styles ?? []],
|
|
8
9
|
init: (e) => {
|
|
9
|
-
|
|
10
|
+
n?.(e), s?.init?.(e), r?.(e);
|
|
10
11
|
}
|
|
11
12
|
});
|
|
12
13
|
}
|
|
@@ -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 styles: readonly (string | CSSStyleSheet)[];\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 styles,\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 styles: [...styles, ...(options?.styles ?? [])],\n init: (shadow) => {\n preInit?.(shadow);\n options?.init?.(shadow);\n postInit?.(shadow);\n },\n },\n );\n };\n}\n"],"mappings":";;AAoBA,SAAgB,EAA0B,EACxC,WACA,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,QAAQ,CAAC,GAAG,GAAQ,GAAI,GAAS,UAAU,EAAE,CAAE;EAC/C,OAAO,MAAW;AAGhB,GAFA,IAAU,EAAO,EACjB,GAAS,OAAO,EAAO,EACvB,IAAW,EAAO;;EAErB,CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createStyleSheet.js","names":[],"sources":["../../src/internal/createStyleSheet.ts"],"sourcesContent":["/** Create a `CSSStyleSheet` from a CSS string. */\nexport function createStyleSheet(style: string): CSSStyleSheet {\n const styleSheet = new CSSStyleSheet();\n styleSheet.replaceSync(style);\n return styleSheet;\n}\n"],"mappings":";AACA,SAAgB,EAAiB,GAA8B;CAC7D,IAAM,IAAa,IAAI,eAAe;AAEtC,QADA,EAAW,YAAY,EAAM,EACtB"}
|
package/package.json
CHANGED