Skip to content

Vue class based to vue2 with TS support #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add Inject
  • Loading branch information
matrunchyk committed Oct 24, 2021
commit 6bb69e6de34cd50df53652ca7464ff4e584c5494
39 changes: 30 additions & 9 deletions transformations/vue-class-component-v8.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
ImportDeclaration,
literal,
memberExpression,
Node,
ObjectExpression,
objectExpression,
ObjectMethod,
Expand Down Expand Up @@ -69,7 +68,7 @@ function removeImports(context: Context) {
'vuex-class',
'vue',
'vuex',
'vue-q',
'vue-q'
]

context
Expand Down Expand Up @@ -137,6 +136,7 @@ function classToOptions(context: Context) {
const mixins: string[] = []
const refs: VueClassProperty[] = []
const provides: VueClassProperty[] = []
const injects: VueClassProperty[] = []

const vuex = {
Action: new Map<string, VuexMappingItem>(),
Expand Down Expand Up @@ -207,6 +207,9 @@ function classToOptions(context: Context) {
} else if (accessorType === 'Provide') {
provides.push(prop)
return
} else if (accessorType === 'Inject') {
injects.push(prop)
return
}

// Vuex
Expand Down Expand Up @@ -246,7 +249,7 @@ function classToOptions(context: Context) {
let rawType: any

if (decoratorPropArgument?.type === 'Identifier') {
rawType = decoratorPropArgument.name;
rawType = decoratorPropArgument.name
} else if (decoratorPropArgument?.type === 'ArrayExpression') {
rawType = propDecorator.expression.arguments?.[0]
} else {
Expand All @@ -258,12 +261,12 @@ function classToOptions(context: Context) {
}
}

let type: any;
let type: any

if (rawType.type === 'ArrayExpression') {
type = rawType;
type = rawType
} else if (rawType.match(/^TS(.*)Keyword$/)) {
const keywordMatch = rawType.match(/^TS(.*)Keyword$/);
const keywordMatch = rawType.match(/^TS(.*)Keyword$/)

type = identifier(keywordMatch[1])
} else if (rawType === 'TSUnionType') {
Expand All @@ -287,7 +290,7 @@ function classToOptions(context: Context) {
} else if (rawType.match(/^TS/)) {
type = identifier('Object')
} else {
type = identifier(rawType);
type = identifier(rawType)
}

const typedProp = tsAsExpression(
Expand Down Expand Up @@ -390,6 +393,24 @@ function classToOptions(context: Context) {
)
}

// Inject
if (injects.length) {
newClassProperties.push(
property(
'init',
identifier('inject'),
objectExpression(
Array.from(injects)
.map(inject => property(
'init',
inject.key,
stringLiteral(inject.key.name)
))
)
)
)
}

// Props
newClassProperties.push(
property('init', identifier('name'), stringLiteral(prevClass.get(0).node.id.name)),
Expand Down Expand Up @@ -540,13 +561,13 @@ function classToOptions(context: Context) {
ref.decorators[0].expression.arguments?.[0]?.value
? identifier(ref.decorators[0].expression.arguments?.[0]?.value)
: ref.key
);
)

if (ref.typeAnnotation) {
statement = tsAsExpression(
statement,
tsTypeReference(
identifier('PropType'),
identifier('PropType')
)
)
}
Expand Down