yosevu · yosevu · Jun 18, 2022 · Jun 9, 2022
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Event Counter Sidebar</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,26 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "postbuild": "node ./scripts/postbuild.js",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "start": "vite",
+    "build": "tsc && vite build",
+    "postbuild": "node ./scripts/postbuild.js"
   },
   "browserslist": {
     "production": [
@@ -35,5 +23,20 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "devDependencies": {
+    "@types/chrome": "0.0.190",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.6",
+    "vite-plugin-svgr": "^1.1.0"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/scripts/postbuild.js b/scripts/postbuild.js
@@ -1,5 +1,5 @@
-const fs = require('fs');
-const manifest = require('../public/manifest.json');
+const fs = require('fs')
+const manifest = require('../public/manifest.json')
 
 /**
  * readFile uses a Regex to filter, match, and return the static file based on
@@ -12,14 +12,15 @@ const manifest = require('../public/manifest.json');
  */
 function readFile(path, prefix, extension) {
   const file = new RegExp(`^${prefix}\.[a-z0-9]+\.${extension}$`)
-  return fs.readdirSync(`./build/${path}`)
-           .filter(filename => file.test(filename))
-           .map(filename => `${path}/${filename}`)[0];
+  return fs
+    .readdirSync(`./build/${path}`)
+    .filter((filename) => file.test(filename))
+    .map((filename) => `${path}/${filename}`)[0]
 }
 
-const js = readFile('static/js', 'main', 'js');
-const css = readFile('static/css', 'main', 'css');
-const logo = readFile('static/media', 'logo', 'svg');
+const js = readFile('assets', 'index', 'js')
+const css = readFile('assets', 'index', 'css')
+const logo = readFile('assets', 'logo', 'svg')
 
 const newManifest = {
   ...manifest,
@@ -28,15 +29,14 @@ const newManifest = {
       ...manifest.content_scripts[0],
       js: [js],
       css: [css],
-    }
+    },
   ],
   web_accessible_resources: [
     {
       ...manifest.web_accessible_resources[0],
-      resources: [css, logo]
-
-    }
-  ]
-};
+      resources: [css, logo],
+    },
+  ],
+}
 
-fs.writeFileSync('./build/manifest.json', JSON.stringify(newManifest, null, 2));
+fs.writeFileSync('./build/manifest.json', JSON.stringify(newManifest, null, 2))
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/App.js → src/App.tsx b/src/App.js → src/App.tsx
@@ -1,12 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
+///<reference types="chrome"/>
+import logo from './logo.svg'
+import './App.css'
+import React from 'react'
 
 function getLogo() {
   if (window.chrome) {
-    return window.chrome.runtime.getURL(logo);
+    return window.chrome.runtime.getURL(logo)
   }
 
-  return logo;
+  return logo
 }
 
 function App() {
@@ -18,7 +20,7 @@ function App() {
         <p>I'm a Content Script in a Chrome Extension!</p>
       </header>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App
diff --git a/src/index.js b/src/index.js
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+const body = document.querySelector('body')
+
+const app = document.createElement('div')
+
+app.id = 'react-root'
+
+// Make sure the element that you want to mount the app to has loaded. You can
+// also use `append` or insert the app using another method:
+// https://developer.mozilla.org/en-US/docs/Web/API/Element#methods
+//
+// Also control when the content script is injected from the manifest.json:
+// https://developer.chrome.com/docs/extensions/mv3/content_scripts/#run_time
+if (body) {
+  body.prepend(app)
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('react-root')
+)
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals'
+
+const reportWebVitals = (onPerfEntry: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
+  }
+}
+
+export default reportWebVitals
diff --git a/src/setupTests.js b/src/setupTests.js
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import svgrPlugin from 'vite-plugin-svgr'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // This changes the out put dir from dist to build
+  // comment this out if that isn't relevant for your project
+  build: {
+    outDir: 'build',
+  },
+  plugins: [
+    reactRefresh(),
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+        // ...svgr options (https://react-svgr.com/docs/options/)
+      },
+    }),
+  ],
+})