Skip to content

Commit 8799cdf

Browse files
0xle0ne0xle0ne
authored
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
1 parent 6bea61d commit 8799cdf

15 files changed

Lines changed: 223 additions & 0 deletions

File tree

‎.changes/vanilla-ts.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"create-tauri-app": "minor"
3+
"create-tauri-app-js": "minor"
4+
---
5+
6+
Add `vanilla-ts` templates.

‎.scripts/generate-templates-matrix.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const nodeJsTemplates = [
1010
"react",
1111
"react-ts",
1212
"vanilla",
13+
"vanilla-ts",
1314
"next",
1415
"next-ts",
1516
"preact",

‎packages/cli/fragments/fragment-vanilla-ts/.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
3+
}

‎packages/cli/fragments/fragment-vanilla-ts/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Tauri + Vanilla TS
2+
3+
This template should help get you started developing with Tauri in vanilla HTML, CSS and Typescript.
4+
5+
## Recommended IDE Setup
6+
7+
- [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)

‎packages/cli/fragments/fragment-vanilla-ts/_cta_manifest_‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
beforeDevCommand = {{pkg_manager_run_command}} dev
2+
beforeBuildCommand = {{pkg_manager_run_command}} build
3+
devPath = http://localhost:1420
4+
distDir = ../dist
5+
withGlobalTauri = true
6+
7+
[files]
8+
tauri.svg = src/assets/tauri.svg
9+
vite.svg = src/assets/vite.svg

‎packages/cli/fragments/fragment-vanilla-ts/_gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎packages/cli/fragments/fragment-vanilla-ts/index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="stylesheet" href="/src/style.css" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Tauri App</title>
8+
<script type="module" src="/src/main.ts" defer></script>
9+
<style>
10+
.logo.vite:hover {
11+
filter: drop-shadow(0 0 2em #747bff);
12+
}
13+
14+
.logo.typescript:hover {
15+
filter: drop-shadow(0 0 2em #2d79c7);
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<div class="container">
22+
<h1>Welcome to Tauri!</h1>
23+
24+
<div class="row">
25+
<a href="https://vitejs.dev" target="_blank">
26+
<img src="/src/assets/vite.svg" class="logo vite" alt="Vite logo" />
27+
</a>
28+
<a href="https://tauri.app" target="_blank">
29+
<img
30+
src="/src/assets/tauri.svg"
31+
class="logo tauri"
32+
alt="Tauri logo"
33+
/>
34+
</a>
35+
<a href="https://www.typescriptlang.org/docs" target="_blank">
36+
<img
37+
src="/src/assets/typescript.svg"
38+
class="logo typescript"
39+
alt="typescript logo"
40+
/>
41+
</a>
42+
</div>
43+
44+
<p>Click on the Tauri logo to learn more about the framework</p>
45+
46+
<div class="row">
47+
<div>
48+
<input id="greet-input" placeholder="Enter a name..." />
49+
<button type="button" onclick="greet()">Greet</button>
50+
</div>
51+
</div>
52+
53+
<p id="greet-msg"></p>
54+
</div>
55+
</body>
56+
</html>

‎packages/cli/fragments/fragment-vanilla-ts/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "{{package_name}}",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview",
10+
"tauri": "tauri"
11+
},
12+
"dependencies": {},
13+
"devDependencies": {
14+
"@tauri-apps/api": "^1.0.2",
15+
"@tauri-apps/cli": "^1.0.5",
16+
"vite": "^3.0.2",
17+
"typescript": "^4.8.2"
18+
}
19+
}

‎packages/cli/fragments/fragment-vanilla-ts/src/assets/typescript.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎packages/cli/fragments/fragment-vanilla-ts/src/main.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const { invoke } = window.__TAURI__;
2+
3+
let greetInputEl: HTMLInputElement | null;
4+
let greetMsgEl: HTMLElement | null;
5+
6+
window.addEventListener("DOMContentLoaded", () => {
7+
greetInputEl = document.querySelector("#greet-input");
8+
greetMsgEl = document.querySelector("#greet-msg");
9+
});
10+
11+
async function greet() {
12+
if (greetMsgEl && greetInputEl) {
13+
greetMsgEl.textContent = await invoke("greet", {
14+
name: greetInputEl.value,
15+
});
16+
}
17+
}
18+
19+
window.greet = greet;

0 commit comments

Comments
 (0)