Fix #36 - added ESlint config with ts-standard + svelte support

.eslintrc.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: 'standard-with-typescript',
+  parser: '@typescript-eslint/parser',
+  parserOptions: { // add these parser options
+    project: ['./tsconfig.json']
+  },
+  plugins: [
+    'svelte3',
+    '@typescript-eslint'
+  ],
+  overrides: [
+    {
+      files: [
+        '**/*.svelte'
+      ],
+      processor: 'svelte3/svelte3'
+    }
+  ],
+  settings: {
+    'svelte3/typescript': true
+  },
+  ignorePatterns: ['node_modules/*', 'dist/*', 'vite-env.d.ts']
+}

package.json

@@ -8,7 +8,8 @@
     "build": "vite build",
     "build:github": "vite build --base=/chatgpt-web/",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint . --fix"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^5.0.0",
@@ -19,6 +20,8 @@
     "bulma": "^0.9.4",
     "bulma-prefers-dark": "^0.1.0-beta.1",
     "copy-to-clipboard": "^3.3.3",
+    "eslint-config-standard-with-typescript": "^34.0.1",
+    "eslint-plugin-svelte3": "^4.0.0",
     "postcss": "^8.4.21",
     "sass": "^1.59.2",
     "svelte": "^3.55.1",

src/App.svelte

@@ -12,9 +12,9 @@
   $: apiKey = $apiKeyStorage;
 
   // Check if the API key is passed in as a "key" query parameter - if so, save it
-  const urlParams = new URLSearchParams(window.location.search);
+  const urlParams: URLSearchParams = new URLSearchParams(window.location.search);
   if (urlParams.has("key")) {
-    apiKeyStorage.set(urlParams.get("key")!);
+    apiKeyStorage.set(urlParams.get("key") as string);
   }
 </script>
 

src/lib/Home.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { addChat, apiKeyStorage } from "./Storage.svelte";
+  import { apiKeyStorage } from './Storage.svelte'
 
-  $: apiKey = $apiKeyStorage;
+  $: apiKey = $apiKeyStorage
 </script>
 
 <article class="message">
@@ -22,7 +22,7 @@
     <form
       class="field has-addons has-addons-right"
       on:submit|preventDefault={(event) => {
-        apiKeyStorage.set(event.target[0].value);
+        apiKeyStorage.set(event.target[0].value)
       }}
     >
       <p class="control is-expanded">
@@ -52,7 +52,7 @@
   <article class="message is-info">
     <div class="message-body">
       Select an existing chat on the sidebar, or
-      <a href={"#/chat/new"}>create a new chat</a>
+      <a href={'#/chat/new'}>create a new chat</a>
     </div>
   </article>
 {/if}

src/lib/Navbar.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import logo from "../assets/logo.svg";
+  import logo from '../assets/logo.svg'
 </script>
 
 <nav class="navbar" aria-label="main navigation">
   <div class="navbar-brand">
-    <a class="navbar-item" href={"#/"}>
+    <a class="navbar-item" href={'#/'}>
       <img src={logo} alt="ChatGPT-web" width="28" height="28" />
       <p class="ml-2 is-size-4 has-text-weight-bold">ChatGPT-web</p>
     </a>

src/lib/NewChat.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { addChat } from "./Storage.svelte";
+  import { addChat } from './Storage.svelte'
   import { replace } from 'svelte-spa-router'
 
   // Create the new chat instance then redirect to it
-  const chatId = addChat();
-  replace(`/chat/${chatId}`);
+  const chatId = addChat()
+  replace(`/chat/${chatId}`)
 </script>

src/main.ts

@@ -1,8 +1,8 @@
-import "./app.scss";
-import App from "./App.svelte";
+import './app.scss'
+import App from './App.svelte'
 
 const app = new App({
-  target: document.getElementById("app"),
-});
+  target: document.getElementById('app') as HTMLElement
+})
 
-export default app;
+export default app

src/routes.ts

@@ -1,6 +1,6 @@
-import Home from "./lib/Home.svelte";
-import Chat from "./lib/Chat.svelte";
-import NewChat from "./lib/NewChat.svelte";
+import Home from './lib/Home.svelte'
+import Chat from './lib/Chat.svelte'
+import NewChat from './lib/NewChat.svelte'
 
 export default {
   '/': Home,
@@ -8,5 +8,5 @@ export default {
   '/chat/new': NewChat,
   '/chat/:chatId': Chat,
 
-    '*': Home,
-};
+  '*': Home
+}

svelte.config.js

@@ -3,5 +3,5 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 export default {
   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
   // for more information about preprocessors
-  preprocess: vitePreprocess(),
+  preprocess: vitePreprocess()
 }

tsconfig.json

@@ -5,6 +5,7 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "resolveJsonModule": true,
+    "strictNullChecks": true,
     /**
      * Typecheck JS in `.svelte` and `.js` files by default.
      * Disable checkJs if you'd like to use dynamic types in JS.
@@ -15,6 +16,6 @@
     "checkJs": true,
     "isolatedModules": true
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "vite.config.ts", "svelte.config.js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,28 +1,28 @@
-import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 
-import purgecss from "@fullhuman/postcss-purgecss";
+import purgecss from '@fullhuman/postcss-purgecss'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode, ssrBuild }) => {
   // Only run PurgeCSS in production builds
-  if (command === "build") {
+  if (command === 'build') {
     return {
       plugins: [svelte()],
       css: {
         postcss: {
           plugins: [
             purgecss({
-              content: ["./**/*.html", "./**/*.svelte"],
-              safelist: ["pre", "code"],
-            }),
-          ],
-        },
-      },
-    };
+              content: ['./**/*.html', './**/*.svelte'],
+              safelist: ['pre', 'code']
+            })
+          ]
+        }
+      }
+    }
   } else {
     return {
-      plugins: [svelte()],
-    };
+      plugins: [svelte()]
     }
-});
+  }
+})