Improved vite setup with sass

Signed-off-by: Daniel Kastl <[email protected]>
Georepublic · Oct 3, 2024 · d85bd64 · d85bd64
1 parent da77bfb
commit d85bd64
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -4,49 +4,13 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:,">
+  <link rel="stylesheet" href="./src/styles.scss">
   <title>Meshtastic Configurator</title>
-  <style>
-    fieldset {
-      margin-bottom: 20px;
-      padding: 10px;
-      max-width: 760px;
-    }
-
-    .form-group {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
-    }
-
-    label {
-      font-weight: bold;
-      width: 240px;
-    }
-
-    input, select, button {
-      flex-grow: 1;
-      padding: 8px;
-      font-size: 14px;
-    }
-
-    button {
-      width: auto;
-    }
-
-    button#generateConfig {
-      background-color: #4CAF50;
-      color: white;
-      border: #4CAF50 1px solid;
-      font-size: large;
-    }
-  </style>
 </head>
 <body>
   <h1>Meshtastic QR Code Generator</h1>
 
   <form id="meshtasticForm">
-    <!-- Generate Config and QR code -->
     <fieldset>
       <legend>Generate Configuration</legend>
 

diff --git a/package.json b/package.json
@@ -12,10 +12,12 @@
     "typescript": "^5.6.2",
     "vite": "^5.4.8"
   },
+  "type": "module",
   "dependencies": {
     "@meshtastic/js": "^2.3.7-5",
     "base64-js": "^1.5.1",
-    "qrcode": "^1.5.4"
+    "qrcode": "^1.5.4",
+    "sass": "^1.79.4"
   },
   "scripts": {
     "dev": "vite",

diff --git a/src/styles.scss b/src/styles.scss
@@ -0,0 +1,34 @@
+fieldset {
+  margin-bottom: 20px;
+  padding: 10px;
+  max-width: 760px;
+}
+
+.form-group {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+label {
+  font-weight: bold;
+  width: 240px;
+}
+
+input, select, button {
+  flex-grow: 1;
+  padding: 8px;
+  font-size: 14px;
+}
+
+button {
+  width: auto;
+}
+
+button#generateConfig {
+  background-color: #4CAF50;
+  color: white;
+  border: #4CAF50 1px solid;
+  font-size: large;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,15 +1,17 @@
 {
   "compilerOptions": {
-    "target": "ES6",                        /* Specify ECMAScript target version */
-    "module": "ES6",                        /* Specify module code generation */
-    "strict": true,                         /* Enable strict type-checking options */
-    "esModuleInterop": true,                /* Enables emit interoperability between CommonJS and ES Modules */
-    "skipLibCheck": true,                   /* Skip type checking of all declaration files */
+    "target": "ESNext",
+    "module": "ESNext",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "outDir": "./dist",                     /* Redirect output structure to the dist folder */
-    "rootDir": "./src",                     /* Specify the root directory of input files */
-    "moduleResolution": "node",             /* Resolve modules in the node_modules directory */
-    "sourceMap": true                       /* Generates .map files for easier debugging */
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules"]

diff --git a/vite.config.mts b/vite.config.mts
@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: '/meshtastic-configurator/',
+});
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/yarn.lock b/yarn.lock
@@ -280,6 +280,13 @@ chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chokidar@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.1.tgz#4a6dff66798fb0f72a94f616abbd7e1a19f31d41"
+  integrity sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==
+  dependencies:
+    readdirp "^4.0.1"
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -537,6 +544,11 @@ [email protected]:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
@@ -659,6 +671,11 @@ qs@^6.4.0:
   dependencies:
     side-channel "^1.0.6"
 
+readdirp@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.0.1.tgz#b2fe35f8dca63183cd3b86883ecc8f720ea96ae6"
+  integrity sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -716,6 +733,15 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.79.4:
+  version "1.79.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.79.4.tgz#f9c45af35fbeb53d2c386850ec842098d9935267"
+  integrity sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==
+  dependencies:
+    chokidar "^4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 [email protected]:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/secure-compare/-/secure-compare-3.0.1.tgz#f1a0329b308b221fae37b9974f3d578d0ca999e3"
@@ -753,7 +779,7 @@ side-channel@^1.0.6:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
-source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==