The requested changes are too big and content was truncated. Show full diff
@@ -0,0 +1,78 | |||||
|
1 | import { observe, subject } from "./observable"; | |||
|
2 | import * as tap from "tap"; | |||
|
3 | ||||
|
4 | tap.test("Subject tests", t => { | |||
|
5 | ||||
|
6 | let nextEvent: (value: string) => void = () => void (0); | |||
|
7 | ||||
|
8 | const subj1 = observe(subject<string>(({ next }) => { | |||
|
9 | t.comment("Start subject"); | |||
|
10 | ||||
|
11 | nextEvent = next; | |||
|
12 | ||||
|
13 | return () => { | |||
|
14 | nextEvent = () => void (0); | |||
|
15 | t.comment("Stop subject"); | |||
|
16 | }; | |||
|
17 | })); | |||
|
18 | ||||
|
19 | const h1 = subj1.subscribe({ | |||
|
20 | next: v => t.comment(`h1 next: ${v}`) | |||
|
21 | }); | |||
|
22 | ||||
|
23 | nextEvent("first"); | |||
|
24 | ||||
|
25 | const h2 = subj1.subscribe({ | |||
|
26 | next: v => t.comment(`h2 next: ${v}`) | |||
|
27 | }); | |||
|
28 | ||||
|
29 | nextEvent("second"); | |||
|
30 | ||||
|
31 | h1.unsubscribe(); | |||
|
32 | ||||
|
33 | nextEvent("third"); | |||
|
34 | ||||
|
35 | h2.unsubscribe(); | |||
|
36 | ||||
|
37 | t.pass("Subject finished"); | |||
|
38 | t.end(); | |||
|
39 | }).catch(e => console.error(e)); | |||
|
40 | ||||
|
41 | ||||
|
42 | tap.test("Subject tests #2", t => { | |||
|
43 | ||||
|
44 | let nextEvent: (value: string) => void = () => void (0); | |||
|
45 | ||||
|
46 | const subj1 = observe(subject<string>(({ next, complete }) => { | |||
|
47 | t.comment("Start subject"); | |||
|
48 | ||||
|
49 | complete(); | |||
|
50 | nextEvent = next; | |||
|
51 | ||||
|
52 | return () => { | |||
|
53 | nextEvent = () => void (0); | |||
|
54 | t.comment("Stop subject"); | |||
|
55 | }; | |||
|
56 | })); | |||
|
57 | ||||
|
58 | const h1 = subj1.subscribe({ | |||
|
59 | next: v => t.comment(`h1 next: ${v}`) | |||
|
60 | }); | |||
|
61 | ||||
|
62 | nextEvent("first"); | |||
|
63 | ||||
|
64 | const h2 = subj1.subscribe({ | |||
|
65 | next: v => t.comment(`h2 next: ${v}`) | |||
|
66 | }); | |||
|
67 | ||||
|
68 | nextEvent("second"); | |||
|
69 | ||||
|
70 | h1.unsubscribe(); | |||
|
71 | ||||
|
72 | nextEvent("third"); | |||
|
73 | ||||
|
74 | h2.unsubscribe(); | |||
|
75 | ||||
|
76 | t.pass("Subject finished"); | |||
|
77 | t.end(); | |||
|
78 | }).catch(e => console.error(e)); No newline at end of file |
@@ -1,198 +1,306 | |||||
1 | # @implab/djx |
|
1 | # @implab/djx | |
2 |
|
2 | |||
3 | ## SYNOPSIS |
|
3 | ## SYNOPSIS | |
4 |
|
4 | |||
5 | ```tsx |
|
5 | ```tsx | |
6 | import { djbase, djclass, bind, prototype, AbstractConstructor } from "@implab/djx/declare"; |
|
6 | import { djbase, djclass, bind, prototype, AbstractConstructor } from "@implab/djx/declare"; | |
7 |
|
7 | |||
8 | import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase"; |
|
8 | import { DjxWidgetBase } from "@implab/djx/tsx/DjxWidgetBase"; | |
9 | import { createElement } from "@implab/djx/tsx"; |
|
9 | import { createElement } from "@implab/djx/tsx"; | |
10 |
|
10 | |||
11 | interface MyWidgetAttrs { |
|
11 | interface MyWidgetAttrs { | |
12 | title: string; |
|
12 | title: string; | |
13 |
|
13 | |||
14 | counter: number; |
|
14 | counter: number; | |
15 | } |
|
15 | } | |
16 |
|
16 | |||
17 | interface MyWidgetEvents { |
|
17 | interface MyWidgetEvents { | |
18 | "count-inc": Event; |
|
18 | "count-inc": Event; | |
19 |
|
19 | |||
20 | "count-dec": Event; |
|
20 | "count-dec": Event; | |
21 | } |
|
21 | } | |
22 |
|
22 | |||
23 |
|
23 | |||
24 | @djclass |
|
24 | @djclass | |
25 | export class MyWidget extends djbase( |
|
25 | export class MyWidget extends djbase( | |
26 | DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>> |
|
26 | DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>> | |
27 | ) { |
|
27 | ) { | |
28 |
|
28 | |||
29 | @bind({ node: "titleNode", type: "innerHTML" }) |
|
29 | @bind({ node: "titleNode", type: "innerHTML" }) | |
30 | title = ""; |
|
30 | title = ""; | |
31 |
|
31 | |||
32 | @prototype() |
|
32 | @prototype() | |
33 | counter = 0; |
|
33 | counter = 0; | |
34 |
|
34 | |||
35 | render() { |
|
35 | render() { | |
36 | const Frame = (props: any) => <div>{props.children}</div>; |
|
36 | const Frame = (props: any) => <div>{props.children}</div>; | |
37 | return <div |
|
37 | return <div | |
38 | className="myWidget" |
|
38 | className="myWidget" | |
39 | tabIndex={3} |
|
39 | tabIndex={3} | |
40 | style={ alignContent: "center", border: "1px solid" } |
|
40 | style={ alignContent: "center", border: "1px solid" } | |
41 | > |
|
41 | > | |
42 | <h1 data-dojo-attach-point="titleNode"></h1> |
|
42 | <h1 data-dojo-attach-point="titleNode"></h1> | |
43 | <Frame> |
|
43 | <Frame> | |
44 | <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span> |
|
44 | <span class="up-button" onclick={e => this._onIncClick(e)}>[+]</span> | |
45 | <span class="down-button" onclick={() => this._onDecClick()}>[-]</span> |
|
45 | <span class="down-button" onclick={() => this._onDecClick()}>[-]</span> | |
46 | </Frame> |
|
46 | </Frame> | |
47 | </div>; |
|
47 | </div>; | |
48 | } |
|
48 | } | |
49 |
|
49 | |||
50 | _onIncClick(e: MouseEvent) { |
|
50 | _onIncClick(e: MouseEvent) { | |
51 | this.emit("count-inc", { bubbles: false }); |
|
51 | this.emit("count-inc", { bubbles: false }); | |
52 | } |
|
52 | } | |
53 |
|
53 | |||
54 | _onDecClick() { |
|
54 | _onDecClick() { | |
55 | this.emit("count-dec", { bubbles: false }); |
|
55 | this.emit("count-dec", { bubbles: false }); | |
56 | } |
|
56 | } | |
57 | } |
|
57 | } | |
58 |
|
58 | |||
59 | ``` |
|
59 | ``` | |
60 |
|
60 | |||
61 | ## DESCRIPTION |
|
61 | ## DESCRIPTION | |
62 |
|
62 | |||
63 | This package provides you with the tools to glue your good-fellow dojo with modern |
|
63 | This package provides you with the tools to glue your good-fellow dojo with modern | |
64 | techniques of building the webapp. The core concept is to built around widgets and |
|
64 | techniques of building the webapp. The core concept is to built around widgets and | |
65 | using .tsx to write it. Here are some features: |
|
65 | using .tsx to write it. Here are some features: | |
66 |
|
66 | |||
67 | * `djbase()`, `@djaclass` - traits to declare your classes with `dojo/_base/declare` |
|
67 | * `djbase()`, `@djaclass` - traits to declare your classes with `dojo/_base/declare` | |
68 | * `@implab/djx/tsx` - traits to build the rendering of your widgets with tsx |
|
68 | * `@implab/djx/tsx` - traits to build the rendering of your widgets with tsx | |
69 | * `DjxWidgetBase` - abstract class which supports tsx markup and |
|
69 | * `DjxWidgetBase` - abstract class which supports tsx markup and | |
70 | `data-dojo-attach-*` attributes. |
|
70 | `data-dojo-attach-*` attributes. | |
71 | * `@bind(...)` - annotations provide an easy way of using standard dojo widget |
|
71 | * `@bind(...)` - annotations provide an easy way of using standard dojo widget | |
72 | attribute bindings. |
|
72 | attribute bindings. | |
73 |
|
73 | |||
74 | ### djbase, @djclass |
|
74 | ### djbase, @djclass | |
75 |
|
75 | |||
76 | These two traits provide convenient way of using `dojo/_base/declare` in Typescript |
|
76 | These two traits provide convenient way of using `dojo/_base/declare` in Typescript | |
77 | for declaring your classes. |
|
77 | for declaring your classes. | |
78 |
|
78 | |||
79 | `djbase(...constructors)` - this method accepts a list of constructors in its |
|
79 | `djbase(...constructors)` - this method accepts a list of constructors in its | |
80 | parameters and returns the **fake** base type which then can be used to derive |
|
80 | parameters and returns the **fake** base type which then can be used to derive | |
81 | your own class. This allows you to provide the Typescript with the correct |
|
81 | your own class. This allows you to provide the Typescript with the correct | |
82 | information about the base type and even use `super`!. The only caveat of |
|
82 | information about the base type and even use `super`!. The only caveat of | |
83 | this approach is that you **MUST** decorate your class with `@djclass` annotation. |
|
83 | this approach is that you **MUST** decorate your class with `@djclass` annotation. | |
84 |
|
84 | |||
85 | Consider the following example: |
|
85 | Consider the following example: | |
86 |
|
86 | |||
87 | ```ts |
|
87 | ```ts | |
88 | import { djbase, djclass } from "@implab/djx/declare"; |
|
88 | import { djbase, djclass } from "@implab/djx/declare"; | |
89 | import { FooMixin } from "./FooMixin"; |
|
89 | import { FooMixin } from "./FooMixin"; | |
90 | import { BarMixin } from "./BarMixin"; |
|
90 | import { BarMixin } from "./BarMixin"; | |
91 | import { BoxMixin } from "./BoxMixin"; |
|
91 | import { BoxMixin } from "./BoxMixin"; | |
92 |
|
92 | |||
93 | @djclass |
|
93 | @djclass | |
94 | export class Baz extends djbase(FooMixin, BarMixin, BoxMixin) { |
|
94 | export class Baz extends djbase(FooMixin, BarMixin, BoxMixin) { | |
95 | writeHello(out: string[]) { |
|
95 | writeHello(out: string[]) { | |
96 | out.push("-> Baz"); |
|
96 | out.push("-> Baz"); | |
97 |
|
97 | |||
98 | super.writeHello(out); |
|
98 | super.writeHello(out); | |
99 |
|
99 | |||
100 | out.push("<- Baz"); |
|
100 | out.push("<- Baz"); | |
101 | } |
|
101 | } | |
102 | } |
|
102 | } | |
103 |
|
103 | |||
104 | ``` |
|
104 | ``` | |
105 |
|
105 | |||
106 | All mixins are declared like the one below: |
|
106 | All mixins are declared like the one below: | |
107 |
|
107 | |||
108 | ```ts |
|
108 | ```ts | |
109 | import { djclass, djbase } from "@implab/djx/declare"; |
|
109 | import { djclass, djbase } from "@implab/djx/declare"; | |
110 |
|
110 | |||
111 | interface Super { |
|
111 | interface Super { | |
112 | writeHello(out: string[]): void; |
|
112 | writeHello(out: string[]): void; | |
113 |
|
113 | |||
114 | } |
|
114 | } | |
115 |
|
115 | |||
116 | @djclass |
|
116 | @djclass | |
117 | export class BarMixin extends djbase<Super>() { |
|
117 | export class BarMixin extends djbase<Super>() { | |
118 | writeHello(out: string[]) { |
|
118 | writeHello(out: string[]) { | |
119 | out.push("-> Bar"); |
|
119 | out.push("-> Bar"); | |
120 |
|
120 | |||
121 | super.writeHello(out); |
|
121 | super.writeHello(out); | |
122 |
|
122 | |||
123 | out.push("<- Bar"); |
|
123 | out.push("<- Bar"); | |
124 | } |
|
124 | } | |
125 | } |
|
125 | } | |
126 | ``` |
|
126 | ``` | |
127 |
|
127 | |||
128 | finally create an instance and call the `writeHello` method |
|
128 | finally create an instance and call the `writeHello` method | |
129 |
|
129 | |||
130 | ```ts |
|
130 | ```ts | |
131 | const baz = new Baz(); |
|
131 | const baz = new Baz(); | |
132 |
|
132 | |||
133 | const data: string[] = []; |
|
133 | const data: string[] = []; | |
134 | baz.writeHello(data); |
|
134 | baz.writeHello(data); | |
135 |
|
135 | |||
136 | console.log(data.join("\n")); |
|
136 | console.log(data.join("\n")); | |
137 |
|
137 | |||
138 | ``` |
|
138 | ``` | |
139 |
|
139 | |||
140 | you will get the following output: |
|
140 | you will get the following output: | |
141 |
|
141 | |||
142 | ```text |
|
142 | ```text | |
143 | -> Baz |
|
143 | -> Baz | |
144 | -> Box |
|
144 | -> Box | |
145 | -> Bar |
|
145 | -> Bar | |
146 | -> Foo |
|
146 | -> Foo | |
147 | <- Foo |
|
147 | <- Foo | |
148 | <- Bar |
|
148 | <- Bar | |
149 | <- Box |
|
149 | <- Box | |
150 | <- Baz |
|
150 | <- Baz | |
151 | ``` |
|
151 | ``` | |
152 |
|
152 | |||
153 | Let's take a closer look at the `Baz` declaration it uses `djbase` to derive |
|
153 | Let's take a closer look at the `Baz` declaration it uses `djbase` to derive | |
154 | from three mixins and the class is decorated with `@djclass` to accomplish the |
|
154 | from three mixins and the class is decorated with `@djclass` to accomplish the | |
155 | declaration and make a real constructor. |
|
155 | declaration and make a real constructor. | |
156 |
|
156 | |||
157 | To allow access to the next sibling method (in terms of multiple inheritance) |
|
157 | To allow access to the next sibling method (in terms of multiple inheritance) | |
158 | Dojo provides `this.inherited(arguments)` method but this approach leads to the |
|
158 | Dojo provides `this.inherited(arguments)` method but this approach leads to the | |
159 | problem with 'strict' mode of ES5 and eliminates the type information about a |
|
159 | problem with 'strict' mode of ES5 and eliminates the type information about a | |
160 | calling method. This library solves the problem calling inherited/next method by |
|
160 | calling method. This library solves the problem calling inherited/next method by | |
161 | utilizing `super` keyword. Under the hood there are proxy methods generated in |
|
161 | utilizing `super` keyword. Under the hood there are proxy methods generated in | |
162 | the prototype of the declared class which make calls to `this.inherited(...)` |
|
162 | the prototype of the declared class which make calls to `this.inherited(...)` | |
163 | method. This technique is compatible with 'strict' mode. |
|
163 | method. This technique is compatible with 'strict' mode. | |
164 |
|
164 | |||
165 | Mixins are declared similar, they also may have the base types although |
|
165 | Mixins are declared similar, they also may have the base types although | |
166 | the most common case is declaring the mixin without any base classes. To allow |
|
166 | the most common case is declaring the mixin without any base classes. To allow | |
167 | the mixin to access the next method declare the interface with |
|
167 | the mixin to access the next method declare the interface with | |
168 | desired methods and use the special form of `djbase<Super>()` without arguments. |
|
168 | desired methods and use the special form of `djbase<Super>()` without arguments. | |
169 |
|
169 | |||
170 | ### DjxWidgetBase<Attrs, Events> |
|
170 | ### DjxWidgetBase<Attrs, Events> | |
171 |
|
171 | |||
172 | TODO |
|
172 | This is the base class for the djx widgets. It declares the abstract method | |
|
173 | `render()` which is used to render the content of the widget, like `_TemplatedMixin`. | |||
|
174 | ||||
|
175 | This class extends `dijit/_WidgetBase` and contains logic from `_AttachMixin` thus | |||
|
176 | it is capable to handle `data-dojo-attach-*` attributes from the rendered markup. | |||
|
177 | ||||
|
178 | ```tsx | |||
|
179 | @djclass | |||
|
180 | export class MyFirstWidget extends djbase(DjxWidgetBase) { | |||
|
181 | render() { | |||
|
182 | return <h1>My first widget</h1>; | |||
|
183 | } | |||
|
184 | } | |||
|
185 | ``` | |||
173 |
|
186 | |||
174 | ### Markup (.tsx) |
|
187 | ### Markup (.tsx) | |
175 |
|
188 | |||
176 | Add to your `tsconfig.json` the following options |
|
189 | Add to your `tsconfig.json` the following options | |
177 |
|
190 | |||
178 | ```json |
|
191 | ```json | |
179 | { |
|
192 | { | |
180 | "compilerOptions": { |
|
193 | "compilerOptions": { | |
181 |
"types": [ |
|
194 | "types": [ | |
|
195 | "@implab/djx", | |||
|
196 | "@implab/dojo-typings" | |||
|
197 | ], | |||
|
198 | "skipLibCheck": true, | |||
182 | "experimentalDecorators": true, |
|
199 | "experimentalDecorators": true, | |
183 | "jsxFactory": "createElement", |
|
200 | "jsxFactory": "createElement", | |
184 | "jsx": "react", |
|
201 | "jsx": "react", | |
|
202 | "target": "ES5", // minimal supported version | |||
|
203 | "lib": ["ES2015", "DOM"] | |||
185 | } |
|
204 | } | |
186 | } |
|
205 | } | |
187 |
|
206 | |||
188 | ``` |
|
207 | ``` | |
189 |
|
208 | |||
190 | Import `createElement` into your `.tsx` file |
|
209 | Import `createElement` into your `.tsx` file | |
191 |
|
210 | |||
192 | ```ts |
|
211 | ```ts | |
193 | import { createElement } from "@implab/djx/tsx"; |
|
212 | import { createElement } from "@implab/djx/tsx"; | |
194 | ``` |
|
213 | ``` | |
195 |
|
214 | |||
196 | You are ready to go! |
|
215 | You are ready to go! | |
197 |
|
216 | |||
198 | TODO |
|
217 | ### Adding reactive behavior: refs, watch(...) and watchFor(...) | |
|
218 | ||||
|
219 | This library adds some reactive traits to update the generated DOM of the widget. | |||
|
220 | Dojo 1.x adds some standard options to deal with dynamic changes: | |||
|
221 | ||||
|
222 | * `data-dojo-attach-point` allows to get reference to an element (or a nested widget) | |||
|
223 | * widget attribute mappings, allows to bind widget's property to a property of | |||
|
224 | the element, referenced by `data-dojo-attach-point`. | |||
|
225 | ||||
|
226 | The typical implementation of this technique would look like | |||
|
227 | ||||
|
228 | ```tsx | |||
|
229 | import { createElement } from "@implab/djx/tsx"; | |||
|
230 | import {djclass, djbase, bind} from "@implab/djx/declare"; | |||
|
231 | ||||
|
232 | @djclass | |||
|
233 | export class MyFirstWidget extends djbase(DjxWidgetBase) { | |||
|
234 | ||||
|
235 | // @bind will generate special attribute mapping | |||
|
236 | // _setCaptionAttr = { node: "captionNode", type: "innerHTML" } | |||
|
237 | @bind({ node: "captionNode", type: "innerHTML" }) | |||
|
238 | caption = "My first widget"; | |||
|
239 | ||||
|
240 | render() { | |||
|
241 | return <h1 data-dojo-attach-point="captionNode"/>; | |||
|
242 | } | |||
|
243 | } | |||
|
244 | ``` | |||
|
245 | ||||
|
246 | Despite this is a natural way for the dojo it has some disadvantages: | |||
|
247 | ||||
|
248 | 1. The compiler doesn't check existence of the attach-point. | |||
|
249 | 2. Attribute mappings support only simple mappings, it's difficult to update the | |||
|
250 | complex rendition. | |||
|
251 | ||||
|
252 | This library helps you to get both goals with special trait `watch(...)` | |||
|
253 | ||||
|
254 | ```tsx | |||
|
255 | import { createElement } from "@implab/djx/tsx"; | |||
|
256 | import { djclass, djbase} from "@implab/djx/declare" | |||
|
257 | ||||
|
258 | @djclass | |||
|
259 | export class MyFirstWidget extends djbase(DjxWidgetBase) { | |||
|
260 | ||||
|
261 | caption = "My first widget"; | |||
|
262 | ||||
|
263 | render() { | |||
|
264 | return <h1>{watch(this,"caption", value => value)}</h1>; | |||
|
265 | } | |||
|
266 | } | |||
|
267 | ``` | |||
|
268 | ||||
|
269 | In this example we replaced attach-point with simple call to `watch` function | |||
|
270 | which renders string value to text representation (text node). It will create a | |||
|
271 | rendition which will observe the `caption` property of the widget and update its | |||
|
272 | contents according to the value changes of the property. | |||
|
273 | ||||
|
274 | The key feature of this approach that the rendering function within `watch` may | |||
|
275 | return a complex rendition. | |||
|
276 | ||||
|
277 | ```tsx | |||
|
278 | // inside some widget | |||
|
279 | render() { | |||
|
280 | return <section> | |||
|
281 | {watch(this,"user", value => value && [ | |||
|
282 | <UserInfo user={value}/>, | |||
|
283 | <LogoutButton click={this._logoutClick}/> | |||
|
284 | ])} | |||
|
285 | </section>; | |||
|
286 | } | |||
|
287 | ||||
|
288 | private readonly _logoutClick = () => { /* do logout */ } | |||
|
289 | ||||
|
290 | ``` | |||
|
291 | ||||
|
292 | The `watch` function has two forms: | |||
|
293 | ||||
|
294 | * `watch(stateful, prop, render)` - observes the specified property of the | |||
|
295 | `dojo/Stateful` object (or widget) | |||
|
296 | * `watch(observable, render)` - observes the specified observable. It supports | |||
|
297 | `rxjs` or `@implab/djx/observable` observables. | |||
|
298 | ||||
|
299 | The `render` callback may return almost anything which will be converted to DOM: | |||
|
300 | ||||
|
301 | * `boolean`, `null`, `undefined` - ignored, | |||
|
302 | * `string` - converted to text node, | |||
|
303 | * `array` - converted to DocumentFragment of its elements, | |||
|
304 | * DOM Nodes and widgets are left intact, | |||
|
305 | * any other kind of value will cause an error. | |||
|
306 |
@@ -1,437 +1,483 | |||||
1 | import { Cancellation } from "@implab/core-amd/Cancellation"; |
|
1 | import { Cancellation } from "@implab/core-amd/Cancellation"; | |
2 | import { ICancellation } from "@implab/core-amd/interfaces"; |
|
2 | import { ICancellation } from "@implab/core-amd/interfaces"; | |
3 |
|
3 | |||
4 | /** |
|
4 | /** | |
5 | * The interface for the consumer of an observable sequence |
|
5 | * The interface for the consumer of an observable sequence | |
6 | */ |
|
6 | */ | |
7 | export interface Observer<T> { |
|
7 | export interface Observer<T> { | |
8 | /** |
|
8 | /** | |
9 | * Called for the next element in the sequence |
|
9 | * Called for the next element in the sequence | |
10 | */ |
|
10 | */ | |
11 | next: (value: T) => void; |
|
11 | next: (value: T) => void; | |
12 |
|
12 | |||
13 | /** |
|
13 | /** | |
14 | * Called once when the error occurs in the sequence. |
|
14 | * Called once when the error occurs in the sequence. | |
15 | */ |
|
15 | */ | |
16 | error: (e: unknown) => void; |
|
16 | error: (e: unknown) => void; | |
17 |
|
17 | |||
18 | /** |
|
18 | /** | |
19 | * Called once at the end of the sequence. |
|
19 | * Called once at the end of the sequence. | |
20 | */ |
|
20 | */ | |
21 | complete: () => void; |
|
21 | complete: () => void; | |
22 | } |
|
22 | } | |
23 |
|
23 | |||
24 | /** |
|
24 | /** | |
25 | * The group of functions to feed an observable. These methods are provided to |
|
25 | * The group of functions to feed an observable. These methods are provided to | |
26 | * the producer to generate a stream of events. |
|
26 | * the producer to generate a stream of events. | |
27 | */ |
|
27 | */ | |
28 | export type Sink<T> = { |
|
28 | export type Sink<T> = { | |
29 | /** |
|
29 | /** | |
30 | * Call to send the next element in the sequence |
|
30 | * Call to send the next element in the sequence | |
31 | */ |
|
31 | */ | |
32 | next: (value: T) => void; |
|
32 | next: (value: T) => void; | |
33 |
|
33 | |||
34 | /** |
|
34 | /** | |
35 | * Call to notify about the error occurred in the sequence. |
|
35 | * Call to notify about the error occurred in the sequence. | |
36 | */ |
|
36 | */ | |
37 | error: (e: unknown) => void; |
|
37 | error: (e: unknown) => void; | |
38 |
|
38 | |||
39 | /** |
|
39 | /** | |
40 | * Call to signal the end of the sequence. |
|
40 | * Call to signal the end of the sequence. | |
41 | */ |
|
41 | */ | |
42 | complete: () => void; |
|
42 | complete: () => void; | |
43 |
|
43 | |||
44 | /** |
|
44 | /** | |
45 | * Checks whether the sink is accepting new elements. It's safe to |
|
45 | * Checks whether the sink is accepting new elements. It's safe to | |
46 | * send elements to the closed sink. |
|
46 | * send elements to the closed sink. | |
47 | */ |
|
47 | */ | |
48 | isClosed: () => boolean; |
|
48 | isClosed: () => boolean; | |
49 | }; |
|
49 | }; | |
50 |
|
50 | |||
51 | export type Producer<T> = (sink: Sink<T>) => (void | (() => void)); |
|
51 | export type Producer<T> = (sink: Sink<T>) => (void | (() => void)); | |
52 |
|
52 | |||
53 | export interface Unsubscribable { |
|
53 | export interface Unsubscribable { | |
54 | unsubscribe(): void; |
|
54 | unsubscribe(): void; | |
55 | } |
|
55 | } | |
56 |
|
56 | |||
57 | export const isUnsubscribable = (v: unknown): v is Unsubscribable => |
|
57 | export const isUnsubscribable = (v: unknown): v is Unsubscribable => | |
58 | v !== null && v !== undefined && typeof (v as Unsubscribable).unsubscribe === "function"; |
|
58 | v !== null && v !== undefined && typeof (v as Unsubscribable).unsubscribe === "function"; | |
59 |
|
59 | |||
60 | export const isSubscribable = <T = unknown>(v: unknown): v is Subscribable<T> => |
|
60 | export const isSubscribable = <T = unknown>(v: unknown): v is Subscribable<T> => | |
61 | v !== null && v !== undefined && typeof (v as Subscribable<unknown>).subscribe === "function"; |
|
61 | v !== null && v !== undefined && typeof (v as Subscribable<unknown>).subscribe === "function"; | |
62 |
|
62 | |||
63 | export interface Subscribable<T> { |
|
63 | export interface Subscribable<T> { | |
64 | subscribe(consumer: Partial<Observer<T>>): Unsubscribable; |
|
64 | subscribe(consumer: Partial<Observer<T>>): Unsubscribable; | |
65 | } |
|
65 | } | |
66 |
|
66 | |||
67 | export type AccumulatorFn<T, A> = (acc: A, value: T) => A; |
|
67 | export type AccumulatorFn<T, A> = (acc: A, value: T) => A; | |
68 |
|
68 | |||
69 | export type OperatorFn<T, U> = (source: Observable<T>) => Producer<U>; |
|
69 | export type OperatorFn<T, U> = (source: Observable<T>) => Producer<U>; | |
70 |
|
70 | |||
71 | /** The observable source of items. */ |
|
71 | /** The observable source of items. */ | |
72 | export interface Observable<T> extends Subscribable<T> { |
|
72 | export interface Observable<T> extends Subscribable<T> { | |
73 | /** Transforms elements of the sequence with the specified mapper |
|
73 | /** Transforms elements of the sequence with the specified mapper | |
74 | * |
|
74 | * | |
75 | * @param mapper The mapper used to transform the values |
|
75 | * @param mapper The mapper used to transform the values | |
76 | */ |
|
76 | */ | |
77 | map<T2>(mapper: (value: T) => T2): Observable<T2>; |
|
77 | map<T2>(mapper: (value: T) => T2): Observable<T2>; | |
78 |
|
78 | |||
79 | /** Filters elements of the sequence. The resulting sequence will |
|
79 | /** Filters elements of the sequence. The resulting sequence will | |
80 | * contain only elements which match the specified predicate. |
|
80 | * contain only elements which match the specified predicate. | |
81 | * |
|
81 | * | |
82 | * @param predicate The filter predicate. |
|
82 | * @param predicate The filter predicate. | |
83 | */ |
|
83 | */ | |
84 | filter(predicate: (value: T) => boolean): Observable<T>; |
|
84 | filter(predicate: (value: T) => boolean): Observable<T>; | |
85 |
|
85 | |||
86 | /** Completes the sequence once the condition is met. |
|
86 | /** Completes the sequence once the condition is met. | |
87 | * @param predicate The condition which should be met to complete the sequence |
|
87 | * @param predicate The condition which should be met to complete the sequence | |
88 | */ |
|
88 | */ | |
89 | until(predicate: (value: T) => boolean): Observable<T>; |
|
89 | until(predicate: (value: T) => boolean): Observable<T>; | |
90 |
|
90 | |||
91 | /** Keeps the sequence running while elements satisfy the condition. |
|
91 | /** Keeps the sequence running while elements satisfy the condition. | |
92 | * |
|
92 | * | |
93 | * @param predicate The condition which should be met to continue. |
|
93 | * @param predicate The condition which should be met to continue. | |
94 | */ |
|
94 | */ | |
95 | while(predicate: (value: T) => boolean): Observable<T>; |
|
95 | while(predicate: (value: T) => boolean): Observable<T>; | |
96 |
|
96 | |||
97 | /** Applies accumulator to each value in the sequence and |
|
97 | /** Applies accumulator to each value in the sequence and | |
98 | * emits the accumulated value for each source element |
|
98 | * emits the accumulated value for each source element | |
99 | * |
|
99 | * | |
100 | * @param accumulator |
|
100 | * @param accumulator | |
101 | * @param initial |
|
101 | * @param initial | |
102 | */ |
|
102 | */ | |
103 | scan<A>(accumulator: AccumulatorFn<T, A>, initial: A): Observable<A>; |
|
103 | scan<A>(accumulator: AccumulatorFn<T, A>, initial: A): Observable<A>; | |
104 | scan(accumulator: AccumulatorFn<T, T>): Observable<T>; |
|
104 | scan(accumulator: AccumulatorFn<T, T>): Observable<T>; | |
105 |
|
105 | |||
106 | /** Applies accumulator to each value in the sequence and |
|
106 | /** Applies accumulator to each value in the sequence and | |
107 | * emits the accumulated value at the end of the sequence |
|
107 | * emits the accumulated value at the end of the sequence | |
108 | * |
|
108 | * | |
109 | * @param accumulator |
|
109 | * @param accumulator | |
110 | * @param initial |
|
110 | * @param initial | |
111 | */ |
|
111 | */ | |
112 | reduce<A>(accumulator: AccumulatorFn<T, A>, initial: A): Observable<A>; |
|
112 | reduce<A>(accumulator: AccumulatorFn<T, A>, initial: A): Observable<A>; | |
113 | reduce(accumulator: AccumulatorFn<T, T>): Observable<T>; |
|
113 | reduce(accumulator: AccumulatorFn<T, T>): Observable<T>; | |
114 |
|
114 | |||
115 | /** Concatenates the specified sequences with this observable |
|
115 | /** Concatenates the specified sequences with this observable | |
116 | * |
|
116 | * | |
117 | * @param seq sequences to concatenate with the current observable |
|
117 | * @param seq sequences to concatenate with the current observable | |
118 | * |
|
118 | * | |
119 | * The concatenation doesn't accumulate values from the specified sequences, |
|
119 | * The concatenation doesn't accumulate values from the specified sequences, | |
120 | * The result of the concatenation is the new observable which will switch |
|
120 | * The result of the concatenation is the new observable which will switch | |
121 | * to the next observable after the previous one completes. Values emitted |
|
121 | * to the next observable after the previous one completes. Values emitted | |
122 | * before the next observable being active are lost. |
|
122 | * before the next observable being active are lost. | |
123 | */ |
|
123 | */ | |
124 | cat(...seq: Subscribable<T>[]): Observable<T>; |
|
124 | cat(...seq: Subscribable<T>[]): Observable<T>; | |
125 |
|
125 | |||
126 |
|
126 | |||
127 | /** Pipes the specified operator to produce the new observable |
|
127 | /** Pipes the specified operator to produce the new observable | |
128 | * @param op The operator consumes this observable and produces a new one |
|
128 | * @param op The operator consumes this observable and produces a new one | |
129 | * |
|
129 | * | |
130 | * The operator is a higher order function which takes a source observable |
|
130 | * The operator is a higher order function which takes a source observable | |
131 | * and returns a producer for the new observable. |
|
131 | * and returns a producer for the new observable. | |
132 | * |
|
132 | * | |
133 | * This function can be used to create a complex mapping between source and |
|
133 | * This function can be used to create a complex mapping between source and | |
134 | * resulting observables. The operator may have a state (or a side effect) |
|
134 | * resulting observables. The operator may have a state (or a side effect) | |
135 | * and can be connected to multiple observables. |
|
135 | * and can be connected to multiple observables. | |
136 | */ |
|
136 | */ | |
137 | pipe<U>(op: OperatorFn<T, U>): Observable<U>; |
|
137 | pipe<U>(op: OperatorFn<T, U>): Observable<U>; | |
138 |
|
138 | |||
139 | /** Waits for the next event to occur and returns a promise for the next value |
|
139 | /** Waits for the next event to occur and returns a promise for the next value | |
140 | * @param ct Cancellation token to |
|
140 | * @param ct Cancellation token to | |
141 | */ |
|
141 | */ | |
142 | next(ct?: ICancellation): Promise<T>; |
|
142 | next(ct?: ICancellation): Promise<T>; | |
143 | } |
|
143 | } | |
144 |
|
144 | |||
145 | const noop = () => { }; |
|
145 | const noop = () => { }; | |
146 |
|
146 | |||
147 | const sink = <T>(consumer: Partial<Observer<T>>) => { |
|
147 | const sink = <T>(consumer: Partial<Observer<T>>) => { | |
148 | const { next, error, complete } = consumer; |
|
148 | const { next, error, complete } = consumer; | |
149 | return { |
|
149 | return { | |
150 | next: next ? next.bind(consumer) : noop, |
|
150 | next: next ? next.bind(consumer) : noop, | |
151 | error: error ? error.bind(consumer) : noop, |
|
151 | error: error ? error.bind(consumer) : noop, | |
152 | complete: complete ? complete.bind(consumer) : noop, |
|
152 | complete: complete ? complete.bind(consumer) : noop, | |
153 | isClosed: () => false |
|
153 | isClosed: () => false | |
154 | }; |
|
154 | }; | |
155 | }; |
|
155 | }; | |
156 |
|
156 | |||
157 | /** Wraps the producer to handle tear down logic and subscription management |
|
157 | /** Wraps the producer to handle tear down logic and subscription management | |
158 | * |
|
158 | * | |
159 | * @param producer The producer to wrap |
|
159 | * @param producer The producer to wrap | |
160 | * @returns The wrapper producer |
|
160 | * @returns The wrapper producer | |
161 | */ |
|
161 | */ | |
162 | const fuse = <T>(producer: Producer<T>) => ({ next, error, complete }: Sink<T>) => { |
|
162 | const fuse = <T>(producer: Producer<T>) => ({ next, error, complete }: Sink<T>) => { | |
163 | let done = false; |
|
163 | let done = false; | |
164 | let cleanup = noop; |
|
164 | let cleanup = noop; | |
165 |
|
165 | |||
166 | const _fin = <A extends unknown[]>(fn: (...args: A) => void) => |
|
166 | const _fin = <A extends unknown[]>(fn: (...args: A) => void) => | |
167 | (...args: A) => done ? |
|
167 | (...args: A) => done ? | |
168 | void (0) : |
|
168 | void (0) : | |
169 | (done = true, cleanup(), fn(...args)); |
|
169 | (done = true, cleanup(), fn(...args)); | |
170 |
|
170 | |||
171 | const _fin0 = () => done ? void (0) : (done = true, cleanup()); |
|
171 | const _fin0 = () => done ? void (0) : (done = true, cleanup()); | |
172 |
|
172 | |||
173 | const safeSink = { |
|
173 | const safeSink = { | |
174 | next: (value: T) => { !done && next(value); }, |
|
174 | next: (value: T) => { !done && next(value); }, | |
175 | error: _fin(error), |
|
175 | error: _fin(error), | |
176 | complete: _fin(complete), |
|
176 | complete: _fin(complete), | |
177 | isClosed: () => done |
|
177 | isClosed: () => done | |
178 | }; |
|
178 | }; | |
179 | cleanup = producer(safeSink) ?? noop; |
|
179 | cleanup = producer(safeSink) ?? noop; | |
180 | return done ? cleanup() : _fin0; |
|
180 | return done ? cleanup() : _fin0; | |
181 | }; |
|
181 | }; | |
182 |
|
182 | |||
183 | const _observe = <T>(producer: Producer<T>): Observable<T> => ({ |
|
183 | const _observe = <T>(producer: Producer<T>): Observable<T> => ({ | |
184 | subscribe: (consumer: Partial<Observer<T>>) => ({ |
|
184 | subscribe: (consumer: Partial<Observer<T>>) => ({ | |
185 | unsubscribe: producer(sink(consumer)) ?? noop |
|
185 | unsubscribe: producer(sink(consumer)) ?? noop | |
186 | }), |
|
186 | }), | |
187 |
|
187 | |||
188 | map: (mapper) => _observe(({ next, ...rest }) => |
|
188 | map: (mapper) => _observe(({ next, ...rest }) => | |
189 | producer({ |
|
189 | producer({ | |
190 | next: next !== noop ? (v: T) => next(mapper(v)) : noop, |
|
190 | next: next !== noop ? (v: T) => next(mapper(v)) : noop, | |
191 | ...rest |
|
191 | ...rest | |
192 | }) |
|
192 | }) | |
193 | ), |
|
193 | ), | |
194 |
|
194 | |||
195 | filter: (predicate) => _observe(({ next, ...rest }) => |
|
195 | filter: (predicate) => _observe(({ next, ...rest }) => | |
196 | producer({ |
|
196 | producer({ | |
197 | next: next !== noop ? (v: T) => predicate(v) ? next(v) : void (0) : noop, |
|
197 | next: next !== noop ? (v: T) => predicate(v) ? next(v) : void (0) : noop, | |
198 | ...rest |
|
198 | ...rest | |
199 | }) |
|
199 | }) | |
200 | ), |
|
200 | ), | |
201 |
|
201 | |||
202 | until: predicate => _observe(({ next, complete, ...rest }) => |
|
202 | until: predicate => _observe(({ next, complete, ...rest }) => | |
203 | producer({ |
|
203 | producer({ | |
204 | next: v => predicate(v) ? complete() : next(v), |
|
204 | next: v => predicate(v) ? complete() : next(v), | |
205 | complete, |
|
205 | complete, | |
206 | ...rest |
|
206 | ...rest | |
207 | }) |
|
207 | }) | |
208 | ), |
|
208 | ), | |
209 |
|
209 | |||
210 | while: predicate => _observe(({ next, complete, ...rest }) => |
|
210 | while: predicate => _observe(({ next, complete, ...rest }) => | |
211 | producer({ |
|
211 | producer({ | |
212 | next: v => predicate(v) ? next(v) : complete(), |
|
212 | next: v => predicate(v) ? next(v) : complete(), | |
213 | complete, |
|
213 | complete, | |
214 | ...rest |
|
214 | ...rest | |
215 | }) |
|
215 | }) | |
216 | ), |
|
216 | ), | |
217 |
|
217 | |||
218 | scan: <A>(...args: [AccumulatorFn<T, A>, A] | [AccumulatorFn<T, T>]) => _observe<T | A>(({ next, ...rest }) => { |
|
218 | scan: <A>(...args: [AccumulatorFn<T, A>, A] | [AccumulatorFn<T, T>]) => _observe<T | A>(({ next, ...rest }) => { | |
219 | if (args.length === 1) { |
|
219 | if (args.length === 1) { | |
220 | const [accumulator] = args; |
|
220 | const [accumulator] = args; | |
221 | let _acc: T; |
|
221 | let _acc: T; | |
222 | let index = 0; |
|
222 | let index = 0; | |
223 | return producer({ |
|
223 | return producer({ | |
224 | next: next !== noop ? (v: T) => next(index++ === 0 ? _acc = v : _acc = accumulator(_acc, v)) : noop, |
|
224 | next: next !== noop ? (v: T) => next(index++ === 0 ? _acc = v : _acc = accumulator(_acc, v)) : noop, | |
225 | ...rest |
|
225 | ...rest | |
226 | }); |
|
226 | }); | |
227 | } else { |
|
227 | } else { | |
228 | const [accumulator, initial] = args; |
|
228 | const [accumulator, initial] = args; | |
229 | let _acc = initial; |
|
229 | let _acc = initial; | |
230 | return producer({ |
|
230 | return producer({ | |
231 | next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop, |
|
231 | next: next !== noop ? (v: T) => next(_acc = accumulator(_acc, v)) : noop, | |
232 | ...rest |
|
232 | ...rest | |
233 | }); |
|
233 | }); | |
234 | } |
|
234 | } | |
235 | }), |
|
235 | }), | |
236 |
|
236 | |||
237 | reduce: <A>(...args: [AccumulatorFn<T, A>, A] | [AccumulatorFn<T, T>]) => _observe<T | A>(({ next, complete, error, ...rest }) => { |
|
237 | reduce: <A>(...args: [AccumulatorFn<T, A>, A] | [AccumulatorFn<T, T>]) => _observe<T | A>(({ next, complete, error, ...rest }) => { | |
238 | if (args.length === 1) { |
|
238 | if (args.length === 1) { | |
239 | const [accumulator] = args; |
|
239 | const [accumulator] = args; | |
240 | let _acc: T; |
|
240 | let _acc: T; | |
241 | let index = 0; |
|
241 | let index = 0; | |
242 | return producer({ |
|
242 | return producer({ | |
243 | next: next !== noop ? (v: T) => { |
|
243 | next: next !== noop ? (v: T) => { | |
244 | _acc = index++ === 0 ? v : accumulator(_acc, v); |
|
244 | _acc = index++ === 0 ? v : accumulator(_acc, v); | |
245 | } : noop, |
|
245 | } : noop, | |
246 | complete: () => { |
|
246 | complete: () => { | |
247 | if (index === 0) { |
|
247 | if (index === 0) { | |
248 | error(new Error("The sequence can't be empty")); |
|
248 | error(new Error("The sequence can't be empty")); | |
249 | } else { |
|
249 | } else { | |
250 | next(_acc); |
|
250 | next(_acc); | |
251 | complete(); |
|
251 | complete(); | |
252 | } |
|
252 | } | |
253 | }, |
|
253 | }, | |
254 | error, |
|
254 | error, | |
255 | ...rest |
|
255 | ...rest | |
256 | }); |
|
256 | }); | |
257 | } else { |
|
257 | } else { | |
258 | const [accumulator, initial] = args; |
|
258 | const [accumulator, initial] = args; | |
259 | let _acc = initial; |
|
259 | let _acc = initial; | |
260 | return producer({ |
|
260 | return producer({ | |
261 | next: next !== noop ? (v: T) => { |
|
261 | next: next !== noop ? (v: T) => { | |
262 | _acc = accumulator(_acc, v); |
|
262 | _acc = accumulator(_acc, v); | |
263 | } : noop, |
|
263 | } : noop, | |
264 | complete: () => { |
|
264 | complete: () => { | |
265 | next(_acc); |
|
265 | next(_acc); | |
266 | complete(); |
|
266 | complete(); | |
267 | }, |
|
267 | }, | |
268 | error, |
|
268 | error, | |
269 | ...rest |
|
269 | ...rest | |
270 | }); |
|
270 | }); | |
271 | } |
|
271 | } | |
272 | }), |
|
272 | }), | |
273 |
|
273 | |||
274 | cat: (...seq) => _observe(({ next, complete: final, ...rest }) => { |
|
274 | cat: (...seq) => _observe(({ next, complete: final, ...rest }) => { | |
275 | let cleanup: () => void; |
|
275 | let cleanup: () => void; | |
276 | const complete = () => { |
|
276 | const complete = () => { | |
277 | const continuation = seq.shift(); |
|
277 | const continuation = seq.shift(); | |
278 | if (continuation) { |
|
278 | if (continuation) { | |
279 | // if we have a next sequence, subscribe to it |
|
279 | // if we have a next sequence, subscribe to it | |
280 | const subscription = continuation.subscribe({ next, complete, ...rest }); |
|
280 | const subscription = continuation.subscribe({ next, complete, ...rest }); | |
281 | cleanup = subscription.unsubscribe.bind(subscription); |
|
281 | cleanup = subscription.unsubscribe.bind(subscription); | |
282 | } else { |
|
282 | } else { | |
283 | // otherwise notify the consumer about completion |
|
283 | // otherwise notify the consumer about completion | |
284 | final(); |
|
284 | final(); | |
285 | } |
|
285 | } | |
286 | }; |
|
286 | }; | |
287 |
|
287 | |||
288 | cleanup = producer({ next, complete, ...rest }) ?? noop; |
|
288 | cleanup = producer({ next, complete, ...rest }) ?? noop; | |
289 |
|
289 | |||
290 | return () => cleanup(); |
|
290 | return () => cleanup(); | |
291 | }), |
|
291 | }), | |
292 |
|
292 | |||
293 | pipe: <U>(op: (source: Observable<T>) => Producer<U>) => observe(op(_observe(producer))), |
|
293 | pipe: <U>(op: (source: Observable<T>) => Producer<U>) => observe(op(_observe(producer))), | |
294 |
|
294 | |||
295 | next: (ct?: ICancellation) => { |
|
295 | next: (ct?: ICancellation) => { | |
296 | const _ct = ct ?? Cancellation.none; |
|
296 | const _ct = ct ?? Cancellation.none; | |
297 | return new Promise<T>((resolve, reject) => { |
|
297 | return new Promise<T>((resolve, reject) => { | |
298 | // wrap the producer to handle only single event |
|
298 | // wrap the producer to handle only single event | |
299 | const once = fuse<T>(({ next, complete, error, isClosed }) => { |
|
299 | const once = fuse<T>(({ next, complete, error, isClosed }) => { | |
300 | const h = _ct.register(error); |
|
300 | const h = _ct.register(error); | |
301 |
|
301 | |||
302 | // is the _ct fires it will call error() and isClosed() will return true |
|
302 | // is the _ct fires it will call error() and isClosed() will return true | |
303 | const cleanup = !isClosed() ? |
|
303 | const cleanup = !isClosed() ? | |
304 | producer({ |
|
304 | producer({ | |
305 | next: v => (next(v), complete()), |
|
305 | next: v => (next(v), complete()), | |
306 | complete: () => error(new Error("The sequence is empty")), |
|
306 | complete: () => error(new Error("The sequence is empty")), | |
307 | error, |
|
307 | error, | |
308 | isClosed |
|
308 | isClosed | |
309 | }) ?? noop : |
|
309 | }) ?? noop : | |
310 | noop; |
|
310 | noop; | |
311 |
|
311 | |||
312 | return () => { |
|
312 | return () => { | |
313 | h.destroy(); |
|
313 | h.destroy(); | |
314 | cleanup(); |
|
314 | cleanup(); | |
315 | }; |
|
315 | }; | |
316 | }); |
|
316 | }); | |
317 |
|
317 | |||
318 | once({ |
|
318 | once({ | |
319 | next: resolve, |
|
319 | next: resolve, | |
320 | error: reject, |
|
320 | error: reject, | |
321 | complete: noop, |
|
321 | complete: noop, | |
322 | isClosed: () => false |
|
322 | isClosed: () => false | |
323 | }); |
|
323 | }); | |
324 | }); |
|
324 | }); | |
325 | } |
|
325 | } | |
326 | }); |
|
326 | }); | |
327 |
|
327 | |||
328 | export const observe = <T>(producer: Producer<T>) => _observe(fuse(producer)); |
|
328 | export const observe = <T>(producer: Producer<T>) => _observe(fuse(producer)); | |
329 |
|
329 | |||
330 | export const streamArray = <T>(items: T[]) => _observe<T>( |
|
330 | export const streamArray = <T>(items: T[]) => _observe<T>( | |
331 | ({ next, complete }) => ( |
|
331 | ({ next, complete }) => ( | |
332 | items.forEach(next), |
|
332 | items.forEach(next), | |
333 | complete() |
|
333 | complete() | |
334 | ) |
|
334 | ) | |
335 | ); |
|
335 | ); | |
336 |
|
336 | |||
337 | export const streamPromise = <T>(promise: PromiseLike<T>) => observe<T>( |
|
337 | export const streamPromise = <T>(promise: PromiseLike<T>) => observe<T>( | |
338 | ({ next, error, complete }) => void promise.then( |
|
338 | ({ next, error, complete }) => void promise.then( | |
339 | v => (next(v), complete()), |
|
339 | v => (next(v), complete()), | |
340 | error |
|
340 | error | |
341 | ) |
|
341 | ) | |
342 | ); |
|
342 | ); | |
343 |
|
343 | |||
344 | export const of = <T>(...items: T[]) => _observe<T>( |
|
344 | export const of = <T>(...items: T[]) => _observe<T>( | |
345 | ({ next, complete }) => ( |
|
345 | ({ next, complete }) => ( | |
346 | items.forEach(next), |
|
346 | items.forEach(next), | |
347 | complete() |
|
347 | complete() | |
348 | ) |
|
348 | ) | |
349 | ); |
|
349 | ); | |
350 |
|
350 | |||
351 | export const empty = _observe<never>(({ complete }) => complete()); |
|
351 | export const empty = _observe<never>(({ complete }) => complete()); | |
352 |
|
352 | |||
353 | /** |
|
353 | /** | |
354 | * Creates a mutable state and the observable for the stored value. |
|
354 | * Creates a mutable state and the observable for the stored value. | |
355 | * |
|
355 | * | |
356 | * @param value The initial value for the state |
|
356 | * @param value The initial value for the state | |
357 | * @returns an array of three elements `[observable, setter, getter]` |
|
357 | * @returns an array of three elements `[observable, setter, getter]` | |
358 | * |
|
358 | * | |
359 | * The returned observable keeps the actual value and will emit it as the next |
|
359 | * The returned observable keeps the actual value and will emit it as the next | |
360 | * element each time a consumer subscribes the observable. |
|
360 | * element each time a consumer subscribes the observable. | |
361 | * |
|
361 | * | |
362 | * Calling the setter will update the stored value in the observable and notify |
|
362 | * Calling the setter will update the stored value in the observable and notify | |
363 | * all consumers. |
|
363 | * all consumers. | |
364 | */ |
|
364 | */ | |
365 | export const stateful = <T>(producer: Producer<T>): Producer<T> => { |
|
365 | export const stateful = <T>(producer: Producer<T>): Producer<T> => { | |
366 | const fusedProducer = fuse(producer); |
|
366 | const fusedProducer = fuse(producer); | |
367 | type Status = "active" | "complete" | "error"; |
|
367 | type Status = "active" | "complete" | "error"; | |
368 |
|
368 | |||
369 | let lastValue: T; |
|
369 | let lastValue: T; | |
370 | let hasValue = false; |
|
370 | let hasValue = false; | |
371 | let status: Status = "active"; |
|
371 | let status: Status = "active"; | |
372 | let lastError: unknown; |
|
372 | let lastError: unknown; | |
373 | let subscribers: Sink<T>[] = []; |
|
373 | let subscribers: Sink<T>[] = []; | |
374 |
|
374 | |||
375 | const sink: Sink<T> = { |
|
375 | const sink: Sink<T> = { | |
376 | isClosed: () => status !== "active", |
|
376 | isClosed: () => status !== "active", | |
377 | complete: () => { |
|
377 | complete: () => { | |
378 | if (status === "active") { |
|
378 | if (status === "active") { | |
379 | status = "complete"; |
|
379 | status = "complete"; | |
380 | const _subscribers = subscribers; |
|
380 | const _subscribers = subscribers; | |
381 | subscribers = []; |
|
381 | subscribers = []; | |
382 | _subscribers.forEach(s => s.complete()); |
|
382 | _subscribers.forEach(s => s.complete()); | |
383 | } |
|
383 | } | |
384 | }, |
|
384 | }, | |
385 | error: e => { |
|
385 | error: e => { | |
386 | if (status === "active") { |
|
386 | if (status === "active") { | |
387 | status = "error"; |
|
387 | status = "error"; | |
388 | lastError = e; |
|
388 | lastError = e; | |
389 | const _subscribers = subscribers; |
|
389 | const _subscribers = subscribers; | |
390 | subscribers = []; |
|
390 | subscribers = []; | |
391 | _subscribers.forEach(s => s.error(e)); |
|
391 | _subscribers.forEach(s => s.error(e)); | |
392 | } |
|
392 | } | |
393 | }, |
|
393 | }, | |
394 | next: v => { |
|
394 | next: v => { | |
395 | if (status === "active") { |
|
395 | if (status === "active") { | |
396 | hasValue = true; |
|
396 | hasValue = true; | |
397 | lastValue = v; |
|
397 | lastValue = v; | |
398 | const _subscribers = subscribers; |
|
398 | const _subscribers = subscribers; | |
399 | _subscribers.forEach(s => s.next(v)); |
|
399 | _subscribers.forEach(s => s.next(v)); | |
400 | } |
|
400 | } | |
401 | } |
|
401 | } | |
402 | }; |
|
402 | }; | |
403 |
|
403 | |||
404 | fusedProducer(sink); |
|
404 | fusedProducer(sink); | |
405 |
|
405 | |||
406 | return (s: Sink<T>) => { |
|
406 | return (s: Sink<T>) => { | |
407 | const _subscribers = subscribers; |
|
407 | const _subscribers = subscribers; | |
408 | switch (status) { |
|
408 | switch (status) { | |
409 | case "active": |
|
409 | case "active": | |
410 | if (hasValue) |
|
410 | if (hasValue) | |
411 | s.next(lastValue); // if hasValue is true, |
|
411 | s.next(lastValue); // if hasValue is true, | |
412 |
|
|
412 | // lastValue has a valid value | |
413 | subscribers.push(s); |
|
413 | subscribers.push(s); | |
414 | return () => { |
|
414 | return () => { | |
415 | if (_subscribers === subscribers) { |
|
415 | if (_subscribers === subscribers) { | |
416 | const pos = subscribers.indexOf(s); |
|
416 | const pos = subscribers.indexOf(s); | |
417 | if (pos >= 0) |
|
417 | if (pos >= 0) | |
418 | subscribers.splice(pos, 1); |
|
418 | subscribers.splice(pos, 1); | |
419 | } |
|
419 | } | |
420 | }; |
|
420 | }; | |
421 | case "complete": |
|
421 | case "complete": | |
422 | s.complete(); |
|
422 | s.complete(); | |
423 | break; |
|
423 | break; | |
424 | case "error": |
|
424 | case "error": | |
425 | s.error(lastError); |
|
425 | s.error(lastError); | |
426 | break; |
|
426 | break; | |
427 | } |
|
427 | } | |
428 | }; |
|
428 | }; | |
429 | }; |
|
429 | }; | |
430 |
|
430 | |||
431 | const subject = <T>(producer: Producer<T>): Producer<T> => { |
|
431 | /** Create the producer which will be called once when the first subscriber is | |
|
432 | * attached, next subscribers would share the same producer. When all | |||
|
433 | * subscribers are removed the producer will be cleaned up. | |||
|
434 | * | |||
|
435 | * Use this wrapper to prevent spawning multiple producers. | |||
|
436 | * | |||
|
437 | * @param producer The source producer | |||
|
438 | * @returns The wrapped producer | |||
|
439 | */ | |||
|
440 | export const subject = <T>(producer: Producer<T>): Producer<T> => { | |||
432 | const fusedProducer = fuse(producer); |
|
441 | const fusedProducer = fuse(producer); | |
433 |
|
442 | |||
434 | return () => { |
|
443 | let subscribers: Sink<T>[] = []; | |
|
444 | ||||
|
445 | let cleanup = noop; | |||
435 |
|
446 | |||
|
447 | const sink: Sink<T> = { | |||
|
448 | isClosed: () => false, | |||
|
449 | complete: () => { | |||
|
450 | const _subscribers = subscribers; | |||
|
451 | subscribers = []; | |||
|
452 | _subscribers.forEach(s => s.complete()); | |||
|
453 | cleanup(); | |||
|
454 | }, | |||
|
455 | error: e => { | |||
|
456 | const _subscribers = subscribers; | |||
|
457 | subscribers = []; | |||
|
458 | _subscribers.forEach(s => s.error(e)); | |||
|
459 | cleanup(); | |||
|
460 | }, | |||
|
461 | next: v => { | |||
|
462 | const _subscribers = subscribers; | |||
|
463 | _subscribers.forEach(s => s.next(v)); | |||
|
464 | } | |||
|
465 | }; | |||
|
466 | ||||
|
467 | return client => { | |||
|
468 | const _subscribers = subscribers; | |||
|
469 | subscribers.push(client); | |||
|
470 | if (subscribers.length === 1) | |||
|
471 | cleanup = fusedProducer(sink) ?? noop; | |||
|
472 | ||||
|
473 | return () => { | |||
|
474 | if (_subscribers === subscribers) { | |||
|
475 | const pos = subscribers.indexOf(client); | |||
|
476 | if (pos >= 0) | |||
|
477 | subscribers.splice(pos,1); | |||
|
478 | if (!subscribers.length) | |||
|
479 | cleanup(); | |||
|
480 | } | |||
|
481 | }; | |||
436 | }; |
|
482 | }; | |
437 | }; No newline at end of file |
|
483 | }; |
@@ -1,3 +1,4 | |||||
1 | import "./declare-tests"; |
|
1 | import "./declare-tests"; | |
2 | import "./observable-tests"; |
|
2 | import "./observable-tests"; | |
3 | import "./state-tests"; No newline at end of file |
|
3 | import "./state-tests"; | |
|
4 | import "./subject-tests"; No newline at end of file |
1 | NO CONTENT: modified file |
|
NO CONTENT: modified file | ||
The requested commit or file is too big and content was truncated. Show full diff |
General Comments 0
You need to be logged in to leave comments.
Login now