remap-keys · yoichiro · May 31, 2024 · May 31, 2024 · May 31, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,7 +3,8 @@
     "es6": true,
     "node": true,
     "jest": true,
-    "jasmine": true
+    "jasmine": true,
+    "browser": true
   },
   "parser": "@typescript-eslint/parser",
   "plugins": ["react", "prettier"],

diff --git a/package.json b/package.json
@@ -41,9 +41,10 @@
     "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": "eslint src --ext .ts,.tsx",
+    "build": "yarn type-check && yarn lint && vite build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write './src/**/*.{ts,tsx}'",
@@ -98,7 +99,9 @@
     "@types/wicg-file-system-access": "^2020.9.7",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^7.11.0",
+    "@vitejs/plugin-react": "^4.3.0",
     "babel-eslint": "^10.1.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.21.5",
@@ -107,7 +110,9 @@
     "lint-staged": "^10.5.3",
     "prettier": "^3.2.5",
     "react-scripts": "^4.0.1",
-    "sinon": "^11.1.2"
+    "sinon": "^11.1.2",
+    "vite": "^5.2.12",
+    "vite-plugin-node-polyfills": "^0.22.0"
   },
   "husky": {
     "hooks": {
@@ -124,5 +129,6 @@
       "git add"
     ]
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "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/@types", "node_modules", "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,36 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig, Plugin, loadEnv } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [react(), envPlugin(), nodePolyfills()],
+    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),
+          ])
+        ),
+      };
+    },
+  };
+}