@vulkano/core 1.10.0 → 1.11.0

package/bootstrap/server.js

@@ -369,7 +369,7 @@ module.exports = function loadServer() {
         express: vulkano
       };
 
-      const envNunjucks = nunjucks.configure(views.path, nunjucksSettings);
+      const envNunjucks = nunjucks.configure([views.path, CORE_PATH], nunjucksSettings);
 
       app.server.views._engine = envNunjucks;
 
@@ -545,35 +545,124 @@ module.exports = function loadServer() {
 
       const server = await vulkano.listen(expressConfig.port);
 
+      // Routes registered
+      const routesRegistered = vulkano._router.stack // registered routes
+        .filter((r) => r.route && r.route.path !== '*') // take out all the middleware
+        .map((r) => {
+          return {
+            method: Object.keys(r.route.methods)[0].toUpperCase(),
+            path: r.route.path
+          };
+        });
+
       // ---------------
       // ERROR 404
       // ---------------
       vulkano.use((req, res) => {
+
         if (+res.statusCode >= 500 && +res.statusCode < 600) {
           throw new Error();
         }
-        res.status(404).render(`${views.path}/_shared/errors/404.html`);
+
+        res.status(404);
+
+        if (app.PRODUCTION) {
+          res.render(`${views.path}/_shared/errors/404.html`);
+          return;
+        }
+
+        // Verify if the error is a controller
+        const isController = routesRegistered.filter( (r) => {
+
+          const {
+            path: routePath
+          } = r || {};
+
+          const routerControllerToCheck = Filter.get(req.path, 'trim', '/').split('/')[0];
+
+          return routePath.startsWith(`/${routerControllerToCheck}`);
+
+        });
+
+        if (isController.length === 0) {
+
+          res.render(`${CORE_PATH}/views/errors/no_controller.html`, {
+            method: req.method,
+            controller: req.path.split('/')[1]
+          });
+
+          return;
+
+        }
+
+        // Show the action name error
+        res.render(`${CORE_PATH}/views/errors/no_action.html`, {
+          method: req.method,
+          controller: req.path.split('/')[1],
+          action: req.path.split('/')[2]
+        });
+
       });
 
       // ---------------
       // ERROR 5XX
       // ---------------
-      vulkano.use((err, req, res) => {
-        const status = err.status || res.statusCode || 500;
+      vulkano.use((err, req, res, next) => {
+
+        if (res.headersSent) {
+          next(err);
+          return;
+        }
+
+        const status = err ? (err.status || 500) : (res.statusCode || 500);
+
         res.status(status);
-        if (!res.xhr) {
-          if (+status > 400 && +status < 500) {
-            res.render(`${vulkano.get('views')}/_shared/errors/404.html`, { content: err.stack });
-          } else {
-            res.render(`${vulkano.get('views')}/_shared/errors/500.html`, { content: err.stack });
-          }
-        } else {
+
+        // AJAX Response
+        if (req.xhr) {
+
           res.jsonp({
             success: false,
-            error: err.message || err.error || err.invalidAttributes || err.toString() || 'Object Not Found',
-            data: (app.PRODUCTION) ? {} : (err.stack || {})
+            statusCode: status,
+            error: {
+              detail: err.message || err.error || err.invalidAttributes || err.toString() || 'Object Not Found',
+              stack: (app.PRODUCTION) ? {} : (err.stack || {})
+            }
           });
+
+          return;
+
         }
+
+        if (app.PRODUCTION) {
+
+          if (+status > 400 && +status < 500) {
+            res.render(`${vulkano.get('views')}/_shared/errors/404.html`);
+          } else {
+            res.render(`${vulkano.get('views')}/_shared/errors/500.html`);
+          }
+
+          return;
+
+        }
+
+        let errorViewToShow = `${CORE_PATH}/views/errors/exception.html`;
+
+        if (err.stack.indexOf('template not found') >= 0) {
+          errorViewToShow = `${CORE_PATH}/views/errors/no_view.html`;
+        }
+
+        res.render(errorViewToShow, {
+          statusCode: status,
+          method: req.method,
+          controller: req.path.split('/')[1],
+          action: req.path.split('/')[2],
+          view: err.stack.indexOf('template not found') >= 0
+            ? String( `${(err.stack.split('not found:')[1]).split('.')[0]}.html` ).trim()
+            : '',
+          stack: err.stack
+        });
+
       });
 
       app.vulkano = vulkano;

package/bootstrap/views.js

@@ -1,5 +1,12 @@
 const path = require('path');
 
+// Include all filters
+const coreFilters = require('include-all')({
+  dirname: path.join(CORE_PATH, 'views/filters'),
+  filter: /(.+)\.js$/,
+  optional: true
+});
+
 // Include all filters
 const appFilters = require('include-all')({
   dirname: path.join(APP_PATH, 'config/views/filters'),
@@ -20,7 +27,10 @@ module.exports = {
 
   engine: 'nunjucks',
 
-  filters: [appFilters || {}],
+  filters: [
+    coreFilters || {},
+    appFilters || {}
+  ],
 
   helpers: [appHelpers || {}]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vulkano/core",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "A MVC framework using Express 4",
   "license": "MIT",
   "author": "Vulkano Team",

package/views/errors/exception.html

@@ -0,0 +1,21 @@
+{% extends "../templates/exception.html" %}
+
+{% block content %}
+
+  <div class="flash error">
+    <h1>Internal Error</h1>
+    <p>
+      <strong>Error: {{ statusCode }} </strong>
+    </p>
+  </div>
+
+  {% if stack %}
+  <div class="flash stack">
+    <h2>Stack</h2>
+    <p>
+      {{ stack }}
+    </p>
+  </div>
+  {% endif %}
+
+{% endblock %}

package/views/errors/no_action.html

@@ -0,0 +1,49 @@
+{% extends "../templates/error.html" %}
+
+{% block content %}
+
+  <div class="flash error">
+    <h1>Action Not Found</h1>
+    <p>
+      <strong>Error: </strong>
+      The Action <b><em>{{ action }}</em></b> does not exist or could not be found.
+    </p>
+  </div>
+
+  <div class="flash valid">
+    <h2>How To Fix:</h2>
+    <h4>
+      <strong>
+        Create the method <em>{{ action }}</em> into the <em>{{ controller | vCamelCase }}Controller</em> to make it work correctly :
+      </strong>
+    </h4>
+    <pre>
+      <code>
+      /**
+       * Controller:
+       * {{ controller | vCamelCase }}Controller.js
+       */
+      module.exports = {
+
+        // Action to run
+        '{{ action if action else method | vLowercase }}': (req, res) => {
+
+          // Render your view
+          res.render('{{ controller | vLowercase }}/index.html');
+        }
+
+      };
+      </code>
+    </pre>
+  </div>
+
+  {% if stack %}
+  <div class="flash stack">
+    <h2>Stack</h2>
+    <p>
+      {{ stack }}
+    </p>
+  </div>
+  {% endif %}
+
+{% endblock %}

package/views/errors/no_controller.html

@@ -0,0 +1,51 @@
+{% extends "../templates/error.html" %}
+
+{% block content %}
+
+  <div class="flash error">
+    <h1>Controller Not Found</h1>
+    <p>
+      <strong>Error: </strong>
+      <em>{{ controller | vCamelCase }}Controller</em> not exist or could not be found.
+    </p>
+  </div>
+
+  <div class="flash valid">
+    <h2>How To Fix:</h2>
+    <h4>
+      <strong>
+        Create the file <em>{{ controller | vCamelCase }}Controller</em> in the path :
+        <br>
+        <em class="file">/app/controllers/{{ controller | vLowercase }}_controller.js</em>
+      </strong>
+    </h4>
+    <pre>
+      <code>
+      /**
+       * Controller:
+       * {{ controller | vCamelCase }}Controller.js
+       */
+      module.exports = {
+
+        // Action to run - {{ controller | vLowercase }}/hello
+        'hello': (req, res) => {
+
+          // Render your view
+          res.render('{{ controller | vLowercase }}/index.html');
+        }
+
+      };
+      </code>
+    </pre>
+  </div>
+
+  {% if stack %}
+  <div class="flash stack">
+    <h2>Stack</h2>
+    <p>
+      {{ stack }}
+    </p>
+  </div>
+  {% endif %}
+
+{% endblock %}

package/views/errors/no_view.html

@@ -0,0 +1,31 @@
+{% extends "../templates/error.html" %}
+
+{% block content %}
+
+  <div class="flash error">
+    <h1>View Not Found</h1>
+    <p>
+      <strong>Error: </strong>
+      The template <b><em>{{ view }}</em></b> does not exist or could not be found.
+    </p>
+  </div>
+
+  <div class="flash valid">
+    <h2>How To Fix:</h2>
+    <h4>
+      <strong>
+        Create the view <em>{{ view }}</em> into the <em>{{ APP_PATH }}/views</em> to make it work correctly :
+      </strong>
+    </h4>
+  </div>
+
+  {% if stack %}
+  <div class="flash stack">
+    <h2>Stack</h2>
+    <p>
+      {{ stack }}
+    </p>
+  </div>
+  {% endif %}
+
+{% endblock %}

package/views/filters/vCamelCase.js

@@ -0,0 +1,10 @@
+module.exports = (str) => {
+
+  return String(str || '')
+    .split('_')
+    .map( (t) => {
+      return `${t.charAt(0).toUpperCase()}${t.slice(1).toLowerCase()}`;
+    })
+    .join('');
+
+};

package/views/filters/vLowercase.js

@@ -0,0 +1,8 @@
+module.exports = (str) => {
+
+  return String(str || '')
+    .split(' ')
+    .join('_')
+    .toLowerCase();
+
+};

package/views/templates/error.html

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Oops! something was wrong :( - VulkanoJS</title>
+    <meta charset=UTF-8 >
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+    <style>
+
+      * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+      html{ font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100% }
+      html, body { margin: 0; padding: 0; }
+
+      .flash {
+        margin: 0;
+        min-height: 32px;
+        padding:3px 50px;
+        background-repeat: no-repeat;
+        background-position: 10px center;
+        line-height: 1.7;
+        border-radius: 2px;
+      }
+      .error {
+        color: #D8000C;
+        background-color: #FFBABA;
+      }
+      .info {
+        color: #00529B;
+        background-color: #BDE5F8;
+      }
+      .valid {
+        color: #4F8A10;
+        background-color: #DFF2BF;
+      }
+      .warning {
+        color: #9F6000;
+        background-color: #FEEFB3;
+      }
+
+      pre {
+        tab-size: 2;
+      }
+
+      body {
+        background: #f2f2f2;
+      }
+
+      .file{ word-break: break-word; }
+
+    </style>
+  </head>
+  <body>
+
+
+    <div id="vulkano-error">
+      {% block content %} {% endblock %}
+    </div>
+
+    <footer>
+      <div class="flash info">
+        <p>
+          <b>In PRODUCTION this error does not appear :), it shows the app error template:</b>
+        </p>
+        <p>
+          /app/views/_shared/errors/404.html
+        </p>
+        <p>
+          <span style="font-weight: normal">You can edit it as you want!</span>
+        </p>
+      </div>
+     </footer>
+
+
+    <!-- and it's easy to individually load additional languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
+
+    <script>hljs.highlightAll();</script>
+  </body>
+</html>

package/views/templates/exception.html

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <title>Oops! something was wrong :( - VulkanoJS</title>
+    <meta charset=UTF-8 >
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+    <style>
+
+      * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+      html{ font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100% }
+      html, body { margin: 0; padding: 0; }
+
+      .flash {
+        margin: 0;
+        min-height: 32px;
+        padding:3px 50px;
+        background-repeat: no-repeat;
+        background-position: 10px center;
+        line-height: 1.7;
+        border-radius: 2px;
+      }
+      .error {
+        color: #D8000C;
+        background-color: #FFBABA;
+      }
+      .info {
+        color: #00529B;
+        background-color: #BDE5F8;
+      }
+      .valid {
+        color: #4F8A10;
+        background-color: #DFF2BF;
+      }
+      .warning {
+        color: #9F6000;
+        background-color: #FEEFB3;
+      }
+
+      pre {
+        tab-size: 2;
+      }
+
+      body {
+        background: #f2f2f2;
+      }
+
+      .file{ word-break: break-word; }
+
+    </style>
+  </head>
+  <body>
+
+
+    <div id="vulkano-error">
+      {% block content %} {% endblock %}
+    </div>
+
+    <footer>
+      <div class="flash info">
+        <p>
+          <b>In PRODUCTION this error does not appear :), it shows the app error template:</b>
+        </p>
+        <p>
+          /app/views/_shared/errors/500.html
+        </p>
+        <p>
+          <span style="font-weight: normal">You can edit it as you want!</span>
+        </p>
+      </div>
+     </footer>
+
+
+    <!-- and it's easy to individually load additional languages -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
+
+    <script>hljs.highlightAll();</script>
+  </body>
+</html>