Fix page refreshing for SPAs (#347)

* Fix SPA page refreshing

* Add 'spaurlrewrites' to cli

* Update readme

* Update xmldom to @xmldom/xmldom

README.md

@@ -15,7 +15,7 @@ npm install -g cordova-simulate
 From the command line anywhere within a Cordova project, enter the following:
 
 ```
-simulate [<platform>] [--device=<DEVICE_ID>] [--corsproxy=<true|false>] [--dir=<DIR>] [--livereload=<true|false>] [--port=<PORT>] [--forceprepare=<true|false>] [--simhostui=<SIM_HOST_UI_MODULE_PATH>] [--simulationpath=<SIMULATION_PATH>] [--target=<BROWSER>] [--lang=<LANG>] [--theme=<THEME>] [--middleware=<MIDDLEWARE_PATH>] [--generateids=<true|false>]
+simulate [<platform>] [--device=<DEVICE_ID>] [--corsproxy=<true|false>] [--dir=<DIR>] [--livereload=<true|false>] [--port=<PORT>] [--forceprepare=<true|false>] [--simhostui=<SIM_HOST_UI_MODULE_PATH>] [--simulationpath=<SIMULATION_PATH>] [--target=<BROWSER>] [--lang=<LANG>] [--theme=<THEME>] [--middleware=<MIDDLEWARE_PATH>] [--generateids=<true|false>] [--spaurlrewrites=<true|false>]
 ```
 
 See parameters description in the [API](#api) section.
@@ -54,6 +54,7 @@ Where `opts` is an object with the following properties (all optional):
 * **middleware** - a path that points to express middleware. This can be used to write custom plugins that require the full power of NodeJS.
 * **generateids** - a boolean that generates unique ids for simulated devices at startup. Defaults to `false`.
 * **livereloaddelay** - the delay in milliseconds between saving of a modified file and the application page reloading. You can try to increase the delay in case the simulator server crashes while frequent page reloading. Defaults to `200ms`.
+* **spaurlrewrites** - a boolean. Set to `true` to fix page refreshing in case the default application URL (`/index.html`) in the browser was changed by the router in single page applications. Defaults to `false`.
 
 
 # What it does

bin/simulate

@@ -36,7 +36,7 @@ function processArgs() {
     try {
         var parserOptions = {
             string: ['dir', 'simhostui', 'target', 'simulationpath', 'device', 'lang', 'theme', 'middleware'],
-            boolean: ['livereload', 'forceprepare', 'corsproxy', 'generateids'],
+            boolean: ['livereload', 'forceprepare', 'corsproxy', 'generateids', 'spaurlrewrites'],
             default: {
                 dir: null,
                 livereload: true,
@@ -49,7 +49,8 @@ function processArgs() {
                 lang: null,
                 theme: null,
                 middeware: null,
-                generateids: false
+                generateids: false,
+                spaurlrewrites: false
             },
             unknown: unknownOptHandler
         };
@@ -73,7 +74,8 @@ function processArgs() {
             lang: parsed.lang,
             theme: parsed.theme,
             middleware: parsed.middleware,
-            generateids: parsed.generateids
+            generateids: parsed.generateids,
+            spaurlrewrites: parsed.spaurlrewrites
         };
     } catch (err) {
         throw new Error('Error parsing arguments: ' + (err.message || err) + os.EOL + os.EOL + getUsageString());
@@ -96,7 +98,8 @@ function getUsageString() {
         '[--lang LANG]',
         '[--theme THEME]',
         '[--middleware MIDDLEWARE_PATH]',
-        '[--generateids (GENERATEIDS)]'
+        '[--generateids (GENERATEIDS)]',
+        '[--spaurlrewrites (SPA_URL_REWRITES)]'
     ];
 
     return message + options.join(' ') + os.EOL;

package-lock.json

@@ -66,6 +66,12 @@
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
     },
+    "@xmldom/xmldom": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
+      "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==",
+      "dev": true
+    },
     "JSONStream": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
@@ -6138,12 +6144,6 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
       "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
     },
-    "xmldom": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
-      "integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA==",
-      "dev": true
-    },
     "xmlhttprequest-ssl": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz",

package.json

@@ -44,14 +44,14 @@
     "uuid": "^3.3.2"
   },
   "devDependencies": {
+    "@xmldom/xmldom": "^0.7.5",
     "gulp": "^4.0.2",
     "gulp-eslint": "^6.0.0",
     "gulp-jsonlint": "^1.3.2",
     "in-publish": "^2.0.0",
     "mstranslator": "^3.0.0",
     "parse5": "^2.2.1",
-    "pretty-data": "^0.40.0",
-    "xmldom": "^0.5.0"
+    "pretty-data": "^0.40.0"
   },
   "scripts": {
     "update-loc": "node ./tools/i18n/update"

src/server/server.js

@@ -169,7 +169,8 @@ SimulationServer.prototype._prepareRoutes = function (simHostMiddleware) {
     var app = this._cordovaServer.app;
 
     var streamSimHostHtml = this._streamSimHostHtml.bind(this),
-        streamAppHostHtml = this._streamAppHostHtml.bind(this);
+        streamAppHostHtml = this._streamAppHostHtml.bind(this),
+        defaultHandler = this._defaultHandler.bind(this);
 
     app.get('/simulator/', streamSimHostHtml);
     app.get('/simulator/*.html', streamSimHostHtml);
@@ -187,6 +188,10 @@ SimulationServer.prototype._prepareRoutes = function (simHostMiddleware) {
     app.use(this._project.getRouter());
     app.use('/simulator', cordovaServe.static(this._hostRoot['sim-host']));
     app.use('/simulator/thirdparty', cordovaServe.static(dirs.thirdParty));
+
+    if (this._config.spaUrlRewrites) {
+        app.get('*', defaultHandler);
+    }
 };
 
 /**
@@ -367,6 +372,24 @@ SimulationServer.prototype._sendSimHostThemeCssFile = function (request, respons
     }
 };
 
+/**
+ * @param {object} request
+ * @param {object} response
+ * @param {function} next
+ * @private
+ */
+SimulationServer.prototype._defaultHandler = function (request, response, next) {
+    var staticFileReg = /\/[^\/]*\.\w+$/;
+
+    if (staticFileReg.test(request.path)) {
+        return next();
+    }
+
+    // If the URL doesn't point to a static file and match any of our routes, 
+    // then redirect to the 'index.html' to avoid 'Cannot GET' errors
+    response.redirect('/index.html');
+};
+
 /**
  * Keep track of the clients connected to the server. When a new client is connected,
  * assign an ID and listen for the close event, to remove it from the tracked active

src/server/simulator.js

@@ -241,6 +241,7 @@ function parseOptions(opts) {
     config.forcePrepare = !!opts.forceprepare;
     config.xhrProxy = opts.hasOwnProperty('corsproxy') ? !!opts.corsproxy : true;
     config.touchEvents = opts.hasOwnProperty('touchevents') ? !!opts.touchevents : true;
+    config.spaUrlRewrites = opts.hasOwnProperty('spaurlrewrites') ? !!opts.spaurlrewrites : false;
     config.middleware = opts.middleware;
     config.lang = normalizeLanguage(opts.lang);
 

tools/i18n/update.js

@@ -7,7 +7,7 @@ var fs = require('fs'),
     xliffConv = require('./xliff-json-conv'),
     parse5 = require('parse5'),
     pd = require('pretty-data').pd,
-    XMLSerializer = require('xmldom').XMLSerializer,
+    XMLSerializer = require('@xmldom/xmldom').XMLSerializer,
     translate = require('./translate');
 
 var translatedAttributes = ['label', 'caption', 'spoken-text', 'aria-label', 'name'];

tools/i18n/xliff-json-conv.js

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 
 var fs = require('fs'),
-    DOMParser = require('xmldom').DOMParser;
+    DOMParser = require('@xmldom/xmldom').DOMParser;
 
 function parseXliffFile(xliffFile) {
     return parseXliff(fs.readFileSync(xliffFile, 'utf8'));