feat(): support vue projects (#4515)

* feat(): support vue projects

* chore(): update repo

* Add theme support for Vue apps from wizard and default capacitor on for all apps

* fix(vue): adjust cap integration

Co-authored-by: Max Lynch <max@ionic.io>

Author: mhartington

packages/@ionic/cli/src/commands/start.ts

@@ -539,9 +539,11 @@ Use the ${input('--type')} option to start projects using older versions of Ioni
     this.env.shell.alterPath = p => prependNodeModulesBinToPath(projectDir, p);
 
     if (!this.schema.cloned) {
-      if (this.schema.type === 'react') {
-        options['capacitor'] = true;
-      }
+      // Default to capacitor always
+      if (this.schema.type === 'react' || this.schema.type === 'vue') {
+         options['capacitor'] = true;
+       }
+
 
       if (options['cordova']) {
         const { confirmCordovaUsage } = await import('../lib/integrations/cordova/utils');

packages/@ionic/cli/src/definitions.ts

@@ -644,7 +644,6 @@ export interface ReactBuildOptions extends BuildOptions<'react'> {
 export interface VueBuildOptions extends BuildOptions<'vue'> {
   configuration?: string;
   sourcemaps?: boolean;
-  cordovaAssets?: boolean;
 }
 
 export interface IonicCapacitorOptions {
@@ -723,7 +722,8 @@ export interface ReactServeOptions extends ServeOptions {
 }
 
 export interface VueServeOptions extends ServeOptions {
-  ssl?: boolean;
+  https: boolean;
+  mode: string;
   configuration?: string;
   sourcemaps?: boolean;
 }

packages/@ionic/cli/src/lib/project/vue/build.ts

@@ -1,11 +1,13 @@
-import * as chalk from 'chalk';
-
 import { CommandLineInputs, CommandLineOptions, CommandMetadata, VueBuildOptions } from '../../../definitions';
-import { BuildRunner, BuildRunnerDeps } from '../../build';
-import { RunnerException } from '../../errors';
+import { BUILD_SCRIPT, BuildCLI, BuildRunner, BuildRunnerDeps } from '../../build';
+
+import { VueProject } from './';
 
+export interface VueBuildRunnerDeps extends BuildRunnerDeps {
+  readonly project: VueProject;
+}
 export class VueBuildRunner extends BuildRunner<VueBuildOptions> {
-  constructor(protected readonly e: BuildRunnerDeps) {
+  constructor(protected readonly e: VueBuildRunnerDeps) {
     super();
   }
 
@@ -23,15 +25,31 @@ export class VueBuildRunner extends BuildRunner<VueBuildOptions> {
   }
 
   async buildProject(options: VueBuildOptions): Promise<void> {
-    const cli = this.getPkgManagerBuildCLI();
+    const vueScripts = new VueBuildCLI(this.e);
+    await vueScripts.build(options);
+  }
+}
 
-    if (!await cli.resolveScript()) {
-      throw new RunnerException(
-        `Cannot perform build.\n` +
-        `Since you're using the ${chalk.bold('Vue')} project type, you must provide the ${chalk.green(cli.script)} npm script so the Ionic CLI can build your project.`
-      );
+export class VueBuildCLI extends BuildCLI<VueBuildOptions> {
+  readonly name = 'Vue CLI Service';
+  readonly pkg = '@vue/cli-service';
+  readonly program = 'vue-cli-service';
+  readonly prefix = 'vue-cli-service';
+  readonly script = BUILD_SCRIPT;
+
+  protected async buildArgs(options: VueBuildOptions): Promise<string[]> {
+    const { pkgManagerArgs } = await import('../../utils/npm');
+
+    if (this.resolvedProgram === this.program) {
+      return ['build'];
+    } else {
+      const [ , ...pkgArgs ] = await pkgManagerArgs(this.e.config.get('npmClient'), { command: 'run', script: this.script });
+      return pkgArgs;
     }
+  }
 
-    await cli.build(options);
+  protected async buildEnvVars(options: VueBuildOptions): Promise<NodeJS.ProcessEnv> {
+    const env: NodeJS.ProcessEnv = {};
+    return { ...await super.buildEnvVars(options), ...env };
   }
 }

packages/@ionic/cli/src/lib/project/vue/index.ts

@@ -1,6 +1,7 @@
 import * as chalk from 'chalk';
 import * as Debug from 'debug';
 import * as lodash from 'lodash';
+import * as path from 'path';
 
 import { Project } from '../';
 import { InfoItem } from '../../../definitions';
@@ -13,7 +14,7 @@ export class VueProject extends Project {
 
   async getInfo(): Promise<InfoItem[]> {
     const [
-      [ ionicVuePkg, ionicVuePkgPath ],
+      [ionicVuePkg, ionicVuePkgPath],
     ] = await Promise.all([
       this.getPackageJson('@ionic/vue'),
     ]);
@@ -71,4 +72,9 @@ export class VueProject extends Project {
       `Since you're using the ${chalk.bold('Vue')} project type, this command won't work. The Ionic CLI doesn't know how to generate framework components for Vue projects.`
     );
   }
+
+  setPrimaryTheme(themeColor: string): Promise<void> {
+    const themePath = path.join(this.directory, 'src', 'theme', 'variables.css');
+    return this.writeThemeColor(themePath, themeColor);
+  }
 }

packages/@ionic/cli/src/lib/project/vue/serve.ts

@@ -1,9 +1,9 @@
+import { stripAnsi } from '@ionic/cli-framework-output';
 import { findClosestOpenPort } from '@ionic/utils-network';
-import * as chalk from 'chalk';
 
 import { CommandMetadata, ServeDetails, VueServeOptions } from '../../../definitions';
-import { RunnerException } from '../../errors';
-import { BIND_ALL_ADDRESS, LOCAL_ADDRESSES, ServeRunner, ServeRunnerDeps } from '../../serve';
+import { strong } from '../../color';
+import { BIND_ALL_ADDRESS, DEFAULT_ADDRESS, LOCAL_ADDRESSES, SERVE_SCRIPT, ServeCLI, ServeRunner, ServeRunnerDeps } from '../../serve';
 
 export class VueServeRunner extends ServeRunner<VueServeOptions> {
   constructor(protected readonly e: ServeRunnerDeps) {
@@ -14,34 +14,112 @@ export class VueServeRunner extends ServeRunner<VueServeOptions> {
     return {};
   }
 
-  modifyOpenUrl(url: string, options: VueServeOptions): string {
+  modifyOpenUrl(url: string, _options: VueServeOptions): string {
     return url;
   }
 
   async serveProject(options: VueServeOptions): Promise<ServeDetails> {
-    const cli = this.getPkgManagerServeCLI();
-
-    if (!await cli.resolveScript()) {
-      throw new RunnerException(
-        `Cannot perform serve.\n` +
-        `Since you're using the ${chalk.bold('Vue')} project type, you must provide the ${chalk.green(cli.script)} npm script so the Ionic CLI can serve your project.`
-      );
-    }
-
-    const [ externalIP, availableInterfaces ] = await this.selectExternalIP(options);
+    const [externalIP, availableInterfaces] = await this.selectExternalIP(options);
 
     const port = options.port = await findClosestOpenPort(options.port);
 
-    await cli.serve(options);
+    const vueScripts = new VueServeCLI(this.e);
+    await vueScripts.serve(options);
 
     return {
-      custom: false,
-      protocol: 'http',
+      custom: vueScripts.resolvedProgram !== vueScripts.program,
+      protocol: options.https ? 'https' : 'http',
       localAddress: 'localhost',
       externalAddress: externalIP,
       externalNetworkInterfaces: availableInterfaces,
       port,
       externallyAccessible: ![BIND_ALL_ADDRESS, ...LOCAL_ADDRESSES].includes(externalIP),
     };
   }
+
+}
+
+export class VueServeCLI extends ServeCLI<VueServeOptions> {
+  readonly name = 'Vue CLI Service';
+  readonly pkg = '@vue/cli-service';
+  readonly program = 'vue-cli-service';
+  readonly prefix = 'vue-cli-service';
+  readonly script = SERVE_SCRIPT;
+  protected chunks = 0;
+
+  async serve(options: VueServeOptions): Promise<void> {
+    this.on('compile', chunks => {
+      if (chunks > 0) {
+        this.e.log.info(`... and ${strong(chunks.toString())} additional chunks`);
+      }
+    });
+
+    return super.serve(options);
+  }
+
+  protected stdoutFilter(line: string): boolean {
+    if (this.resolvedProgram !== this.program) {
+      return super.stdoutFilter(line);
+    }
+
+    const strippedLine = stripAnsi(line);
+    const compileMsgs = ['Compiled successfully', 'Compiled with warnings', 'Failed to compile'];
+    if (compileMsgs.some(msg => strippedLine.includes(msg))) {
+      this.emit('ready');
+      return false;
+    }
+
+    if (strippedLine.match(/.*chunk\s{\d+}.+/)) {
+      this.chunks++;
+      return false;
+    }
+
+    if (strippedLine.includes('Compiled successfully')) {
+      this.emit('compile', this.chunks);
+      this.chunks = 0;
+    }
+
+    // const endBannerMsgs = ['development build', 'production build']
+    // if (endBannerMsgs.some(msg => strippedLine.includes(msg))) {
+    //   return false;
+    // }
+    return true;
+  }
+  protected stderrFilter(line: string): boolean {
+    if (this.resolvedProgram !== this.program) {
+      return super.stderrFilter(line);
+    }
+    const strippedLine = stripAnsi(line);
+    if (strippedLine.includes('webpack.Progress')) {
+      return false;
+    }
+
+    return true;
+
+  }
+
+  protected async buildArgs(_options: VueServeOptions): Promise<string[]> {
+    const { pkgManagerArgs } = await import('../../utils/npm');
+
+    if (this.resolvedProgram === this.program) {
+      return ['serve'];
+    } else {
+      const [, ...pkgArgs] = await pkgManagerArgs(this.e.config.get('npmClient'), { command: 'run', script: this.script });
+      return pkgArgs;
+    }
+  }
+
+  protected async buildEnvVars(options: VueServeOptions): Promise<NodeJS.ProcessEnv> {
+    const env: NodeJS.ProcessEnv = {};
+    // // Vue CLI binds to `localhost` by default, but if specified it prints a
+    // // warning, so don't set `HOST` if the host is set to `localhost`.
+    if (options.host !== DEFAULT_ADDRESS) {
+      env.HOST = options.host;
+    }
+
+    env.PORT = String(options.port);
+    env.HTTPS = options.https ? 'true' : 'false';
+
+    return { ...await super.buildEnvVars(options), ...env };
+  }
 }

packages/@ionic/cli/src/lib/start.ts

@@ -199,9 +199,42 @@ export const SUPPORTED_FRAMEWORKS: readonly SupportedFramework[] = [
     type: 'react',
     description: 'https://reactjs.org',
   },
+  {
+    name: 'Vue',
+    type: 'vue',
+    description: 'https://vuejs.org',
+  },
 ];
 
 export const STARTER_TEMPLATES: StarterTemplate[] = [
+  {
+    name: 'tabs',
+    projectType: 'vue',
+    type: 'managed',
+    description: 'A starting project with a simple tabbed interface',
+    id: 'vue-official-tabs',
+  },
+  {
+    name: 'sidemenu',
+    projectType: 'vue',
+    type: 'managed',
+    description: 'A starting project with a side menu with navigation in the content area',
+    id: 'vue-official-sidemenu',
+  },
+  {
+    name: 'blank',
+    projectType: 'vue',
+    type: 'managed',
+    description: 'A blank starter project',
+    id: 'vue-official-blank',
+  },
+  {
+    name: 'list',
+    projectType: 'vue',
+    type: 'managed',
+    description: 'A starting project with a list',
+    id: 'vue-official-list',
+  },
   {
     name: 'tabs',
     projectType: 'angular',