feat: add preact and preact-tS templates (#145)

tauri-apps · Aug 30, 2022 · 0f778e2 · 0f778e2
1 parent 27f31ae
commit 0f778e2
Show file tree

Hide file tree

Showing 42 changed files with 403 additions and 36 deletions.
diff --git a/.changes/preact.md b/.changes/preact.md
@@ -0,0 +1,6 @@
+---
+"create-tauri-app": "patch"
+"create-tauri-app-js": "patch"
+---
+
+Add `preact` and `preact-ts` templates.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -65,6 +65,7 @@ A template is a just combination of two fragments, [`fragment-base`](../packages
 - Add a directory in `<repo-root>/packages/cli/fragments` and name `fragment-template` where `template` is the name of the template and add all the files you need there as they should appear after the template is created.
 - In `<repo-root>/packages/cli/src/template.rs`, add an entry in the `Template` enum, modify `post_init_info` if needed and modify `FromStr` and `Display` implementation
 - In `<repo-root>/packages/cli/src/package_manager.rs` add your new template to the appropraite package manager in the `templates` method
+- Modify `<repo-root>/.scripts/generate-templates-matrix.js` and append the template name inside the template list for the appropriate package manager so the CI would run tests for it.
 
 ## Financial Contribution
 

diff --git a/.scripts/generate-templates-matrix.js b/.scripts/generate-templates-matrix.js
@@ -12,6 +12,8 @@ const nodeJsTemplates = [
   "vanilla",
   "next",
   "next-ts",
+  "preact",
+  "preact-ts",
 ];
 
 const matrix = [

diff --git a/README.md b/README.md
@@ -83,6 +83,8 @@ Currently supported template presets include:
 - `yew`
 - `next`
 - `next-ts`
+- `preact`
+- `preact-ts`
 
 You can use `.` for the project name to scaffold in the current directory.
 

diff --git a/packages/cli/fragments/_assets_/preact.svg b/packages/cli/fragments/_assets_/preact.svg
diff --git a/packages/cli/fragments/fragment-next-ts/src/pages/index.tsx b/packages/cli/fragments/fragment-next-ts/src/pages/index.tsx
@@ -53,10 +53,7 @@ function App() {
         </span>
       </div>
 
-      <p>
-        Click on the Tauri, Next, and React logos to learn more about each
-        framework.
-      </p>
+      <p>Click on the Tauri, Next, and React logos to learn more.</p>
 
       <div className="row">
         <div>

diff --git a/packages/cli/fragments/fragment-next/src/pages/index.jsx b/packages/cli/fragments/fragment-next/src/pages/index.jsx
@@ -53,10 +53,7 @@ function App() {
         </span>
       </div>
 
-      <p>
-        Click on the Tauri, Next, and React logos to learn more about each
-        framework.
-      </p>
+      <p>Click on the Tauri, Next, and React logos to learn more.</p>
 
       <div className="row">
         <div>

diff --git a/packages/cli/fragments/fragment-preact-ts/.vscode/extensions.json b/packages/cli/fragments/fragment-preact-ts/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}
diff --git a/packages/cli/fragments/fragment-preact-ts/README.md b/packages/cli/fragments/fragment-preact-ts/README.md
@@ -0,0 +1,7 @@
+# Tauri + Preact + Typescript
+
+This template should help get you started developing with Tauri, Preact and Typescript in Vite.
+
+## 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-preact-ts/_cta_manifest_ b/packages/cli/fragments/fragment-preact-ts/_cta_manifest_
@@ -0,0 +1,13 @@
+# Copyright 2019-2022 Tauri Programme within The Commons Conservancy
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-License-Identifier: MIT
+
+beforeDevCommand = {{pkg_manager_run_command}} dev
+beforeBuildCommand = {{pkg_manager_run_command}} build
+devPath = http://localhost:1420
+distDir = ../dist
+
+[files]
+preact.svg = src/assets/preact.svg
+vite.svg = public/vite.svg
+tauri.svg = public/tauri.svg
diff --git a/packages/cli/fragments/fragment-preact-ts/_gitignore b/packages/cli/fragments/fragment-preact-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-preact-ts/index.html b/packages/cli/fragments/fragment-preact-ts/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tauri + Preact + TS App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/cli/fragments/fragment-preact-ts/package.json b/packages/cli/fragments/fragment-preact-ts/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "{{package_name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^1.0.2",
+    "preact": "^10.10.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.14",
+    "@babel/core": "^7.12.10",
+    "@preact/preset-vite": "^2.3.0",
+    "@tauri-apps/cli": "^1.0.5",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.7"
+  }
+}
diff --git a/packages/cli/fragments/fragment-preact-ts/src/app.css b/packages/cli/fragments/fragment-preact-ts/src/app.css
@@ -0,0 +1,7 @@
+.logo.vite:hover {
+  filter: drop-shadow(0 0 2em #747bff);
+}
+
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
diff --git a/packages/cli/fragments/fragment-preact-ts/src/app.tsx b/packages/cli/fragments/fragment-preact-ts/src/app.tsx
@@ -0,0 +1,46 @@
+import { useState } from "preact/hooks";
+import preactLogo from "./assets/preact.svg";
+import { invoke } from "@tauri-apps/api/tauri";
+import "./app.css";
+
+export function App<FC>() {
+  const [greetMsg, setGreetMsg] = useState<string>("");
+  const [name, setName] = useState<string>("");
+
+  const greet = async () => {
+    setGreetMsg(await invoke("greet", { name }));
+  };
+
+  return (
+    <div class="container">
+      <h1>Welcome to Tauri!</h1>
+      <div class="row">
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/vite.svg" class="logo vite" alt="Vite logo" />
+        </a>
+        <a href="https://tauri.app" target="_blank">
+          <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
+        </a>
+        <a href="https://preactjs.com" target="_blank">
+          <img src={preactLogo} class="logo preact" alt="Preact logo" />
+        </a>
+      </div>
+
+      <p>Click on the Tauri, Vite, and Preact logos to learn more.</p>
+
+      <div class="row">
+        <div>
+          <input
+            id="greet-input"
+            onChange={(e) => setName(e.currentTarget.value)}
+            placeholder="Enter a name..."
+          />
+          <button type="button" onClick={() => greet()}>
+            Greet
+          </button>
+        </div>
+      </div>
+      <p>{greetMsg}</p>
+    </div>
+  );
+}
diff --git a/packages/cli/fragments/fragment-preact-ts/src/main.tsx b/packages/cli/fragments/fragment-preact-ts/src/main.tsx
@@ -0,0 +1,5 @@
+import { render } from "preact";
+import { App } from "./app";
+import "./style.css";
+
+render(<App />, document.getElementById("app") as HTMLElement);
diff --git a/packages/cli/fragments/fragment-preact-ts/src/preact.d.ts b/packages/cli/fragments/fragment-preact-ts/src/preact.d.ts
@@ -0,0 +1 @@
+import JSX = preact.JSX;
diff --git a/packages/cli/fragments/fragment-preact-ts/src/vite-env.d.ts b/packages/cli/fragments/fragment-preact-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/cli/fragments/fragment-preact-ts/tsconfig.json b/packages/cli/fragments/fragment-preact-ts/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/cli/fragments/fragment-preact-ts/tsconfig.node.json b/packages/cli/fragments/fragment-preact-ts/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/cli/fragments/fragment-preact-ts/vite.config.ts b/packages/cli/fragments/fragment-preact-ts/vite.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [preact()],
+
+  // 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/fragments/fragment-preact/.vscode/extensions.json b/packages/cli/fragments/fragment-preact/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}
diff --git a/packages/cli/fragments/fragment-preact/README.md b/packages/cli/fragments/fragment-preact/README.md
@@ -0,0 +1,7 @@
+# Tauri + Preact
+
+This template should help get you started developing with Tauri and Preact in Vite.
+
+## 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-preact/_cta_manifest_ b/packages/cli/fragments/fragment-preact/_cta_manifest_
@@ -0,0 +1,13 @@
+# Copyright 2019-2022 Tauri Programme within The Commons Conservancy
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-License-Identifier: MIT
+
+beforeDevCommand = {{pkg_manager_run_command}} dev
+beforeBuildCommand = {{pkg_manager_run_command}} build
+devPath = http://localhost:1420
+distDir = ../dist
+
+[files]
+preact.svg = src/assets/preact.svg
+vite.svg = public/vite.svg
+tauri.svg = public/tauri.svg
diff --git a/packages/cli/fragments/fragment-preact/_gitignore b/packages/cli/fragments/fragment-preact/_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-preact/index.html b/packages/cli/fragments/fragment-preact/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tauri + Preact App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/packages/cli/fragments/fragment-preact/package.json b/packages/cli/fragments/fragment-preact/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "{{package_name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^1.0.2",
+    "preact": "^10.10.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@preact/preset-vite": "^2.3.0",
+    "@tauri-apps/cli": "^1.0.5",
+    "vite": "^3.0.7"
+  }
+}
diff --git a/packages/cli/fragments/fragment-preact/src/app.css b/packages/cli/fragments/fragment-preact/src/app.css
@@ -0,0 +1,7 @@
+.logo.vite:hover {
+  filter: drop-shadow(0 0 2em #747bff);
+}
+
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}