dev: Build the extension with Parcel

Author: marienfressinaud

.gitignore

@@ -1,2 +1,5 @@
-/node_modules
+/dist
 /web-ext-artifacts
+
+/node_modules
+/.parcel-cache

.parcelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@parcel/config-webextension"
+}

Makefile

@@ -8,18 +8,25 @@
 install: ## Install the dependencies
 	npm install
 
+.PHONY: watch
+watch: ## Watch and build the assets
+	rm -rf dist/dev_assets
+	npm run start:watcher
+
 .PHONY: run
 run: BROWSER ?= firefox
 run: ## Run the extension in a browser (can take a BROWSER argument)
 ifeq ($(BROWSER),chromium)
-	npm run start -- --target chromium
+	npm run start:browser -- --target chromium
 else
-	npm run start -- --target firefox-desktop
+	npm run start:browser -- --target firefox-desktop
 endif
 
 .PHONY: build
 build: ## Build the web extension
-	npm run build
+	rm -rf dist/assets
+	npm run build:assets
+	npm run build:artifact
 
 .PHONY: lint
 lint: LINTER ?= all
@@ -28,6 +35,8 @@ ifeq ($(LINTER), $(filter $(LINTER), all biome))
 	npm run lint:biome
 endif
 ifeq ($(LINTER), $(filter $(LINTER), all webext))
+	rm -rf dist/assets
+	npm run build:assets
 	npm run lint:webext
 endif
 

docs/development.md

@@ -13,6 +13,12 @@ Install the dependencies:
 $ make install
 ```
 
+Build the assets with the Parcel watcher:
+
+```console
+$ make watch
+```
+
 Run the extension in Firefox:
 
 ```console
@@ -39,3 +45,6 @@ You can run a specific linter with:
 $ make lint LINTER=biome
 $ make lint LINTER=webext
 ```
+
+Note that the webext linter runs over the `dist/assets` files and not the files under `src/`.
+This is to check that the final assets don't present any problems.

docs/upload.md

@@ -6,6 +6,8 @@ Build the extension with:
 $ make build
 ```
 
+It builds the assets under the `dist/` folder, and builds a ZIP archive under `web-ext-artifacts/`.
+
 ## Upload to the Firefox Add-ons store
 
 Go to [addons.mozilla.org/developers](https://addons.mozilla.org/fr/developers/) and login.