From 80b7bd7de86f59e0cafaa0efdc6e82a0db7d7ba2 Mon Sep 17 00:00:00 2001 From: Amr Bashir <48618675+amrbashir@users.noreply.github.com> Date: Tue, 13 Apr 2021 15:56:21 +0200 Subject: [PATCH] feat(CTA): add initial vite support with `vue` and `vue-ts` (#1467) --- .changes/cta-vite.md | 5 + .../create-tauri-app/bin/create-tauri-app.js | 4 +- tooling/create-tauri-app/src/index.ts | 3 +- tooling/create-tauri-app/src/recipes/react.ts | 12 +- .../create-tauri-app/src/recipes/vanilla.ts | 4 +- tooling/create-tauri-app/src/recipes/vite.ts | 116 ++++++++++++++++++ .../src/templates/vite/vue-ts/src/App.vue | 36 ++++++ .../vite/vue-ts/src/assets/tauri.svg | 21 ++++ .../vite/vue-ts/src/assets/wordmark.svg | 16 +++ .../src/templates/vite/vue/src/App.vue | 31 +++++ .../templates/vite/vue/src/assets/tauri.svg | 21 ++++ .../vite/vue/src/assets/wordmark.svg | 16 +++ tooling/create-tauri-app/tsconfig.json | 3 +- 13 files changed, 278 insertions(+), 10 deletions(-) create mode 100644 .changes/cta-vite.md create mode 100644 tooling/create-tauri-app/src/recipes/vite.ts create mode 100644 tooling/create-tauri-app/src/templates/vite/vue-ts/src/App.vue create mode 100644 tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/tauri.svg create mode 100644 tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/wordmark.svg create mode 100644 tooling/create-tauri-app/src/templates/vite/vue/src/App.vue create mode 100644 tooling/create-tauri-app/src/templates/vite/vue/src/assets/tauri.svg create mode 100644 tooling/create-tauri-app/src/templates/vite/vue/src/assets/wordmark.svg diff --git a/.changes/cta-vite.md b/.changes/cta-vite.md new file mode 100644 index 000000000000..c7220e883610 --- /dev/null +++ b/.changes/cta-vite.md @@ -0,0 +1,5 @@ +--- +"create-tauri-app": patch +--- + +Add initial `vite` support starting with `vue` and `vue-ts` diff --git a/tooling/create-tauri-app/bin/create-tauri-app.js b/tooling/create-tauri-app/bin/create-tauri-app.js index 837a0cfcb862..741b74e60087 100644 --- a/tooling/create-tauri-app/bin/create-tauri-app.js +++ b/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 /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); } }); diff --git a/tooling/create-tauri-app/src/index.ts b/tooling/create-tauri-app/src/index.ts index 58a9503dd2ec..2a50d505ca48 100644 --- a/tooling/create-tauri-app/src/index.ts +++ b/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; } -export const allRecipes: Recipe[] = [vanillajs, reactjs, reactts]; +export const allRecipes: Recipe[] = [vanillajs, reactjs, reactts, vite]; export const recipeNames: Array<[string, string]> = map( allRecipes, diff --git a/tooling/create-tauri-app/src/recipes/react.ts b/tooling/create-tauri-app/src/recipes/react.ts index 4bd78e3b6412..6fba2354d4e6 100644 --- a/tooling/create-tauri-app/src/recipes/react.ts +++ b/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 `); }, }; diff --git a/tooling/create-tauri-app/src/recipes/vanilla.ts b/tooling/create-tauri-app/src/recipes/vanilla.ts index 699887f39dde..13c2785c79a9 100644 --- a/tooling/create-tauri-app/src/recipes/vanilla.ts +++ b/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 `); }, }; diff --git a/tooling/create-tauri-app/src/recipes/vite.ts b/tooling/create-tauri-app/src/recipes/vite.ts new file mode 100644 index 000000000000..2fb0bc93e1f6 --- /dev/null +++ b/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 }; diff --git a/tooling/create-tauri-app/src/templates/vite/vue-ts/src/App.vue b/tooling/create-tauri-app/src/templates/vite/vue-ts/src/App.vue new file mode 100644 index 000000000000..05fc0db0363b --- /dev/null +++ b/tooling/create-tauri-app/src/templates/vite/vue-ts/src/App.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/tauri.svg b/tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/tauri.svg new file mode 100644 index 000000000000..9d32fc32d003 --- /dev/null +++ b/tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/tauri.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/wordmark.svg b/tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/wordmark.svg new file mode 100644 index 000000000000..94f4f7c2a739 --- /dev/null +++ b/tooling/create-tauri-app/src/templates/vite/vue-ts/src/assets/wordmark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/tooling/create-tauri-app/src/templates/vite/vue/src/App.vue b/tooling/create-tauri-app/src/templates/vite/vue/src/App.vue new file mode 100644 index 000000000000..7c5a11ad4606 --- /dev/null +++ b/tooling/create-tauri-app/src/templates/vite/vue/src/App.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/tooling/create-tauri-app/src/templates/vite/vue/src/assets/tauri.svg b/tooling/create-tauri-app/src/templates/vite/vue/src/assets/tauri.svg new file mode 100644 index 000000000000..9d32fc32d003 --- /dev/null +++ b/tooling/create-tauri-app/src/templates/vite/vue/src/assets/tauri.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/tooling/create-tauri-app/src/templates/vite/vue/src/assets/wordmark.svg b/tooling/create-tauri-app/src/templates/vite/vue/src/assets/wordmark.svg new file mode 100644 index 000000000000..94f4f7c2a739 --- /dev/null +++ b/tooling/create-tauri-app/src/templates/vite/vue/src/assets/wordmark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/tooling/create-tauri-app/tsconfig.json b/tooling/create-tauri-app/tsconfig.json index 8f87d0b8181e..9fd056544886 100644 --- a/tooling/create-tauri-app/tsconfig.json +++ b/tooling/create-tauri-app/tsconfig.json @@ -9,5 +9,6 @@ "resolveJsonModule": true, "moduleResolution": "node" }, - "include": ["src"] + "include": ["src"], + "exclude": ["src/templates"] }