rxcomp
v1.0.0-beta.21
Published
Reactive component library for JavaScript
Downloads
41
Maintainers
Readme
💎 RxComp
RxComp is a reactive component library built on top of RxJs that mimics the Angular declarative syntax.
If you like Angular declarative syntax but you just want go Vanilla, RxComp library come in useful.
lib & dependancy | size :-----------------|:----------------------------------------------------------------------------------------------| rxcomp.min.js | rxcomp.min.js | rxjs.min.js | rxjs.min.js |
TodoMvc Demo
TodoMvc Source
TodoMvc Codepen
RxComp Codesandbox
RxComp Docs
Modules
module | library :-----------------|:----------------------------------------------------------------------------------------------| CoreModule | rxcomp FormModule | rxcomp-form
What is included
- Modules
imports
,exports
- Meta
inputs
,outputs
,hosts
,template
- Components
JsonComponent
- Structures
ForStructure
,IfStructure
- Directives
ClassDirective
,EventDirective
,HrefDirective
,InnerHtmlDirective
,SrcDirective
,StyleDirective
- Pipes
JsonPipe
- Declarative Syntax
- OnPush Strategy via
pushChanges
method - Automatic Subscription / Unsubscription
- Optional Chaining
- Component Template
- Http client with RxComp HttpModule
- Spa Router with RxComp RouterModule
- Reactive Forms with RxComp FormModule
- Form Validation with RxComp FormModule
- Server Side Rendering with RxComp ServerModule
What is NOT included
- ~~Two-Way Data Binding~~
- ~~Dependency Injection~~
Installation and Usage
ES6 via npm
This library depend on RxJs
install via npm or include via script
npm install rxjs rxcomp --save
CDN
For CDN, you can use unpkg
<script src="https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/rxcomp.min.js"></script>
The global namespace for RxComp is rxcomp
import { CoreModule, Module } from 'rxcomp';
Bootstrapping Module
import { CoreModule, Module } from 'rxcomp';
export default class AppModule extends Module {}
AppModule.meta = {
imports: [
CoreModule
],
declarations: [
TodoItemComponent,
DatePipe,
],
bootstrap: AppComponent,
};
Component Definition
export default class TodoItemComponent extends Component {
onChanges(changes) {
this.color = color(changes.item.id);
}
onToggle($event) {
this.toggle.next($event);
}
onRemove($event) {
this.remove.next($event);
}
}
TodoItemComponent.meta = {
selector: '[todo-item-component]',
inputs: ['item'],
outputs: ['toggle', 'remove'],
// hosts: { host: HostFactory },
template: /* html */ `
<button type="button" class="btn--toggle" (click)="onToggle(item)">
<div class="date" [innerHTML]="item.date | date : 'en-US' : { month: 'short', day: '2-digit', year: 'numeric' }"></div>
<div class="title" [innerHTML]="item.name"></div>
</button>
<button type="button" class="btn--remove" (click)="onRemove(item)">
<i class="icon--remove"></i>
</button>
`,
};
Declarative Syntax
<li class="list__item" *for="let item of items" [class]="{ done: item.done }" [style]="{ background: background, color: foreground, '--accent': accent }" todo-item-component [item]="item" (toggle)="onToggleItem($event)" (remove)="onRemoveItem($event)">
<button type="button" class="btn--toggle" (click)="onToggle(item)">
<div class="date" [innerHTML]="item.date | date : 'en-US' : { month: 'short', day: '2-digit', year: 'numeric' }"></div>
<div class="title" [innerHTML]="item.name"></div>
</button>
<button type="button" class="btn--remove" (click)="onRemove(item)">
<i class="icon--remove"></i>
</button>
</li>
LifeCycle Hooks
onInit() {
}
onChanges(changes) {
}
onView() {
}
onDestroy() {
}
Browser Compatibility
RxComp supports all browsers that are ES5-compliant (IE8 and below are not supported).
Contributing
Pull requests are welcome and please submit bugs 🐞
Install packages
npm install
Build, Serve & Watch
gulp
Build Dist
gulp build --target dist
Thank you for taking the time to provide feedback and review. This feedback is appreciated and very helpful 🌈
If you find it helpful, feel free to contribute in keeping this library up to date via PayPal
Contact
- Luca Zampetti [email protected]
- Follow @actarian on Twitter
Release Notes
Changelog here.