remap-keys · yoichiro · May 29, 2024 · May 29, 2024 · May 29, 2024 · May 29, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,7 +3,13 @@
     "es6": true,
     "node": true,
     "jest": true,
-    "jasmine": true
+    "jasmine": true,
+    "browser": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   },
   "parser": "@typescript-eslint/parser",
   "plugins": ["react", "prettier"],
@@ -18,18 +24,19 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
-    "prettier/react"
+    "prettier/prettier"
   ],
   "rules": {
+    "no-unused-vars": "warn",
+    "react/prop-types": "warn",
+    "react/no-deprecated": "warn",
     "prettier/prettier": [
       "warn",
       {},
       {
         "usePrettierrc": true
       }
-    ],
-    "no-unused-vars": "warn",
-    "react/prop-types": "warn"
+    ]
   },
   "globals": {
     "HIDDevice": "readonly"

diff --git a/package.json b/package.json
@@ -41,22 +41,16 @@
     "web-vitals": "^1.1.0"
   },
   "scripts": {
-    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
+    "start": "vite",
     "type-check": "tsc --noEmit",
-    "build": "yarn type-check && NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
+    "lint": "yarn eslint './src/**/*.{ts,tsx}'",
+    "build": "yarn type-check && yarn lint && yarn vite build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
     "format": "prettier --write './src/**/*.{ts,tsx}'",
     "gen-types": "json2ts src/services/storage/assets/keyboard-definition-schema.json --style.singleQuote > src/gen/types/KeyboardDefinition.ts;",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 -s public",
     "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -s public"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -70,6 +64,7 @@
     ]
   },
   "devDependencies": {
+    "@eslint/js": "^9.3.0",
     "@storybook/addon-actions": "^6.1.14",
     "@storybook/addon-essentials": "^6.1.15",
     "@storybook/addon-links": "^6.1.14",
@@ -96,18 +91,22 @@
     "@types/w3c-web-serial": "^1.0.2",
     "@types/w3c-web-usb": "^1.0.5",
     "@types/wicg-file-system-access": "^2020.9.7",
-    "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^7.11.0",
-    "babel-eslint": "^10.1.0",
-    "eslint-config-prettier": "^7.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react": "^7.34.2",
+    "globals": "^15.3.0",
     "husky": "^4.3.6",
     "json-schema-to-typescript": "^10.1.2",
     "lint-staged": "^10.5.3",
     "prettier": "^3.2.5",
     "react-scripts": "^4.0.1",
-    "sinon": "^11.1.2"
+    "sinon": "^11.1.2",
+    "typescript-eslint": "^7.11.0",
+    "vite": "^5.2.12"
   },
   "husky": {
     "hooks": {
@@ -124,5 +123,6 @@
       "git add"
     ]
   },
-  "packageManager": "yarn@4.2.2"
+  "packageManager": "yarn@4.2.2",
+  "type": "module"
 }
diff --git a/public/index.html → src/index.html b/public/index.html → src/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head prefix="og: http://ogp.me/ns#">
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -12,7 +12,7 @@
     </script>
 
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@@ -43,15 +43,11 @@
       content="Remap allows you to find, build, set up and customize your keyboard quickly and easily in Web Browser."
       data-rh="true"
     />
-    <meta property="og:url" content="%PUBLIC_URL%" data-rh="true" />
-    <meta
-      property="og:image"
-      content="%PUBLIC_URL%/ogp_image.png"
-      data-rh="true"
-    />
+    <meta property="og:url" content="https://remap-keys.app" data-rh="true" />
+    <meta property="og:image" content="/ogp_image.png" data-rh="true" />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -72,6 +68,7 @@
         "keywords": "remap,keyboard,keymap,qmk,via,customize,led,diy,webhid"
       }
     </script>
+    <script type="module" src="./index.tsx"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/services/provider/Firebase.ts b/src/services/provider/Firebase.ts
@@ -52,14 +52,14 @@ import { IDeviceInformation } from '../hid/Hid';
 import * as crypto from 'crypto';
 import { IBootloaderType } from '../firmware/Types';
 
-const config = {
-  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
-  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
-  appId: process.env.REACT_APP_FIREBASE_APP_ID,
-  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
+export type IFirebaseConfiguration = {
+  apiKey: string;
+  authDomain: string;
+  projectId: string;
+  storageBucket: string;
+  messagingSenderId: string;
+  appId: string;
+  measurementId: string;
 };
 
 const FUNCTIONS_REGION = 'asia-northeast1';
@@ -71,7 +71,7 @@ export class FirebaseProvider implements IStorage, IAuth {
   private functions: firebase.functions.Functions;
   private unsubscribeAuthStateChanged?: firebase.Unsubscribe;
 
-  constructor() {
+  constructor(config: IFirebaseConfiguration) {
     firebase.initializeApp(config);
     firebase.analytics();
     const app = firebase.app();

diff --git a/src/services/provider/FirebaseConfiguration.ts b/src/services/provider/FirebaseConfiguration.ts
@@ -0,0 +1,11 @@
+import { IFirebaseConfiguration } from './Firebase';
+
+export const firebaseConfiguration: IFirebaseConfiguration = {
+  apiKey: import.meta.env.REACT_APP_FIREBASE_API_KEY,
+  authDomain: import.meta.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.REACT_APP_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
+  appId: import.meta.env.REACT_APP_FIREBASE_APP_ID,
+  measurementId: import.meta.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
+};
diff --git a/src/store/state.ts b/src/store/state.ts
@@ -35,6 +35,7 @@ import { IFirmwareWriter } from '../services/firmware/FirmwareWriter';
 import { FirmwareWriterWebApiImpl } from '../services/firmware/FirmwareWriterWebApiImpl';
 import { IBootloaderType } from '../services/firmware/Types';
 import { getLocalAuthenticationUid } from '../utils/AuthUtils';
+import { firebaseConfiguration } from '../services/provider/FirebaseConfiguration';
 
 export type ISetupPhase =
   | 'init'
@@ -488,9 +489,9 @@ export type RootState = {
 
 let firebaseProvider;
 try {
-  firebaseProvider = new FirebaseProvider();
+  firebaseProvider = new FirebaseProvider(firebaseConfiguration);
 } catch (cause) {
-  if (process.env.NODE_ENV === 'production') {
+  if (import.meta.env.NODE_ENV === 'production') {
     throw cause;
   } else {
     console.warn(

diff --git a/src/utils/GoogleAnalytics.ts b/src/utils/GoogleAnalytics.ts
@@ -48,7 +48,7 @@ let analytics: firebase.analytics.Analytics | null;
 try {
   analytics = firebase.analytics();
 } catch (cause) {
-  if (process.env.NODE_ENV === 'production') {
+  if (import.meta.env.NODE_ENV === 'production') {
     throw cause;
   } else {
     analytics = null;

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "esnext",
+    "lib": ["dom", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -15,7 +15,16 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "typeRoots": ["node_modules/@types"]
+    "typeRoots": ["node_modules", "node_modules/@types", "src/@types"],
+    "types": [
+      "node",
+      "@types/jest",
+      "@types/w3c-web-hid",
+      "@types/w3c-web-usb",
+      "@types/w3c-web-serial",
+      "@types/wicg-file-system-access",
+      "vite/client"
+    ]
   },
   "include": ["src"]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,35 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig, Plugin, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [react(), envPlugin()],
+    esbuild: {},
+    root: 'src',
+    publicDir: '../public',
+    build: {
+      sourcemap: true,
+      outDir: '../build',
+    },
+    server: {
+      port: 3000,
+    },
+  };
+});
+
+function envPlugin(): Plugin {
+  return {
+    name: 'env-plugin',
+    config(_, { mode }) {
+      const env = loadEnv(mode, '.', ['REACT_APP_', 'NODE_ENV']);
+      return {
+        define: Object.fromEntries(
+          Object.entries(env).map(([key, value]) => [
+            `import.meta.env.${key}`,
+            JSON.stringify(value),
+          ])
+        ),
+      };
+    },
+  };
+}