dothtml-interfaces 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml-interfaces",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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 {IBoundReactive, IReactive} from "./i-reactive";
+import {AnyReactive, IBoundReactive, IReactive} 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> | IBoundReactive;//|(()=>DotContent);
+export type DotContent = DotContentBasic | Array<DotContent> | AnyReactive;//|(()=>DotContent);
 
-type AttrVal<T = string | number | boolean> = T | IBoundReactive<any>;
+type AttrVal<T = string | number | boolean> = T | AnyReactive;
 
 /**
  * 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: IBoundReactive | boolean, DotContent): IDotConditionalDocument;
+	when(condition: AnyReactive | 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 | IBoundReactive): IDotDocument;
+	html(content: string | number | boolean | AnyReactive): IDotDocument;
 	/**
 	 * Creates a text node that will render as a string, rather than being parsed as markup.
 	*/
-	text(content: string | number | boolean | IBoundReactive): IDotDocument;
+	text(content: string | number | boolean | AnyReactive): IDotDocument;
 	/**
 	 * Mounts a component.
 	 * TODO: add second arg.
@@ -65,7 +65,7 @@ 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: IBoundReactive<any, Array<T> | { [key: string | number]: T }>, callback: (x: T, i: IBoundReactive<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;
 
 	/**
 	 * Removes the targeted document and everything in it.
@@ -372,7 +372,7 @@ export interface IDotCore extends IDotDocument {
 	bus: IEventBus;
 	window: IDotWindowBuilder;
 
-	watch<Ti = IBoundReactive | 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 = 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>;
 
 	// 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 +407,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: IBoundReactive | boolean, callback: DotContent): IDotConditionalDocument;
+	otherwiseWhen(condition: AnyReactive | 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 +995,7 @@ interface IDotTrack extends IDotGlobalAttrs {
 
 interface IDotVideo extends IDotGlobalAttrs {
 	autoPlay?: AttrVal<boolean>;
-	buffered?: IBoundReactive<unknown>; // Managed by browser not user. TODO: we can possibly use events to update observable objects.
+	buffered?: AnyReactive; // 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,11 +1,9 @@
 
-export interface IReactive<T = any> extends IBoundReactive<T, T>{
-	// The untransformed value.
-	_value: T;
+export interface IReactive<T = any>{
 	// Get the value.
-	getValue(): T;
+	get value(): T;
 	// Set the value.
-	setValue(v: T|null|undefined);
+	set value(v: T|null|undefined);
 
 	// Key is used for observable array proxy bindings.
 	// If a key is provided, it's used to uniquely identify array elements.
@@ -13,14 +11,24 @@ export interface IReactive<T = any> extends IBoundReactive<T, T>{
 	key: string;
 	// subscribeNode(node: Node): number;
 	// subscribeAttr(node: HTMLElement, attributeName: string): number;
-	subscribeCallback(callback: (value: T)=>void): number;
-	detachBinding(id: number);
+	// subscribeCallback(callback: (value: T)=>void): number;
+	// detachBinding(id: number);
+
+	_subscribe(boundReactive: IBoundReactive, item: any);
+	_detachBinding(id: number);
+
+	/**
+	 * Called manually by the user to trigger an update.
+	 * Useful for arrays and objects.
+	 */
 	updateObservers(): void;
 
 	bindAs<Td = string>(transform: {
 		display?: (v: T)=>Td;
 		read?: (v: string)=>T;
 	}): IBoundReactive<T, Td>;
+
+	bind(): IBoundReactive<T>;
 }
 
 export interface IReactiveWatcher<T = any>{
@@ -30,5 +38,7 @@ export interface IReactiveWatcher<T = any>{
 export interface IBoundReactive<T = any, Td = T>{
 	_source: IReactive<T>;
 	_get: ()=>Td;
-	_set: (v: string)=>void;
-}
+	_set: (v: string|number|boolean)=>void;
+}
+
+export type AnyReactive = IBoundReactive|IReactive;

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

@@ -1,11 +1,11 @@
-import { IBoundReactive } from "../i-reactive";
+import { IBoundReactive, IReactive } from "../i-reactive";
 
 // Global keyword values.
-export type GKV = IBoundReactive<string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
+export type GKV = IReactive<string>|IBoundReactive<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
 
 export type ComplexType = string;
 
-export type ValueOrReactive<T> = T|IBoundReactive<T>;
+export type ValueOrReactive<T> = T|IBoundReactive<any, T>|IReactive<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 } from "../i-reactive";
+import { IBoundReactive, IReactive } 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<string>|"darken"|"luminocity"|"normal">; // ✔️
+	backgroundBlendMode?: GKV|Array<IBoundReactive<any, string>|IReactive<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 { IBoundReactive } from "../../i-reactive";
+import { AnyReactive } from "../../i-reactive";
 
-type V = IBoundReactive<any> | number | string;
+type V = AnyReactive | number | string;
 
 type AngleUnitSuffix = "" | "Deg" | "Grad" | "Rad" | "Turn";
 

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

@@ -1,6 +1,6 @@
-import { IBoundReactive } from "../../i-reactive";
+import { IBoundReactive, IReactive } from "../../i-reactive";
 
-type V = IBoundReactive<number|string> | number | string;
+type V = IBoundReactive<any, number|string>| IReactive<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<string> | NamedColor | SystemColor | SpecialColors | `#${string}` | `${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${string})` : void) |
+		(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 "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,4 +1,4 @@
-import { IBoundReactive } from "../../i-reactive";
+import { AnyReactive, IBoundReactive } from "../../i-reactive";
 import { GKV } from "../css-types";
 // import { NumericLength } from "./css-types";
 
@@ -6,7 +6,7 @@ type LengthUnitSuffix = "" | "Cm" | "Ch" | "Em" | "Ex" | "In" | "Mm" | "P" | "Pc
 
 type V<S> = IBoundReactive<any> | number | S;
 
-type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|IBoundReactive<any> = GKV> = {
+type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|AnyReactive = GKV> = {
 	[Key in LengthUnitSuffix as `${Prefix}${Key}`]?: (
 		(Qty extends 1 ? V<S>|[V<S>] : void) |
 		(Qty extends 2 ? [V<S>, V<S>] : void) |