# AWC Router [![Build Status](https://dev.azure.com/colscott/a-wc-router/_apis/build/status/colscott.a-wc-router?branchName=master)](https://dev.azure.com/colscott/a-wc-router/_build/latest?definitionId=1&branchName=master) ## Features - Web Component - Code splitting/lazy loading - Declarative routing - Nested routing - Named/auxiliary routing and outlets - Path params - Guards - Works with regular anchor tags for links - Automatically styling active links - Zero dependencies ## Examples Examples and further documentation can be found in the examples folder and are hosted [here](https://colscott.github.io/a-wc-router/examples/) To run the examples locally run: node exampleServer.js Then enter this url in the browser: http://localhost:3000/a-wc-router/examples/router/ # Install npm i a-wc-router # Usage ## With HTML ```html OR use a CDN Page 1 Page 2 This content never shows because of the last catch all route ``` ## With Custom Element ```js import '../node_modules/a-wc-router/build/es6-bundled/src/router.js'; // Or use a CDN import 'https://unpkg.com/a-wc-router/src/router.js'; import 'https://cdn.jsdelivr.net/npm/a-wc-router/src/router.js'; import './my-page1.js'; class MyApp extends HTMLElement { connectedCallback() { if (this.isConnected) { this.innerHTML = ` Page 1 Page 2 This content never shows because of the last catch all route `; } } } customElements.define('my-app', MyApp); ``` # Routing ## Routing using a router, outlet, routes and HTML anchors ```html Please click a link .... click for user-main custom element click for item-main custom element ``` ## Passing data to routes ```html ``` ```html click for user with required param click for user with optional param click for user with at least one param click for user any number of params click for user with two named params ``` ## Code splitting and eager loading modules for routes ```html ``` ## Code splitting and lazy loading modules for routes ```html ``` ## Nested Routing ```html // Code snippet from user-main with nested routing connectedCallback() { if (this.connected && !this.innerHTML) { this.innerHTML = ` `; } } .... Navigate to the nested route ``` ## Base URL Routing only takes place if a url also matches the document.baseURI. ```html Wont route Will route ``` # Named outlets (no router or routes required) ## Routing using named outlets and HTML anchors ```html Please click a link .... Assign element to outlet main Assign element to outlet ``` ## Passing data to named outlets ```html Please click a link .... Assign to outlet ``` ## Code splitting and eager loading modules for named outlets ```html Please click a link .... Load from /path-to/user-main.js Load from /path-to/user-main.js ``` # General to Routing and Named Outlets ## Styling link matching the active routes ```html Regular anchor - will route but wont get active status styling Router link - will route and get active status styling ``` ## Navigating using HTML anchors ```html Regular anchor - will route but wont get active status styling outer link - will route and get active status styling ``` ## Navigating using events ```js window.dispatchEvent( new CustomEvent( 'navigate', { detail: { href: '/(user/123' }})); ``` ## Navigating using RouterElement ```js RouterElement.navigate('myUrl'); RouterElement.navigate('/user/123'); ``` ## Guards ```js window.addEventListener('onRouteLeave', guard); guard(event) { if (document.getElementById('guard').checked) { // preventDefault to prevent the navigation event.preventDefault(); } } ``` ## Lifecycle Events ### onRouterAdded ### onRouteMatch ### onRouteLeave ### onRouteNotHandled ### onRouteCancelled ### onLinkActiveStatusUpdated ### onOutletUpdated ## Testing To run tests: npm test