refactor(cta): update vite recipe to use their new npm package (#2220)

Author: amrbashir

.changes/cta-update-vite-package.md

@@ -0,0 +1,5 @@
+---
+"create-tauri-app": patch
+---
+
+Update vite recipe to use the new vite npm [package](https://github.com/vitejs/vite/tree/main/packages/create-vite).

.github/workflows/test-cta.yml

@@ -26,7 +26,7 @@ jobs:
       matrix:
         node: ["14", "16"]
         manager: ["6", "7"]
-        recipe: ["vanillajs", "cra", "vite", "ngcli"]
+        recipe: ["vanillajs", "cra", "vite", "ngcli", "svelte"]
         exclude:
           - node: "16"
             manager: "6"
@@ -73,7 +73,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ["14", "16"]
-        recipe: ["vanillajs", "cra", "vite", "ngcli"]
+        recipe: ["vanillajs", "cra", "vite", "ngcli", "svelte"]
 
     steps:
       - uses: actions/checkout@v2

…auri-app/src/helpers/add-tauri-script.ts …i-app/src/helpers/update-package-json.tstooling/create-tauri-app/src/helpers/add-tauri-script.ts renamed to tooling/create-tauri-app/src/helpers/update-package-json.ts tooling/create-tauri-app/src/helpers/add-tauri-script.ts renamed to tooling/create-tauri-app/src/helpers/update-package-json.ts

@@ -5,20 +5,22 @@
 import { readFileSync, writeFileSync } from 'fs'
 import { join } from 'path'
 
-export function addTauriScript(appDirectory: string): void {
+interface Package {
+  name?: string
+  scripts?: {}
+}
+
+export function updatePackageJson(appDirectory: string, appName: string): void {
   const pkgPath = join(appDirectory, 'package.json')
   const pkgString = readFileSync(pkgPath, 'utf8')
-  const pkg = JSON.parse(pkgString) as {
-    scripts: {}
-  }
-
-  const outputPkg: { scripts: { tauri: string } } = {
+  const pkg = JSON.parse(pkgString) as Package
+  const outputPkg = {
     ...pkg,
+    name: appName,
     scripts: {
       ...pkg.scripts,
       tauri: 'tauri'
     }
   }
-
   writeFileSync(pkgPath, JSON.stringify(outputPkg, undefined, 2))
 }

tooling/create-tauri-app/src/index.ts

@@ -15,7 +15,7 @@ import { ngcli } from './recipes/ng-cli'
 import { svelte } from './recipes/svelte'
 import { install, checkPackageManager } from './dependency-manager'
 import { shell } from './shell'
-import { addTauriScript } from './helpers/add-tauri-script'
+import { updatePackageJson } from './helpers/update-package-json'
 import { Recipe } from './types/recipe'
 import { updateTauriConf } from './helpers/update-tauri-conf'
 
@@ -197,7 +197,7 @@ const runInit = async (argv: Argv): Promise<void> => {
       {
         type: 'list',
         name: 'recipeName',
-        message: 'Would you like to add a UI recipe?',
+        message: 'What UI recipe would you like to add?',
         choices: recipeDescriptiveNames,
         default: defaults.recipeName,
         when: !argv.ci && !argv.r
@@ -341,8 +341,8 @@ const runInit = async (argv: Argv): Promise<void> => {
       packageManager
     })
 
-    logStep(`Adding ${reset(yellow('"tauri"'))} script to package.json`)
-    addTauriScript(appDirectory)
+    logStep(`Updating ${reset(yellow('"package.json"'))}`)
+    updatePackageJson(appDirectory, appName)
 
     logStep(`Running: ${reset(yellow('tauri init'))}`)
     const binary = !argv.b ? packageManager : resolve(appDirectory, argv.b)

tooling/create-tauri-app/src/recipes/ng-cli.ts

@@ -29,10 +29,14 @@ const ngcli: Recipe = {
   shortName: 'ngcli',
   extraNpmDependencies: [],
   extraNpmDevDependencies: [],
-  configUpdate: ({ cfg }) => ({
+  configUpdate: ({ cfg, packageManager }) => ({
     ...cfg,
     distDir: `../dist/${cfg.appName}`,
-    devPath: 'http://localhost:4200'
+    devPath: 'http://localhost:4200',
+    beforeDevCommand: `${packageManager === 'yarn' ? 'yarn' : 'npm run'} start`,
+    beforeBuildCommand: `${
+      packageManager === 'yarn' ? 'yarn' : 'npm run'
+    } build`
   }),
   extraQuestions: ({ ci }) => {
     return [
@@ -96,9 +100,14 @@ const ngcli: Recipe = {
       }
     }
   },
-  postInit: async ({ cwd }) => {
+  postInit: async ({ packageManager, cfg }) => {
     console.log(`
-      Your installation completed. Change directory to \`${cwd}\` and happy coding.
+      Your installation completed.
+
+      $ cd ${cfg.appName}
+      $ ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
+      packageManager === 'npm' ? '--' : ''
+    } dev
     `)
 
     return await Promise.resolve()

tooling/create-tauri-app/src/recipes/react.ts

@@ -96,10 +96,14 @@ export const cra: Recipe = {
     }
     await afterCra(cwd, cfg.appName, template === 'cra.ts')
   },
-  postInit: async ({ packageManager }) => {
+  postInit: async ({ packageManager, cfg }) => {
     console.log(`
     Your installation completed.
-    To start, run ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri dev
+
+    $ cd ${cfg.appName}
+    $ ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
+      packageManager === 'npm' ? '--' : ''
+    } dev
   `)
     return await Promise.resolve()
   }

tooling/create-tauri-app/src/recipes/svelte.ts

@@ -14,14 +14,15 @@ const svelte: Recipe = {
   shortName: 'svelte',
   extraNpmDevDependencies: [],
   extraNpmDependencies: [],
-  extraQuestions: () => {
+  extraQuestions: ({ ci }) => {
     return [
       {
         type: 'confirm',
         name: 'typescript',
         message: 'Enable Typescript?',
         default: true,
-        loop: false
+        loop: false,
+        when: !ci
       }
     ]
   },
@@ -53,13 +54,13 @@ const svelte: Recipe = {
   },
   postInit: async ({ cfg, packageManager }) => {
     console.log(`
-      Your installation completed.
-      To start, run the dev script:
+    Your installation completed.
+
+    $ cd ${cfg.appName}.
+    $ ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
+      packageManager === 'npm' ? '--' : ''
+    } dev
 
-      $ cd ${cfg.appName}
-      $ ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
-      packageManager === 'npm' ? '-- ' : ''
-    }dev
     `)
 
     return await Promise.resolve()

tooling/create-tauri-app/src/recipes/vanilla.ts

@@ -40,26 +40,15 @@ export const vanillajs: Recipe = {
     }
   },
   postInit: async ({ cfg, packageManager }) => {
-    const setApp =
-      packageManager === 'npm'
-        ? `
-set tauri script once
-  $ npm set-script tauri tauri
-    `
-        : ''
-
     console.log(`
-change directory:
+    Your installation completed.
+
   $ cd ${cfg.appName}
-${setApp}
-install dependencies:
   $ ${packageManager} install
-
-run the app:
   $ ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
       packageManager === 'npm' ? '-- ' : ''
     }dev
-            `)
+  `)
     return await Promise.resolve()
   }
 }

tooling/create-tauri-app/src/recipes/vite.ts

@@ -26,8 +26,8 @@ const afterViteCA = async (
 
 const vite: Recipe = {
   descriptiveName: {
-    name: '@vitejs/create-app (https://vitejs.dev/guide/#scaffolding-your-first-vite-project)',
-    value: 'vite-create-app'
+    name: 'create-vite (https://vitejs.dev/guide/#scaffolding-your-first-vite-project)',
+    value: 'create-vite'
   },
   shortName: 'vite',
   configUpdate: ({ cfg, packageManager }) => ({
@@ -77,26 +77,15 @@ const vite: Recipe = {
     if (packageManager === 'yarn') {
       await shell(
         'yarn',
-        [
-          'create',
-          '@vitejs/app',
-          `${cfg.appName}`,
-          '--template',
-          `${template}`
-        ],
+        ['create', 'vite', `${cfg.appName}`, '--template', `${template}`],
         {
           cwd
         }
       )
     } else {
       await shell(
         'npx',
-        [
-          '@vitejs/create-app@latest',
-          `${cfg.appName}`,
-          '--template',
-          `${template}`
-        ],
+        ['create-vite@latest', `${cfg.appName}`, '--template', `${template}`],
         {
           cwd
         }
@@ -105,7 +94,7 @@ const vite: Recipe = {
 
     await afterViteCA(cwd, cfg.appName, template)
   },
-  postInit: async ({ cwd, packageManager }) => {
+  postInit: async ({ cwd, packageManager, cfg }) => {
     // we don't have a consistent way to rebuild and
     // esbuild has hit all the bugs and struggles to install on the postinstall
     await shell('node', ['./node_modules/esbuild/install.js'], { cwd })
@@ -115,8 +104,10 @@ const vite: Recipe = {
       await shell('npm', ['run', 'build'], { cwd })
     }
     console.log(`
-    Your installation completed. Change directories to \`${cwd}\`.
-    To start, run ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
+    Your installation completed.
+
+    $ cd ${cfg.appName}.
+    $ ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
       packageManager === 'npm' ? '--' : ''
     } dev
   `)

tooling/create-tauri-app/src/recipes/vue-cli.ts

@@ -6,11 +6,6 @@ import { join } from 'path'
 import { shell } from '../shell'
 import { Recipe } from '../types/recipe'
 
-const completeLogMsg = `
-  Your installation completed.
-  To start, run yarn tauri:serve
-`
-
 const vuecli: Recipe = {
   descriptiveName: {
     name: 'Vue CLI (https://cli.vuejs.org/)',
@@ -50,8 +45,13 @@ const vuecli: Recipe = {
       }
     )
   },
-  postInit: async () => {
-    console.log(completeLogMsg)
+  postInit: async ({ cfg, packageManager }) => {
+    console.log(`
+    Your installation completed.
+
+    $ cd ${cfg.appName}
+    $ ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri:serve
+    `)
     return await Promise.resolve()
   }
 }