Nth Permutation Mathematics

    rxcomp
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.21 • Public • Published

    💎 RxComp

    Licence

    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 forks GitHub stars GitHub followers

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

    PayPal


    Contact

    Twitter Follow


    Release Notes

    Changelog here.

    Install

    npm i rxcomp

    DownloadsWeekly Downloads

    53

    Version

    1.0.0-beta.21

    License

    MIT

    Unpacked Size

    618 kB

    Total Files

    132

    Last publish

    Collaborators

    • actarian