Browse Source

Add vuejs

master
Alfred 1 year ago
parent
commit
f74611bf2d

+ 18
- 0
.babelrc View File

@@ -0,0 +1,18 @@
1
+{
2
+  "presets": [
3
+    ["env", {
4
+      "modules": false,
5
+      "targets": {
6
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7
+      }
8
+    }],
9
+    "stage-2"
10
+  ],
11
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
12
+  "env": {
13
+    "test": {
14
+      "presets": ["env", "stage-2"],
15
+      "plugins": ["transform-vue-jsx", "istanbul"]
16
+    }
17
+  }
18
+}

+ 9
- 0
.editorconfig View File

@@ -0,0 +1,9 @@
1
+root = true
2
+
3
+[*]
4
+charset = utf-8
5
+indent_style = space
6
+indent_size = 2
7
+end_of_line = lf
8
+insert_final_newline = true
9
+trim_trailing_whitespace = true

+ 5
- 0
.eslintignore View File

@@ -0,0 +1,5 @@
1
+/build/
2
+/config/
3
+/dist/
4
+/*.js
5
+/test/unit/coverage/

+ 29
- 0
.eslintrc.js View File

@@ -0,0 +1,29 @@
1
+// https://eslint.org/docs/user-guide/configuring
2
+
3
+module.exports = {
4
+  root: true,
5
+  parserOptions: {
6
+    parser: 'babel-eslint'
7
+  },
8
+  env: {
9
+    browser: true,
10
+  },
11
+  extends: [
12
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14
+    'plugin:vue/essential', 
15
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
16
+    'standard'
17
+  ],
18
+  // required to lint *.vue files
19
+  plugins: [
20
+    'vue'
21
+  ],
22
+  // add your custom rules here
23
+  rules: {
24
+    // allow async-await
25
+    'generator-star-spacing': 'off',
26
+    // allow debugger during development
27
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
28
+  }
29
+}

+ 17
- 0
.gitignore View File

@@ -0,0 +1,17 @@
1
+.DS_Store
2
+node_modules/
3
+/dist/
4
+npm-debug.log*
5
+yarn-debug.log*
6
+yarn-error.log*
7
+/test/unit/coverage/
8
+/test/e2e/reports/
9
+selenium-debug.log
10
+
11
+# Editor directories and files
12
+.idea
13
+.vscode
14
+*.suo
15
+*.ntvs*
16
+*.njsproj
17
+*.sln

+ 10
- 0
.postcssrc.js View File

@@ -0,0 +1,10 @@
1
+// https://github.com/michael-ciniawsky/postcss-load-config
2
+
3
+module.exports = {
4
+  "plugins": {
5
+    "postcss-import": {},
6
+    "postcss-url": {},
7
+    // to edit target browsers: use "browserslist" field in package.json
8
+    "autoprefixer": {}
9
+  }
10
+}

+ 29
- 0
README.md View File

@@ -1,5 +1,34 @@
1 1
 # Macarrodes
2 2
 
3
+> Bookmarks manager
4
+
5
+## Build Setup
6
+
7
+``` bash
8
+# install dependencies
9
+npm install
10
+
11
+# serve with hot reload at localhost:8080
12
+npm run dev
13
+
14
+# build for production with minification
15
+npm run build
16
+
17
+# build for production and view the bundle analyzer report
18
+npm run build --report
19
+
20
+# run unit tests
21
+npm run unit
22
+
23
+# run e2e tests
24
+npm run e2e
25
+
26
+# run all tests
27
+npm test
28
+```
29
+
30
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
31
+
3 32
 ## Backend
4 33
 
5 34
 Macarrodes is prepared to connect to a [PostgREST](https://postgrest.com/en/v4.4/) backend.

+ 41
- 0
build/build.js View File

@@ -0,0 +1,41 @@
1
+'use strict'
2
+require('./check-versions')()
3
+
4
+process.env.NODE_ENV = 'production'
5
+
6
+const ora = require('ora')
7
+const rm = require('rimraf')
8
+const path = require('path')
9
+const chalk = require('chalk')
10
+const webpack = require('webpack')
11
+const config = require('../config')
12
+const webpackConfig = require('./webpack.prod.conf')
13
+
14
+const spinner = ora('building for production...')
15
+spinner.start()
16
+
17
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18
+  if (err) throw err
19
+  webpack(webpackConfig, (err, stats) => {
20
+    spinner.stop()
21
+    if (err) throw err
22
+    process.stdout.write(stats.toString({
23
+      colors: true,
24
+      modules: false,
25
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26
+      chunks: false,
27
+      chunkModules: false
28
+    }) + '\n\n')
29
+
30
+    if (stats.hasErrors()) {
31
+      console.log(chalk.red('  Build failed with errors.\n'))
32
+      process.exit(1)
33
+    }
34
+
35
+    console.log(chalk.cyan('  Build complete.\n'))
36
+    console.log(chalk.yellow(
37
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
38
+      '  Opening index.html over file:// won\'t work.\n'
39
+    ))
40
+  })
41
+})

+ 54
- 0
build/check-versions.js View File

@@ -0,0 +1,54 @@
1
+'use strict'
2
+const chalk = require('chalk')
3
+const semver = require('semver')
4
+const packageConfig = require('../package.json')
5
+const shell = require('shelljs')
6
+
7
+function exec (cmd) {
8
+  return require('child_process').execSync(cmd).toString().trim()
9
+}
10
+
11
+const versionRequirements = [
12
+  {
13
+    name: 'node',
14
+    currentVersion: semver.clean(process.version),
15
+    versionRequirement: packageConfig.engines.node
16
+  }
17
+]
18
+
19
+if (shell.which('npm')) {
20
+  versionRequirements.push({
21
+    name: 'npm',
22
+    currentVersion: exec('npm --version'),
23
+    versionRequirement: packageConfig.engines.npm
24
+  })
25
+}
26
+
27
+module.exports = function () {
28
+  const warnings = []
29
+
30
+  for (let i = 0; i < versionRequirements.length; i++) {
31
+    const mod = versionRequirements[i]
32
+
33
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34
+      warnings.push(mod.name + ': ' +
35
+        chalk.red(mod.currentVersion) + ' should be ' +
36
+        chalk.green(mod.versionRequirement)
37
+      )
38
+    }
39
+  }
40
+
41
+  if (warnings.length) {
42
+    console.log('')
43
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
44
+    console.log()
45
+
46
+    for (let i = 0; i < warnings.length; i++) {
47
+      const warning = warnings[i]
48
+      console.log('  ' + warning)
49
+    }
50
+
51
+    console.log()
52
+    process.exit(1)
53
+  }
54
+}

BIN
build/logo.png View File


+ 101
- 0
build/utils.js View File

@@ -0,0 +1,101 @@
1
+'use strict'
2
+const path = require('path')
3
+const config = require('../config')
4
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
5
+const packageConfig = require('../package.json')
6
+
7
+exports.assetsPath = function (_path) {
8
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
9
+    ? config.build.assetsSubDirectory
10
+    : config.dev.assetsSubDirectory
11
+
12
+  return path.posix.join(assetsSubDirectory, _path)
13
+}
14
+
15
+exports.cssLoaders = function (options) {
16
+  options = options || {}
17
+
18
+  const cssLoader = {
19
+    loader: 'css-loader',
20
+    options: {
21
+      sourceMap: options.sourceMap
22
+    }
23
+  }
24
+
25
+  const postcssLoader = {
26
+    loader: 'postcss-loader',
27
+    options: {
28
+      sourceMap: options.sourceMap
29
+    }
30
+  }
31
+
32
+  // generate loader string to be used with extract text plugin
33
+  function generateLoaders (loader, loaderOptions) {
34
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
35
+
36
+    if (loader) {
37
+      loaders.push({
38
+        loader: loader + '-loader',
39
+        options: Object.assign({}, loaderOptions, {
40
+          sourceMap: options.sourceMap
41
+        })
42
+      })
43
+    }
44
+
45
+    // Extract CSS when that option is specified
46
+    // (which is the case during production build)
47
+    if (options.extract) {
48
+      return ExtractTextPlugin.extract({
49
+        use: loaders,
50
+        fallback: 'vue-style-loader'
51
+      })
52
+    } else {
53
+      return ['vue-style-loader'].concat(loaders)
54
+    }
55
+  }
56
+
57
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
58
+  return {
59
+    css: generateLoaders(),
60
+    postcss: generateLoaders(),
61
+    less: generateLoaders('less'),
62
+    sass: generateLoaders('sass', { indentedSyntax: true }),
63
+    scss: generateLoaders('sass'),
64
+    stylus: generateLoaders('stylus'),
65
+    styl: generateLoaders('stylus')
66
+  }
67
+}
68
+
69
+// Generate loaders for standalone style files (outside of .vue)
70
+exports.styleLoaders = function (options) {
71
+  const output = []
72
+  const loaders = exports.cssLoaders(options)
73
+
74
+  for (const extension in loaders) {
75
+    const loader = loaders[extension]
76
+    output.push({
77
+      test: new RegExp('\\.' + extension + '$'),
78
+      use: loader
79
+    })
80
+  }
81
+
82
+  return output
83
+}
84
+
85
+exports.createNotifierCallback = () => {
86
+  const notifier = require('node-notifier')
87
+
88
+  return (severity, errors) => {
89
+    if (severity !== 'error') return
90
+
91
+    const error = errors[0]
92
+    const filename = error.file && error.file.split('!').pop()
93
+
94
+    notifier.notify({
95
+      title: packageConfig.name,
96
+      message: severity + ': ' + error.name,
97
+      subtitle: filename || '',
98
+      icon: path.join(__dirname, 'logo.png')
99
+    })
100
+  }
101
+}

+ 22
- 0
build/vue-loader.conf.js View File

@@ -0,0 +1,22 @@
1
+'use strict'
2
+const utils = require('./utils')
3
+const config = require('../config')
4
+const isProduction = process.env.NODE_ENV === 'production'
5
+const sourceMapEnabled = isProduction
6
+  ? config.build.productionSourceMap
7
+  : config.dev.cssSourceMap
8
+
9
+module.exports = {
10
+  loaders: utils.cssLoaders({
11
+    sourceMap: sourceMapEnabled,
12
+    extract: isProduction
13
+  }),
14
+  cssSourceMap: sourceMapEnabled,
15
+  cacheBusting: config.dev.cacheBusting,
16
+  transformToRequire: {
17
+    video: ['src', 'poster'],
18
+    source: 'src',
19
+    img: 'src',
20
+    image: 'xlink:href'
21
+  }
22
+}

+ 92
- 0
build/webpack.base.conf.js View File

@@ -0,0 +1,92 @@
1
+'use strict'
2
+const path = require('path')
3
+const utils = require('./utils')
4
+const config = require('../config')
5
+const vueLoaderConfig = require('./vue-loader.conf')
6
+
7
+function resolve (dir) {
8
+  return path.join(__dirname, '..', dir)
9
+}
10
+
11
+const createLintingRule = () => ({
12
+  test: /\.(js|vue)$/,
13
+  loader: 'eslint-loader',
14
+  enforce: 'pre',
15
+  include: [resolve('src'), resolve('test')],
16
+  options: {
17
+    formatter: require('eslint-friendly-formatter'),
18
+    emitWarning: !config.dev.showEslintErrorsInOverlay
19
+  }
20
+})
21
+
22
+module.exports = {
23
+  context: path.resolve(__dirname, '../'),
24
+  entry: {
25
+    app: './src/main.js'
26
+  },
27
+  output: {
28
+    path: config.build.assetsRoot,
29
+    filename: '[name].js',
30
+    publicPath: process.env.NODE_ENV === 'production'
31
+      ? config.build.assetsPublicPath
32
+      : config.dev.assetsPublicPath
33
+  },
34
+  resolve: {
35
+    extensions: ['.js', '.vue', '.json'],
36
+    alias: {
37
+      'vue$': 'vue/dist/vue.esm.js',
38
+      '@': resolve('src'),
39
+    }
40
+  },
41
+  module: {
42
+    rules: [
43
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
44
+      {
45
+        test: /\.vue$/,
46
+        loader: 'vue-loader',
47
+        options: vueLoaderConfig
48
+      },
49
+      {
50
+        test: /\.js$/,
51
+        loader: 'babel-loader',
52
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
53
+      },
54
+      {
55
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56
+        loader: 'url-loader',
57
+        options: {
58
+          limit: 10000,
59
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
60
+        }
61
+      },
62
+      {
63
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64
+        loader: 'url-loader',
65
+        options: {
66
+          limit: 10000,
67
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
68
+        }
69
+      },
70
+      {
71
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72
+        loader: 'url-loader',
73
+        options: {
74
+          limit: 10000,
75
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76
+        }
77
+      }
78
+    ]
79
+  },
80
+  node: {
81
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
82
+    // source contains it (although only uses it if it's native).
83
+    setImmediate: false,
84
+    // prevent webpack from injecting mocks to Node native modules
85
+    // that does not make sense for the client
86
+    dgram: 'empty',
87
+    fs: 'empty',
88
+    net: 'empty',
89
+    tls: 'empty',
90
+    child_process: 'empty'
91
+  }
92
+}

+ 95
- 0
build/webpack.dev.conf.js View File

@@ -0,0 +1,95 @@
1
+'use strict'
2
+const utils = require('./utils')
3
+const webpack = require('webpack')
4
+const config = require('../config')
5
+const merge = require('webpack-merge')
6
+const path = require('path')
7
+const baseWebpackConfig = require('./webpack.base.conf')
8
+const CopyWebpackPlugin = require('copy-webpack-plugin')
9
+const HtmlWebpackPlugin = require('html-webpack-plugin')
10
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11
+const portfinder = require('portfinder')
12
+
13
+const HOST = process.env.HOST
14
+const PORT = process.env.PORT && Number(process.env.PORT)
15
+
16
+const devWebpackConfig = merge(baseWebpackConfig, {
17
+  module: {
18
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19
+  },
20
+  // cheap-module-eval-source-map is faster for development
21
+  devtool: config.dev.devtool,
22
+
23
+  // these devServer options should be customized in /config/index.js
24
+  devServer: {
25
+    clientLogLevel: 'warning',
26
+    historyApiFallback: {
27
+      rewrites: [
28
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29
+      ],
30
+    },
31
+    hot: true,
32
+    contentBase: false, // since we use CopyWebpackPlugin.
33
+    compress: true,
34
+    host: HOST || config.dev.host,
35
+    port: PORT || config.dev.port,
36
+    open: config.dev.autoOpenBrowser,
37
+    overlay: config.dev.errorOverlay
38
+      ? { warnings: false, errors: true }
39
+      : false,
40
+    publicPath: config.dev.assetsPublicPath,
41
+    proxy: config.dev.proxyTable,
42
+    quiet: true, // necessary for FriendlyErrorsPlugin
43
+    watchOptions: {
44
+      poll: config.dev.poll,
45
+    }
46
+  },
47
+  plugins: [
48
+    new webpack.DefinePlugin({
49
+      'process.env': require('../config/dev.env')
50
+    }),
51
+    new webpack.HotModuleReplacementPlugin(),
52
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53
+    new webpack.NoEmitOnErrorsPlugin(),
54
+    // https://github.com/ampedandwired/html-webpack-plugin
55
+    new HtmlWebpackPlugin({
56
+      filename: 'index.html',
57
+      template: 'index.html',
58
+      inject: true
59
+    }),
60
+    // copy custom static assets
61
+    new CopyWebpackPlugin([
62
+      {
63
+        from: path.resolve(__dirname, '../static'),
64
+        to: config.dev.assetsSubDirectory,
65
+        ignore: ['.*']
66
+      }
67
+    ])
68
+  ]
69
+})
70
+
71
+module.exports = new Promise((resolve, reject) => {
72
+  portfinder.basePort = process.env.PORT || config.dev.port
73
+  portfinder.getPort((err, port) => {
74
+    if (err) {
75
+      reject(err)
76
+    } else {
77
+      // publish the new Port, necessary for e2e tests
78
+      process.env.PORT = port
79
+      // add port to devServer config
80
+      devWebpackConfig.devServer.port = port
81
+
82
+      // Add FriendlyErrorsPlugin
83
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84
+        compilationSuccessInfo: {
85
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86
+        },
87
+        onErrors: config.dev.notifyOnErrors
88
+        ? utils.createNotifierCallback()
89
+        : undefined
90
+      }))
91
+
92
+      resolve(devWebpackConfig)
93
+    }
94
+  })
95
+})

+ 149
- 0
build/webpack.prod.conf.js View File

@@ -0,0 +1,149 @@
1
+'use strict'
2
+const path = require('path')
3
+const utils = require('./utils')
4
+const webpack = require('webpack')
5
+const config = require('../config')
6
+const merge = require('webpack-merge')
7
+const baseWebpackConfig = require('./webpack.base.conf')
8
+const CopyWebpackPlugin = require('copy-webpack-plugin')
9
+const HtmlWebpackPlugin = require('html-webpack-plugin')
10
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
11
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
12
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13
+
14
+const env = process.env.NODE_ENV === 'testing'
15
+  ? require('../config/test.env')
16
+  : require('../config/prod.env')
17
+
18
+const webpackConfig = merge(baseWebpackConfig, {
19
+  module: {
20
+    rules: utils.styleLoaders({
21
+      sourceMap: config.build.productionSourceMap,
22
+      extract: true,
23
+      usePostCSS: true
24
+    })
25
+  },
26
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
27
+  output: {
28
+    path: config.build.assetsRoot,
29
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
30
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
31
+  },
32
+  plugins: [
33
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
34
+    new webpack.DefinePlugin({
35
+      'process.env': env
36
+    }),
37
+    new UglifyJsPlugin({
38
+      uglifyOptions: {
39
+        compress: {
40
+          warnings: false
41
+        }
42
+      },
43
+      sourceMap: config.build.productionSourceMap,
44
+      parallel: true
45
+    }),
46
+    // extract css into its own file
47
+    new ExtractTextPlugin({
48
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
49
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
50
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
51
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
52
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
53
+      allChunks: true,
54
+    }),
55
+    // Compress extracted CSS. We are using this plugin so that possible
56
+    // duplicated CSS from different components can be deduped.
57
+    new OptimizeCSSPlugin({
58
+      cssProcessorOptions: config.build.productionSourceMap
59
+        ? { safe: true, map: { inline: false } }
60
+        : { safe: true }
61
+    }),
62
+    // generate dist index.html with correct asset hash for caching.
63
+    // you can customize output by editing /index.html
64
+    // see https://github.com/ampedandwired/html-webpack-plugin
65
+    new HtmlWebpackPlugin({
66
+      filename: process.env.NODE_ENV === 'testing'
67
+        ? 'index.html'
68
+        : config.build.index,
69
+      template: 'index.html',
70
+      inject: true,
71
+      minify: {
72
+        removeComments: true,
73
+        collapseWhitespace: true,
74
+        removeAttributeQuotes: true
75
+        // more options:
76
+        // https://github.com/kangax/html-minifier#options-quick-reference
77
+      },
78
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
79
+      chunksSortMode: 'dependency'
80
+    }),
81
+    // keep module.id stable when vendor modules does not change
82
+    new webpack.HashedModuleIdsPlugin(),
83
+    // enable scope hoisting
84
+    new webpack.optimize.ModuleConcatenationPlugin(),
85
+    // split vendor js into its own file
86
+    new webpack.optimize.CommonsChunkPlugin({
87
+      name: 'vendor',
88
+      minChunks (module) {
89
+        // any required modules inside node_modules are extracted to vendor
90
+        return (
91
+          module.resource &&
92
+          /\.js$/.test(module.resource) &&
93
+          module.resource.indexOf(
94
+            path.join(__dirname, '../node_modules')
95
+          ) === 0
96
+        )
97
+      }
98
+    }),
99
+    // extract webpack runtime and module manifest to its own file in order to
100
+    // prevent vendor hash from being updated whenever app bundle is updated
101
+    new webpack.optimize.CommonsChunkPlugin({
102
+      name: 'manifest',
103
+      minChunks: Infinity
104
+    }),
105
+    // This instance extracts shared chunks from code splitted chunks and bundles them
106
+    // in a separate chunk, similar to the vendor chunk
107
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
108
+    new webpack.optimize.CommonsChunkPlugin({
109
+      name: 'app',
110
+      async: 'vendor-async',
111
+      children: true,
112
+      minChunks: 3
113
+    }),
114
+
115
+    // copy custom static assets
116
+    new CopyWebpackPlugin([
117
+      {
118
+        from: path.resolve(__dirname, '../static'),
119
+        to: config.build.assetsSubDirectory,
120
+        ignore: ['.*']
121
+      }
122
+    ])
123
+  ]
124
+})
125
+
126
+if (config.build.productionGzip) {
127
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
128
+
129
+  webpackConfig.plugins.push(
130
+    new CompressionWebpackPlugin({
131
+      asset: '[path].gz[query]',
132
+      algorithm: 'gzip',
133
+      test: new RegExp(
134
+        '\\.(' +
135
+        config.build.productionGzipExtensions.join('|') +
136
+        ')$'
137
+      ),
138
+      threshold: 10240,
139
+      minRatio: 0.8
140
+    })
141
+  )
142
+}
143
+
144
+if (config.build.bundleAnalyzerReport) {
145
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
146
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
147
+}
148
+
149
+module.exports = webpackConfig

+ 32
- 0
build/webpack.test.conf.js View File

@@ -0,0 +1,32 @@
1
+'use strict'
2
+// This is the webpack config used for unit tests.
3
+
4
+const utils = require('./utils')
5
+const webpack = require('webpack')
6
+const merge = require('webpack-merge')
7
+const baseWebpackConfig = require('./webpack.base.conf')
8
+
9
+const webpackConfig = merge(baseWebpackConfig, {
10
+  // use inline sourcemap for karma-sourcemap-loader
11
+  module: {
12
+    rules: utils.styleLoaders()
13
+  },
14
+  devtool: '#inline-source-map',
15
+  resolveLoader: {
16
+    alias: {
17
+      // necessary to to make lang="scss" work in test when using vue-loader's ?inject option
18
+      // see discussion at https://github.com/vuejs/vue-loader/issues/724
19
+      'scss-loader': 'sass-loader'
20
+    }
21
+  },
22
+  plugins: [
23
+    new webpack.DefinePlugin({
24
+      'process.env': require('../config/test.env')
25
+    })
26
+  ]
27
+})
28
+
29
+// no need for app entry during tests
30
+delete webpackConfig.entry
31
+
32
+module.exports = webpackConfig

+ 7
- 0
config/dev.env.js View File

@@ -0,0 +1,7 @@
1
+'use strict'
2
+const merge = require('webpack-merge')
3
+const prodEnv = require('./prod.env')
4
+
5
+module.exports = merge(prodEnv, {
6
+  NODE_ENV: '"development"'
7
+})

+ 76
- 0
config/index.js View File

@@ -0,0 +1,76 @@
1
+'use strict'
2
+// Template version: 1.3.1
3
+// see http://vuejs-templates.github.io/webpack for documentation.
4
+
5
+const path = require('path')
6
+
7
+module.exports = {
8
+  dev: {
9
+
10
+    // Paths
11
+    assetsSubDirectory: 'static',
12
+    assetsPublicPath: '/',
13
+    proxyTable: {},
14
+
15
+    // Various Dev Server settings
16
+    host: 'localhost', // can be overwritten by process.env.HOST
17
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18
+    autoOpenBrowser: false,
19
+    errorOverlay: true,
20
+    notifyOnErrors: true,
21
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22
+
23
+    // Use Eslint Loader?
24
+    // If true, your code will be linted during bundling and
25
+    // linting errors and warnings will be shown in the console.
26
+    useEslint: true,
27
+    // If true, eslint errors and warnings will also be shown in the error overlay
28
+    // in the browser.
29
+    showEslintErrorsInOverlay: false,
30
+
31
+    /**
32
+     * Source Maps
33
+     */
34
+
35
+    // https://webpack.js.org/configuration/devtool/#development
36
+    devtool: 'cheap-module-eval-source-map',
37
+
38
+    // If you have problems debugging vue-files in devtools,
39
+    // set this to false - it *may* help
40
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
41
+    cacheBusting: true,
42
+
43
+    cssSourceMap: true
44
+  },
45
+
46
+  build: {
47
+    // Template for index.html
48
+    index: path.resolve(__dirname, '../dist/index.html'),
49
+
50
+    // Paths
51
+    assetsRoot: path.resolve(__dirname, '../dist'),
52
+    assetsSubDirectory: 'static',
53
+    assetsPublicPath: '/',
54
+
55
+    /**
56
+     * Source Maps
57
+     */
58
+
59
+    productionSourceMap: true,
60
+    // https://webpack.js.org/configuration/devtool/#production
61
+    devtool: '#source-map',
62
+
63
+    // Gzip off by default as many popular static hosts such as
64
+    // Surge or Netlify already gzip all static assets for you.
65
+    // Before setting to `true`, make sure to:
66
+    // npm install --save-dev compression-webpack-plugin
67
+    productionGzip: false,
68
+    productionGzipExtensions: ['js', 'css'],
69
+
70
+    // Run the build command with an extra argument to
71
+    // View the bundle analyzer report after build finishes:
72
+    // `npm run build --report`
73
+    // Set to `true` or `false` to always turn it on or off
74
+    bundleAnalyzerReport: process.env.npm_config_report
75
+  }
76
+}

+ 4
- 0
config/prod.env.js View File

@@ -0,0 +1,4 @@
1
+'use strict'
2
+module.exports = {
3
+  NODE_ENV: '"production"'
4
+}

+ 7
- 0
config/test.env.js View File

@@ -0,0 +1,7 @@
1
+'use strict'
2
+const merge = require('webpack-merge')
3
+const devEnv = require('./dev.env')
4
+
5
+module.exports = merge(devEnv, {
6
+  NODE_ENV: '"testing"'
7
+})

+ 12
- 0
index.html View File

@@ -0,0 +1,12 @@
1
+<!DOCTYPE html>
2
+<html>
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6
+    <title>macarrodes</title>
7
+  </head>
8
+  <body>
9
+    <div id="app"></div>
10
+    <!-- built files will be auto injected -->
11
+  </body>
12
+</html>

+ 14598
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 98
- 0
package.json View File

@@ -0,0 +1,98 @@
1
+{
2
+  "name": "macarrodes",
3
+  "version": "1.0.0",
4
+  "description": "Bookmarks manager",
5
+  "author": "Alfred <alfredgg@yahoo.es>",
6
+  "private": true,
7
+  "scripts": {
8
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9
+    "start": "npm run dev",
10
+    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
11
+    "e2e": "node test/e2e/runner.js",
12
+    "test": "npm run unit && npm run e2e",
13
+    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
14
+    "build": "node build/build.js"
15
+  },
16
+  "dependencies": {
17
+    "vue": "^2.5.2",
18
+    "vue-router": "^3.0.1"
19
+  },
20
+  "devDependencies": {
21
+    "autoprefixer": "^7.1.2",
22
+    "babel-core": "^6.22.1",
23
+    "babel-eslint": "^8.2.1",
24
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
25
+    "babel-loader": "^7.1.1",
26
+    "babel-plugin-istanbul": "^4.1.1",
27
+    "babel-plugin-syntax-jsx": "^6.18.0",
28
+    "babel-plugin-transform-runtime": "^6.22.0",
29
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
30
+    "babel-preset-env": "^1.3.2",
31
+    "babel-preset-stage-2": "^6.22.0",
32
+    "babel-register": "^6.22.0",
33
+    "chai": "^4.1.2",
34
+    "chalk": "^2.0.1",
35
+    "chromedriver": "^2.27.2",
36
+    "copy-webpack-plugin": "^4.0.1",
37
+    "cross-env": "^5.0.1",
38
+    "cross-spawn": "^5.0.1",
39
+    "css-loader": "^0.28.0",
40
+    "eslint": "^4.15.0",
41
+    "eslint-config-standard": "^10.2.1",
42
+    "eslint-friendly-formatter": "^3.0.0",
43
+    "eslint-loader": "^1.7.1",
44
+    "eslint-plugin-import": "^2.7.0",
45
+    "eslint-plugin-node": "^5.2.0",
46
+    "eslint-plugin-promise": "^3.4.0",
47
+    "eslint-plugin-standard": "^3.0.1",
48
+    "eslint-plugin-vue": "^4.0.0",
49
+    "extract-text-webpack-plugin": "^3.0.0",
50
+    "file-loader": "^1.1.4",
51
+    "friendly-errors-webpack-plugin": "^1.6.1",
52
+    "html-webpack-plugin": "^2.30.1",
53
+    "inject-loader": "^3.0.0",
54
+    "karma": "^1.4.1",
55
+    "karma-coverage": "^1.1.1",
56
+    "karma-mocha": "^1.3.0",
57
+    "karma-phantomjs-launcher": "^1.0.2",
58
+    "karma-phantomjs-shim": "^1.4.0",
59
+    "karma-sinon-chai": "^1.3.1",
60
+    "karma-sourcemap-loader": "^0.3.7",
61
+    "karma-spec-reporter": "0.0.31",
62
+    "karma-webpack": "^2.0.2",
63
+    "mocha": "^3.2.0",
64
+    "nightwatch": "^0.9.12",
65
+    "node-notifier": "^5.1.2",
66
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
67
+    "ora": "^1.2.0",
68
+    "phantomjs-prebuilt": "^2.1.14",
69
+    "portfinder": "^1.0.13",
70
+    "postcss-import": "^11.0.0",
71
+    "postcss-loader": "^2.0.8",
72
+    "postcss-url": "^7.2.1",
73
+    "rimraf": "^2.6.0",
74
+    "selenium-server": "^3.0.1",
75
+    "semver": "^5.3.0",
76
+    "shelljs": "^0.7.6",
77
+    "sinon": "^4.0.0",
78
+    "sinon-chai": "^2.8.0",
79
+    "uglifyjs-webpack-plugin": "^1.1.1",
80
+    "url-loader": "^0.5.8",
81
+    "vue-loader": "^13.3.0",
82
+    "vue-style-loader": "^3.0.1",
83
+    "vue-template-compiler": "^2.5.2",
84
+    "webpack": "^3.6.0",
85
+    "webpack-bundle-analyzer": "^2.9.0",
86
+    "webpack-dev-server": "^2.9.1",
87
+    "webpack-merge": "^4.1.0"
88
+  },
89
+  "engines": {
90
+    "node": ">= 6.0.0",
91
+    "npm": ">= 3.0.0"
92
+  },
93
+  "browserslist": [
94
+    "> 1%",
95
+    "last 2 versions",
96
+    "not ie <= 8"
97
+  ]
98
+}

+ 23
- 0
src/App.vue View File

@@ -0,0 +1,23 @@
1
+<template>
2
+  <div id="app">
3
+    <img src="./assets/logo.png">
4
+    <router-view/>
5
+  </div>
6
+</template>
7
+
8
+<script>
9
+export default {
10
+  name: 'App'
11
+}
12
+</script>
13
+
14
+<style>
15
+#app {
16
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
17
+  -webkit-font-smoothing: antialiased;
18
+  -moz-osx-font-smoothing: grayscale;
19
+  text-align: center;
20
+  color: #2c3e50;
21
+  margin-top: 60px;
22
+}
23
+</style>

BIN
src/assets/logo.png View File


+ 113
- 0
src/components/HelloWorld.vue View File

@@ -0,0 +1,113 @@
1
+<template>
2
+  <div class="hello">
3
+    <h1>{{ msg }}</h1>
4
+    <h2>Essential Links</h2>
5
+    <ul>
6
+      <li>
7
+        <a
8
+          href="https://vuejs.org"
9
+          target="_blank"
10
+        >
11
+          Core Docs
12
+        </a>
13
+      </li>
14
+      <li>
15
+        <a
16
+          href="https://forum.vuejs.org"
17
+          target="_blank"
18
+        >
19
+          Forum
20
+        </a>
21
+      </li>
22
+      <li>
23
+        <a
24
+          href="https://chat.vuejs.org"
25
+          target="_blank"
26
+        >
27
+          Community Chat
28
+        </a>
29
+      </li>
30
+      <li>
31
+        <a
32
+          href="https://twitter.com/vuejs"
33
+          target="_blank"
34
+        >
35
+          Twitter
36
+        </a>
37
+      </li>
38
+      <br>
39
+      <li>
40
+        <a
41
+          href="http://vuejs-templates.github.io/webpack/"
42
+          target="_blank"
43
+        >
44
+          Docs for This Template
45
+        </a>
46
+      </li>
47
+    </ul>
48
+    <h2>Ecosystem</h2>
49
+    <ul>
50
+      <li>
51
+        <a
52
+          href="http://router.vuejs.org/"
53
+          target="_blank"
54
+        >
55
+          vue-router
56
+        </a>
57
+      </li>
58
+      <li>
59
+        <a
60
+          href="http://vuex.vuejs.org/"
61
+          target="_blank"
62
+        >
63
+          vuex
64
+        </a>
65
+      </li>
66
+      <li>
67
+        <a
68
+          href="http://vue-loader.vuejs.org/"
69
+          target="_blank"
70
+        >
71
+          vue-loader
72
+        </a>
73
+      </li>
74
+      <li>
75
+        <a
76
+          href="https://github.com/vuejs/awesome-vue"
77
+          target="_blank"
78
+        >
79
+          awesome-vue
80
+        </a>
81
+      </li>
82
+    </ul>
83
+  </div>
84
+</template>
85
+
86
+<script>
87
+export default {
88
+  name: 'HelloWorld',
89
+  data () {
90
+    return {
91
+      msg: 'Welcome to Your Vue.js App'
92
+    }
93
+  }
94
+}
95
+</script>
96
+
97
+<!-- Add "scoped" attribute to limit CSS to this component only -->
98
+<style scoped>
99
+h1, h2 {
100
+  font-weight: normal;
101
+}
102
+ul {
103
+  list-style-type: none;
104
+  padding: 0;
105
+}
106
+li {
107
+  display: inline-block;
108
+  margin: 0 10px;
109
+}
110
+a {
111
+  color: #42b983;
112
+}
113
+</style>

+ 15
- 0
src/main.js View File

@@ -0,0 +1,15 @@
1
+// The Vue build version to load with the `import` command
2
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3
+import Vue from 'vue'
4
+import App from './App'
5
+import router from './router'
6
+
7
+Vue.config.productionTip = false
8
+
9
+/* eslint-disable no-new */
10
+new Vue({
11
+  el: '#app',
12
+  router,
13
+  components: { App },
14
+  template: '<App/>'
15
+})

+ 15
- 0
src/router/index.js View File

@@ -0,0 +1,15 @@
1
+import Vue from 'vue'
2
+import Router from 'vue-router'
3
+import HelloWorld from '@/components/HelloWorld'
4
+
5
+Vue.use(Router)
6
+
7
+export default new Router({
8
+  routes: [
9
+    {
10
+      path: '/',
11
+      name: 'HelloWorld',
12
+      component: HelloWorld
13
+    }
14
+  ]
15
+})

+ 0
- 0
static/.gitkeep View File


+ 27
- 0
test/e2e/custom-assertions/elementCount.js View File

@@ -0,0 +1,27 @@
1
+// A custom Nightwatch assertion.
2
+// The assertion name is the filename.
3
+// Example usage:
4
+//
5
+//   browser.assert.elementCount(selector, count)
6
+//
7
+// For more information on custom assertions see:
8
+// http://nightwatchjs.org/guide#writing-custom-assertions
9
+
10
+exports.assertion = function (selector, count) {
11
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
12
+  this.expected = count
13
+  this.pass = function (val) {
14
+    return val === this.expected
15
+  }
16
+  this.value = function (res) {
17
+    return res.value
18
+  }
19
+  this.command = function (cb) {
20
+    var self = this
21
+    return this.api.execute(function (selector) {
22
+      return document.querySelectorAll(selector).length
23
+    }, [selector], function (res) {
24
+      cb.call(self, res)
25
+    })
26
+  }
27
+}

+ 46
- 0
test/e2e/nightwatch.conf.js View File

@@ -0,0 +1,46 @@
1
+require('babel-register')
2
+var config = require('../../config')
3
+
4
+// http://nightwatchjs.org/gettingstarted#settings-file
5
+module.exports = {
6
+  src_folders: ['test/e2e/specs'],
7
+  output_folder: 'test/e2e/reports',
8
+  custom_assertions_path: ['test/e2e/custom-assertions'],
9
+
10
+  selenium: {
11
+    start_process: true,
12
+    server_path: require('selenium-server').path,
13
+    host: '127.0.0.1',
14
+    port: 4444,
15
+    cli_args: {
16
+      'webdriver.chrome.driver': require('chromedriver').path
17
+    }
18
+  },
19
+
20
+  test_settings: {
21
+    default: {
22
+      selenium_port: 4444,
23
+      selenium_host: 'localhost',
24
+      silent: true,
25
+      globals: {
26
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27
+      }
28
+    },
29
+
30
+    chrome: {
31
+      desiredCapabilities: {
32
+        browserName: 'chrome',
33
+        javascriptEnabled: true,
34
+        acceptSslCerts: true
35
+      }
36
+    },
37
+
38
+    firefox: {
39
+      desiredCapabilities: {
40
+        browserName: 'firefox',
41
+        javascriptEnabled: true,
42
+        acceptSslCerts: true
43
+      }
44
+    }
45
+  }
46
+}

+ 48
- 0
test/e2e/runner.js View File

@@ -0,0 +1,48 @@
1
+// 1. start the dev server using production config
2
+process.env.NODE_ENV = 'testing'
3
+
4
+const webpack = require('webpack')
5
+const DevServer = require('webpack-dev-server')
6
+
7
+const webpackConfig = require('../../build/webpack.prod.conf')
8
+const devConfigPromise = require('../../build/webpack.dev.conf')
9
+
10
+let server
11
+
12
+devConfigPromise.then(devConfig => {
13
+  const devServerOptions = devConfig.devServer
14
+  const compiler = webpack(webpackConfig)
15
+  server = new DevServer(compiler, devServerOptions)
16
+  const port = devServerOptions.port
17
+  const host = devServerOptions.host
18
+  return server.listen(port, host)
19
+})
20
+.then(() => {
21
+  // 2. run the nightwatch test suite against it
22
+  // to run in additional browsers:
23
+  //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
24
+  //    2. add it to the --env flag below
25
+  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
26
+  // For more information on Nightwatch's config file, see
27
+  // http://nightwatchjs.org/guide#settings-file
28
+  let opts = process.argv.slice(2)
29
+  if (opts.indexOf('--config') === -1) {
30
+    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
31
+  }
32
+  if (opts.indexOf('--env') === -1) {
33
+    opts = opts.concat(['--env', 'chrome'])
34
+  }
35
+
36
+  const spawn = require('cross-spawn')
37
+  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
38
+
39
+  runner.on('exit', function (code) {
40
+    server.close()
41
+    process.exit(code)
42
+  })
43
+
44
+  runner.on('error', function (err) {
45
+    server.close()
46
+    throw err
47
+  })
48
+})

+ 19
- 0
test/e2e/specs/test.js View File

@@ -0,0 +1,19 @@
1
+// For authoring Nightwatch tests, see
2
+// http://nightwatchjs.org/guide#usage
3
+
4
+module.exports = {
5
+  'default e2e tests': function (browser) {
6
+    // automatically uses dev Server port from /config.index.js
7
+    // default: http://localhost:8080
8
+    // see nightwatch.conf.js
9
+    const devServer = browser.globals.devServerURL
10
+
11
+    browser
12
+      .url(devServer)
13
+      .waitForElementVisible('#app', 5000)
14
+      .assert.elementPresent('.hello')
15
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
16
+      .assert.elementCount('img', 1)
17
+      .end()
18
+  }
19
+}

+ 9
- 0
test/unit/.eslintrc View File

@@ -0,0 +1,9 @@
1
+{
2
+  "env": { 
3
+    "mocha": true
4
+  },
5
+  "globals": { 
6
+    "expect": true,
7
+    "sinon": true
8
+  }
9
+}

+ 13
- 0
test/unit/index.js View File

@@ -0,0 +1,13 @@
1
+import Vue from 'vue'
2
+
3
+Vue.config.productionTip = false
4
+
5
+// require all test files (files that ends with .spec.js)
6
+const testsContext = require.context('./specs', true, /\.spec$/)
7
+testsContext.keys().forEach(testsContext)
8
+
9
+// require all src files except main.js for coverage.
10
+// you can also change this to match only the subset of files that
11
+// you want coverage for.
12
+const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
13
+srcContext.keys().forEach(srcContext)

+ 33
- 0
test/unit/karma.conf.js View File

@@ -0,0 +1,33 @@
1
+// This is a karma config file. For more details see
2
+//   http://karma-runner.github.io/0.13/config/configuration-file.html
3
+// we are also using it with karma-webpack
4
+//   https://github.com/webpack/karma-webpack
5
+
6
+var webpackConfig = require('../../build/webpack.test.conf')
7
+
8
+module.exports = function karmaConfig (config) {
9
+  config.set({
10
+    // to run in additional browsers:
11
+    // 1. install corresponding karma launcher
12
+    //    http://karma-runner.github.io/0.13/config/browsers.html
13
+    // 2. add it to the `browsers` array below.
14
+    browsers: ['PhantomJS'],
15
+    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
16
+    reporters: ['spec', 'coverage'],
17
+    files: ['./index.js'],
18
+    preprocessors: {
19
+      './index.js': ['webpack', 'sourcemap']
20
+    },
21
+    webpack: webpackConfig,
22
+    webpackMiddleware: {
23
+      noInfo: true
24
+    },
25
+    coverageReporter: {
26
+      dir: './coverage',
27
+      reporters: [
28
+        { type: 'lcov', subdir: '.' },
29
+        { type: 'text-summary' }
30
+      ]
31
+    }
32
+  })
33
+}

+ 11
- 0
test/unit/specs/HelloWorld.spec.js View File

@@ -0,0 +1,11 @@
1
+import Vue from 'vue'
2
+import HelloWorld from '@/components/HelloWorld'
3
+
4
+describe('HelloWorld.vue', () => {
5
+  it('should render correct contents', () => {
6
+    const Constructor = Vue.extend(HelloWorld)
7
+    const vm = new Constructor().$mount()
8
+    expect(vm.$el.querySelector('.hello h1').textContent)
9
+      .to.equal('Welcome to Your Vue.js App')
10
+  })
11
+})

Loading…
Cancel
Save