dothtml-interfaces 0.4.3 → 0.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/i-dot.d.ts +14 -14
- package/src/i-reactive.d.ts +9 -9
- package/src/index.d.ts +1 -1
- package/src/styles/css-types.d.ts +3 -3
- package/src/styles/i-css-prop.d.ts +2 -2
- package/src/styles/mapped-types/angle-prop.d.ts +2 -2
- package/src/styles/mapped-types/color-props.d.ts +3 -3
- package/src/styles/mapped-types/length-prop.d.ts +3 -3
package/package.json
CHANGED
package/src/i-dot.d.ts
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
import IDotComponent from "./i-dot-component";
|
|
3
3
|
import IDotCss from "./styles/i-dot-css";
|
|
4
4
|
import IEventBus from "./i-event-bus";
|
|
5
|
-
import {
|
|
5
|
+
import {IReactive, IBinding, IWatcher} from "./i-reactive";
|
|
6
6
|
import IDotcssProp from "./styles/i-css-prop";
|
|
7
7
|
|
|
8
8
|
type DotContentPrimitive = string | number | boolean;
|
|
9
9
|
type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IDotComponent | IDotDocument//typeof DotDocument;
|
|
10
|
-
export type DotContent = DotContentBasic | Array<DotContent> |
|
|
10
|
+
export type DotContent = DotContentBasic | Array<DotContent> | IReactive;//|(()=>DotContent);
|
|
11
11
|
|
|
12
|
-
type AttrVal<T = string | number | boolean> = T |
|
|
12
|
+
type AttrVal<T = string | number | boolean> = T | IReactive;
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Global interface containing elements.
|
|
@@ -25,7 +25,7 @@ export interface IDotDocument {
|
|
|
25
25
|
/**
|
|
26
26
|
* 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.
|
|
27
27
|
*/
|
|
28
|
-
when(condition:
|
|
28
|
+
when(condition: IReactive | boolean, DotContent): IDotConditionalDocument;
|
|
29
29
|
|
|
30
30
|
// Main functions.
|
|
31
31
|
// TODO: please make this into a test case.
|
|
@@ -46,11 +46,11 @@ export interface IDotDocument {
|
|
|
46
46
|
/**
|
|
47
47
|
* Creates a generic HTML node that can render a string, HTML nodes, or dotHTML content.
|
|
48
48
|
*/
|
|
49
|
-
html(content: string | number | boolean |
|
|
49
|
+
html(content: string | number | boolean | IReactive): IDotDocument;
|
|
50
50
|
/**
|
|
51
51
|
* Creates a text node that will render as a string, rather than being parsed as markup.
|
|
52
52
|
*/
|
|
53
|
-
text(content: string | number | boolean |
|
|
53
|
+
text(content: string | number | boolean | IReactive): IDotDocument;
|
|
54
54
|
/**
|
|
55
55
|
* Mounts a component.
|
|
56
56
|
* TODO: add second arg.
|
|
@@ -66,11 +66,11 @@ export interface IDotDocument {
|
|
|
66
66
|
iterate(n: number, callback: (i: number) => DotContent): IDotDocument;
|
|
67
67
|
each<T>(a: Array<T> | { [key: string | number]: T }, callback: (x: T, i: number, k: string | number) => DotContent): IDotDocument;
|
|
68
68
|
each<T>(a:
|
|
69
|
-
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
|
73
|
-
, callback: (x: T, i:
|
|
69
|
+
IWatcher<Array<T>>
|
|
70
|
+
|IWatcher<Record<string|number, T>>
|
|
71
|
+
|IBinding<any, Array<T>>
|
|
72
|
+
|IBinding<any, IWatcher<Record<string|number, T>>>
|
|
73
|
+
, callback: (x: T, i: IBinding<number>, k: string | number) => DotContent): IDotDocument;
|
|
74
74
|
|
|
75
75
|
/**
|
|
76
76
|
* Removes the targeted document and everything in it.
|
|
@@ -377,7 +377,7 @@ export interface IDotCore extends IDotDocument {
|
|
|
377
377
|
bus: IEventBus;
|
|
378
378
|
window: IDotWindowBuilder;
|
|
379
379
|
|
|
380
|
-
watch<Ti =
|
|
380
|
+
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>;
|
|
381
381
|
|
|
382
382
|
// 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.
|
|
383
383
|
// component<T extends IComponent>(Base: new (...args: Parameters<T['build']>) => T): new (...args: Parameters<T['build']>) => T;
|
|
@@ -412,7 +412,7 @@ export interface IDotConditionalDocument extends IDotDocument {
|
|
|
412
412
|
* A conditional catch, analogous to else if. Can be used after a when function. Evaluates if the previous when's condition was false.
|
|
413
413
|
* Renders the specified DOT if a condition is met. Dynamic binding is possible when condition and callback are functions.
|
|
414
414
|
*/
|
|
415
|
-
otherwiseWhen(condition:
|
|
415
|
+
otherwiseWhen(condition: IReactive | boolean, callback: DotContent): IDotConditionalDocument;
|
|
416
416
|
/**
|
|
417
417
|
* 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.
|
|
418
418
|
* Renders the specified DOT if a condition is met. Dynamic binding is possible when callback is a function.
|
|
@@ -1000,7 +1000,7 @@ interface IDotTrack extends IDotGlobalAttrs {
|
|
|
1000
1000
|
|
|
1001
1001
|
interface IDotVideo extends IDotGlobalAttrs {
|
|
1002
1002
|
autoPlay?: AttrVal<boolean>;
|
|
1003
|
-
buffered?:
|
|
1003
|
+
buffered?: IReactive; // Managed by browser not user. TODO: we can possibly use events to update observable objects.
|
|
1004
1004
|
controls?: AttrVal<boolean>;
|
|
1005
1005
|
crossOrigin?: AttrVal<"anonymous"> | AttrVal<"use-credentials">;
|
|
1006
1006
|
height?: AttrVal<number>;
|
package/src/i-reactive.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
export interface
|
|
2
|
+
export interface IWatcher<T = any>{
|
|
3
3
|
// Get the value.
|
|
4
4
|
get value(): T;
|
|
5
5
|
// Set the value.
|
|
@@ -19,7 +19,7 @@ export interface IReactive<T = any>{
|
|
|
19
19
|
*/
|
|
20
20
|
subscribe(callback: Function): number;
|
|
21
21
|
|
|
22
|
-
_subscribe(boundReactive:
|
|
22
|
+
_subscribe(boundReactive: IBinding, item: any);
|
|
23
23
|
_detachBinding(id: number);
|
|
24
24
|
|
|
25
25
|
/**
|
|
@@ -28,20 +28,20 @@ export interface IReactive<T = any>{
|
|
|
28
28
|
*/
|
|
29
29
|
updateObservers(): void;
|
|
30
30
|
|
|
31
|
-
bindAs<Td = string>(transform: {
|
|
31
|
+
bindAs<Td = string>(transform: (((v: T)=>Td)|({
|
|
32
32
|
display?: (v: T)=>Td;
|
|
33
33
|
read?: (v: string)=>T;
|
|
34
|
-
}):
|
|
34
|
+
}))): IBinding<T, Td>;
|
|
35
35
|
|
|
36
|
-
bind():
|
|
36
|
+
bind(): IBinding<T>;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
export interface
|
|
39
|
+
export interface IObserver<T = any>{
|
|
40
40
|
observerUpdate(value: T, obsreverId: number): void;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
export interface
|
|
44
|
-
_source:
|
|
43
|
+
export interface IBinding<T = any, Td = T>{
|
|
44
|
+
_source: IWatcher<T>;
|
|
45
45
|
_get: ()=>Td;
|
|
46
46
|
_set: (v: string|number|boolean)=>void;
|
|
47
47
|
|
|
@@ -51,4 +51,4 @@ export interface IBoundReactive<T = any, Td = T>{
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
export type
|
|
54
|
+
export type IReactive = IBinding|IWatcher;
|
package/src/index.d.ts
CHANGED
|
@@ -8,5 +8,5 @@ export * from "./styles/i-dot-css";
|
|
|
8
8
|
|
|
9
9
|
export { default as IDotComponent, FrameworkItems } from "./i-dot-component";
|
|
10
10
|
|
|
11
|
-
export {
|
|
11
|
+
export { IWatcher, IObserver, IBinding, IReactive } from "./i-reactive";
|
|
12
12
|
export { default as IEventBus } from "./i-event-bus";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IBinding, IWatcher } from "../i-reactive";
|
|
2
2
|
|
|
3
3
|
// Global keyword values.
|
|
4
|
-
export type GKV =
|
|
4
|
+
export type GKV = IWatcher<string>|IBinding<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
|
|
5
5
|
|
|
6
6
|
export type ComplexType = string;
|
|
7
7
|
|
|
8
|
-
export type ValueOrReactive<T> = T|
|
|
8
|
+
export type ValueOrReactive<T> = T|IBinding<any, T>|IWatcher<T>;
|
|
9
9
|
|
|
10
10
|
// BASIC TYPES
|
|
11
11
|
export type Str = `"${string|""}"`|`'${string|""}'`; // TODO: wherever str is required, we could just inject quotes...
|
|
@@ -5,7 +5,7 @@ import IShadowProp from "./complex-css-types/i-shadow-prop";
|
|
|
5
5
|
import ITransformationProp from "./complex-css-types/i-transformation-prop";
|
|
6
6
|
import ColorProp from "./mapped-types/color-props";
|
|
7
7
|
import LengthProp from "./mapped-types/length-prop";
|
|
8
|
-
import {
|
|
8
|
+
import { IBinding, IWatcher } from "../i-reactive";
|
|
9
9
|
|
|
10
10
|
type BackgroundPositionShorthand2D = string;
|
|
11
11
|
type BackgroundRepeatValues2d = "no-repeat"|"repeat"|"space"|"round";
|
|
@@ -93,7 +93,7 @@ export default interface IDotcssProp extends
|
|
|
93
93
|
|
|
94
94
|
background?: GKV|string; // TODO: shorthand. Requires advanced typing.
|
|
95
95
|
backgroundAttachment?: GKV|"scroll"|"fixed"|"local"; // ✔️
|
|
96
|
-
backgroundBlendMode?: GKV|Array<
|
|
96
|
+
backgroundBlendMode?: GKV|Array<IBinding<any, string>|IWatcher<string>|"darken"|"luminocity"|"normal">; // ✔️
|
|
97
97
|
backgroundPosition?: GKV|BackgroundPositionShorthand2D;
|
|
98
98
|
backgroundRepeat?: GKV|BackgroundRepeatValues2d;
|
|
99
99
|
backgroundClip?: GKV|string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IBinding, IWatcher } from "../../i-reactive";
|
|
2
2
|
|
|
3
|
-
type V =
|
|
3
|
+
type V = IBinding<any, number|string>| IWatcher<number|string> | number | string;
|
|
4
4
|
|
|
5
5
|
type ColorUnitSuffix = ""
|
|
6
6
|
| "Rgb"
|
|
@@ -20,7 +20,7 @@ type SpecialColors = "currentcolor"|"transparent";
|
|
|
20
20
|
|
|
21
21
|
type ColorProp<Prefix extends string> = {
|
|
22
22
|
[Key in ColorUnitSuffix as `${Prefix}${Key}`]?: (
|
|
23
|
-
(Key extends "" ?
|
|
23
|
+
(Key extends "" ? IBinding<any, string> | IWatcher<string> | NamedColor | SystemColor | SpecialColors | `#${string}` | `${"rgb"|"rgba"|"hsl"|"hsla"|"hwb"|"lab"|"lch"|"oklab"|"oklch"|"color"}(${string})` : void) |
|
|
24
24
|
(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) |
|
|
25
25
|
(Key extends "Srgb" | "SrgbLinear" | "DisplayP3" | "A98Rgb" | "ProphotoRgb" | "Rec2020" | "Xyz" | "XyzD50" | "XyzD65" ? [V, V, V] : void)
|
|
26
26
|
);
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IReactive, IBinding } from "../../i-reactive";
|
|
2
2
|
import { GKV } from "../css-types";
|
|
3
3
|
// import { NumericLength } from "./css-types";
|
|
4
4
|
|
|
5
5
|
type LengthUnitSuffix = "" | "Cm" | "Ch" | "Em" | "Ex" | "In" | "Mm" | "P" | "Pc" | "Pt" | "Px" | "Rem" | "Vh" | "Vw" | "VMax" | "VMin";
|
|
6
6
|
|
|
7
|
-
type V<S> =
|
|
7
|
+
type V<S> = IBinding<any> | number | S;
|
|
8
8
|
|
|
9
|
-
type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|
|
|
9
|
+
type LengthProp<Prefix extends string, Qty extends 1|2|3|4 = 1, S extends string|IReactive = GKV> = {
|
|
10
10
|
[Key in LengthUnitSuffix as `${Prefix}${Key}`]?: (
|
|
11
11
|
(Qty extends 1 ? V<S>|[V<S>] : void) |
|
|
12
12
|
(Qty extends 2 ? [V<S>, V<S>] : void) |
|