@seahax/elemental 0.5.17 → 0.5.19

package/README.md

@@ -271,9 +271,10 @@ const MyComponent = defineComponent((shadow) => {
 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.
+// function) with common styles and hooks (callbacks) that can be used to
+// add shared behavior to all defined components.
 export const defineComponent = extendComponentDefinition({
+  styles: [...],
   preInit: (shadow) => {...},
   postInit: (shadow) => {...},
   preRender: (shadow) => {...},

package/dist/defineComponent.d.ts

@@ -35,17 +35,11 @@ export type ComponentShadowRoot<TProps extends object> = Omit<ShadowRoot, 'host'
     readonly host: ComponentWithProps<TProps>;
 };
 export type ComponentWithProps<TProps extends object> = HTMLElement & {
-    /**
-     * Helper that sets the shadow root adopted stylesheets array from strings or
-     * style sheets.
-     */
-    setAdoptedStyleSheets(...styles: (string | CSSStyleSheet)[]): void;
-} & {
     -readonly [P in SafePropKeys<TProps>]: TProps[P];
 };
 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>, { tagName, formAssociated, props, shadow, styles, init: postCreate }?: ComponentOptions<TProps>): ComponentConstructor<TProps>;
+export declare function defineComponent<TProps extends object = {}>(render: ComponentRender<TProps>, { tagName, formAssociated, props, shadow, styles, init }?: ComponentOptions<TProps>): ComponentConstructor<TProps>;
 export {};

package/dist/defineComponent.js

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

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  | '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"}
+{"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"}

package/dist/extendComponentDefinition.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentShadowRoot, defineComponent } from './defineComponent.js';
 export interface ExtendComponentDefinitionOptions {
+    styles: readonly (string | CSSStyleSheet)[];
     /** Called before the component `init` option is called. */
     preInit?: (shadow: ComponentShadowRoot<{}>) => void;
     /** Called after the component `init` option is called. */
@@ -15,4 +16,4 @@ export interface ExtendComponentDefinitionOptions {
  *
  * NOTE: Does not support `tagName` or `props` option defaults.
  */
-export declare function extendComponentDefinition({ preInit, postInit, preRender, postRender, }: ExtendComponentDefinitionOptions): typeof defineComponent;
+export declare function extendComponentDefinition({ styles, preInit, postInit, preRender, postRender, }: ExtendComponentDefinitionOptions): typeof defineComponent;

package/dist/extendComponentDefinition.js

@@ -1,16 +1,19 @@
-import { defineComponent as e } from "./defineComponent.js";
+import { createStyleSheet as e } from "./internal/createStyleSheet.js";
+import { defineComponent as t } from "./defineComponent.js";
 //#region src/extendComponentDefinition.ts
-function t({ preInit: t, postInit: n, preRender: r, postRender: i }) {
-	return (a, o) => e((e, t) => {
-		r?.(e), a(e, t), i?.(e);
+function n({ styles: n, preInit: r, postInit: i, preRender: a, postRender: o }) {
+	let s = n.map((t) => typeof t == "string" ? e(t) : t);
+	return (e, n) => t((t, n) => {
+		a?.(t), e(t, n), o?.(t);
 	}, {
-		...o,
+		...n,
+		styles: [...s, ...n?.styles ?? []],
 		init: (e) => {
-			t?.(e), o?.init?.(e), n?.(e);
+			r?.(e), n?.init?.(e), i?.(e);
 		}
 	});
 }
 //#endregion
-export { t as extendComponentDefinition };
+export { n as extendComponentDefinition };
 
 //# sourceMappingURL=extendComponentDefinition.js.map

package/dist/extendComponentDefinition.js.map

@@ -1 +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"}
+{"version":3,"file":"extendComponentDefinition.js","names":[],"sources":["../src/extendComponentDefinition.ts"],"sourcesContent":["import { type ComponentShadowRoot, defineComponent } from './defineComponent.js';\nimport { createStyleSheet } from './internal/createStyleSheet.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  const styleSheets = styles.map((style) => (typeof style === 'string' ? createStyleSheet(style) : style));\n\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: [...styleSheets, ...(options?.styles ?? [])],\n        init: (shadow) => {\n          preInit?.(shadow);\n          options?.init?.(shadow);\n          postInit?.(shadow);\n        },\n      },\n    );\n  };\n}\n"],"mappings":";;;AAqBA,SAAgB,EAA0B,EACxC,WACA,YACA,aACA,cACA,iBAC2D;CAC3D,IAAM,IAAc,EAAO,KAAK,MAAW,OAAO,KAAU,WAAW,EAAiB,EAAM,GAAG,EAAO;AAExG,SAAQ,GAAQ,MACP,GACJ,GAAQ,MAAa;AAGpB,EAFA,IAAY,EAAO,EACnB,EAAO,GAAQ,EAAS,EACxB,IAAa,EAAO;IAEtB;EACE,GAAG;EACH,QAAQ,CAAC,GAAG,GAAa,GAAI,GAAS,UAAU,EAAE,CAAE;EACpD,OAAO,MAAW;AAGhB,GAFA,IAAU,EAAO,EACjB,GAAS,OAAO,EAAO,EACvB,IAAW,EAAO;;EAErB,CACF"}

package/dist/internal/createStyleSheet.d.ts

@@ -0,0 +1,2 @@
+/** Create a `CSSStyleSheet` from a CSS string. */
+export declare function createStyleSheet(style: string): CSSStyleSheet;

package/dist/internal/createStyleSheet.js

@@ -0,0 +1,9 @@
+//#region src/internal/createStyleSheet.ts
+function e(e) {
+	let t = new CSSStyleSheet();
+	return t.replaceSync(e), t;
+}
+//#endregion
+export { e as createStyleSheet };
+
+//# sourceMappingURL=createStyleSheet.js.map

package/dist/internal/createStyleSheet.js.map

@@ -0,0 +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

@@ -21,5 +21,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.17"
+  "version": "0.5.19"
 }