dothtml-interfaces 0.4.4 → 0.4.6

package/package.json

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

package/src/bindings/i-binding.d.ts

@@ -0,0 +1,12 @@
+import { IWatcher } from "./i-watcher";
+
+export interface IBinding<T = any, Td = T>{
+	_source: IWatcher<T>;
+	_get: ()=>Td;
+	_set: (v: string|number|boolean)=>void;
+	
+	_transform: {
+		display?: (v: T)=>Td;
+		read?: (v: string)=>T;
+	}
+}

package/src/bindings/i-observer.d.ts

@@ -0,0 +1,3 @@
+export interface IObserver<T = any>{
+	observerUpdate(value: T, obsreverId: number): void;
+}

package/src/bindings/i-reactive.d.ts

@@ -0,0 +1,4 @@
+import { IBinding } from "./i-binding";
+import { IWatcher } from "./i-watcher";
+
+export type IReactive = IBinding|IWatcher;

package/src/bindings/i-ref.d.ts

@@ -0,0 +1,4 @@
+
+export interface IRef<T extends HTMLElement = HTMLElement>{
+	get element(): T;
+}

package/src/{i-reactive.d.ts → bindings/i-watcher.d.ts}

@@ -1,3 +1,4 @@
+import { IBinding } from "./i-binding";
 
 export interface IWatcher<T = any>{
 	// Get the value.
@@ -34,21 +35,4 @@ export interface IWatcher<T = any>{
 	}))): IBinding<T, Td>;
 
 	bind(): IBinding<T>;
-}
-
-export interface IObserver<T = any>{
-	observerUpdate(value: T, obsreverId: number): void;
-}
-
-export interface IBinding<T = any, Td = T>{
-	_source: IWatcher<T>;
-	_get: ()=>Td;
-	_set: (v: string|number|boolean)=>void;
-	
-	_transform: {
-		display?: (v: T)=>Td;
-		read?: (v: string)=>T;
-	}
-}
-
-export type IReactive = IBinding|IWatcher;
+}

package/src/i-dot.d.ts

@@ -2,10 +2,13 @@
 import IDotComponent from "./i-dot-component";
 import IDotCss from "./styles/i-dot-css";
 import IEventBus from "./i-event-bus";
-import {IReactive, IBinding, IWatcher} from "./i-reactive";
+import {IReactive} from "./bindings/i-reactive";
+import { IBinding } from "./bindings/i-binding";
+import { IWatcher } from "./bindings/i-watcher";
 import IDotcssProp from "./styles/i-css-prop";
+import { IRef } from "./bindings/i-ref";
 
-type DotContentPrimitive = string | number | boolean;
+type DotContentPrimitive = string | number | boolean | undefined | null;
 type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IDotComponent | IDotDocument//typeof DotDocument;
 export type DotContent = DotContentBasic | Array<DotContent> | IReactive;//|(()=>DotContent);
 
@@ -378,6 +381,7 @@ export interface IDotCore extends IDotDocument {
 	window: IDotWindowBuilder;
 
 	watch<Ti = IReactive | Array<any> | { [key: string | number]: any } | string | number | boolean>(initValue?: Ti, key?: (Ti extends Array<any> | { [key: string | number]: any } ? string : never)): IWatcher<Ti>;
+	ref(): IRef;
 
 	// Keep these around for a bit to show how it was done before in case I need to change anything prior to the v6 launch.
 	// component<T extends IComponent>(Base: new (...args: Parameters<T['build']>) => T): new (...args: Parameters<T['build']>) => T;
@@ -421,7 +425,7 @@ export interface IDotConditionalDocument extends IDotDocument {
 }
 
 // Attribute interface (for all elements):
-export interface IDotGlobalAttrs {
+export interface IDotGlobalAttrs<T extends HTMLElement = HTMLElement> {
 	/**
 	 * Create a custom attribute.
 	*/
@@ -437,7 +441,7 @@ export interface IDotGlobalAttrs {
 	// TODO: this needs to be redone now. 
 	// The better way might be using the new reactive system instead of references.
 	// For now I'll leave it like this:
-	// ref?: IReactive<HTMLElement>;
+	ref?: IRef<T>;
 
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	bgColor?: AttrVal<unknown>;
@@ -550,7 +554,7 @@ export interface IDotGlobalAttrs {
 // 	prop(name: string, value: any): IMountedComponent<T>;
 // }
 
-interface IDotA extends IDotGlobalAttrs {
+interface IDotA extends IDotGlobalAttrs<HTMLAnchorElement> {
 	download?: AttrVal<boolean>;
 	hRef?: AttrVal<string>;
 	hRefLang?: AttrVal<string>;
@@ -566,7 +570,7 @@ interface IDotA extends IDotGlobalAttrs {
 	target?: AttrVal<"_blank"> | AttrVal<"_parent"> | AttrVal<"_self"> | AttrVal<"_top">;
 	type?: AttrVal<string>;
 }
-interface IDotArea extends IDotGlobalAttrs {
+interface IDotArea extends IDotGlobalAttrs<HTMLAreaElement> {
 	alt?: AttrVal<string>;
 	coords?: AttrVal<string>;
 	download?: AttrVal<string>;
@@ -578,7 +582,7 @@ interface IDotArea extends IDotGlobalAttrs {
 	shape?: AttrVal<string>;
 	target?: AttrVal<string>;
 }
-interface IDotAudio extends IDotGlobalAttrs {
+interface IDotAudio extends IDotGlobalAttrs<HTMLAudioElement> {
 	autoPlay?: AttrVal<boolean>;
 	// buffered?: unknown; // Not used?
 	controls?: AttrVal<boolean>;
@@ -617,11 +621,11 @@ interface IDotAudio extends IDotGlobalAttrs {
 	onWaiting?: (e: Event) => void;
 	onCanPlay?: (e: Event) => void;
 }
-interface IDotBlockQuote extends IDotGlobalAttrs {
+interface IDotBlockQuote extends IDotGlobalAttrs<HTMLQuoteElement> {
 	quoteCite?: AttrVal<string>; // alias for cite
 }
 
-interface IDotBody extends IDotGlobalAttrs {
+interface IDotBody extends IDotGlobalAttrs<HTMLBodyElement> {
 	align?: unknown; // Deprecated in HTML5. Use CSS.
 	background?: unknown; // Deprecated in HTML5. Use CSS.
 
@@ -636,11 +640,11 @@ interface IDotBody extends IDotGlobalAttrs {
 	onStorage?: (e: StorageEvent) => void;
 }
 
-interface IDotBr extends IDotGlobalAttrs {
+interface IDotBr extends IDotGlobalAttrs<HTMLBRElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	clear?: unknown;
 }
-interface IDotButton extends IDotGlobalAttrs {
+interface IDotButton extends IDotGlobalAttrs<HTMLButtonElement> {
 	autoFocus?: AttrVal<boolean>;
 	formAction?: AttrVal<string>;
 	disabled?: AttrVal<boolean>;
@@ -649,19 +653,19 @@ interface IDotButton extends IDotGlobalAttrs {
 	whichForm?: AttrVal<string>; // alias for form
 	value?: AttrVal<string>;
 }
-interface IDotCanvas extends IDotGlobalAttrs {
+interface IDotCanvas extends IDotGlobalAttrs<HTMLCanvasElement> {
 	height?: AttrVal<number>;
 	width?: AttrVal<number>;
 }
 
-interface IDotCol extends IDotGlobalAttrs {
+interface IDotCol extends IDotGlobalAttrs<HTMLTableColElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	charOff?: AttrVal<unknown>;
 	colSpan?: AttrVal<number>; // alias for span
 	vAlign?: AttrVal<number>;
 }
 
-interface IDotColGroup extends IDotGlobalAttrs {
+interface IDotColGroup extends IDotGlobalAttrs<HTMLTableColElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	charOff?: AttrVal<unknown>;
 	colSpan?: AttrVal<number>; // alias for span
@@ -674,23 +678,23 @@ interface IDotDel extends IDotGlobalAttrs {
 	quoteCite?: AttrVal<string>; // alias for cite
 }
 
-interface IDotDetails extends IDotGlobalAttrs {
+interface IDotDetails extends IDotGlobalAttrs<HTMLDetailsElement> {
 	open?: AttrVal<boolean>;
 	// Events:
 	onToggle?: (e: Event) => void;
 }
-interface IDotEmbed extends IDotGlobalAttrs {
+interface IDotEmbed extends IDotGlobalAttrs<HTMLEmbedElement> {
 	height?: AttrVal<number>;
 	src?: AttrVal<string>;
 	type?: AttrVal<string>;
 	width?: AttrVal<number>;
 }
-interface IDotFieldSet extends IDotGlobalAttrs {
+interface IDotFieldSet extends IDotGlobalAttrs<HTMLFieldSetElement> {
 	disabled?: AttrVal<boolean>;
 	name?: AttrVal<string>;
 	whichForm?: AttrVal<string>; // alias for form
 }
-interface IDotForm extends IDotGlobalAttrs {
+interface IDotForm extends IDotGlobalAttrs<HTMLFormElement> {
 	acceptCharset?: AttrVal<string>; // accept-charset, apparently the only hyphenated attribute (aside from data-*)...
 	action?: AttrVal<string>;
 	autoComplete?: AttrVal<"on"> | AttrVal<"off">;
@@ -701,10 +705,10 @@ interface IDotForm extends IDotGlobalAttrs {
 	target?: AttrVal<"_self"> | AttrVal<"_blank"> | AttrVal<"_parent"> | AttrVal<"_top">;
 	// rel?: PrimativeOrObservable<string> IDotForm; // Not used with forms?
 }
-interface IDotHr extends IDotGlobalAttrs {
+interface IDotHr extends IDotGlobalAttrs<HTMLHRElement> {
 	noShade?: AttrVal<unknown>;
 }
-interface IDotIFrame extends IDotGlobalAttrs {
+interface IDotIFrame extends IDotGlobalAttrs<HTMLIFrameElement> {
 	allow?: AttrVal<string>;
 	allowFullScreen?: AttrVal<boolean>;
 	/** @deprecated Deprecated in HTML5. */
@@ -724,7 +728,7 @@ interface IDotIFrame extends IDotGlobalAttrs {
 	srcDoc?: AttrVal<string>;
 	width?: AttrVal<number>;
 }
-interface IDotImg extends IDotGlobalAttrs {
+interface IDotImg extends IDotGlobalAttrs<HTMLImageElement> {
 	alt?: AttrVal<string>;
 	crossOrigin?: AttrVal<"anonymous"> | AttrVal<"use-credentials">;
 	decoding?: AttrVal<"async"> | AttrVal<"auto"> | AttrVal<"sync">;
@@ -742,7 +746,7 @@ interface IDotImg extends IDotGlobalAttrs {
 	useMap?: AttrVal<number>;
 	width?: AttrVal<number>;
 }
-interface IDotInput extends IDotGlobalAttrs {
+interface IDotInput extends IDotGlobalAttrs<HTMLInputElement> {
 	accept?: AttrVal<string>;
 	alt?: AttrVal<string>;
 	autoCapitalize?: AttrVal<"none"> | AttrVal<"sentences"> | AttrVal<"words"> | AttrVal<"characters">;
@@ -790,23 +794,23 @@ interface IDotKeyGen extends IDotGlobalAttrs {
 	keyType?: AttrVal<string>;
 }
 
-interface IDotLabel extends IDotGlobalAttrs {
+interface IDotLabel extends IDotGlobalAttrs<HTMLLabelElement> {
 	for?: AttrVal<string>;
 }
 
-interface IDotLi extends IDotGlobalAttrs {
+interface IDotLi extends IDotGlobalAttrs<HTMLLIElement> {
 	value?: AttrVal<number>;
 }
 
-interface IDotMap extends IDotGlobalAttrs {
+interface IDotMap extends IDotGlobalAttrs<HTMLMapElement> {
 	name?: AttrVal<string>;
 }
 
-interface IDotMenu extends IDotGlobalAttrs {
+interface IDotMenu extends IDotGlobalAttrs<HTMLMenuElement> {
 	type?: AttrVal<string>;
 }
 
-interface IDotMeter extends IDotGlobalAttrs {
+interface IDotMeter extends IDotGlobalAttrs<HTMLMeterElement> {
 	high?: AttrVal<number>;
 	low?: AttrVal<number>;
 	max?: AttrVal<number>;
@@ -815,7 +819,7 @@ interface IDotMeter extends IDotGlobalAttrs {
 	value?: AttrVal<number>;
 }
 
-interface IDotObject extends IDotGlobalAttrs {
+interface IDotObject extends IDotGlobalAttrs<HTMLObjectElement> {
 	archive?: AttrVal<string>;
 	classId?: AttrVal<string>;
 	codeBase?: AttrVal<string>;
@@ -830,46 +834,46 @@ interface IDotObject extends IDotGlobalAttrs {
 	width?: AttrVal<number>;
 }
 
-interface IDotOl extends IDotGlobalAttrs {
+interface IDotOl extends IDotGlobalAttrs<HTMLUListElement> {
 	/** @deprecated Deprecated in HTML5. */
 	reversed?: AttrVal<boolean>;
 	start?: AttrVal<number>;
 }
 
-interface IDotOptGroup extends IDotGlobalAttrs {
+interface IDotOptGroup extends IDotGlobalAttrs<HTMLUListElement> {
 	disabled?: AttrVal<boolean>;
 }
 
-interface IDotOption extends IDotGlobalAttrs {
+interface IDotOption extends IDotGlobalAttrs<HTMLUListElement> {
 	disabled?: AttrVal<boolean>;
 	optionLabel?: AttrVal<string>; // Alias for label
 	selected?: AttrVal<boolean>;
 	value?: AttrVal<string>;
 }
 
-interface IDotOutput extends IDotGlobalAttrs {
+interface IDotOutput extends IDotGlobalAttrs<HTMLOutputElement> {
 	for?: AttrVal<string>;
 	name?: AttrVal<string>;
 	whichForm?: AttrVal<string>; // Alias for form
 }
 
-interface IDotParam extends IDotGlobalAttrs {
+interface IDotParam extends IDotGlobalAttrs<HTMLParamElement> {
 	name?: AttrVal<string>;
 	value?: AttrVal<string>;
 	/** @deprecated Deprecated in HTML5. */
 	valueType?: AttrVal<unknown>;
 }
 
-interface IDotProgress extends IDotGlobalAttrs {
+interface IDotProgress extends IDotGlobalAttrs<HTMLProgressElement> {
 	max?: AttrVal<number>;
 	value?: AttrVal<number>;
 }
 
-interface IDotQ extends IDotGlobalAttrs {
+interface IDotQ extends IDotGlobalAttrs<HTMLQuoteElement> {
 	quoteCite?: AttrVal<string>; // alias for cite
 }
 
-interface IDotSelect extends IDotGlobalAttrs {
+interface IDotSelect extends IDotGlobalAttrs<HTMLSelectElement> {
 	autoFocus?: AttrVal<boolean>;
 	disabled?: AttrVal<boolean>;
 	multiple?: AttrVal<boolean>;
@@ -880,14 +884,14 @@ interface IDotSelect extends IDotGlobalAttrs {
 	value?: AttrVal<string>; // Pseudo attribute for convenience. 
 }
 
-interface IDotSource extends IDotGlobalAttrs {
+interface IDotSource extends IDotGlobalAttrs<HTMLSourceElement> {
 	media?: AttrVal<string>;
 	src?: AttrVal<string>;
 	type?: AttrVal<string>;
 	sizes?: AttrVal<string>;
 	srcSet?: AttrVal<string>;
 }
-interface IDotTable extends IDotGlobalAttrs {
+interface IDotTable extends IDotGlobalAttrs<HTMLTableElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	border?: AttrVal<string> | AttrVal<number>; 
 	/** @deprecated Deprecated in HTML5. Use CSS. */
@@ -906,7 +910,7 @@ interface IDotTable extends IDotGlobalAttrs {
 	width?: AttrVal<number>; 
 }
 
-interface IDotTextArea extends IDotGlobalAttrs {
+interface IDotTextArea extends IDotGlobalAttrs<HTMLTextAreaElement> {
 	autoCapitalize?: AttrVal<"none"> | AttrVal<"sentences"> | AttrVal<"words"> | AttrVal<"characters">;
 	autoFocus?: AttrVal<boolean>;
 	cols?: AttrVal<number>;
@@ -924,14 +928,14 @@ interface IDotTextArea extends IDotGlobalAttrs {
 	value?: AttrVal<string>; // Pseudo attribute for convenience. 
 }
 
-interface IDotTBody extends IDotGlobalAttrs {
+interface IDotTBody extends IDotGlobalAttrs<HTMLTableSectionElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	charOff?: AttrVal<unknown>;
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	vAlign?: AttrVal<unknown>;
 }
 
-interface IDotTd extends IDotGlobalAttrs {
+interface IDotTd extends IDotGlobalAttrs<HTMLTableCellElement> {
 
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	axis?: AttrVal<string>;
@@ -949,18 +953,18 @@ interface IDotTd extends IDotGlobalAttrs {
 	vAlign?: AttrVal<string>;
 }
 
-interface IDotTFoot extends IDotGlobalAttrs {
+interface IDotTFoot extends IDotGlobalAttrs<HTMLTableSectionElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	charOff?: AttrVal<number>;
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	vAlign?: AttrVal<string>;
 }
 
-interface IDotTime extends IDotGlobalAttrs {
+interface IDotTime extends IDotGlobalAttrs<HTMLTimeElement> {
 	dateTime?: AttrVal<string>;
 }
 
-interface IDotTh extends IDotGlobalAttrs {
+interface IDotTh extends IDotGlobalAttrs<HTMLTableCellElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	axis?: AttrVal<string>;
 	colSpan?: AttrVal<number>;
@@ -973,21 +977,21 @@ interface IDotTh extends IDotGlobalAttrs {
 	vAlign?: AttrVal<string>;
 }
 
-interface IDotTHead extends IDotGlobalAttrs {
+interface IDotTHead extends IDotGlobalAttrs<HTMLTableSectionElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	charOff?: AttrVal<string> | AttrVal<number>;
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	vAlign?: AttrVal<string>;
 }
 
-interface IDotTr extends IDotGlobalAttrs {
+interface IDotTr extends IDotGlobalAttrs<HTMLTableRowElement> {
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	charOff?: AttrVal<string> | AttrVal<number>;
 	/** @deprecated Deprecated in HTML5. Use CSS. */
 	vAlign?: AttrVal<string>;
 }
 
-interface IDotTrack extends IDotGlobalAttrs {
+interface IDotTrack extends IDotGlobalAttrs<HTMLTrackElement> {
 	default?: AttrVal<boolean>;
 	kind?: AttrVal<string>;
 	src?: AttrVal<string>;
@@ -998,7 +1002,7 @@ interface IDotTrack extends IDotGlobalAttrs {
 	onCueChange?: (e: Event) => void;
 }
 
-interface IDotVideo extends IDotGlobalAttrs {
+interface IDotVideo extends IDotGlobalAttrs<HTMLVideoElement> {
 	autoPlay?: AttrVal<boolean>;
 	buffered?: IReactive; // Managed by browser not user. TODO: we can possibly use events to update observable objects.
 	controls?: AttrVal<boolean>;

package/src/index.d.ts

@@ -8,5 +8,8 @@ export * from "./styles/i-dot-css";
 
 export { default as IDotComponent, FrameworkItems } from "./i-dot-component";
 
-export { IWatcher, IObserver, IBinding, IReactive } from "./i-reactive";
+export { IWatcher } from "./bindings/i-watcher";
+export { IObserver } from "./bindings/i-observer";
+export { IBinding } from "./bindings/i-binding";
+export { IReactive } from "./bindings/i-reactive";
 export { default as IEventBus } from "./i-event-bus";

package/src/styles/css-types.d.ts

@@ -1,4 +1,5 @@
-import { IBinding, IWatcher } from "../i-reactive";
+import { IBinding } from "../bindings/i-binding";
+import { IWatcher } from "../bindings/i-watcher";
 
 // Global keyword values.
 export type GKV = IWatcher<string>|IBinding<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";

package/src/styles/i-css-prop.d.ts

@@ -5,7 +5,8 @@ import IShadowProp from "./complex-css-types/i-shadow-prop";
 import ITransformationProp from "./complex-css-types/i-transformation-prop";
 import ColorProp from "./mapped-types/color-props";
 import LengthProp from "./mapped-types/length-prop";
-import { IBinding, IWatcher } from "../i-reactive";
+import { IBinding } from "../bindings/i-binding";
+import { IWatcher } from "../bindings/i-watcher";
 
 type BackgroundPositionShorthand2D = string;
 type BackgroundRepeatValues2d = "no-repeat"|"repeat"|"space"|"round";

package/src/styles/mapped-types/angle-prop.d.ts

@@ -1,4 +1,4 @@
-import { IReactive } from "../../i-reactive";
+import { IReactive } from "../../bindings/i-reactive";
 
 type V = IReactive | number | string;
 

package/src/styles/mapped-types/color-props.d.ts

@@ -1,4 +1,5 @@
-import { IBinding, IWatcher } from "../../i-reactive";
+import { IBinding } from "../../bindings/i-binding";
+import { IWatcher } from "../../bindings/i-watcher";
 
 type V = IBinding<any, number|string>| IWatcher<number|string> | number | string;
 

package/src/styles/mapped-types/length-prop.d.ts

@@ -1,4 +1,5 @@
-import { IReactive, IBinding } from "../../i-reactive";
+import { IReactive } from "../../bindings/i-reactive";
+import { IBinding } from "../../bindings/i-binding";
 import { GKV } from "../css-types";
 // import { NumericLength } from "./css-types";