Skip to content

Commit 1982162

Browse files
JoshuaKGoldbergJoshuaKGoldberg
authored
feat: add blockWebExt for Web-ext builds (#2148)
## PR Checklist - [x] Addresses an existing open issue: fixes #2031 - [x] That issue was marked as [`status: accepting prs`](https://github.com/JoshuaKGoldberg/create-typescript-app/issues?q=is%3Aopen+is%3Aissue+label%3A%22status%3A+accepting+prs%22) - [x] Steps in [CONTRIBUTING.md](https://github.com/JoshuaKGoldberg/create-typescript-app/blob/main/.github/CONTRIBUTING.md) were taken ## Overview Adds an opt-in Block akin to `blockNcc`. It's based on the existing dev structure in https://github.com/JoshuaKGoldberg/refined-saved-replies. 🎁
1 parent ffb7e38 commit 1982162

File tree

5 files changed

+291
-0
lines changed

5 files changed

+291
-0
lines changed

‎docs/Blocks.md

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ This table summarizes each block and which base levels they're included in:
5353
| TypeScript | `--add-typescript`, `--exclude-typescript` | ✔️ | ✅ | 💯 |
5454
| Vitest | `--add-vitest`, `--exclude-vitest` | | ✅ | 💯 |
5555
| VS Code | `--add-vs-code`, `--exclude-vs-code` | | | 💯 |
56+
| Web-ext | `--add-web-ext`, `--exclude-web-ext` | | | |
5657

5758
For example, this uses ncc instead of the default tsup builder:
5859

‎src/blocks/blockWebExt.test.ts

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import { testBlock } from "bingo-stratum-testers";
2+
import { describe, expect, test } from "vitest";
3+
4+
import { blockWebExt } from "./blockWebExt.js";
5+
import { optionsBase } from "./options.fakes.js";
6+
7+
describe("blockWebExt", () => {
8+
test("production", () => {
9+
const creation = testBlock(blockWebExt, {
10+
options: optionsBase,
11+
});
12+
13+
expect(creation).toMatchInlineSnapshot(`
14+
{
15+
"addons": [
16+
{
17+
"addons": {
18+
"ignores": [
19+
"assets",
20+
],
21+
},
22+
"block": [Function],
23+
},
24+
{
25+
"addons": {
26+
"sections": {
27+
"Building": {
28+
"contents": "
29+
Run [ESBuild](https://esbuild.github.io) locally to build source files:
30+
31+
\`\`\`shell
32+
pnpm dev
33+
\`\`\`
34+
35+
Add \`--watch\` to run the builder in a watch mode that continuously re-builds as you save files:
36+
37+
\`\`\`shell
38+
pnpm dev --watch
39+
\`\`\`
40+
",
41+
"innerSections": [
42+
{
43+
"contents": "
44+
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.
45+
46+
> ♻️ Remember to reload the extension in \`chrome://extensions\` whenever you make changes locally!
47+
",
48+
"heading": "Local Development with Chrome",
49+
},
50+
{
51+
"contents": "
52+
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.
53+
54+
You'll then need to authorize the extension to run on <https://github.com>:
55+
56+
1. Find and select the _Extensions_ icon in the top right of Firefox
57+
2. Select the _"Manage Extension"_ gear icon next to _Refined Saved Replies_
58+
3. Select the _"Always Allow on github.com"_ option
59+
60+
> ♻️ Remember to reload the extension in \`about:debugging#/runtime/this-firefox\` whenever you make changes locally!
61+
",
62+
"heading": "Local Development with Firefox",
63+
},
64+
{
65+
"contents": "
66+
Run [\`web-ext\`](https://extensionworkshop.com) to build a production-ready \`.zip\` under \`./web-ext-artifacts/\`:
67+
68+
\`\`\`shell
69+
pnpm build
70+
\`\`\`
71+
72+
Then upload that \`./web-ext-artifacts/refined_saved_replies-*.zip\` file to:
73+
74+
- [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
75+
- [Firefox Add-ons Developer Hub](https://addons.mozilla.org/en-US/developers/addon/submit/distribution)
76+
",
77+
"heading": "Production Builds",
78+
},
79+
],
80+
},
81+
"Linting": {
82+
"contents": {
83+
"items": [
84+
"- \`pnpm lint:web-ext\` ([web-ext](https://extensionworkshop.com)): Lints browser extension metadata after \`pnpm dev\` creates local files",
85+
],
86+
},
87+
},
88+
},
89+
},
90+
"block": [Function],
91+
},
92+
{
93+
"addons": {
94+
"jobs": [
95+
{
96+
"name": "Build",
97+
"steps": [
98+
{
99+
"run": "pnpm build",
100+
},
101+
],
102+
},
103+
{
104+
"name": "Lint Web-ext",
105+
"steps": [
106+
{
107+
"run": "pnpm dev",
108+
},
109+
{
110+
"run": "pnpm lint:web-ext",
111+
},
112+
],
113+
},
114+
],
115+
},
116+
"block": [Function],
117+
},
118+
{
119+
"addons": {
120+
"ignores": [
121+
"*.zip",
122+
"web-ext-artifacts",
123+
],
124+
},
125+
"block": [Function],
126+
},
127+
{
128+
"addons": {
129+
"ignores": [
130+
"assets/",
131+
],
132+
},
133+
"block": [Function],
134+
},
135+
{
136+
"addons": {
137+
"properties": {
138+
"devDependencies": {
139+
"esbuild": "^0.25.0",
140+
"web-ext": "^8.3.0",
141+
},
142+
"scripts": {
143+
"build": "web-ext build --overwrite-dest",
144+
"dev": "esbuild src/content-script.ts --bundle --minify --outfile=lib/content-script.js --sourcemap",
145+
"lint:web-ext": "web-ext lint",
146+
},
147+
},
148+
},
149+
"block": [Function],
150+
},
151+
{
152+
"addons": {
153+
"ignores": [
154+
"assets/",
155+
],
156+
},
157+
"block": [Function],
158+
},
159+
],
160+
}
161+
`);
162+
});
163+
});

‎src/blocks/blockWebExt.ts

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { base } from "../base.js";
2+
import { blockCSpell } from "./blockCSpell.js";
3+
import { blockDevelopmentDocs } from "./blockDevelopmentDocs.js";
4+
import { blockGitHubActionsCI } from "./blockGitHubActionsCI.js";
5+
import { blockGitignore } from "./blockGitignore.js";
6+
import { blockMarkdownlint } from "./blockMarkdownlint.js";
7+
import { blockPackageJson } from "./blockPackageJson.js";
8+
import { blockPrettier } from "./blockPrettier.js";
9+
10+
export const blockWebExt = base.createBlock({
11+
about: {
12+
name: "Web-ext",
13+
},
14+
produce() {
15+
return {
16+
addons: [
17+
blockCSpell({
18+
ignores: ["assets"],
19+
}),
20+
blockDevelopmentDocs({
21+
sections: {
22+
Building: {
23+
contents: `
24+
Run [ESBuild](https://esbuild.github.io) locally to build source files:
25+
26+
\`\`\`shell
27+
pnpm dev
28+
\`\`\`
29+
30+
Add \`--watch\` to run the builder in a watch mode that continuously re-builds as you save files:
31+
32+
\`\`\`shell
33+
pnpm dev --watch
34+
\`\`\`
35+
`,
36+
innerSections: [
37+
{
38+
contents: `
39+
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.
40+
41+
> ♻️ Remember to reload the extension in \`chrome://extensions\` whenever you make changes locally!
42+
`,
43+
heading: "Local Development with Chrome",
44+
},
45+
{
46+
contents: `
47+
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.
48+
49+
You'll then need to authorize the extension to run on <https://github.com>:
50+
51+
1. Find and select the _Extensions_ icon in the top right of Firefox
52+
2. Select the _"Manage Extension"_ gear icon next to _Refined Saved Replies_
53+
3. Select the _"Always Allow on github.com"_ option
54+
55+
> ♻️ Remember to reload the extension in \`about:debugging#/runtime/this-firefox\` whenever you make changes locally!
56+
`,
57+
heading: "Local Development with Firefox",
58+
},
59+
{
60+
contents: `
61+
Run [\`web-ext\`](https://extensionworkshop.com) to build a production-ready \`.zip\` under \`./web-ext-artifacts/\`:
62+
63+
\`\`\`shell
64+
pnpm build
65+
\`\`\`
66+
67+
Then upload that \`./web-ext-artifacts/refined_saved_replies-*.zip\` file to:
68+
69+
- [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/devconsole)
70+
- [Firefox Add-ons Developer Hub](https://addons.mozilla.org/en-US/developers/addon/submit/distribution)
71+
`,
72+
heading: "Production Builds",
73+
},
74+
],
75+
},
76+
Linting: {
77+
contents: {
78+
items: [
79+
`- \`pnpm lint:web-ext\` ([web-ext](https://extensionworkshop.com)): Lints browser extension metadata after \`pnpm dev\` creates local files`,
80+
],
81+
},
82+
},
83+
},
84+
}),
85+
blockGitHubActionsCI({
86+
jobs: [
87+
{
88+
name: "Build",
89+
steps: [{ run: "pnpm build" }],
90+
},
91+
{
92+
name: "Lint Web-ext",
93+
steps: [{ run: "pnpm dev" }, { run: "pnpm lint:web-ext" }],
94+
},
95+
],
96+
}),
97+
blockGitignore({
98+
ignores: ["*.zip", "web-ext-artifacts"],
99+
}),
100+
blockMarkdownlint({
101+
ignores: ["assets/"],
102+
}),
103+
blockPackageJson({
104+
properties: {
105+
devDependencies: {
106+
esbuild: "^0.25.0",
107+
"web-ext": "^8.3.0",
108+
},
109+
scripts: {
110+
build: "web-ext build --overwrite-dest",
111+
dev: "esbuild src/content-script.ts --bundle --minify --outfile=lib/content-script.js --sourcemap",
112+
"lint:web-ext": "web-ext lint",
113+
},
114+
},
115+
}),
116+
blockPrettier({
117+
ignores: ["assets/"],
118+
}),
119+
],
120+
};
121+
},
122+
});

‎src/blocks/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import { blockTSup } from "./blockTSup.js";
4444
import { blockTypeScript } from "./blockTypeScript.js";
4545
import { blockVitest } from "./blockVitest.js";
4646
import { blockVSCode } from "./blockVSCode.js";
47+
import { blockWebExt } from "./blockWebExt.js";
4748

4849
export const blocks = {
4950
blockAllContributors,
@@ -92,6 +93,7 @@ export const blocks = {
9293
blockTypeScript,
9394
blockVitest,
9495
blockVSCode,
96+
blockWebExt,
9597
};
9698

9799
export { blockAllContributors } from "./blockAllContributors.js";
@@ -141,3 +143,4 @@ export { blockTSup } from "./blockTSup.js";
141143
export { blockTypeScript } from "./blockTypeScript.js";
142144
export { blockVitest } from "./blockVitest.js";
143145
export { blockVSCode } from "./blockVSCode.js";
146+
export { blockWebExt } from "./blockWebExt.js";

‎src/template.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { blockESLintPlugin } from "./blocks/blockESLintPlugin.js";
55
import { blockNcc } from "./blocks/blockNcc.js";
66
import { blockRemoveDependencies } from "./blocks/blockRemoveDependencies.js";
77
import { blockRemoveFiles } from "./blocks/blockRemoveFiles.js";
8+
import { blockWebExt } from "./blocks/blockWebExt.js";
89
import { presetCommon } from "./presets/common.js";
910
import { presetEverything } from "./presets/everything.js";
1011
import { presetMinimal } from "./presets/minimal.js";
@@ -24,6 +25,7 @@ export const template = base.createStratumTemplate({
2425
blockNcc,
2526
blockRemoveDependencies,
2627
blockRemoveFiles,
28+
blockWebExt,
2729
],
2830
presets: [presetMinimal, presetCommon, presetEverything],
2931
suggested: presetCommon,

0 commit comments

Comments
 (0)