https://github.com/hediet/rxjs-playground
A typescript playground for rx js.
https://github.com/hediet/rxjs-playground
playground rxjs typescript
Last synced: 12 months ago
JSON representation
A typescript playground for rx js.
- Host: GitHub
- URL: https://github.com/hediet/rxjs-playground
- Owner: hediet
- License: gpl-3.0
- Created: 2019-06-27T19:32:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T04:26:55.000Z (over 3 years ago)
- Last Synced: 2025-03-29T08:51:10.767Z (over 1 year ago)
- Topics: playground, rxjs, typescript
- Language: TypeScript
- Homepage: https://blog.hediet.de/post/a_typescript_playground_for_rx_js
- Size: 22.9 MB
- Stars: 49
- Watchers: 1
- Forks: 6
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A TypeScript Playground for RX JS
This is a playground for
[RxJS](https://rxjs-dev.firebaseapp.com/), a
library for reactive programming using Observables that
make it easier to compose asynchronous or callback-based
code. The playground supports editable as well as
computed observables. Events of editable observables can
be created with a single click and dragged around, while
computed observables are expressed in type-checked
JavaScript (also known as TypeScript) and can refer to
other observables.
Core of this playground is the RxJs
`VirtualTimeScheduler`
that is used to immediately process delayed observables.
The [Monaco Editor](https://microsoft.github.io/monaco-editor/) is used as editor component. The control UI is
implemented with [BlueprintJs](https://blueprintjs.com/), the
visualization is rendered as plain SVG.
For technical reasons, delayed Rx operations must be
given the scheduler passed to the `visualize` function.
The `track` function can be used to track piped (intermediate) observables.
The browser url reflects the current playground model
and can be used for sharing.
## Dev-Setup
Clone the project and run yarn:
```
git clone https://github.com/hediet/rxjs-playground.git
cd rxjs-playground
yarn
```
### Dev-Server
To start the dev server, run:
```
yarn dev
```
and open `http://localhost:8080`.
### Architecture
This is a rough overview of the architecture of this app:
### Todos
- Improve performance
- Improve usability