Merge pull request #9 from jaredmcateer/vuex-class

README.md

@@ -58,6 +58,16 @@ The files to be converted must meet the criteria below:
  - [ ] `@ProvideReactive / @InjectReactive`
  - [x] `@Emit`
  - [x] `@Ref`
+- vuex-class
+ - [x] `@Action`
+ - [x] `@Getter`
+ - [x] `@Mutation`
+ - [x] `@State`
+ - `@<namespace>`
+ - [ ] `.Action`
+ - [ ] `.Getter`
+ - [ ] `.Mutation`
+ - [ ] `.State`
 - [x] replace `this` to `props`, `variable`, or `context`.
 - [x] sort by dependency.
 
@@ -113,24 +123,26 @@ const { file, result } = convertFile(
 
 ```typescript
 {
- // root path for calc file absolute path, if in CLI, --root value will replace. default:`process.cwd()`
- root?: string
- // show debug message. default: `false`
- debug?: boolean,
- // if true, use @vue/composition-api. default: `false`
- compatible?: boolean
- // first setup function parameter name. default: `props`
- setupPropsKey?: string
- // second setup function parameter name. default: `context`
- setupContextKey?: string
- // Use custom version typescript. default: Typescript 3.7.3
- typescript?: typeof ts
- // Use custom version vue-template-compiler, please match your project vue versions. default: vue-template-compiler 2.6.11
- vueTemplateCompiler?: typeof vueTemplateCompiler
- // Use custom prettier config file path. if file does not exist, use default uncouth prettier config. default: `.prettierrc`
- prettierConfig?: string
+ // root path for calc file absolute path, if in CLI, --root value will replace.
+ root?: string, // Default:`process.cwd()`
+ // show debug message.
+ debug?: boolean, // Default: `false`
+ // if true, use @vue/composition-api.
+ compatible?: boolean, // Default: `false`
+ // first setup function parameter name.
+ setupPropsKey?: string, // Default: `props`
+ // second setup function parameter name.
+ setupContextKey?: string, // Default: `context`
+ // Use custom version typescript.
+ typescript?: typeof ts, // Default: Typescript 3.7.3
+ // Use custom version vue-template-compiler, please match your project vue versions.
+ vueTemplateCompiler?: typeof vueTemplateCompiler, // Default: vue-template-compiler 2.6.11
+ // Use custom prettier config file path. if file does not exist, use default uncouth prettier config.
+ prettierConfig?: string // Default: `.prettierrc`
  // Use custom ASTConvertPlugins for ASTConvert and ASTTransform
- plugins?: ASTConvertPlugins
+ plugins?: ASTConvertPlugins,
+ // if using vuex-class the variable name to use for the store
+ vuexKey?: string, // Default: `store`
 }
 ```
 

src/convert.ts

@@ -4,7 +4,7 @@ import { runPlugins } from "./plugins";
 import { UncouthOptions } from "./options";
 import { log } from "./debug";
 
-const vueClassModules = ["vue-class-component", "vue-property-decorator"];
+const vueClassModules = ["vue-class-component", "vue-property-decorator", "vuex-class"];
 
 export function convertAST(
  sourceFile: ts.SourceFile,

src/helpers/TsHelper.ts

@@ -1,5 +1,6 @@
 import ts from "typescript";
 import { UncouthOptions } from "../options";
+import { ImportModule } from "../plugins/types";
 import { isString } from "../utils";
 
 export class TsHelper {
@@ -15,11 +16,28 @@ export class TsHelper {
  return this.module.factory;
  }
 
- namedImports(names: string[]): { named: string[]; external: string }[] {
+ get rocketToken(): ts.PunctuationToken<ts.SyntaxKind.EqualsGreaterThanToken> {
+ return this.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken);
+ }
+
+ getDecorator(node: ts.Node, decorator: string): ts.Decorator | undefined {
+ if (!node?.decorators) return;
+
+ return node.decorators.find(
+ (el) => (el.expression as ts.CallExpression).expression.getText() === decorator
+ );
+ }
+
+ getVueExternal(): "@vue/composition-api" | "vue" {
+ return this.compatible ? "@vue/composition-api" : "vue";
+ }
+
+ namedImports(names: string[], external?: string): ImportModule[] {
+ external = external || this.getVueExternal();
  return [
  {
  named: names,
- external: this.compatible ? "@vue/composition-api" : "vue",
+ external,
  },
  ];
  }

src/options.ts

@@ -12,6 +12,7 @@ export interface UncouthOptions {
  typescript: typeof ts;
  vueTemplateCompiler: typeof vueTemplateCompiler;
  prettierConfig: string;
+ vuexKey: string;
  plugins: ASTConvertPlugins;
 }
 
@@ -28,6 +29,7 @@ export function getDefaultUncouthOptions(tsModule: typeof ts = ts): UncouthOptio
  vueTemplateCompiler: vueTemplateCompiler,
  prettierConfig: ".prettierrc",
  plugins: getDefaultPlugins(tsModule),
+ vuexKey: "store",
  };
 }
 

src/plugins/index.ts

@@ -22,6 +22,10 @@ import { convertInject } from "./vue-property-decorator/Inject";
 import { convertProvide } from "./vue-property-decorator/Provide";
 import { convertTemplateRef } from "./vue-class-component/TemplateRef";
 import { TsHelper } from "../helpers/TsHelper";
+import { convertVuexAction } from "./vuex-class/Action";
+import { convertVuexGetter } from "./vuex-class/Getter";
+import { convertVuexState } from "./vuex-class/State";
+import { convertVuexMutation } from "./vuex-class/Mutation";
 
 export function getDefaultPlugins(tsModule: typeof ts): ASTConvertPlugins {
  return {
@@ -41,6 +45,10 @@ export function getDefaultPlugins(tsModule: typeof ts): ASTConvertPlugins {
  convertInject,
  convertData,
  convertTemplateRef,
+ convertVuexAction,
+ convertVuexGetter,
+ convertVuexState,
+ convertVuexMutation,
  ],
  [tsModule.SyntaxKind.GetAccessor]: [convertGetter],
  [tsModule.SyntaxKind.SetAccessor]: [convertSetter],
@@ -132,6 +140,8 @@ export function convertASTResultToSetupFn(
 ): ts.MethodDeclaration {
  const $t = new TsHelper(options);
 
+ const composables = getComposables(astResults, $t);
+
  const returnStatement = $t.addTodoComment(
  $t.factory.createReturnStatement(
  $t.factory.createObjectLiteralExpression([
@@ -149,6 +159,7 @@ export function convertASTResultToSetupFn(
  "setup",
  [options.setupPropsKey, options.setupContextKey],
  [
+ ...composables,
  ...(astResults
  .filter((el) => el.kind === ASTResultKind.COMPOSITION)
  .map((el) => el.nodes)
@@ -158,15 +169,74 @@ export function convertASTResultToSetupFn(
  );
 }
 
+interface Clause {
+ named: Set<string>;
+ default?: string;
+ params?: ts.Expression[];
+}
+
+function getComposables(astResults: ASTResult<ts.Node>[], $t: TsHelper): ts.VariableStatement[] {
+ const composableMap = new Map<string, Clause>();
+ astResults.forEach((result) => {
+ if (!result.composables) return;
+
+ result.composables.forEach((info) => {
+ const func = info.func;
+ const tmp: Clause = composableMap.get(func) ?? { named: new Set() };
+
+ if (!("default" in tmp) && "default" in info) {
+ tmp.default = info.default;
+ }
+
+ if ("params" in info) {
+ tmp.params = info.params;
+ }
+
+ if ("named" in info) {
+ info.named?.forEach((name) => tmp.named.add(name));
+ }
+
+ composableMap.set(func, tmp);
+ });
+ });
+
+ const composables = Array.from(composableMap)
+ .map(([func, clause]) => {
+ const funcExpr = $t.createCallExpression(func, undefined, clause.params);
+ const statements: ts.VariableStatement[] = [];
+ if (clause.default) {
+ statements.push($t.createConstStatement(clause.default, funcExpr));
+ } else {
+ const u = undefined;
+ const importElements = [...clause.named].map((name) =>
+ $t.factory.createBindingElement(u, u, $t.factory.createIdentifier(name))
+ );
+
+ if (importElements.length > 0) {
+ const vars = $t.factory.createObjectBindingPattern(importElements);
+ const boundElementsDeclaration = $t.factory.createVariableDeclaration(
+ vars,
+ u,
+ u,
+ funcExpr
+ );
+ const varDecList = $t.factory.createVariableDeclarationList([boundElementsDeclaration]);
+ statements.push($t.factory.createVariableStatement(u, varDecList));
+ }
+ }
+
+ return statements;
+ })
+ .flat()
+ .filter((composable): composable is ts.VariableStatement => !!composable);
+
+ return composables;
+}
+
 export function convertASTResultToImport(
  astResults: ASTResult<ts.Node>[],
  options: UncouthOptions
 ): ts.ImportDeclaration[] {
- interface Clause {
- named: Set<string>;
- default?: string;
- }
-
  const $t = new TsHelper(options);
 
  const importMap = new Map<string, Clause>();
@@ -177,10 +247,15 @@ export function convertASTResultToImport(
  if (!("default" in temp) && "default" in importInfo) {
  temp.default = importInfo.default;
  }
- temp.named.add("defineComponent");
+
+ if (key === "vue") {
+ temp.named.add("defineComponent");
+ }
+
  for (const named of importInfo.named || []) {
  temp.named.add(named);
  }
+
  importMap.set(key, temp);
  }
  }

src/plugins/types.ts

@@ -28,12 +28,24 @@ export type ImportModule =
  external: string;
  };
 
+export type ComposableStatement =
+ | {
+ default?: string;
+ func: string;
+ params?: ts.Expression[];
+ }
+ | {
+ named?: string[];
+ func: string;
+ params?: ts.Expression[];
+ };
 export interface ASTResultBase {
  imports: ImportModule[];
  kind: ASTResultKind;
  reference: ReferenceKind;
  attributes: string[];
  tag: string;
+ composables?: ComposableStatement[];
 }
 
 export interface ASTResultToObject<N = ts.PropertyAssignment> extends ASTResultBase {

src/plugins/vuex-class/Action.ts

@@ -0,0 +1,14 @@
+import { convertVuexMethodFactory } from "./convertMethodFactory";
+
+/**
+ * @example
+ * \@Action('myNamespace/someAction') doSomeAction: (text: string) => Promise<void>
+ * // converts to
+ * const doSomeAction = async (text: string): Promise<void> => {
+ * return await store.dispatch('myNamespace/someAction', text);
+ * }
+ * @param node
+ * @param options
+ * @returns
+ */
+export const convertVuexAction = convertVuexMethodFactory("Action", "dispatch");

src/plugins/vuex-class/Getter.ts

@@ -0,0 +1,11 @@
+import { convertVuexComputedFactory } from "./convertComputedFactory";
+
+/**
+ * @example
+ * \@Getter('myNamespace/someGetter') getSomething: boolean;
+ * // converts to
+ * const getSomething = computed<boolean>(() => {
+ * return store.getter('myNamespace/someGetter');
+ * })
+ */
+export const convertVuexGetter = convertVuexComputedFactory("Getter", "getters");

src/plugins/vuex-class/Mutation.ts

@@ -0,0 +1,14 @@
+import { convertVuexMethodFactory } from "./convertMethodFactory";
+
+/**
+ * @example
+ * \@Mutation('myNamespace/SOME_MUTATION') mutateSomething: (text: string) => void
+ * // converts to
+ * const mutateSomething = (text: string): void => {
+ * return store.commit('myNamespace/SOME_MUTATION', text);
+ * }
+ * @param node
+ * @param options
+ * @returns
+ */
+export const convertVuexMutation = convertVuexMethodFactory("Mutation", "commit");

src/plugins/vuex-class/State.ts

@@ -0,0 +1,11 @@
+import { convertVuexComputedFactory } from "./convertComputedFactory";
+
+/**
+ * @example
+ * \@State('myNamespace/stateA') sA: number;
+ * // converts to
+ * const sA = computed(() => {
+ * return store.state.stateA;
+ * });
+ */
+export const convertVuexState = convertVuexComputedFactory("State", "state");