Restructuring with Vue Files

- Restructured all the components to house the template and style inside a Vue file.
  - This allows the use of the vue-loader in place of the vue-template-loader.
  - this allows the use of jest-vue-preprocessor instead of a custom wrote preprocessor.

Author: Patrick Housley

custom-typings/vue-component-template.d.ts

@@ -1,19 +1,5 @@
-declare module '*.scss' {
-  import Vue = require('vue')
-  interface Template {
-    <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
-    <V extends typeof Vue>(component: V): V
-  }
-  const template: Template
-  export = template
-}
-
-declare module '*.html' {
-  import Vue = require('vue')
-  interface Template {
-    <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
-    <V extends typeof Vue>(component: V): V
-  }
-  const template: Template
-  export = template
+declare module "*.vue" {
+    import Vue from "vue";
+    const template: Vue.ComponentOptions;
+    export default template;
 }

package-lock.json

@@ -35,12 +35,17 @@
   "devDependencies": {
     "@types/jest": "20.0.2",
     "autoprefixer": "7.1.1",
+    "babel": "6.23.0",
+    "babel-preset-env": "1.6.0",
+    "babel-preset-es2015": "6.24.1",
     "clean-webpack-plugin": "0.1.16",
     "css-loader": "0.28.4",
     "cssnano": "3.10.0",
+    "html-loader": "0.4.5",
     "html-webpack-plugin": "2.29.0",
     "husky": "0.14.2",
     "jest": "20.0.4",
+    "jest-vue-preprocessor": "1.0.1",
     "json-loader": "0.5.4",
     "lint-staged": "4.0.0",
     "node-sass": "4.5.3",
@@ -50,12 +55,12 @@
     "stats-webpack-plugin": "0.6.1",
     "style-loader": "0.18.2",
     "stylefmt": "6.0.0",
+    "ts-jest": "20.0.6",
     "ts-loader": "2.2.1",
     "tslib": "1.7.1",
     "tslint": "5.4.3",
     "typescript": "2.4.1",
-    "vue-template-compiler": "2.3.4",
-    "vue-template-loader": "0.3.1",
+    "vue-loader": "13.0.0",
     "webpack": "3.0.0",
     "webpack-dev-server": "2.5.0",
     "webpack-merge": "4.1.0"
@@ -101,7 +106,9 @@
     "setupTestFrameworkScriptFile": "<rootDir>/src/setup-jest.ts",
     "testRegex": "\\.spec\\.(ts|js)$",
     "transform": {
-      ".ts": "<rootDir>/src/test-lib/utils/vue-preprocessor.js"
+      ".js$": "<rootDir>/node_modules/babel-jest",
+      ".vue$": "<rootDir>/node_modules/jest-vue-preprocessor",
+      ".ts$": "<rootDir>/node_modules/ts-jest/preprocessor"
     }
   }
 }

package.json

@@ -1,9 +1,11 @@
 import { Vue, Component, injectable } from 'src/lib/vue.barrel';
-import * as Template from './additional-info.component.html?style=./additional-info.component.scss';
+import template from 'src/basic-app/additional-info/additional-info.component.vue';
 
-@Template
 @Component({
-  name: 'additional-info'
+  ...template,
+  ...{
+    name: 'additional-info'
+  }
 })
 @injectable()
 export class AdditionalInfoComponent extends Vue {

src/basic-app/additional-info/additional-info.component.scss

@@ -1,4 +1,10 @@
+<template>
 <div>
   <div>Application Name: {{name}}</div>
   <div>Application Version: {{version}}</div>
-</div>
+</div>
+</template>
+
+<style lang="sass" scoped>
+
+</style>

src/basic-app/additional-info/additional-info.component.ts

@@ -1,8 +1,7 @@
 import { Vue, VueClass, Component, Inject, Registry, Container, injectable } from 'src/lib/vue.barrel';
-import * as Template from './app.component.html?style=./app.component.scss';
+import template from 'src/basic-app/app/app.component.vue';
 
-@Template
-@Component
+@Component(template)
 @injectable()
 export class AppComponent extends Vue {
   @Inject()

src/basic-app/additional-info/additional-info.component.html src/basic-app/additional-info/additional-info.component.vue

@@ -0,0 +1,13 @@
+<template>
+<div>
+  <h1>Vue Test</h1>
+  <h3>{{ message }}</h3>
+  <additional-info></additional-info>
+</div>
+</template>
+
+<style lang="scss" scoped>
+h3 {
+  background: red;
+}
+</style>

src/basic-app/app/app.component.html

@@ -1,8 +1,7 @@
 import { Vue, VueClass, Component, Inject, Registry, Container, injectable } from 'src/lib/vue.barrel';
-import * as Template from './goodby-app.component.html?style=./goodby-app.component.scss';
+import template from 'src/basic-app/goodby-app/goodby-app.component.vue';
 
-@Template
-@Component
+@Component(template)
 @injectable()
 export class GoodbyAppComponent extends Vue {
   @Inject()

src/basic-app/app/app.component.scss

@@ -0,0 +1,13 @@
+<template>
+<div>
+  <h1>Vue Test</h1>
+  <h3>{{ message }}</h3>
+  <additional-info></additional-info>
+</div>
+</template>
+
+<style lang="scss" scoped>
+h3 {
+  background: red;
+}
+</style>

src/basic-app/app/app.component.ts

@@ -6,7 +6,9 @@ export interface Registry {
   [name: string]: symbol;
 }
 
+// import Vue from 'vue';
 import VueRouter from 'vue-router';
 export {
+  // Vue,
   VueRouter
 };

src/basic-app/app/app.component.vue

@@ -1,5 +1,4 @@
-import * as Vue from 'vue';
-
+/* tslint:disable:no-require-imports */
 /**
  * When building a Vue app with Webpack, we must import Vue using
  * the syntax `import Vue from 'vue'` or the application will fail
@@ -8,6 +7,10 @@ import * as Vue from 'vue';
  * corrects that by overriding the import of vue to provide the correct
  * import value.
  */
-jest.mock('vue', () => {
-  return { default: Vue };
-});
+jest.setMock('vue', (() => {
+  const Vue = require('vue');
+  return {
+    default: Vue,
+    Vue
+  };
+})());

src/basic-app/goodby-app/goodby-app.component.html

@@ -1,8 +1,7 @@
 import { Vue, Component, injectable } from 'src/lib/vue.barrel';
-import * as Template from './app.component.html?style=./app.component.scss';
+import template from 'src/time-tracker-app/app/app.component.vue';
 
-@Template
-@Component
+@Component(template)
 @injectable()
 export class AppComponent extends Vue {
 }

src/basic-app/goodby-app/goodby-app.component.scss

@@ -1,3 +1,4 @@
+<template>
 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
   <header class="mdl-layout__header">
     <div class="mdl-layout__header-row">
@@ -35,3 +36,9 @@
     </div>
   </main>
 </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
+

src/basic-app/goodby-app/goodby-app.component.ts

@@ -1,8 +1,7 @@
 import { Vue, Component, injectable } from 'src/lib/vue.barrel';
-import * as Template from './home.component.html?style=./home.component.scss';
+import template from 'src/time-tracker-app/home/home.component.vue';
 
-@Template
-@Component
+@Component(template)
 @injectable()
 export class HomeComponent extends Vue {
 }