1.2.0 improved webpack

ArthurBeaulieu · Oct 1, 2020 · a0bc107 · a0bc107
1 parent c8f57bf
commit a0bc107
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,14 @@
 # Logger.js
 
-![](https://badgen.net/badge/version/1.1.0/blue)
+![](https://badgen.net/badge/version/1.2.0/blue)
 [![License](https://img.shields.io/github/license/ArthurBeaulieu/Logger.js.svg)](https://github.com/ArthurBeaulieu/Logger.js/blob/master/LICENSE.md)
-
 ![](https://badgen.net/badge/documentation/written/green)
 ![](https://badgen.net/badge/test/passed/green)
 ![](https://badgen.net/badge/dependencies/none/green)
 
 `Logger.js` is a JavaScript ES6 module that offers a unified console output across Firefox and Chromium based browsers. It handles standard errors raised for example, with `new Error()`, and is also able to handle custom errors to fit you application needs.
 
-With ~4Ko minified, Logger.js is designed to be stable and remain as light as possible. It is meant to be used application wide to abstract this output layer into basic calls.
+With ~3Ko minified, Logger.js is designed to be stable and remain as light as possible. It is meant to be used application wide to abstract this output layer into basic calls.
 
 # Get Started
 
@@ -62,14 +61,20 @@ Notification.new = options => {
 }
 ```
 
+You're now good to go! If however you need more information, you can read the online [documentation](https://arthurbeaulieu.github.io/Logger.js/doc/).
+
 # Development
 
 If you clone this repository, you can `npm install` to install development dependencies. This will allow you to build dist file, run the component tests or generate the documentation ;
 
 - `npm run build` to generate the minified file ;
 - `npm run dev` to watch for any change in source code ;
+- `npm run web-server` to launch a local development server ;
 - `npm run doc` to generate documentation ;
-- `npm run test` to perform all test at once ;
+- `npm run test` to perform all tests at once ;
 - `npm run testdev` to keep browsers open to debug tests ;
+- `npm run beforecommit` to perform tests, generate doc and bundle the JavaScript.
+
+To avoid CORS when locally loading the example HTML file, run the web server. Please do not use it on a production environment. Unit tests are performed on both Firefox and Chrome ; ensure you have both installed before running tests, otherwise they might fail.
 
-If you have any question or idea, feel free to DM or open an issue (or even a PR, who knows) ! I'll be glad to answer your request. 
+If you have any question or idea, feel free to DM or open an issue (or even a PR, who knows) ! I'll be glad to answer your request.
diff --git a/dist/Logger.min.js b/dist/Logger.min.js
diff --git a/doc/Logger.html b/doc/Logger.html
@@ -26,7 +26,7 @@
     <div class="title">
         <h1><a href="index.html" class="link">Logger.js</a></h1>
 
-            <span class="version">v1.1.0</span>
+            <span class="version">v1.2.0</span>
 
     </div>
     <div class="search-container" id="search-container">

diff --git a/doc/Logger.js.html b/doc/Logger.js.html
@@ -28,7 +28,7 @@
     <div class="title">
         <h1><a href="index.html" class="link">Logger.js</a></h1>
 
-            <span class="version">v1.1.0</span>
+            <span class="version">v1.2.0</span>
 
     </div>
     <div class="search-container" id="search-container">
@@ -99,7 +99,7 @@ <h1><a href="index.html" class="link">Logger.js</a></h1>
     this._log = options.log;
     /** @public
      * @member {string} - Component version */
-    this.version = '1.1.0';
+    this.version = '1.2.0';
     return this;
   }
 

diff --git a/doc/index.html b/doc/index.html
@@ -26,7 +26,7 @@
     <div class="title">
         <h1><a href="index.html" class="link">Logger.js</a></h1>
 
-            <span class="version">v1.1.0</span>
+            <span class="version">v1.2.0</span>
 
     </div>
     <div class="search-container" id="search-container">
@@ -58,13 +58,13 @@ <h1><a href="index.html" class="link">Logger.js</a></h1>
 
     <section>
         <article class="readme"><h1>Logger.js</h1>
-<p><img src="https://badgen.net/badge/version/1.1.0/blue" alt="">
-<a href="https://github.com/ArthurBeaulieu/Logger.js/blob/master/LICENSE.md"><img src="https://img.shields.io/github/license/ArthurBeaulieu/Logger.js.svg" alt="License"></a></p>
-<p><img src="https://badgen.net/badge/documentation/written/green" alt="">
+<p><img src="https://badgen.net/badge/version/1.2.0/blue" alt="">
+<a href="https://github.com/ArthurBeaulieu/Logger.js/blob/master/LICENSE.md"><img src="https://img.shields.io/github/license/ArthurBeaulieu/Logger.js.svg" alt="License"></a>
+<img src="https://badgen.net/badge/documentation/written/green" alt="">
 <img src="https://badgen.net/badge/test/passed/green" alt="">
 <img src="https://badgen.net/badge/dependencies/none/green" alt=""></p>
 <p><code>Logger.js</code> is a JavaScript ES6 module that offers a unified console output across Firefox and Chromium based browsers. It handles standard errors raised for example, with <code>new Error()</code>, and is also able to handle custom errors to fit you application needs.</p>
-<p>With ~4Ko minified, Logger.js is designed to be stable and remain as light as possible. It is meant to be used application wide to abstract this output layer into basic calls.</p>
+<p>With ~3Ko minified, Logger.js is designed to be stable and remain as light as possible. It is meant to be used application wide to abstract this output layer into basic calls.</p>
 <h1>Get Started</h1>
 <p>This repository was made to store documentation, test bench and source code. If you want to include this component in your project, you either need the <code>src/Logger.js</code> file if you have an assets bundler in your project, or use the <code>dist/Logger.min.js</code> to use the minified component. This minified file is compiled in ES5 JavaScript for compatibility reasons. The unminified file is, in the contrary, coded in ES6 JavaScript.</p>
 <p><code>Logger.js</code> can be used to only handle console output, handling either JavaScript error and custom errors. Simply use component as follows :</p>
@@ -105,15 +105,19 @@ <h1>Advanced usage</h1>
   // string : options.message
 }
 </code></pre>
+<p>You're now good to go! If however you need more information, you can read the online <a href="https://arthurbeaulieu.github.io/Logger.js/doc/">documentation</a>.</p>
 <h1>Development</h1>
 <p>If you clone this repository, you can <code>npm install</code> to install development dependencies. This will allow you to build dist file, run the component tests or generate the documentation ;</p>
 <ul>
 <li><code>npm run build</code> to generate the minified file ;</li>
 <li><code>npm run dev</code> to watch for any change in source code ;</li>
+<li><code>npm run web-server</code> to launch a local development server ;</li>
 <li><code>npm run doc</code> to generate documentation ;</li>
-<li><code>npm run test</code> to perform all test at once ;</li>
+<li><code>npm run test</code> to perform all tests at once ;</li>
 <li><code>npm run testdev</code> to keep browsers open to debug tests ;</li>
+<li><code>npm run beforecommit</code> to perform tests, generate doc and bundle the JavaScript.</li>
 </ul>
+<p>To avoid CORS when locally loading the example HTML file, run the web server. Please do not use it on a production environment. Unit tests are performed on both Firefox and Chrome ; ensure you have both installed before running tests, otherwise they might fail.</p>
 <p>If you have any question or idea, feel free to DM or open an issue (or even a PR, who knows) ! I'll be glad to answer your request.</p></article>
     </section>
 

diff --git a/doc/jsDoc.json b/doc/jsDoc.json
@@ -14,7 +14,7 @@
   },
   "templates": {
     "name": "Logger.js",
-    "footerText": "Logger.js",
+    "footerText": "Logger.js - Version 1.2.0",
     "cleverLinks": false,
     "monospaceLinks": false
   },

diff --git a/example.html b/example.html
@@ -1,24 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Logger.js 1.1.0 - Demo</title>
-    <style>
-      html, body { align-items: center; display: flex; flex-direction: column; font-family: sans-serif; height: 100%; justify-content: center; margin: 0; width: 100%; }
-      html { width: 100%; }
-      body { text-align: center; width: 80%; }
-      button { border: solid 1px grey; border-radius: 5px; cursor: pointer; margin: 5px; padding: 5px 10px; }
-      button[disabled] { cursor: not-allowed; }
-    </style>
-  </head>
-  <body>
-    <a href="https://github.com/ArthurBeaulieu/Logger.js" target="_blank" style="position: absolute; left: 0; top: 0;"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
-    <h1>Logger.js - Version 1.1.0</h1>
-    <h3>Sample errors are generated in the console</h3>
-    <h3>Load this page on a web server, or disable temporally cors policy to make it work.</h3>
-  </body>
-  <script type="module"> // Need to disable cors to properly load module
+<head>
+  <meta charset="utf-8">
+  <title>Logger.js 1.2.0 - Demo</title>
+  <style>
+    html, body { align-items: center; display: flex; flex-direction: column; font-family: sans-serif; height: 100%; justify-content: center; margin: 0; width: 100%; }
+    html { width: 100%; }
+    body { text-align: center; width: 80%; }
+    hr { color: white; width: 75%; }
+  </style>
+</head>
+<body>
+  <a href="https://github.com/ArthurBeaulieu/Logger.js" target="_blank" style="position: absolute; right: 0; top: 0;"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub"></a>
+  <h1>Logger.js – Version 1.2.0</h1>
+  <hr>
+  <h3>Sample errors are generated in the console</h3>
+  <hr>
+  <p>
+    <a href="https://github.com/ArthurBeaulieu/Logger.js/releases" title="Releases" target="_blank" rel="noreferrer noopener"><img src="https://badgen.net/badge/version/1.2.0/blue" alt="version-badge"></a>
+    <a href="https://github.com/ArthurBeaulieu/Logger.js/blob/master/LICENSE" title="License" target="_blank" rel="noreferrer noopener"><img src="https://img.shields.io/github/license/ArthurBeaulieu/Logger.js.svg" alt="license-badge"></a>
+    <a href="doc/index.html" title="Documentation" target="_blank" rel="noreferrer noopener"><img src="https://badgen.net/badge/documentation/written/green" alt="documentation-badge"></a>
+    <img src="https://badgen.net/badge/test/passed/green" alt="test-badge" title="Run npm run test">
+    <img src="https://badgen.net/badge/dependencies/none/green" alt="dependencies-badge" title="Check package.json file">
+  </p>
+  <p style="font-size: .9rem; font-style: italic; margin: 0;">Arthur Beaulieu – October 2020</p>
+  <script type="module">
     import Logger from './src/Logger.js';
+    // Create logger singleton
     let MyLogger = new Logger({
       errors: {
         "SAMPLE_ERROR_1": {
@@ -45,16 +53,18 @@ <h3>Load this page on a web server, or disable temporally cors policy to make it
       notification: null,
       log: true
     });
+    // Sending a bunch of errors
     MyLogger.raise('SAMPLE_ERROR_1');
     MyLogger.raise('SAMPLE_ERROR_2');
-    MyLogger.raise('SAMPLE_ERROR_3');        
+    MyLogger.raise('SAMPLE_ERROR_3');
     MyLogger.raise('SAMPLE_ERROR_4');
     MyLogger.raise(new Error('TypeError'));
-
-    const fok = () => {
+    // Define a method to see the stack trace in error feedback
+    const traceTest = () => {
       MyLogger.raise(new Error('FokError'));
     };
-
-    fok();    
+    // Call for it
+    traceTest();
   </script>
+</body>
 </html>