From fd3052c523756065aee98405402f1f50406ee986 Mon Sep 17 00:00:00 2001 From: JoeyDoey Date: Sat, 23 Mar 2024 14:18:30 -0700 Subject: [PATCH 1/3] feat(manifests): cross-browesr manifest handling; dev/build commands --- packages/cli/src/commands/build.ts | 13 ++++- packages/cli/src/commands/codemod.ts | 12 ---- packages/cli/src/commands/dev.ts | 11 +++- packages/cli/src/lib/make/utils/make-bed.ts | 9 ++- .../lib/make/utils/write-bedframe-config.ts | 31 +++++++--- .../cli/src/lib/make/utils/write-manifests.ts | 58 +++++++++---------- .../src/lib/make/utils/write-package-json.ts | 12 ++-- .../src/lib/make/utils/write-vite-config.ts | 5 +- packages/core/src/lib/create-bedframe.ts | 44 +++++++------- packages/core/src/lib/create-template.ts | 13 ++--- packages/core/src/lib/get-manifest.ts | 16 ++++- packages/core/src/lib/types.ts | 4 +- 12 files changed, 130 insertions(+), 98 deletions(-) diff --git a/packages/cli/src/commands/build.ts b/packages/cli/src/commands/build.ts index f4dcfd63..98325f76 100644 --- a/packages/cli/src/commands/build.ts +++ b/packages/cli/src/commands/build.ts @@ -12,11 +12,11 @@ import { getBrowserArray } from '../lib/get-browser-array' * @return {*} {Promise} */ export async function executeBuildScript( - browsers: AnyCase[] = [], + browsers: AnyCase[], ): Promise { const browserColors = ['magenta', 'green', 'cyan', 'yellow', 'red', 'blue'] - const colorMap: Record = {} + browsers.map((browserName, index) => { colorMap[browserName] = browserColors[index % browserColors.length] }) @@ -65,5 +65,12 @@ export const buildCommand = new Command('build') .arguments('[browsers]') .action(async (browser) => { const browserArray = getBrowserArray() - executeBuildScript(!browser ? browserArray : browser) + let cliBrowsers: AnyCase[] = [] + if (!browser) { + cliBrowsers = browserArray + } else { + cliBrowsers = Array.isArray(browser) ? browser : browser.split(',') + } + + browser ? executeBuildScript(cliBrowsers) : executeBuildScript(browserArray) }) diff --git a/packages/cli/src/commands/codemod.ts b/packages/cli/src/commands/codemod.ts index c03c5dc9..7464df14 100644 --- a/packages/cli/src/commands/codemod.ts +++ b/packages/cli/src/commands/codemod.ts @@ -70,15 +70,3 @@ export const codeModCommand = new Command('codemod') } } }) -/* -interface CodeMod { - browser: AnyCase | AnyCase[] - options: { - distDir: string - manifest boolean - features: boolean - } -} -codeMod(browser, options) - -*/ diff --git a/packages/cli/src/commands/dev.ts b/packages/cli/src/commands/dev.ts index d46a2720..98104e00 100644 --- a/packages/cli/src/commands/dev.ts +++ b/packages/cli/src/commands/dev.ts @@ -15,9 +15,8 @@ async function executeDevScript( browsers: AnyCase[] = [], // maybe default to `getBrowserList() ?? allBrowsers` here ?? ): Promise { const browserColors = ['magenta', 'green', 'cyan', 'yellow', 'red', 'blue'] - // TO diddly DO: ^^^ we have color/ browser helper functions in @bedframe/core... use that - const colorMap: Record = {} + browsers.map((browserName, index) => { colorMap[browserName] = browserColors[index % browserColors.length] }) @@ -94,6 +93,12 @@ export const devCommand = new Command('dev') .arguments('[browsers]') .action(async (browser) => { const browserArray = getBrowserArray() + let cliBrowsers: AnyCase[] = [] + if (!browser) { + cliBrowsers = browserArray + } else { + cliBrowsers = Array.isArray(browser) ? browser : browser.split(',') + } - !browser ? executeDevScript(browserArray) : executeDevScript(browser) + browser ? executeDevScript(cliBrowsers) : executeDevScript(browserArray) }) diff --git a/packages/cli/src/lib/make/utils/make-bed.ts b/packages/cli/src/lib/make/utils/make-bed.ts index 35165e25..1cd51f86 100644 --- a/packages/cli/src/lib/make/utils/make-bed.ts +++ b/packages/cli/src/lib/make/utils/make-bed.ts @@ -163,12 +163,14 @@ export async function makeBed(response: PromptsResponse) { }, { title: ` ${dim('│ ├ ○')} workflows${dim('/')}`, + enabled: () => git, task: () => {}, }, { title: ` ${dim('│ │ └ ○')} mvp${dim('.yml')} ${dim( '👈 the M V P of your B E D !', )}`, + enabled: () => git, task: () => {}, }, { @@ -365,7 +367,12 @@ export async function makeBed(response: PromptsResponse) { }) .catch((error) => console.error(error)) } - copyOverridePage(overridePage, getOverridePage(overridePage).path) + if (overridePage !== 'none') { + copyOverridePage( + overridePage, + getOverridePage(overridePage).path, + ) + } if (optionsPage !== 'none') { ensureDir(pagesDir) .then(() => { diff --git a/packages/cli/src/lib/make/utils/write-bedframe-config.ts b/packages/cli/src/lib/make/utils/write-bedframe-config.ts index 452d4368..630b8553 100644 --- a/packages/cli/src/lib/make/utils/write-bedframe-config.ts +++ b/packages/cli/src/lib/make/utils/write-bedframe-config.ts @@ -52,6 +52,10 @@ export function writeBedframeConfig(response: Answers): void { }) .join('\n') + const keyValue = (feature: any) => { + return feature ? `feature: ${feature},` : '' + } + const fileContent = `import { createBedframe } from '@bedframe/core' ${browsers} @@ -59,8 +63,8 @@ export default createBedframe({ browser: [${browser.map((browserName: AnyCase) => `${browserName}.browser`)}], extension: { type: '${extensionType}', - ${overridePage ? `overrides: '${overridePage}',` : 'none'} - options: '${optionsPage}', + ${overridePage !== 'none' ? `overrides: '${overridePage}',` : ''} + ${optionsPage !== 'none' ? `options: '${optionsPage}',` : ''} manifest: [${browser.map((browserName: AnyCase) => browserName)}], pages: { ${ @@ -103,7 +107,7 @@ export default createBedframe({ }, ], }, - lintFormat: ${lintFormat}, + ${lintFormat ? `lintFormat: ${lintFormat},` : ''} ${ hasTests ? `tests: { @@ -118,11 +122,14 @@ export default createBedframe({ watch: false, },` : '' - } - git: ${git}, - gitHooks: ${gitHooks}, - commitLint: ${commitLint}, - changesets: ${changesets}, + } + ${ + (keyValue(git), + keyValue(git), + keyValue(gitHooks), + keyValue(commitLint), + keyValue(changesets)) + } }, }, }, @@ -145,3 +152,11 @@ export default createBedframe({ console.error(error) } } + +/* + ${git ? `git: ${git},` : ''} + ${gitHooks ? `gitHooks: ${gitHooks},` : ''} + ${commitLint ? `commitLint: ${commitLint},` : ''} + ${changesets ? `changesets: ${changesets},` : ''} + +*/ diff --git a/packages/cli/src/lib/make/utils/write-manifests.ts b/packages/cli/src/lib/make/utils/write-manifests.ts index 39463792..29b04206 100644 --- a/packages/cli/src/lib/make/utils/write-manifests.ts +++ b/packages/cli/src/lib/make/utils/write-manifests.ts @@ -134,40 +134,38 @@ import { baseManifest } from './base.manifest' const { ${optionsUIorPage}${ extensionType === 'sidepanel' ? ', side_panel' : '' }, ...rest } = baseManifest - -${ - extensionType === 'sidepanel' - ? `const sidePanel = { - default_icon: baseManifest.action.default_icon, - default_title: baseManifest.name, - default_panel: side_panel.default_path, -}` - : '' -} -${ - optionsPage === 'full-page' || optionsPage === 'embedded' - ? `const optionsUI = { - page: ${optionsPage === 'full-page' ? 'options_page' : 'options_ui.page'}, -}` - : '' -} const updatedFirefoxManifest = { - ...rest, - ${extensionType === 'sidepanel' ? 'sidebar_action: sidePanel,' : ''} - browser_specific_settings: { - gecko: { - id: 'me@${projectName.trim().replace(/\s+/g, '-').toLowerCase()}.com', - }, + ...rest, + background: { + scripts: [baseManifest.background.service_worker], + },${ + extensionType === 'sidepanel' + ? `sidebar_action: { + default_icon: baseManifest.action.default_icon, + default_title: baseManifest.name, + default_panel: side_panel.default_path, + },` + : '' + } + browser_specific_settings: { + gecko: { + id: 'me@${projectName.trim().replace(/\s+/g, '-').toLowerCase()}.com', }, - ${ - optionsPage === 'full-page' || optionsPage === 'embedded' - ? 'options_ui: optionsUI,' - : '' - } - } as Manifest + }, + ${ + optionsPage === 'full-page' || optionsPage === 'embedded' + ? `options_ui: { + page: ${optionsPage === 'full-page' ? 'options_page' : 'options_ui.page'}, + },` + : '' + } +} -export const firefox = createManifest(updatedFirefoxManifest, 'firefox') +export const firefox = createManifest( + updatedFirefoxManifest as Manifest, + 'firefox' +) ` const isFirefox = browser.toLowerCase() === 'firefox' diff --git a/packages/cli/src/lib/make/utils/write-package-json.ts b/packages/cli/src/lib/make/utils/write-package-json.ts index af3769b9..ae3cebac 100644 --- a/packages/cli/src/lib/make/utils/write-package-json.ts +++ b/packages/cli/src/lib/make/utils/write-package-json.ts @@ -73,7 +73,7 @@ export function writePackageJson(response: prompts.Answers): void { ${hasTests ? `"test": "vitest run --coverage",` : ''} ${commitLint ? `"commit": "lint-staged && cz",` : ''} "zip": "bedframe zip", - "codemod": "bedframe codemod", + "codemod": "bedframe codemod"${browsers.includes('safari') ? ',' : ''} ${ browsers.includes('safari') ? `"convert:safari": "xcrun safari-web-extension-converter dist/safari --project-location . --no-open --app-name $npm_package_name@$npm_package_version-safari-web-extension"` @@ -104,8 +104,8 @@ export function writePackageJson(response: prompts.Answers): void { } }, "devDependencies": { - "@bedframe/cli": "^0.0.74", - "@bedframe/core": "^0.0.39", + "@bedframe/cli": "^0.0.75", + "@bedframe/core": "^0.0.40", ${ changesets ? `"@changesets/cli": "^2.26.2", @@ -163,7 +163,7 @@ export function writePackageJson(response: prompts.Answers): void { ${language.toLowerCase() === 'typescript' ? `"typescript": "^5.2.2",` : ''} "unplugin-fonts": "^1.0.3", "vite": "^4.5.0" - }, + }${lintFormat ? ',' : ''} ${ lintFormat ? `"eslintConfig": { @@ -225,7 +225,7 @@ export function writePackageJson(response: prompts.Answers): void { "singleQuote": true }` : '' - }${lintFormat && commitLint ? ',' : ''} + }${commitLint ? ',' : ''} ${ commitLint ? `"commitlint": { @@ -239,7 +239,7 @@ export function writePackageJson(response: prompts.Answers): void { } }` : '' - }${commitLint && gitHooks ? ',' : ''} + }${gitHooks ? ',' : ''} ${ gitHooks ? `"husky": { diff --git a/packages/cli/src/lib/make/utils/write-vite-config.ts b/packages/cli/src/lib/make/utils/write-vite-config.ts index 598efce4..c0893ea9 100644 --- a/packages/cli/src/lib/make/utils/write-vite-config.ts +++ b/packages/cli/src/lib/make/utils/write-vite-config.ts @@ -4,7 +4,6 @@ import { ensureFile, outputFile } from './utils.fs' export function viteConfig(response: prompts.Answers): string { const { tests: hasTests } = response.development.template.config - const { type } = response.extension return `import { getFonts, getManifest } from '@bedframe/core' import react from '@vitejs/plugin-react' @@ -27,7 +26,9 @@ export default defineConfig(({ command, mode }) => { }, }, plugins: [ - getManifest({ command, mode }, manifest), + getManifest({ command, mode }, manifest, { + browser: mode + }), getFonts(fonts), react(), ], diff --git a/packages/core/src/lib/create-bedframe.ts b/packages/core/src/lib/create-bedframe.ts index 60056b55..3ceb450e 100644 --- a/packages/core/src/lib/create-bedframe.ts +++ b/packages/core/src/lib/create-bedframe.ts @@ -1,30 +1,30 @@ -import type { BedframeTemplate } from "./create-template"; -import type { Browser, BuildTarget } from "./types"; -import type { AnyCase } from "./utils"; +import type { BedframeTemplate } from './create-template' +import type { Browser, BuildTarget } from './types' +import type { AnyCase } from './utils' -export type ExtensionType = "popup" | "overlay" | "sidepanel" | "devtools"; -export type OverrideType = "none" | "newtab" | "history" | "bookmarks"; -export type PositionType = "center" | "left" | "right"; -export type OptionsType = "full-page" | "embedded"; +export type ExtensionType = 'popup' | 'overlay' | 'sidepanel' | 'devtools' +export type OverrideType = 'none' | 'newtab' | 'history' | 'bookmarks' +export type PositionType = 'center' | 'left' | 'right' +export type OptionsType = 'full-page' | 'embedded' export type Extension = { - type: ExtensionType; - overrides: OverrideType; - position?: PositionType; - options: OptionsType; - manifest: BuildTarget[]; - pages?: string | string[] | { [entryAlias: string]: string }; - // ^^^ type from rollup input: >> export type InputOption = string | string[] | { [entryAlias: string]: string }; -}; + type: ExtensionType + overrides?: OverrideType + position?: PositionType + options?: OptionsType + manifest: BuildTarget[] + pages?: string | string[] | { [entryAlias: string]: string } + // ^^^ type from rollup input: >> export type InputOption = string | string[] | { [entryAlias: string]: string }; +} export type Development = { - template: BedframeTemplate; -}; + template: BedframeTemplate +} export interface Bedframe { - browser: AnyCase[]; - extension: Extension; - development: Development; + browser: AnyCase[] + extension: Extension + development: Development } /** * Generate Bedframe object @@ -32,5 +32,5 @@ export interface Bedframe { * @return {*} {Bedframe} */ export const createBedframe = (bedframe: Bedframe): Bedframe => { - return bedframe; -}; + return bedframe +} diff --git a/packages/core/src/lib/create-template.ts b/packages/core/src/lib/create-template.ts index db542290..6d96b5df 100644 --- a/packages/core/src/lib/create-template.ts +++ b/packages/core/src/lib/create-template.ts @@ -18,13 +18,12 @@ export interface TemplateConfig { fonts?: FontFamily[] theme?: string | Record } - lintFormat: Record | boolean - // tests: vitest.InlineConfig | boolean // Record | boolean - tests: any // Record | boolean // Record | boolean - git: Record | boolean - gitHooks: Record | boolean - commitLint: Record | boolean - changesets: Record | boolean + lintFormat?: Record | boolean + tests?: any + git?: Record | boolean + gitHooks?: Record | boolean + commitLint?: Record | boolean + changesets?: Record | boolean } /** diff --git a/packages/core/src/lib/get-manifest.ts b/packages/core/src/lib/get-manifest.ts index acfe680f..07215bd1 100644 --- a/packages/core/src/lib/get-manifest.ts +++ b/packages/core/src/lib/get-manifest.ts @@ -9,6 +9,7 @@ import { import { type ManifestV3Export, crx } from '@crxjs/vite-plugin' import { Browser, type BuildConfig, type BuildTarget } from './types' import type { PluginOption } from 'vite' +import { AnyCase } from './utils' /** * Given the {@link Mode} i.e. {@link Browser} target, @@ -24,6 +25,7 @@ import type { PluginOption } from 'vite' export function getManifest( { command, mode }: BuildConfig, targets: BuildTarget[], + options?: CrxOptions, ): PluginOption[] { const _mode = `${(mode as string).charAt(0).toUpperCase()}${( mode as string @@ -69,8 +71,16 @@ export function getManifest( return crx({ manifest: browser.manifest as ManifestV3Export, - contentScripts: { - preambleCode: false, - }, + ...options, }) } + +interface CrxOptions { + contentScripts?: { + preambleCode?: string | false + hmrTimeout?: number + injectCss?: boolean + } + fastGlobOptions?: any // fast-glob Options + browser?: any // 'firefox' | 'chrome' +} diff --git a/packages/core/src/lib/types.ts b/packages/core/src/lib/types.ts index cd8b8f9d..21828d7b 100644 --- a/packages/core/src/lib/types.ts +++ b/packages/core/src/lib/types.ts @@ -35,7 +35,8 @@ export const PackageManagerEnum = { Yarn: 'Yarn', } as const -export type Manifest = ManifestV3Export & { +// see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/firefox-webext-browser/index.d.ts +export type BrowserSpecificSettings = { browser_specific_settings?: { gecko?: { id: string @@ -45,6 +46,7 @@ export type Manifest = ManifestV3Export & { } } +export type Manifest = ManifestV3Export export type ManifestIcons = chrome.runtime.ManifestIcons export type ManifestBackground = chrome.runtime.ManifestV3['background'] export type ManifestContentScripts = From 8dec8de011545d9337f35c3f2bd9b887619aae13 Mon Sep 17 00:00:00 2001 From: JoeyDoey Date: Sat, 23 Mar 2024 14:22:29 -0700 Subject: [PATCH 2/3] chore: code cleanup --- packages/cli/src/lib/make/utils/write-bedframe-config.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/cli/src/lib/make/utils/write-bedframe-config.ts b/packages/cli/src/lib/make/utils/write-bedframe-config.ts index 630b8553..840f4495 100644 --- a/packages/cli/src/lib/make/utils/write-bedframe-config.ts +++ b/packages/cli/src/lib/make/utils/write-bedframe-config.ts @@ -152,11 +152,3 @@ export default createBedframe({ console.error(error) } } - -/* - ${git ? `git: ${git},` : ''} - ${gitHooks ? `gitHooks: ${gitHooks},` : ''} - ${commitLint ? `commitLint: ${commitLint},` : ''} - ${changesets ? `changesets: ${changesets},` : ''} - -*/ From 374e197e1cd07c662e170341485619fe902edb64 Mon Sep 17 00:00:00 2001 From: JoeyDoey Date: Sat, 23 Mar 2024 14:23:18 -0700 Subject: [PATCH 3/3] feat(changeset): cross-browesr manifest handling; dev/build commands --- .changeset/chatty-pots-pull.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/chatty-pots-pull.md diff --git a/.changeset/chatty-pots-pull.md b/.changeset/chatty-pots-pull.md new file mode 100644 index 00000000..6070b2ad --- /dev/null +++ b/.changeset/chatty-pots-pull.md @@ -0,0 +1,6 @@ +--- +"@bedframe/core": patch +"@bedframe/cli": patch +--- + +cross-browesr manifest handling; dev/build commands