feat(cli/templates) add vanilla-ts template, closes #155 (#156)

* feat(cli/templates) add `vanilla-ts` * refactor(cli/fragments) vanilla-ts Readme.md * refactor(cli/fragments) Removed useless app.css in vanilla-ts template * refactor(cli/fragments) Moved tauri logo to the middle and renamed _[pnpm-yarn-npm]_package.json to package.json for vanilla-ts template * refactor(cli/fragments) Created a vite-env.d.ts with tauri api types for vanilla-ts template
tauri-apps · Aug 31, 2022 · 8799cdf · 8799cdf
1 parent 6bea61d
commit 8799cdf
Show file tree

Hide file tree

Showing 15 changed files with 223 additions and 0 deletions.
diff --git a/.changes/vanilla-ts.md b/.changes/vanilla-ts.md
@@ -0,0 +1,6 @@
+---
+"create-tauri-app": "minor"
+"create-tauri-app-js": "minor"
+---
+
+Add `vanilla-ts` templates.
diff --git a/.scripts/generate-templates-matrix.js b/.scripts/generate-templates-matrix.js
@@ -10,6 +10,7 @@ const nodeJsTemplates = [
   "react",
   "react-ts",
   "vanilla",
+  "vanilla-ts",
   "next",
   "next-ts",
   "preact",

diff --git a/packages/cli/fragments/fragment-vanilla-ts/.vscode/extensions.json b/packages/cli/fragments/fragment-vanilla-ts/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}
diff --git a/packages/cli/fragments/fragment-vanilla-ts/README.md b/packages/cli/fragments/fragment-vanilla-ts/README.md
@@ -0,0 +1,7 @@
+# Tauri + Vanilla TS
+
+This template should help get you started developing with Tauri in vanilla HTML, CSS and Typescript.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
diff --git a/packages/cli/fragments/fragment-vanilla-ts/_cta_manifest_ b/packages/cli/fragments/fragment-vanilla-ts/_cta_manifest_
@@ -0,0 +1,9 @@
+beforeDevCommand = {{pkg_manager_run_command}} dev
+beforeBuildCommand = {{pkg_manager_run_command}} build
+devPath = http://localhost:1420
+distDir = ../dist
+withGlobalTauri = true
+
+[files]
+tauri.svg = src/assets/tauri.svg
+vite.svg = src/assets/vite.svg
diff --git a/packages/cli/fragments/fragment-vanilla-ts/_gitignore b/packages/cli/fragments/fragment-vanilla-ts/_gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/cli/fragments/fragment-vanilla-ts/index.html b/packages/cli/fragments/fragment-vanilla-ts/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="/src/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tauri App</title>
+    <script type="module" src="/src/main.ts" defer></script>
+    <style>
+      .logo.vite:hover {
+        filter: drop-shadow(0 0 2em #747bff);
+      }
+
+      .logo.typescript:hover {
+        filter: drop-shadow(0 0 2em #2d79c7);
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>Welcome to Tauri!</h1>
+
+      <div class="row">
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/src/assets/vite.svg" class="logo vite" alt="Vite logo" />
+        </a>
+        <a href="https://tauri.app" target="_blank">
+          <img
+            src="/src/assets/tauri.svg"
+            class="logo tauri"
+            alt="Tauri logo"
+          />
+        </a>
+        <a href="https://www.typescriptlang.org/docs" target="_blank">
+          <img
+            src="/src/assets/typescript.svg"
+            class="logo typescript"
+            alt="typescript logo"
+          />
+        </a>
+      </div>
+
+      <p>Click on the Tauri logo to learn more about the framework</p>
+
+      <div class="row">
+        <div>
+          <input id="greet-input" placeholder="Enter a name..." />
+          <button type="button" onclick="greet()">Greet</button>
+        </div>
+      </div>
+
+      <p id="greet-msg"></p>
+    </div>
+  </body>
+</html>
diff --git a/packages/cli/fragments/fragment-vanilla-ts/package.json b/packages/cli/fragments/fragment-vanilla-ts/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "{{package_name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@tauri-apps/api": "^1.0.2",
+    "@tauri-apps/cli": "^1.0.5",
+    "vite": "^3.0.2",
+    "typescript": "^4.8.2"
+  }
+}
diff --git a/packages/cli/fragments/fragment-vanilla-ts/src/assets/typescript.svg b/packages/cli/fragments/fragment-vanilla-ts/src/assets/typescript.svg
diff --git a/packages/cli/fragments/fragment-vanilla-ts/src/main.ts b/packages/cli/fragments/fragment-vanilla-ts/src/main.ts
@@ -0,0 +1,19 @@
+const { invoke } = window.__TAURI__;
+
+let greetInputEl: HTMLInputElement | null;
+let greetMsgEl: HTMLElement | null;
+
+window.addEventListener("DOMContentLoaded", () => {
+  greetInputEl = document.querySelector("#greet-input");
+  greetMsgEl = document.querySelector("#greet-msg");
+});
+
+async function greet() {
+  if (greetMsgEl && greetInputEl) {
+    greetMsgEl.textContent = await invoke("greet", {
+      name: greetInputEl.value,
+    });
+  }
+}
+
+window.greet = greet;
diff --git a/packages/cli/fragments/fragment-vanilla-ts/src/vite-env.d.ts b/packages/cli/fragments/fragment-vanilla-ts/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+import type * as TauriApiTypes from "@tauri-apps/api";
+
+declare global {
+  interface Window {
+    __TAURI__: typeof TauriApiTypes;
+  }
+}
diff --git a/packages/cli/fragments/fragment-vanilla-ts/tsconfig.json b/packages/cli/fragments/fragment-vanilla-ts/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "types": ["vite/client"],
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true
+  },
+  "include": ["./src"]
+}
diff --git a/packages/cli/fragments/fragment-vanilla-ts/vite.config.js b/packages/cli/fragments/fragment-vanilla-ts/vite.config.js
@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // Vite optons tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  // prevent vite from obscuring rust errors
+  clearScreen: false,
+  // tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+  },
+  // to make use of `TAURI_DEBUG` and other env variables
+  // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
+  envPrefix: ["VITE_", "TAURI_"],
+  build: {
+    // Tauri supports es2021
+    target: ["es2021", "chrome100", "safari13"],
+    // don't minify for debug builds
+    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
+    // produce sourcemaps for debug builds
+    sourcemap: !!process.env.TAURI_DEBUG,
+  },
+});
diff --git a/packages/cli/src/package_manager.rs b/packages/cli/src/package_manager.rs
@@ -30,6 +30,7 @@ impl PackageManager {
             PackageManager::Cargo => &[Template::Vanilla, Template::Yew],
             PackageManager::Pnpm | PackageManager::Yarn | PackageManager::Npm => &[
                 Template::Vanilla,
+                Template::VanillaTs,
                 Template::Vue,
                 Template::VueTs,
                 Template::Svelte,

diff --git a/packages/cli/src/template.rs b/packages/cli/src/template.rs
@@ -18,6 +18,7 @@ struct Fragments;
 pub enum Template {
     #[default]
     Vanilla,
+    VanillaTs,
     Vue,
     VueTs,
     Svelte,
@@ -49,6 +50,7 @@ impl<'a> Template {
         Template::NextTs,
         Template::Preact,
         Template::PreactTs,
+        Template::VanillaTs,
     ];
 
     pub fn post_init_info(&self) -> Option<String> {
@@ -188,6 +190,7 @@ impl Display for Template {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self {
             Template::Vanilla => write!(f, "vanilla"),
+            Template::VanillaTs => write!(f, "vanilla-ts"),
             Template::Vue => write!(f, "vue"),
             Template::VueTs => write!(f, "vue-ts"),
             Template::Svelte => write!(f, "svelte"),
@@ -223,6 +226,7 @@ impl FromStr for Template {
             "next-ts" => Ok(Template::NextTs),
             "preact" => Ok(Template::Preact),
             "preact-ts" => Ok(Template::PreactTs),
+            "vanilla-ts" => Ok(Template::VanillaTs),
             _ => Err("Invalid template".to_string()),
         }
     }