@nent/core
Version:
210 lines (209 loc) • 5.96 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, h, Host, Prop, State, writeTask, } from '@stencil/core';
import { actionBus, eventBus } from '../../services/actions';
import { commonState, debugIf } from '../../services/common';
import { RouterService } from './services/router';
import { routingState } from './services/state';
/**
* The root element is the base container for the view-engine and its
* child elements. This element should contain root-level HTML that
* is global to every view along with \<n-view\>
* elements placed within any global-html.
*
* @system routing
* @extension actions
* @extension elements
* @extension provider
*/
export class ViewRouter {
constructor() {
/**
* This is the root path that the actual page is,
* if it isn't '/', then the router needs to know
* where to begin creating paths.
*/
this.root = '/';
/**
* Delay redirecting to the start path by
* this value in seconds.
*/
this.startDelay = 0;
/**
* Turn on debugging to get helpful messages from the
* app, routing, data and action systems.
*/
this.debug = false;
/**
* Enable the not-found display.
* To customize it, use:
* slot="not-found"
*/
this.notFound = false;
}
componentWillLoad() {
let { appTitle: title, appDescription: description, appKeywords: keywords, } = this.el.closest('n-app') || {
appTitle: window.document.title,
};
const router = new RouterService(window, writeTask, eventBus, actionBus, this.root, title, description, keywords, this.transition, this.scrollTopOffset);
commonState.routingEnabled = true;
routingState.router = router;
routingState.debug = this.debug || commonState.debug;
}
render() {
return (h(Host, { style: { display: 'block' } },
h("slot", null),
this.notFound ? (h("div", { hidden: routingState.hasExactRoute },
h("slot", { name: "not-found" }))) : null));
}
componentDidLoad() {
const startPath = this.startPath;
function start() {
var _a;
(_a = routingState.router) === null || _a === void 0 ? void 0 : _a.initialize(startPath);
debugIf(commonState.debug, 'n-views: initialized');
}
if (this.startDelay > 0)
setTimeout(() => {
start();
}, this.startDelay * 1000);
else
start();
}
disconnectedCallback() {
var _a;
commonState.routingEnabled = false;
(_a = routingState.router) === null || _a === void 0 ? void 0 : _a.destroy();
}
static get is() { return "n-views"; }
static get properties() { return {
"root": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "This is the root path that the actual page is,\nif it isn't '/', then the router needs to know\nwhere to begin creating paths."
},
"attribute": "root",
"reflect": false,
"defaultValue": "'/'"
},
"transition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Navigation transition between routes.\nThis is a CSS animation class."
},
"attribute": "transition",
"reflect": false
},
"startPath": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "This is the start path a user should\nland on when they first land on this app."
},
"attribute": "start-path",
"reflect": false
},
"startDelay": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Delay redirecting to the start path by\nthis value in seconds."
},
"attribute": "start-delay",
"reflect": false,
"defaultValue": "0"
},
"scrollTopOffset": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Header height or offset for scroll-top on this\nand all views."
},
"attribute": "scroll-top-offset",
"reflect": false
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Turn on debugging to get helpful messages from the\napp, routing, data and action systems."
},
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"notFound": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enable the not-found display.\nTo customize it, use:\nslot=\"not-found\""
},
"attribute": "not-found",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"matchedPath": {}
}; }
static get elementRef() { return "el"; }
}