@adriansteffan/reactive 0.0.26 → 0.0.28
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-Dqf5zajq.js → mod-CjZm1Ta9.js} +11254 -10012
- package/dist/mod.d.ts +199 -49
- package/dist/reactive.es.js +27 -15
- package/dist/reactive.umd.js +37 -39
- package/dist/style.css +1 -1
- package/dist/{web-6wmUWZwq.js → web-B_I1xy51.js} +1 -1
- package/dist/{web-CnAMKrLX.js → web-DfpITFBR.js} +1 -1
- package/package.json +7 -2
- package/src/components/canvasblock.tsx +519 -0
- package/src/components/checkdevice.tsx +158 -0
- package/src/components/enterfullscreen.tsx +114 -31
- package/src/components/exitfullscreen.tsx +98 -21
- package/src/components/experimentprovider.tsx +34 -20
- package/src/components/experimentrunner.tsx +387 -0
- package/src/components/index.ts +13 -0
- package/src/components/mobilefilepermission.tsx +12 -19
- package/src/components/plaininput.tsx +7 -8
- package/src/components/prolificending.tsx +10 -4
- package/src/components/quest.tsx +27 -31
- package/src/components/settingsscreen.tsx +770 -0
- package/src/components/text.tsx +48 -3
- package/src/components/upload.tsx +218 -47
- package/src/mod.tsx +3 -12
- package/src/types/array.d.ts +6 -0
- package/src/utils/array.ts +113 -0
- package/src/utils/bytecode.ts +178 -0
- package/src/utils/common.ts +170 -39
- package/template/.env.template +2 -1
- package/template/src/{App.tsx → Experiment.tsx} +4 -4
- package/template/src/main.tsx +4 -4
- package/template/tsconfig.json +1 -0
- package/src/components/experiment.tsx +0 -371
package/dist/mod.d.ts
CHANGED
|
@@ -1,14 +1,61 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
|
+
import { default as default_2 } from 'react';
|
|
2
3
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
3
4
|
import { ReactNode } from 'react';
|
|
4
5
|
|
|
5
6
|
export declare interface BaseComponentProps {
|
|
6
|
-
next: (data
|
|
7
|
+
next: (data?: object, actualStartTime?: number, actualStopTime?: number) => void;
|
|
7
8
|
data: TrialData[];
|
|
8
9
|
store?: Store;
|
|
9
10
|
updateStore: (mergeIn: Store) => void;
|
|
10
11
|
}
|
|
11
12
|
|
|
13
|
+
declare type BaseTrialData = {
|
|
14
|
+
index: number;
|
|
15
|
+
trialNumber: number;
|
|
16
|
+
start: number;
|
|
17
|
+
end: number;
|
|
18
|
+
duration: number;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export declare function CanvasBlock({ next, updateStore, timeline, width, height, store, styleCanvas, initCanvas, }: CanvasBlockProps): JSX_2.Element;
|
|
22
|
+
|
|
23
|
+
declare type CanvasBlockProps = {
|
|
24
|
+
timeline: TimelineItem[];
|
|
25
|
+
width?: number | string;
|
|
26
|
+
height?: number | string;
|
|
27
|
+
styleCanvas?: (ctx: CanvasRenderingContext2D, width: number, height: number) => void;
|
|
28
|
+
initCanvas?: (ctx: CanvasRenderingContext2D, width: number, height: number) => void;
|
|
29
|
+
} & BaseComponentProps;
|
|
30
|
+
|
|
31
|
+
export declare function canvasCountdown(seconds: number): {
|
|
32
|
+
draw: (ctx: CanvasRenderingContext2D, w: number, h: number) => void;
|
|
33
|
+
displayDuration: number;
|
|
34
|
+
ignoreData: boolean;
|
|
35
|
+
}[];
|
|
36
|
+
|
|
37
|
+
declare type CanvasResultData = BaseTrialData & {
|
|
38
|
+
metadata?: Record<string, any>;
|
|
39
|
+
key: string | null;
|
|
40
|
+
reactionTime: number | null;
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export declare function CheckDevice({ check, content, data, store, updateStore, next, }: {
|
|
44
|
+
check: (deviceInfo: DeviceInfo, data: any, store: any) => boolean;
|
|
45
|
+
content?: React.ReactNode;
|
|
46
|
+
} & BaseComponentProps): JSX_2.Element | null;
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Splits array into chunks
|
|
50
|
+
*/
|
|
51
|
+
export declare function chunk<T>(array: T[], n: number): T[][];
|
|
52
|
+
|
|
53
|
+
declare type ComponentResultData = BaseTrialData & {
|
|
54
|
+
type: string;
|
|
55
|
+
name: string;
|
|
56
|
+
responseData?: any;
|
|
57
|
+
};
|
|
58
|
+
|
|
12
59
|
declare type ComponentsMap = {
|
|
13
60
|
[key: string]: ComponentType<any>;
|
|
14
61
|
};
|
|
@@ -17,63 +64,86 @@ declare type ComponentsMap_2 = {
|
|
|
17
64
|
[key: string]: ComponentType<any>;
|
|
18
65
|
};
|
|
19
66
|
|
|
20
|
-
declare
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
67
|
+
declare type ConditionalFunction = (data?: RefinedTrialData[], store?: Store_2) => boolean;
|
|
68
|
+
|
|
69
|
+
declare type ControlFlowItem = MarkerItem | IfGotoItem | UpdateStoreItem | IfBlockItem | WhileBlockItem;
|
|
70
|
+
|
|
71
|
+
declare type CSVBuilder = {
|
|
72
|
+
filename?: string;
|
|
73
|
+
trials?: string[];
|
|
74
|
+
fun?: (row: Record<string, any>) => Record<string, any>;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
declare interface DeviceInfo {
|
|
78
|
+
windowWidth: number;
|
|
79
|
+
windowHeight: number;
|
|
80
|
+
screenWidth: number;
|
|
81
|
+
screenHeight: number;
|
|
82
|
+
browser: string;
|
|
83
|
+
browserVersion: string;
|
|
84
|
+
isMobile: boolean;
|
|
85
|
+
operatingSystem: string;
|
|
86
|
+
hasWebAudio: boolean;
|
|
87
|
+
hasFullscreen: boolean;
|
|
88
|
+
hasWebcam: boolean;
|
|
89
|
+
hasMicrophone: boolean;
|
|
24
90
|
}
|
|
25
91
|
|
|
26
|
-
export declare function EnterFullscreen({ content, buttonText, next, }: {
|
|
92
|
+
export declare function EnterFullscreen({ content, buttonText, next, data, updateStore, delayMs, }: {
|
|
27
93
|
prolificCode?: string;
|
|
28
|
-
content?:
|
|
94
|
+
content?: default_2.ReactNode;
|
|
29
95
|
buttonText?: string;
|
|
30
|
-
|
|
96
|
+
delayMs?: number;
|
|
97
|
+
} & BaseComponentProps): JSX_2.Element | null;
|
|
31
98
|
|
|
32
|
-
export declare function ExitFullscreen({ next }:
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
timeline: ExperimentTrial[];
|
|
36
|
-
config?: ExperimentConfig;
|
|
37
|
-
components?: ComponentsMap_2;
|
|
38
|
-
questions?: ComponentsMap_2;
|
|
39
|
-
}): JSX_2.Element;
|
|
99
|
+
export declare function ExitFullscreen({ next, delayMs, }: {
|
|
100
|
+
delayMs?: number;
|
|
101
|
+
} & BaseComponentProps): null;
|
|
40
102
|
|
|
41
103
|
export declare interface ExperimentConfig {
|
|
42
104
|
showProgressBar: boolean;
|
|
43
105
|
}
|
|
44
106
|
|
|
45
|
-
export declare function ExperimentProvider({ children }: {
|
|
107
|
+
export declare function ExperimentProvider({ children, disableSettings }: {
|
|
46
108
|
children: ReactNode;
|
|
109
|
+
disableSettings?: boolean;
|
|
47
110
|
}): JSX_2.Element;
|
|
48
111
|
|
|
49
|
-
declare
|
|
112
|
+
export declare function ExperimentRunner({ timeline, config, components, questions, }: {
|
|
113
|
+
timeline: TimelineItem[];
|
|
114
|
+
config?: ExperimentConfig;
|
|
115
|
+
components?: ComponentsMap_2;
|
|
116
|
+
questions?: ComponentsMap_2;
|
|
117
|
+
}): JSX_2.Element;
|
|
50
118
|
|
|
51
119
|
export declare interface FileUpload {
|
|
52
120
|
filename: string;
|
|
53
121
|
content: string;
|
|
54
|
-
encoding
|
|
122
|
+
encoding?: 'base64' | 'utf8';
|
|
55
123
|
}
|
|
56
124
|
|
|
57
|
-
export declare function getParam<T extends ParamType>(name: string, defaultValue: ParamValue<T
|
|
125
|
+
export declare function getParam<T extends ParamType>(name: string, defaultValue: ParamValue<T>, type?: T, description?: string): ParamValue<T>;
|
|
58
126
|
|
|
59
127
|
export declare const getPlatform: () => Platform;
|
|
60
128
|
|
|
61
|
-
declare interface
|
|
62
|
-
type: 'IF_BLOCK'
|
|
63
|
-
cond:
|
|
64
|
-
timeline:
|
|
129
|
+
declare interface IfBlockItem {
|
|
130
|
+
type: 'IF_BLOCK';
|
|
131
|
+
cond: ConditionalFunction;
|
|
132
|
+
timeline: TimelineItem[];
|
|
65
133
|
}
|
|
66
134
|
|
|
67
|
-
declare interface
|
|
68
|
-
type: 'IF_GOTO'
|
|
69
|
-
cond:
|
|
135
|
+
declare interface IfGotoItem {
|
|
136
|
+
type: 'IF_GOTO';
|
|
137
|
+
cond: ConditionalFunction;
|
|
70
138
|
marker: string;
|
|
71
139
|
}
|
|
72
140
|
|
|
73
141
|
export declare function isDesktop(): boolean;
|
|
74
142
|
|
|
75
|
-
declare
|
|
76
|
-
|
|
143
|
+
export declare function isFullscreen(): boolean;
|
|
144
|
+
|
|
145
|
+
declare interface MarkerItem {
|
|
146
|
+
type: 'MARKER';
|
|
77
147
|
id: string;
|
|
78
148
|
}
|
|
79
149
|
|
|
@@ -83,12 +153,24 @@ export declare const MicCheck: ({ next }: {
|
|
|
83
153
|
|
|
84
154
|
export declare function now(): number;
|
|
85
155
|
|
|
156
|
+
export declare class Param {
|
|
157
|
+
static getRegistry(): any[];
|
|
158
|
+
static getTimelineRepresentation(): {
|
|
159
|
+
type: string;
|
|
160
|
+
name?: string;
|
|
161
|
+
}[];
|
|
162
|
+
}
|
|
163
|
+
|
|
86
164
|
declare type ParamType = 'string' | 'number' | 'boolean' | 'array' | 'json';
|
|
87
165
|
|
|
88
|
-
declare type ParamValue<T extends ParamType> = T extends 'number' ? number
|
|
166
|
+
declare type ParamValue<T extends ParamType> = T extends 'number' ? number : T extends 'boolean' ? boolean : T extends 'array' | 'json' ? any : string;
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* Applies a function to an array
|
|
170
|
+
*/
|
|
171
|
+
export declare function pipe<T, U>(array: T[], fn: (arr: T[]) => U): U;
|
|
89
172
|
|
|
90
|
-
export declare function PlainInput({ content, buttonText, className, next, updateStore, animate, storeupdate,
|
|
91
|
-
placeholder, }: BaseComponentProps & {
|
|
173
|
+
export declare function PlainInput({ content, buttonText, className, next, updateStore, animate, storeupdate, placeholder, }: BaseComponentProps & {
|
|
92
174
|
content: React.ReactNode;
|
|
93
175
|
buttonText?: string;
|
|
94
176
|
onButtonClick?: () => void;
|
|
@@ -102,62 +184,130 @@ export declare function PlainInput({ content, buttonText, className, next, updat
|
|
|
102
184
|
|
|
103
185
|
export declare type Platform = 'desktop' | 'mobile' | 'web';
|
|
104
186
|
|
|
105
|
-
export declare function ProlificEnding({ prolificCode, }: {
|
|
187
|
+
export declare function ProlificEnding({ prolificCode, data, updateStore }: {
|
|
106
188
|
prolificCode?: string;
|
|
107
189
|
} & BaseComponentProps): JSX_2.Element;
|
|
108
190
|
|
|
109
|
-
export declare function Quest({ next, surveyJson, customQuestions }: {
|
|
191
|
+
export declare function Quest({ next, surveyJson, customQuestions, }: {
|
|
110
192
|
next: (data: object) => void;
|
|
111
193
|
surveyJson: object;
|
|
112
194
|
customQuestions?: ComponentsMap;
|
|
113
195
|
}): JSX_2.Element;
|
|
114
196
|
|
|
115
|
-
|
|
197
|
+
declare type RefinedTrialData = ComponentResultData | CanvasResultData;
|
|
198
|
+
|
|
199
|
+
/**
|
|
200
|
+
* Registers array methods on the Array prototype.
|
|
201
|
+
* Call this function once to make array methods available globally.
|
|
202
|
+
*
|
|
203
|
+
* Example:
|
|
204
|
+
* ```
|
|
205
|
+
* import { registerArrayExtensions } from '@adriansteffan/reactive/array';
|
|
206
|
+
* registerArrayExtensions();
|
|
207
|
+
*
|
|
208
|
+
* const myArray = [1, 2, 3, 4, 5];
|
|
209
|
+
* myArray.shuffle();
|
|
210
|
+
* ```
|
|
211
|
+
*/
|
|
212
|
+
export declare function registerArrayExtensions(): void;
|
|
213
|
+
|
|
214
|
+
export declare function registerComponentParams(type: string, params: {
|
|
215
|
+
name: string;
|
|
216
|
+
defaultValue: any;
|
|
217
|
+
type: string;
|
|
218
|
+
description?: string;
|
|
219
|
+
}[]): void;
|
|
220
|
+
|
|
221
|
+
export declare function registerExperimentParams(experiment: any[]): void;
|
|
116
222
|
|
|
117
|
-
export declare function
|
|
223
|
+
export declare function RequestFilePermission({ next }: BaseComponentProps): JSX_2.Element | null;
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* Returns random elements from an array
|
|
227
|
+
*/
|
|
228
|
+
export declare function sample<T>(array: T[], n?: number): T[];
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Shuffles array elements using Fisher-Yates algorithm
|
|
232
|
+
*/
|
|
233
|
+
export declare function shuffle<T>(array: T[]): T[];
|
|
118
234
|
|
|
119
235
|
export declare interface Store {
|
|
120
236
|
[key: string]: any;
|
|
121
237
|
}
|
|
122
238
|
|
|
123
|
-
declare
|
|
124
|
-
|
|
239
|
+
declare type Store_2 = Record<string, any>;
|
|
240
|
+
|
|
241
|
+
declare type StoreUpdateFunction = (data?: RefinedTrialData[], store?: Store_2) => Record<string, any>;
|
|
242
|
+
|
|
243
|
+
export declare function subsetExperimentByParam(experiment: any[]): any[];
|
|
244
|
+
|
|
245
|
+
declare function Text_2({ content, buttonText, className, next, animate, allowedKeys, }: {
|
|
246
|
+
content: default_2.ReactNode;
|
|
125
247
|
buttonText?: string;
|
|
126
248
|
onButtonClick?: () => void;
|
|
127
249
|
className?: string;
|
|
128
|
-
next: (newData: object) => void;
|
|
129
250
|
animate?: boolean;
|
|
130
|
-
|
|
251
|
+
allowedKeys?: string[] | boolean;
|
|
252
|
+
} & BaseComponentProps): JSX_2.Element;
|
|
131
253
|
export { Text_2 as Text }
|
|
132
254
|
|
|
255
|
+
declare type TimelineItem = ControlFlowItem | any;
|
|
256
|
+
|
|
133
257
|
export declare interface TrialData {
|
|
134
258
|
index: number;
|
|
135
259
|
trialNumber: number;
|
|
136
260
|
type: string;
|
|
137
261
|
name: string;
|
|
138
|
-
|
|
262
|
+
responseData: any;
|
|
139
263
|
start: number;
|
|
140
264
|
end: number;
|
|
141
265
|
duration: number;
|
|
142
266
|
}
|
|
143
267
|
|
|
144
|
-
declare interface
|
|
145
|
-
type: 'UPDATE_STORE'
|
|
146
|
-
fun:
|
|
268
|
+
declare interface UpdateStoreItem {
|
|
269
|
+
type: 'UPDATE_STORE';
|
|
270
|
+
fun: StoreUpdateFunction;
|
|
147
271
|
}
|
|
148
272
|
|
|
149
|
-
export declare function Upload({ data, next, store, sessionID, generateFiles, uploadRaw, autoUpload, androidFolderName, }: BaseComponentProps & {
|
|
273
|
+
export declare function Upload({ data, next, store, sessionID, generateFiles, sessionCSVBuilder, trialCSVBuilders, uploadRaw, autoUpload, androidFolderName, }: BaseComponentProps & {
|
|
150
274
|
sessionID?: string | null;
|
|
151
275
|
generateFiles: (sessionID: string, data: TrialData[], store?: Store) => FileUpload[];
|
|
276
|
+
sessionCSVBuilder: CSVBuilder;
|
|
277
|
+
trialCSVBuilders: CSVBuilder[];
|
|
152
278
|
uploadRaw: boolean;
|
|
153
279
|
autoUpload: boolean;
|
|
154
280
|
androidFolderName?: string;
|
|
155
281
|
}): JSX_2.Element;
|
|
156
282
|
|
|
157
|
-
declare interface
|
|
158
|
-
type: 'WHILE_BLOCK'
|
|
159
|
-
cond:
|
|
160
|
-
timeline:
|
|
283
|
+
declare interface WhileBlockItem {
|
|
284
|
+
type: 'WHILE_BLOCK';
|
|
285
|
+
cond: ConditionalFunction;
|
|
286
|
+
timeline: TimelineItem[];
|
|
161
287
|
}
|
|
162
288
|
|
|
163
289
|
export { }
|
|
290
|
+
|
|
291
|
+
declare global {
|
|
292
|
+
interface Array<T> {
|
|
293
|
+
/**
|
|
294
|
+
* Returns random elements from the array
|
|
295
|
+
* @param n Number of random elements to return (defaults to 1)
|
|
296
|
+
*/
|
|
297
|
+
sample(n?: number): Array<T>;
|
|
298
|
+
/**
|
|
299
|
+
* Shuffles array elements using Fisher-Yates algorithm
|
|
300
|
+
*/
|
|
301
|
+
shuffle(): Array<T>;
|
|
302
|
+
/**
|
|
303
|
+
* Applies a function to the array
|
|
304
|
+
* @param fn Function to apply to the array
|
|
305
|
+
*/
|
|
306
|
+
pipe<U>(fn: (arr: Array<T>) => U): U;
|
|
307
|
+
/**
|
|
308
|
+
* Splits array into chunks
|
|
309
|
+
* @param n Number of chunks to create
|
|
310
|
+
*/
|
|
311
|
+
chunk(n: number): Array<Array<T>>;
|
|
312
|
+
}
|
|
313
|
+
}
|
package/dist/reactive.es.js
CHANGED
|
@@ -1,19 +1,31 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { C as e, v as r, o as n, q as i, t, u as o, M as l, P as m, l as p, m as c, Q as u, R as P, T as x, U as E, k as g, c as f, g as k, e as C, d, i as h, n as v, p as F, r as R, h as q, f as w, s as y, a as B, j as D } from "./mod-CjZm1Ta9.js";
|
|
2
2
|
export {
|
|
3
|
-
|
|
3
|
+
e as CanvasBlock,
|
|
4
|
+
r as CheckDevice,
|
|
5
|
+
n as EnterFullscreen,
|
|
4
6
|
i as ExitFullscreen,
|
|
5
|
-
r as Experiment,
|
|
6
7
|
t as ExperimentProvider,
|
|
7
|
-
|
|
8
|
-
l as
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
c as
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
o as ExperimentRunner,
|
|
9
|
+
l as MicCheck,
|
|
10
|
+
m as Param,
|
|
11
|
+
p as PlainInput,
|
|
12
|
+
c as ProlificEnding,
|
|
13
|
+
u as Quest,
|
|
14
|
+
P as RequestFilePermission,
|
|
15
|
+
x as Text,
|
|
16
|
+
E as Upload,
|
|
17
|
+
g as canvasCountdown,
|
|
18
|
+
f as chunk,
|
|
19
|
+
k as getParam,
|
|
20
|
+
C as getPlatform,
|
|
21
|
+
d as isDesktop,
|
|
22
|
+
h as isFullscreen,
|
|
23
|
+
v as now,
|
|
24
|
+
F as pipe,
|
|
25
|
+
R as registerArrayExtensions,
|
|
26
|
+
q as registerComponentParams,
|
|
27
|
+
w as registerExperimentParams,
|
|
28
|
+
y as sample,
|
|
29
|
+
B as shuffle,
|
|
30
|
+
D as subsetExperimentByParam
|
|
19
31
|
};
|