build: use Vite instead of Craco / CRA as a build system

mario-zelger · mario-zelger · commit 2893b7d13eca · 2024-05-12T00:07:17.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
diff --git a/craco.config.js b/craco.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Hering / Sardine / Sardina" />
+
+    <link rel="manifest" href="/manifest.json" />
+
+    <title></title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -4,16 +4,16 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "BROWSER=none PORT=3001 craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "craco eject"
+    "start": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "eslintConfig": {
     "extends": [
       "react-app"
     ]
   },
+  "type": "module",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -44,14 +44,14 @@
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
-    "@craco/craco": "^7.1.0",
     "@types/node": "^20.11.16",
     "@types/react": "^18.2.54",
     "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
-    "craco-less": "^3.0.1",
-    "react-scripts": "^5.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "less": "^4.2.0",
     "typescript": "~5.1.0",
-    "webpack": "^5.0.0"
+    "vite": "^5.2.11",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/pages/calendar/components/IcsDownload.tsx b/src/pages/calendar/components/IcsDownload.tsx
@@ -1,9 +1,10 @@
-import React, {useEffect, useState} from 'react'
-import {TaskT} from './Task'
-import {ChapterT} from '../../section/components/Chapter'
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import {useTranslation} from "react-i18next"
-import {faCalendarDays} from "@fortawesome/free-solid-svg-icons";
+import React, { useEffect, useState } from 'react'
+import { TaskT } from './Task'
+import { ChapterT } from '../../section/components/Chapter'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation } from "react-i18next"
+import { faCalendarDays } from "@fortawesome/free-solid-svg-icons";
+import ics, { EventAttributes } from "ics";
 
 type Props = {
     tasks: TaskT[]
@@ -23,16 +24,14 @@ function buildLinks(task: TaskT): string {
 }
 
 async function generateIcsLink(tasks: TaskT[], calendarTitlePrefix: string): Promise<string> {
-    const ics = require('ics')
-
     const events = tasks.map(function (task) {
         const deadline = task.deadline
         const alarms = []
 
         alarms.push({
             action: 'display',
             description: buildDescription(task),
-            trigger: {hours: 1, before: true},
+            trigger: { hours: 1, before: true },
         })
 
         return {
@@ -44,7 +43,7 @@ async function generateIcsLink(tasks: TaskT[], calendarTitlePrefix: string): Pro
             status: 'CONFIRMED',
             busyStatus: 'FREE',
             alarms: alarms
-        }
+        } as EventAttributes
     })
 
     return new Promise((resolve, reject) => {
@@ -59,7 +58,7 @@ async function generateIcsLink(tasks: TaskT[], calendarTitlePrefix: string): Pro
                 return
             }
 
-            const data = new Blob([value], {type: 'text/calendar'});
+            const data = new Blob([value], { type: 'text/calendar' });
             const link = window.URL.createObjectURL(data);
             resolve(link)
         })
@@ -68,7 +67,7 @@ async function generateIcsLink(tasks: TaskT[], calendarTitlePrefix: string): Pro
 
 function IcsDownload(props: Props) {
 
-    const {t} = useTranslation();
+    const { t } = useTranslation();
     const [downloadLink, setDownloadLink] = useState<string>();
 
     useEffect(() => {
@@ -96,7 +95,7 @@ function IcsDownload(props: Props) {
 
     return (
         <a className="download-btn" id="ics-download"
-           download={t('calendarPage.ics.filename', {calendarTitlePrefix: spacedCalendarPrefix})}
+           download={t('calendarPage.ics.filename', { calendarTitlePrefix: spacedCalendarPrefix })}
            href={downloadLink}>
             <FontAwesomeIcon icon={faCalendarDays}/>
             {t('calendarPage.ics.download')}
diff --git a/src/pages/search/components/SearchForm.tsx b/src/pages/search/components/SearchForm.tsx
@@ -1,14 +1,14 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import {useTranslation} from "react-i18next"
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from "react-i18next"
 import Loading from '../../../components/loading/Loading'
-import {ChapterT} from '../../section/components/Chapter';
+import { ChapterT } from '../../section/components/Chapter';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import {LinkComponent} from '../../../helper/MarkdownComponents';
+import { LinkComponent } from '../../../helper/MarkdownComponents';
 import SearchInput from './SearchInput';
-import {Link, useSearchParams} from "react-router-dom";
-import {SearchHelper} from "../../../helper/SearchHelper";
-import {SectionT} from "../../section/SectionPage";
+import { Link, useSearchParams } from "react-router-dom";
+import { SearchHelper } from "../../../helper/SearchHelper";
+import { SectionT } from "../../section/SectionPage";
 
 type Props = {
     sections: SectionT[]
@@ -23,15 +23,15 @@ type SearchResult = {
 
 function SearchForm(props: Props) {
 
-    const {t} = useTranslation()
+    const { t } = useTranslation()
     const [searchParams, setSearchParams] = useSearchParams();
 
     const isQueryLoaded = useRef<boolean>(false);
     const [keyword, setKeyword] = useState<string>('')
     const [searchResults, setSearchResults] = useState<SearchResult[]>([])
     const [isLoadingResults, setIsLoadingResults] = useState<boolean>(false)
 
-    const timeoutId = useRef<NodeJS.Timeout | undefined>();
+    const timeoutId = useRef<number | undefined>();
     const searchableSectionChapters = useRef<ChapterT[]>(props.sections
         .reduce((chapters: ChapterT[], currentSection: SectionT) => chapters.concat(currentSection.chapters), []))
 
@@ -97,9 +97,9 @@ function SearchForm(props: Props) {
 
         setKeyword(keyword)
         const queryParams = keyword.length > 0
-            ? {'keyword': keyword}
+            ? { 'keyword': keyword }
             : undefined;
-        setSearchParams(queryParams, {replace: true})
+        setSearchParams(queryParams, { replace: true })
 
         executeSearch(keyword)
     }
@@ -129,7 +129,7 @@ function SearchForm(props: Props) {
 
                 return <div>{t('searchPage.noResults')}</div>
             }
-            return <div> {t('searchPage.noKeyword', {amountOfCharacters: 3})}</div>
+            return <div> {t('searchPage.noKeyword', { amountOfCharacters: 3 })}</div>
         }
         return null
     }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
+    "types": ["vite/client"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
diff --git a/vite-env.d.ts b/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import viteTsconfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+    base: '',
+    plugins: [react(), viteTsconfigPaths()],
+    server: {
+        open: false,
+        port: 3001,
+    },
+    css: {
+        preprocessorOptions: {
+            less: {},
+        },
+    }
+})
diff --git a/yarn.lock b/yarn.lock
