feat: Add React project type (#3936)

Author: jthoms1

packages/ionic/src/commands/capacitor/run.ts

@@ -1,6 +1,7 @@
 import { Footnote, MetadataGroup, validators } from '@ionic/cli-framework';
 import { onBeforeExit, sleepForever } from '@ionic/utils-process';
 import chalk from 'chalk';
+import * as lodash from 'lodash';
 import * as path from 'path';
 
 import { CommandInstanceInfo, CommandLineInputs, CommandLineOptions, CommandMetadata, CommandMetadataOption, CommandPreRun } from '../../definitions';
@@ -24,7 +25,7 @@ export class RunCommand extends CapacitorCommand implements CommandPreRun {
       'ios --livereload-url=http://localhost:8100',
     ].sort();
 
-    const options: CommandMetadataOption[] = [
+    let options: CommandMetadataOption[] = [
       // Build Options
       {
         name: 'build',
@@ -68,7 +69,10 @@ export class RunCommand extends CapacitorCommand implements CommandPreRun {
       const libmetadata = await serveRunner.getCommandMetadata();
       const existingOpts = options.map(o => o.name);
       groups = libmetadata.groups || [];
-      options.push(...(libmetadata.options || []).filter(o => !existingOpts.includes(o.name)).map(o => ({ ...o, hint: `${o.hint ? `${o.hint} ` : ''}${weak('(--livereload)')}` })));
+      const runnerOpts = (libmetadata.options || [])
+        .filter(o => !existingOpts.includes(o.name))
+        .map(o => ({ ...o, hint: `${o.hint ? `${o.hint} ` : ''}${weak('(--livereload)')}` }));
+      options = lodash.uniqWith([...runnerOpts, ...options], (optionA, optionB) => optionA.name === optionB.name);
       footnotes.push(...libmetadata.footnotes || []);
     }
 

packages/ionic/src/commands/cordova/run.ts

@@ -1,6 +1,7 @@
 import { Footnote, MetadataGroup } from '@ionic/cli-framework';
 import { onBeforeExit, sleepForever } from '@ionic/utils-process';
 import * as Debug from 'debug';
+import * as lodash from 'lodash';
 import * as url from 'url';
 
 import { CommandInstanceInfo, CommandLineInputs, CommandLineOptions, CommandMetadata, CommandMetadataOption, CommandPreRun, IShellRunOptions } from '../../definitions';
@@ -54,7 +55,7 @@ export class RunCommand extends CordovaCommand implements CommandPreRun {
       'ios --livereload-url=http://localhost:8100',
     ].sort();
 
-    const options: CommandMetadataOption[] = [
+    let options: CommandMetadataOption[] = [
       {
         name: 'list',
         summary: 'List all available targets',
@@ -110,9 +111,10 @@ export class RunCommand extends CordovaCommand implements CommandPreRun {
       const libmetadata = await serveRunner.getCommandMetadata();
       const existingOpts = options.map(o => o.name);
       groups = libmetadata.groups || [];
-      options.push(...(libmetadata.options || [])
+      const runnerOpts = (libmetadata.options || [])
         .filter(o => !existingOpts.includes(o.name) && o.groups && o.groups.includes('cordova'))
-        .map(o => ({ ...o, hint: `${o.hint ? `${o.hint} ` : ''}${weak('(--livereload)')}` })));
+        .map(o => ({ ...o, hint: `${o.hint ? `${o.hint} ` : ''}${weak('(--livereload)')}` }));
+      options = lodash.uniqWith([...runnerOpts, ...options], (optionA, optionB) => optionA.name === optionB.name);
       footnotes.push(...libmetadata.footnotes || []);
     }
 

packages/ionic/src/commands/serve.ts

@@ -12,7 +12,7 @@ export class ServeCommand extends Command implements CommandPreRun {
   async getMetadata(): Promise<CommandMetadata> {
     let groups: string[] = [];
 
-    const options: CommandMetadataOption[] = [
+    let options: CommandMetadataOption[] = [
       ...COMMON_SERVE_COMMAND_OPTIONS,
       {
         name: 'lab-host',
@@ -71,7 +71,7 @@ Try the ${input('--lab')} option to see multiple platforms at once.`;
     if (runner) {
       const libmetadata = await runner.getCommandMetadata();
       groups = libmetadata.groups || [];
-      options.push(...libmetadata.options || []);
+      options = lodash.uniqWith([...libmetadata.options || [], ...options], (optionA, optionB) => optionA.name === optionB.name);
       description += `\n\n${(libmetadata.description || '').trim()}`;
       footnotes.push(...libmetadata.footnotes || []);
       exampleCommands.push(...libmetadata.exampleCommands || []);

packages/ionic/src/commands/start.ts

@@ -163,6 +163,8 @@ Use the ${input('--type')} option to start projects using older versions of Ioni
       }
     }
 
+    // TODO: currently defaults to angular as the project type if a type is not provided
+    // we might want to make them select a type instead
     const projectType = options['type'] ? String(options['type']) : 'angular';
     const appflowId = options['id'] ? String(options['id']) : undefined;
 

packages/ionic/src/constants.ts

@@ -5,4 +5,4 @@ import { ProjectType } from './definitions';
 export const ASSETS_DIRECTORY = path.resolve(__dirname, 'assets');
 
 export const PROJECT_FILE = 'ionic.config.json';
-export const PROJECT_TYPES: ProjectType[] = ['angular', 'ionic-angular', 'ionic1', 'custom'];
+export const PROJECT_TYPES: ProjectType[] = ['angular', 'ionic-angular', 'ionic1', 'custom', 'react', 'vue'];

packages/ionic/src/definitions.ts

@@ -58,7 +58,7 @@ export interface Runner<T extends object, U> {
   run(options: T): Promise<U>;
 }
 
-export type ProjectType = 'angular' | 'ionic-angular' | 'ionic1' | 'custom' | 'bare';
+export type ProjectType = 'angular' | 'ionic-angular' | 'ionic1' | 'custom' | 'bare' | 'react' | 'vue';
 export type HookName = 'build:before' | 'build:after' | 'serve:before' | 'serve:after';
 
 export interface BaseHookContext {
@@ -547,6 +547,19 @@ export interface AngularBuildOptions extends BuildOptions<'angular'> {
   cordovaAssets?: boolean;
 }
 
+export interface ReactBuildOptions extends BuildOptions<'react'> {
+  publicUrl?: string;
+  ci?: boolean;
+  sourceMap?: boolean;
+  inlineRuntimeChunk?: boolean;
+}
+
+export interface VueBuildOptions extends BuildOptions<'vue'> {
+  configuration?: string;
+  sourcemaps?: boolean;
+  cordovaAssets?: boolean;
+}
+
 export interface IonicAngularBuildOptions extends BuildOptions<'ionic-angular'> {
   prod: boolean;
   sourcemaps?: boolean;
@@ -605,6 +618,18 @@ export interface AngularServeOptions extends ServeOptions {
   sourcemaps?: boolean;
 }
 
+export interface ReactServeOptions extends ServeOptions {
+  https?: boolean;
+  ci?: boolean;
+  reactEditor?: string;
+}
+
+export interface VueServeOptions extends ServeOptions {
+  ssl?: boolean;
+  configuration?: string;
+  sourcemaps?: boolean;
+}
+
 export interface IonicAngularServeOptions extends ServeOptions {
   sourcemaps?: boolean;
   consolelogs: boolean;

packages/ionic/src/lib/integrations/capacitor/index.ts

@@ -28,6 +28,10 @@ export class Integration extends BaseIntegration<ProjectIntegration> {
     let packageId = 'io.ionic.starter';
     const options: string[] = [];
 
+    if (this.e.project.type === 'react') {
+      options.push('--web-dir', 'public');
+    }
+
     if (details.enableArgs) {
       const parsedArgs = parseArgs(details.enableArgs);
 

packages/ionic/src/lib/project/index.ts

@@ -292,6 +292,12 @@ export async function createProjectFromDetails(details: ProjectDetailsResult, de
     case 'angular':
       const { AngularProject } = await import('./angular');
       return new AngularProject(details, deps);
+    case 'react':
+      const { ReactProject } = await import('./react');
+      return new ReactProject(details, deps);
+    case 'vue':
+      const { VueProject } = await import('./vue');
+      return new VueProject(details, deps);
     case 'ionic-angular':
       const { IonicAngularProject } = await import('./ionic-angular');
       return new IonicAngularProject(details, deps);
@@ -624,6 +630,10 @@ export function prettyProjectName(type?: string): string {
 
   if (type === 'angular') {
     return '@ionic/angular';
+  } else if (type === 'react') {
+    return '@ionic/react';
+  } else if (type === 'vue') {
+    return '@ionic/vue';
   } else if (type === 'ionic-angular') {
     return 'Ionic 2/3';
   } else if (type === 'ionic1') {

packages/ionic/src/lib/project/react/build.ts

@@ -0,0 +1,108 @@
+import { MetadataGroup } from '@ionic/cli-framework';
+
+import { CommandLineInputs, CommandLineOptions, CommandMetadata, ReactBuildOptions } from '../../../definitions';
+import { BUILD_SCRIPT, BuildCLI, BuildRunner, BuildRunnerDeps } from '../../build';
+import { input } from '../../color';
+
+import { ReactProject } from './';
+
+export interface ReactBuildRunnerDeps extends BuildRunnerDeps {
+  readonly project: ReactProject;
+}
+
+export class ReactBuildRunner extends BuildRunner<ReactBuildOptions> {
+  constructor(protected readonly e: ReactBuildRunnerDeps) {
+    super();
+  }
+
+  async getCommandMetadata(): Promise<Partial<CommandMetadata>> {
+    return {
+      description: `
+    ${input('ionic build')} uses React Scripts. See the ${input('create-react-app')} docs[^cra-build-docs] for explanations. This command interprets the arguments to environment variables supported by React Scripts.
+      `,
+      footnotes: [
+        {
+            id: 'cra-build-docs',
+            url: 'https://facebook.github.io/create-react-app/docs/advanced-configuration',
+        },
+      ],
+      options: [
+        {
+          name: 'public-url',
+          summary: `You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). `,
+          type: String,
+        },
+        {
+          name: 'ci',
+          summary: `Treat all warnings as build failures. Also makes the test runner non-watching.`,
+          type: Boolean,
+        },
+        {
+          name: 'source-map',
+          summary: `When set to false, source maps are not generated.`,
+          type: Boolean,
+        },
+        {
+          name: 'inline-runtime-chunk',
+          summary: `By default a runtime script is included in index.html. When set to false, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.`,
+          type: Boolean,
+        },
+      ],
+      groups: [MetadataGroup.BETA],
+    };
+  }
+
+  createOptionsFromCommandLine(inputs: CommandLineInputs, options: CommandLineOptions): ReactBuildOptions {
+    const baseOptions = super.createBaseOptionsFromCommandLine(inputs, options);
+    const publicUrl = options['public-url'] ? String(options['public-url']) : undefined;
+    const ci = options['ci'] ? Boolean(options['ci']) : undefined;
+    const sourceMap = options['source-map'] ? Boolean(options['source-map']) : undefined;
+    const inlineRuntimeChunk = options['inline-runtime-check'] ? Boolean(options['inline-runtime-check']) : undefined;
+
+    return {
+      ...baseOptions,
+      type: 'react',
+      publicUrl,
+      ci,
+      sourceMap,
+      inlineRuntimeChunk,
+    };
+  }
+
+  async buildProject(options: ReactBuildOptions): Promise<void> {
+    const reactScripts = new ReactBuildCLI(this.e);
+    await reactScripts.build(options);
+  }
+}
+
+export class ReactBuildCLI extends BuildCLI<ReactBuildOptions> {
+  readonly name = 'React Scripts';
+  readonly pkg = 'react-scripts';
+  readonly program = 'react-scripts';
+  readonly prefix = 'react-scripts';
+  readonly script = BUILD_SCRIPT;
+
+  protected async buildArgs(options: ReactBuildOptions): 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;
+    }
+  }
+
+  protected async buildEnvVars(options: ReactBuildOptions): Promise<NodeJS.ProcessEnv> {
+    const envVars: NodeJS.ProcessEnv = {};
+
+    if (options.publicUrl) {
+      envVars.PUBLIC_URL = options.publicUrl;
+    }
+    envVars.CI = String(options.ci);
+    envVars.GENERATE_SOURCEMAP = String(options.sourceMap);
+    envVars.INLINE_RUNTIME_CHUNK = String(options.inlineRuntimeChunk);
+
+    return envVars;
+  }
+}

packages/ionic/src/lib/project/react/index.ts

@@ -0,0 +1,64 @@
+import chalk from 'chalk';
+import * as Debug from 'debug';
+import * as lodash from 'lodash';
+
+import { Project } from '../';
+import { InfoItem } from '../../../definitions';
+import { RunnerNotFoundException } from '../../errors';
+
+const debug = Debug('ionic:lib:project:React');
+
+export class ReactProject extends Project {
+  readonly type: 'react' = 'react';
+
+  async getInfo(): Promise<InfoItem[]> {
+    const [
+      [ ionicReactPkg, ionicReactPkgPath ],
+    ] = await Promise.all([
+      this.getPackageJson('@ionic/react'),
+    ]);
+
+    return [
+      ...(await super.getInfo()),
+      { group: 'ionic', key: 'Ionic Framework', value: ionicReactPkg ? `@ionic/react ${ionicReactPkg.version}` : 'not installed', path: ionicReactPkgPath },
+    ];
+  }
+
+  /**
+   * We can't detect React project types. We don't know what they look like!
+   */
+  async detected() {
+    try {
+      const pkg = await this.requirePackageJson();
+      const deps = lodash.assign({}, pkg.dependencies, pkg.devDependencies);
+
+      if (typeof deps['@ionic/React'] === 'string') {
+        debug(`${chalk.bold('@ionic/React')} detected in ${chalk.bold('package.json')}`);
+        return true;
+      }
+    } catch (e) {
+      // ignore
+    }
+
+    return false;
+  }
+
+  async requireBuildRunner(): Promise<import('./build').ReactBuildRunner> {
+    const { ReactBuildRunner } = await import('./build');
+    const deps = { ...this.e, project: this };
+    return new ReactBuildRunner(deps);
+  }
+
+  async requireServeRunner(): Promise<import('./serve').ReactServeRunner> {
+    const { ReactServeRunner } = await import('./serve');
+    const deps = { ...this.e, project: this };
+    return new ReactServeRunner(deps);
+  }
+
+  async requireGenerateRunner(): Promise<never> {
+    throw new RunnerNotFoundException(
+      `Cannot perform generate for React projects.\n` +
+      `Since you're using the ${chalk.bold('React')} project type, this command won't work. The Ionic CLI doesn't know how to generate framework components for React projects.`
+    );
+  }
+}