Merge pull request #221 from mate-academy/add-vuejs-scripts

Add vuejs scripts

mate-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mate-academy/scripts",
-  "version": "1.8.9",
+  "version": "1.9.0",
   "description": "Scripts to init, run, test, deploy Mate academy homework projects",
   "main": "bin/mateScripts.js",
   "scripts": {

mate-scripts/src/commands/Build.command.ts

@@ -13,10 +13,9 @@ export interface BuildOptions {
 export class BuildCommand extends Command {
   private readonly parcel = new ParcelService(this.rootDir);
 
-  private readonly reactScripts =
-    this.config.nodejsMajorVersion === NodeJsVersions.v20
-      ? new ViteService(this.rootDir)
-      : new ReactScriptsService(this.rootDir);
+  private readonly reactScripts = new ReactScriptsService(this.rootDir);
+
+  private readonly vite = new ViteService(this.rootDir);
 
   protected common(): void {
     // do nothing
@@ -32,19 +31,39 @@ export class BuildCommand extends Command {
     this.layout(options);
   };
 
-  protected react = (options: BuildOptions) => {
-    if (options.shouldShowInternalLogs) {
+  private buildReactScripts(showInternalLogs = false) {
+    if (showInternalLogs) {
       console.log('START react-scripts build');
     }
 
-    this.reactScripts.build(
-      DESTINATION_DIR,
-      options.shouldShowInternalLogs,
-      this.config.homepage,
-    );
+    this.reactScripts.build(DESTINATION_DIR, showInternalLogs);
+  }
+
+  private buildVite(showInternalLogs = false) {
+    if (showInternalLogs) {
+      console.log('START vite build');
+    }
+
+    this.vite.build(DESTINATION_DIR, showInternalLogs, this.config.homepage);
+  }
+
+  protected react = (options: BuildOptions) => {
+    if (this.config.nodejsMajorVersion === NodeJsVersions.v20) {
+      this.buildVite(options.shouldShowInternalLogs);
+    } else {
+      this.buildReactScripts(options.shouldShowInternalLogs);
+    }
   };
 
   protected reactTypescript = (options: BuildOptions) => {
     this.react(options);
   };
+
+  protected vue = (options: BuildOptions) => {
+    this.buildVite(options.shouldShowInternalLogs);
+  }
+
+  protected vueTypescript = (options: BuildOptions) => {
+    this.vue(options);
+  };
 }

mate-scripts/src/commands/Command.ts

@@ -43,6 +43,14 @@ export abstract class Command {
     this.logNoImplementationWarning
   );
 
+  protected [ProjectTypes.Vue]: (options?: any) => void = (
+    this.logNoImplementationWarning
+  );
+
+  protected [ProjectTypes.VueTypescript]: (options?: any) => void = (
+    this.logNoImplementationWarning
+  );
+
   protected [ProjectTypes.NodeJs]: (options?: any) => void = (
     this.logNoImplementationWarning
   );
@@ -80,7 +88,7 @@ export abstract class Command {
 {
   ...
   "mateAcademy": {
-    "projectType": "layout" | "javascript" | "react" | "reactTypescript" | "typescript" | "layoutDOM" | "nodeJs"
+    "projectType": "layout" | "javascript" | "react" | "reactTypescript" | "vue" | "vueTypescript" | "typescript" | "layoutDOM" | "nodeJs"
   }
 }
 `,

mate-scripts/src/commands/Deploy.command.ts

@@ -89,6 +89,14 @@ export class DeployCommand extends Command {
     this.react();
   }
 
+  protected vue = () => {
+    this.ghPages.deploy(DESTINATION_DIR);
+  };
+
+  protected vueTypescript = () => {
+    this.vue();
+  };
+
   private async setShellRunner() {
     try {
       await execBashCodeAsync('sh --version', { shouldBindStdout: false });

mate-scripts/src/commands/Init.command.ts

@@ -68,6 +68,20 @@ export class InitCommand extends Command {
     this.initGitHooks(ProjectTypes.ReactTypescript);
   };
 
+  protected vue = () => {
+    this.copyGitIgnore(ProjectTypes.Vue);
+    // this.copyProjectTypeSpecificConfigs(ProjectTypes.Vue);
+    this.copyProjectTypeSpecificTemplates(ProjectTypes.Vue);
+    this.initGitHooks(ProjectTypes.Vue);
+  };
+
+  protected vueTypescript = () => {
+    this.copyGitIgnore(ProjectTypes.VueTypescript);
+    // this.copyProjectTypeSpecificConfigs(ProjectTypes.VueTypescript);
+    this.copyProjectTypeSpecificTemplates(ProjectTypes.VueTypescript);
+    this.initGitHooks(ProjectTypes.VueTypescript);
+  };
+
   private copyCommonConfigs() {
     const commonConfigsDir = path.join(InitCommand.configsDir, 'common');
 

mate-scripts/src/commands/Lint.command.ts

@@ -80,6 +80,18 @@ export class LintCommand extends Command {
     this.react(options);
   };
 
+  protected vue = (options: LintOptions) => {
+    const { styles, files } = options;
+
+    if (styles) {
+      this.lintStyles(files);
+    }
+  };
+
+  protected vueTypescript = (options: LintOptions) => {
+    this.vue(options);
+  };
+
   private mateLintHtml(files: LintOptions['files']) {
     const filesToLint = files
       ? files.join(' ')
@@ -118,7 +130,7 @@ export class LintCommand extends Command {
       : './src';
 
     execBashCodeSilent(
-      `${this.binDir}eslint --ext .ts,.tsx,.js,.jsx ${filesToLint} --fix`,
+      `${this.binDir}eslint --ext .ts,.tsx,.js,.jsx,.vue ${filesToLint} --fix`,
     );
   }
 }

mate-scripts/src/commands/Migrate.command.ts

@@ -69,6 +69,16 @@ export class MigrateCommand extends Command {
         projectType: ProjectTypes.ReactTypescript,
       },
     },
+    [ProjectTypes.Vue]: {
+      mateAcademy: {
+        projectType: ProjectTypes.Vue,
+      },
+    },
+    [ProjectTypes.VueTypescript]: {
+      mateAcademy: {
+        projectType: ProjectTypes.VueTypescript,
+      },
+    },
     [ProjectTypes.Typescript]: {
       mateAcademy: {
         projectType: ProjectTypes.Typescript,
@@ -217,6 +227,10 @@ export class MigrateCommand extends Command {
 
   protected reactTypescript = emptyFn;
 
+  protected vue = emptyFn;
+
+  protected vueTypescript = emptyFn;
+
   private static async safeRun(promise: Promise<any>) {
     try {
       await promise;

mate-scripts/src/commands/Start.command.ts

@@ -15,10 +15,9 @@ export class StartCommand extends Command {
 
   private readonly jest = new JestService();
 
-  private readonly reactScripts =
-    this.config.nodejsMajorVersion === NodeJsVersions.v20
-      ? new ViteService(this.rootDir)
-      : new ReactScriptsService(this.rootDir);
+  private readonly reactScripts = new ReactScriptsService(this.rootDir);
+
+  private readonly vite = new ViteService(this.rootDir);
 
   protected common(): void {
     // do nothing
@@ -37,21 +36,39 @@ export class StartCommand extends Command {
     this.layout(options);
   };
 
-  react = <
-    Async extends boolean,
-    Result = ExecResult<Async>
-  >(options: StartOptions, async?: Async): Result => (
-    this.reactScripts.start({
-      showLogs: options.shouldShowInternalLogs,
-      open: options.open,
+  react = <Async extends boolean, Result = ExecResult<Async>>(
+    options: StartOptions,
+    async?: Async,
+  ): Result => {
+    const startOptions = {
       port: options.port,
-    }, async)
-  );
+      open: options.open,
+      showLogs: options.shouldShowInternalLogs,
+    };
+
+    return (this.config.nodejsMajorVersion === NodeJsVersions.v20)
+      ? this.vite.start(startOptions, async)
+      : this.reactScripts.start(startOptions, async);
+  }
 
-  reactTypescript = <
-    Async extends boolean,
-    Result = ExecResult<Async>
-  >(options: StartOptions, async?: Async): Result => this.react(options, async);
+  reactTypescript = <Async extends boolean, Result = ExecResult<Async>>(
+    options: StartOptions,
+    async?: Async,
+  ): Result => this.react(options, async);
+
+  vue = <Async extends boolean, Result = ExecResult<Async>>(
+    options: StartOptions,
+    async?: Async,
+  ): Result => this.vite.start({
+    port: options.port,
+    open: options.open,
+    showLogs: options.shouldShowInternalLogs,
+  }, async);
+
+  vueTypescript = <Async extends boolean, Result = ExecResult<Async>>(
+    options: StartOptions,
+    async?: Async,
+  ): Result => this.vue(options, async);
 
   protected javascript = () => {
     this.jest.watch();

mate-scripts/src/commands/Test.command.ts

@@ -1,3 +1,4 @@
+import { ChildProcess } from 'child_process';
 import getPort from 'get-port';
 import { kill } from '../tools';
 import { BackstopService, JestService } from '../services';
@@ -187,7 +188,26 @@ export class TestCommand extends Command {
     });
   };
 
-  protected react = async (options: TestOptions) => {
+  // eslint-disable-next-line arrow-body-style
+  private startReact = (port: number, shouldShowInternalLogs = false) => {
+    return this.startCommand.react(
+      { shouldShowInternalLogs, open: false, port },
+      true,
+    );
+  };
+
+  // eslint-disable-next-line arrow-body-style
+  private startVue = (port: number, shouldShowInternalLogs = false) => {
+    return this.startCommand.vue(
+      { shouldShowInternalLogs, open: false, port },
+      true,
+    );
+  };
+
+  private test = async (
+    options: TestOptions,
+    start: (port: number, shouldShowInternalLogs?: boolean) => ChildProcess,
+  ) => {
     this.showLogs = options.showLogs;
 
     const {
@@ -197,16 +217,7 @@ export class TestCommand extends Command {
 
     const startServer: StartServer = async () => {
       const freePort = await TestCommand.getPort();
-
-      const childProcess = this.startCommand.react(
-        {
-          shouldShowInternalLogs: options.showLogs,
-          open: false,
-          port: freePort,
-        },
-        true,
-      );
-
+      const childProcess = start(freePort, options.showLogs);
       let testsStarted = false;
 
       const serverStartedPromise = new Promise<void>(
@@ -307,10 +318,22 @@ export class TestCommand extends Command {
     });
   }
 
+  protected react = async (options: TestOptions) => {
+    await this.test(options, this.startReact);
+  };
+
   protected reactTypescript = async (options: TestOptions) => {
     await this.react(options);
   };
 
+  protected vue = async (options: TestOptions) => {
+    await this.test(options, this.startVue);
+  };
+
+  protected vueTypescript = async (options: TestOptions) => {
+    await this.vue(options);
+  };
+
   protected javascript = () => {
     this.jest.once();
   };

mate-scripts/src/commands/Update.command.ts

@@ -39,4 +39,10 @@ export class UpdateCommand extends Command {
   protected react = emptyFn;
 
   protected reactTypescript = emptyFn;
+
+  protected typescript = emptyFn;
+
+  protected vue = emptyFn;
+
+  protected vueTypescript = emptyFn;
 }

mate-scripts/src/localScripts/getRepos.ts

@@ -22,7 +22,9 @@ export async function getRepos() {
   const layout = [];
   const layoutDOM = [];
   const javascript = [];
+  const typescript = [];
   const react = [];
+  const vue = [];
 
   for (const name of repos) {
     if (name.startsWith('layout_')) {
@@ -31,8 +33,12 @@ export async function getRepos() {
       layoutDOM.push(name);
     } else if (name.startsWith('js_')) {
       javascript.push(name);
+    } else if (name.startsWith('ts_')) {
+      typescript.push(name);
     } else if (name.startsWith('react_') || name.startsWith('redux_')) {
       react.push(name);
+    } else if (name.startsWith('vue_')) {
+      vue.push(name);
     } else {
       none.push(name);
     }
@@ -44,6 +50,7 @@ export async function getRepos() {
     layoutDOM,
     javascript,
     react,
+    vue,
   }, null, 2));
 }
 

mate-scripts/src/tools/fileSystem.ts

@@ -11,6 +11,7 @@ export function getRootDir() {
   let folderContent = fs.readdirSync(rootDir);
 
   try {
+    // eslint-disable-next-line no-constant-condition
     while (true) {
       if (isRoot(folderContent) && hasCorrectDependency(rootDir)) {
         break;

mate-scripts/src/typedefs.ts

@@ -7,6 +7,8 @@ export enum ProjectTypes {
   React = 'react',
   ReactTypescript = 'reactTypescript',
   NodeJs = 'nodeJs',
+  Vue = 'vue',
+  VueTypescript = 'vueTypescript',
 }
 
 export enum NodeJsVersions {