@seahax/elemental 0.5.14 → 0.5.16

package/README.md

@@ -51,7 +51,6 @@ export const MyComponent = defineComponent((shadow) => {
 
   // Render content to the shadow DOM.
   h(shadow, [
-    h('style', [/* css */]),
     h('p', { class: 'hello' }, ['Hello, World!']),
     h('div', { class: 'inputs' }, [
       myInput,
@@ -135,6 +134,39 @@ export const MyComponent = defineComponent((shadow) => {
 });
 ```
 
+## Add Styles
+
+```ts
+const MyComponent = defineComponent(
+  (shadow) => {
+    ...
+  },
+  {
+    // Styles to be adopted by the shadow root. String values are parsed
+    // as CSS to create new `CSSStyleSheet` instances.
+    styles: [cssText, cssStyleSheet],
+  }
+)
+```
+
+## Customize The Shadow Root
+
+```ts
+const MyComponent = defineComponent(
+  (shadow) => {
+    ...
+  },
+  {
+    // Use custom shadow root initialization options.
+    // (default: { mode: 'open' }).
+    shadow: {
+      mode: 'closed',
+      ...
+    },
+  }
+);
+```
+
 ## Enable Form Association
 
 ```ts
@@ -176,24 +208,6 @@ const MyComponent = defineComponent(
 );
 ```
 
-## Customize The Shadow Root
-
-```ts
-const MyComponent = defineComponent(
-  (shadow) => {
-    ...
-  },
-  {
-    // Use custom shadow root initialization options.
-    // (default: { mode: 'open' }).
-    shadow: {
-      mode: 'closed',
-      ...
-    },
-  }
-);
-```
-
 ## Add Web Component Properties
 
 ```ts
@@ -251,6 +265,21 @@ const MyComponent = defineComponent((shadow) => {
 });
 ```
 
+## Extend Component Definition
+
+```ts
+import { extendComponentDefinition } from '@seahax/elemental';
+
+// Create a new component definition factory (ie. `defineComponent`
+// function) with hooks (callbacks) that can be used to add shared
+// behavior to all defined components.
+export const defineComponent = extendComponentDefinition({
+  init: (shadow) => {...},
+  preRender: (shadow) => {...},
+  postRender: (shadow) => {...},
+});
+```
+
 ## Render An Element
 
 ```ts

package/dist/defineComponent.d.ts

@@ -2,18 +2,30 @@ import { type Ref } from './hooks/useRef.ts';
 type UnsafeProps = 'connectedCallback' | 'connectedMoveCallback' | 'disconnectedCallback' | 'adoptedCallback' | 'formResetCallback' | 'formStateRestoreCallback' | 'formDisabledCallback';
 type SafePropKeys<TProps> = Exclude<keyof TProps, keyof HTMLElement | UnsafeProps>;
 export interface ComponentConstructor<TProps extends object> {
+    /**
+     * True to mark the component as form-associated.
+     */
     readonly formAssociated: boolean;
     new (): ComponentWithProps<TProps>;
+    /**
+     * Helper that sets the shadow root adopted stylesheets array from strings or
+     * style sheets.
+     */
+    setAdoptedStyleSheets(...styles: (string | CSSStyleSheet)[]): void;
 }
 export interface ComponentOptions<TProps extends object> {
-    /** Shadow root attachment options. */
-    readonly shadow?: Partial<ShadowRootInit>;
-    /** Component custom property descriptors. */
-    readonly props?: ComponentPropDescriptors<TProps>;
-    /** True to mark the component as form-associated. */
-    readonly formAssociated?: boolean;
     /** Register the component as a custom element with this tag name. */
     readonly tagName?: `${string}-${string}`;
+    /** True to mark the component as form-associated. */
+    readonly formAssociated?: boolean;
+    /** Component custom property descriptors. */
+    readonly props?: ComponentPropDescriptors<TProps>;
+    /** Shadow root attachment options. */
+    readonly shadow?: Partial<ShadowRootInit>;
+    /** Styles to be adopted by the shadow root after creation. */
+    readonly styles?: readonly (string | CSSStyleSheet)[];
+    /** Called after the component instance is created, before rendering. */
+    readonly init?: (shadow: ComponentShadowRoot<TProps>) => void;
 }
 export type ComponentPropDescriptors<TProps extends object> = {
     readonly [P in SafePropKeys<TProps>]: ComponentPropDescriptorFactory<TProps[P]>;
@@ -34,5 +46,5 @@ export type ComponentPropRefs<TProps extends object> = {
     readonly [P in SafePropKeys<TProps>]: Ref<TProps[P] | undefined>;
 };
 /** Define a custom `HTMLElement` that is functional and reactive. */
-export declare function defineComponent<TProps extends object = {}>(render: ComponentRender<TProps>, { props, shadow, formAssociated, tagName }?: ComponentOptions<Record<string, unknown>>): ComponentConstructor<TProps>;
+export declare function defineComponent<TProps extends object = {}>(render: ComponentRender<TProps>, { tagName, formAssociated, props, shadow, styles, init: postCreate }?: ComponentOptions<TProps>): ComponentConstructor<TProps>;
 export {};

package/dist/defineComponent.js

@@ -1,29 +1,38 @@
 import { createController as e } from "./internal/createController.js";
 //#region src/defineComponent.ts
-function t(t, { props: n, shadow: r, formAssociated: i = !1, tagName: a } = {}) {
-	class o extends HTMLElement {
-		static formAssociated = i;
+function t(t, { tagName: n, formAssociated: r = !1, props: i, shadow: a, styles: o = [], init: s } = {}) {
+	class c extends HTMLElement {
+		static formAssociated = r;
 		#e;
 		#t;
 		#n = {};
 		constructor() {
 			if (super(), this.#e = this.attachShadow({
-				...r,
-				mode: r?.mode ?? "open"
+				...a,
+				mode: a?.mode ?? "open"
 			}), this.#t = e({
 				host: this,
-				formAssociated: i,
+				formAssociated: r,
 				render: () => t(this.#e, this.#n),
 				attachInternals: () => super.attachInternals()
-			}), n) {
+			}), r && this.attachInternals(), i) {
 				let e = this.#n;
-				for (let [t, r] of Object.entries(n)) {
+				for (let [t, n] of Object.entries(i)) {
 					if (t in this) continue;
-					let n = r(e[t] = this.#t.createRef(void 0), this);
-					Object.defineProperty(this, t, n);
+					let r = n(e[t] = this.#t.createRef(void 0), this);
+					Object.defineProperty(this, t, r);
 				}
 			}
-			i && this.attachInternals();
+			this.setAdoptedStyleSheets(...o), s?.(this.#e);
+		}
+		setAdoptedStyleSheets(...e) {
+			this.#e.adoptedStyleSheets = e.map((e) => {
+				if (typeof e == "string") {
+					let t = new CSSStyleSheet();
+					return t.replaceSync(e), t;
+				}
+				return e;
+			});
 		}
 		attachInternals() {
 			return this.#t.attachInternals();
@@ -50,7 +59,7 @@ function t(t, { props: n, shadow: r, formAssociated: i = !1, tagName: a } = {})
 			this.#t.formStateRestoreCallback(e, t);
 		}
 	}
-	return a && customElements.define(a, o), o;
+	return n && customElements.define(n, c), c;
 }
 //#endregion
 export { t as defineComponent };

package/dist/defineComponent.js.map

@@ -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}-${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"}
+{"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\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\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: 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":";;AA4EA,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"}

package/dist/extendComponentDefinition.d.ts

@@ -0,0 +1,16 @@
+import { defineComponent } from './defineComponent.js';
+export interface ExtendComponentDefinitionOptions {
+    /** Called after the component instance is created, before rendering. */
+    init?: (shadow: ShadowRoot) => void;
+    /** Called before the component render function. */
+    preRender?: (shadow: ShadowRoot) => void;
+    /** Called after the component render function. */
+    postRender?: (shadow: ShadowRoot) => void;
+}
+/**
+ * Create a new component factory function (ie. `defineComponent`) with
+ * modified default options or render hooks.
+ *
+ * NOTE: Does not support `tagName` or `props` option defaults.
+ */
+export declare function extendComponentDefinition({ init, preRender, postRender, }: ExtendComponentDefinitionOptions): typeof defineComponent;

package/dist/extendComponentDefinition.js

@@ -0,0 +1,16 @@
+import { defineComponent as e } from "./defineComponent.js";
+//#region src/extendComponentDefinition.ts
+function t({ init: t, preRender: n, postRender: r }) {
+	return (i, a) => e((e, t) => {
+		n?.(e), i(e, t), r?.(e);
+	}, {
+		...a,
+		init: (e) => {
+			t?.(e), a?.init?.(e);
+		}
+	});
+}
+//#endregion
+export { t as extendComponentDefinition };
+
+//# sourceMappingURL=extendComponentDefinition.js.map

package/dist/extendComponentDefinition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extendComponentDefinition.js","names":[],"sources":["../src/extendComponentDefinition.ts"],"sourcesContent":["import { defineComponent } from './defineComponent.js';\n\nexport interface ExtendComponentDefinitionOptions {\n  /** Called after the component instance is created, before rendering. */\n  init?: (shadow: ShadowRoot) => void;\n  /** Called before the component render function. */\n  preRender?: (shadow: ShadowRoot) => void;\n  /** Called after the component render function. */\n  postRender?: (shadow: ShadowRoot) => 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  init,\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          init?.(shadow);\n          options?.init?.(shadow);\n        },\n      },\n    );\n  };\n}\n"],"mappings":";;AAiBA,SAAgB,EAA0B,EACxC,SACA,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;AAEhB,GADA,IAAO,EAAO,EACd,GAAS,OAAO,EAAO;;EAE1B,CACF"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './classes.ts';
 export * from './createStore.ts';
 export * from './defineComponent.ts';
+export * from './extendComponentDefinition.ts';
 export * from './hooks/useAsync.ts';
 export * from './hooks/useAttributes.ts';
 export * from './hooks/useChildEffect.ts';

package/dist/index.js

@@ -2,17 +2,18 @@ import { classes as e } from "./classes.js";
 import { createStore as t } from "./createStore.js";
 import { useRef as n } from "./hooks/useRef.js";
 import { defineComponent as r } from "./defineComponent.js";
-import { useDisconnectCallback as i } from "./hooks/useDisconnect.js";
-import { useEffect as a } from "./hooks/useEffect.js";
-import { useAsync as o } from "./hooks/useAsync.js";
-import { useHost as s } from "./hooks/useHost.js";
-import { useAttributes as c } from "./hooks/useAttributes.js";
-import { useChildEffect as l } from "./hooks/useChildEffect.js";
-import { useDocument as u } from "./hooks/useDocument.js";
-import { useElementInternals as d } from "./hooks/useElementInternals.js";
-import { useForm as f, useFormDisabled as p, useFormResetCallback as m, useFormRestoreCallback as h } from "./hooks/useForm.js";
-import { useParent as g } from "./hooks/useParent.js";
-import { useStore as _ } from "./hooks/useStore.js";
-import { useRoute as v } from "./hooks/useRoute.js";
-import { html as y } from "./html.js";
-export { e as classes, t as createStore, r as defineComponent, y as h, y as html, o as useAsync, c as useAttributes, l as useChildEffect, i as useDisconnectCallback, u as useDocument, a as useEffect, d as useElementInternals, f as useForm, p as useFormDisabled, m as useFormResetCallback, h as useFormRestoreCallback, s as useHost, g as useParent, n as useRef, v as useRoute, _ as useStore };
+import { extendComponentDefinition as i } from "./extendComponentDefinition.js";
+import { useDisconnectCallback as a } from "./hooks/useDisconnect.js";
+import { useEffect as o } from "./hooks/useEffect.js";
+import { useAsync as s } from "./hooks/useAsync.js";
+import { useHost as c } from "./hooks/useHost.js";
+import { useAttributes as l } from "./hooks/useAttributes.js";
+import { useChildEffect as u } from "./hooks/useChildEffect.js";
+import { useDocument as d } from "./hooks/useDocument.js";
+import { useElementInternals as f } from "./hooks/useElementInternals.js";
+import { useForm as p, useFormDisabled as m, useFormResetCallback as h, useFormRestoreCallback as g } from "./hooks/useForm.js";
+import { useParent as _ } from "./hooks/useParent.js";
+import { useStore as v } from "./hooks/useStore.js";
+import { useRoute as y } from "./hooks/useRoute.js";
+import { html as b } from "./html.js";
+export { e as classes, t as createStore, r as defineComponent, i as extendComponentDefinition, b as h, b as html, s as useAsync, l as useAttributes, u as useChildEffect, a as useDisconnectCallback, d as useDocument, o as useEffect, f as useElementInternals, p as useForm, m as useFormDisabled, h as useFormResetCallback, g as useFormRestoreCallback, c as useHost, _ as useParent, n as useRef, y as useRoute, v as useStore };

package/package.json

@@ -21,5 +21,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.14"
+  "version": "0.5.16"
 }