Migrating from create-react-app to vite (#305)

* Remove: cross-env, node-sass, react-scripts * Rename env from CRA prefix to vite * Update eslint * Add vite config * Move and edit index.html as it's now handles as an entry by vite * Convert dev server to esm and fix process env that did not work earlier * Convert makefsdata to esm * Change extension to jsx * Calculate correctly in sass * Remove import that does not exist * Add support for bootstrap-icons * Use correct env after changing to vite * disable no-extra-boolean-cast eslint rule
OpenStickCommunity · Jun 13, 2023 · 62030d5 · 62030d5
1 parent 460bb26
commit 62030d5
Show file tree

Hide file tree

Showing 36 changed files with 6,858 additions and 19,026 deletions.
diff --git a/www/.env b/www/.env
@@ -1,4 +1,3 @@
-GENERATE_SOURCEMAP=false
-REACT_APP_CURRENT_VERSION=v0.7.2
-REACT_APP_GP2040_BOARD=pico
-REACT_APP_GP2040_CONTROLLER=pico
+VITE_CURRENT_VERSION=v0.7.2
+VITE_GP2040_BOARD=pico
+VITE_GP2040_CONTROLLER=pico
diff --git a/www/.eslintrc.yml b/www/.eslintrc.yml
@@ -1,17 +1,24 @@
-env:
-  browser: true
-  es2021: true
-extends:
-  - react-app
-  # - eslint:recommended
-  # - plugin:react/recommended
-overrides: []
-parserOptions:
-  ecmaVersion: latest
-  sourceType: module
-plugins:
-  - react
-rules:
-  no-template-curly-in-string: off
-  no-unused-vars: off
-  react-hooks/exhaustive-deps: off
+env:
+  node: true
+  browser: true
+  es2021: true
+extends:
+  - eslint:recommended
+  - plugin:react/recommended
+  - plugin:react-hooks/recommended
+overrides: []
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module
+settings:
+  react:
+    version: "18.2"
+plugins:
+  - react-refresh
+rules:
+  react-refresh/only-export-components: warn
+  react/prop-types: off
+  no-template-curly-in-string: off
+  no-unused-vars: off
+  react-hooks/exhaustive-deps: off
+  no-extra-boolean-cast: off
diff --git a/www/index.html b/www/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta
+			name="description"
+			content="Web configuration application for GP2040-CE gamepad firmware"
+		/>
+		<link rel="icon" href="/favicon.ico" />
+		<link rel="apple-touch-icon" href="/logo.png" />
+		<!--
+			manifest.json provides metadata used when your web app is installed on a
+			user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+		-->
+		<link rel="manifest" href="/manifest.json" />
+
+		<title>GP2040-CE Configurator</title>
+	</head>
+
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<script type="module" src="/src/index.jsx"></script>
+	</body>
+</html>
diff --git a/www/makefsdata.js b/www/makefsdata.js
@@ -1,10 +1,13 @@
-const path = require('path');
-const fs = require('fs');
+import path from "path";
+import fs from "fs";
 
-const exec = require('child_process').execFile;
+import { execFile } from "child_process";
+import { fileURLToPath } from "url";
 
-const root = path.dirname(require.main.filename).replace(path.normalize("www"), "");
-const rootwww = path.dirname(require.main.filename);
+const __filename = fileURLToPath(import.meta.url);
+
+const root = path.dirname(__filename).replace(path.normalize("www"), "");
+const rootwww = path.dirname(__filename);
 
 const fsdata_filename = path.normalize("/lib/httpd/fsdata.c");
 
@@ -27,7 +30,7 @@ function correctincludes() {
 }
 
 function makefsdata() {
-      exec(path.normalize(process.platform !== "darwin" ? `${root}/tools/makefsdata` : `${root}/tools/makefsdata.darwin`), [path.normalize(`${rootwww}/build`), '-defl:1', '-xc:png,ico,json', `-f:`+ path.normalize(`${root}/lib/httpd/fsdata.c`)], function(error, data) {
+      execFile(path.normalize(process.platform !== "darwin" ? `${root}/tools/makefsdata` : `${root}/tools/makefsdata.darwin`), [path.normalize(`${rootwww}/build`), '-defl:1', '-xc:png,ico,json', `-f:`+ path.normalize(`${root}/lib/httpd/fsdata.c`)], function(error, data) {
         if (error) {
             console.error(error);
         } else {