@seahax/elemental 0.5.11 → 0.5.13
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 +11 -0
- package/dist/defineComponent.d.ts +2 -0
- package/dist/defineComponent.js +4 -3
- package/dist/defineComponent.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -240,6 +240,17 @@ const element = new MyComponent();
|
|
|
240
240
|
element.checked = true;
|
|
241
241
|
```
|
|
242
242
|
|
|
243
|
+
## Register The Custom Element On Definition
|
|
244
|
+
|
|
245
|
+
```ts
|
|
246
|
+
const MyComponent = defineComponent((shadow) => {
|
|
247
|
+
...
|
|
248
|
+
}, {
|
|
249
|
+
// Register the component as a custom element with this tag name.
|
|
250
|
+
tagName: 'my-component',
|
|
251
|
+
});
|
|
252
|
+
```
|
|
253
|
+
|
|
243
254
|
## Render An Element
|
|
244
255
|
|
|
245
256
|
```ts
|
|
@@ -12,6 +12,8 @@ export interface ComponentOptions<TProps extends object> {
|
|
|
12
12
|
readonly props?: ComponentPropDescriptors<TProps>;
|
|
13
13
|
/** True to mark the component as form-associated. */
|
|
14
14
|
readonly formAssociated?: boolean;
|
|
15
|
+
/** Register the component as a custom element with this tag name. */
|
|
16
|
+
readonly tagName?: `${string}-${string}`;
|
|
15
17
|
}
|
|
16
18
|
export type ComponentPropDescriptors<TProps extends object> = {
|
|
17
19
|
readonly [P in SafePropKeys<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;
|
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}\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 ComponentWithProps<TProps extends object> = HTMLElement & {\n -readonly [P in SafePropKeys<TProps>]: TProps[P];\n};\n\nexport type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {\n readonly host: ComponentWithProps<TProps>;\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: (shadowRoot: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n render: (\n shadowRoot: ComponentShadowRoot<Record<string, unknown>>,\n props: ComponentPropRefs<Record<string, unknown>>,\n ) => void,\n { props, shadow, formAssociated = false }: ComponentOptions<Record<string, unknown>> = {},\n): ComponentConstructor<{}> {\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\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 ComponentWithProps<TProps extends object> = HTMLElement & {\n -readonly [P in SafePropKeys<TProps>]: TProps[P];\n};\n\nexport type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'> & {\n readonly host: ComponentWithProps<TProps>;\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: (shadowRoot: ComponentShadowRoot<TProps>, props: ComponentPropRefs<TProps>) => void,\n options?: ComponentOptions<TProps>,\n): ComponentConstructor<TProps>;\nexport function defineComponent(\n render: (\n shadowRoot: ComponentShadowRoot<Record<string, unknown>>,\n props: ComponentPropRefs<Record<string, unknown>>,\n ) => void,\n { props, shadow, formAssociated = false, tagName }: ComponentOptions<Record<string, unknown>> = {},\n): ComponentConstructor<{}> {\n class ComponentElement extends HTMLElement {\n static readonly formAssociated = formAssociated;\n\n readonly #shadow: ComponentShadowRoot<Record<string, unknown>>;\n readonly #controller: Controller;\n readonly #props: ComponentPropRefs<Record<string, unknown>> = {};\n\n constructor() {\n super();\n\n this.#shadow = this.attachShadow({\n ...shadow,\n mode: shadow?.mode ?? 'open',\n }) as ComponentShadowRoot<Record<string, unknown>>;\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;\n}\n"],"mappings":";;AA6DA,SAAgB,EACd,GAIA,EAAE,UAAO,WAAQ,oBAAiB,IAAO,eAAuD,EAAE,EACxE;CAC1B,MAAM,UAAyB,YAAY;EACzC,OAAgB,iBAAiB;EAEjC;EACA;EACA,KAA8D,EAAE;EAEhE,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
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
17
17
|
"scripts": {
|
|
18
|
-
"build": "vite build && tsc -b -f tsconfig.
|
|
18
|
+
"build": "vite build && tsc -b -f tsconfig.build.json",
|
|
19
19
|
"test": "eslint src && vitest run"
|
|
20
20
|
},
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
23
23
|
},
|
|
24
|
-
"version": "0.5.
|
|
24
|
+
"version": "0.5.13"
|
|
25
25
|
}
|