Clean up some of the build logic

.eslintrc.js

@@ -48,7 +48,6 @@ module.exports = {
     ],
     'no-extra-semi': 'off',
     '@typescript-eslint/no-extra-semi': 'error',
-    '@typescript-eslint/no-floating-promises': 'off',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': [
       'error',

.github/workflows/build.yml

@@ -3,6 +3,10 @@ on:
   push:
   pull_request:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -14,10 +18,11 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'yarn'
 
-      - name: Install modules
-        run: yarn
+      - run: |
+          npm install
+
+          # TODO: there's way too many errors right now
+          # npm run format:check
 
-      - name: Build
-        run: yarn build
+          npm run build

.github/workflows/release.yml

@@ -7,8 +7,6 @@ on:
 
 jobs:
   build:
-    env:
-      ADDON_ID: "{14a15c41-13f4-498e-986c-7f00435c4d00}"
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -18,39 +16,31 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-          cache: 'yarn'
 
-      - name: Install modules
-        run: yarn
+      - run: |
+          npm install
+
+          # TODO: there's way too many errors right now
+          # npm run format:check
 
-      - name: Build Chrome
-        run: |
           # Extract version number from the tag
           VERSION=$(echo -n "${{ github.ref }}" | sed 's/[refs\/tagv]//g' | sed 's/-.*//')
-          yarn build:chrome
-          yarn package
+          npm run build
 
       - name: Upload Chrome package to release
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: dist/HyperChat-Chrome.zip
+          file: build/HyperChat-chrome.zip
           asset_name: HyperChat-Chrome.zip
           tag: ${{ github.ref }}
           overwrite: true
 
-      - name: Build Firefox
-        run: |
-          # Extract version number from the tag
-          VERSION=$(echo -n "${{ github.ref }}" | sed 's/[refs\/tagv]//g' | sed 's/-.*//')
-          yarn build:firefox
-          yarn package
-
       - name: Upload Firefox package to release
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: dist/HyperChat-Firefox.zip
+          file: build/HyperChat-firefox.zip
           asset_name: HyperChat-Firefox.zip
           tag: ${{ github.ref }}
           overwrite: true

.gitignore

@@ -1,18 +1,15 @@
 .DS_Store
 node_modules
 build
-dist
 package-lock.json
+.eslintcache
 
 # local env files
 .env.local
 .env.*.local
 
 # Log files
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -22,10 +19,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-
-# Vue Browser Extension Output
-*.pem
-*.pub
-*.zip
-artifacts
-.eslintcache

README.md

@@ -30,20 +30,28 @@ Open the repository and npm install:
 ```bash
 cd hyperchat
 git checkout master # switch to master for MV2 first!
-yarn # install dependencies
+npm install # install dependencies
 ```
 
 Build or serve the extension:
 
 ```bash
-yarn dev:firefox # devserver for firefox extension
-yarn dev:chrome # devserver for chrome extension
-yarn start # alias to yarn dev:chrome for backwards compat
-yarn start:none # alias to yarn dev:chrome for backwards compat
-yarn start:firefox # devserver + open extension in firefox
-yarn start:chrome # devserver + open extension in chrome
-yarn build # production mode (chrome)
-yarn build:chrome # production mode (chrome)
-yarn build:firefox # production mode (firefox)
-VERSION=x.x.x yarn build
+npm run dev:chrome # devserver for Chrome extension
+npm run dev:firefox # devserver for Firefox extension
+
+npm run start:chrome # devserver + open extension in Chrome
+npm run start:firefox # devserver + open extension in Firefox
+
+VERSION=x.x.x npm run build # production mode (Chrome & Firefox)
+VERSION=x.x.x npm run build:chrome # production mode (Chrome)
+VERSION=x.x.x npm run build:firefox # production mode (Firefox)
 ```
+
+## Building for Production
+
+Our build script is an automated GitHub action. To simulate the build, please follow the steps outlined in the [Latest Release Build](.github/workflows/build.yml) workflow file.
+
+Clarifications:
+- `${{ github.ref }}` should evaluate to `vX.X.X`, where `X.X.X` is the version number.
+
+The built ZIP files can be found in the `build` directory.

package.json

@@ -3,60 +3,48 @@
   "version": "69.42.0",
   "private": true,
   "scripts": {
-    "build": "yarn build:chrome",
+    "build": "npm run build:chrome && npm run build:firefox",
     "build:chrome": "cross-env BROWSER=chrome vite build",
     "build:firefox": "cross-env BROWSER=firefox vite build",
-    "package": "node utils/package.js",
     "dev:chrome": "cross-env MINIFY=false BROWSER=chrome vite build --watch",
     "dev:firefox": "cross-env MINIFY=false BROWSER=firefox vite build --watch",
-    "start": "yarn dev:chrome",
-    "start:none": "yarn dev:chrome",
-    "start:chrome": "cross-env HC_AUTOLAUNCH=menace yarn dev:chrome",
-    "start:firefox": "cross-env HC_AUTOLAUNCH=menace yarn dev:firefox",
-    "format:check": "eslint ."
+    "start:chrome": "cross-env HC_AUTOLAUNCH=menace npm run dev:chrome",
+    "start:firefox": "cross-env HC_AUTOLAUNCH=menace npm run dev:firefox",
+    "format": "eslint src --fix",
+    "format:check": "eslint src"
   },
-  "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^4.0.3",
+  "dependencies": {
     "@livetl/svelte-webext-stores": "^0.0.14",
     "@mdi/js": "^6.5.95",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.34",
+    "iframe-translator": "^0.3.7",
+    "is-dark-color": "^1.2.0",
+    "sha-1": "^1.0.0",
+    "smelte": "^1.1.8",
+    "svelte": "^3.49.0",
+    "tailwindcss": "^2.2.7"
+  },
+  "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^4.0.3",
+    "@sveltejs/vite-plugin-svelte": "1.0.0-next.34",
     "@tsconfig/svelte": "^2.0.1",
     "@types/chrome": "^0.0.193",
-    "@types/download": "8.0.1",
-    "@typescript-eslint/eslint-plugin": "4",
-    "@typescript-eslint/parser": "^4.28.5",
     "autoprefixer": "^10.3.1",
     "body-parser": "1.19.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.7",
-    "download": "8.0.0",
-    "eslint": "7",
-    "eslint-config-standard-with-typescript": "^20.0.0",
-    "eslint-plugin-import": "2",
-    "eslint-plugin-node": "11",
-    "eslint-plugin-promise": "4",
+    "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-svelte3": "^3.2.0",
-    "express": "4.17.3",
-    "iframe-translator": "^0.3.7",
-    "is-dark-color": "^1.2.0",
     "postcss": "^8.4.31",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^14.0.2",
     "postcss-input-range": "^4.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-url": "^10.1.3",
     "rollup-plugin-copy": "^3.4.0",
-    "safe-compare": "1.1.4",
-    "sha-1": "^1.0.0",
-    "smelte": "^1.1.8",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.7.4",
-    "svelte-waypoint": "^0.1.4",
-    "tailwindcss": "^2.2.7",
     "terser": "^5.19.2",
     "typescript": "4.3.5",
     "vite": "2.9.16",
-    "vite-plugin-web-extension": "^1.4.0"
+    "vite-plugin-web-extension": "^1.4.0",
+    "vite-plugin-zip-pack": "1.0.7"
   }
 }

src/manifest.json

@@ -59,9 +59,9 @@
     "open_in_tab": true
   },
   "{{chrome}}.incognito": "split",
-  "browser_specific_settings": {
+  "{{firefox}}.browser_specific_settings": {
     "gecko": {
-      "id": "{51076d9a-d4c2-11ed-af84-706655572bfb}",
+      "id": "{14a15c41-13f4-498e-986c-7f00435c4d00}",
       "strict_min_version": "58.0"
     }
   }

vite.config.ts

@@ -1,29 +1,27 @@
-import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import browserExtension from 'vite-plugin-web-extension';
 import path from 'path';
 import copy from 'rollup-plugin-copy';
+import { defineConfig } from 'vite';
+import browserExtension from 'vite-plugin-web-extension';
+import zipPack from 'vite-plugin-zip-pack';
+
 import manifest from './src/manifest.json';
 
+const buildDir = `build/${process.env.BROWSER}`;
+
 export default defineConfig({
   root: 'src',
   build: {
-    outDir: path.resolve(__dirname, 'build'),
+    outDir: path.resolve(__dirname, buildDir),
     emptyOutDir: true,
     minify: process.env.MINIFY !== 'false' ? 'terser' : false
   },
   plugins: [
     browserExtension({
-      manifest: () => {
-        const newManifest = {
-          ...manifest,
-          version: (process.env.VERSION ?? '') || manifest.version
-        };
-        if ('browser_specific_settings' in newManifest && process.env.ADDON_ID) {
-          newManifest.browser_specific_settings.gecko.id = process.env.ADDON_ID;
-        }
-        return newManifest;
-      },
+      manifest: () => ({
+        ...manifest,
+        version: process.env.VERSION ?? manifest.version,
+      }),
       assets: 'assets',
       watchFilePaths: [
         path.resolve(__dirname, 'src/manifest.json')
@@ -43,32 +41,17 @@ export default defineConfig({
       configFile: path.resolve(__dirname, 'svelte.config.js'),
       emitCss: false
     }),
-    copy({
-      hook: 'writeBundle',
-      targets: [{
-        src: 'build/manifest.json',
-        dest: 'build/',
-        transform: (content) => {
-          const newManifest = JSON.parse(content.toString());
-          if ('incognito' in newManifest) {
-            delete newManifest.incognito;
-          }
-          if ('service_worker' in newManifest.background) {
-            newManifest.background = {
-              scripts: [newManifest.background.service_worker]
-            };
-          }
-          return JSON.stringify(newManifest, null, 2);
-        },
-        rename: 'manifest.firefox.json'
-      }]
-    }),
     copy({
       hook: 'writeBundle',
       targets: [{
         src: 'src/stylesheets/*',
-        dest: 'build/stylesheets'
+        dest: `${buildDir}/stylesheets`
       }]
     }),
+    zipPack({
+      inDir: buildDir,
+      outDir: 'build',
+      outFileName: `HyperChat-${process.env.BROWSER}.zip`
+    }),
   ]
 });