dothtml-interfaces 0.2.6 → 0.2.8

package/src/i-dot.d.ts

@@ -2,7 +2,7 @@
 import IComponent, { FrameworkItems } from "./i-component";
 import IDotCss, { IDotcssProp } from "./i-dot-css";
 import IEventBus from "./i-event-bus";
-import IReactive from "./i-reactive";
+import {IReactive} from "./i-reactive";
 
 type DotContentPrimitive = string | number | boolean;
 type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IComponent | IDotDocument//typeof DotDocument;
@@ -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;
+} & Partial<{
+	[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;
 }
 
@@ -424,7 +441,7 @@ export interface IDotGlobalAttrs {
 	areaChecked?: AttrVal<string>;
 	areaSelected?: AttrVal<boolean>;
 	accessKey?: AttrVal<string>; // This could potentially be enumerated. But care should be taken as these types are already quite complex.
-	class?: AttrVal<string> | Array<AttrVal<string>> | AttrVal<Array<string>> | Record<string, AttrVal<string>>; // Space-separated. TODO: need tests.
+	class?: AttrVal<string> | Array<AttrVal<string>> | AttrVal<Array<string>> | Record<string, AttrVal<boolean>>; // Space-separated. TODO: need tests.
 	contentEditable?: AttrVal<"true"> | AttrVal<"false"> | AttrVal<"plaintext-only">;
 	contextMenu?: AttrVal<string>;
 	dir?: AttrVal<string>;

package/src/i-reactive.d.ts

@@ -1,5 +1,5 @@
 
-export default interface IReactive<Ti = any, To = Ti>{
+export interface IReactive<Ti = any, To = Ti>{
 	// The untransformed value.
 	_value: Ti;
 	// Get the value.
@@ -12,10 +12,14 @@ export default interface IReactive<Ti = any, To = Ti>{
 	// If a key is not provided, identification is done automatically by the framework by comparing object references.
 	key: string;
 	// Optional transformer that can transform the input.
-	transformer?: (input: Ti)=>To;
+	transform?: (input: Ti)=>To;
 	// subscribeNode(node: Node): number;
 	// subscribeAttr(node: HTMLElement, attributeName: string): number;
 	subscribeCallback(callback: (value: To)=>void): number;
 	detachBinding(id: number);
 	updateObservers(): void;
+}
+
+export interface IReactiveWatcher<T = any>{
+	observerUpdate(value: T, obsreverId: number): void;
 }

package/src/index.d.ts

@@ -8,11 +8,5 @@ export * from "./i-dot-css";
 
 export { default as IComponent, FrameworkItems } from "./i-component";
 
-export { default as IReactive } from "./i-reactive";
-export { default as IEventBus } from "./i-event-bus";
-
-declare global {
-	interface Window {
-		dot: IDotCore;
-	}
-}
+export { IReactive, IReactiveWatcher } from "./i-reactive";
+export { default as IEventBus } from "./i-event-bus";