+5
-16
README.md
+5
-16
README.md
···
1
1
# Wonka
2
2
3
-
A fast push & pull stream library for Reason, loosely following the [callbag spec](https://github.com/callbag/callbag)
3
+
A tiny but capable push & pull stream library for TypeScript and Flow,
4
+
loosely following the [callbag spec](https://github.com/callbag/callbag)
4
5
5
-
> **NOTE:** The `master` branch currently points to the v4 Release Candidate version!
6
-
> If you're looking for v3, [please check the `v3.2.2`](https://github.com/kitten/wonka/tree/v3.2.2)
6
+
> **NOTE:** The currently released version v6 is only compatible now with TypeScript, Flow, and JavaScript.
7
+
> If you're looking for Reason/OCaml/esy/dune support, please check v5, and if you're looking for the legacy version
8
+
> of this library check v4.
7
9
8
10
<br>
9
11
<a href="https://npmjs.com/package/wonka">
···
33
35
the [callbag spec](https://github.com/callbag/callbag). It exposes a set of helpers to create streams,
34
36
which are sources of multiple values, which allow you to create, transform
35
37
and consume event streams or iterable sets of data.
36
-
37
-
Wonka is written in [Reason](https://reasonml.github.io/), a dialect of OCaml, and can hence be used
38
-
for native applications. It is also compiled using [BuckleScript](https://bucklescript.github.io) to plain
39
-
JavaScript and has typings for [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/).
40
-
41
-
This means that out of the box Wonka is usable in any project that use the following:
42
-
43
-
- Plain JavaScript
44
-
- TypeScript
45
-
- Flow
46
-
- Reason/OCaml with BuckleScript
47
-
- Reason/OCaml with `bs-native`
48
-
- Reason/OCaml with Dune and Esy
49
38
50
39
## [Documentation](https://wonka.kitten.sh/)
51
40
+37
-328
docs/api/operators.md
+37
-328
docs/api/operators.md
···
15
15
16
16
In combination with `interval` this can be used to group values in chunks regularly.
17
17
18
-
```reason
19
-
Wonka.interval(50)
20
-
|> Wonka.buffer(Wonka.interval(100))
21
-
|> Wonka.take(2)
22
-
|> Wonka.subscribe((. buffer) => {
23
-
Js.Array.forEach(num => print_int(num), buffer);
24
-
print_endline(";");
25
-
});
26
-
/* Prints 1 2; 2 3 to the console. */
27
-
```
28
-
29
-
``` typescript
18
+
```typescript
30
19
import { pipe, interval, buffer, take, subscribe } from 'wonka';
31
20
32
21
pipe(
33
22
interval(50),
34
23
buffer(interval(100)),
35
24
take(2),
36
-
subscribe(buffer => {
37
-
buffer.forEach(x => console.log(x));
25
+
subscribe((buffer) => {
26
+
buffer.forEach((x) => console.log(x));
38
27
console.log(';');
39
28
})
40
29
); // Prints 1 2; 2 3 to the console.
···
44
33
45
34
`combine` two sources together to a single source. The emitted value will be a combination of the two sources, with all values from the first source being emitted with the first value of the second source _before_ values of the second source are emitted.
46
35
47
-
```reason
48
-
let sourceOne = Wonka.fromArray([|1, 2, 3|]);
49
-
let sourceTwo = Wonka.fromArray([|4, 5, 6|]);
50
-
51
-
Wonka.combine(sourceOne)
52
-
|> sourceTwo
53
-
|> Wonka.subscribe((. (a, b)) => print_int(a + b));
54
-
55
-
/* Prints 56789 (1+4, 2+4, 3+4, 3+5, 3+6) to the console. */
56
-
```
57
-
58
36
```typescript
59
37
import { fromArray, pipe, combine, subscribe } from 'wonka';
60
38
···
73
51
74
52
`concat` will combine two sources together, subscribing to the next source after the previous source completes.
75
53
76
-
```reason
77
-
let sourceOne = Wonka.fromArray([|1, 2, 3|]);
78
-
let sourceTwo = Wonka.fromArray([|6, 5, 4|]);
79
-
80
-
Wonka.concat([|sourceOne, sourceTwo|])
81
-
|> Wonka.subscribe((. x) => print_int(x));
82
-
/* Prints 1 2 3 6 5 4 to the console. */
83
-
```
84
-
85
54
```typescript
86
55
import { fromArray, pipe, concat, subscribe } from 'wonka';
87
56
···
90
59
91
60
pipe(
92
61
concat([sourceOne, sourceTwo]),
93
-
subscribe(val => console.log(val))
62
+
subscribe((val) => console.log(val))
94
63
); // Prints 1 2 3 6 5 4 to the console.
95
64
```
96
65
···
101
70
102
71
It's very similar to `concat`, but instead accepts a source of sources as an input.
103
72
104
-
```reason
105
-
let sourceOne = Wonka.fromArray([|1, 2, 3|]);
106
-
let sourceTwo = Wonka.fromArray([|6, 5, 4|]);
107
-
108
-
Wonka.fromList([sourceOne, sourceTwo])
109
-
|> Wonka.concatAll
110
-
|> Wonka.subscribe((. x) => print_int(x));
111
-
/* Prints 1 2 3 6 5 4 to the console. */
112
-
```
113
-
114
73
```typescript
115
74
import { pipe, fromArray, concatAll, subscribe } from 'wonka';
116
75
···
120
79
pipe(
121
80
fromArray([sourceOne, sourceTwo]),
122
81
concatAll,
123
-
subscribe(val => console.log(val))
82
+
subscribe((val) => console.log(val))
124
83
); // Prints 1 2 3 6 5 4 to the console.
125
84
```
126
85
···
128
87
129
88
`concatMap` allows you to map values of an outer source to an inner source. The sink will not dispatch the `Pull` signal until the previous value has been emitted. This is in contrast to `mergeMap`, which will dispatch the `Pull` signal for new values even if the previous value has not yet been emitted.
130
89
131
-
```reason
132
-
let source = Wonka.fromArray([|1, 2, 3, 4, 5, 6|]);
133
-
134
-
source
135
-
|> Wonka.concatMap((. _val) =>
136
-
Wonka.delay(_val * 1000, Wonka.fromValue(_val))
137
-
)
138
-
|> Wonka.subscribe((. _val) => print_int(_val));
139
-
140
-
/* After 1s, 1 will be emitted. After an additional 2s, 2 will be emitted.
141
-
After an additional 3s, 3 will be emitted. After an additional 4s, 4 will be emitted.
142
-
After an additional 5s, 5 will be emitted. After an additional 6s, 6 will be emitted. */
143
-
```
144
-
145
90
```typescript
146
91
import { fromArray, pipe, concatMap, delay, fromValue, subscribe } from 'wonka';
147
92
···
149
94
150
95
pipe(
151
96
source,
152
-
concatMap(val => {
153
-
return pipe(
154
-
fromValue(val),
155
-
delay(val * 1000)
156
-
);
97
+
concatMap((val) => {
98
+
return pipe(fromValue(val), delay(val * 1000));
157
99
}),
158
-
subscribe(val => console.log(val))
100
+
subscribe((val) => console.log(val))
159
101
);
160
102
```
161
-
162
103
163
104
## delay
164
105
165
106
`delay` delays all emitted values of a source by the given amount of milliseconds.
166
107
167
-
> _Note:_ This operator is only available in JavaScript environments, and will be excluded
168
-
> when compiling natively.
169
-
170
-
```reason
171
-
Wonka.fromList([1, 2])
172
-
|> Wonka.delay(10)
173
-
|> Wonka.subscribe((. x) => print_int(x));
174
-
/* waits 10ms then prints 1, waits 10ms then prints 2, waits 10ms then ends */
175
-
```
176
-
177
108
```typescript
178
109
import { pipe, fromArray, delay, subscribe } from 'wonka';
179
110
···
191
122
a given amount of milliseconds. Once this threshold of silence has been reached, the
192
123
last value that has been received will be emitted.
193
124
194
-
> _Note:_ This operator is only available in JavaScript environments, and will be excluded
195
-
> when compiling natively.
196
-
197
-
```reason
198
-
let sourceA = Wonka.interval(10)
199
-
|> Wonka.take(5);
200
-
let sourceB = Wonka.fromValue(1);
201
-
202
-
Wonka.concat([|sourceA, sourceB|])
203
-
|> Wonka.debounce((. _x) => 20)
204
-
|> Wonka.subscribe((. x) => print_int(x));
205
-
/* The five values from sourceA will be omitted */
206
-
/* After these values and after 20ms `1` will be logged */
207
-
```
208
-
209
125
```typescript
210
126
import { pipe, interval, take, fromValue, concat, debounce, subscribe } from 'wonka';
211
127
···
226
142
227
143
`filter` will remove values from a source by passing them through an iteratee that returns a `bool`.
228
144
229
-
```reason
230
-
let isEven = (. n) => n mod 2 === 0;
231
-
232
-
Wonka.fromArray([|1, 2, 3, 4, 5, 6|])
233
-
|> Wonka.filter(isEven)
234
-
|> Wonka.subscribe((. x) => print_int(x));
235
-
/* Prints 246 to the console. */
236
-
```
237
-
238
145
```typescript
239
146
import { fromArray, filter, subscribe } from 'wonka';
240
147
241
-
const isEven = n => n % 2 === 0;
148
+
const isEven = (n) => n % 2 === 0;
242
149
243
150
pipe(
244
151
fromArray([1, 2, 3, 4, 5, 6]),
245
152
filter(isEven),
246
-
subscribe(val => console.log(val))
153
+
subscribe((val) => console.log(val))
247
154
);
248
155
249
156
// Prints 246 to the console.
···
253
160
254
161
`map` will transform values from a source by passing them through an iteratee that returns a new value.
255
162
256
-
```reason
257
-
let square = (. n) => n * n;
258
-
259
-
Wonka.fromArray([|1, 2, 3, 4, 5, 6|])
260
-
|> Wonka.map(square)
261
-
|> Wonka.subscribe((. x) => print_int(x));
262
-
/* Prints 1 4 9 16 25 36 to the console. */
263
-
```
264
-
265
163
```typescript
266
164
import { fromArray, pipe, map, subscribe } from 'wonka';
267
165
268
-
const square = n => n * n;
166
+
const square = (n) => n * n;
269
167
270
168
pipe(
271
169
fromArray([1, 2, 3, 4, 5, 6]),
272
170
map(square),
273
-
subscribe(val => console.log(val))
171
+
subscribe((val) => console.log(val))
274
172
);
275
173
276
174
// Prints 1 4 9 16 25 36 to the console.
···
281
179
`merge` merges an array of sources together into a single source. It subscribes
282
180
to all sources that it's passed and emits all their values on the output source.
283
181
284
-
```reason
285
-
let sourceA = Wonka.fromArray([|1, 2, 3|]);
286
-
let sourceB = Wonka.fromArray([|4, 5, 6|]);
287
-
288
-
Wonka.merge([|sourceA, sourceB|])
289
-
|> Wonka.subscribe((. x) => print_int(x));
290
-
/* Prints 1 2 3 4 5 6 to the console. */
291
-
```
292
-
293
182
```typescript
294
183
import { fromArray, pipe, merge, subscribe } from 'wonka';
295
184
···
309
198
310
199
> _Note:_ This operator is also exported as `flatten` which is just an alias for `mergeAll`
311
200
312
-
```reason
313
-
let sourceA = Wonka.fromArray([|1, 2, 3|]);
314
-
let sourceB = Wonka.fromArray([|4, 5, 6|]);
315
-
316
-
Wonka.fromList([sourceA, sourceB])
317
-
|> Wonka.mergeAll
318
-
|> Wonka.subscribe((. x) => print_int(x));
319
-
/* Prints 1 2 3 4 5 6 to the console. */
320
-
```
321
-
322
201
```typescript
323
202
import { pipe, fromArray, mergeAll, subscribe } from 'wonka';
324
203
···
328
207
pipe(
329
208
fromArray([sourceOne, sourceTwo]),
330
209
mergeAll,
331
-
subscribe(val => console.log(val))
210
+
subscribe((val) => console.log(val))
332
211
); // Prints 1 2 3 4 5 6 to the console.
333
212
```
334
213
···
341
220
Unlike `concatMap` all inner sources will be subscribed to at the same time
342
221
and all their values will be emitted on the output source as they come in.
343
222
344
-
```reason
345
-
Wonka.fromList([1, 2])
346
-
|> Wonka.mergeMap((. value) =>
347
-
Wonka.fromList([value - 1, value]))
348
-
|> Wonka.subscribe((. x) => print_int(x));
349
-
/* Prints 0 1 1 2 to the console. */
350
-
```
351
-
352
223
```typescript
353
224
import { pipe, fromArray, mergeMap, subscribe } from 'wonka';
354
225
355
226
pipe(
356
227
fromArray([1, 2]),
357
-
mergeMap(x => fromArray([x - 1, x])),
358
-
subscribe(val => console.log(val))
228
+
mergeMap((x) => fromArray([x - 1, x])),
229
+
subscribe((val) => console.log(val))
359
230
); // Prints 0 1 1 2 to the console.
360
231
```
361
232
···
363
234
364
235
Run a callback when the `End` signal has been sent to the sink by the source, whether by way of the talkback passing the `End` signal or the source being exhausted of values.
365
236
366
-
```reason
367
-
let promiseOne =
368
-
Js.Promise.make((~resolve, ~reject as _) =>
369
-
Js.Global.setTimeout(() => resolve(. "ResolveOne"), 1000) |> ignore
370
-
);
371
-
372
-
let promiseTwo =
373
-
Js.Promise.make((~resolve, ~reject as _) =>
374
-
Js.Global.setTimeout(() => resolve(. "ResolveTwo"), 2000) |> ignore
375
-
);
376
-
377
-
let sourceOne = Wonka.fromPromise(promiseOne);
378
-
let sourceTwo = Wonka.fromPromise(promiseTwo);
379
-
380
-
Wonka.concat([|sourceOne, sourceTwo|])
381
-
|> Wonka.onEnd((.) => print_endline("onEnd"))
382
-
|> Wonka.subscribe((. x) => print_endline(x));
383
-
384
-
/* Logs ResolveOne after one second, then ResolveTwo after an additional second, then onEnd immediately. */
385
-
```
386
-
387
237
```typescript
388
238
import { fromPromise, pipe, concat, onEnd, subscribe } from 'wonka';
389
239
390
-
const promiseOne = new Promise(resolve => {
240
+
const promiseOne = new Promise((resolve) => {
391
241
setTimeout(() => {
392
242
resolve('ResolveOne');
393
243
}, 1000);
394
244
});
395
-
const promiseTwo = new Promise(resolve => {
245
+
const promiseTwo = new Promise((resolve) => {
396
246
setTimeout(() => {
397
247
resolve('ResolveTwo');
398
248
}, 2000);
···
404
254
pipe(
405
255
concat([sourceOne, sourceTwo]),
406
256
onEnd(() => console.log('onEnd')),
407
-
subscribe(val => console.log(val))
257
+
subscribe((val) => console.log(val))
408
258
);
409
259
410
260
// Logs ResolveOne after one second, then ResolveTwo after an additional second, then onEnd immediately.
···
416
266
417
267
> _Note:_ This operator is also exported as `tap` which is just an alias for `onPush`
418
268
419
-
```reason
420
-
Wonka.fromArray([|1, 2, 3, 4, 5, 6|])
421
-
|> Wonka.onPush((. x) => print_string({j|Push $x|j}))
422
-
|> Wonka.subscribe((. x) => print_int(x));
423
-
/* Prints Push 1 1 Push 2 2 Push 3 3 Push 4 4 Push 5 5 Push 6 6 to the console. */
424
-
```
425
-
426
269
```typescript
427
270
import { fromArray, pipe, onPush, subscribe } from 'wonka';
428
271
429
272
pipe(
430
273
fromArray([1, 2, 3, 4, 5, 6]),
431
-
onPush(val => console.log(`Push ${val}`)),
432
-
subscribe(val => console.log(val))
274
+
onPush((val) => console.log(`Push ${val}`)),
275
+
subscribe((val) => console.log(val))
433
276
); // Prints Push 1 1 Push 2 2 Push 3 3 Push 4 4 Push 5 5 Push 6 6 to the console.
434
277
```
435
278
···
437
280
438
281
Run a callback when the `Start` signal is sent to the sink by the source.
439
282
440
-
```reason
441
-
let promise =
442
-
Js.Promise.make((~resolve, ~reject as _) =>
443
-
Js.Global.setTimeout(() => resolve(. "Resolve"), 1000) |> ignore
444
-
);
445
-
446
-
Wonka.fromPromise(promise)
447
-
|> Wonka.onStart((.) => print_endline("onStart"))
448
-
|> Wonka.subscribe((. _val) => print_endline(_val));
449
-
/* Logs onStart to the console, pauses for one second to allow the timeout to finish,
450
-
then logs "Resolve" to the console. */
451
-
```
452
-
453
283
```typescript
454
284
import { pipe, onStart, fromPromise, subscribe } from 'wonka';
455
285
456
-
const promise = new Promise(resolve => {
286
+
const promise = new Promise((resolve) => {
457
287
setTimeout(() => {
458
288
resolve('Resolve');
459
289
}, 1000);
···
462
292
pipe(
463
293
fromPromise(promise),
464
294
onStart(() => console.log('onStart')),
465
-
subscribe(val => console.log(val))
295
+
subscribe((val) => console.log(val))
466
296
);
467
297
468
298
// Logs onStart to the console, pauses for one second to allow the timeout to finish,
···
477
307
In combination with `interval` it can be used to get values from a noisy source
478
308
more regularly.
479
309
480
-
```reason
481
-
Wonka.interval(10)
482
-
|> Wonka.sample(Wonka.interval(100))
483
-
|> Wonka.take(2)
484
-
|> Wonka.subscribe((. x) => print_int(x));
485
-
/* Prints 10 20 to the console. */
486
-
```
487
-
488
-
``` typescript
310
+
```typescript
489
311
import { pipe, interval, sample, take, subscribe } from 'wonka';
490
312
491
313
pipe(
492
314
interval(10),
493
315
sample(interval(100)),
494
316
take(2),
495
-
subscribe(x => console.log(x))
317
+
subscribe((x) => console.log(x))
496
318
); // Prints 10 20 to the console.
497
319
```
498
320
···
500
322
501
323
Accumulate emitted values of a source in a accumulator, similar to JavaScript `reduce`.
502
324
503
-
```reason
504
-
Wonka.fromArray([|1, 2, 3, 4, 5, 6|])
505
-
|> Wonka.scan((. acc, x) => acc + x, 0)
506
-
|> Wonka.subscribe((. x) => print_int(x));
507
-
/* Prints 1 3 6 10 15 21 to the console. */
508
-
```
509
-
510
325
```typescript
511
326
import { fromArray, pipe, scan, subscribe } from 'wonka';
512
327
513
328
pipe(
514
329
fromArray([1, 2, 3, 4, 5, 6]),
515
330
scan((acc, val) => acc + val, 0),
516
-
subscribe(val => console.log(val))
331
+
subscribe((val) => console.log(val))
517
332
);
518
333
519
334
// Prints 1 3 6 10 15 21 to the console.
···
536
351
This is especially useful if you introduce side-effects to your sources,
537
352
for instance with `onStart`.
538
353
539
-
```reason
540
-
let source = Wonka.never
541
-
|> Wonka.onStart((.) => print_endline("start"))
542
-
|> Wonka.share;
543
-
544
-
/* Without share this would print "start" twice: */
545
-
Wonka.publish(source);
546
-
Wonka.publish(source);
547
-
```
548
-
549
354
```typescript
550
355
import { pipe, never, onStart, share, publish } from 'wonka';
551
356
···
563
368
## skip
564
369
565
370
`skip` the specified number of emissions from the source.
566
-
567
-
```reason
568
-
Wonka.fromArray([|1, 2, 3, 4, 5, 6|])
569
-
|> Wonka.skip(2)
570
-
|> Wonka.subscribe((. x) => print_int(x));
571
-
/* Prints 3 4 5 6 to the console, since the first two emissions from the source were skipped.
572
-
```
573
371
574
372
```typescript
575
373
import { fromArray, pipe, skip, subscribe } from 'wonka';
···
577
375
pipe(
578
376
fromArray([1, 2, 3, 4, 5, 6]),
579
377
skip(2),
580
-
subscribe(val => console.log(val))
378
+
subscribe((val) => console.log(val))
581
379
);
582
380
```
583
381
···
585
383
586
384
Skip emissions from an outer source until an inner source (notifier) emits.
587
385
588
-
```reason
589
-
let source = Wonka.interval(100);
590
-
let notifier = Wonka.interval(500);
591
-
592
-
source
593
-
|> Wonka.skipUntil(notifier)
594
-
|> Wonka.subscribe((. x) => print_int(x));
595
-
596
-
/* Skips all values emitted by source (0, 1, 2, 3) until notifier emits at 500ms.
597
-
Then logs 4 5 6 7 8 9 10... to the console every 500ms. */
598
-
```
599
-
600
386
```typescript
601
387
import { interval, pipe, skipUntil, subscribe } from 'wonka';
602
388
···
606
392
pipe(
607
393
source,
608
394
skipUntil(notifier),
609
-
subscribe(val => console.log(val))
395
+
subscribe((val) => console.log(val))
610
396
);
611
397
612
398
// Skips all values emitted by source (0, 1, 2, 3) until notifier emits at 500ms.
···
617
403
618
404
Skip values emitted from the source while they return `true` for the provided predicate function.
619
405
620
-
```reason
621
-
let source = Wonka.fromArray([|1, 2, 3, 4, 5, 6|]);
622
-
623
-
source
624
-
|> Wonka.skipWhile((. _val) => _val < 5)
625
-
|> Wonka.subscribe((. _val) => print_int(_val));
626
-
627
-
/* Prints 5 6 to the console, as 1 2 3 4 all return true for the predicate function. */
628
-
```
629
-
630
406
```typescript
631
407
import { fromArray, pipe, skipWhile, subscribe } from 'wonka';
632
408
633
409
pipe(
634
410
fromArray([1, 2, 3, 4, 5, 6]),
635
-
skipWhile(val => val < 5),
636
-
subscribe(val => console.log(val))
411
+
skipWhile((val) => val < 5),
412
+
subscribe((val) => console.log(val))
637
413
);
638
414
639
415
// Prints 5 6 to the console, as 1 2 3 4 all return true for the predicate function.
···
650
426
This is similar to `concatMap` but instead of waiting for the last inner source to complete
651
427
before emitting values from the next, `switchMap` just cancels the previous inner source.
652
428
653
-
```reason
654
-
Wonka.interval(50)
655
-
|> Wonka.switchMap((. _value) =>
656
-
Wonka.interval(40))
657
-
|> Wonka.take(3)
658
-
|> Wonka.subscribe((. x) => print_int(x));
659
-
/* Prints 1 2 3 to the console. */
660
-
/* The inner interval is cancelled after its first value every time */
661
-
```
662
-
663
429
```typescript
664
430
import { pipe, interval, switchMap, take, subscribe } from 'wonka';
665
431
666
432
pipe(
667
433
interval(50),
668
434
// The inner interval is cancelled after its first value every time
669
-
switchMap(value => interval(40)),
435
+
switchMap((value) => interval(40)),
670
436
take(3),
671
-
subscribe(x => console.log(x))
437
+
subscribe((x) => console.log(x))
672
438
); // Prints 1 2 3 to the console
673
439
```
674
440
···
680
446
681
447
It's very similar to `switchMap`, but instead accepts a source of sources.
682
448
683
-
```reason
684
-
Wonka.interval(50)
685
-
|> Wonka.map((. _value) =>
686
-
Wonka.interval(40))
687
-
|> Wonka.switchAll
688
-
|> Wonka.take(3)
689
-
|> Wonka.subscribe((. x) => print_int(x));
690
-
/* Prints 1 2 3 to the console. */
691
-
```
692
-
693
449
```typescript
694
450
import { pipe, interval, map, switchAll, take, subscribe } from 'wonka';
695
451
···
698
454
map(() => interval(40)),
699
455
switchAll,
700
456
take(3),
701
-
subscribe(x => console.log(x))
457
+
subscribe((x) => console.log(x))
702
458
); // Prints 1 2 3 to the console
703
459
```
704
460
···
710
466
711
467
`take` only a specified number of emissions from the source before completing. `take` is the opposite of `skip`.
712
468
713
-
```reason
714
-
Wonka.fromArray([|1, 2, 3, 4, 5, 6|])
715
-
|> Wonka.take(3)
716
-
|> Wonka.subscribe((. x) => print_int(x));
717
-
/* Prints 1 2 3 to the console. */
718
-
```
719
-
720
469
```typescript
721
470
import { fromArray, pipe, take, subscribe } from 'wonka';
722
471
723
472
pipe(
724
473
fromArray([1, 2, 3, 4, 5, 6]),
725
474
take(3),
726
-
subscribe(val => console.log(val))
475
+
subscribe((val) => console.log(val))
727
476
);
728
477
729
478
// Prints 1 2 3 to the console.
···
733
482
734
483
`takeLast` will take only the last n emissions from the source.
735
484
736
-
```reason
737
-
Wonka.fromArray([|1, 2, 3, 4, 5, 6|]);
738
-
|> Wonka.takeLast(3)
739
-
|> Wonka.subscribe((. x) => print_int(x));
740
-
/* Prints 4 5 6 to the console. */
741
-
```
742
-
743
485
```typescript
744
486
import { fromArray, pipe, takeLast, subscribe } from 'wonka';
745
487
746
488
pipe(
747
489
fromArray([1, 2, 3, 4, 5, 6]),
748
490
takeLast(3),
749
-
subscribe(val => console.log(val))
491
+
subscribe((val) => console.log(val))
750
492
);
751
493
752
494
// Prints 4 5 6 to the console.
···
756
498
757
499
Take emissions from an outer source until an inner source (notifier) emits.
758
500
759
-
```reason
760
-
let source = Wonka.interval(100);
761
-
let notifier = Wonka.interval(500);
762
-
763
-
source
764
-
|> Wonka.takeUntil(notifier)
765
-
|> Wonka.subscribe((. x) => print_int(x));
766
-
767
-
/* Pauses 100ms, prints 0, pauses 100ms, prints 1, pauses 100ms, prints 2, pauses 100ms,
768
-
prints 3, pauses 100, then completes (notifier emits). */
769
-
```
770
-
771
501
```typescript
772
502
import { interval, pipe, takeUntil, subscribe } from 'wonka';
773
503
···
777
507
pipe(
778
508
source,
779
509
takeUntil(notifier),
780
-
subscribe(val => console.log(val))
510
+
subscribe((val) => console.log(val))
781
511
);
782
512
783
513
// Pauses 100ms, prints 0, pauses 100ms, prints 1, pauses 100ms, prints 2, pauses 100ms,
···
788
518
789
519
Take emissions from the stream while they return `true` for the provided predicate function. If the first emission does not return `true`, no values will be `Push`ed to the sink.
790
520
791
-
```reason
792
-
let source = Wonka.fromArray([|1, 2, 3, 4, 5, 6|]);
793
-
794
-
source
795
-
|> Wonka.takeWhile((. x) => x < 5)
796
-
|> Wonka.subscribe((. x) => print_int(x));
797
-
798
-
/* Prints 1 2 3 4 to the console. */
799
-
```
800
-
801
521
```typescript
802
522
import { pipe, fromArray, takeWhile, subscribe } from 'wonka';
803
523
···
805
525
806
526
pipe(
807
527
source,
808
-
takeWhile(val => val < 5),
809
-
subscribe(val => console.log(val))
528
+
takeWhile((val) => val < 5),
529
+
subscribe((val) => console.log(val))
810
530
);
811
531
812
532
// Prints 1 2 3 4 to the console.
···
820
540
821
541
This is very similar to `debounce` but instead of waiting for leading time before a
822
542
value it waits for trailing time after a value.
823
-
824
-
> _Note:_ This operator is only available in JavaScript environments, and will be excluded
825
-
> when compiling natively.
826
-
827
-
```reason
828
-
Wonka.interval(10)
829
-
|> Wonka.throttle((. _x) => 50)
830
-
|> Wonka.take(2)
831
-
|> Wonka.subscribe((. x) => print_int(x));
832
-
/* Outputs 0 6 to the console. */
833
-
```
834
543
835
544
```typescript
836
545
import { pipe, interval, throttle, take, subscribe } from 'wonka';
+7
-93
docs/api/sinks.md
+7
-93
docs/api/sinks.md
···
9
9
10
10
`subscribe` accepts a callback function to execute when data is received from the source, in addition to the source itself.
11
11
12
-
```reason
13
-
Wonka.fromArray([|1, 2, 3|])
14
-
|> Wonka.subscribe((. x) => print_int(x));
15
-
/* Prints 123 to the console. */
16
-
```
17
-
18
12
```typescript
19
13
import { pipe, fromArray, subscribe } from 'wonka';
20
14
···
27
21
`subscribe` also returns a "subscription" type, which can be used to
28
22
unsubscribe from the source. This allows you to cancel a source and stop receiving
29
23
new incoming values.
30
-
31
-
```reason
32
-
let subscription = source
33
-
|> Wonka.subscribe((. x) => print_int(x));
34
-
35
-
subscription.unsubscribe();
36
-
```
37
24
38
25
```typescript
39
26
import { pipe, subscribe } from 'wonka';
···
51
38
`forEach` works the same as `subscribe` but doesn't return a subscription.
52
39
It will just call the passed callback for each incoming value.
53
40
54
-
```reason
55
-
Wonka.fromArray([|1, 2, 3|])
56
-
|> Wonka.forEach((. x) => print_int(x));
57
-
/* Returns unit; Prints 123 to the console. */
58
-
```
59
-
60
41
```typescript
61
42
import { pipe, fromArray, forEach } from 'wonka';
62
43
···
75
56
In this example we're using [`onPush`](./operators.md#onpush) to pass a callback to react to incoming
76
57
values instead.
77
58
78
-
```reason
79
-
Wonka.fromArray([|1, 2, 3|])
80
-
|> Wonka.onPush((. x) => print_int(x))
81
-
|> Wonka.publish;
82
-
/* Prints 123 to the console. */
83
-
```
84
-
85
59
```typescript
86
60
import { pipe, fromArray, onPush, publish } from 'wonka';
87
61
···
104
78
> _Note:_ If you're using this sink, make sure that your input source streams
105
79
> the values you're collecting partly or fully synchronously.
106
80
107
-
```reason
108
-
Wonka.fromArray([|1, 2, 3|])
109
-
|> Wonka.map((. x) => x * 2)
110
-
|> Wonka.toArray
111
-
/* Returns [|2, 4, 6|] */
112
-
```
113
-
114
81
```typescript
115
82
import { pipe, fromArray, map, toArray } from 'wonka';
116
83
117
84
pipe(
118
85
fromArray([1, 2, 3]),
119
-
map(x => x * 2),
86
+
map((x) => x * 2),
120
87
toArray
121
88
); // Returns [2, 4, 6]
122
89
```
···
125
92
126
93
`toPromise` returns a promise, which resolves on the last value of a source.
127
94
128
-
> _Note:_ This source is only available in JavaScript environments, and will be excluded
129
-
> when compiling natively.
130
-
131
-
```reason
132
-
Wonka.fromArray([|1, 2, 3|])
133
-
|> Wonka.toPromise
134
-
|> Js.Promise.then_(x => {
135
-
print_int(x);
136
-
Js.Promise.resolve(())
137
-
})
138
-
/* Prints 3 to the console. */
139
-
```
140
-
141
95
```typescript
142
96
import { pipe, fromArray, toPromise } from 'wonka';
143
97
144
-
const promise = pipe(
145
-
fromArray([1, 2, 3]),
146
-
toPromise,
147
-
);
98
+
const promise = pipe(fromArray([1, 2, 3]), toPromise);
148
99
149
-
promise.then(x => console.log(x));
100
+
promise.then((x) => console.log(x));
150
101
// Prints 3 to the console.
151
102
```
152
103
···
160
111
161
112
As per the specification, the Observable is annotated using `Symbol.observable`.
162
113
163
-
> _Note:_ This sink is only available in JavaScript environments, and will be excluded
164
-
> when compiling natively.
165
-
166
-
```reason
167
-
let observable = Wonka.fromArray([|1, 2, 3|])
168
-
|> Wonka.toObservable;
169
-
170
-
observable##subscribe([@bs] {
171
-
as _;
172
-
pub next = value => print_int(value);
173
-
pub complete = () => ();
174
-
pub error = _ => ();
175
-
}); /* Prints 1 2 3 to the console. */
176
-
```
177
-
178
114
```typescript
179
115
import { pipe, fromArray, toObservable } from 'wonka';
180
116
181
-
const observable = pipe(
182
-
fromArray([1, 2, 3]),
183
-
toObservable,
184
-
);
117
+
const observable = pipe(fromArray([1, 2, 3]), toObservable);
185
118
186
119
observable.subscribe({
187
-
next: value => console.log(value),
120
+
next: (value) => console.log(value),
188
121
complete: () => {},
189
122
error: () => {},
190
123
}); // Prints 1 2 3 to the console.
···
199
132
minimally, Callbags map to Wonka's sources very closely and `toCallbag` only creates a thin
200
133
wrapper which is mostly concerned with converting between the type signatures.
201
134
202
-
> _Note:_ This sink is only available in JavaScript environments, and will be excluded
203
-
> when compiling natively.
204
-
205
-
```reason
206
-
/* This example uses the callbag-iterate package for illustrative purposes */
207
-
[@bs.module] external callbagIterate:
208
-
(. ('a => unit)) => (. Wonka.callbagT('a)) => unit = "callbag-iterate";
209
-
210
-
let callbag = Wonka.fromArray([|1, 2, 3|])
211
-
|> Wonka.toCallbag;
212
-
213
-
callbagIterate(. value => {
214
-
print_int(value);
215
-
})(. callbag); /* Prints 1 2 3 to the console. */
216
-
```
217
-
218
135
```typescript
219
136
import { pipe, fromArray, toCallbag } from 'wonka';
220
137
221
138
// This example uses the callbag-iterate package for illustrative purposes
222
139
import callbagIterate from 'callbag-iterate';
223
140
224
-
const callbag = pipe(
225
-
fromArray([1, 2, 3]),
226
-
toCallbag,
227
-
);
141
+
const callbag = pipe(fromArray([1, 2, 3]), toCallbag);
228
142
229
-
callbagIterate(value => console.log(value))(callbag);
143
+
callbagIterate((value) => console.log(value))(callbag);
230
144
// Prints 1 2 3 to the console.
231
145
```
+13
-150
docs/api/sources.md
+13
-150
docs/api/sources.md
···
9
9
10
10
`fromArray` transforms an array into a source, emitting each item synchronously.
11
11
12
-
```reason
13
-
Wonka.fromArray([|1, 2, 3|]);
14
-
```
15
-
16
12
```typescript
17
13
import { fromArray } from 'wonka';
18
14
fromArray([1, 2, 3]);
19
15
```
20
16
21
-
## fromList
22
-
23
-
`fromList` transforms a list into a source, emitting each item synchronously.
24
-
25
-
> _Note:_ This operator is only useful in Reason / OCaml where lists are a builtin
26
-
> data structure.
27
-
28
-
This is otherwise functionally the same as `fromArray`.
29
-
30
-
```reason
31
-
Wonka.fromList([1, 2, 3]);
32
-
```
33
-
34
17
## fromValue
35
18
36
19
`fromValue` takes a single value and creates a source that emits the value and
37
20
completes immediately afterwards.
38
21
39
-
```reason
40
-
Wonka.fromValue("a value");
22
+
```typescript
23
+
import { fromValue } from 'wonka';
24
+
fromValue(1);
41
25
```
42
26
43
27
## make
···
59
43
60
44
In this example we create a source that waits for a promise to resolve and emits
61
45
values from the array of that promise.
62
-
63
-
```reason
64
-
let waitForArray = () => Js.Promise.resolve([|1, 2, 3|]);
65
-
66
-
let source = Wonka.make((. observer) => {
67
-
let (next, complete) = observer;
68
-
let cancelled = ref(false);
69
-
let promise = waitForArray();
70
-
71
-
Js.Promise.then_(arr => {
72
-
if (!cancelled^) {
73
-
Array.iter(next, arr);
74
-
complete();
75
-
}
76
-
}, promise);
77
-
78
-
() => cancelled := true;
79
-
});
80
-
```
81
46
82
47
```typescript
83
48
import { make } from 'wonka';
84
49
85
50
const waitForArray = () => Promise.resolve([1, 2, 3]);
86
51
87
-
const source = make(observer => {
52
+
const source = make((observer) => {
88
53
const { next, complete } = observer;
89
54
let cancelled = false;
90
55
91
-
waitForArray().then(arr => {
56
+
waitForArray().then((arr) => {
92
57
if (!cancelled) {
93
58
arr.forEach(next);
94
59
complete();
···
111
76
around but also have access to the observer functions to emit events away from
112
77
the source itself.
113
78
114
-
```reason
115
-
let subject = Wonka.makeSubject();
116
-
let { source, next, complete } = subject;
117
-
118
-
/* This will push the values synchronously to any subscribers of source */
119
-
next(1);
120
-
next(2);
121
-
next(complete);
122
-
```
123
-
124
79
```typescript
125
-
import { makeSubject } from 'wonka'
80
+
import { makeSubject } from 'wonka';
126
81
const subject = makeSubject();
127
82
const { source, next, complete } = subject;
128
83
···
137
92
`fromDomEvent` will turn a DOM event into a Wonka source, emitting the DOM events
138
93
on the source whenever the DOM emits them on the passed element.
139
94
140
-
> _Note:_ This source is only available in JavaScript environments, and will be excluded
141
-
> when compiling natively.
142
-
143
-
```reason
144
-
open Webapi.Dom;
145
-
open Document;
146
-
147
-
let element = getElementById("root", document)->Belt.Option.getExn;
148
-
149
-
Wonka.fromDomEvent(element, "click")
150
-
|> Wonka.subscribe((. click) => Js.log(click));
151
-
```
152
-
153
95
```typescript
154
96
import { pipe, fromDomEvent, subscribe } from 'wonka';
155
97
···
157
99
158
100
pipe(
159
101
fromDomEvent(element, 'click'),
160
-
subscribe(e => console.log(e))
102
+
subscribe((e) => console.log(e))
161
103
);
162
104
```
163
105
···
166
108
`fromPromise` transforms a promise into a source, emitting the promisified value on
167
109
the source once it resolves.
168
110
169
-
> _Note:_ This source is only available in JavaScript environments, and will be excluded
170
-
> when compiling natively.
171
-
172
-
```reason
173
-
let promise = Js.Promise.make(1); /* Just an example promise */
174
-
175
-
Wonka.fromPromise(promise)
176
-
|> Wonka.subscribe((. x) => Js.log(x));
177
-
/* Prints 1 to the console. */
178
-
```
179
-
180
111
```typescript
181
112
import { pipe, fromPromise, subscribe } from 'wonka';
182
113
···
184
115
185
116
pipe(
186
117
fromPromise(promise),
187
-
subscribe(e => console.log(e))
118
+
subscribe((e) => console.log(e))
188
119
); // Prints 1 to the console.
189
120
```
190
121
···
193
124
`fromObservable` transforms a [spec-compliant JS Observable](https://github.com/tc39/proposal-observable) into a source.
194
125
The resulting source will behave exactly the same as the Observable that it was
195
126
passed, so it will start, end, and push values identically.
196
-
197
-
> _Note:_ This source is only available in JavaScript environments, and will be excluded
198
-
> when compiling natively.
199
127
200
128
```typescript
201
129
import { pipe, fromObservable, subscribe } from 'wonka';
···
207
135
208
136
pipe(
209
137
fromObservable(observable),
210
-
subscribe(e => console.log(e))
138
+
subscribe((e) => console.log(e))
211
139
); // Prints 1 2 3 to the console
212
140
```
213
141
214
-
If you're using Reason in a JavaScript environment and you're interested in this
215
-
operator, you may be using a library to create or get Observables.
216
-
217
-
Some libraries don't expose Observables with the same BuckleScript type signature
218
-
that Wonka uses to type them. So while Wonka's `observableT` type is fairly
219
-
lenient it may not work for you.
220
-
221
-
```reason
222
-
type observableT('a) = {.
223
-
[@bs.meth] "subscribe": observerT('a) => subscriptionT
224
-
};
225
-
```
226
-
227
-
To work around this you can create a function that casts your observable type
228
-
to Wonka's `observableT`.
229
-
230
-
```reason
231
-
type yourObservableType('a);
232
-
external asObservable: yourObservableType('a) => Wonka.observableT('a) = "%identity";
233
-
```
234
-
235
-
This snippet would create an `asObservable` function, which can type-cast your
236
-
Observable type to `Wonka.observableT` and compiles away completely.
237
-
238
142
## fromCallbag
239
143
240
144
`fromCallbag` transforms a [spec-compliant JS Callbag](https://github.com/callbag/callbag) into a source.
···
243
147
minimally, Callbags map to Wonka's sources very closely and the `fromCallbag` wrapper
244
148
is very thin and mostly concerned with converting between the type signatures.
245
149
246
-
> _Note:_ This source is only available in JavaScript environments, and will be excluded
247
-
> when compiling natively.
248
-
249
-
```reason
250
-
/* This example uses the callbag-from-iter package for illustrative purposes */
251
-
[@bs.module] external callbagFromArray:
252
-
array('a) => Wonka.callbagT('a) = "callbag-from-iter";
253
-
254
-
let callbag = callbagFromArray([|1, 2, 3|]);
255
-
256
-
Wonka.fromCallbag(callbag)
257
-
|> Wonka.subscribe((. x) => Js.log(x));
258
-
/* Prints 1 2 3 to the console. */
259
-
```
260
-
261
150
```typescript
262
151
import { pipe, fromCallbag, subscribe } from 'wonka';
263
152
···
268
157
269
158
pipe(
270
159
fromCallbag(callbag),
271
-
subscribe(e => console.log(e))
160
+
subscribe((e) => console.log(e))
272
161
); // Prints 1 2 3 to the console.
273
162
```
274
163
···
277
166
`interval` creates a source that emits values after the given amount of milliseconds.
278
167
Internally it uses `setInterval` to accomplish this.
279
168
280
-
> _Note:_ This source is only available in JavaScript environments, and will be excluded
281
-
> when compiling natively.
282
-
283
-
```reason
284
-
Wonka.interval(50)
285
-
|> Wonka.subscribe((. x) => Js.log(x));
286
-
/* Prints 0 1 2... to the console. */
287
-
/* The incrementing number is logged every 50ms */
288
-
```
289
-
290
169
```typescript
291
170
import { pipe, interval, subscribe } from 'wonka';
292
171
293
172
pipe(
294
173
interval(50),
295
-
subscribe(e => console.log(e))
174
+
subscribe((e) => console.log(e))
296
175
); // Prints 0 1 2... to the console.
297
176
// The incrementing number is logged every 50ms
298
177
```
···
302
181
This is a source that doesn't emit any values when subscribed to and
303
182
immediately completes.
304
183
305
-
```reason
306
-
Wonka.empty
307
-
|> Wonka.forEach((. value) => {
308
-
/* This will never be called */
309
-
()
310
-
});
311
-
```
312
-
313
184
```typescript
314
185
import { pipe, empty, forEach } from 'wonka';
315
186
316
187
pipe(
317
188
empty,
318
-
forEach(value => {
189
+
forEach((value) => {
319
190
/* This will never be called */
320
191
})
321
192
);
···
326
197
This is source is similar to [`empty`](#empty).
327
198
It doesn't emit any values but also never completes.
328
199
329
-
```reason
330
-
Wonka.never
331
-
|> Wonka.forEach((. value) => {
332
-
/* This will never be called */
333
-
()
334
-
});
335
-
```
336
-
337
200
```typescript
338
201
import { pipe, never, forEach } from 'wonka';
339
202
340
203
pipe(
341
204
never,
342
-
forEach(value => {
205
+
forEach((value) => {
343
206
/* This will never be called */
344
207
})
345
208
);
+27
-27
docs/basics/architecture.md
+27
-27
docs/basics/architecture.md
···
22
22
Because a sink has a start, incoming values, and an end, there are three
23
23
signals that a sink can receive: `Start`, `Push`, and `End`.
24
24
25
-
``` reason
26
-
type signalT('a) =
27
-
| Start
28
-
| Push('a)
29
-
| End;
25
+
```typescript
26
+
type Start = { tag: 0 }; // & [TalkbackFn]
27
+
type Push<T> = { tag: 1 } & [T];
28
+
type End = 0;
29
+
30
+
type Signal<T> = Start | Push<T> | End;
30
31
31
-
type sinkT('a) = (. signalT('a)) => unit;
32
+
type Sink<T> = (signal: Signal<T>) => void;
32
33
```
33
34
34
35
As shown, the sink is just a function accepting a signal as its argument.
35
36
36
37
When the stream starts then the sink is called with `Start`,
37
-
Then for every incoming, new value it's called with `Push('a)`,
38
+
Then for every incoming, new value it's called with `Push<T>`,
38
39
and when the stream ends it's finally called with `End`.
39
40
40
41
Since we want a source to send these values to the sink, the source is
41
42
also just a function and it accepts a sink as its argument.
42
43
43
-
``` reason
44
-
type sourceT('a) = sinkT('a) => unit;
44
+
```typescript
45
+
type Source<T> = (sink: Sink<T>) => void;
45
46
```
46
47
47
48
This is completely sufficient to represent simple "push" streams, where
···
55
56
56
57
The type signature of an operator with no other arguments is thus:
57
58
58
-
``` reason
59
-
type operatorT('a, 'b) = sourceT('a) => sourceT('b);
59
+
```typescript
60
+
type Operator<In, Out> = (source: Source<In>) => Source<Out>;
60
61
/* which is the same as: */
61
-
type operatorT('a, 'b) = (sourceT('a), sinkT('b)) => unit;
62
+
type Operator<In, Out> = (source: Source<In>) => (sink: Sink<Out>) => void;
62
63
```
63
64
64
65
## Adding Callbacks
···
76
77
In Wonka, a sink's `Start` signal also carries a callback that is used to communicate
77
78
back to the source, making these "talkback signals" flow from the bottom to the top.
78
79
79
-
``` reason
80
-
type talkbackT =
81
-
| Pull
82
-
| Close;
80
+
```typescript
81
+
const enum TalkbackKind {
82
+
Pull = 0,
83
+
Close = 1,
84
+
}
83
85
84
-
type signalT('a) =
85
-
| Start((. talkbackT) => unit)
86
-
| Push('a)
87
-
| End;
86
+
type TalkbackFn = (signal: TalkbackKind) => void;
87
+
type Start = { tag: 0 } & [TalkbackFn];
88
88
```
89
89
90
-
This is like the previous `signalT('a)` definition, but the `Start` signal has the
90
+
This is like the previous `Signal<T>` definition, but the `Start` signal has the
91
91
callback definition now. The callback accepts one of two signals: `Pull` or `Close`.
92
92
93
93
`Close` is a signal that will cancel the stream. It tells the source to stop sending
···
117
117
In Wonka there's a separate type for subjects however, since this reduces the
118
118
complexity of its streams a lot:
119
119
120
-
``` reason
121
-
type subjectT('a) = {
122
-
source: sourceT('a),
123
-
next: 'a => unit,
124
-
complete: unit => unit,
125
-
};
120
+
```reason
121
+
interface Subject<T> {
122
+
next(value: T): void;
123
+
complete(): void;
124
+
source: Source<T>;
125
+
}
126
126
```
127
127
128
128
Hence in Wonka a subject is simply a wrapper around a source and a `next` and `complete`
+6
-15
docs/index.md
+6
-15
docs/index.md
···
21
21
22
22
It also comes with many operators that users from [RxJS](https://github.com/ReactiveX/rxjs) will be used to.
23
23
24
-
## Compatibility
24
+
## Reason Support
25
25
26
-
Wonka is written in [Reason](https://reasonml.github.io/), a dialect of OCaml, and can hence be used
27
-
for native applications. It is also compiled using [BuckleScript](https://bucklescript.github.io) to plain
28
-
JavaScript and has typings for [TypeScript](https://www.typescriptlang.org/) and [Flow](https://flow.org/).
26
+
Wonka used to be written in [Reason](https://reasonml.github.io/),, a dialect of OCaml, and was usable
27
+
for native development and compileable with [BuckleScript](https://bucklescript.github.io).
28
+
Out of the box it supported usage with BuckleScript, `bs-native`, Dune, and Esy.
29
29
30
-
This means that out of the box Wonka is usable in any project that use the following:
31
-
32
-
- Plain JavaScript
33
-
- TypeScript
34
-
- Flow
35
-
- Reason/OCaml with BuckleScript
36
-
- Reason/OCaml with `bs-native`
37
-
- Reason/OCaml with Dune and Esy
38
-
39
-
In summary, Wonka provides a consistent interface in and works across
40
-
TypeScript/Flow/Reason/OCaml environments with full type safety.
30
+
If you're looking for the legacy version that supported this, you may want to install v4 or v5 rather
31
+
than v6 onwards, which converted the project to TypeScript.
41
32
42
33
## About the docs
43
34
+17
docs/migration.md
+17
docs/migration.md
···
6
6
This page lists breaking changes and migration guides for
7
7
various major releases of Wonka.
8
8
9
+
## v6.0.0
10
+
11
+
In `v6.0.0` of Wonka, we've migrated fully to TypeScript.
12
+
If you're using this project with Reason or OCaml before, we're sorry for
13
+
the inconvenience. However, v4 and v5-rc will remain usable for these
14
+
platforms and languages.
15
+
16
+
The internal API and data structures of Wonka haven't changed in `v6.0.0`
17
+
compared to the prior releases and are based on `v4.0.14`. This means that
18
+
from a TypeScript, Flow, and JS perspective, `v6.0.0` is backwards compatible
19
+
and continues to function as before.
20
+
21
+
However, the `fromList` API has been removed so far, and we reserve ourselves
22
+
room to make more breaking changes were behaviour before was broken.
23
+
24
+
We're also dropping IE11 support and are now bundling against an ES2015 target.
25
+
9
26
## v4.0.0
10
27
11
28
In `v4.0.0` of Wonka, we've migrated to BuckleScript v7 and
-30
gatsby/theme.css
-30
gatsby/theme.css
···
1
-
@font-face {
2
-
font-family: 'phantom-sans';
3
-
src: url("https://phantomsans.kitten.sh/PhantomSans05VAR.woff2") format("woff2-variations"),
4
-
url("https://phantomsans.kitten.sh/PhantomSans05VAR.ttf") format("truetype-variations"),
5
-
url("https://phantomsans.kitten.sh/PhantomSans-Regular.woff2") format("woff2"),
6
-
url("https://phantomsans.kitten.sh/PhantomSans-Regular.ttf") format("truetype");
7
-
font-weight: 1 999;
8
-
font-display: swap;
9
-
font-style: normal;
10
-
}
11
-
12
-
@font-face {
13
-
font-family: 'space-mono';
14
-
font-style: italic;
15
-
font-weight: 400;
16
-
font-display: swap;
17
-
src: local('Space Mono Italic'),
18
-
local('SpaceMono-Italic'),
19
-
url(https://fonts.gstatic.com/s/spacemono/v4/i7dNIFZifjKcF5UAWdDRYERMR3K_MQacbw.woff2) format('woff2');
20
-
}
21
-
22
-
@font-face {
23
-
font-family: 'space-mono';
24
-
font-style: normal;
25
-
font-weight: 400;
26
-
font-display: swap;
27
-
src: local('Space Mono'),
28
-
local('SpaceMono-Regular'),
29
-
url(https://fonts.gstatic.com/s/spacemono/v4/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format('woff2');
30
-
}
-50
gatsby/theme.js
-50
gatsby/theme.js
···
1
-
import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
2
-
import './theme.css';
3
-
4
-
const systemFonts = [
5
-
'-apple-system',
6
-
'BlinkMacSystemFont',
7
-
'Segoe UI',
8
-
'Roboto',
9
-
'Helvetica Neue',
10
-
'Arial',
11
-
'Noto Sans',
12
-
'sans-serif',
13
-
'Apple Color Emoji',
14
-
'Segoe UI Emoji',
15
-
'Segoe UI Symbol',
16
-
'Noto Color Emoji',
17
-
];
18
-
19
-
export const fonts = {
20
-
header: ['phantom-sans', ...systemFonts],
21
-
code: ['space-mono', 'monospace'],
22
-
body: systemFonts,
23
-
};
24
-
25
-
export const colors = {
26
-
bg: '#ffffff',
27
-
bgPassive: '#f0f0f2',
28
-
bgActive: '#fcfafe',
29
-
fg: '#36313d',
30
-
fgHeading: '#000000',
31
-
fgPassive: '#78757a',
32
-
fgActive: '#f5735f',
33
-
};
34
-
35
-
export const prismTheme = nightOwlLight;
36
-
export const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 96];
37
-
export const fontWeights = ['300', '400', '500', '700', '800'];
38
-
export const letterSpacings = ['normal', '0.01em', '0.05em', '0.1em'];
39
-
export const borderWidths = ['1px', '0.1rem', '0.25rem'];
40
-
export const space = [0, 4, 8, 16, 32, 64];
41
-
export const sizes = [0, 64, 260, 430, 540, 650, 870, 980, 1400];
42
-
export const breakpoints = ['55em', '70em'];
43
-
export const radii = [4, 8, 16];
44
-
export const zIndices = [0, 1, 2, 3];
45
-
46
-
export const borders = [
47
-
`${borderWidths[0]} solid ${colors.bgPassive}`,
48
-
`${borderWidths[1]} solid ${colors.bgPassive}`,
49
-
`${borderWidths[2]} solid ${colors.bgPassive}`,
50
-
];
-15
gatsby/typography.js
-15
gatsby/typography.js
···
1
-
import Typography from 'typography';
2
-
import * as theme from './theme';
3
-
4
-
const typography = new Typography({
5
-
includeNormalize: false,
6
-
baseFontSize: '18px',
7
-
baseLineHeight: 1.5,
8
-
scaleRatio: 46 / 18,
9
-
headerFontFamily: theme.fonts.header,
10
-
headerWeight: '500',
11
-
bodyFontFamily: theme.fonts.body,
12
-
bodyWeight: '400',
13
-
});
14
-
15
-
export default typography;