diff --git a/tooling/create-tauri-app/src/recipes/react.ts b/tooling/create-tauri-app/src/recipes/react.ts index 6fba2354d..a24acf5bc 100644 --- a/tooling/create-tauri-app/src/recipes/react.ts +++ b/tooling/create-tauri-app/src/recipes/react.ts @@ -1,20 +1,26 @@ +// Copyright 2019-2021 Tauri Programme within The Commons Conservancy +// SPDX-License-Identifier: Apache-2.0 +// SPDX-License-Identifier: MIT + import { Recipe } from ".."; import { join } from "path"; //@ts-ignore import scaffe from "scaffe"; import { shell } from "../shell"; -const afterCra = async (cwd: string, appName: string, version: string) => { - const templateDir = join(__dirname, "../src/templates/react"); - const variables = { - name: appName, - tauri_version: version, - }; +const afterCra = async ( + cwd: string, + appName: string, + typescript: boolean = false +) => { + const templateDir = join( + __dirname, + `../src/templates/react/${typescript ? "react-ts" : "react"}` + ); try { await scaffe.generate(templateDir, join(cwd, appName), { overwrite: true, - variables, }); } catch (err) { console.log(err); @@ -42,19 +48,11 @@ const reactjs: Recipe = { cwd, }); } else { - await shell( - "npm", - ["init", "react-app", `${cfg.appName}`, "--", "--use-npm"], - { - cwd, - } - ); + await shell("npx", ["create-react-app", `${cfg.appName}`, "--use-npm"], { + cwd, + }); } - const version = await shell("npm", ["view", "tauri", "version"], { - stdio: "pipe", - }); - const versionNumber = version.stdout.trim(); - await afterCra(cwd, cfg.appName, versionNumber); + await afterCra(cwd, cfg.appName); }, postInit: async ({ packageManager }) => { console.log(` @@ -81,12 +79,10 @@ const reactts: Recipe = { ); } else { await shell( - "npm", + "npx", [ - "init", - "react-app", + "create-react-app", `${cfg.appName}`, - "--", "--use-npm", "--template", "typescript", @@ -96,6 +92,7 @@ const reactts: Recipe = { } ); } + await afterCra(cwd, cfg.appName, true); }, postInit: async ({ packageManager }) => { console.log(` diff --git a/tooling/create-tauri-app/src/recipes/vanilla.ts b/tooling/create-tauri-app/src/recipes/vanilla.ts index 13c2785c7..326c7ec82 100644 --- a/tooling/create-tauri-app/src/recipes/vanilla.ts +++ b/tooling/create-tauri-app/src/recipes/vanilla.ts @@ -1,3 +1,7 @@ +// Copyright 2019-2021 Tauri Programme within The Commons Conservancy +// SPDX-License-Identifier: Apache-2.0 +// SPDX-License-Identifier: MIT + import { Recipe } from ".."; import { TauriBuildConfig } from "../types/config"; import { join } from "path"; @@ -8,12 +12,14 @@ import { shell } from "../shell"; export const vanillajs: Recipe = { descriptiveName: "Vanilla.js", shortName: "vanillajs", - configUpdate: ({ cfg }) => ({ + configUpdate: ({ cfg, packageManager }) => ({ ...cfg, distDir: `../dist`, devPath: `../dist`, - beforeDevCommand: `yarn start`, - beforeBuildCommand: `yarn build`, + beforeDevCommand: `${packageManager === "yarn" ? "yarn" : "npm run"} start`, + beforeBuildCommand: `${ + packageManager === "yarn" ? "yarn" : "npm run" + } build`, }), extraNpmDevDependencies: [], extraNpmDependencies: [], diff --git a/tooling/create-tauri-app/src/recipes/vite.ts b/tooling/create-tauri-app/src/recipes/vite.ts index 2fb0bc93e..3314b639e 100644 --- a/tooling/create-tauri-app/src/recipes/vite.ts +++ b/tooling/create-tauri-app/src/recipes/vite.ts @@ -1,3 +1,7 @@ +// Copyright 2019-2021 Tauri Programme within The Commons Conservancy +// SPDX-License-Identifier: Apache-2.0 +// SPDX-License-Identifier: MIT + import { Recipe } from ".."; import { join } from "path"; import { readdirSync } from "fs"; @@ -6,22 +10,12 @@ import scaffe from "scaffe"; import { shell } from "../shell"; import inquirer from "inquirer"; -const afterViteCA = async ( - cwd: string, - appName: string, - version: string, - template: string -) => { +const afterViteCA = async (cwd: string, appName: 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); @@ -71,26 +65,15 @@ const vite: Recipe = { ); } else { await shell( - "npm", - [ - "init", - "@vitejs/app", - `${cfg.appName}`, - "--", - "--template", - `${template}`, - ], + "npx", + ["@vitejs/create-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); + await afterViteCA(cwd, cfg.appName, template); } catch (error) { if (error.isTtyError) { // Prompt couldn't be rendered in the current environment diff --git a/tooling/create-tauri-app/src/templates/react/src/App.css b/tooling/create-tauri-app/src/templates/react/react-ts/src/App.css similarity index 100% rename from tooling/create-tauri-app/src/templates/react/src/App.css rename to tooling/create-tauri-app/src/templates/react/react-ts/src/App.css diff --git a/tooling/create-tauri-app/src/templates/react/src/App.js b/tooling/create-tauri-app/src/templates/react/react-ts/src/App.tsx similarity index 100% rename from tooling/create-tauri-app/src/templates/react/src/App.js rename to tooling/create-tauri-app/src/templates/react/react-ts/src/App.tsx diff --git a/tooling/create-tauri-app/src/templates/react/src/tauri.svg b/tooling/create-tauri-app/src/templates/react/react-ts/src/tauri.svg similarity index 100% rename from tooling/create-tauri-app/src/templates/react/src/tauri.svg rename to tooling/create-tauri-app/src/templates/react/react-ts/src/tauri.svg diff --git a/tooling/create-tauri-app/src/templates/react/src/wordmark.svg b/tooling/create-tauri-app/src/templates/react/react-ts/src/wordmark.svg similarity index 100% rename from tooling/create-tauri-app/src/templates/react/src/wordmark.svg rename to tooling/create-tauri-app/src/templates/react/react-ts/src/wordmark.svg diff --git a/tooling/create-tauri-app/src/templates/react/react/src/App.css b/tooling/create-tauri-app/src/templates/react/react/src/App.css new file mode 100644 index 000000000..eeb936385 --- /dev/null +++ b/tooling/create-tauri-app/src/templates/react/react/src/App.css @@ -0,0 +1,54 @@ +.App { + text-align: center; +} + +.App-logo { + height: 20vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo.rotate { + animation: App-logo-spin infinite 20s linear; + } +} + +div.inline-logo { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +div.inline-logo > img { + margin-right: 3vw; +} + +div.inline-logo .smaller { + height: 10vh; +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; + margin-bottom: 5vh; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/tooling/create-tauri-app/src/templates/react/react/src/App.js b/tooling/create-tauri-app/src/templates/react/react/src/App.js new file mode 100644 index 000000000..36ba28f00 --- /dev/null +++ b/tooling/create-tauri-app/src/templates/react/react/src/App.js @@ -0,0 +1,40 @@ +import React from "react"; +import logo from "./logo.svg"; +import tauriCircles from "./tauri.svg"; +import tauriWord from "./wordmark.svg"; +import "./App.css"; + +function App() { + return ( +
+
+
+ logo + logo +
+ + Learn Tauri + + logo + + Learn React + +

+ Edit src/App.js and save to reload. +

+
+
+ ); +} + +export default App; diff --git a/tooling/create-tauri-app/src/templates/react/react/src/tauri.svg b/tooling/create-tauri-app/src/templates/react/react/src/tauri.svg new file mode 100644 index 000000000..9d32fc32d --- /dev/null +++ b/tooling/create-tauri-app/src/templates/react/react/src/tauri.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/tooling/create-tauri-app/src/templates/react/react/src/wordmark.svg b/tooling/create-tauri-app/src/templates/react/react/src/wordmark.svg new file mode 100644 index 000000000..94f4f7c2a --- /dev/null +++ b/tooling/create-tauri-app/src/templates/react/react/src/wordmark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + +