feat: use svelte instead of react (#10)

narwhal-apps · Nov 20, 2022 · a365b67 · a365b67
1 parent e4ed065
commit a365b67
Show file tree

Hide file tree

Showing 51 changed files with 1,347 additions and 1,301 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -1,4 +1,4 @@
-name: "publish"
+name: "Publish"
 on:
   push:
     branches:
@@ -34,7 +34,7 @@ jobs:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         tagName: gitbar-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version
-        releaseName: Gitbar v__VERSION__"
-        releaseBody: "See the assets to download this version and install."
+        releaseName: Gitbar v__VERSION__
+        releaseBody: ""
         releaseDraft: true
         prerelease: false
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.0
+### Features
+* rework application from react to svelte (reduce bundle size)
+* add `settings` fetch interval (define how long between updating review list)
+
 ## 0.1.1
 * remove allow all in tauri config
 

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <title>Gitbar</title>
   </head>
   <body class="bg-white text-slate-500 antialiased dark:bg-slate-900 dark:text-slate-400">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,29 +1,30 @@
 {
   "name": "gitbar",
   "private": true,
-  "version": "0.1.1",
+  "version": "0.2.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "tauri:dev": "tauri dev",
-    "tauri:build": "tauri build"
+    "tauri:build": "tauri build",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@heroicons/react": "^2.0.13",
     "@tauri-apps/api": "^1.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.3"
+    "svelte": "^3.53.1"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.2.0",
     "@tauri-apps/cli": "^1.2.0",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.18",
+    "svelte-check": "^2.9.2",
+    "svelte-preprocess": "^4.10.7",
     "tailwindcss": "^3.2.3",
+    "tslib": "^2.4.1",
     "typescript": "^4.8.2",
     "vite": "^3.0.9"
   }

diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+const tailwindcss = require('tailwindcss')
+const autoprefixer = require('autoprefixer')
+
+module.exports = {
+  plugins: [tailwindcss(), autoprefixer],
+}
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,10 +1,10 @@
 [package]
 name = "gitbar"
-version = "0.1.1"
+version = "0.2.0"
 description = "Github review counter"
 authors = ["mikael.kristiansson"]
-license = ""
-repository = ""
+license = "MIT"
+repository = "https://github.com/mikaelkristiansson/gitbar"
 default-run = "gitbar"
 edition = "2021"
 rust-version = "1.57"
@@ -19,7 +19,7 @@ serde_json = "1.0"
 auto-launch = "0.3"
 thiserror = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["api-all", "icon-png", "system-tray"] }
+tauri = { version = "1.2", features = ["http-request", "icon-png", "notification-all", "shell-open", "system-tray"] }
 
 [target.'cfg(target_os = "macos")'.dependencies]
 cocoa = "0.24"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -8,17 +8,19 @@
   },
   "package": {
     "productName": "Gitbar",
-    "version": "0.1.1"
+    "version": "0.2.0"
   },
   "tauri": {
     "allowlist": {
       "http": {
-        "all": true,
         "request": true,
         "scope": ["https://**"]
       },
       "notification": {
         "all": true
+      },
+      "shell": {
+        "open": true
       }
     },
     "bundle": {

diff --git a/src/App.svelte b/src/App.svelte
@@ -0,0 +1,10 @@
+<script>
+  import AuthGuard from './components/AuthGuard.svelte';
+  import Footer from './components/Footer.svelte';
+  import Reviews from './components/Reviews.svelte';
+</script>
+
+<AuthGuard>
+  <Reviews />
+  <Footer />
+</AuthGuard>
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/index.css → src/app.css b/src/index.css → src/app.css
@@ -1,6 +1,20 @@
+/* Write your global styles here, in PostCSS syntax */
 @tailwind base;
-
-[multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], select, textarea {
+[multiple],
+[type='date'],
+[type='datetime-local'],
+[type='email'],
+[type='month'],
+[type='number'],
+[type='password'],
+[type='search'],
+[type='tel'],
+[type='text'],
+[type='time'],
+[type='url'],
+[type='week'],
+select,
+textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -17,6 +31,5 @@
   --tw-shadow: 0 0 #0000;
   outline: none;
 }
-
 @tailwind components;
 @tailwind utilities;
diff --git a/src/components/AuthGuard.svelte b/src/components/AuthGuard.svelte
@@ -0,0 +1,12 @@
+<script>
+  import Login from './Login.svelte';
+  import { auth } from '../lib/auth';
+</script>
+
+{#if $auth.account}
+  <slot />
+  <!-- wait in case there's a session that we need to verify -->
+{:else}
+  <!-- user is a guest. Show a login widget instead of the current page. -->
+  <Login />
+{/if}