Merge pull request #2 from tardyp/vue

add a vue.js example as well
uglycoyote · Mar 24, 2019 · e72efc3 · e72efc3
2 parents 08c3b27 + d299255
commit e72efc3
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,10 @@
     "@types/react": "^16.0.5",
     "@types/react-dom": "^16.0.3",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.2.0",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.7.0",
+    "vue-template-compiler": "^2.6.10"
   },
   "devDependencies": {
     "awesome-typescript-loader": "^3.2.3",

diff --git a/src/Main.js b/src/Main.js
@@ -1,8 +1,15 @@
 import {
     SampleReactComponent
 } from "./SampleReactComponent"
+// @ts-ignore
+import
+    SampleVueComponent
+from "./SampleVueComponent.vue"
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import Vue from 'vue'
+
+var useReact=true;
 
 console.log("Hello from the buildbot-react-plugin-boilerplate!")
 
@@ -73,17 +80,34 @@ module.directive('myReactDirective', ['$q', '$window', 'dataService', 'bbSetting
                 order: '-changeid'
             })
             var props = {
-                changes: changes
+                changes
             }
-            var react_element = React.createElement(SampleReactComponent, props, null)
 
-            function update() {
-                ReactDOM.render(
-                    react_element,
-                    element.get(0));
+            if (useReact) {
+                var react_element = React.createElement(SampleReactComponent, props, null)
+                function update() {
+                    ReactDOM.render(
+                        react_element,
+                        element.get(0));
+                }
+                changes.onChange = () => update()
+                update()
+
+            } else {
+                var ComponentClass = Vue.extend(SampleVueComponent)
+                /* cannot pass directly the changes, as the magic
+                 of buildbot data module clashes with the magic of vue observers */
+                var data = {changes: []}
+                var e = new ComponentClass({
+                    data: data,
+                    el: element.get(0)
+                })
+                function update() {
+                    data.changes = changes.slice()
+                }
+                changes.onChange = () => update()
             }
-            changes.onChange = () => update()
-            update()
+
         }
 
         return {

diff --git a/src/SampleVueComponent.vue b/src/SampleVueComponent.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <p>Showing {{changes.length}} changes:</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Revision</th>
+          <th>Author</th>
+          <th>Description</th>
+          <th>Files</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="change in changes" :key="change.id">
+          <td key="revision">
+            {{change.revision}}
+          </td>
+          <td key="author">
+            {{change.author}}
+          </td>
+          <td key="comments">
+            {{change.comments}}
+          </td>
+          <td key="files">
+            <ul>
+              <li v-for="file in change.files" :key="file">{{file}}</li>
+            </ul>
+            <span v-if="change.files.length==0">None</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+module.exports = {
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>
diff --git a/webpack.config.js b/webpack.config.js
@@ -6,10 +6,11 @@ var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlug
 var BitBarWebpackProgressPlugin = require("bitbar-webpack-progress-plugin");
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin")
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 const extractLess = new ExtractTextPlugin({
     filename: "styles.css",
-    // might want to use style-loader for development?  
+    // might want to use style-loader for development?
     //   it lets you hot-reload styles? If so, this next commented line prevents styles.css from getting built statically.
     // disable: process.env.NODE_ENV === "development"
 });
@@ -36,7 +37,7 @@ module.exports = {
     },
     plugins: [
 
-        // Separate "vendors" bundle for external libraries?          
+        // Separate "vendors" bundle for external libraries?
         // new CommonsChunkPlugin({
         //     name: 'vendors',
         //     minChunks: function(module) {
@@ -51,24 +52,29 @@ module.exports = {
         //     { from: 'assets', to: 'build/static/assets'},
         //     ]),
         new BitBarWebpackProgressPlugin(),
+        new VueLoaderPlugin(),
         extractLess
     ],
-          
+
 
     // Enable sourcemaps for debugging webpack's output.
     devtool: "source-map",
 
     resolve: {
         // Add '.ts' and '.tsx' as resolvable extensions.
-        extensions: [".ts", ".tsx", ".js", ".json"],
+        extensions: [".ts", ".tsx", ".js", ".vue"],
         plugins: [
-            new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
-        ]
-
+            new TsConfigPathsPlugin(/* { tsconfig, compiler } */),
+        ],
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
+          }
     },
 
     module: {
         rules: [
+            // all files ending with ".vue" are loaded using vue-loader
+            { test: /\.vue$/, loader: 'vue-loader' },
 
             {
                   // JS LOADER
@@ -84,14 +90,17 @@ module.exports = {
             { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
 
             // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-            { 
-                enforce: "pre", 
-                test: /\.js$/, 
+            {
+                enforce: "pre",
+                test: /\.js$/,
                 loader: "source-map-loader",
             },
             {
                 test: /\.css$/,
-                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+                use: [
+                    'vue-style-loader',
+                    'css-loader'
+                  ]
             },
             {
                 test: /\.less$/,
@@ -107,12 +116,12 @@ module.exports = {
             }
 
 
-            // { 
+            // {
             //     test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
             //     //use: "url-loader?limit=100000"
             //     use: [ {
             //         loader: "file-loader",
-            //         options: { 
+            //         options: {
             //             outputPath: "build/static/assets/"
             //         }
             //     }]
@@ -134,4 +143,4 @@ module.exports = {
     //    fs: "empty"
     // },
 
-};
+};