dothtml-interfaces 0.4.2 → 0.4.4

package/package.json

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

package/src/i-dot.d.ts

@@ -2,14 +2,14 @@
 import IDotComponent from "./i-dot-component";
 import IDotCss from "./styles/i-dot-css";
 import IEventBus from "./i-event-bus";
-import {AnyReactive, IBoundReactive, IReactive} from "./i-reactive";
+import {IReactive, IBinding, IWatcher} from "./i-reactive";
 import IDotcssProp from "./styles/i-css-prop";
 
 type DotContentPrimitive = string | number | boolean;
 type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IDotComponent | IDotDocument//typeof DotDocument;
-export type DotContent = DotContentBasic | Array<DotContent> | AnyReactive;//|(()=>DotContent);
+export type DotContent = DotContentBasic | Array<DotContent> | IReactive;//|(()=>DotContent);
 
-type AttrVal<T = string | number | boolean> = T | AnyReactive;
+type AttrVal<T = string | number | boolean> = T | IReactive;
 
 /**
  * Global interface containing elements.
@@ -25,7 +25,7 @@ export interface IDotDocument {
 	/**
 	 * A conditional function, analogous to if. Renders the specified DOT if a condition is met. Dynamic binding is possible when condition and callback are functions.
 	*/
-	when(condition: AnyReactive | boolean, DotContent): IDotConditionalDocument;
+	when(condition: IReactive | boolean, DotContent): IDotConditionalDocument;
 
 	// Main functions.
 	// TODO: please make this into a test case.
@@ -46,11 +46,11 @@ export interface IDotDocument {
 	/**
 	 * Creates a generic HTML node that can render a string, HTML nodes, or dotHTML content.
 	*/
-	html(content: string | number | boolean | AnyReactive): IDotDocument;
+	html(content: string | number | boolean | IReactive): IDotDocument;
 	/**
 	 * Creates a text node that will render as a string, rather than being parsed as markup.
 	*/
-	text(content: string | number | boolean | AnyReactive): IDotDocument;
+	text(content: string | number | boolean | IReactive): IDotDocument;
 	/**
 	 * Mounts a component.
 	 * TODO: add second arg.
@@ -65,7 +65,12 @@ export interface IDotDocument {
 	*/
 	iterate(n: number, callback: (i: number) => DotContent): IDotDocument;
 	each<T>(a: Array<T> | { [key: string | number]: T }, callback: (x: T, i: number, k: string | number) => DotContent): IDotDocument;
-	each<T>(a: IReactive<Array<T>>|IBoundReactive<any, Array<T> | { [key: string | number]: T }>, callback: (x: T, i: IBoundReactive<number>, k: string | number) => DotContent): IDotDocument;
+	each<T>(a: 
+		IWatcher<Array<T>>
+		|IWatcher<Record<string|number, T>>
+		|IBinding<any, Array<T>>
+		|IBinding<any, IWatcher<Record<string|number, T>>>
+		, callback: (x: T, i: IBinding<number>, k: string | number) => DotContent): IDotDocument;
 
 	/**
 	 * Removes the targeted document and everything in it.
@@ -372,7 +377,7 @@ export interface IDotCore extends IDotDocument {
 	bus: IEventBus;
 	window: IDotWindowBuilder;
 
-	watch<Ti = AnyReactive | Array<any> | { [key: string | number]: any } | string | number | boolean>(initValue?: Ti, key?: (Ti extends Array<any> | { [key: string | number]: any } ? string : never)): IReactive<Ti>;
+	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>;
 
 	// 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;
@@ -407,7 +412,7 @@ export interface IDotConditionalDocument extends IDotDocument {
 	 * A conditional catch, analogous to else if. Can be used after a when function. Evaluates if the previous when's condition was false.
 	 * Renders the specified DOT if a condition is met. Dynamic binding is possible when condition and callback are functions.
 	*/
-	otherwiseWhen(condition: AnyReactive | boolean, callback: DotContent): IDotConditionalDocument;
+	otherwiseWhen(condition: IReactive | boolean, callback: DotContent): IDotConditionalDocument;
 	/**
 	 * A conditional final catch, analogous to else. Can be used after a when or otherwiseWhen function. Evaluates if the previous when/otherwiseWhen evaluated to false.
 	 * Renders the specified DOT if a condition is met. Dynamic binding is possible when callback is a function.
@@ -995,7 +1000,7 @@ interface IDotTrack extends IDotGlobalAttrs {
 
 interface IDotVideo extends IDotGlobalAttrs {
 	autoPlay?: AttrVal<boolean>;
-	buffered?: AnyReactive; // Managed by browser not user. TODO: we can possibly use events to update observable objects.
+	buffered?: IReactive; // Managed by browser not user. TODO: we can possibly use events to update observable objects.
 	controls?: AttrVal<boolean>;
 	crossOrigin?: AttrVal<"anonymous"> | AttrVal<"use-credentials">;
 	height?: AttrVal<number>;

package/src/i-reactive.d.ts

@@ -1,5 +1,5 @@
 
-export interface IReactive<T = any>{
+export interface IWatcher<T = any>{
 	// Get the value.
 	get value(): T;
 	// Set the value.
@@ -14,7 +14,12 @@ export interface IReactive<T = any>{
 	// subscribeCallback(callback: (value: T)=>void): number;
 	// detachBinding(id: number);
 
-	_subscribe(boundReactive: IBoundReactive, item: any);
+	/** 
+	 * Subscribe to changes in the reactive object.
+	*/
+	subscribe(callback: Function): number;
+
+	_subscribe(boundReactive: IBinding, item: any);
 	_detachBinding(id: number);
 
 	/**
@@ -23,22 +28,27 @@ export interface IReactive<T = any>{
 	 */
 	updateObservers(): void;
 
-	bindAs<Td = string>(transform: {
+	bindAs<Td = string>(transform: (((v: T)=>Td)|({
 		display?: (v: T)=>Td;
 		read?: (v: string)=>T;
-	}): IBoundReactive<T, Td>;
+	}))): IBinding<T, Td>;
 
-	bind(): IBoundReactive<T>;
+	bind(): IBinding<T>;
 }
 
-export interface IReactiveWatcher<T = any>{
+export interface IObserver<T = any>{
 	observerUpdate(value: T, obsreverId: number): void;
 }
 
-export interface IBoundReactive<T = any, Td = T>{
-	_source: IReactive<T>;
+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 AnyReactive = IBoundReactive|IReactive;
+export type IReactive = IBinding|IWatcher;

package/src/index.d.ts

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

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

@@ -1,11 +1,11 @@
-import { IBoundReactive, IReactive } from "../i-reactive";
+import { IBinding, IWatcher } from "../i-reactive";
 
 // Global keyword values.
-export type GKV = IReactive<string>|IBoundReactive<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
+export type GKV = IWatcher<string>|IBinding<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
 
 export type ComplexType = string;
 
-export type ValueOrReactive<T> = T|IBoundReactive<any, T>|IReactive<T>;
+export type ValueOrReactive<T> = T|IBinding<any, T>|IWatcher<T>;
 
 // BASIC TYPES
 export type Str = `"${string|""}"`|`'${string|""}'`; // TODO: wherever str is required, we could just inject quotes...

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

@@ -5,7 +5,7 @@ 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 { IBoundReactive, IReactive } from "../i-reactive";
+import { IBinding, IWatcher } from "../i-reactive";
 
 type BackgroundPositionShorthand2D = string;
 type BackgroundRepeatValues2d = "no-repeat"|"repeat"|"space"|"round";
@@ -93,7 +93,7 @@ export default interface IDotcssProp extends
 
 	background?: GKV|string; // TODO: shorthand. Requires advanced typing.
 	backgroundAttachment?: GKV|"scroll"|"fixed"|"local"; // ✔️
-	backgroundBlendMode?: GKV|Array<IBoundReactive<any, string>|IReactive<string>|"darken"|"luminocity"|"normal">; // ✔️
+	backgroundBlendMode?: GKV|Array<IBinding<any, string>|IWatcher<string>|"darken"|"luminocity"|"normal">; // ✔️
 	backgroundPosition?: GKV|BackgroundPositionShorthand2D;
 	backgroundRepeat?: GKV|BackgroundRepeatValues2d;
 	backgroundClip?: GKV|string;

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

@@ -1,6 +1,6 @@
-import { AnyReactive } from "../../i-reactive";
+import { IReactive } from "../../i-reactive";
 
-type V = AnyReactive | number | string;
+type V = IReactive | number | string;
 
 type AngleUnitSuffix = "" | "Deg" | "Grad" | "Rad" | "Turn";
 

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

@@ -1,6 +1,6 @@
-import { IBoundReactive, IReactive } from "../../i-reactive";
+import { IBinding, IWatcher } from "../../i-reactive";
 
-type V = IBoundReactive<any, number|string>| IReactive<number|string> | number | string;
+type V = IBinding<any, number|string>| IWatcher<number|string> | number | string;
 
 type ColorUnitSuffix = "" 
 	| "Rgb" 
@@ -20,7 +20,7 @@ type SpecialColors = "currentcolor"|"transparent";
 
 type ColorProp<Prefix extends string> = {
 	[Key in ColorUnitSuffix as `${Prefix}${Key}`]?: (
-		(Key extends "" ? IBoundReactive<any, string> | IReactive<string> | NamedColor | SystemColor | SpecialColors | `#${string}` | `${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${string})` : void) |
+		(Key extends "" ? IBinding<any, string> | IWatcher<string> | NamedColor | SystemColor | SpecialColors | `#${string}` | `${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${string})` : void) |
 		(Key extends "Rgb" | "Hsl" | "HslDeg" | "HslGrad" | "HslRad" | "HslTurn" | "Hwb" | "HwbDeg" | "HwbGrad" | "HwbRad" | "HwbTurn" | "Lab" | "Lch" | "LchDeg" | "LchGrad" | "LchRad" | "LchTurn" | "Oklch" | "OklchDeg" | "OklchGrad" | "OklchRad" | "OklchTurn" ? [V, V, V] | [V, V, V, V] : void) |
 		(Key extends "Srgb" | "SrgbLinear" | "DisplayP3" | "A98Rgb" | "ProphotoRgb" | "Rec2020" | "Xyz" | "XyzD50" | "XyzD65" ? [V, V, V] : void)
 	);

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

@@ -1,12 +1,12 @@
-import { AnyReactive, IBoundReactive } from "../../i-reactive";
+import { IReactive, IBinding } from "../../i-reactive";
 import { GKV } from "../css-types";
 // import { NumericLength } from "./css-types";
 
 type LengthUnitSuffix = "" | "Cm" | "Ch" | "Em" | "Ex" | "In" | "Mm" | "P" | "Pc" | "Pt" | "Px" | "Rem" | "Vh" | "Vw" | "VMax" | "VMin";
 
-type V<S> = IBoundReactive<any> | number | S;
+type V<S> = IBinding<any> | number | S;
 
-type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|AnyReactive = GKV> = {
+type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|IReactive = GKV> = {
 	[Key in LengthUnitSuffix as `${Prefix}${Key}`]?: (
 		(Qty extends 1 ? V<S>|[V<S>] : void) |
 		(Qty extends 2 ? [V<S>, V<S>] : void) |