More build cleanup (#165)

- Move hardcoded version to package.json instead of src/manifest.json - Handle browser branching logic based on build constant instead Co-authored-by: arkon <[email protected]>
LiveTL · Jan 12, 2025 · 25173ec · 25173ec
1 parent 9e4570b
commit 25173ec
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "HyperChat",
-  "version": "69.42.0",
+  "version": "3.0.4",
   "private": true,
   "scripts": {
     "build": "npm run build:chrome && npm run build:firefox",

diff --git a/src/components/Hyperchat.svelte b/src/components/Hyperchat.svelte
@@ -17,14 +17,9 @@
     // paramsTabId,
     // paramsFrameId,
     // paramsIsReplay,
-    getBrowser,
-    Browser,
     Theme,
     YoutubeEmojiRenderMode,
     chatUserActionsItems,
-
-    ChatReportUserOptions
-
   } from '../ts/chat-constants';
   import {
     isAllEmoji,
@@ -57,7 +52,6 @@
     enableHighlightedMentions,
     ytDark
   } from '../ts/storage';
-  import { version } from '../manifest.json';
 
   const welcome = { welcome: true, message: { messageId: 'welcome' } };
   type Welcome = typeof welcome;
@@ -102,7 +96,7 @@
   $: hasBanner = pinned || redirect || (summary && $showChatSummary);
   let div: HTMLElement;
   let isAtBottom = true;
-  let truncateInterval: number;
+  let truncateInterval: number | undefined;
   const isReplay = paramsIsReplay;
   const smelteDark = dark();
 
@@ -314,7 +308,7 @@
   // Doesn't work well with onMount, so onLoad will have to do
   // Update: use onMount because hc now mounts in content script
   const onLoad = (): (() => void) | undefined => {
-    $lastOpenedVersion = version;
+    $lastOpenedVersion = __VERSION__;
     document.body.classList.add('overflow-hidden');
 
     if (paramsTabId == null || paramsFrameId == null || paramsTabId.length < 1 || paramsFrameId.length < 1) {

diff --git a/src/components/HyperchatButton.svelte b/src/components/HyperchatButton.svelte
@@ -3,7 +3,6 @@
   import { hcEnabled, lastOpenedVersion } from '../ts/storage';
   import { createPopup } from '../ts/chat-utils';
   import { mdiChevronRight, mdiClose, mdiCogOutline } from '@mdi/js';
-  import { version } from '../manifest.json';
 
   $: disabled = !$hcEnabled;
 
@@ -24,7 +23,7 @@
   let updated = false;
 
   lastOpenedVersion.ready().then(() => {
-    updated = !$hcEnabled && $lastOpenedVersion !== version;
+    updated = !$hcEnabled && $lastOpenedVersion !== __VERSION__;
   });
 </script>
 
@@ -37,7 +36,7 @@
       </svg>
       <div style="cursor: pointer;" on:click={() => {
         updated = false;
-        $lastOpenedVersion = version;
+        $lastOpenedVersion = __VERSION__;
       }}>
         <svg height="20" width="24" viewBox="0 0 24 24" class="close">
           <path d={mdiClose} fill="black"/>
@@ -214,15 +213,15 @@
     position: absolute;
     visibility: hidden;
     opacity: 0;
-    -webkit-transition: 
+    -webkit-transition:
       opacity 0.2s ease-in-out,
       visibility 0.2s ease-in-out,
       -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-    -moz-transition:    
+    -moz-transition:
       opacity 0.2s ease-in-out,
       visibility 0.2s ease-in-out,
       -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-    transition:         
+    transition:
       opacity 0.2s ease-in-out,
       visibility 0.2s ease-in-out,
       transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
@@ -289,7 +288,7 @@
   [data-tooltip]:focus:after {
     -webkit-transform: translateY(-12px);
     -moz-transform:    translateY(-12px);
-    transform:         translateY(-12px); 
+    transform:         translateY(-12px);
   }
 
   /* Bottom */
@@ -314,7 +313,7 @@
   .tooltip-bottom:focus:after {
     -webkit-transform: translateY(12px);
     -moz-transform:    translateY(12px);
-    transform:         translateY(12px); 
+    transform:         translateY(12px);
   }
 
   .update-notification {

diff --git a/src/components/WelcomeMessage.svelte b/src/components/WelcomeMessage.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
   import { lastClosedVersion, refreshScroll } from '../ts/storage';
-  import { Browser, getBrowser, isLiveTL } from '../ts/chat-constants';
+  import { isLiveTL } from '../ts/chat-constants';
   import Changelog from './changelog/Changelog.svelte';
-  import { version } from '../manifest.json';
   import Icon from './common/Icon.svelte';
 
   const logo = chrome.runtime.getURL(
     (isLiveTL ? 'hyperchat' : 'assets') + '/logo.png'
   );
-  const reviewLink = getBrowser() === Browser.FIREFOX
+  const reviewLink = __BROWSER__ === 'firefox'
     ? 'https://addons.mozilla.org/en-US/firefox/addon/hyperchat/'
     : 'https://chrome.google.com/webstore/detail/hyperchat-optimized-youtu/naipgebhooiiccifflecbffmnjbabdbh';
   const classes = 'p-2 rounded inline-flex flex-col overflow-hidden ' +
@@ -36,7 +35,7 @@
     }
   ];
 
-  $: showChangelog = $lastClosedVersion !== version;
+  $: showChangelog = $lastClosedVersion !== __VERSION__;
 </script>
 
 <div class={classes}>
@@ -55,16 +54,16 @@
             $refreshScroll = true;
             e.preventDefault();
           }} class="underline text-primary-900 dark:text-primary-50">
-            v{version}
+            v{__VERSION__}
           </a>
         {:else}
-          v{version}
+          v{__VERSION__}
         {/if}
       </p>
       <div class="flex flex-wrap">
         {#each badges as badge, i}
           <p>
-            <a 
+            <a
               href={badge.href}
               class="underline text-primary-900 dark:text-primary-50"
               target="_blank"
@@ -82,7 +81,7 @@
   {#if showChangelog}
     <p class="leading-tight mt-1.5 flex flex-row">
       <span href="/" on:click={(e) => {
-        $lastClosedVersion = version;
+        $lastClosedVersion = __VERSION__;
         $refreshScroll = true;
         e.preventDefault();
       }}

diff --git a/src/manifest.json b/src/manifest.json
@@ -3,7 +3,7 @@
   "name": "HyperChat [Improved YouTube Chat]",
   "homepage_url": "https://livetl.app/hyperchat",
   "description": "Improved YouTube chat with CPU/RAM optimizations, customization options, and cutting-edge features!",
-  "version": "3.0.4",
+  "version": "0.0.0",
   "permissions": [
     "storage"
   ],

diff --git a/src/ts/chat-constants.ts b/src/ts/chat-constants.ts
@@ -1,22 +1,6 @@
 export const isLiveTL = false;
 // DO NOT EDIT THE ABOVE LINE. It is updated by webpack.
 
-export const enum Browser {
-  FIREFOX,
-  CHROME,
-  SAFARI
-}
-
-export const getBrowser = (): Browser => {
-  if (navigator.userAgent.includes('Firefox')) {
-    return Browser.FIREFOX;
-  }
-  if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
-    return Browser.SAFARI;
-  }
-  return Browser.CHROME;
-};
-
 // const params = new URLSearchParams(window.location.search);
 // export const paramsTabId = params.get('tabid');
 // export const paramsFrameId = params.get('frameid');

diff --git a/src/ts/typings/vite-env.d.ts b/src/ts/typings/vite-env.d.ts
@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+declare const __BROWSER__: 'chrome' | 'firefox';
+declare const __VERSION__: string;
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,12 +2,16 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import path from 'path';
 import copy from 'rollup-plugin-copy';
 import { defineConfig } from 'vite';
-import browserExtension from 'vite-plugin-web-extension';
+import webExtension, { readJsonFile } from 'vite-plugin-web-extension';
 import zipPack from 'vite-plugin-zip-pack';
 
-import manifest from './src/manifest.json';
+const pkg = readJsonFile('package.json');
+const manifest = readJsonFile('src/manifest.json');
 
-const buildDir = `build/${process.env.BROWSER}`;
+const browser = process.env.BROWSER ?? 'chrome';
+const version = process.env.VERSION ?? pkg.version;
+
+const buildDir = `build/${browser}`;
 
 export default defineConfig({
   root: 'src',
@@ -16,11 +20,15 @@ export default defineConfig({
     emptyOutDir: true,
     minify: process.env.MINIFY !== 'false' ? 'terser' : false
   },
+  define: {
+    __BROWSER__: JSON.stringify(browser),
+    __VERSION__: JSON.stringify(version)
+  },
   plugins: [
-    browserExtension({
+    webExtension({
       manifest: () => ({
         ...manifest,
-        version: process.env.VERSION ?? manifest.version,
+        version
       }),
       assets: 'assets',
       watchFilePaths: [
@@ -32,7 +40,7 @@ export default defineConfig({
         'scripts/chat-metagetter.ts'
       ],
       disableAutoLaunch: process.env.HC_AUTOLAUNCH === undefined,
-      browser: process.env.BROWSER === undefined ? 'chrome' : process.env.BROWSER,
+      browser,
       webExtConfig: {
         startUrl: 'https://www.youtube.com/watch?v=jfKfPfyJRdk'
       }
@@ -51,7 +59,7 @@ export default defineConfig({
     zipPack({
       inDir: buildDir,
       outDir: 'build',
-      outFileName: `HyperChat-${process.env.BROWSER}.zip`
-    }),
+      outFileName: `HyperChat-${browser}.zip`
+    })
   ]
 });