@adriansteffan/reactive 0.0.27 → 0.0.29
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/dist/{mod-CbGhKi2f.js → mod-BY9yD0Pz.js} +5920 -5725
- package/dist/mod.d.ts +21 -8
- package/dist/reactive.es.js +18 -16
- package/dist/reactive.umd.js +33 -33
- package/dist/style.css +1 -1
- package/dist/{web-DOFokKz7.js → web-Crj4uOnK.js} +1 -1
- package/dist/{web-BFGLx41c.js → web-D4yetCSC.js} +1 -1
- package/package.json +1 -1
- package/src/components/canvasblock.tsx +10 -3
- package/src/components/experimentrunner.tsx +28 -13
- package/src/components/storeui.tsx +327 -0
- package/src/utils/array.ts +49 -15
- package/src/utils/bytecode.ts +175 -144
package/src/utils/array.ts
CHANGED
|
@@ -3,46 +3,52 @@ declare global {
|
|
|
3
3
|
/**
|
|
4
4
|
* Returns random elements from the array
|
|
5
5
|
* @param n Number of random elements to return (defaults to 1)
|
|
6
|
-
* @returns Array of randomly selected elements
|
|
7
6
|
*/
|
|
8
7
|
sample(n?: number): Array<T>;
|
|
9
|
-
|
|
8
|
+
|
|
10
9
|
/**
|
|
11
10
|
* Shuffles array elements using Fisher-Yates algorithm
|
|
12
|
-
* @returns A new shuffled array
|
|
13
11
|
*/
|
|
14
12
|
shuffle(): Array<T>;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Applies a function to the array
|
|
16
|
+
* @param fn Function to apply to the array
|
|
17
|
+
*/
|
|
18
|
+
pipe<U>(fn: (arr: Array<T>) => U): U;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Splits array into chunks
|
|
22
|
+
* @param n Number of chunks to create
|
|
23
|
+
*/
|
|
24
|
+
chunk(n: number): Array<Array<T>>;
|
|
15
25
|
}
|
|
16
26
|
}
|
|
17
27
|
|
|
18
28
|
/**
|
|
19
29
|
* Returns random elements from an array
|
|
20
|
-
* @param array The source array
|
|
21
|
-
* @param n Number of random elements to return (defaults to 1)
|
|
22
|
-
* @returns Array of randomly selected elements
|
|
23
30
|
*/
|
|
24
31
|
export function sample<T>(array: T[], n: number = 1): T[] {
|
|
25
32
|
const result: T[] = [];
|
|
26
|
-
|
|
33
|
+
|
|
27
34
|
if (array.length === 0) {
|
|
28
35
|
return result;
|
|
29
36
|
}
|
|
30
|
-
|
|
37
|
+
|
|
31
38
|
for (let i = 0; i < n; i++) {
|
|
32
39
|
const randomIndex = Math.floor(Math.random() * array.length);
|
|
33
40
|
result.push(array[randomIndex]);
|
|
34
41
|
}
|
|
35
|
-
|
|
42
|
+
|
|
36
43
|
return result;
|
|
37
44
|
}
|
|
38
45
|
|
|
39
46
|
/**
|
|
40
47
|
* Shuffles array elements using Fisher-Yates algorithm
|
|
41
|
-
* @param array The source array
|
|
42
|
-
* @returns A new shuffled array
|
|
43
48
|
*/
|
|
44
49
|
export function shuffle<T>(array: T[]): T[] {
|
|
45
|
-
const result = [...array];
|
|
50
|
+
const result = [...array];
|
|
51
|
+
|
|
46
52
|
for (let i = result.length - 1; i >= 0; i--) {
|
|
47
53
|
const j = Math.floor(Math.random() * (i + 1));
|
|
48
54
|
[result[i], result[j]] = [result[j], result[i]];
|
|
@@ -50,6 +56,23 @@ export function shuffle<T>(array: T[]): T[] {
|
|
|
50
56
|
return result;
|
|
51
57
|
}
|
|
52
58
|
|
|
59
|
+
/**
|
|
60
|
+
* Applies a function to an array
|
|
61
|
+
*/
|
|
62
|
+
export function pipe<T, U>(array: T[], fn: (arr: T[]) => U): U {
|
|
63
|
+
return fn(array);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Splits array into chunks
|
|
68
|
+
*/
|
|
69
|
+
export function chunk<T>(array: T[], n: number): T[][] {
|
|
70
|
+
const size = Math.ceil(array.length / n);
|
|
71
|
+
return Array.from({ length: Math.ceil(array.length / size) }, (_, i) =>
|
|
72
|
+
array.slice(i * size, i * size + size),
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
53
76
|
/**
|
|
54
77
|
* Registers array methods on the Array prototype.
|
|
55
78
|
* Call this function once to make array methods available globally.
|
|
@@ -59,7 +82,6 @@ export function shuffle<T>(array: T[]): T[] {
|
|
|
59
82
|
* import { registerArrayExtensions } from '@adriansteffan/reactive/array';
|
|
60
83
|
* registerArrayExtensions();
|
|
61
84
|
*
|
|
62
|
-
* // Now you can use the methods
|
|
63
85
|
* const myArray = [1, 2, 3, 4, 5];
|
|
64
86
|
* myArray.shuffle();
|
|
65
87
|
* ```
|
|
@@ -70,10 +92,22 @@ export function registerArrayExtensions(): void {
|
|
|
70
92
|
return sample(this, n);
|
|
71
93
|
};
|
|
72
94
|
}
|
|
73
|
-
|
|
95
|
+
|
|
74
96
|
if (typeof Array.prototype.shuffle !== 'function') {
|
|
75
97
|
Array.prototype.shuffle = function <T>(this: T[]): T[] {
|
|
76
|
-
return shuffle(this);
|
|
98
|
+
return shuffle(this);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
if (typeof Array.prototype.pipe !== 'function') {
|
|
103
|
+
Array.prototype.pipe = function <T, U>(this: T[], fn: (arr: T[]) => U): U {
|
|
104
|
+
return pipe(this, fn);
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
if (typeof Array.prototype.chunk !== 'function') {
|
|
109
|
+
Array.prototype.chunk = function <T>(this: T[], n: number): T[][] {
|
|
110
|
+
return chunk(this, n);
|
|
77
111
|
};
|
|
78
112
|
}
|
|
79
113
|
}
|
package/src/utils/bytecode.ts
CHANGED
|
@@ -1,178 +1,209 @@
|
|
|
1
1
|
export type Store = Record<string, any>;
|
|
2
2
|
|
|
3
3
|
type BaseTrialData = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
index: number;
|
|
5
|
+
trialNumber: number;
|
|
6
|
+
start: number;
|
|
7
|
+
end: number;
|
|
8
|
+
duration: number;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export type ComponentResultData = BaseTrialData & {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
type: string;
|
|
13
|
+
name: string;
|
|
14
|
+
responseData?: any;
|
|
15
|
+
metadata?: Record<string, any>;
|
|
15
16
|
};
|
|
16
17
|
|
|
17
18
|
export type CanvasResultData = BaseTrialData & {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
metadata?: Record<string, any>;
|
|
20
|
+
key: string | null;
|
|
21
|
+
reactionTime: number | null;
|
|
21
22
|
};
|
|
22
23
|
|
|
23
24
|
export type RefinedTrialData = ComponentResultData | CanvasResultData;
|
|
24
25
|
|
|
25
|
-
export interface MarkerItem {
|
|
26
|
+
export interface MarkerItem {
|
|
27
|
+
type: 'MARKER';
|
|
28
|
+
id: string;
|
|
29
|
+
}
|
|
26
30
|
|
|
27
31
|
export type ConditionalFunction = (data?: RefinedTrialData[], store?: Store) => boolean;
|
|
28
32
|
|
|
29
33
|
export type StoreUpdateFunction = (data?: RefinedTrialData[], store?: Store) => Record<string, any>;
|
|
30
34
|
|
|
31
|
-
export interface IfGotoItem {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
35
|
+
export interface IfGotoItem {
|
|
36
|
+
type: 'IF_GOTO';
|
|
37
|
+
cond: ConditionalFunction;
|
|
38
|
+
marker: string;
|
|
39
|
+
}
|
|
40
|
+
export interface UpdateStoreItem {
|
|
41
|
+
type: 'UPDATE_STORE';
|
|
42
|
+
fun: StoreUpdateFunction;
|
|
43
|
+
}
|
|
44
|
+
export interface IfBlockItem {
|
|
45
|
+
type: 'IF_BLOCK';
|
|
46
|
+
cond: ConditionalFunction;
|
|
47
|
+
timeline: TimelineItem[];
|
|
48
|
+
}
|
|
49
|
+
export interface WhileBlockItem {
|
|
50
|
+
type: 'WHILE_BLOCK';
|
|
51
|
+
cond: ConditionalFunction;
|
|
52
|
+
timeline: TimelineItem[];
|
|
53
|
+
}
|
|
54
|
+
export type ControlFlowItem =
|
|
55
|
+
| MarkerItem
|
|
56
|
+
| IfGotoItem
|
|
57
|
+
| UpdateStoreItem
|
|
58
|
+
| IfBlockItem
|
|
59
|
+
| WhileBlockItem;
|
|
36
60
|
export type TimelineItem = ControlFlowItem | any;
|
|
37
61
|
|
|
38
|
-
export interface ExecuteContentInstruction {
|
|
62
|
+
export interface ExecuteContentInstruction {
|
|
63
|
+
type: 'ExecuteContent';
|
|
64
|
+
content: any;
|
|
65
|
+
}
|
|
39
66
|
export interface IfGotoInstruction {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
67
|
+
type: 'IfGoto';
|
|
68
|
+
cond: (store: Store, data: RefinedTrialData[]) => boolean;
|
|
69
|
+
marker: string;
|
|
43
70
|
}
|
|
44
71
|
export interface UpdateStoreInstruction {
|
|
45
|
-
|
|
46
|
-
|
|
72
|
+
type: 'UpdateStore';
|
|
73
|
+
fun: (store: Store, data: RefinedTrialData[]) => Store;
|
|
47
74
|
}
|
|
48
|
-
export type UnifiedBytecodeInstruction =
|
|
75
|
+
export type UnifiedBytecodeInstruction =
|
|
76
|
+
| ExecuteContentInstruction
|
|
77
|
+
| IfGotoInstruction
|
|
78
|
+
| UpdateStoreInstruction;
|
|
49
79
|
|
|
50
80
|
function prefixUserMarkers(marker: string): string {
|
|
51
|
-
|
|
81
|
+
return `user_${marker}`;
|
|
52
82
|
}
|
|
53
83
|
|
|
54
|
-
export function compileTimeline(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
instructions: UnifiedBytecodeInstruction[];
|
|
58
|
-
markers: { [key: string]: number };
|
|
84
|
+
export function compileTimeline(timeline: TimelineItem[]): {
|
|
85
|
+
instructions: UnifiedBytecodeInstruction[];
|
|
86
|
+
markers: { [key: string]: number };
|
|
59
87
|
} {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
};
|
|
86
|
-
} else {
|
|
87
|
-
console.warn("Store update function did not return an object. Store remains unchanged.", { data: runtimeData, store: runtimeStore });
|
|
88
|
-
return runtimeStore;
|
|
89
|
-
}
|
|
88
|
+
const instructions: UnifiedBytecodeInstruction[] = [];
|
|
89
|
+
const markers: { [key: string]: number } = {};
|
|
90
|
+
let uniqueMarkerCounterForThisRun = 0;
|
|
91
|
+
|
|
92
|
+
function getUniqueMarker(prefix: string): string {
|
|
93
|
+
return `${prefix}_auto_${uniqueMarkerCounterForThisRun++}`;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
function adaptCondition(
|
|
97
|
+
userCondition: ConditionalFunction,
|
|
98
|
+
): (store: Store, data: RefinedTrialData[]) => boolean {
|
|
99
|
+
return (runtimeStore: Store, runtimeData: RefinedTrialData[]): boolean => {
|
|
100
|
+
return userCondition(runtimeData, runtimeStore);
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
function adaptUpdate(
|
|
105
|
+
userUpdateFunction: StoreUpdateFunction,
|
|
106
|
+
): (store: Store, data: RefinedTrialData[]) => Store {
|
|
107
|
+
return (runtimeStore: Store, runtimeData: RefinedTrialData[]): Store => {
|
|
108
|
+
const updates = userUpdateFunction(runtimeData, runtimeStore);
|
|
109
|
+
if (typeof updates === 'object' && updates !== null) {
|
|
110
|
+
return {
|
|
111
|
+
...runtimeStore,
|
|
112
|
+
...updates,
|
|
90
113
|
};
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
}
|
|
114
|
+
} else {
|
|
115
|
+
console.warn('Store update function did not return an object. Store remains unchanged.', {
|
|
116
|
+
data: runtimeData,
|
|
117
|
+
store: runtimeStore,
|
|
118
|
+
});
|
|
119
|
+
return runtimeStore;
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
function processTimeline(items: TimelineItem[]) {
|
|
125
|
+
for (const item of items) {
|
|
126
|
+
let isControlFlow = false;
|
|
127
|
+
|
|
128
|
+
if (typeof item === 'object' && item !== null && 'type' in item) {
|
|
129
|
+
const itemType = item.type;
|
|
130
|
+
|
|
131
|
+
switch (itemType) {
|
|
132
|
+
case 'MARKER': {
|
|
133
|
+
const markerItem = item as MarkerItem;
|
|
134
|
+
markers[prefixUserMarkers(markerItem.id)] = instructions.length;
|
|
135
|
+
isControlFlow = true;
|
|
136
|
+
break;
|
|
137
|
+
}
|
|
138
|
+
case 'IF_GOTO': {
|
|
139
|
+
const ifGotoItem = item as IfGotoItem;
|
|
140
|
+
const runtimeConditionFunc = adaptCondition(ifGotoItem.cond);
|
|
141
|
+
instructions.push({
|
|
142
|
+
type: 'IfGoto',
|
|
143
|
+
cond: runtimeConditionFunc,
|
|
144
|
+
marker: prefixUserMarkers(ifGotoItem.marker),
|
|
145
|
+
});
|
|
146
|
+
isControlFlow = true;
|
|
147
|
+
break;
|
|
148
|
+
}
|
|
149
|
+
case 'UPDATE_STORE': {
|
|
150
|
+
const updateStoreItem = item as UpdateStoreItem;
|
|
151
|
+
const runtimeUpdateFunc = adaptUpdate(updateStoreItem.fun);
|
|
152
|
+
instructions.push({
|
|
153
|
+
type: 'UpdateStore',
|
|
154
|
+
fun: runtimeUpdateFunc,
|
|
155
|
+
});
|
|
156
|
+
isControlFlow = true;
|
|
157
|
+
break;
|
|
158
|
+
}
|
|
159
|
+
case 'IF_BLOCK': {
|
|
160
|
+
const ifBlockItem = item as IfBlockItem;
|
|
161
|
+
const endMarker = getUniqueMarker('if_end');
|
|
162
|
+
const runtimeConditionFunc = adaptCondition(ifBlockItem.cond);
|
|
163
|
+
instructions.push({
|
|
164
|
+
type: 'IfGoto',
|
|
165
|
+
cond: (store, data) => !runtimeConditionFunc(store, data),
|
|
166
|
+
marker: endMarker,
|
|
167
|
+
});
|
|
168
|
+
processTimeline(ifBlockItem.timeline);
|
|
169
|
+
markers[endMarker] = instructions.length;
|
|
170
|
+
isControlFlow = true;
|
|
171
|
+
break;
|
|
172
|
+
}
|
|
173
|
+
case 'WHILE_BLOCK': {
|
|
174
|
+
const whileBlockItem = item as WhileBlockItem;
|
|
175
|
+
const startMarker = getUniqueMarker('while_start');
|
|
176
|
+
const endMarker = getUniqueMarker('while_end');
|
|
177
|
+
const runtimeConditionFunc = adaptCondition(whileBlockItem.cond);
|
|
178
|
+
markers[startMarker] = instructions.length;
|
|
179
|
+
instructions.push({
|
|
180
|
+
type: 'IfGoto',
|
|
181
|
+
cond: (store, data) => !runtimeConditionFunc(store, data),
|
|
182
|
+
marker: endMarker,
|
|
183
|
+
});
|
|
184
|
+
processTimeline(whileBlockItem.timeline);
|
|
185
|
+
instructions.push({
|
|
186
|
+
type: 'IfGoto',
|
|
187
|
+
cond: () => true,
|
|
188
|
+
marker: startMarker,
|
|
189
|
+
});
|
|
190
|
+
markers[endMarker] = instructions.length;
|
|
191
|
+
isControlFlow = true;
|
|
192
|
+
break;
|
|
193
|
+
}
|
|
172
194
|
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
if (!isControlFlow) {
|
|
198
|
+
instructions.push({
|
|
199
|
+
type: 'ExecuteContent',
|
|
200
|
+
content: item,
|
|
201
|
+
});
|
|
202
|
+
}
|
|
173
203
|
}
|
|
204
|
+
}
|
|
174
205
|
|
|
175
|
-
|
|
206
|
+
processTimeline(timeline);
|
|
176
207
|
|
|
177
|
-
|
|
178
|
-
}
|
|
208
|
+
return { instructions, markers };
|
|
209
|
+
}
|