diff --git a/src/index.ts b/src/index.ts
index 29d1e21..3b08398 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,11 @@
 import { effect, Signal, signal } from "@preact/signals-core";
 import { reconcile } from "./reconciler/index";
 import { ShadowCache } from "./reconciler/utils";
-import type { CustomEvents, ForbiddenHTMLProperties, ReadonlyKeys, ShadowElement } from "./types";
-import { parentsCacheSymbol, PlusnewErrorEvent, active } from "./utils";
+import type { CustomEvents, PropertyDescriptor, ShadowElement } from "./types";
+import { parentsCacheSymbol, active } from "./utils";
 
-export type { ShadowElement } from "./types";
-export { active, WebComponent } from "./utils";
+export type { ShadowElement, PropertyDescriptor } from "./types";
+export { active, WebComponent, type BasePropsType, type PropType } from "./utils";
 
 export function mount(render: () => ShadowElement, parent: HTMLElement): () => void {
   const shadowResult: ShadowCache = new ShadowCache(false);
@@ -30,28 +30,18 @@ export function mount(render: () => ShadowElement, parent: HTMLElement): () => v
   };
 }
 
-export function createComponent<T extends HTMLElement>(
+export function define(name: string): ClassDecorator {
+  return (Component) => {
+    customElements.define(name, Component as any);
+
+    return Component;
+  };
+}
+
+export function createComponent<T extends new (...args: any[]) => HTMLElement>(
   name: string,
-  Component: { new (): T },
-): {
-  new (
-    properties: Omit<
-      { [K in keyof T]?: T[K] } & {
-        [
-          K in keyof T as undefined extends T[K] ? never : K extends keyof HTMLElement ? never : K
-        ]-?: T[K];
-      },
-      | ReadonlyKeys<T>
-      | ForbiddenHTMLProperties
-      | "render"
-      | "connectedCallback"
-      | "disconnectedCallback"
-    > & {
-      children?: ShadowElement;
-      onplusnewerror?: (evt: PlusnewErrorEvent) => void;
-    },
-  ): T;
-} {
+  Component: T,
+): T {
   customElements.define(name, Component as any);
 
   return name as any;
@@ -141,24 +131,16 @@ export function dispatchEvent<T extends HTMLElement, U extends keyof CustomEvent
   return eventPromises;
 }
 
-export function prop() {
-  return <T, U>(
-    decoratorTarget: ClassAccessorDecoratorTarget<T, U>,
-    accessor: ClassAccessorDecoratorContext<T, U>,
-  ): ClassAccessorDecoratorResult<T, U> => {
+export function prop<T>(): () => PropertyDescriptor<T> {
+  return () => {
+    const signalValue = signal<T>() as Signal<T>;
+
     return {
-      set: function (value) {
-        if (accessor.access.has(this)) {
-          (decoratorTarget.get.call(this) as Signal<U>).value = value;
-        } else {
-          decoratorTarget.set.call(this, signal(value) as U);
-        }
-      },
-      get: function () {
-        return (decoratorTarget.get.call(this) as Signal<U>).value;
+      get: () => {
+        return signalValue.value;
       },
-      init(value) {
-        return signal(value) as U;
+      set: (value) => {
+        signalValue.value = value;
       },
     };
   };
diff --git a/src/types.ts b/src/types.ts
index 021f9be..be65706 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,12 +6,24 @@ export function Fragment(props: { children: ShadowElement }) {
   return props.children;
 }
 
+export interface PropertyDescriptor<T> {
+  configurable?: boolean;
+  enumerable?: boolean;
+  value?: T;
+  writable?: boolean;
+  get?(): T;
+  set?(v: T): void;
+}
+
+export type PropertyDescriptorType<T extends PropertyDescriptor<any>> =
+  T extends PropertyDescriptor<infer R> ? R : never;
+
 // type Expect<T extends true> = T;
 
 type IsEqual<CheckA, CheckB, Then, Else> =
   (<T>() => T extends CheckA ? 1 : 2) extends <T>() => T extends CheckB ? 1 : 2 ? Then : Else;
 
-export type ReadonlyKeys<T> = {
+type ReadonlyKeys<T> = {
   [P in keyof T]-?: IsEqual<{ [Q in P]: T[P] }, { -readonly [Q in P]: T[P] }, never, P>;
 }[keyof T];
 
diff --git a/src/utils.ts b/src/utils.ts
index 7a08956..96e12b4 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,6 +1,11 @@
 import { batch, effect, untracked } from "@preact/signals-core";
 import { ShadowCache } from "./reconciler/utils";
-import type { ShadowElement } from "./types";
+import type {
+  ForbiddenHTMLProperties,
+  PropertyDescriptor,
+  PropertyDescriptorType,
+  ShadowElement,
+} from "./types";
 import { reconcile } from "./reconciler";
 
 const ERROR = "plusnewerror";
@@ -35,100 +40,140 @@ const shadowCache = Symbol("shadowCache");
 const eventListenerSymbol = Symbol("eventListner");
 export const parentsCacheSymbol = Symbol("parentsCache");
 
-export abstract class WebComponent extends HTMLElement {
-  abstract render(): ShadowElement;
+export type BasePropsType = Omit<Partial<HTMLElement>, ForbiddenHTMLProperties | "children"> & {
+  children?: ShadowElement;
+};
+
+export type PropType<T extends { [key: string]: () => PropertyDescriptor<any> }> = {
+  [
+    Prop in keyof T as undefined extends PropertyDescriptorType<ReturnType<T[Prop]>> ? Prop : never
+  ]?: Exclude<PropertyDescriptorType<ReturnType<T[Prop]>>, undefined>;
+} & {
+  [
+    Prop in keyof T as undefined extends PropertyDescriptorType<ReturnType<T[Prop]>> ? never : Prop
+  ]: PropertyDescriptorType<ReturnType<T[Prop]>>;
+};
 
-  connectedCallback(this: WebComponent, opt?: { shadowRootInit?: Partial<ShadowRootInit> }) {
-    let shadowRoot: null | ShadowRoot = null;
-    if (this.shadowRoot === null) {
-      shadowRoot = this.attachShadow({ mode: "open", ...opt?.shadowRootInit });
+interface IComponent extends HTMLElement {
+  connectedCallback(opt?: { shadowRootInit: Partial<ShadowRootInit> }): ShadowRoot;
+  disconnectedCallback(): void;
+}
 
-      (this as any)[parentsCacheSymbol] = new Map();
-      (this as any)[shadowCache] = new ShadowCache(false);
-    } else {
-      shadowRoot = this.shadowRoot;
+export function WebComponent<T extends { [key: string]: () => PropertyDescriptor<any> } = {}>(
+  props?: T,
+): abstract new (props: PropType<T> & BasePropsType) => PropType<T> & IComponent {
+  abstract class Component extends HTMLElement implements IComponent {
+    constructor(_props: PropType<T> & BasePropsType) {
+      super();
+      if (props !== undefined) {
+        Object.defineProperties(
+          this,
+          Object.fromEntries(
+            Object.entries(props).map(([key, propertyDescriptorFactory]) => [
+              key,
+              propertyDescriptorFactory(),
+            ]),
+          ),
+        );
+      }
     }
 
-    (this as any)[disconnect] = effect(() => {
-      batch(() => {
-        const previousActiveElement = active.parentElement;
-        let result: ShadowElement;
-        try {
-          active.parentElement = this;
-          result = this.render();
-          active.parentElement = previousActiveElement;
-        } catch (error) {
-          active.parentElement = previousActiveElement;
-          untracked(() => dispatchError(this, error));
-
-          return;
-        }
+    abstract render(): ShadowElement;
 
-        reconcile({
-          parentElement: this.shadowRoot as ShadowRoot,
-          previousSibling: null,
-          shadowCache: (this as any)[shadowCache],
-          shadowElement: result,
+    connectedCallback(opt?: { shadowRootInit?: Partial<ShadowRootInit> }) {
+      let shadowRoot: null | ShadowRoot = null;
+      if (this.shadowRoot === null) {
+        shadowRoot = this.attachShadow({ mode: "open", ...opt?.shadowRootInit });
+
+        (this as any)[parentsCacheSymbol] = new Map();
+        (this as any)[shadowCache] = new ShadowCache(false);
+      } else {
+        shadowRoot = this.shadowRoot;
+      }
+
+      (this as any)[disconnect] = effect(() => {
+        batch(() => {
+          const previousActiveElement = active.parentElement;
+          let result: ShadowElement;
+          try {
+            active.parentElement = this;
+            result = this.render();
+            active.parentElement = previousActiveElement;
+          } catch (error) {
+            active.parentElement = previousActiveElement;
+            untracked(() => dispatchError(this, error));
+
+            return;
+          }
+
+          reconcile({
+            parentElement: this.shadowRoot as ShadowRoot,
+            previousSibling: null,
+            shadowCache: (this as any)[shadowCache],
+            shadowElement: result,
+          });
         });
       });
-    });
-
-    return shadowRoot;
-  }
 
-  disconnectedCallback(this: WebComponent) {
-    if (disconnect in this) {
-      (this as any)[disconnect]();
+      return shadowRoot;
     }
-    if (parentsCacheSymbol in this) {
-      (this as any)[parentsCacheSymbol].clear();
-    }
-    if (shadowCache in this) {
-      (this as any)[shadowCache].unmount();
-    }
-  }
 
-  addEventListener(
-    eventName: string,
-    listener: (event: Event) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ) {
-    if (eventListenerSymbol in this === false) {
-      (this as any)[eventListenerSymbol] = {};
-    }
-    if (eventName in (this as any)[eventListenerSymbol] === false) {
-      (this as any)[eventListenerSymbol][eventName] = new WeakMap();
+    disconnectedCallback() {
+      if (disconnect in this) {
+        (this as any)[disconnect]();
+      }
+      if (parentsCacheSymbol in this) {
+        (this as any)[parentsCacheSymbol].clear();
+      }
+      if (shadowCache in this) {
+        (this as any)[shadowCache].unmount();
+      }
     }
 
-    const listenerOverwrite = (evt: Event) => {
-      if (typeof options === "object" && options !== null && options?.once === true) {
-        (this as any)[eventListenerSymbol]?.[eventName]?.delete(listener);
+    addEventListener(
+      eventName: string,
+      listener: (event: Event) => unknown,
+      options?: boolean | AddEventListenerOptions,
+    ) {
+      if (eventListenerSymbol in this === false) {
+        (this as any)[eventListenerSymbol] = {};
+      }
+      if (eventName in (this as any)[eventListenerSymbol] === false) {
+        (this as any)[eventListenerSymbol][eventName] = new WeakMap();
       }
 
-      const result = listener(evt);
+      const listenerOverwrite = (evt: Event) => {
+        if (typeof options === "object" && options !== null && options?.once === true) {
+          (this as any)[eventListenerSymbol]?.[eventName]?.delete(listener);
+        }
 
-      if (result instanceof Promise && active.eventPromises !== null) {
-        active.eventPromises.push(result);
-      }
-    };
+        const result = listener(evt);
 
-    (this as any)[eventListenerSymbol][eventName].set(listener, listenerOverwrite);
+        if (result instanceof Promise && active.eventPromises !== null) {
+          active.eventPromises.push(result);
+        }
+      };
 
-    super.addEventListener(eventName, listenerOverwrite, options);
-  }
+      (this as any)[eventListenerSymbol][eventName].set(listener, listenerOverwrite);
 
-  removeEventListener(this: HTMLElement, eventName: string, listener: (event: Event) => void) {
-    if (
-      eventListenerSymbol in this === true &&
-      eventName in (this as any)[eventListenerSymbol] === true
-    ) {
-      const listenerOverwrite = (this as any)[eventListenerSymbol][eventName].get(listener);
+      super.addEventListener(eventName, listenerOverwrite, options);
+    }
 
-      if (listenerOverwrite !== undefined) {
-        (this as any)[eventListenerSymbol][eventName].delete(listener);
+    removeEventListener(this: HTMLElement, eventName: string, listener: (event: Event) => void) {
+      if (
+        eventListenerSymbol in this === true &&
+        eventName in (this as any)[eventListenerSymbol] === true
+      ) {
+        const listenerOverwrite = (this as any)[eventListenerSymbol][eventName].get(listener);
 
-        super.removeEventListener(eventName, listenerOverwrite);
+        if (listenerOverwrite !== undefined) {
+          (this as any)[eventListenerSymbol][eventName].delete(listener);
+
+          super.removeEventListener(eventName, listenerOverwrite);
+        }
       }
     }
   }
+
+  return Component as any;
 }
diff --git a/test/async.test.tsx b/test/async.test.tsx
index 5cd908a..a92620b 100644
--- a/test/async.test.tsx
+++ b/test/async.test.tsx
@@ -1,5 +1,12 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, dispatchEvent, WebComponent } from "@plusnew/webcomponent";
+import {
+  createComponent,
+  mount,
+  dispatchEvent,
+  WebComponent,
+  prop,
+  define,
+} from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -17,28 +24,24 @@ describe("webcomponent", () => {
   it("async event dispatch", async () => {
     const { promise, resolve } = Promise.withResolvers<void>();
 
-    const Component = createComponent(
-      "test-async-dispatch",
-      class Component extends WebComponent {
-        onfoo: (evt: CustomEvent<null>) => void;
-
-        #loading = signal(false);
-        render(this: Component) {
-          return (
-            <span
-              className={this.#loading.value === true ? "loading" : ""}
-              onclick={async () => {
-                this.#loading.value = true;
-                try {
-                  await Promise.all(dispatchEvent(this, "foo", { detail: null }));
-                } catch (_err) {}
-                this.#loading.value = false;
-              }}
-            />
-          );
-        }
-      },
-    );
+    @define("test-async-dispatch")
+    class Component extends WebComponent({ onfoo: prop<(evt: CustomEvent<null>) => void>() }) {
+      #loading = signal(false);
+      render(this: Component) {
+        return (
+          <span
+            className={this.#loading.value === true ? "loading" : ""}
+            onclick={async () => {
+              this.#loading.value = true;
+              try {
+                await Promise.all(dispatchEvent(this, "foo", { detail: null }));
+              } catch (_err) {}
+              this.#loading.value = false;
+            }}
+          />
+        );
+      }
+    }
 
     mount(() => <Component onfoo={() => promise} />, container);
 
diff --git a/test/base.test.tsx b/test/base.test.tsx
index 0b0ef4b..b428bf3 100644
--- a/test/base.test.tsx
+++ b/test/base.test.tsx
@@ -1,6 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, prop, WebComponent } from "@plusnew/webcomponent";
-import type { Signal } from "@preact/signals-core";
+import { define, mount, prop, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -16,18 +15,14 @@ describe("webcomponent", () => {
   });
 
   it("creates basic component and updating its props", () => {
-    const Component = createComponent(
-      "test-base",
-      class Component extends WebComponent {
-        @prop() accessor foo: string;
+    @define("test-base")
+    class Component extends WebComponent({ foo: prop<string>(), bar: prop<string | undefined>() }) {
+      #baz = signal("baz");
 
-        #baz = signal("baz");
-
-        render() {
-          return `${this.foo}-${this.#baz.value}`;
-        }
-      },
-    );
+      render() {
+        return `${this.foo}-${this.#baz.value}`;
+      }
+    }
 
     // @ts-expect-error component with no props given, should be an error
     <Component />;
@@ -42,7 +37,7 @@ describe("webcomponent", () => {
 
     expect(container.childNodes.length).to.equal(1);
 
-    const component = container.childNodes[0] as HTMLElement;
+    const component = container.childNodes[0] as InstanceType<typeof Component>;
     expect(component.tagName).to.equal("TEST-BASE");
     expect(component.className).to.equal("some-class");
     expect(component.childNodes.length).to.equal(0);
@@ -54,16 +49,14 @@ describe("webcomponent", () => {
   });
 
   it("crates array based on given number", () => {
-    const Component = createComponent(
-      "test-array",
-      class Component extends WebComponent {
-        @prop() accessor amount: number;
-
-        render() {
-          return [...Array(this.amount).keys()].map((value) => <div>{value.toString()}</div>);
-        }
-      },
-    );
+    @define("test-array")
+    class Component extends WebComponent({
+      amount: prop<number>(),
+    }) {
+      render() {
+        return [...Array(this.amount).keys()].map((value) => <div>{value.toString()}</div>);
+      }
+    }
 
     mount(() => <Component amount={0} />, container);
 
@@ -92,16 +85,12 @@ describe("webcomponent", () => {
   });
 
   it("crates element if needed", () => {
-    const Component = createComponent(
-      "test-placeholder",
-      class Component extends WebComponent {
-        @prop() accessor show: boolean;
-
-        render() {
-          return this.show === true && <div />;
-        }
-      },
-    );
+    @define("test-placeholder")
+    class Component extends WebComponent({ show: prop<boolean>() }) {
+      render() {
+        return this.show === true && <div />;
+      }
+    }
 
     mount(() => <Component show={false} />, container);
 
@@ -133,25 +122,21 @@ describe("webcomponent", () => {
     let containerRenderCount = 0;
     let nestedRenderCount = 0;
 
-    const Component = createComponent(
-      "test-container",
-      class Component extends WebComponent {
-        render() {
-          containerRenderCount++;
-          return <NestedComponent />;
-        }
-      },
-    );
-
-    const NestedComponent = createComponent(
-      "test-nest",
-      class Component extends WebComponent {
-        render() {
-          nestedRenderCount++;
-          return `${foo.value}`;
-        }
-      },
-    );
+    @define("test-container")
+    class Component extends WebComponent() {
+      render() {
+        containerRenderCount++;
+        return <NestedComponent />;
+      }
+    }
+
+    @define("test-nest")
+    class NestedComponent extends WebComponent() {
+      render() {
+        nestedRenderCount++;
+        return `${foo.value}`;
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -178,41 +163,31 @@ describe("webcomponent", () => {
     let containerRenderCounter = 0;
     let nestedRenderCounter = 0;
 
-    const NestedComponent = createComponent(
-      "test-counter-constructor",
-      class Component extends WebComponent {
-        #counter: Signal<number>;
-        constructor() {
-          super();
-
-          this.#counter = signal(0);
-          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-          this.#counter.value;
-        }
-        render() {
-          nestedRenderCounter += 1;
-          return (
-            <button
-              onclick={() => {
-                this.#counter.value = this.#counter.value + 1;
-              }}
-            >
-              {this.#counter.value.toString()}
-            </button>
-          );
-        }
-      },
-    );
-
-    const Component = createComponent(
-      "test-container-rerender",
-      class Component extends WebComponent {
-        render() {
-          containerRenderCounter += 1;
-          return <NestedComponent />;
-        }
-      },
-    );
+    @define("test-counter-constructor")
+    class NestedComponent extends WebComponent() {
+      #counter = signal(0);
+
+      render() {
+        nestedRenderCounter += 1;
+        return (
+          <button
+            onclick={() => {
+              this.#counter.value = this.#counter.value + 1;
+            }}
+          >
+            {this.#counter.value.toString()}
+          </button>
+        );
+      }
+    }
+
+    @define("test-container-rerender")
+    class Component extends WebComponent() {
+      render() {
+        containerRenderCounter += 1;
+        return <NestedComponent />;
+      }
+    }
 
     mount(() => <Component />, container);
 
diff --git a/test/context.test.tsx b/test/context.test.tsx
index a369646..98a82aa 100644
--- a/test/context.test.tsx
+++ b/test/context.test.tsx
@@ -1,10 +1,10 @@
 import { expect } from "@esm-bundle/chai";
-import { mount, createComponent, findParent, WebComponent } from "@plusnew/webcomponent";
+import { mount, createComponent, findParent, WebComponent, define } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 const Provider = createComponent(
   "test-provider",
-  class Component extends WebComponent {
+  class Component extends WebComponent() {
     readonly foo = signal("bar");
 
     render() {
@@ -15,7 +15,7 @@ const Provider = createComponent(
 
 const Consumer = createComponent(
   "test-consumer",
-  class Component extends WebComponent {
+  class Component extends WebComponent() {
     render() {
       try {
         return findParent(Provider).foo.value;
@@ -69,14 +69,12 @@ describe("webcomponent", () => {
   });
 
   it("finds context inline", () => {
-    const Component = createComponent(
-      "test-inline",
-      class Component extends WebComponent {
-        render() {
-          return <Provider>{findParent(Provider).foo.value}</Provider>;
-        }
-      },
-    );
+    @define("test-inline")
+    class Component extends WebComponent() {
+      render() {
+        return <Provider>{findParent(Provider).foo.value}</Provider>;
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -95,22 +93,20 @@ describe("webcomponent", () => {
   });
 
   it("finds context in event", () => {
-    const Component = createComponent(
-      "test-event",
-      class Component extends WebComponent {
-        render() {
-          return (
-            <Provider>
-              <span
-                onclick={() => {
-                  expect(findParent(Provider).foo.value).to.equal("bar");
-                }}
-              />
-            </Provider>
-          );
-        }
-      },
-    );
+    @define("test-event")
+    class Component extends WebComponent() {
+      render() {
+        return (
+          <Provider>
+            <span
+              onclick={() => {
+                expect(findParent(Provider).foo.value).to.equal("bar");
+              }}
+            />
+          </Provider>
+        );
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -136,7 +132,7 @@ describe("webcomponent", () => {
   it("no context", () => {
     const Injection = createComponent(
       "test-injection",
-      class Component extends WebComponent {
+      class Component extends WebComponent() {
         render() {
           return (
             <Provider>
diff --git a/test/error.test.tsx b/test/error.test.tsx
index 998e34d..cca021e 100644
--- a/test/error.test.tsx
+++ b/test/error.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, WebComponent } from "@plusnew/webcomponent";
+import { define, mount, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 function error(): never {
@@ -19,26 +19,24 @@ describe("webcomponent", () => {
   });
 
   it("creates broken component and should display error", () => {
-    const Component = createComponent(
-      "test-broken",
-      class Component extends WebComponent {
-        #hasError = signal(false);
-        render() {
-          return this.#hasError.value ? (
-            "error"
-          ) : (
-            <div
-              onplusnewerror={(evt) => {
-                this.#hasError.value = true;
-                evt.preventDefault();
-              }}
-            >
-              {error()}
-            </div>
-          );
-        }
-      },
-    );
+    @define("test-broken")
+    class Component extends WebComponent() {
+      #hasError = signal(false);
+      render() {
+        return this.#hasError.value ? (
+          "error"
+        ) : (
+          <div
+            onplusnewerror={(evt) => {
+              this.#hasError.value = true;
+              evt.preventDefault();
+            }}
+          >
+            {error()}
+          </div>
+        );
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -55,7 +53,7 @@ describe("webcomponent", () => {
 
   //   const Component = webcomponent(
   //     "test-later-broken",
-  //     class Component extends WebComponent {
+  //     class Component extends WebComponent(){
   //       render() {
   //         if (foo.value === true) {
   //           return "good";
diff --git a/test/events.test.tsx b/test/events.test.tsx
index 665ebbd..c4f9035 100644
--- a/test/events.test.tsx
+++ b/test/events.test.tsx
@@ -1,5 +1,12 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, dispatchEvent, mount, prop, WebComponent } from "@plusnew/webcomponent";
+import {
+  createComponent,
+  define,
+  dispatchEvent,
+  mount,
+  prop,
+  WebComponent,
+} from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -16,31 +23,26 @@ describe("webcomponent", () => {
 
   it("creates basic component and updating its props", () => {
     let counter = 0;
-    const Component = createComponent(
-      "test-base",
-      class Component extends WebComponent {
-        render() {
-          return (
-            <NestedComponent
-              onfoo={(evt) => {
-                counter++;
-                expect(evt.detail).to.equal("mep");
-              }}
-            />
-          );
-        }
-      },
-    );
-
-    const NestedComponent = createComponent(
-      "test-nested",
-      class NestedComponent extends WebComponent {
-        onfoo: (evt: CustomEvent<string>) => void;
-        render(this: NestedComponent) {
-          return <button onclick={() => dispatchEvent(this, "foo", { detail: "mep" })} />;
-        }
-      },
-    );
+    @define("test-base")
+    class Component extends WebComponent() {
+      render() {
+        return (
+          <NestedComponent
+            onfoo={(evt) => {
+              counter++;
+              expect(evt.detail).to.equal("mep");
+            }}
+          />
+        );
+      }
+    }
+
+    @define("test-nested")
+    class NestedComponent extends WebComponent({ onfoo: prop<(evt: CustomEvent) => void>() }) {
+      render(this: NestedComponent) {
+        return <button onclick={() => dispatchEvent(this, "foo", { detail: "mep" })} />;
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -61,40 +63,37 @@ describe("webcomponent", () => {
 
   it("updating eventListener reference", () => {
     let counter = 0;
-    const Component = createComponent(
-      "test-dereference-container",
-      class Component extends WebComponent {
-        #counter = signal(0);
-        render() {
-          return (
-            <NestedComponent
-              foo={this.#counter.value}
-              onfoo={(evt) => {
-                counter++;
-                expect(evt.detail).to.eql(this.#counter.value + 1);
-                this.#counter.value = evt.detail;
-              }}
-            />
-          );
-        }
-      },
-    );
-
-    const NestedComponent = createComponent(
-      "test-deference",
-      class NestedComponent extends WebComponent {
-        @prop() accessor foo: number;
-        onfoo: (evt: CustomEvent<number>) => void;
-        render(this: NestedComponent) {
-          const derefence = (value: number) => (
-            <button onclick={() => dispatchEvent(this, "foo", { detail: value + 1 })}>
-              {value.toString()}
-            </button>
-          );
-          return derefence(this.foo);
-        }
-      },
-    );
+    @define("test-dereference-container")
+    class Component extends WebComponent() {
+      #counter = signal(0);
+      render() {
+        return (
+          <NestedComponent
+            foo={this.#counter.value}
+            onfoo={(evt) => {
+              counter++;
+              expect(evt.detail).to.eql(this.#counter.value + 1);
+              this.#counter.value = evt.detail;
+            }}
+          />
+        );
+      }
+    }
+
+    @define("test-deference")
+    class NestedComponent extends WebComponent({
+      foo: prop<number>(),
+      onfoo: prop<(value: CustomEvent<number>) => void>(),
+    }) {
+      render(this: NestedComponent) {
+        const derefence = (value: number) => (
+          <button onclick={() => dispatchEvent(this, "foo", { detail: value + 1 })}>
+            {value.toString()}
+          </button>
+        );
+        return derefence(this.foo);
+      }
+    }
 
     mount(() => <Component />, container);
 
diff --git a/test/fragment.test.tsx b/test/fragment.test.tsx
index 3ae8a80..41fcaed 100644
--- a/test/fragment.test.tsx
+++ b/test/fragment.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, prop, WebComponent } from "@plusnew/webcomponent";
+import { define, mount, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("fragment", () => {
@@ -16,23 +16,20 @@ describe("fragment", () => {
 
   it("creates basic component with fragment", () => {
     const baz = signal("foo");
-    const Component = createComponent(
-      "test-base",
-      class Component extends WebComponent {
-        @prop() accessor foo: string;
-
-        render() {
-          return (
-            <>
-              <div>{baz.value}</div>
-              <span />
-            </>
-          );
-        }
-      },
-    );
-
-    mount(() => <Component foo="mep" className="some-class" />, container);
+
+    @define("test-base")
+    class Component extends WebComponent() {
+      render() {
+        return (
+          <>
+            <div>{baz.value}</div>
+            <span />
+          </>
+        );
+      }
+    }
+
+    mount(() => <Component className="some-class" />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
diff --git a/test/host.test.tsx b/test/host.test.tsx
index bb60deb..f483908 100644
--- a/test/host.test.tsx
+++ b/test/host.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, WebComponent } from "@plusnew/webcomponent";
+import { define, mount, WebComponent } from "@plusnew/webcomponent";
 import { signal } from "@preact/signals-core";
 
 describe("webcomponent", () => {
@@ -17,14 +17,13 @@ describe("webcomponent", () => {
   xit("adds property and removes it", async () => {
     const add = signal(false);
 
-    const Component = createComponent(
-      "test-property",
-      class Component extends WebComponent {
-        render() {
-          return add.value ? <span className="foo" /> : <span />;
-        }
-      },
-    );
+    define("test-property");
+    class Component extends WebComponent() {
+      render() {
+        return add.value ? <span className="foo" /> : <span />;
+      }
+    }
+
     mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
@@ -44,20 +43,18 @@ describe("webcomponent", () => {
   });
 
   it("registers click event", async () => {
-    const Component = createComponent(
-      "test-click",
-      class Component extends WebComponent {
-        #baz = signal(0);
-
-        render() {
-          return (
-            <button onclick={() => (this.#baz.value = this.#baz.value + 1)}>
-              {this.#baz.value.toString()}
-            </button>
-          );
-        }
-      },
-    );
+    @define("test-click")
+    class Component extends WebComponent() {
+      #baz = signal(0);
+
+      render() {
+        return (
+          <button onclick={() => (this.#baz.value = this.#baz.value + 1)}>
+            {this.#baz.value.toString()}
+          </button>
+        );
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -89,21 +86,19 @@ describe("webcomponent", () => {
   });
 
   it("registers input event and updating", async () => {
-    const Component = createComponent(
-      "test-input-update",
-      class Component extends WebComponent {
-        #baz = signal("foo");
-
-        render() {
-          return (
-            <input
-              oninput={(evt) => (this.#baz.value = (evt.currentTarget as HTMLInputElement).value)}
-              value={this.#baz.value}
-            />
-          );
-        }
-      },
-    );
+    @define("test-input-update")
+    class Component extends WebComponent() {
+      #baz = signal("foo");
+
+      render() {
+        return (
+          <input
+            oninput={(evt) => (this.#baz.value = (evt.currentTarget as HTMLInputElement).value)}
+            value={this.#baz.value}
+          />
+        );
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -128,16 +123,14 @@ describe("webcomponent", () => {
   });
 
   it("registers input event without updating", async () => {
-    const Component = createComponent(
-      "test-input-reject",
-      class Component extends WebComponent {
-        #baz = signal("foo");
+    @define("test-input-reject")
+    class Component extends WebComponent() {
+      #baz = signal("foo");
 
-        render() {
-          return <input oninput={() => null} value={this.#baz.value} />;
-        }
-      },
-    );
+      render() {
+        return <input oninput={() => null} value={this.#baz.value} />;
+      }
+    }
 
     mount(() => <Component />, container);
 
@@ -165,24 +158,22 @@ describe("webcomponent", () => {
     const backgroundColor = signal<null | string>(null);
     const fontColor = signal<null | string>(null);
 
-    const Component = createComponent(
-      "test-style",
-      class Component extends WebComponent {
-        render() {
-          return backgroundColor.value === null && fontColor.value === null ? (
-            <span />
-          ) : (
-            <span
-              style={{
-                ...(backgroundColor.value !== null &&
-                  ({ "background-color": backgroundColor.value } as any)),
-                ...(fontColor.value !== null && ({ color: fontColor.value } as any)),
-              }}
-            />
-          );
-        }
-      },
-    );
+    @define("test-style")
+    class Component extends WebComponent() {
+      render() {
+        return backgroundColor.value === null && fontColor.value === null ? (
+          <span />
+        ) : (
+          <span
+            style={{
+              ...(backgroundColor.value !== null &&
+                ({ "background-color": backgroundColor.value } as any)),
+              ...(fontColor.value !== null && ({ color: fontColor.value } as any)),
+            }}
+          />
+        );
+      }
+    }
 
     mount(() => <Component />, container);
 
diff --git a/test/svg.test.tsx b/test/svg.test.tsx
index ee15ad4..a9980f2 100644
--- a/test/svg.test.tsx
+++ b/test/svg.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from "@esm-bundle/chai";
-import { createComponent, mount, WebComponent } from "@plusnew/webcomponent";
+import { define, mount, WebComponent } from "@plusnew/webcomponent";
 
 describe("svg", () => {
   let container: HTMLElement;
@@ -14,24 +14,22 @@ describe("svg", () => {
   });
 
   it("async event dispatch", async () => {
-    const Component = createComponent(
-      "test-svg",
-      class Component extends WebComponent {
-        render(this: Component) {
-          return (
-            <svg>
-              <svg:circle />
-            </svg>
-          );
-        }
-      },
-    );
+    @define("test-svg")
+    class Component extends WebComponent() {
+      render(this: Component) {
+        return (
+          <svg>
+            <svg:circle />
+          </svg>
+        );
+      }
+    }
 
     mount(() => <Component />, container);
 
     expect(container.childNodes.length).to.equal(1);
 
-    const component = container.childNodes[0] as HTMLElement;
+    const component = container.childNodes[0] as InstanceType<typeof Component>;
     const element = component.shadowRoot?.childNodes[0] as SVGElement;
 
     expect(element.tagName).to.eql("svg");
diff --git a/tsconfig.json b/tsconfig.json
index 1b73525..c8948d1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
     /* Language and Environment */
-    "target": "ES2024" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "target": "ESNEXT" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react-jsx" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */