dothtml-interfaces 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml-interfaces",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Dependency injection interfaces for DOTHtml.",
   "main": "src/index.d.ts",
   "types": "src/index.d.ts",

package/src/i-component.d.ts

@@ -26,22 +26,18 @@ export interface FrameworkItems {
 	// html: IDotGenericElement;
 }
 
-export type ComponentArgs<TProps extends Array<string>, TEvents extends Array<string>> = {
-    [key in TProps[number]]: any;
-} & {
-    [key in TEvents[number]]: (...args: any[]) => void;
-}
-
 
 // TODO: there's a weird problem where if a constructor is not provided, it's not possible have a custom builder.
 // It should be the contsructor that depends on the builder, not the other way around. If we can't get this working, 
 // it might just be better to rethink how stuff gets passed into components.
-export default interface IComponent<TProps extends Array<string> = [], TEvents extends Array<string> = []> {
+export default interface IComponent/*<TProps extends Array<string> = [], TEvents extends Array<string> = []>*/ {
 
 	readonly _?: FrameworkItems;
 
-	new (attrs?: ComponentArgs<TProps, TEvents>): IComponent<TProps, TEvents>;
-	new (): IComponent<TProps, TEvents>;
+	// Regrettably, TS forces clients to implement the constructor, which is not ideal because we want to internalize that.
+	// There's no way to make the constructor optional.
+	// new (attrs?: ComponentArgs<TProps, TEvents>): IComponent<TProps, TEvents>;
+	// new (): IComponent<TProps, TEvents>;
 
     // Lifecycle hooks
 

package/src/i-dot.d.ts

@@ -335,16 +335,27 @@ export interface IDotDocument {
 }
 
 type Styles = string | IDotcssProp;
-interface IComponentFactory {
-	<TProps extends Array<string>, TEvents extends Array<string>, T extends IComponent<TProps, TEvents>>(
-		Base: new () => T, styles?: Styles | Styles[]
-	): new () => T;
-	useStyles<T extends IComponent>(styles: Styles | Styles[]): (Base: new () => T) => new () => T;
-}
+// interface IComponentFactory {
+// 	<TProps extends string[], TEvents extends string[], T extends IComponent<TProps, TEvents>>(
+// 		Base: new () => T, styles?: Styles | Styles[]
+// 	): new (attrs?: ComponentArgs<TProps, TEvents>) => T & { new (attrs?: ComponentArgs<TProps, TEvents>): IComponent<TProps, TEvents> };
+// }
+
+// interface IComponentFactory {
+//     <TProps extends string[], TEvents extends string[], T extends IComponent<TProps, TEvents>>(
+//         Base: new () => T, styles?: Styles | Styles[]
+//     ): new (attrs?: ComponentArgs<TProps, TEvents>) => T & IComponent<TProps, TEvents>;
+// }
 
+// useStyles<T extends IComponent>(styles: Styles | Styles[]): (Base: new () => T) => new () => T;
 // hasEvents<T extends IComponent>(styles: Styles | Styles[]): (Base: new () => T) => new () => T;
 // prop(target: any, propertyKey: string): void;
 
+export type ComponentArgs<TProps extends Array<string>, TEvents extends Array<string>> = {
+    [key in TProps[number]]: any;
+} & {
+    [key in TEvents[number]]: (...args: any[]) => void;
+}
 
 /**
  * Interface for the dot object.
@@ -366,7 +377,13 @@ export interface IDotCore extends IDotDocument {
 	// component<T extends IComponent>(Base: new (...args: Parameters<T['build']>) => T): new (...args: Parameters<T['build']>) => T;
 	// useStyles<T extends IComponent>(styles: string|((css: IDotCss)=>IDotcssProp|string)): ((Base: new (...args: Parameters<T['build']>) => T) => new (...args: Parameters<T['build']>) => T);
 
-	component: IComponentFactory;
+	// component: IComponentFactory;
+	// Works but doesn't infer types from the component.
+	// There's room for improvement here but it's not clear to me how to do it.
+	// What I'd like to do is have the types tied to the IComponent interface rather than the component factory function.
+	component<TProps extends string[] = [], TEvents extends string[] = []>(Base: new () => IComponent)
+		: new (attrs?: ComponentArgs<TProps, TEvents>) => IComponent & { new (attrs?: ComponentArgs<TProps, TEvents>): IComponent };
+
 	useStyles(document: Document, styles: Styles): HTMLStyleElement;
 }