| Valv |
A tiny but powerful web framework built on top of lit-html and rxjs
Demo (Source)
Features
- Easy ui design and composition thanks to lit-html
- Powerful state management thanks to rxjs
- Fast! (no traversing trees to see what changed)
- SPA router in the box
- 100% Web component compatible
- Nice api for web animations
- Tiny (10KB gzipped)
Naming
Due to the extensive use of rx in this library I've opted for the following naming convention for the frequently used types:
- Observables: observable$
- Subjects: $subject$
- Observers: $observer
Guide
Valv is all about controlling the flow of streams, whenever an event happens, it gets put into an observable and the job of the application is to build a pipeline with rxjs that turns that event into a UI update.
It is an absolute requirement that you understand rxjs in order to use this framework, so please read the documentation at ReactiveX if you haven't done so.
Valv has 2 main parts, Widgets and Blocs:
Widgets
A widget is a function that takes context, some props and returns a lit-html TemplateResult, it is wrapped in the Widget
function for convinience.
;;
Rendering a widget is easy!
renderMyWidgetcontext, document.getElementById'body';
Widgets are composable.
// Props can have any type you want;
Blocs
A Bloc is any class that uses observers as input and observables as output, the framework does not enforce this, you can put any class you like into a BlocRepo but hopefully after this guide you'll see it's a good way to structure your code.
Widgets access blocs through the bloc repository or BlocRepo. The code below displays a button and a number that increases every time you press the button.
; // Context right now only contains the BlocRepo but might include more information in the futurecontext.blocs.registerMyBloc;context.blocs.registerMyParameterizedBloc, new MyParameterizedBloc32; // You can also provide an instance ;
awaito
But wait what is that function awaito
?
It stands for await observable and it's the main tool that Valv provides, it takes an observable of anything that can be rendered in lit-html (text,numbers,TemplateResults) and whenever the observable emits a new value, the previous dom gets replaced with the new one.
It also provides a convinient map function as a second parameter if you want to construct the UI at the call site.
awaito numberObservable, html` <i><b></b></i> `;
Todo
- A lot of Documentation
- SSR
- PWA facilities
- more fancy animation stuff