💎 RxComp RouterModule

RxComp Router module for RxComp, developed with RxJs.

lib & dependancy | size :--------------------|:----------------------------------------------------------------------------------------------| rxcomp-router.min.js | rxcomp-router.min.js | rxcomp.min.js | rxcomp.min.js | rxjs.min.js | rxjs.min.js |

RxComp Router Demo
RxComp Router Api

Installation and Usage

ES6 via npm

This library depend on RxComp and RxJs
install via npm or include via script

npm install rxjs rxcomp rxcomp-router --save

CDN

For CDN, you can use unpkg

<script src="https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js" crossorigin="anonymous" SameSite="none Secure"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/rxcomp.min.js" crossorigin="anonymous" SameSite="none Secure"></script>  
<script src="https://unpkg.com/[email protected]/dist/umd/rxcomp-router.min.js" crossorigin="anonymous" SameSite="none Secure"></script>  

The global namespace for RxComp is rxcomp

import { CoreModule, Module } from 'rxcomp';

The global namespace for RxComp RouterModule is rxcomp.router

Bootstrapping Module

import { Browser, CoreModule, Module } from 'rxcomp';
import { RouterModule } from 'rxcomp-router';
import AppComponent from './app.component';

export default class AppModule extends Module {}

AppModule.meta = {
  imports: [
    CoreModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: IndexComponent, data: { title: 'Dashboard' } },
      {
        path: 'detail/:detailId', component: DetailComponent, data: { title: 'Detail' },
        children: [
          { path: 'media', component: SubComponent, data: { title: 'Media' } },
          { path: 'files', component: SubComponent, data: { title: 'Files' } }
        ], canActivateChild: [customActivator],
      },
      { path: 'data/:data', component: DataComponent, data: { title: 'Data' } },
      { path: 'contacts', component: ContactsComponent, data: { title: 'Contacts' }, canActivate: [customActivator] },
      { path: '**', component: NotFoundComponent },
    ]),
  ],
  declarations: [
    IndexComponent,
    DataComponent,
    DetailComponent,
    ContactsComponent,
  ],
  bootstrap: AppComponent,
};

Browser.bootstrap(AppModule);

Location Strategy

You can change the default location strategy using the LocationStrategyHash class.

RouterModule.forRoot([
  { path: '', redirectTo: '/index', pathMatch: 'full' },
]).useStrategy(LocationStrategyHash),

Router events

You can subscribe to router events.

RouterService.observe$.pipe(
  tap((event: RouterEvent) => {
    if (event instanceof NavigationEnd
      || event instanceof NavigationCancel
      || event instanceof NavigationError) {
      console.log(event);
    }
  }),
  takeUntil(this.unsubscribe$),
).subscribe();

event name | description :--------------------|:----------------------------------------------------------------------------------------------| NavigationStart | An event triggered when navigation starts. RoutesRecognized | An event triggered when the Router parses the URL and the routes are recognized. GuardsCheckStart | An event triggered at the start of the Guard phase of routing. ChildActivationStart| An event triggered at the start of the child-activation part of the Resolve phase of routing. ActivationStart | An event triggered at the start of the activation part of the Resolve phase of routing. GuardsCheckEnd | An event triggered at the end of the Guard phase of routing. ResolveStart | An event triggered at the the start of the Resolve phase of routing. ResolveEnd | An event triggered at the end of the Resolve phase of routing. ActivationEnd | An event triggered at the end of the activation part of the Resolve phase of routing. ChildActivationEnd | An event triggered at the end of the child-activation part of the Resolve phase of routing. RouteConfigLoadStart| An event triggered before the Router lazy loads a route configuration. RouteConfigLoadEnd | An event triggered after a route has been lazy loaded. NavigationEnd | An event triggered when navigation ends successfully. NavigationCancel | An event triggered when navigation is canceled. This is due to a Route Guard returning false during navigation. NavigationError | An event triggered when navigation fails due to an unexpected error.

Inspecting route

You can inspect the current activated route data$ or params$ from the host RouterOutlet.

export default class DetailComponent extends Component {
    host!: RouterOutletStructure;
    onInit() {
        this.host.route.data$.subscribe(data => {
          this.detailId = data.detailId;
        });
    }
    static meta: IFactoryMeta = {
        selector: '[detail-component]',
        hosts: { host: RouterOutletStructure },
        template: /* html */`
          <div class="title">Detail {{detailId}}</div>
        `,
    };
}

Route Guards

You can implement your custom route guards. There are four type of guards:
canDeactivate, canLoad, canActivate and canActivateChild.

export class UserLogged implements ICanActivate {
    canActivate(route: RouteSnapshot): RouterActivatorResult {
        return isLogged ? true : ['/login'];
    }
}

RouterModule.forRoot([
  { path: 'me', component: UserComponent, canActivate: [UserLogged] },
]),

View component

Extending the View component you obtain a new meta attribute transitions.
With this attribute you can create animations between the enter and leave state of a router view.
Just set an object with this custom properties enter:, leave:, from:a-custom-route-path, to:another-custom-route-path, once:.
Once method will be called only once.

export default class DetailComponent extends View {
	static meta: IViewMeta = {
		transitions: {
			'enter:': (node: IElement) => { ... },
			'leave:': (node: IElement) => { ... },
      'from:dashboard': (node: IElement) => { ... },      
			'to:dashboard': (node: IElement) => { ... },   
			'once:': (node: IElement) => { ... },
		}
	};
}

On these properties you can return these type of values:

Observable<void> | Promise<void> | (() => void) | void;

Transitions

To help you implement custom animations you can then use the transition$ observable that has a complete event.

import { transition$, View } from 'rxcomp-router';

export default class DetailComponent extends View {    
	static meta: IViewMeta = {
		transitions: {
			'enter:': (node: IElement) => transition$(complete => {
				gsap.set(node, { opacity: 0 });
				gsap.to(node, {
					opacity: 1,
					duration: 1,
					ease: Power3.easeInOut,
					onComplete: () => {
						complete(true);
					}
				});
			}),
		}
	};
}

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 [email protected]
• Follow @actarian on Twitter

Release Notes

Changelog here.