Skip to content

actarian/rxcomp-router

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

20 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ’Ž RxComp RouterModule

Licence

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/rxjs@6.6.2/bundles/rxjs.umd.min.js" crossorigin="anonymous" SameSite="none Secure"></script>
<script src="https://unpkg.com/rxcomp@1.0.0-beta.19/dist/umd/rxcomp.min.js" crossorigin="anonymous" SameSite="none Secure"></script>  
<script src="https://unpkg.com/rxcomp-router@1.0.0-beta.19/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 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.