diff --git a/docs/Blocks.md b/docs/Blocks.md index e08bc5c4a..13fd9646b 100644 --- a/docs/Blocks.md +++ b/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: diff --git a/src/blocks/blockWebExt.test.ts b/src/blocks/blockWebExt.test.ts new file mode 100644 index 000000000..810713abb --- /dev/null +++ b/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 : + + 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], + }, + ], + } + `); + }); +}); diff --git a/src/blocks/blockWebExt.ts b/src/blocks/blockWebExt.ts new file mode 100644 index 000000000..05f4a5159 --- /dev/null +++ b/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 : + +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/"], + }), + ], + }; + }, +}); diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 9e705fd48..f085f7911 100644 --- a/src/blocks/index.ts +++ b/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"; diff --git a/src/template.ts b/src/template.ts index 9c7e5e44e..19205f2e5 100644 --- a/src/template.ts +++ b/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,