build: added explicit auto-injection of /src/main.js into index.html …

…when building with vite
ActivityWatch · May 6, 2024 · 10ed9b3 · 10ed9b3 · github-actions · May 6, 2024
1 parent 14043b2
commit 10ed9b3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -6,14 +6,14 @@
     <link rel="icon" type="image/png" href="/logo.png">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!-- Verify with https://csp-evaluator.withgoogle.com/ -->
-    <!-- TODO: fix CSP (should depend on prod/dev mode, as pre-vite )-->
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' <%= htmlWebpackPlugin.options.templateParameters.cspDefaultSrc %> https://api.github.com/repos/ActivityWatch/activitywatch/releases/latest; img-src 'self' data:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; object-src 'none'; script-src 'self' 'unsafe-eval'">
   </head>
   <body>
     <noscript>
       <strong>We're sorry but the ActivityWatch Web UI doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <!-- We can build the app with either Vite or Webpack, they inject in different ways -->
+    <!-- Vite will auto-inject here: VITE_AUTOINJECT -->
   </body>
 </html>
diff --git a/vite.config.js b/vite.config.js
@@ -22,10 +22,29 @@ export default defineConfig(({ mode }) => {
     };
   };
 
+  // Auto-injects /src/main.js into index.html on a new line after the one which has VITE_AUTOINJECT
+  const autoInject = () => {
+    return {
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        const pattern = /<!--.*VITE_AUTOINJECT.*-->/;
+        // check if the pattern exists in the html, if not, throw error
+        if (!pattern.test(html)) {
+          throw new Error(`Could not find pattern ${pattern} in the html file`);
+        }
+        return html.replace(
+          pattern,
+          '<!-- Vite injected: --><script type="module" src="/src/main.js"></script>'
+        );
+      },
+    };
+  };
+
   // Return the configuration
   return {
     plugins: [
       setCsp(),
+      autoInject(),
       vue(),
       VitePWA({
         devOptions: {