Frontent build system is ready (#3)

* Frontent build system is ready

* Set up linter for frontend part

* move code to /src

* update db

* upd test

* remove db

* ignore .db

.eslintignore

@@ -1 +1,2 @@
 node_modules/
+public/dist/

.gitignore

@@ -64,4 +64,8 @@ typings/
 .idea/
 
 # Database files
-db/
+.db/
+
+# Cache of babel and others
+.cache/
+.eslintcache

bin/www

@@ -3,7 +3,7 @@
 /**
  * Module dependencies.
  */
-const app = require('../app');
+const app = require('../src/app');
 const debug = require('debug')('codex.editor.docs:server');
 const http = require('http');
 
@@ -88,4 +88,4 @@ function onListening() {
   debug('Listening on ' + bind);
 }
 
-module.exports = {server, app};
+module.exports = {server, app};

database/pages.js

@@ -1,5 +0,0 @@
-const Datastore = require('nedb');
-
-const db = new Datastore({filename: './db/pages.db', autoload: true});
-
-module.exports = db;

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "start": "nodemon ./bin/www",
     "test": "mocha --recursive ./test",
-    "lint": "eslint --fix ./**/*.js",
+    "lint": "eslint --fix --cache ./src/**/*.js",
+    "build": "webpack ./src/frontend/js/app.js --o='./public/dist/bundle.js' --output-library=Docs -d",
     "precommit": "yarn lint && yarn test --exit"
   },
   "dependencies": {
@@ -22,13 +23,37 @@
     "uuid4": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "autoprefixer": "^9.1.3",
+    "babel": "^6.23.0",
+    "babel-loader": "^8.0.2",
+    "babel-preset-env": "^1.7.0",
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",
+    "css-loader": "^1.0.0",
+    "cssnano": "^4.1.0",
     "eslint": "^5.3.0",
     "eslint-config-codex": "github:codex-team/eslint-config",
     "eslint-plugin-chai-friendly": "^0.4.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "husky": "^0.14.3",
     "mocha": "^5.2.0",
-    "nyc": "^12.0.2"
+    "nyc": "^12.0.2",
+    "postcss": "^7.0.2",
+    "postcss-apply": "^0.11.0",
+    "postcss-color-hex-alpha": "^3.0.0",
+    "postcss-color-mod-function": "^2.4.3",
+    "postcss-custom-media": "^6.0.0",
+    "postcss-custom-properties": "^7.0.0",
+    "postcss-custom-selectors": "^4.0.1",
+    "postcss-font-family-system-ui": "^4.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-media-minmax": "^3.0.0",
+    "postcss-nested": "^3.0.0",
+    "postcss-nested-ancestors": "^2.0.0",
+    "postcss-nesting": "^6.0.0",
+    "postcss-smart-import": "^0.7.6",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0"
   }
 }

public/dist/bundle.css

@@ -0,0 +1 @@
+body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana}a{color:#00b7ff}

public/dist/bundle.js

@@ -0,0 +1,9 @@
+var Docs=function(n){var e={};function c(t){if(e[t])return e[t].exports;var r=e[t]={i:t,l:!1,exports:{}};return n[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}return c.m=n,c.c=e,c.d=function(n,e,t){c.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:t})},c.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},c.t=function(n,e){if(1&e&&(n=c(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var r in n)c.d(t,r,function(e){return n[e]}.bind(null,r));return t},c.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return c.d(e,"a",e),e},c.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},c.p="",c(c.s="./src/frontend/js/app.js")}({"./src/frontend/js/app.js":
+/*!********************************!*\
+  !*** ./src/frontend/js/app.js ***!
+  \********************************/
+/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nvar _main = __webpack_require__(/*! ../styles/main.pcss */ "./src/frontend/styles/main.pcss");\n\nvar _main2 = _interopRequireDefault(_main);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nmodule.exports =\n/**\n * @constructor\n */\nfunction Docs() {\n  _classCallCheck(this, Docs);\n\n  console.log(\'CodeX Docs initialized\');\n};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvZnJvbnRlbmQvanMvYXBwLmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vRG9jcy8uL3NyYy9mcm9udGVuZC9qcy9hcHAuanM/YmM1NSJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyBObyBpbnNwZWN0aW9uIGZvciB1bnVzZWQgdmFyIGBjc3NgIGJlY2F1c2UgaXQncyB1c2VkIGZvciBjc3MgYnVuZGxlXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tdW51c2VkLXZhcnNcbmltcG9ydCBjc3MgZnJvbSAnLi4vc3R5bGVzL21haW4ucGNzcyc7XG5cbm1vZHVsZS5leHBvcnRzID0gY2xhc3MgRG9jcyB7XG4gIC8qKlxuICAgKiBAY29uc3RydWN0b3JcbiAgICovXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGNvbnNvbGUubG9nKCdDb2RlWCBEb2NzIGluaXRpYWxpemVkJyk7XG4gIH1cbn07XG4iXSwibWFwcGluZ3MiOiI7O0FBRUE7QUFDQTs7Ozs7OztBQUNBO0FBQ0E7OztBQUdBO0FBQUE7QUFDQTtBQUFBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/frontend/js/app.js\n')},"./src/frontend/styles/main.pcss":
+/*!***************************************!*\
+  !*** ./src/frontend/styles/main.pcss ***!
+  \***************************************/
+/*! no static exports found */function(module,exports){eval("// removed by extract-text-webpack-plugin//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvZnJvbnRlbmQvc3R5bGVzL21haW4ucGNzcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovL0RvY3MvLi9zcmMvZnJvbnRlbmQvc3R5bGVzL21haW4ucGNzcz83N2VjIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIHJlbW92ZWQgYnkgZXh0cmFjdC10ZXh0LXdlYnBhY2stcGx1Z2luIl0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./src/frontend/styles/main.pcss\n")}});

public/stylesheets/style.css

@@ -1,8 +0,0 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-
-a {
-  color: #00B7FF;
-}

src/app.js

@@ -16,7 +16,7 @@ app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({extended: true}));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, '../public')));
 
 app.use('/', routes);
 // catch 404 and forward to error handler

src/frontend/.postcssrc

@@ -0,0 +1,16 @@
+plugins:
+    postcss-smart-import: {}
+    postcss-custom-properties: {}
+    postcss-apply: {}
+    postcss-custom-media: {}
+    postcss-media-minmax: {}
+    postcss-custom-selectors: {}
+    postcss-nested-ancestors: {}
+    postcss-nesting: {}
+    postcss-nested: {}
+    postcss-color-mod-function: {}
+    postcss-color-hex-alpha: {}
+    postcss-font-family-system-ui: {}
+    cssnano: {}
+    autoprefixer:
+        browsers: ['last 2 versions', '> 1%']

src/frontend/js/app.js

@@ -0,0 +1,12 @@
+// No inspection for unused var `css` because it's used for css bundle
+// eslint-disable-next-line no-unused-vars
+import css from '../styles/main.pcss';
+
+module.exports = class Docs {
+  /**
+   * @constructor
+   */
+  constructor() {
+    console.log('CodeX Docs initialized');
+  }
+};

src/frontend/styles/main.pcss

@@ -0,0 +1,7 @@
+body {
+  font-family: system-ui, Helvetica, Arial, Verdana;
+}
+
+a {
+  color: #00B7FF;
+}

src/models/page.js

@@ -1,4 +1,4 @@
-const {pages} = require('../database');
+const {pages} = require('../utils/database/index');
 
 /**
  * @typedef {Object} PageData
@@ -157,4 +157,4 @@ class Page {
   }
 }
 
-module.exports = Page;
+module.exports = Page;

src/utils/database/pages.js

@@ -0,0 +1,5 @@
+const Datastore = require('nedb');
+
+const db = new Datastore({filename: './.db/pages.db', autoload: true});
+
+module.exports = db;

src/views/layout.twig

@@ -2,7 +2,8 @@
 <html>
   <head>
     <title>{{ title }}</title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <link rel="stylesheet" href="/dist/bundle.css" />
+    <script src="/dist/bundle.js" onload="new Docs()"></script>
   </head>
   <body>
     {% block body %}{% endblock %}

test/database.js

@@ -1,11 +1,11 @@
 const fs = require('fs');
 const {expect} = require('chai');
 
-const {class: Database} = require('../database');
+const {class: Database} = require('../src/utils/database');
 const Datastore = require('nedb');
 
 describe('Database', () => {
-  const pathToDB = './db/test.db';
+  const pathToDB = './.db/test.db';
   let nedbInstance;
   let db;
 
@@ -175,4 +175,4 @@ describe('Database', () => {
       fs.unlinkSync(pathToDB);
     }
   });
-});
+});

test/models/page.js

@@ -1,6 +1,6 @@
 const {expect} = require('chai');
-const Page = require('../../models/page');
-const {pages} = require('../../database');
+const Page = require('../../src/models/page');
+const {pages} = require('../../src/utils/database');
 
 describe('Page model', () => {
   it('Working with empty model', async () => {

test/rest/pages.js

@@ -1,5 +1,5 @@
 const {app} = require('../../bin/www');
-const model = require('../../models/page');
+const model = require('../../src/models/page');
 
 const chai = require('chai');
 const chaiHTTP = require('chai-http');
@@ -199,4 +199,4 @@ describe('Pages REST: ', () => {
     expect(success).to.be.false;
     expect(error).to.equal('Page with given id does not exist');
   });
-});
+});

webpack.config.js

@@ -0,0 +1,60 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+/**
+ * Options for the Babel
+ */
+const babelLoader = {
+  loader: 'babel-loader',
+  options: {
+    cacheDirectory: '.cache/babel-loader',
+    presets: [
+      'env'
+    ],
+    plugins: [
+      /**
+       * Dont need to use «.default» after «export default Class Ui {}»
+       * @see  {@link https://github.com/59naga/babel-plugin-add-module-exports}
+       */
+      // 'add-module-exports',
+    ]
+  }
+};
+
+module.exports = (env) => {
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.p?css$/,
+          use: ExtractTextPlugin.extract([
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                config: {
+                  path: './src/frontend/'
+                }
+              }
+            }
+          ])
+        }, {
+          test: /\.js$/,
+          use: [
+            babelLoader
+          ]
+        }
+      ]
+    },
+    plugins: [
+      new ExtractTextPlugin('bundle.css')
+    ],
+    optimization: {
+      minimize: true
+    }
+  };
+};