feat(CTA): add initial vite support with vue and vue-ts (#1467)

Author: amrbashir

.changes/cta-vite.md

@@ -0,0 +1,5 @@
+---
+"create-tauri-app": patch
+---
+
+Add initial `vite` support starting with `vue` and `vue-ts`

tooling/create-tauri-app/bin/create-tauri-app.js

@@ -89,7 +89,7 @@ function printUsage() {
     --window-title, -W   Window title of your Tauri application
     --dist-dir, -D       Web assets location, relative to <project-dir>/src-tauri
     --dev-path, -P       Url of your dev server
-    --recipe, -r         Add UI framework recipe. None by default. 
+    --recipe, -r         Add UI framework recipe. None by default.
                          Supported recipes: [${recipeShortNames.join("|")}]
     `);
 }
@@ -130,7 +130,7 @@ const getOptionsInteractive = (argv) => {
         );
         runInit();
       } else {
-        // Something else when wrong
+        // Something else went wrong
         console.error("An unknown error occurred:", error);
       }
     });

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

@@ -6,6 +6,7 @@ import { map, find } from "lodash";
 import { TauriBuildConfig } from "./types/config";
 import { reactjs, reactts } from "./recipes/react";
 import { vanillajs } from "./recipes/vanilla";
+import { vite } from "./recipes/vite";
 
 export { shell } from "./shell";
 export { install, checkPackageManager } from "./dependency-manager";
@@ -43,7 +44,7 @@ export interface Recipe {
   }) => Promise<void>;
 }
 
-export const allRecipes: Recipe[] = [vanillajs, reactjs, reactts];
+export const allRecipes: Recipe[] = [vanillajs, reactjs, reactts, vite];
 
 export const recipeNames: Array<[string, string]> = map(
   allRecipes,

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

@@ -24,12 +24,14 @@ const afterCra = async (cwd: string, appName: string, version: string) => {
 const reactjs: Recipe = {
   descriptiveName: "React.js",
   shortName: "reactjs",
-  configUpdate: ({ cfg }) => ({
+  configUpdate: ({ cfg, packageManager }) => ({
     ...cfg,
     distDir: `../build`,
     devPath: "http://localhost:3000",
-    beforeDevCommand: `npm start`,
-    beforeBuildCommand: `npm build`,
+    beforeDevCommand: `${packageManager === "yarn" ? "yarn" : "npm run"} start`,
+    beforeBuildCommand: `${
+      packageManager === "yarn" ? "yarn" : "npm run"
+    } build`,
   }),
   extraNpmDevDependencies: [],
   extraNpmDependencies: [],
@@ -57,7 +59,7 @@ const reactjs: Recipe = {
   postInit: async ({ packageManager }) => {
     console.log(`
     Your installation completed.
-    To start, run ${packageManager} tauri dev
+    To start, run ${packageManager === "yarn" ? "yarn" : "npm run"} tauri dev
   `);
   },
 };
@@ -98,7 +100,7 @@ const reactts: Recipe = {
   postInit: async ({ packageManager }) => {
     console.log(`
     Your installation completed.
-    To start, run ${packageManager} tauri dev
+    To start, run ${packageManager === "yarn" ? "yarn" : "npm run"} tauri dev
   `);
   },
 };

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

@@ -41,7 +41,9 @@ install dependencies:
   $ ${packageManager} install
 
 run the app:
-  $ ${packageManager} tauri ${packageManager === "npm" ? "-- " : ""}dev
+  $ ${packageManager === "yarn" ? "yarn" : "npm run"} tauri ${
+      packageManager === "npm" ? "-- " : ""
+    }dev
             `);
   },
 };

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

@@ -0,0 +1,116 @@
+import { Recipe } from "..";
+import { join } from "path";
+import { readdirSync } from "fs";
+//@ts-ignore
+import scaffe from "scaffe";
+import { shell } from "../shell";
+import inquirer from "inquirer";
+
+const afterViteCA = async (
+  cwd: string,
+  appName: string,
+  version: string,
+  template: string
+) => {
+  const templateDir = join(__dirname, `../src/templates/vite/${template}`);
+  const variables = {
+    name: appName,
+    tauri_version: version,
+  };
+
+  try {
+    await scaffe.generate(templateDir, join(cwd, appName), {
+      overwrite: true,
+      variables,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+const vite: Recipe = {
+  descriptiveName: "Vite backed recipe",
+  shortName: "vite",
+  configUpdate: ({ cfg, packageManager }) => ({
+    ...cfg,
+    distDir: `../dist`,
+    devPath: "http://localhost:3000",
+    beforeDevCommand: `${packageManager === "yarn" ? "yarn" : "npm run"} start`,
+    beforeBuildCommand: `${
+      packageManager === "yarn" ? "yarn" : "npm run"
+    } build`,
+  }),
+  extraNpmDevDependencies: [],
+  extraNpmDependencies: [],
+  preInit: async ({ cwd, cfg, packageManager }) => {
+    try {
+      const { template } = await inquirer.prompt([
+        {
+          type: "list",
+          name: "template",
+          message: "Which vite template would you like to use?",
+          choices: readdirSync(join(__dirname, "../src/templates/vite")),
+          default: "vue",
+        },
+      ]);
+
+      // Vite creates the folder for you
+      if (packageManager === "yarn") {
+        await shell(
+          "yarn",
+          [
+            "create",
+            "@vitejs/app",
+            `${cfg.appName}`,
+            "--template",
+            `${template}`,
+          ],
+          {
+            cwd,
+          }
+        );
+      } else {
+        await shell(
+          "npm",
+          [
+            "init",
+            "@vitejs/app",
+            `${cfg.appName}`,
+            "--",
+            "--template",
+            `${template}`,
+          ],
+          {
+            cwd,
+          }
+        );
+      }
+
+      const version = await shell("npm", ["view", "tauri", "version"], {
+        stdio: "pipe",
+      });
+      const versionNumber = version.stdout.trim();
+      await afterViteCA(cwd, cfg.appName, versionNumber, template);
+    } catch (error) {
+      if (error.isTtyError) {
+        // Prompt couldn't be rendered in the current environment
+        console.log(
+          "It appears your terminal does not support interactive prompts. Using default values."
+        );
+      } else {
+        // Something else went wrong
+        console.error("An unknown error occurred:", error);
+      }
+    }
+  },
+  postInit: async ({ packageManager }) => {
+    console.log(`
+    Your installation completed.
+    To start, run ${packageManager === "yarn" ? "yarn" : "npm run"} tauri ${
+      packageManager === "npm" ? "--" : ""
+    } dev
+  `);
+  },
+};
+
+export { vite };

tooling/create-tauri-app/src/templates/vite/vue-ts/src/App.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <img alt="Tauri logo" height="200" src="./assets/tauri.svg" />
+  </div>
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite + Tauri" />
+  <a
+    style="color: #42b983;"
+    href="https://tauri.studio"
+    target="_blank"
+    rel="noopener noreferrer"
+  >Learn Tauri</a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HelloWorld from './components/HelloWorld.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+})
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>