Merge pull request #240 from vuejs/class-component

Basic support for class component

Author: lmiller1990

package.json

@@ -33,12 +33,14 @@
     "jsdom-global": "^3.0.2",
     "lint-staged": "^10.0.9",
     "prettier": "^2.0.2",
+    "reflect-metadata": "^0.1.13",
     "rollup": "^1.31.1",
     "rollup-plugin-typescript2": "^0.26.0",
     "ts-jest": "25.2.1",
     "tsd": "0.11.0",
     "typescript": "^3.7.5",
     "vue": "^3.0.2",
+    "vue-class-component": "^8.0.0-beta.4",
     "vue-jest": "^5.0.0-alpha.5",
     "vue-router": "^4.0.0-rc.1",
     "vuex": "^4.0.0-beta.4"

src/mount.ts

@@ -26,13 +26,19 @@ import {
 
 import { config } from './config'
 import { GlobalMountOptions } from './types'
-import { mergeGlobalProperties } from './utils'
+import {
+  isClassComponent,
+  isFunctionalComponent,
+  isObjectComponent,
+  mergeGlobalProperties
+} from './utils'
 import { processSlot } from './utils/compileSlots'
 import { createWrapper, VueWrapper } from './vueWrapper'
 import { attachEmitListener } from './emitMixin'
 import { createDataMixin } from './dataMixin'
 import { MOUNT_COMPONENT_REF, MOUNT_PARENT_NAME } from './constants'
 import { stubComponents } from './stubs'
+import { VueConstructor } from 'vue-class-component'
 
 // NOTE this should come from `vue`
 type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps
@@ -67,6 +73,12 @@ export type ObjectEmitsOptions = Record<
 >
 export type EmitsOptions = ObjectEmitsOptions | string[]
 
+// Class component
+export function mount(
+  originalComponent: VueConstructor,
+  options?: MountingOptions<any>
+): VueWrapper<ComponentPublicInstance<any>>
+
 // Functional component with emits
 export function mount<Props, E extends EmitsOptions = {}>(
   originalComponent: FunctionalComponent<Props, E>,
@@ -228,7 +240,7 @@ export function mount(
 
   const functionalComponentEmits: Record<string, unknown[]> = {}
 
-  if (typeof originalComponent === 'function') {
+  if (isFunctionalComponent(originalComponent)) {
     // we need to wrap it like this so we can capture emitted events.
     // we capture events using a mixin that mutates `emit` in `beforeCreate`,
     // but functional components do not support mixins, so we need to wrap it
@@ -240,8 +252,10 @@ export function mount(
         )
       }
     })
-  } else {
+  } else if (isObjectComponent(originalComponent)) {
     component = { ...originalComponent }
+  } else {
+    component = originalComponent
   }
 
   const el = document.createElement('div')

src/utils.ts

@@ -64,3 +64,15 @@ export const mergeDeep = (
 
   return target
 }
+
+export function isClassComponent(component: any) {
+  return '__vccBase' in component
+}
+
+export function isFunctionalComponent(component: any) {
+  return typeof component === 'function' && !isClassComponent(component)
+}
+
+export function isObjectComponent(component: any) {
+  return typeof component !== 'function' && !isClassComponent(component)
+}

tests/features/classComponent.spec.ts

@@ -0,0 +1,24 @@
+import 'reflect-metadata'
+import { h } from 'vue'
+import { Options, Vue } from 'vue-class-component'
+import { mount } from '../../src'
+
+test('data: $props should be available', () => {
+  @Options({
+    props: ['foo']
+  })
+  class MyComp extends Vue {
+    message = 'answer is ' + (this.$props as any).foo
+    render() {
+      return h('div', this.message)
+    }
+  }
+
+  const wrapper = mount(MyComp, {
+    props: {
+      foo: 42
+    }
+  })
+
+  expect(wrapper.html()).toBe('<div>answer is 42</div>')
+})

tsconfig.json

@@ -6,6 +6,7 @@
     "lib": ["DOM", "ES2015", "ES2017"],
     "moduleResolution": "node",
     "esModuleInterop": true,
+    "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "paths": {

yarn.lock

@@ -5083,6 +5083,11 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+reflect-metadata@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
+  integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -6154,6 +6159,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-jest@^5.0.0-alpha.5:
   version "5.0.0-alpha.5"
   resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.5.tgz#a24b7569ba2078836a316033f283e151afc4906b"