Merge pull request #299 from Stijn98s/class-component-support

Add support for class components

Author: lmiller1990

e2e/__projects__/basic/components/ClassComponent.vue

@@ -0,0 +1,13 @@
+
+<template>
+  <div>{{ msg }}</div>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+
+@Options({
+  props: ['msg'] 
+})
+export default class ClassComponent extends Vue {}
+</script>

e2e/__projects__/basic/package.json

@@ -17,7 +17,8 @@
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "jest": "^24.0.0"
+    "jest": "^24.0.0",
+    "vue-class-component": "^8.0.0-beta.4"
   },
   "jest": {
     "moduleFileExtensions": [

e2e/__projects__/basic/test.js

@@ -6,6 +6,7 @@ import BasicSrc from './components/BasicSrc.vue'
 import Pug from './components/Pug.vue'
 import Coffee from './components/Coffee.vue'
 import Basic from './components/Basic.vue'
+import ClassComponent from './components/ClassComponent.vue'
 import TypeScript from './components/TypeScript.vue'
 import jestVue from '../../../'
 import RenderFunction from './components/RenderFunction.vue'
@@ -116,6 +117,11 @@ test('supports relative paths when extending templates from .pug files', () => {
   expect(document.querySelector('.pug-relative-base')).toBeTruthy()
 })
 
+test('supports class component .vue files', () => {
+  mount(ClassComponent, { msg: 'Hello' })
+  expect(document.querySelector('div').textContent).toBe('Hello')
+})
+
 // TODO: How do functional components work in Vue 3?
 xtest('processes functional components', () => {
   // const clickSpy = jest.fn()

e2e/__projects__/basic/yarn.lock

@@ -4157,6 +4157,11 @@ [email protected]:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vue-class-component@^8.0.0-beta.4:
+  version "8.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-beta.4.tgz#bff95cdd44eb450a4a4e54b69da22099613d8071"
+  integrity sha512-+QXBhVH/Mz8dEC+IU7e8XXM54Tn0Aj9/saybeuK8XmhQiJlcijCB8kB7CYpBEMpHWaA+DoLr6LvHMbclYRCwZQ==
+
 vue@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0.tgz#cfb5df5c34efce319b113a1667d12b74dcfd9c90"

lib/generate-code.js

@@ -28,10 +28,18 @@ module.exports = function generateCode(
 
   var tempOutput = node.toString()
 
+  if (
+    tempOutput.match(/\}\(.*.?Vue\);/) &&
+    tempOutput.includes('vue-class-component')
+  ) {
+    node.add(';exports.default = {...exports.default.__vccBase};')
+  }
+
   if (tempOutput.includes('exports.render = render;')) {
     node.add(';exports.default = {...exports.default, render};')
   } else {
     node.add(';exports.default = {...exports.default};')
   }
+
   return node.toStringWithSourceMap({ file: filename })
 }

yarn.lock

@@ -8589,6 +8589,11 @@ yargs@~3.10.0:
     decamelize "^1.0.0"
     window-size "0.1.0"
 
+yarn@^1.22.10:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.10.tgz#c99daa06257c80f8fa2c3f1490724e394c26b18c"
+  integrity sha512-IanQGI9RRPAN87VGTF7zs2uxkSyQSrSPsju0COgbsKQOOXr5LtcVPeyXWgwVa0ywG3d8dg6kSYKGBuYK021qeA==
+
 yup@^0.27.0:
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/yup/-/yup-0.27.0.tgz#f8cb198c8e7dd2124beddc2457571329096b06e7"