From 1a0ea85925218e555c22c70f9d63074309715c7b Mon Sep 17 00:00:00 2001
From: Evert van der Weit <evert@mett.nl>
Date: Tue, 4 May 2021 09:12:10 +0200
Subject: [PATCH] fix: support for class component mixins

Fix for using class component with mixins and also for importing
Vue from vue-property-decorator instead of vue-class-component.
---
 .../components/ClassComponentProperty.vue     | 20 ++++++++++++++++++
 .../components/ClassComponentWithMixin.vue    | 12 +++++++++++
 .../basic/components/ClassMixin.ts            |  5 +++++
 e2e/__projects__/basic/package.json           |  7 +++++--
 e2e/__projects__/basic/test.js                | 21 +++++++++++++++++++
 lib/generate-code.js                          |  6 ++++--
 6 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 e2e/__projects__/basic/components/ClassComponentProperty.vue
 create mode 100644 e2e/__projects__/basic/components/ClassComponentWithMixin.vue
 create mode 100644 e2e/__projects__/basic/components/ClassMixin.ts

diff --git a/e2e/__projects__/basic/components/ClassComponentProperty.vue b/e2e/__projects__/basic/components/ClassComponentProperty.vue
new file mode 100644
index 00000000..413c9eba
--- /dev/null
+++ b/e2e/__projects__/basic/components/ClassComponentProperty.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="hello">
+    <h1 data-computed>{{ computedMsg }}</h1>
+    <h2 data-props>{{ msg }}</h2>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Prop } from 'vue-property-decorator'
+
+export default class ClassComponent extends Vue {
+  dataText: string = 'Hello'
+
+  @Prop() msg!: string
+
+  get computedMsg(): string {
+    return `Message: ${this.dataText}`
+  }
+}
+</script>
diff --git a/e2e/__projects__/basic/components/ClassComponentWithMixin.vue b/e2e/__projects__/basic/components/ClassComponentWithMixin.vue
new file mode 100644
index 00000000..807ecb61
--- /dev/null
+++ b/e2e/__projects__/basic/components/ClassComponentWithMixin.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="hello">
+    <h1 data-mixin>{{ message }}</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { mixins } from 'vue-class-component'
+import ClassMixin from './ClassMixin'
+
+export default class ClassComponent extends mixins(ClassMixin) {}
+</script>
diff --git a/e2e/__projects__/basic/components/ClassMixin.ts b/e2e/__projects__/basic/components/ClassMixin.ts
new file mode 100644
index 00000000..560fc353
--- /dev/null
+++ b/e2e/__projects__/basic/components/ClassMixin.ts
@@ -0,0 +1,5 @@
+import { Vue } from 'vue-class-component'
+
+export default class ClassMixin extends Vue {
+  message = 'Hello world!'
+}
diff --git a/e2e/__projects__/basic/package.json b/e2e/__projects__/basic/package.json
index 41c587e3..659e4069 100644
--- a/e2e/__projects__/basic/package.json
+++ b/e2e/__projects__/basic/package.json
@@ -20,15 +20,18 @@
     "jest": "^26.0.0",
     "ts-jest": "^26.4.4",
     "typescript": "^4.1.2",
-    "vue-class-component": "^8.0.0-beta.4"
+    "vue-class-component": "^8.0.0-beta.4",
+    "vue-property-decorator": "^10.0.0-rc.3"
   },
   "jest": {
     "moduleFileExtensions": [
       "js",
       "json",
-      "vue"
+      "vue",
+      "ts"
     ],
     "transform": {
+      "^.+\\.ts$": "ts-jest",
       "^.+\\.js$": "babel-jest",
       "^.+\\.vue$": "../../../lib/index.js"
     },
diff --git a/e2e/__projects__/basic/test.js b/e2e/__projects__/basic/test.js
index a1a6e89b..15f8acf4 100644
--- a/e2e/__projects__/basic/test.js
+++ b/e2e/__projects__/basic/test.js
@@ -8,6 +8,8 @@ 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 ClassComponentWithMixin from './components/ClassComponentWithMixin.vue'
+import ClassComponentProperty from './components/ClassComponentProperty.vue'
 import TypeScript from './components/TypeScript.vue'
 import jestVue from '../../../'
 import RenderFunction from './components/RenderFunction.vue'
@@ -141,6 +143,25 @@ test('supports class component .vue files', () => {
   })
 })
 
+test('supports class component .vue files with mixins', () => {
+  expect.assertions(1)
+  mount(ClassComponentWithMixin)
+  expect(document.querySelector('[data-mixin]').textContent).toBe(
+    'Hello world!'
+  )
+})
+
+test('supports class component .vue files using vue-property-decorator', () => {
+  expect.assertions(2)
+  mount(ClassComponentProperty, { msg: 'Props Message' })
+  expect(document.querySelector('[data-computed]').textContent).toBe(
+    'Message: Hello'
+  )
+  expect(document.querySelector('[data-props]').textContent).toBe(
+    'Props Message'
+  )
+})
+
 // TODO: How do functional components work in Vue 3?
 xtest('processes functional components', () => {
   // const clickSpy = jest.fn()
diff --git a/lib/generate-code.js b/lib/generate-code.js
index 45235b17..8ec4443a 100644
--- a/lib/generate-code.js
+++ b/lib/generate-code.js
@@ -29,8 +29,10 @@ module.exports = function generateCode(
   var tempOutput = node.toString()
 
   if (
-    tempOutput.match(/\}\(.*.?Vue\);/) &&
-    tempOutput.includes('vue-class-component')
+    // vue-property-decorator also exports Vue, which can be used to create a class component.
+    // In that case vue-class-component is not present in the tempOutput.
+    tempOutput.includes('vue-class-component') ||
+    tempOutput.includes('vue-property-decorator')
   ) {
     node.add(`
       ;exports.default = {