💎 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/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';

---

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 🌈

• Github Project Page

If you find it helpful, feel free to contribute in keeping this library up to date via PayPal

---

Contact

• Luca Zampetti lzampetti@gmail.com
• Follow @actarian on Twitter

---

Release Notes

Changelog here.