tauri-apps · amrbashir · Aug 30, 2022 · Aug 28, 2022 · Aug 28, 2022 · Aug 28, 2022
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-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
+
+devCommand = {{pkg_manager_run_command}} dev
+buildCommand = {{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>Vite + Preact + TS</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,22 @@
+{
+  "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": {
+    "@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,36 @@
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 1em #646cffaa);
+}
+
+.logo.preact:hover {
+  filter: drop-shadow(0 0 1em #673ab8aa);
+}
+.logo.tauri:hover {
+  filter: drop-shadow(0 0 2em #fff41daa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.row {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
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,37 @@
+import { useState } from "preact/hooks";
+import preactLogo from "./assets/preact.svg";
+import "./app.css";
+
+export function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <div className="row">
+          <a href="https://tauri.app" target="_blank">
+            <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
+          </a>
+          <a href="https://vitejs.dev" target="_blank">
+            <img src="/vite.svg" className="logo" alt="Vite logo" />
+          </a>
+          <a href="https://preactjs.com" target="_blank">
+            <img src={preactLogo} className="logo preact" alt="Preact logo" />
+          </a>
+        </div>
+      </div>
+      <h1>Tauri + Vite + Preact</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/app.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Tauri, Vite and Preact logos to learn more
+      </p>
+    </>
+  );
+}
diff --git a/packages/cli/fragments/fragment-preact-ts/src/index.css b/packages/cli/fragments/fragment-preact-ts/src/index.css
@@ -0,0 +1,70 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
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 './index.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,28 @@
+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
+
+devCommand = {{pkg_manager_run_command}} dev
+buildCommand = {{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>Vite + Preact</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>