feat: fusebox updates + vue-component-plugin

.babelrc

@@ -0,0 +1,20 @@
+{
+  "comments": false,
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": [
+          "last 6 Chrome major versions",
+          "last 6 Firefox major versions",
+          "last 4 Safari major versions",
+          "last 4 Edge major versions",
+          "last 3 iOS major versions",
+          "last 3 Android major versions",
+          "last 2 ChromeAndroid major versions",
+          "Explorer 11"
+        ]
+      }
+    }],
+    "stage-2"
+  ]
+}

.eslintrc.json

@@ -1,27 +1,14 @@
 {
-  "extends": "standard",
+  "extends": "requarks",
   "env": {
     "node": true,
     "es6": true,
     "jest": true
   },
   "globals": {
-    // Client
     "document": false,
     "navigator": false,
     "window": false,
-    "siteLang": false,
+    "FuseBox": false
-    "socket": true,
-    "wikijs": true,
-    "FuseBox": false,
-    // Server
-    "appconfig": true,
-    "appdata": true,
-    "ROOTPATH": true,
-    "SERVERPATH": true,
-    "IS_DEBUG": true
-  },
-  "rules": {
-    "space-before-function-paren": 0
   }
 }

client/js/components/page-loader.vue

@@ -5,20 +5,19 @@
       span {{ msg }}
 </template>
 
-<script>
+<script type='js'>
-  export default {
+export default {
-    name: 'page-loader',
+  name: 'page-loader',
-    props: ['text'],
+  props: ['text'],
-    data () {
+  data () {
-      return {}
+    return {}
-    },
+  },
-    computed: {
+  computed: {
-      msg () { return this.$store.state.pageLoader.msg },
+    msg () { return this.$store.state.pageLoader.msg },
-      isShown () { return this.$store.state.pageLoader.shown }
+    isShown () { return this.$store.state.pageLoader.shown }
-    },
+  },
-    mounted() {
+  mounted() {
-      this.$store.commit('pageLoader/msgChange', this.text)
+    this.$store.commit('pageLoader/msgChange', this.text)
-    }
   }
 }
 </script>

package.json

@@ -9,7 +9,6 @@
     "restart": "node wiki restart",
     "build": "node tools/fuse",
     "dev": "node tools/fuse -d",
-    "dev-configure": "node tools/fuse -c",
     "test": "jest"
   },
   "bin": {
@@ -37,11 +36,11 @@
     "node": ">=6.11.1"
   },
   "dependencies": {
-    "apollo-server-express": "1.1.2",
+    "apollo-server-express": "1.1.3",
     "auto-load": "3.0.0",
     "axios": "0.16.2",
     "bcryptjs-then": "1.0.1",
-    "bluebird": "3.5.0",
+    "bluebird": "3.5.1",
     "body-parser": "1.18.2",
     "bull": "3.2.0",
     "bunyan": "1.8.12",
@@ -52,7 +51,7 @@
     "connect-flash": "0.1.1",
     "connect-redis": "3.3.2",
     "cookie-parser": "1.4.3",
-    "diff2html": "2.3.0",
+    "diff2html": "2.3.1",
     "dotize": "^0.2.0",
     "execa": "0.8.0",
     "express": "4.16.1",
@@ -61,15 +60,15 @@
     "express-session": "1.15.6",
     "file-type": "6.2.0",
     "filesize.js": "1.0.2",
-    "follow-redirects": "1.2.4",
+    "follow-redirects": "1.2.5",
     "fs-extra": "4.0.2",
     "git-wrapper2-promise": "0.2.9",
-    "graphql": "0.11.6",
+    "graphql": "0.10.5",
-    "graphql-tools": "1.2.3",
+    "graphql-tools": "2.2.1",
     "highlight.js": "9.12.0",
-    "i18next": "9.0.0",
+    "i18next": "9.0.1",
-    "i18next-express-middleware": "1.0.6",
+    "i18next-express-middleware": "1.0.7",
-    "i18next-localstorage-cache": "^1.1.1",
+    "i18next-localstorage-cache": "1.1.1",
     "i18next-node-fs-backend": "1.0.0",
     "image-size": "0.6.1",
     "ioredis": "3.1.4",
@@ -90,7 +89,7 @@
     "markdown-it-mathjax": "2.0.0",
     "markdown-it-task-lists": "2.0.1",
     "mathjax-node": "1.2.1",
-    "memdown": "1.3.1",
+    "memdown": "1.4.1",
     "mime-types": "2.1.17",
     "moment": "2.18.1",
     "moment-timezone": "0.5.13",
@@ -109,7 +108,7 @@
     "passport-windowslive": "1.0.2",
     "pg": "7.3.0",
     "pg-hstore": "2.3.2",
-    "pg-promise": "6.10.1",
+    "pg-promise": "6.10.3",
     "pm2": "2.7.1",
     "pug": "2.0.0-rc.4",
     "read-chunk": "2.1.0",
@@ -118,7 +117,7 @@
     "search-index-adder": "0.3.9",
     "search-index-searcher": "0.2.10",
     "semver": "5.4.1",
-    "sequelize": "4.11.5",
+    "sequelize": "4.13.5",
     "serve-favicon": "2.4.5",
     "simplemde": "1.11.2",
     "stopword": "0.1.8",
@@ -127,52 +126,56 @@
     "through2": "2.0.3",
     "validator": "9.0.0",
     "validator-as-promised": "1.0.2",
-    "winston": "2.3.1",
+    "winston": "2.4.0",
     "yargs": "9.0.1"
   },
   "devDependencies": {
     "@glimpse/glimpse": "0.22.15",
     "@panter/vue-i18next": "0.6.1",
     "apollo-client": "^1.9.3",
+    "autoprefixer": "7.1.5",
     "babel-cli": "6.26.0",
     "babel-jest": "21.2.0",
-    "babel-plugin-transform-object-assign": "6.22.0",
+    "babel-preset-env": "1.6.0",
     "babel-preset-es2015": "6.24.1",
+    "babel-preset-stage-2": "6.24.1",
     "brace": "0.10.0",
     "colors": "1.1.2",
     "consolidate": "0.14.5",
     "eslint": "4.8.0",
+    "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "10.2.1",
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-node": "5.2.0",
     "eslint-plugin-promise": "3.5.0",
     "eslint-plugin-standard": "3.0.1",
-    "fuse-box": "2.2.31",
+    "fuse-box": "2.3.3",
     "graphql-tag": "^2.4.2",
     "i18next-xhr-backend": "1.4.3",
     "jest": "21.2.1",
     "jquery": "3.2.1",
     "jquery-contextmenu": "2.6.2",
     "jquery-simple-upload": "1.0.0",
-    "jquery-smooth-scroll": "2.2.0",
+    "js-cookie": "2.1.4",
-    "jquery-sticky": "1.0.4",
-    "lodash-cli": "4.17.4",
-    "lodash-es": "4.17.4",
     "node-sass": "4.5.3",
     "nodemon": "1.12.1",
+    "postcss-selector-parser": "2.2.3",
     "pug-lint": "2.5.0",
     "twemoji-awesome": "1.0.6",
     "typescript": "2.5.3",
-    "uglify-es": "3.1.2",
+    "uglify-es": "3.1.3",
     "vee-validate": "2.0.0-rc.18",
     "vue": "2.4.4",
     "vue-clipboards": "1.1.0",
+    "vue-hot-reload-api": "2.1.1",
     "vue-lodash": "1.0.4",
     "vue-material": "^0.7.5",
     "vue-resource": "1.3.4",
+    "vue-simple-breakpoints": "1.0.2",
     "vue-template-compiler": "2.4.4",
     "vue-template-es2015-compiler": "1.5.3",
-    "vuex": "2.4.1"
+    "vuex": "2.4.1",
+    "vuex-persistedstate": "2.0.0"
   },
   "jest": {
     "collectCoverage": false,

server/modules/db.js

@@ -6,13 +6,53 @@ const fs = require('fs')
 const path = require('path')
 const _ = require('lodash')
 const Promise = require('bluebird')
+const Sequelize = require('sequelize')
+const Op = Sequelize.Op
+
+const operatorsAliases = {
+  $eq: Op.eq,
+  $ne: Op.ne,
+  $gte: Op.gte,
+  $gt: Op.gt,
+  $lte: Op.lte,
+  $lt: Op.lt,
+  $not: Op.not,
+  $in: Op.in,
+  $notIn: Op.notIn,
+  $is: Op.is,
+  $like: Op.like,
+  $notLike: Op.notLike,
+  $iLike: Op.iLike,
+  $notILike: Op.notILike,
+  $regexp: Op.regexp,
+  $notRegexp: Op.notRegexp,
+  $iRegexp: Op.iRegexp,
+  $notIRegexp: Op.notIRegexp,
+  $between: Op.between,
+  $notBetween: Op.notBetween,
+  $overlap: Op.overlap,
+  $contains: Op.contains,
+  $contained: Op.contained,
+  $adjacent: Op.adjacent,
+  $strictLeft: Op.strictLeft,
+  $strictRight: Op.strictRight,
+  $noExtendRight: Op.noExtendRight,
+  $noExtendLeft: Op.noExtendLeft,
+  $and: Op.and,
+  $or: Op.or,
+  $any: Op.any,
+  $all: Op.all,
+  $values: Op.values,
+  $col: Op.col
+}
 
 /**
  * PostgreSQL DB module
  */
 module.exports = {
 
-  Sequelize: require('sequelize'),
+  Sequelize,
+  Op: Sequelize.Op,
 
   /**
    * Initialize DB
@@ -35,7 +75,8 @@ module.exports = {
         min: 0,
         idle: 10000
       },
-      logging: false
+      logging: false,
+      operatorsAliases
     })
 
     // Attempt to connect and authenticate to DB
@@ -43,7 +84,7 @@ module.exports = {
     self.inst.authenticate().then(() => {
       wiki.logger.info('Database (PostgreSQL) connection: OK')
     }).catch(err => {
-      wiki.logger.error('Failed to connect to MongoDB instance.')
+      wiki.logger.error('Failed to connect to PostgreSQL instance.')
       return err
     })
 

server/views/master.pug

@@ -22,7 +22,7 @@ html
       var siteConfig = !{JSON.stringify(config.site)}
 
     //- JS / CSS
-    script(type='text/javascript', src=config.site.path + '/js/vendor.js')
+    script(type='text/javascript', src=config.site.path + '/js/libs.js')
     script(type='text/javascript', src=config.site.path + '/js/app.js')
 
     block head

tools/fuse.js

@@ -6,16 +6,15 @@
  * Client & Server compiler / bundler / watcher
  */
 
+const autoprefixer = require('autoprefixer')
 const colors = require('colors/safe')
 const fsbx = require('fuse-box')
 const nodemon = require('nodemon')
-const babel = require('babel-core')
-const uglify = require('uglify-es')
 const fs = require('fs-extra')
 
-// ======================================================
+// -------------------------------------------------------
 // Parse cmd arguments
-// ======================================================
+// -------------------------------------------------------
 
 const args = require('yargs')
   .option('d', {
@@ -23,30 +22,21 @@ const args = require('yargs')
     describe: 'Start in Developer mode',
     type: 'boolean'
   })
-  .option('c', {
-    alias: 'dev-configure',
-    describe: 'Start in Configure Developer mode',
-    type: 'boolean'
-  })
   .help('h')
   .alias('h', 'help')
   .argv
 
-let mode = 'build'
+const dev = args.dev
-const dev = args.d || args.c
+
-if (args.d) {
+if (dev) {
   console.info(colors.bgWhite.black(' Starting Fuse in DEVELOPER mode... '))
-  mode = 'dev'
-} else if (args.c) {
-  console.info(colors.bgWhite.black(' Starting Fuse in CONFIGURE DEVELOPER mode... '))
-  mode = 'dev-configure'
 } else {
   console.info(colors.bgWhite.black(' Starting Fuse in BUILD mode... '))
 }
 
-// ======================================================
+// -------------------------------------------------------
 // BUILD VARS
-// ======================================================
+// -------------------------------------------------------
 
 const ALIASES = {
   'brace-ext-modelist': 'brace/ext/modelist.js',
@@ -71,16 +61,31 @@ const SHIMS = {
   }
 }
 
-// ======================================================
+// -------------------------------------------------------
 // Global Tasks
-// ======================================================
+// -------------------------------------------------------
 
 console.info(colors.white('└── ') + colors.green('Running global tasks...'))
 let globalTasks = require('./fuse_tasks')
 
-// ======================================================
+// -------------------------------------------------------
-// Fuse Tasks
+// FUSEBOX PRODUCER
-// ======================================================
+// -------------------------------------------------------
+
+const babelrc = fs.readJsonSync('.babelrc')
+const scssChain = [
+  fsbx.SassPlugin({
+    includePaths: ['node_modules'],
+    outputStyle: dev ? 'nested' : 'compressed'
+  }),
+  fsbx.PostCSS([
+    autoprefixer({
+      remove: false,
+      browsers: babelrc.presets[0][1].targets.browsers
+    })
+  ]),
+  fsbx.CSSPlugin()
+]
 
 globalTasks.then(() => {
   let fuse = fsbx.FuseBox.init({
@@ -91,101 +96,60 @@ globalTasks.then(() => {
     tsConfig: './tsconfig.json',
     plugins: [
       fsbx.EnvPlugin({ NODE_ENV: (dev) ? 'development' : 'production' }),
-      fsbx.VuePlugin(),
+      fsbx.VueComponentPlugin({
-      ['.scss', fsbx.SassPlugin({ outputStyle: (dev) ? 'nested' : 'compressed' }), fsbx.CSSPlugin()],
+        script: fsbx.BabelPlugin(babelrc),
-      fsbx.BabelPlugin({ comments: false, presets: ['es2015'] }),
+        template: fsbx.ConsolidatePlugin({
+          engine: 'pug'
+        }),
+        style: scssChain
+      }),
+      scssChain,
+      fsbx.BabelPlugin(babelrc),
       fsbx.JSONPlugin()
-      /* !dev && fsbx.QuantumPlugin({
-        target: 'browser',
-        uglify: true,
-        api: (core) => {
-          core.solveComputed('default/js/components/editor-codeblock.vue', {
-            mapping: '/js/ace/ace.js',
-            fn: (statement, core) => {
-              statement.setExpression(`'/js/ace/ace.js'`)
-            }
-          })
-          core.solveComputed('default/js/components/editor.component.js', {
-            mapping: '/js/simplemde/simplemde.min.js',
-            fn: (statement, core) => {
-              statement.setExpression(`'/js/simplemde/simplemde.min.js'`)
-            }
-          })
-        }
-      }) */
-      // !dev && fsbx.UglifyESPlugin()
     ],
     debug: false,
     log: true
   })
 
-  const bundleVendor = fuse.bundle('vendor').shim(SHIMS).instructions('~ index.js') // eslint-disable-line no-unused-vars
+  // -------------------------------------------------------
-  const bundleApp = fuse.bundle('app').instructions('!> [index.js]')
+  // FUSEBOX DEV
-  // const bundleApp = fuse.bundle('app').shim(SHIMS).instructions('> index.js')
+  // -------------------------------------------------------
-  const bundleSetup = fuse.bundle('configure').instructions('> configure.js')
+
-
+  if (dev) {
-  switch (mode) {
+    fuse.dev({
-    case 'dev':
+      port: 5555,
-      bundleApp.hmr().watch()
+      httpServer: false
-      fuse.dev({ httpServer: false })
+    })
-      break
-    case 'dev-configure':
-      bundleSetup.watch()
-      break
   }
 
+  // -------------------------------------------------------
+  // FUSEBOX BUNDLES
+  // -------------------------------------------------------
+
+  if (dev) {
+    fuse.bundle('libs').shim(SHIMS).instructions('~ index.js')
+    fuse.bundle('app').instructions('!> [index.js]').hmr({ reload: true }).watch()
+  } else {
+    fuse.bundle('bundle.min.js').shim(SHIMS).instructions('> index.js')
+  }
+
+  // -------------------------------------------------------
+  // FUSEBOX RUN
+  // -------------------------------------------------------
+
   fuse.run().then(() => {
     console.info(colors.green.bold('\nAssets compilation + bundling completed.'))
 
     if (dev) {
       nodemon({
-        exec: (args.d) ? 'node server' : 'node wiki configure',
+        exec: 'node server',
-        ignore: ['assets/', 'client/', 'data/', 'repo/', 'tests/'],
+        ignore: ['assets/', 'client/', 'data/', 'repo/', 'tests/', 'tools/'],
         ext: 'js json graphql',
-        watch: (args.d) ? ['server'] : ['server/configure.js'],
+        watch: ['server'],
         env: { 'NODE_ENV': 'development' }
       })
-    } else {
-      console.info(colors.yellow.bold('\nTranspiling vendor bundle...'))
-      let appCode = babel.transform(fs.readFileSync('./assets/js/app.js', 'utf8'), {
-        babelrc: false,
-        compact: false,
-        filename: 'app.js',
-        plugins: ['transform-object-assign']
-      }).code
-      let vendorCode = babel.transform(fs.readFileSync('./assets/js/vendor.js', 'utf8'), {
-        babelrc: false,
-        comments: false,
-        compact: false,
-        filename: 'vendor.js',
-        plugins: [
-          'transform-es2015-arrow-functions',
-          'transform-es2015-block-scoped-functions',
-          'transform-es2015-block-scoping',
-          'transform-es2015-classes',
-          'transform-es2015-computed-properties',
-          'transform-es2015-destructuring',
-          'transform-es2015-duplicate-keys',
-          'transform-es2015-for-of',
-          'transform-es2015-function-name',
-          'transform-es2015-literals',
-          'transform-es2015-object-super',
-          'transform-es2015-parameters',
-          'transform-es2015-shorthand-properties',
-          'transform-es2015-spread',
-          'transform-es2015-sticky-regex',
-          'transform-es2015-template-literals',
-          'transform-es2015-typeof-symbol',
-          'transform-es2015-unicode-regex'
-        ]
-      }).code
-      console.info(colors.yellow.bold('Minifing bundles...'))
-      fs.writeFileSync('./assets/js/vendor.js', uglify.minify(vendorCode).code, 'utf8')
-      fs.writeFileSync('./assets/js/app.js', uglify.minify(appCode).code, 'utf8')
-      fs.writeFileSync('./assets/js/configure.js', uglify.minify(fs.readFileSync('./assets/js/configure.js', 'utf8')).code, 'utf8')
-      console.info(colors.green.bold('\nBUILD SUCCEEDED.'))
-      return true
     }
+    return true
   }).catch(err => {
     console.error(colors.red(' X Bundle compilation failed! ' + err.message))
     process.exit(1)