/** * Module dependencies. * @private */ import HTTP_METHODS from './methods'; import Settings from './settings'; import Router, {Route} from './router'; import Middleware from './middleware'; /** * Application class. */ export default class Application { /** * Initialize the application. * * - setup default configuration * * @private */ constructor() { this.routers = []; this.isDOMLoaded = false; this.isDOMReady = false; this.settings = new Settings(); } /** * Assign `setting` to `val`, or return `setting`'s value. * * app.set('foo', 'bar'); * app.set('foo'); * // => "bar" * * @param {String} setting * @param {*} [val] * @return {app} for chaining * @public */ set(...args) { // get behaviour if (args.length === 1) { return this.settings.get([args]); } // set behaviour const [name, value] = args; this.settings.set(name, value); return this; } /** * Listen for DOM initialization and history state changes. * * The callback function is called once the DOM has * the `document.readyState` equals to 'interactive'. * * app.listen(()=> { * console.log('App is listening requests'); * console.log('DOM is ready!'); * }); * * * @param {Function} callback * @public */ listen(callback) { window.onbeforeunload = () => { this._callMiddlewareMethod('exited'); }; window.onpopstate = (event) => { if (event.state) { const {request, response} = event.state; const currentRoutes = this._routes(request.uri, request.method); this._callMiddlewareMethod('entered', currentRoutes, request); this._callMiddlewareMethod('updated', currentRoutes, request, response); } }; document.onreadystatechange = () => { const request = {method: 'GET', uri: window.location.pathname + window.location.search}; const response = {status: 200, statusText: 'OK'}; const currentRoutes = this._routes(); // DOM state if (document.readyState === 'loading' && !this.isDOMLoaded) { this.isDOMLoaded = true; this._callMiddlewareMethod('entered', currentRoutes, request); } else if (document.readyState === 'interactive' && !this.isDOMReady) { if (!this.isDOMLoaded) { this.isDOMLoaded = true; this._callMiddlewareMethod('entered', currentRoutes, request); } this.isDOMReady = true; this._callMiddlewareMethod('updated', currentRoutes, request, response); if (callback) { callback(request, response); } } }; } /** * Returns a new `Router` instance for the _uri_. * See the Router api docs for details. * * app.route('/'); * // => new Router instance * * @param {String} uri * @return {Router} for chaining * * @public */ route(uri) { const router = new Router(uri); this.routers.push(router); return router; } /** * Use the given middleware function or object, with optional _uri_. * Default _uri_ is "/". * * // middleware function will be applied on path "/" * app.use((req, res, next) => {console.log('Hello')}); * * // middleware object will be applied on path "/" * app.use(new Middleware()); * * @param {String} uri * @param {Middleware|Function} middleware object or function * @return {app} for chaining * * @public */ use(...args) { let {baseUri, router, middleware} = toParameters(args); if (router) { router.baseUri = baseUri; } else if (middleware) { router = new Router(baseUri); for (const method of HTTP_METHODS) { router[method.toLowerCase()](middleware); } } else { throw new TypeError('method takes at least a middleware or a router'); } this.routers.push(router); return this; } /** * Gather routes from all routers filtered by _uri_ and HTTP _method_. * See Router#routes() documentation for details. * * @private */ _routes(uri=window.location.pathname + window.location.search, method='GET') { const currentRoutes = []; for (const router of this.routers) { currentRoutes.push(...router.routes(uri, method)); } return currentRoutes; } /** * Call `Middleware` method or middleware function on _currentRoutes_. * * @private */ _callMiddlewareMethod(meth, currentRoutes, request, response) { if (meth === 'exited') { // currentRoutes, request, response params not needed for (const router of this.routers) { for (const route of router.visited()) { if (route.middleware.exited) { route.middleware.exited(route.visited); route.visited = null; } } } return; } for (const route of currentRoutes) { if (meth === 'updated') { route.visited = request; } if (route.middleware[meth]) { route.middleware[meth](request, response); if (route.middleware.next && !route.middleware.next()) { break; } } else if (meth !== 'entered') { // calls middleware method let breakMiddlewareLoop = true; const next = () => { breakMiddlewareLoop = false; }; route.middleware(request, response, next); if (breakMiddlewareLoop) { break; } } } } /** * Make an ajax request. Manage History#pushState if history object set. * * @private */ _fetch(request, resolve, reject) { let {method, uri, headers, data, history} = request; const httpMethodTransformer = this.get(`http ${method} transformer`); if (httpMethodTransformer) { uri = httpMethodTransformer.uri ? httpMethodTransformer.uri({uri, headers, data}) : uri; headers = httpMethodTransformer.headers ? httpMethodTransformer.headers({uri, headers, data}) : headers; data = httpMethodTransformer.data ? httpMethodTransformer.data({uri, headers, data}) : data; } // calls middleware exited method this._callMiddlewareMethod('exited'); // gathers all routes impacted by the uri const currentRoutes = this._routes(uri, method); // calls middleware entered method this._callMiddlewareMethod('entered', currentRoutes, request); // invokes http request this.settings.get('http requester').fetch(request, (req, res) => { if (history) { window.history.pushState({request: req, response: res}, history.title, history.uri); } this._callMiddlewareMethod('updated', currentRoutes, req, res); if (resolve) { resolve(req, res); } }, (req, res) => { this._callMiddlewareMethod('failed', currentRoutes, req, res); if (reject) { reject(req, res); } }); } } HTTP_METHODS.reduce((reqProto, method) => { /** * Use the given middleware function or object, with optional _uri_ on * HTTP methods: get, post, put, delete... * Default _uri_ is "/". * * // middleware function will be applied on path "/" * app.get((req, res, next) => {console.log('Hello')}); * * // middleware object will be applied on path "/" and * app.get(new Middleware()); * * // get a setting value * app.set('foo', 'bar'); * app.get('foo'); * // => "bar" * * @param {String} uri or setting * @param {Middleware|Function} middleware object or function * @return {app} for chaining * @public */ const middlewareMethodName = method.toLowerCase(); reqProto[middlewareMethodName] = function(...args) { let {baseUri, middleware, which} = toParameters(args); if (middlewareMethodName === 'get' && typeof which === 'string') { return this.settings.get(which); } if (!middleware) { throw new TypeError(`method takes a middleware ${middlewareMethodName === 'get' ? 'or a string' : ''}`); } const router = new Router(); router[middlewareMethodName](baseUri, middleware); this.routers.push(router); return this; }; /** * Ajax request (get, post, put, delete...). * * // HTTP GET method * httpGet('/route1'); * * // HTTP GET method * httpGet({uri: '/route1', data: {'p1': 'val1'}); * // uri invoked => /route1?p1=val1 * * // HTTP GET method with browser history management * httpGet({uri: '/api/users', history: {state: {foo: "bar"}, title: 'users page', uri: '/view/users'}); * * Samples above can be applied on other HTTP methods. * * @param {String|Object} uri or object containing uri, http headers, data, history * @param {Function} success callback * @param {Function} failure callback * @public */ const httpMethodName = 'http'+method.charAt(0).toUpperCase() + method.slice(1).toLowerCase(); reqProto[httpMethodName] = function(request, resolve, reject) { let {uri, headers, data, history} = request; if (!uri) { uri = request; } return this._fetch({ uri, method, headers, data, history }, resolve, reject); }; return reqProto; }, Application.prototype); export function toParameters(args) { let baseUri, middleware, router, which; if (args && args.length > 0) { if (args.length === 1) { [which,] = args; } else { [baseUri, which,] = args; } if (which instanceof Router) { router = which; } else if ((which instanceof Middleware) || (typeof which === 'function')) { middleware = which; } } return {baseUri, middleware, router, which}; }