feat: add blockWebExt for Web-ext builds

docs/Blocks.md

@@ -53,6 +53,7 @@ This table summarizes each block and which base levels they're included in:
 | TypeScript                   | `--add-typescript`, `--exclude-typescript`                                     | ✔️      | ✅     | 💯         |
 | Vitest                       | `--add-vitest`, `--exclude-vitest`                                             |         | ✅     | 💯         |
 | VS Code                      | `--add-vs-code`, `--exclude-vs-code`                                           |         |        | 💯         |
+| Web-ext                      | `--add-web-ext`, `--exclude-web-ext`                                           |         |        |            |
 
 For example, this uses ncc instead of the default tsup builder:
 

src/blocks/blockWebExt.test.ts

@@ -0,0 +1,163 @@
+import { testBlock } from "bingo-stratum-testers";
+import { describe, expect, test } from "vitest";
+
+import { blockWebExt } from "./blockWebExt.js";
+import { optionsBase } from "./options.fakes.js";
+
+describe("blockWebExt", () => {
+	test("production", () => {
+		const creation = testBlock(blockWebExt, {
+			options: optionsBase,
+		});
+
+		expect(creation).toMatchInlineSnapshot(`
+			{
+			  "addons": [
+			    {
+			      "addons": {
+			        "ignores": [
+			          "assets",
+			        ],
+			      },
+			      "block": [Function],
+			    },
+			    {
+			      "addons": {
+			        "sections": {
+			          "Building": {
+			            "contents": "
+			Run [ESBuild](https://esbuild.github.io) locally to build source files:
+
+			\`\`\`shell
+			pnpm dev
+			\`\`\`
+
+			Add \`--watch\` to run the builder in a watch mode that continuously re-builds as you save files:
+
+			\`\`\`shell
+			pnpm dev --watch
+			\`\`\`
+			",
+			            "innerSections": [
+			              {
+			                "contents": "
+			Follow Google Chrome's _[Load an unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/#unpacked)_ guide to load this repository's directory as an extension locally.
+
+			> ♻️ Remember to reload the extension in \`chrome://extensions\` whenever you make changes locally!
+			",
+			                "heading": "Local Development with Chrome",
+			              },
+			              {
+			                "contents": "
+			Follow Firefox's _[Temporary installation in Firefox](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/)_ guide to load this repository's directory as an extension locally.
+
+			You'll then need to authorize the extension to run on <https://github.com>:
+
+			1. Find and select the _Extensions_ icon in the top right of Firefox
+			2. Select the _"Manage Extension"_ gear icon next to _Refined Saved Replies_
+			3. Select the _"Always Allow on github.com"_ option
+
+			> ♻️ Remember to reload the extension in \`about:debugging#/runtime/this-firefox\` whenever you make changes locally!
+			",
+			                "heading": "Local Development with Firefox",
+			              },
+			              {
+			                "contents": "
+			Run [\`web-ext\`](https://extensionworkshop.com) to build a production-ready \`.zip\` under \`./web-ext-artifacts/\`:
+
+			\`\`\`shell
+			pnpm build
+			\`\`\`
+
+			Then upload that \`./web-ext-artifacts/refined_saved_replies-*.zip\` file to:
+
+			- [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
+			- [Firefox Add-ons Developer Hub](https://addons.mozilla.org/en-US/developers/addon/submit/distribution)
+			",
+			                "heading": "Production Builds",
+			              },
+			            ],
+			          },
+			          "Linting": {
+			            "contents": {
+			              "items": [
+			                "- \`pnpm lint:web-ext\` ([web-ext](https://extensionworkshop.com)): Lints browser extension metadata after \`pnpm dev\` creates local files",
+			              ],
+			            },
+			          },
+			        },
+			      },
+			      "block": [Function],
+			    },
+			    {
+			      "addons": {
+			        "jobs": [
+			          {
+			            "name": "Build",
+			            "steps": [
+			              {
+			                "run": "pnpm build",
+			              },
+			            ],
+			          },
+			          {
+			            "name": "Lint Web-ext",
+			            "steps": [
+			              {
+			                "run": "pnpm dev",
+			              },
+			              {
+			                "run": "pnpm lint:web-ext",
+			              },
+			            ],
+			          },
+			        ],
+			      },
+			      "block": [Function],
+			    },
+			    {
+			      "addons": {
+			        "ignores": [
+			          "*.zip",
+			          "web-ext-artifacts",
+			        ],
+			      },
+			      "block": [Function],
+			    },
+			    {
+			      "addons": {
+			        "ignores": [
+			          "assets/",
+			        ],
+			      },
+			      "block": [Function],
+			    },
+			    {
+			      "addons": {
+			        "properties": {
+			          "devDependencies": {
+			            "esbuild": "^0.25.0",
+			            "web-ext": "^8.3.0",
+			          },
+			          "scripts": {
+			            "build": "web-ext build --overwrite-dest",
+			            "dev": "esbuild src/content-script.ts --bundle --minify --outfile=lib/content-script.js --sourcemap",
+			            "lint:web-ext": "web-ext lint",
+			          },
+			        },
+			      },
+			      "block": [Function],
+			    },
+			    {
+			      "addons": {
+			        "ignores": [
+			          "assets/",
+			        ],
+			      },
+			      "block": [Function],
+			    },
+			  ],
+			}
+		`);
+	});
+});

src/blocks/blockWebExt.ts

@@ -0,0 +1,122 @@
+import { base } from "../base.js";
+import { blockCSpell } from "./blockCSpell.js";
+import { blockDevelopmentDocs } from "./blockDevelopmentDocs.js";
+import { blockGitHubActionsCI } from "./blockGitHubActionsCI.js";
+import { blockGitignore } from "./blockGitignore.js";
+import { blockMarkdownlint } from "./blockMarkdownlint.js";
+import { blockPackageJson } from "./blockPackageJson.js";
+import { blockPrettier } from "./blockPrettier.js";
+
+export const blockWebExt = base.createBlock({
+	about: {
+		name: "Web-ext",
+	},
+	produce() {
+		return {
+			addons: [
+				blockCSpell({
+					ignores: ["assets"],
+				}),
+				blockDevelopmentDocs({
+					sections: {
+						Building: {
+							contents: `
+Run [ESBuild](https://esbuild.github.io) locally to build source files:
+
+\`\`\`shell
+pnpm dev
+\`\`\`
+
+Add \`--watch\` to run the builder in a watch mode that continuously re-builds as you save files:
+
+\`\`\`shell
+pnpm dev --watch
+\`\`\`
+`,
+							innerSections: [
+								{
+									contents: `
+Follow Google Chrome's _[Load an unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/#unpacked)_ guide to load this repository's directory as an extension locally.
+
+> ♻️ Remember to reload the extension in \`chrome://extensions\` whenever you make changes locally!
+`,
+									heading: "Local Development with Chrome",
+								},
+								{
+									contents: `
+Follow Firefox's _[Temporary installation in Firefox](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/)_ guide to load this repository's directory as an extension locally.
+
+You'll then need to authorize the extension to run on <https://github.com>:
+
+1. Find and select the _Extensions_ icon in the top right of Firefox
+2. Select the _"Manage Extension"_ gear icon next to _Refined Saved Replies_
+3. Select the _"Always Allow on github.com"_ option
+
+> ♻️ Remember to reload the extension in \`about:debugging#/runtime/this-firefox\` whenever you make changes locally!
+`,
+									heading: "Local Development with Firefox",
+								},
+								{
+									contents: `
+Run [\`web-ext\`](https://extensionworkshop.com) to build a production-ready \`.zip\` under \`./web-ext-artifacts/\`:
+
+\`\`\`shell
+pnpm build
+\`\`\`
+
+Then upload that \`./web-ext-artifacts/refined_saved_replies-*.zip\` file to:
+
+- [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
+- [Firefox Add-ons Developer Hub](https://addons.mozilla.org/en-US/developers/addon/submit/distribution)
+`,
+									heading: "Production Builds",
+								},
+							],
+						},
+						Linting: {
+							contents: {
+								items: [
+									`- \`pnpm lint:web-ext\` ([web-ext](https://extensionworkshop.com)): Lints browser extension metadata after \`pnpm dev\` creates local files`,
+								],
+							},
+						},
+					},
+				}),
+				blockGitHubActionsCI({
+					jobs: [
+						{
+							name: "Build",
+							steps: [{ run: "pnpm build" }],
+						},
+						{
+							name: "Lint Web-ext",
+							steps: [{ run: "pnpm dev" }, { run: "pnpm lint:web-ext" }],
+						},
+					],
+				}),
+				blockGitignore({
+					ignores: ["*.zip", "web-ext-artifacts"],
+				}),
+				blockMarkdownlint({
+					ignores: ["assets/"],
+				}),
+				blockPackageJson({
+					properties: {
+						devDependencies: {
+							esbuild: "^0.25.0",
+							"web-ext": "^8.3.0",
+						},
+						scripts: {
+							build: "web-ext build --overwrite-dest",
+							dev: "esbuild src/content-script.ts --bundle --minify --outfile=lib/content-script.js --sourcemap",
+							"lint:web-ext": "web-ext lint",
+						},
+					},
+				}),
+				blockPrettier({
+					ignores: ["assets/"],
+				}),
+			],
+		};
+	},
+});

src/blocks/index.ts

@@ -44,6 +44,7 @@ import { blockTSup } from "./blockTSup.js";
 import { blockTypeScript } from "./blockTypeScript.js";
 import { blockVitest } from "./blockVitest.js";
 import { blockVSCode } from "./blockVSCode.js";
+import { blockWebExt } from "./blockWebExt.js";
 
 export const blocks = {
 	blockAllContributors,
@@ -92,6 +93,7 @@ export const blocks = {
 	blockTypeScript,
 	blockVitest,
 	blockVSCode,
+	blockWebExt,
 };
 
 export { blockAllContributors } from "./blockAllContributors.js";
@@ -141,3 +143,4 @@ export { blockTSup } from "./blockTSup.js";
 export { blockTypeScript } from "./blockTypeScript.js";
 export { blockVitest } from "./blockVitest.js";
 export { blockVSCode } from "./blockVSCode.js";
+export { blockWebExt } from "./blockWebExt.js";

src/template.ts

@@ -5,6 +5,7 @@ import { blockESLintPlugin } from "./blocks/blockESLintPlugin.js";
 import { blockNcc } from "./blocks/blockNcc.js";
 import { blockRemoveDependencies } from "./blocks/blockRemoveDependencies.js";
 import { blockRemoveFiles } from "./blocks/blockRemoveFiles.js";
+import { blockWebExt } from "./blocks/blockWebExt.js";
 import { presetCommon } from "./presets/common.js";
 import { presetEverything } from "./presets/everything.js";
 import { presetMinimal } from "./presets/minimal.js";
@@ -24,6 +25,7 @@ export const template = base.createStratumTemplate({
 		blockNcc,
 		blockRemoveDependencies,
 		blockRemoveFiles,
+		blockWebExt,
 	],
 	presets: [presetMinimal, presetCommon, presetEverything],
 	suggested: presetCommon,