fregante · fregante · Mar 3, 2021 · Feb 17, 2021 · Feb 17, 2021 · Feb 17, 2021
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 yarn.lock
 distribution
+.parcel-cache
diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,3 @@
+{
+	"extends": "@parcel/config-webextension"
+}
diff --git a/.terserrc b/.terserrc
@@ -0,0 +1,7 @@
+{
+	"mangle": false,
+	"output": {
+		"beautify": true,
+		"indent_level": 2
+	}
+}
diff --git a/package.json b/package.json
@@ -1,21 +1,30 @@
 {
 	"private": true,
 	"scripts": {
-		"build": "webpack --mode=production",
+		"build": "parcel build source/manifest.json --no-content-hash --no-source-maps --dist-dir distribution --no-cache --detailed-report 0",
 		"lint": "run-p lint:*",
 		"lint-fix": "run-p 'lint:* -- --fix'",
 		"lint:css": "stylelint source/**/*.css",
 		"lint:js": "xo",
 		"test": "run-p lint:* build",
-		"watch": "webpack --mode=development --watch"
+		"watch": "parcel watch source/manifest.json --dist-dir distribution --no-cache --no-hmr"
 	},
+	"browserslist": [
+		"last 1 Chrome version",
+		"last 1 Firefox version"
+	],
 	"xo": {
 		"envs": [
 			"browser"
 		],
-		"globals": [
-			"browser"
-		]
+		"rules": {
+			"no-unused-vars": [
+				"error",
+				{
+					"varsIgnorePattern": "browser"
+				}
+			]
+		}
 	},
 	"stylelint": {
 		"extends": "stylelint-config-xo"
@@ -25,14 +34,23 @@
 		"webextension-polyfill": "^0.7.0"
 	},
 	"devDependencies": {
-		"copy-webpack-plugin": "^5.0.3",
+		"@parcel/config-webextension": "^2.0.0-nightly.2220",
+		"@parcel/optimizer-cssnano": "^2.0.0-nightly.599",
+		"@parcel/optimizer-htmlnano": "^2.0.0-nightly.599",
+		"@parcel/packager-css": "^2.0.0-nightly.599",
+		"@parcel/packager-html": "^2.0.0-nightly.599",
+		"@parcel/transformer-css": "^2.0.0-nightly.599",
+		"@parcel/transformer-html": "^2.0.0-nightly.598",
+		"@parcel/transformer-postcss": "^2.0.0-nightly.599",
+		"@parcel/transformer-posthtml": "^2.0.0-nightly.598",
+		"@parcel/transformer-webextension": "^2.0.0-nightly.2220",
 		"npm-run-all": "^4.1.5",
-		"size-plugin": "^1.2.0",
+		"parcel": "^2.0.0-nightly.596",
 		"stylelint": "^13.10.0",
 		"stylelint-config-xo": "^0.20.0",
-		"terser-webpack-plugin": "^1.3.0",
-		"webpack": "^4.36.1",
-		"webpack-cli": "^3.3.6",
 		"xo": "^0.37.1"
+	},
+	"webExt": {
+		"sourceDir": "distribution"
 	}
 }
diff --git a/readme.md b/readme.md
@@ -5,24 +5,22 @@
 [link-ngh]: https://github.com/sindresorhus/notifier-for-github
 [link-hfog]: https://github.com/sindresorhus/hide-files-on-github
 [link-tsconfig]: https://github.com/sindresorhus/tsconfig
-[link-xo-ts]: https://github.com/xojs/eslint-config-xo-typescript
 [link-options-sync]: https://github.com/fregante/webext-options-sync
 [link-cws-keys]: https://github.com/DrewML/chrome-webstore-upload/blob/master/How%20to%20generate%20Google%20API%20keys.md
 [link-amo-keys]: https://addons.mozilla.org/en-US/developers/addon/api/key
 
-> Barebones boilerplate with webpack, options handler and auto-publishing.
+> Barebones boilerplate with Parcel 2, options handler and auto-publishing.
 
 ![Sample extension output](media/previewer.png)
 
 ## Features
 
+- Use npm dependencies thanks to Parcel 2.
 - Use modern Promise-based `browser.*` APIs [webextension-polyfill][link-webext-polyfill].
 - [Auto-syncing options](#auto-syncing-options).
 - [Auto-publishing](#publishing) with auto-versioning and support for manual releases.
 - [Extensive configuration documentation](#configuration).
 
-This extension template is heavily inspired by [refined-github][link-rgh], [notifier-for-github][link-ngh], and [hide-files-on-github][link-hfog] browser extensions. You can always refer to these browser extensions' source code if you find anything confusing on how to create a new extension.
-
 ## How to use this template
 
 Click [<kbd>Use this template</kbd>](https://github.com/fregante/browser-extension-template/generate) and make a copy of your own. 😉
@@ -31,157 +29,38 @@ Click [<kbd>Use this template</kbd>](https://github.com/fregante/browser-extensi
 
 The extension doesn't target any specific ECMAScript environment or provide any transpiling by default. The extensions output will be the same ECMAScript you write. This allows us to always target the latest browser version, which is a good practice you should be following.
 
-### Webpack
-
-#### Transpiling using Babel
-
-The template bakes in a pretty basic webpack config, with no transpiling. To setup transpiling using Babel follow the following configuration steps.
-
-1. Install Babel packages and respective loader for webpack.
-
-	```sh
-	npm i --save-dev @babel/core @babel/preset-env babel-loader
-	```
-
-2. In `webpack.config.js`, add the following rule to process JS files.
-
-	```js
-	module: {
-		rules: [
-			{
-				test: /\.js$/,
-				exclude: /node_modules/,
-				loader: 'babel-loader'
-			}
-		]
-	}
-	```
-
-3. Target respective browsers using `.babelrc`.
-
-	```json
-	{
-		"presets": [
-			[
-				"@babel/preset-env",
-				{
-					"targets": {
-						"chrome": "74",
-						"firefox": "67"
-					}
-				}
-			]
-		]
-	}
-	```
-
-#### Extracting CSS
-
-If you will be writing any code that will be importing CSS files from JS files, then you will be needing `mini-css-extract-plugin` to extract this imported CSS into its own file.
-
-1. Install the webpack plugin.
-
-	```sh
-	npm i --save-dev mini-css-extract-plugin
-	```
-
-2. Modify the webpack config as mentioned to let this plugin handle CSS imports.
-
-	```js
-	// Import plugin
-	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-	// Under `module.rules`
-	{
-		test: /\.css$/,
-		use: [
-			MiniCssExtractPlugin.loader,
-			'css-loader'
-		]
-	}
-
-	// Under `plugins`
-	new MiniCssExtractPlugin({
-		filename: 'content.css'
-	})
-	```
-
-#### TypeScript
-
-TypeScript and Babel configs conflict each other, so you can only use one of these configuration types at any point.
-
-1. Install TypeScript and respective loader for webpack
-
-	```sh
-	npm i --save-dev typescript ts-loader @types/firefox-webext-browser
-	```
-
-2. Use the following webpack rule in the config file.
-
-	```js
-	{
-		test: /\.(js|ts|tsx)$/,
-		loader: 'ts-loader',
-		exclude: /node_modules/
-	},
-	```
-3. Ask webpack to [resolve ts modules/imports](https://stackoverflow.com/questions/43595555/webpack-cant-resolve-typescript-modules) by adding this to your `webpack.config.js`:
-	```js
-	resolve: {
-		extensions: ['.ts', '.js']
-	}
-	```
-
-4. Use the following as `tsconfig.json`, uses [sindresorhus/tsconfig][link-tsconfig] (install it as dependency before using).
-
-	```json
-	{
-		"extends": "@sindresorhus/tsconfig",
-		"compilerOptions": {
-			"target": "esnext",
-			"declaration": false
-		},
-		"include": [
-			"source"
-		]
-	}
-	```
-TypeScript requires additional configuration depending on how you set it up, like [linting][link-xo-ts].
+### Parcel 2
+
+Being based on Parcel 2 and its [WebExtension transformer](https://v2.parceljs.org/recipes/web-extension/), you get all the good parts:
+
+- Browserlist-based code transpiling (which defaults to just the latest Chrome and Firefox versions)
+- Automatically picks up any new file specified in `manifest.json`
+- Adding TypeScript support is as easy as renaming your files to `.ts`; [sindresorhus/tsconfig][link-tsconfig] is also advised in that case.
 
 ### Auto-syncing options
 
 Options are managed by [fregante/webext-options-sync][link-options-sync], which auto-saves and auto-restores the options form, applies defaults and runs migrations.
 
 ### Publishing
 
-It's possible to publish to both the Chrome Web Store and Mozilla Addons at once by creating these ENV variables:
+It's possible to automatically publish to both the Chrome Web Store and Mozilla Addons at once by adding these secrets on GitHub Actions:
 
 1. `CLIENT_ID`, `CLIENT_SECRET`, and `REFRESH_TOKEN` from [Google APIs][link-cws-keys].
 2. `WEB_EXT_API_KEY`, and `WEB_EXT_API_SECRET` from [AMO][link-amo-keys].
 
-And then running:
-
-```sh
-npm run release
-```
-
-This will:
+The GitHub Actions workflow will:
 
 1. Build the extension
-2. Create a version number based on the current UTC time, like [`19.6.16.428`](https://github.com/fregante/daily-version) and sets it in the manifest.json
+2. Create a version number based on the current UTC date time, like [`19.6.16`](https://github.com/fregante/daily-version-action) and sets it in the manifest.json
 3. Deploy it to both stores
 
 #### Auto-publishing
 
-Thanks to the included [GitHub Action Workflows](.github/workflows), if you set up those ENVs in the repo's Settings, the deployment will automatically happen:
+Thanks to the included [GitHub Action Workflows](.github/workflows), if you set up those secrets in the repo's Settings, the deployment will automatically happen:
 
 - on a schedule, by default [every week](.github/workflows/deploy-automatic.yml) (but only if there are any new commits in the last tag)
 - manually, by clicking ["Run workflow"](https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/) in the Actions tab.
 
-### License
-
-This browser extension template is released under [CC0](#license) and mentioned below. There is no `license` file included in here, but when you clone this template, you should include your own license file for the specific license you choose to use.
-
 ## Credits
 
 Extension icon made by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0).
@@ -192,4 +71,6 @@ Extension icon made by [Freepik](https://www.freepik.com) from [www.flaticon.com
 
 ## License
 
+This browser extension template is released under [CC0](#license) and mentioned below. There is no `license` file included in here, but when you clone this template, you should include your own license file for the specific license you choose to use.
+
 [![CC0](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)
diff --git a/source/manifest.json b/source/manifest.json
@@ -24,7 +24,6 @@
 	"background": {
 		"persistent": false,
 		"scripts": [
-			"browser-polyfill.min.js",
 			"background.js"
 		]
 	}

diff --git a/source/options.html b/source/options.html
@@ -28,5 +28,4 @@ <h3>Color Previewer</h3>
 	</div>
 </form>
 
-<script src="browser-polyfill.min.js"></script>
 <script src="options.js"></script>
diff --git a/source/options.js b/source/options.js
@@ -1,3 +1,6 @@
+// Don't forget to import this wherever you use it
+import browser from 'webextension-polyfill';
+
 import optionsStorage from './options-storage.js';
 
 optionsStorage.syncForm('#options-form');

diff --git a/webpack.config.js b/webpack.config.js