feat: fusebox updates + vue-component-plugin

2017-10-06 21:35:02 -04:00
parent 501f0a9a53
commit 2be7f71be8
8 changed files with 609 additions and 287 deletions
--- a/.babelrc
+++ b/.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"
+  ]
+}
--- a/.eslintrc.json
+++ b/.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,
-    "socket": true,
-    "wikijs": true,
-    "FuseBox": false,
-    // Server
-    "appconfig": true,
-    "appdata": true,
-    "ROOTPATH": true,
-    "SERVERPATH": true,
-    "IS_DEBUG": true
-  },
-  "rules": {
-    "space-before-function-paren": 0
+    "FuseBox": false
  }
 }
--- a/client/js/components/page-loader.vue
+++ b/client/js/components/page-loader.vue
@@ -5,20 +5,19 @@
      span {{ msg }}
 </template>

-<script>
-  export default {
-    name: 'page-loader',
-    props: ['text'],
-    data () {
-      return {}
-    },
-    computed: {
-      msg () { return this.$store.state.pageLoader.msg },
-      isShown () { return this.$store.state.pageLoader.shown }
-    },
-    mounted() {
-      this.$store.commit('pageLoader/msgChange', this.text)
-    }
+<script type='js'>
+export default {
+  name: 'page-loader',
+  props: ['text'],
+  data () {
+    return {}
+  },
+  computed: {
+    msg () { return this.$store.state.pageLoader.msg },
+    isShown () { return this.$store.state.pageLoader.shown }
+  },
+  mounted() {
+    this.$store.commit('pageLoader/msgChange', this.text)
  }
 }
 </script>
--- a/package.json
+++ b/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-tools": "1.2.3",
+    "graphql": "0.10.5",
+    "graphql-tools": "2.2.1",
    "highlight.js": "9.12.0",
-    "i18next": "9.0.0",
-    "i18next-express-middleware": "1.0.6",
-    "i18next-localstorage-cache": "^1.1.1",
+    "i18next": "9.0.1",
+    "i18next-express-middleware": "1.0.7",
+    "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",
-    "jquery-sticky": "1.0.4",
-    "lodash-cli": "4.17.4",
-    "lodash-es": "4.17.4",
+    "js-cookie": "2.1.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,
--- a/server/modules/db.js
+++ b/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
    })

--- a/server/views/master.pug
+++ b/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
--- a/tools/fuse.js
+++ b/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.d || args.c
-if (args.d) {
+const dev = args.dev
+
+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(),
-      ['.scss', fsbx.SassPlugin({ outputStyle: (dev) ? 'nested' : 'compressed' }), fsbx.CSSPlugin()],
-      fsbx.BabelPlugin({ comments: false, presets: ['es2015'] }),
+      fsbx.VueComponentPlugin({
+        script: fsbx.BabelPlugin(babelrc),
+        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]')
-  // const bundleApp = fuse.bundle('app').shim(SHIMS).instructions('> index.js')
-  const bundleSetup = fuse.bundle('configure').instructions('> configure.js')
+  // -------------------------------------------------------
+  // FUSEBOX DEV
+  // -------------------------------------------------------

-  switch (mode) {
-    case 'dev':
-      bundleApp.hmr().watch()
-      fuse.dev({ httpServer: false })
-      break
-    case 'dev-configure':
-      bundleSetup.watch()
-      break
+  if (dev) {
+    fuse.dev({
+      port: 5555,
+      httpServer: false
+    })
  }

+  // -------------------------------------------------------
+  // 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',
-        ignore: ['assets/', 'client/', 'data/', 'repo/', 'tests/'],
+        exec: 'node server',
+        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)
--- a/yarn.lock
+++ b/yarn.lock