feat: transform Options as Component with vue-class-component (#1)

Author: underfin

README.md

@@ -137,7 +137,7 @@ Legend of annotations:
   - 🔴 [RFC21: Scoped slot API for `router-link`](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0021-router-link-scoped-slot.md)
   - 🔴 [RFC28: Change active and exact-active behavior for `router-link`](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md)
 - 🔴 [`vue-class-component` 7.x to 8](https://github.com/vuejs/vue-class-component/issues/406)
-  - `import { Component } from 'vue-class-component'` -> `import { Options as Component } from 'vue-class-component'`
+  - 🟢 `import { Component } from 'vue-class-component'` -> `import { Options as Component } from 'vue-class-component'`
   - `import Vue from 'vue'` -> `import { Vue } from 'vue-class-component'` (Need to avoid name collision if there's any reference to `Vue` besides `extends Vue`)
   - `Component.registerHooks` -> `Vue.registerHooks`
 

transformations/__tests__/vue-class-component-v8-test.ts

@@ -0,0 +1,18 @@
+import { defineInlineTest } from 'jscodeshift/src/testUtils'
+const transform = require('../vue-class-component-v8')
+
+defineInlineTest(
+  transform,
+  {},
+  `import { Component } from 'vue-class-component'`,
+  `import { Options as Component } from 'vue-class-component'`,
+  'correctly transform import Component form vue-class-component'
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `import { Component, Props } from 'vue-class-component'`,
+  `import { Options as Component, Props } from 'vue-class-component'`,
+  'correctly transform import Component form vue-class-component w/ multiple import'
+)

transformations/index.ts

@@ -8,6 +8,7 @@ type JSTransformationModule = {
 const transformationMap: {
   [name: string]: JSTransformationModule
 } = {
+  'vue-class-component-v8': require('./vue-class-component-v8'),
   'new-global-api': require('./new-global-api'),
   'vue-router-v4': require('./vue-router-v4'),
   'vuex-v4': require('./vuex-v4'),

transformations/vue-class-component-v8.ts

@@ -0,0 +1,27 @@
+import wrap from '../src/wrap-ast-transformation'
+import type { ASTTransformation } from '../src/wrap-ast-transformation'
+
+// import { Component } from 'vue-class-component' ->
+// import { Options as Component } from 'vue-class-component'
+export const transformAST: ASTTransformation = (context) => {
+  const { j, root } = context
+
+  const vueClassComponentImportDecls = root.find(j.ImportDeclaration, {
+    source: {
+      value: 'vue-class-component'
+    }
+  })
+
+  const ComponentImportSpec =  vueClassComponentImportDecls.find(j.ImportSpecifier, {
+    imported: {
+      name: 'Component'
+    }
+  })
+
+  ComponentImportSpec.replaceWith(({ node }) => {
+    return j.importSpecifier(j.identifier('Options'), j.identifier('Component'))
+  })
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'