Merge branch 'add-vue-loader' into 'master'

Add vue loader

Closes #29519

See merge request !10517

.eslintrc

@@ -13,9 +13,11 @@
   },
   "plugins": [
     "filenames",
-    "import"
+    "import",
+    "html"
   ],
   "settings": {
+    "html/html-extensions": [".html", ".html.raw", ".vue"],
     "import/resolver": {
       "webpack": {
         "config": "./config/webpack.config.js"

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -4,8 +4,8 @@ import PipelinesTableComponent from '../../vue_shared/components/pipelines_table
 import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
 import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
 import eventHub from '../../vue_pipelines_index/event_hub';
-import EmptyState from '../../vue_pipelines_index/components/empty_state';
-import ErrorState from '../../vue_pipelines_index/components/error_state';
+import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
+import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 import Poll from '../../lib/utils/poll';

app/assets/javascripts/vue_pipelines_index/components/async_button.js → app/assets/javascripts/vue_pipelines_index/components/async_button.vue

+<script>
 /* eslint-disable no-new, no-alert */
 /* global Flash */
 import '~/flash';
@@ -75,8 +76,10 @@ export default {
         });
     },
   },
+};
+</script>
 
-  template: `
+<template>
   <button
     type="button"
     @click="onClick"
@@ -85,9 +88,9 @@ export default {
     :aria-label="title"
     data-container="body"
     data-placement="top"
-      :disabled="isLoading">
-      <i :class="iconClass" aria-hidden="true"/>
-      <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" />
+    :disabled="isLoading"
+  >
+    <i :class="iconClass" aria-hidden="true"></i>
+    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
   </button>
-  `,
-};
+</template>

app/assets/javascripts/vue_pipelines_index/components/empty_state.js

-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
-export default {
-  props: {
-    helpPagePath: {
-      type: String,
-      required: true,
-    },
-  },
-
-  template: `
-    <div class="row empty-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesEmptyStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>Build with confidence</h4>
-          <p>
-            Continous Integration can help catch bugs by running your tests automatically,
-            while Continuous Deployment can help you deliver code to your product environment.
-          </p>
-          <a :href="helpPagePath" class="btn btn-info">
-            Get started with Pipelines
-          </a>
-        </div>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_pipelines_index/components/empty_state.vue

+<script>
+import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
+
+export default {
+  props: {
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({ pipelinesEmptyStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>Build with confidence</h4>
+        <p>
+          Continous Integration can help catch bugs by running your tests automatically,
+          while Continuous Deployment can help you deliver code to your product environment.
+        </p>
+        <a :href="helpPagePath" class="btn btn-info">
+          Get started with Pipelines
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_pipelines_index/components/error_state.js

-import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
-
-export default {
-  template: `
-    <div class="row empty-state js-pipelines-error-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesErrorStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>The API failed to fetch the pipelines.</h4>
-        </div>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_pipelines_index/components/error_state.vue

+<script>
+import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
+
+export default {
+  data: () => ({ pipelinesErrorStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state js-pipelines-error-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>The API failed to fetch the pipelines.</h4>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_pipelines_index/pipelines.js

@@ -4,8 +4,8 @@ import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import TablePaginationComponent from '../vue_shared/components/table_pagination';
-import EmptyState from './components/empty_state';
-import ErrorState from './components/error_state';
+import EmptyState from './components/empty_state.vue';
+import ErrorState from './components/error_state.vue';
 import NavigationTabs from './components/navigation_tabs';
 import NavigationControls from './components/nav_controls';
 import Poll from '../lib/utils/poll';

app/assets/javascripts/vue_shared/components/pipelines_table_row.js

 /* eslint-disable no-param-reassign */
 
-import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button';
+import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button.vue';
 import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
 import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';

changelogs/unreleased/add-vue-loader.yml

+---
+title: add support for .vue templates
+merge_request: 10517
+author:

config/dependency_decisions.yml

@@ -344,3 +344,33 @@
     :why: https://github.com/nodeca/pako/blob/master/LICENSE
     :versions: []
     :when: 2017-04-05 10:43:45.897720000 Z
+- - :approve
+  - caniuse-db
+  - :who: Mike Greiling
+    :why: https://github.com/Fyrd/caniuse/blob/master/LICENSE
+    :versions: []
+    :when: 2017-04-07 16:05:14.185549000 Z
+- - :approve
+  - domelementtype
+  - :who: Mike Greiling
+    :why: https://github.com/fb55/domelementtype/blob/master/LICENSE
+    :versions: []
+    :when: 2017-04-07 16:19:17.992640000 Z
+- - :approve
+  - domhandler
+  - :who: Mike Greiling
+    :why: https://github.com/fb55/domhandler/blob/master/LICENSE
+    :versions: []
+    :when: 2017-04-07 16:19:19.628953000 Z
+- - :approve
+  - domutils
+  - :who: Mike Greiling
+    :why: https://github.com/fb55/domutils/blob/master/LICENSE
+    :versions: []
+    :when: 2017-04-07 16:19:21.159356000 Z
+- - :approve
+  - entities
+  - :who: Mike Greiling
+    :why: https://github.com/fb55/entities/blob/master/LICENSE
+    :versions: []
+    :when: 2017-04-07 16:19:23.900571000 Z

config/webpack.config.js

@@ -65,13 +65,18 @@ var config = {
       {
         test: /\.js$/,
         exclude: /(node_modules|vendor\/assets)/,
-        loader: 'babel-loader'
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
       },
       {
         test: /\.svg$/,
-        use: 'raw-loader'
-      }, {
-        test: /\.(worker.js|pdf)$/,
+        loader: 'raw-loader',
+      },
+      {
+        test: /\.(worker\.js|pdf)$/,
         exclude: /node_modules/,
         loader: 'file-loader',
       },

package.json

@@ -2,9 +2,9 @@
   "private": true,
   "scripts": {
     "dev-server": "webpack-dev-server --config config/webpack.config.js",
-    "eslint": "eslint --max-warnings 0 --ext .js .",
-    "eslint-fix": "eslint --max-warnings 0 --ext .js --fix .",
-    "eslint-report": "eslint --max-warnings 0 --ext .js --format html --output-file ./eslint-report.html .",
+    "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
+    "eslint-fix": "eslint --max-warnings 0 --ext .js,.vue --fix .",
+    "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html .",
     "karma": "karma start config/karma.config.js --single-run",
     "karma-coverage": "BABEL_ENV=coverage karma start config/karma.config.js --single-run",
     "karma-start": "karma start config/karma.config.js",
@@ -20,10 +20,12 @@
     "bootstrap-sass": "^3.3.6",
     "compression-webpack-plugin": "^0.3.2",
     "core-js": "^2.4.1",
+    "css-loader": "^0.28.0",
     "d3": "^3.5.11",
     "document-register-element": "^1.3.0",
     "dropzone": "^4.2.0",
     "emoji-unicode-version": "^0.2.1",
+    "eslint-plugin-html": "^2.0.1",
     "file-loader": "^0.11.1",
     "jquery": "^2.2.1",
     "jquery-ujs": "^1.2.1",
@@ -42,8 +44,10 @@
     "timeago.js": "^2.0.5",
     "underscore": "^1.8.3",
     "visibilityjs": "^1.2.4",
-    "vue": "^2.2.4",
+    "vue": "^2.2.6",
+    "vue-loader": "^11.3.4",
     "vue-resource": "^0.9.3",
+    "vue-template-compiler": "^2.2.6",
     "webpack": "^2.3.3",
     "webpack-bundle-analyzer": "^2.3.0"
   },

spec/javascripts/vue_pipelines_index/async_button_spec.js

 import Vue from 'vue';
-import asyncButtonComp from '~/vue_pipelines_index/components/async_button';
+import asyncButtonComp from '~/vue_pipelines_index/components/async_button.vue';
 
 describe('Pipelines Async Button', () => {
   let component;

spec/javascripts/vue_pipelines_index/empty_state_spec.js

 import Vue from 'vue';
-import emptyStateComp from '~/vue_pipelines_index/components/empty_state';
+import emptyStateComp from '~/vue_pipelines_index/components/empty_state.vue';
 
 describe('Pipelines Empty State', () => {
   let component;

spec/javascripts/vue_pipelines_index/error_state_spec.js

 import Vue from 'vue';
-import errorStateComp from '~/vue_pipelines_index/components/error_state';
+import errorStateComp from '~/vue_pipelines_index/components/error_state.vue';
 
 describe('Pipelines Error State', () => {
   let component;