Migrated to Vite + React SWC

alundiak · Oct 27, 2024 · 40d55d5 · 40d55d5
1 parent 2461ec1
commit 40d55d5
Show file tree

Hide file tree

Showing 27 changed files with 3,704 additions and 91 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,9 @@
 ### Angular ###
 ## Angular ##
 # compiled output
-dist/
+dist
+dist-ssr
+*.local
 tmp/
 app/**/*.js
 app/**/*.js.map
@@ -234,6 +236,8 @@ dist
 
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
+.vscode/*
+!.vscode/extensions.json
 
 # yarn v2
 .yarn/cache

diff --git a/README.md b/README.md
@@ -48,6 +48,8 @@ Public API https://restcountries.com/v3.1/all returns `250` records:
 
 - Maybe I will use React/TypeScript or at least Bootstrap CSS, but not sure if worth it.
 
+- Migrated to React/Typescript setup via `npm create vite@latest my-react-app -- --template react-swc-ts`
+
 
 ## Local run
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/index.css b/index.css
@@ -1,79 +1 @@
-body {
-  /* display: flex;
-  justify-content: center;
-  align-items: center; */
-  height: 100vh;
-  margin: 10px;
-}
 
-.flags-block-container {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-
-.flags-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* padding: 10px; */
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  /* width: 100px; */
-}
-
-.flag {
-  font-size: 60px;
-
-  /* margin-bottom: 10px; */
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.country {
-  font-size: 5px;
-  text-align: center;
-}
-
-.flags-block.notUnMember {
-  border: 1px dashed red;
-}
-
-#old-flags-container {
-  div.flag-block {
-    display: inline-block;
-
-    span.flag {
-      font-size: 50px;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    span.country {
-      font-size: 5px;
-    }
-  }
-}
-
-
-
-.toast {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 10px 20px;
-  border-radius: 5px;
-  opacity: 1;
-  transition: opacity 0.5s;
-}
-
-.fade-out {
-  opacity: 0;
-}
diff --git a/index.html b/index.html
@@ -6,13 +6,10 @@
   <meta charset="utf-8" />
   <link rel="icon" type="image/x-icon" href="my-favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="stylesheet" href="./index.css" />
 </head>
 
 <body>
-  <h2 id="flags-count"></h2>
-  <p></p>
-  <div id="flags-container"></div>
+  <!-- <script src="./f1.js"></script> -->
 
   <!-- <div class="flags-block-container">
     <div class="flags-block">
@@ -29,9 +26,8 @@ <h2 id="flags-count"></h2>
     </div>
   </div> -->
 
-  <!-- <script type="text/javascript" src="index.js"></script> -->
-  <!-- <script src="./f1.js"></script> -->
-  <script src="./flags.js"></script>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
 </body>
 
 </html>