first commit

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "plugins": ["prettier-plugin-svelte"]
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode",
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "svelte.enable-ts-plugin": true
+}

README.md

@@ -0,0 +1,7 @@
+# Tauri + SvelteKit + TypeScript
+
+This template should help get you started developing with Tauri, SvelteKit and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "moe-launcher",
+  "version": "0.1.0",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "tauri": "tauri"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-shell": "^2"
+  },
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.2.4",
+    "@melt-ui/pp": "^0.3.2",
+    "@melt-ui/svelte": "^0.86.0",
+    "@sveltejs/adapter-static": "^3.0.5",
+    "@sveltejs/kit": "^2.7.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tauri-apps/cli": "^2",
+    "@unocss/extractor-svelte": "^0.64.0",
+    "@unocss/postcss": "^0.64.0",
+    "@unocss/reset": "^0.64.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.7",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tslib": "^2.8.0",
+    "typescript": "^5.5.0",
+    "unocss": "^0.64.0",
+    "vite": "^5.4.10"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+import unoCSS from "@unocss/postcss"
+
+export default {
+  plugins: [
+    unoCSS()
+  ]
+}

src-tauri/.gitignore

@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas

src-tauri/Cargo.toml

@@ -0,0 +1,25 @@
+[package]
+name = "moe-launcher"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[lib]
+# The `_lib` suffix may seem redundant but it is necessary
+# to make the lib name unique and wouldn't conflict with the bin name.
+# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
+name = "moe_launcher_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-shell = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "shell:allow-open"
+  ]
+}

src-tauri/src/lib.rs

@@ -0,0 +1,14 @@
+// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}! You've been greeted from Rust!", name)
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_shell::init())
+        .invoke_handler(tauri::generate_handler![greet])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

src-tauri/src/main.rs

@@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    moe_launcher_lib::run()
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "moe-launcher",
+  "version": "0.1.0",
+  "identifier": "com.moe-launcher.app",
+  "build": {
+    "beforeDevCommand": "bun run dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "bun run build",
+    "frontendDist": "../build"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "moe-launcher",
+        "width": 800,
+        "height": 600
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

src/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tauri + SvelteKit + Typescript App</title>
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

src/lib/components/icons/Home.svelte

@@ -0,0 +1 @@
+<div i="carbon-home"></div>

src/lib/components/icons/Setting.svelte

@@ -0,0 +1,2 @@
+
+<div i="carbon-settings"></div>

src/lib/components/icons/index.ts

@@ -0,0 +1,3 @@
+import Home from "./Home.svelte";
+import Setting from "./Setting.svelte";
+export { Home, Setting };

src/lib/router.svelte.ts

@@ -0,0 +1,49 @@
+import { type Snippet } from "svelte";
+import { Home, Setting } from "./components/icons";
+
+export const state = $state({
+  current: 0,
+});
+
+interface Router {
+  path: string;
+  title: string;
+  id: number;
+  icon: Snippet;
+}
+
+function createRouter(
+  path: string,
+  title: string,
+  id: number,
+  icon: Snippet,
+): Router {
+  return {
+    path,
+    title,
+    id,
+    icon,
+  };
+}
+
+export const routers: Router[] = [
+  createRouter("/", "Home", 0, Home as any),
+  createRouter("/setting", "Setting", 1, Setting as any),
+];
+
+const goto = (id: number) => {
+  state.current = id;
+  window.location.pathname = routers[id].path;
+};
+
+export const onMount = () => {
+  let idp = routers.findIndex((r) => r.path === window.location.pathname);
+  if (idp === -1) idp = 0;
+  state.current = idp;
+};
+
+export function router<Node extends Element>(node: Node, router: Router) {
+  node.addEventListener("click", () => {
+    state.current = router.id;
+  });
+}

src/lib/styles/shared.postcss

@@ -0,0 +1,58 @@
+@uncss;
+
+html,
+body {
+  @apply bg-gray-950 w-full h-full;
+}
+
+* {
+  @apply font-[SarasaUiSC] text-gray-300;
+}
+
+.app {
+  @apply block w-full h-full;
+}
+
+@font-face {
+  font-family: "SarasaUiSC";
+  src: url("./font/SarasaUiSC-SemiBold.ttf") format("truetype");
+  font-weight: 500 600;
+}
+
+@font-face {
+  font-family: "SarasaUiSC";
+  src: url("./font/SarasaUiSC-SemiBoldItalic.ttf") format("truetype");
+  font-weight: 500 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "SarasaUiSC";
+  src: url("./font/SarasaUiSC-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "SarasaUiSC";
+  src: url("./font/SarasaUiSC-Light.ttf") format("truetype");
+  font-weight: 200 300;
+}
+
+@font-face {
+  font-family: "SarasaUiSC";
+  src: url("./font/SarasaUiSC-ExtraLight.ttf") format("truetype");
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: "SarasaUiSC";
+  src: url("./font/SarasaUiSC-ExtraLightItalic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "SarasaUiSC";
+  src: url("./font/SarasaUiSC-Bold.ttf") format("truetype");
+  font-weight: 700 800;
+}

src/routes/+layout.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import "uno.css";
+  import "@unocss/reset/tailwind.css";
+  import "$lib/styles/shared.postcss";
+  import { crossfade } from "svelte/transition";
+  import {
+    routers,
+    onMount as mount,
+    state as routerState,
+    router as routerEffect,
+  } from "$lib/router.svelte";
+  import { onMount } from "svelte";
+  let { children } = $props();
+  const [fadeIn, fadeOut] = crossfade({ duration: (d) => Math.sqrt(d * 500) });
+  onMount(mount);
+</script>
+
+<div id="app">
+  <nav bg-gray-900>
+    <ul flex flex-col>
+      {#each routers as router}
+        <li text-4xl relative m-1>
+          <a relative z-1 m-1 use:routerEffect={router} href={router.path}>
+            {@render router.icon()}
+          </a>
+          {#if router.id == routerState.current}
+            <!-- ship -->
+            <div
+              bg-gray-800
+              z-0
+              absolute
+              top-0
+              bottom-0
+              right-0
+              left-0
+              in:fadeIn={{ key: "ship" }}
+              out:fadeOut={{ key: "ship" }}
+            ></div>
+            <!-- ship -->
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </nav>
+  <main>
+    {@render children()}
+  </main>
+</div>
+
+<style lang="postcss">
+  #app {
+    @apply grid grid-cols-[auto_1fr] w-full h-full;
+  }
+</style>

src/routes/+layout.ts

@@ -0,0 +1,5 @@
+// Tauri doesn't have a Node.js server to do proper SSR
+// so we will use adapter-static to prerender the app (SSG)
+// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
+export const prerender = true;
+export const ssr = false;

src/routes/setting/+page.svelte

@@ -0,0 +1 @@
+<p>Hello Setting</p>

src/shims.d.ts

@@ -0,0 +1,5 @@
+declare namespace svelteHTML {
+  import type { AttributifyAttributes } from '@unocss/preset-attributify'
+
+  type HTMLAttributes = AttributifyAttributes
+}

svelte.config.js

@@ -0,0 +1,14 @@
+import {preprocessMeltUI, sequence} from "@melt-ui/pp";
+// Tauri doesn't have a Node.js server to do proper SSR
+// so we will use adapter-static to prerender the app (SSG)
+// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
+import adapter from "@sveltejs/adapter-static";
+import {vitePreprocess} from "@sveltejs/vite-plugin-svelte";
+/** @type {import('@sveltejs/kit').Config}*/
+const config = {
+  preprocess: sequence([vitePreprocess(), preprocessMeltUI()]),
+  kit: {
+    adapter: adapter()
+  }
+};
+export default config;

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}

uno.config.ts

@@ -0,0 +1,15 @@
+import {
+  defineConfig,
+  presetUno,
+  presetAttributify,
+  presetIcons,
+} from "unocss";
+import extractorSvelte from "@unocss/extractor-svelte";
+
+export default defineConfig({
+  extractors: [extractorSvelte()],
+  presets: [presetUno(), presetAttributify(), presetIcons()],
+  content: {
+    filesystem: ["**/*.{html,js,ts,jsx,tsx,svelte}"],
+  },
+});

vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+import unoCSS from "unocss/vite";
+import extractorSvelte from "@unocss/extractor-svelte";
+import { sveltekit } from "@sveltejs/kit/vite";
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => ({
+  plugins: [
+    sveltekit(),
+    unoCSS(),
+  ],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: "ws",
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      // 3. tell vite to ignore watching `src-tauri`
+      ignored: ["**/src-tauri/**"],
+    },
+  },
+}));