From 489fad55242b3489c7c551fdfdd031ebad2d9b9c Mon Sep 17 00:00:00 2001
From: Epsilon_02 <epsilon_02+github@mailbox.org>
Date: Wed, 14 Jul 2021 22:36:46 +0200
Subject: [PATCH] Angular create tauri app [#1934] (#2203)

---
 .changes/cta-added-angular-cli.md             |   5 +
 .github/workflows/test-cta.yml                |   4 +-
 tooling/create-tauri-app/src/index.ts         |   3 +-
 .../create-tauri-app/src/recipes/ng-cli.ts    | 108 ++++++++++++++++++
 tooling/create-tauri-app/test/index.spec.ts   |   8 ++
 5 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 .changes/cta-added-angular-cli.md
 create mode 100644 tooling/create-tauri-app/src/recipes/ng-cli.ts

diff --git a/.changes/cta-added-angular-cli.md b/.changes/cta-added-angular-cli.md
new file mode 100644
index 000000000..e4787aa43
--- /dev/null
+++ b/.changes/cta-added-angular-cli.md
@@ -0,0 +1,5 @@
+---
+"create-tauri-app": patch
+---
+
+Added Angular CLI recipe.
\ No newline at end of file
diff --git a/.github/workflows/test-cta.yml b/.github/workflows/test-cta.yml
index c7bd64608..78c8198fb 100644
--- a/.github/workflows/test-cta.yml
+++ b/.github/workflows/test-cta.yml
@@ -26,7 +26,7 @@ jobs:
       matrix:
         node: ["14", "16"]
         manager: ["6", "7"]
-        recipe: ["vanillajs", "cra", "vite"]
+        recipe: ["vanillajs", "cra", "vite", "ngcli"]
         exclude:
           - node: "16"
             manager: "6"
@@ -73,7 +73,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ["14", "16"]
-        recipe: ["vanillajs", "cra", "vite"]
+        recipe: ["vanillajs", "cra", "vite", "ngcli"]
 
     steps:
       - uses: actions/checkout@v2
diff --git a/tooling/create-tauri-app/src/index.ts b/tooling/create-tauri-app/src/index.ts
index a946e30e1..6d0a87a8c 100644
--- a/tooling/create-tauri-app/src/index.ts
+++ b/tooling/create-tauri-app/src/index.ts
@@ -11,6 +11,7 @@ import { cra } from './recipes/react'
 import { vuecli } from './recipes/vue-cli'
 import { vanillajs } from './recipes/vanilla'
 import { vite } from './recipes/vite'
+import { ngcli } from './recipes/ng-cli'
 import { install, checkPackageManager } from './dependency-manager'
 import { shell } from './shell'
 import { addTauriScript } from './helpers/add-tauri-script'
@@ -113,7 +114,7 @@ interface Responses {
   recipeName: string
 }
 
-const allRecipes: Recipe[] = [vanillajs, cra, vite, vuecli]
+const allRecipes: Recipe[] = [vanillajs, cra, vite, vuecli, ngcli]
 
 const recipeByShortName = (name: string): Recipe | undefined =>
   allRecipes.find((r) => r.shortName === name)
diff --git a/tooling/create-tauri-app/src/recipes/ng-cli.ts b/tooling/create-tauri-app/src/recipes/ng-cli.ts
new file mode 100644
index 000000000..5671792bd
--- /dev/null
+++ b/tooling/create-tauri-app/src/recipes/ng-cli.ts
@@ -0,0 +1,108 @@
+import { PackageManager } from '../dependency-manager'
+import { shell } from '../shell'
+import { Recipe } from '../types/recipe'
+
+const addAdditionalPackage = async (
+  packageManager: PackageManager,
+  cwd: string,
+  appName: string,
+  packageName: string
+): Promise<void> => {
+  const ngCommand = ['ng', 'add', packageName, '--skip-confirmation']
+
+  if (packageManager === 'yarn') {
+    await shell('yarn', ngCommand, {
+      cwd: `${cwd}/${appName}`
+    })
+  } else {
+    await shell('npm', ['run', ...ngCommand], {
+      cwd: `${cwd}/${appName}`
+    })
+  }
+}
+
+const ngcli: Recipe = {
+  descriptiveName: {
+    name: 'Angular CLI (https://angular.io/cli)',
+    value: 'ng-cli'
+  },
+  shortName: 'ngcli',
+  extraNpmDependencies: [],
+  extraNpmDevDependencies: [],
+  configUpdate: ({ cfg }) => ({
+    ...cfg,
+    distDir: `../dist/${cfg.appName}`,
+    devPath: 'http://localhost:4200'
+  }),
+  extraQuestions: ({ ci }) => {
+    return [
+      {
+        type: 'confirm',
+        name: 'material',
+        message: 'Add Angular Material (https://material.angular.io/)?',
+        validate: (input: string) => {
+          return input.toLowerCase() === 'yes'
+        },
+        loop: false,
+        when: !ci
+      },
+      {
+        type: 'confirm',
+        name: 'eslint',
+        message:
+          'Add Angular ESLint (https://github.com/angular-eslint/angular-eslint)?',
+        validate: (input: string) => {
+          return input.toLowerCase() === 'yes'
+        },
+        loop: false,
+        when: !ci
+      }
+    ]
+  },
+  preInit: async ({ cwd, cfg, answers, packageManager }) => {
+    // Angular CLI creates the folder for you
+    await shell(
+      'npx',
+      [
+        '-p',
+        '@angular/cli',
+        'ng',
+        'new',
+        `${cfg.appName}`,
+        `--package-manager=${packageManager}`
+      ],
+      {
+        cwd
+      }
+    )
+
+    if (answers) {
+      if (answers.material) {
+        await addAdditionalPackage(
+          packageManager,
+          cwd,
+          cfg.appName,
+          '@angular/material'
+        )
+      }
+
+      if (answers.eslint) {
+        await addAdditionalPackage(
+          packageManager,
+          cwd,
+          cfg.appName,
+          '@angular-eslint/schematics'
+        )
+      }
+    }
+  },
+  postInit: async ({ cwd }) => {
+    console.log(`
+      Your installation completed. Change directory to \`${cwd}\` and happy coding.
+    `)
+
+    return await Promise.resolve()
+  }
+}
+
+export { ngcli }
diff --git a/tooling/create-tauri-app/test/index.spec.ts b/tooling/create-tauri-app/test/index.spec.ts
index 909662955..0112729a9 100644
--- a/tooling/create-tauri-app/test/index.spec.ts
+++ b/tooling/create-tauri-app/test/index.spec.ts
@@ -134,6 +134,14 @@ describe('CTA', () => {
                   'tauri:serve': expect.anything()
                 })
               )
+            },
+            ngcli: () => {
+              expect(packageFileOutput['scripts']).toEqual(
+                expect.objectContaining({
+                  ng: 'ng',
+                  tauri: 'tauri'
+                })
+              )
             }
           }