verstak 0.23.108 → 0.23.109
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/README.md +38 -17
- package/build/dist/source/core/Interfaces.d.ts +60 -59
- package/build/dist/source/core/Interfaces.js +3 -2
- package/build/dist/source/core/Verstak.d.ts +24 -24
- package/build/dist/source/core/Verstak.js +97 -105
- package/build/dist/source/html/Blocks.d.ts +21 -21
- package/build/dist/source/html/Blocks.js +66 -66
- package/build/dist/source/html/HtmlBlocks.d.ts +175 -175
- package/build/dist/source/html/HtmlBlocks.js +173 -173
- package/build/dist/source/html/HtmlDriver.d.ts +11 -11
- package/build/dist/source/html/HtmlDriver.js +3 -2
- package/build/dist/source/html/ReactingFocuser.js +1 -1
- package/build/dist/source/html/sensors/ResizeSensor.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,23 +5,44 @@
|
|
|
5
5
|
|
|
6
6
|
# **Verstak** - Experimental Front-End Library
|
|
7
7
|
|
|
8
|
-
Verstak is
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
8
|
+
Verstak is a experimental library for rapid development of user
|
|
9
|
+
interfaces. It provides **automatic refresh** of visual elements
|
|
10
|
+
upon change of underlying data in a program.
|
|
11
|
+
|
|
12
|
+
Refresh on the screen is **fine-grained**, meaning that only
|
|
13
|
+
those visual elements are refreshed, which really depend on
|
|
14
|
+
actual data changed. It is achieved by automatic tracking of
|
|
15
|
+
all dependencies between visual elements and data they use
|
|
16
|
+
during run time. Such an approach is usually called reactive
|
|
17
|
+
programming. It frees a programmer from writing boilerplate
|
|
18
|
+
code for "pushing" changed data to visual elements.
|
|
19
|
+
|
|
20
|
+
Changing of compound data and refreshing of visual elements
|
|
21
|
+
on the screen is performed consistently, in other words in
|
|
22
|
+
"all-or-nothing" way. It means that in case of changing
|
|
23
|
+
multiple variables in a program actual visual refresh
|
|
24
|
+
happens only in case of successful change of all the variables.
|
|
25
|
+
Partial changes are "not visible" to visual elements even
|
|
26
|
+
in case of exception or cancellation of changes. Such a
|
|
27
|
+
change of compound data in "all-or-nothing" way is called
|
|
28
|
+
a transaction.
|
|
29
|
+
|
|
30
|
+
Verstak supports asynchronous programming out of the box
|
|
31
|
+
at all the layers, including transactions and visual elements
|
|
32
|
+
rendering.
|
|
33
|
+
|
|
34
|
+
Altogether it is called reactive transactional programming.
|
|
35
|
+
Transactional reactivity means that state changes are being
|
|
36
|
+
made in an isolated data snapshot and then, once atomically
|
|
37
|
+
applied, are **consistently propagated** to corresponding
|
|
38
|
+
visual components for (re)rendering. All that is done in
|
|
39
|
+
automatic, seamless, and fine-grained way, because Verstak
|
|
40
|
+
**takes full care of tracking dependencies** between visual
|
|
41
|
+
components (observers) and state objects (observables).
|
|
42
|
+
|
|
43
|
+
Example application: https://nevod.io ([source code](https://gitlab.com/nezaboodka/nevod.web.public/-/blob/master/README.md)).
|
|
44
|
+
|
|
45
|
+
Verstak is based on [Reactronic](https://github.com/nezaboodka/reactronic/blob/master/README.md#readme).
|
|
25
46
|
|
|
26
47
|
# Contribution
|
|
27
48
|
|
|
@@ -1,34 +1,19 @@
|
|
|
1
1
|
import { CollectionReader, Item, MemberOptions } from "reactronic";
|
|
2
2
|
export type Callback<T = unknown> = (native: T) => void;
|
|
3
|
-
export type Delegate<T = unknown, M = unknown, C = unknown, R = void> = (block:
|
|
4
|
-
export type AsyncDelegate<T = unknown, M = unknown> = (block:
|
|
5
|
-
export type SimpleDelegate<T = unknown> = (block:
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
render?: Delegate<T, M, C, R>;
|
|
15
|
-
finalize?: Delegate<T, M, C, R>;
|
|
16
|
-
}
|
|
17
|
-
export interface VBlockDescriptor<T = unknown, M = unknown, C = unknown, R = void> {
|
|
18
|
-
readonly key: string;
|
|
19
|
-
readonly driver: Driver<T>;
|
|
20
|
-
readonly builder: Readonly<BlockBuilder<T, M, C, R>>;
|
|
21
|
-
readonly level: number;
|
|
22
|
-
readonly owner: VBlock;
|
|
23
|
-
readonly host: VBlock;
|
|
24
|
-
readonly children: CollectionReader<VBlock>;
|
|
25
|
-
readonly item: Item<VBlock> | undefined;
|
|
26
|
-
readonly stamp: number;
|
|
27
|
-
readonly outer: VBlock;
|
|
28
|
-
readonly context: VBlockCtx | undefined;
|
|
3
|
+
export type Delegate<T = unknown, M = unknown, C = unknown, R = void> = (block: Block<T, M, C, R>, base: () => R) => R;
|
|
4
|
+
export type AsyncDelegate<T = unknown, M = unknown> = (block: Block<T, M, Promise<void>>) => Promise<void>;
|
|
5
|
+
export type SimpleDelegate<T = unknown> = (block: Block<T, any, any, any>) => void;
|
|
6
|
+
export declare enum BlockKind {
|
|
7
|
+
Band = 0,
|
|
8
|
+
Table = 1,
|
|
9
|
+
Note = 2,
|
|
10
|
+
Group = 3,
|
|
11
|
+
Row = 4,
|
|
12
|
+
Cursor = 5,
|
|
13
|
+
Native = 6
|
|
29
14
|
}
|
|
30
|
-
export interface
|
|
31
|
-
readonly descriptor:
|
|
15
|
+
export interface Block<T = unknown, M = unknown, C = unknown, R = void> {
|
|
16
|
+
readonly descriptor: BlockDescriptor<T, M, C, R>;
|
|
32
17
|
readonly native: T;
|
|
33
18
|
readonly isBand: boolean;
|
|
34
19
|
readonly isTable: boolean;
|
|
@@ -50,38 +35,62 @@ export interface VBlock<T = unknown, M = unknown, C = unknown, R = void> {
|
|
|
50
35
|
renderingPriority?: Priority;
|
|
51
36
|
isSequential: boolean;
|
|
52
37
|
readonly isInitialRendering: boolean;
|
|
53
|
-
|
|
38
|
+
useStyle(styleName: string, enabled?: boolean): void;
|
|
54
39
|
configureReactronic(options: Partial<MemberOptions>): MemberOptions;
|
|
55
40
|
}
|
|
56
|
-
export interface
|
|
41
|
+
export interface BlockDescriptor<T = unknown, M = unknown, C = unknown, R = void> {
|
|
42
|
+
readonly key: string;
|
|
43
|
+
readonly driver: Driver<T>;
|
|
44
|
+
readonly builder: Readonly<BlockBuilder<T, M, C, R>>;
|
|
45
|
+
readonly level: number;
|
|
46
|
+
readonly owner: Block;
|
|
47
|
+
readonly host: Block;
|
|
48
|
+
readonly children: CollectionReader<Block>;
|
|
49
|
+
readonly item: Item<Block> | undefined;
|
|
50
|
+
readonly stamp: number;
|
|
51
|
+
readonly outer: Block;
|
|
52
|
+
readonly context: BlockCtx | undefined;
|
|
53
|
+
}
|
|
54
|
+
export interface BlockBuilder<T = unknown, M = unknown, C = unknown, R = void> {
|
|
55
|
+
base?: BlockBuilder<T, M, C, R>;
|
|
56
|
+
key?: string;
|
|
57
|
+
mode?: Mode;
|
|
58
|
+
triggers?: unknown;
|
|
59
|
+
claim?: Delegate<T, M, C, R>;
|
|
60
|
+
create?: Delegate<T, M, C, R>;
|
|
61
|
+
initialize?: Delegate<T, M, C, R>;
|
|
62
|
+
render?: Delegate<T, M, C, R>;
|
|
63
|
+
finalize?: Delegate<T, M, C, R>;
|
|
64
|
+
}
|
|
65
|
+
export interface BlockCtx<T extends Object = Object> {
|
|
57
66
|
value: T;
|
|
58
67
|
}
|
|
59
68
|
export interface Driver<T, C = unknown> {
|
|
60
69
|
readonly name: string;
|
|
61
70
|
readonly isRow: boolean;
|
|
62
71
|
readonly preset?: SimpleDelegate<T>;
|
|
63
|
-
claim(block:
|
|
64
|
-
create(block:
|
|
72
|
+
claim(block: Block<T, unknown, C>): void;
|
|
73
|
+
create(block: Block<T, unknown, C>, b: {
|
|
65
74
|
native?: T;
|
|
66
75
|
controller?: C;
|
|
67
76
|
}): void;
|
|
68
|
-
initialize(block:
|
|
69
|
-
mount(block:
|
|
70
|
-
render(block:
|
|
71
|
-
finalize(block:
|
|
72
|
-
applyKind(block:
|
|
73
|
-
applyCoords(block:
|
|
74
|
-
applyWidthGrowth(block:
|
|
75
|
-
applyMinWidth(block:
|
|
76
|
-
applyMaxWidth(block:
|
|
77
|
-
applyHeightGrowth(block:
|
|
78
|
-
applyMinHeight(block:
|
|
79
|
-
applyMaxHeight(block:
|
|
80
|
-
applyContentAlignment(block:
|
|
81
|
-
applyBlockAlignment(block:
|
|
82
|
-
applyContentWrapping(block:
|
|
83
|
-
applyOverlayVisible(block:
|
|
84
|
-
applyStyle(block:
|
|
77
|
+
initialize(block: Block<T, unknown, C>): void;
|
|
78
|
+
mount(block: Block<T, unknown, C>): void;
|
|
79
|
+
render(block: Block<T, unknown, C>): void | Promise<void>;
|
|
80
|
+
finalize(block: Block<T, unknown, C>, isLeader: boolean): boolean;
|
|
81
|
+
applyKind(block: Block<T, any, C, any>, value: BlockKind): void;
|
|
82
|
+
applyCoords(block: Block<T, any, C, any>, value: BlockCoords | undefined): void;
|
|
83
|
+
applyWidthGrowth(block: Block<T, any, C, any>, value: number): void;
|
|
84
|
+
applyMinWidth(block: Block<T, any, C, any>, value: string): void;
|
|
85
|
+
applyMaxWidth(block: Block<T, any, C, any>, value: string): void;
|
|
86
|
+
applyHeightGrowth(block: Block<T, any, C, any>, value: number): void;
|
|
87
|
+
applyMinHeight(block: Block<T, any, C, any>, value: string): void;
|
|
88
|
+
applyMaxHeight(block: Block<T, any, C, any>, value: string): void;
|
|
89
|
+
applyContentAlignment(block: Block<T, any, C, any>, value: Align): void;
|
|
90
|
+
applyBlockAlignment(block: Block<T, any, C, any>, value: Align): void;
|
|
91
|
+
applyContentWrapping(block: Block<T, any, C, any>, value: boolean): void;
|
|
92
|
+
applyOverlayVisible(block: Block<T, any, C, any>, value: boolean | undefined): void;
|
|
93
|
+
applyStyle(block: Block<T, any, C, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
|
|
85
94
|
}
|
|
86
95
|
export interface BlockCoords {
|
|
87
96
|
x1: number;
|
|
@@ -89,14 +98,6 @@ export interface BlockCoords {
|
|
|
89
98
|
x2: number;
|
|
90
99
|
y2: number;
|
|
91
100
|
}
|
|
92
|
-
export declare enum BlockKind {
|
|
93
|
-
Band = 0,
|
|
94
|
-
Table = 1,
|
|
95
|
-
Note = 2,
|
|
96
|
-
Group = 3,
|
|
97
|
-
Row = 4,
|
|
98
|
-
Cursor = 5
|
|
99
|
-
}
|
|
100
101
|
export declare const enum Priority {
|
|
101
102
|
Realtime = 0,
|
|
102
103
|
Normal = 1,
|
|
@@ -104,8 +105,8 @@ export declare const enum Priority {
|
|
|
104
105
|
}
|
|
105
106
|
export declare enum Mode {
|
|
106
107
|
Default = 0,
|
|
107
|
-
|
|
108
|
-
|
|
108
|
+
PinpointRefresh = 1,
|
|
109
|
+
ManualMounting = 2
|
|
109
110
|
}
|
|
110
111
|
export declare enum Align {
|
|
111
112
|
Stretch = 0,
|
|
@@ -6,6 +6,7 @@ export var BlockKind;
|
|
|
6
6
|
BlockKind[BlockKind["Group"] = 3] = "Group";
|
|
7
7
|
BlockKind[BlockKind["Row"] = 4] = "Row";
|
|
8
8
|
BlockKind[BlockKind["Cursor"] = 5] = "Cursor";
|
|
9
|
+
BlockKind[BlockKind["Native"] = 6] = "Native";
|
|
9
10
|
})(BlockKind || (BlockKind = {}));
|
|
10
11
|
export var Priority;
|
|
11
12
|
(function (Priority) {
|
|
@@ -16,8 +17,8 @@ export var Priority;
|
|
|
16
17
|
export var Mode;
|
|
17
18
|
(function (Mode) {
|
|
18
19
|
Mode[Mode["Default"] = 0] = "Default";
|
|
19
|
-
Mode[Mode["
|
|
20
|
-
Mode[Mode["
|
|
20
|
+
Mode[Mode["PinpointRefresh"] = 1] = "PinpointRefresh";
|
|
21
|
+
Mode[Mode["ManualMounting"] = 2] = "ManualMounting";
|
|
21
22
|
})(Mode || (Mode = {}));
|
|
22
23
|
export var Align;
|
|
23
24
|
(function (Align) {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { LoggingOptions } from "reactronic";
|
|
2
|
-
import { BlockCoords, BlockKind, Priority, Align, BlockBuilder,
|
|
2
|
+
import { BlockCoords, BlockKind, Priority, Align, BlockBuilder, Block, Driver, SimpleDelegate } from "./Interfaces";
|
|
3
3
|
export declare class Verstak {
|
|
4
4
|
static readonly shortFrameDuration = 16;
|
|
5
5
|
static readonly longFrameDuration = 300;
|
|
6
6
|
static currentRenderingPriority: Priority;
|
|
7
7
|
static frameDuration: number;
|
|
8
|
-
static claim<T = undefined, M = unknown, C = unknown, R = void>(driver: Driver<T>, builder?: BlockBuilder<T, M, C, R>,
|
|
9
|
-
static get block():
|
|
8
|
+
static claim<T = undefined, M = unknown, C = unknown, R = void>(driver: Driver<T>, builder?: BlockBuilder<T, M, C, R>, base?: BlockBuilder<T, M, C, R>): Block<T, M, C, R>;
|
|
9
|
+
static get block(): Block;
|
|
10
10
|
static renderNestedTreesThenDo(action: (error: unknown) => void): void;
|
|
11
11
|
static getDefaultLoggingOptions(): LoggingOptions | undefined;
|
|
12
12
|
static setDefaultLoggingOptions(logging?: LoggingOptions): void;
|
|
@@ -17,33 +17,33 @@ export declare class BaseDriver<T, C = unknown> implements Driver<T, C> {
|
|
|
17
17
|
readonly preset?: SimpleDelegate<T> | undefined;
|
|
18
18
|
static readonly fragment: BaseDriver<any, unknown>;
|
|
19
19
|
constructor(name: string, isRow: boolean, preset?: SimpleDelegate<T> | undefined);
|
|
20
|
-
claim(block:
|
|
21
|
-
create(block:
|
|
20
|
+
claim(block: Block<T, unknown, C>): void;
|
|
21
|
+
create(block: Block<T, unknown, C>, b: {
|
|
22
22
|
native?: T;
|
|
23
23
|
controller?: C;
|
|
24
24
|
}): void;
|
|
25
|
-
initialize(block:
|
|
26
|
-
mount(block:
|
|
27
|
-
render(block:
|
|
28
|
-
finalize(block:
|
|
29
|
-
applyKind(block:
|
|
30
|
-
applyCoords(block:
|
|
31
|
-
applyWidthGrowth(block:
|
|
32
|
-
applyMinWidth(block:
|
|
33
|
-
applyMaxWidth(block:
|
|
34
|
-
applyHeightGrowth(block:
|
|
35
|
-
applyMinHeight(block:
|
|
36
|
-
applyMaxHeight(block:
|
|
37
|
-
applyContentAlignment(block:
|
|
38
|
-
applyBlockAlignment(block:
|
|
39
|
-
applyContentWrapping(block:
|
|
40
|
-
applyOverlayVisible(block:
|
|
41
|
-
applyStyle(block:
|
|
25
|
+
initialize(block: Block<T, unknown, C>): void;
|
|
26
|
+
mount(block: Block<T, unknown, C>): void;
|
|
27
|
+
render(block: Block<T, unknown, C>): void | Promise<void>;
|
|
28
|
+
finalize(block: Block<T, unknown, C>, isLeader: boolean): boolean;
|
|
29
|
+
applyKind(block: Block<T, any, C, any>, value: BlockKind): void;
|
|
30
|
+
applyCoords(block: Block<T, any, C, any>, value: BlockCoords | undefined): void;
|
|
31
|
+
applyWidthGrowth(block: Block<T, any, C, any>, value: number): void;
|
|
32
|
+
applyMinWidth(block: Block<T, any, C, any>, value: string): void;
|
|
33
|
+
applyMaxWidth(block: Block<T, any, C, any>, value: string): void;
|
|
34
|
+
applyHeightGrowth(block: Block<T, any, C, any>, value: number): void;
|
|
35
|
+
applyMinHeight(block: Block<T, any, C, any>, value: string): void;
|
|
36
|
+
applyMaxHeight(block: Block<T, any, C, any>, value: string): void;
|
|
37
|
+
applyContentAlignment(block: Block<T, any, C, any>, value: Align): void;
|
|
38
|
+
applyBlockAlignment(block: Block<T, any, C, any>, value: Align): void;
|
|
39
|
+
applyContentWrapping(block: Block<T, any, C, any>, value: boolean): void;
|
|
40
|
+
applyOverlayVisible(block: Block<T, any, C, any>, value: boolean | undefined): void;
|
|
41
|
+
applyStyle(block: Block<T, any, C, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
|
|
42
42
|
}
|
|
43
43
|
export declare class StaticDriver<T> extends BaseDriver<T> {
|
|
44
44
|
readonly element: T;
|
|
45
45
|
constructor(element: T, name: string, isRow: boolean, preset?: SimpleDelegate<T>);
|
|
46
|
-
create(block:
|
|
46
|
+
create(block: Block<T, unknown, unknown, void>, b: {
|
|
47
47
|
native?: T;
|
|
48
48
|
controller?: unknown;
|
|
49
49
|
}): void;
|
|
@@ -55,7 +55,7 @@ export declare class CursorCommand {
|
|
|
55
55
|
}
|
|
56
56
|
export declare class CursorCommandDriver extends BaseDriver<CursorCommand, void> {
|
|
57
57
|
constructor();
|
|
58
|
-
create(block:
|
|
58
|
+
create(block: Block<CursorCommand, unknown, void, void>, b: {
|
|
59
59
|
native?: CursorCommand;
|
|
60
60
|
controller?: void;
|
|
61
61
|
}): void;
|