Port to Vite and Typescript

.editorconfig

@@ -7,7 +7,7 @@ trim_trailing_whitespace = true
 charset = utf-8
 
 # 2 spaces for JS, HTML and CSS/SASS
-[*.{js,html,css,scss,sass,less}]
+[*.{ts,js,html,yml,css,scss,sass,less}]
 indent_size = 2
 
 # 4 spaces for markdown

.github/workflows/build.yml

@@ -1,38 +1,35 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [12.x]
-
     steps:
-    - uses: actions/checkout@v2
-      with:
-        submodules: 'recursive'
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: Install
-      run: make install
-    - name: Build
-      run: make build
-    - name: Upload artifact
-      uses: actions/upload-artifact@v2-preview
-      with:
-        name: aw-watcher-web
-        path: aw-watcher-web.zip
+      - uses: actions/checkout@v3
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: npm
 
+      - name: Build Firefox
+        run: make build-firefox
+      - name: Upload artifact
+        uses: actions/upload-artifact@v2-preview
+        with:
+          name: firefox
+          path: dist.zip
 
+      - name: Build Chrome
+        run: make build-chrome
+      - name: Upload artifact
+        uses: actions/upload-artifact@v2-preview
+        with:
+          name: chrome
+          path: dist.zip

.github/workflows/codeql.yml

@@ -1,12 +1,12 @@
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ "master" ]
+    branches: [master]
   pull_request:
-    branches: [ "master" ]
+    branches: [master]
   schedule:
-    - cron: "25 4 * * 3"
+    - cron: '25 4 * * 3'
 
 jobs:
   analyze:
@@ -17,25 +17,22 @@ jobs:
       contents: read
       security-events: write
 
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ javascript ]
-
     steps:
       - name: Checkout
         uses: actions/checkout@v3
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2
         with:
-          languages: ${{ matrix.language }}
+          languages: javascript, typescript
           queries: +security-and-quality
 
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: npm
+      - run: make build-chrome
 
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v2
-        with:
-          category: "/language:${{ matrix.language }}"

.gitignore

@@ -1,5 +1,6 @@
-aw-watcher-web.zip
-out
-build
 node_modules
+build
+artifacts
+
+# Editor directories and files
 .DS_Store

.gitmodules

@@ -1,6 +1,3 @@
 [submodule "media"]
 	path = media
 	url = https://github.com/ActivityWatch/media.git
-[submodule "aw-client-js"]
-	path = aw-client-js
-	url = https://github.com/ActivityWatch/aw-client-js.git

Makefile

@@ -1,48 +1,85 @@
 .PHONY: build install clean
 
-# This is what Google and Mozilla wants us to upload when we release a new version to the Addon "store"
-build: install
-	npm run build
-	make aw-watcher-web.zip
-
 install:
 	npm ci
-	(cd aw-client-js; npm ci; npm run compile)
 
-update:
-	npm run build
+compile:
+	npx tsc --noEmit
 
 clean:
 	rm -rf node_modules build
-	(cd aw-client-js; rm -rf node_modules)
 
-aw-watcher-web.zip: out/app.js
-	rm -f $@
-	zip -r -FS $@ manifest.json static/ out/ media/logo/logo-128.png media/banners/banner.png
+format:
+	npx prettier --write .
+
+#---------
+## Building
+
+dev:
+	NODE_ENV=development npx vite build --mode development --watch
+
+# This is what Google wants us to upload when we release a new version to the Addon "store"
+build-chrome: install update-chrome zip-build-chrome
+
+update-chrome:
+	VITE_TARGET_BROWSER=chrome npx vite build
+
+# This is what Mozilla wants us to upload when we release a new version to the Addon "store"
+build-firefox: install update-firefox zip-build-firefox
+
+update-firefox:
+	VITE_TARGET_BROWSER=firefox npx vite build
+
+#---------
+## Zipping
+
+# To build a zip archive for uploading to the Chrome Web Store or Mozilla Addons
+zip-build-chrome:
+	mkdir -p artifacts && cd build && zip ../artifacts/chrome.zip -r *
+
+zip-build-firefox:
+	mkdir -p artifacts && cd build && zip ../artifacts/firefox.zip -r *
 
 # To build a source archive, wanted by Mozilla reviewers. Include media subdir.
-srczip:
-	rm -rfv build
-	mkdir -p build
+# NOTE: we include the .git in the media archive so that it lines up with the output
+# of vite
+zip-src:
+	(rm -rfv build && mkdir -p artifacts build)
 	# archive the main repo
 	git archive --prefix=aw-watcher-web/ -o build/aw-watcher-web.zip HEAD
 	# archive the media subrepo
-	(cd media/ && git archive --prefix=aw-watcher-web/media/ -o ../build/media.zip HEAD)
-	(cd aw-client-js/ && git archive --prefix=aw-watcher-web/aw-client-js/ -o ../build/aw-client-js.zip HEAD)
+	(cd media/ && git archive --prefix=aw-watcher-web/media/ --add-file=.git -o ../build/media.zip HEAD)
 	# extract the archives into a single directory
 	(cd build && unzip -q aw-watcher-web.zip)
-	(cd build && unzip -q aw-client-js.zip)
 	(cd build && unzip -q media.zip)
 	# zip the whole thing
-	(cd build/aw-watcher-web && zip -r ../aw-watcher-web.zip *)
+	(cd build && zip -r ../artifacts/src.zip aw-watcher-web)
 	# clean up
-	(cd build && rm media.zip)
+	(cd build && rm -r aw-watcher-web media.zip aw-watcher-web.zip)
+
+#---------
+## Reproducibility
+
+test-reproducibility-setup:
+	mkdir -p artifacts build
+	(cd build && rm -rf aw-watcher-web && unzip -q ../artifacts/src.zip)
+
+# Tests whether the zipped src reliably builds the same as the archive
+test-reproducibility-chrome: zip-src build-chrome test-reproducibility-setup
+	(cd build/aw-watcher-web && make build-chrome && cp build.zip ../../artifacts/reproducibility-chrome.zip)
+	rm -r build/aw-watcher-web
+	wc -c artifacts/chrome.zip artifacts/reproducibility-chrome.zip | \
+		sort -n | \
+		cut -d' ' -f2 | \
+		uniq -c | \
+		grep -q ' 2 ' \
+	|| (echo "build artifacts not the same size" && exit 1)
 
-# Tests reproducibility of the build from srczip
-test-build-srczip: srczip build
-	(cd build/aw-watcher-web && make build)
-	@# check that aw-watcher-web.zip have the same size
-	@wc -c aw-watcher-web.zip build/aw-watcher-web/aw-watcher-web.zip | \
+# Tests whether the zipped src reliably builds the same as the archive
+test-reproducibility-firefox: zip-src build-firefox test-reproducibility-setup
+	(cd build/aw-watcher-web && make build-firefox && cp build.zip ../../artifacts/reproducibility-firefox.zip)
+	rm -r build/aw-watcher-web
+	wc -c aw-watcher-web.zip build/aw-watcher-web/aw-watcher-web.zip | \
 		sort -n | \
 		cut -d' ' -f2 | \
 		uniq -c | \

README.md

@@ -5,13 +5,12 @@
 
 A cross-browser WebExtension that serves as a web browser watcher for [ActivityWatch][activitywatch].
 
-
 ## Usage
 
 Install for your browser:
 
- - [Chrome][chrome]
- - [Firefox][firefox]
+-   [Chrome][chrome]
+-   [Firefox][firefox]
 
 [activitywatch]: https://github.com/ActivityWatch/activitywatch
 [firefox]: https://addons.mozilla.org/en-US/firefox/addon/aw-watcher-web/
@@ -25,17 +24,18 @@ Install for your browser:
 **NOTE:** Due to Mozilla Addon policy, this is not possibly with the Mozilla-hosted versions of the extension. You need to fork the extension and modify a hardcoded value to get this to work.
 
 Due to the issue mentioned above, a privacy notice has to be displayed to follow the Mozilla add-on policy. This can be pre-accepted by setting the following Firefox Enterprise Policy:
+
 ```json
 {
-  "policies": {
-    "3rdparty": {
-      "Extensions": {
-        "{ef87d84c-2127-493f-b952-5b4e744245bc}": {
-          "consentOfflineDataCollection": true
+    "policies": {
+        "3rdparty": {
+            "Extensions": {
+                "{ef87d84c-2127-493f-b952-5b4e744245bc}": {
+                    "consentOfflineDataCollection": true
+                }
+            }
         }
-      }
     }
-  }
 }
 ```