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
module | library |
---|---|
CoreModule | rxcomp |
FormModule | rxcomp-form |
imports
, exports
inputs
, outputs
, hosts
, template
JsonComponent
ForStructure
, IfStructure
ClassDirective
, EventDirective
, HrefDirective
, InnerHtmlDirective
, SrcDirective
, StyleDirective
JsonPipe
pushChanges
methodThis library depend on RxJs
install via npm or include via script
npm install rxjs rxcomp --save
For CDN, you can use unpkg
<script src="https://unpkg.com/rxjs@6.6.2/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/rxcomp@1.0.0-beta.20/dist/umd/rxcomp.min.js"></script>
The global namespace for RxComp is rxcomp
import { CoreModule, Module } from 'rxcomp';
import { CoreModule, Module } from 'rxcomp';
export default class AppModule extends Module {}
AppModule.meta = {
imports: [
CoreModule
],
declarations: [
TodoItemComponent,
DatePipe,
],
bootstrap: AppComponent,
};
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>
`,
};
<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>
onInit() {
}
onChanges(changes) {
}
onView() {
}
onDestroy() {
}
RxComp supports all browsers that are ES5-compliant (IE8 and below are not supported).
Pull requests are welcome and please submit bugs 🐞
npm install
gulp
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
Changelog here.