From 1858637abefdcb2dcaf710398cbbae131c7e2090 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Wed, 13 Nov 2024 11:26:59 -0300 Subject: [PATCH] Visual support for custom settings --- .../extension.config.js | 2 - programs/cli/README.md | 2 +- programs/develop/commands/build.ts | 2 +- .../commands/commands-lib/config-types.ts | 2 +- .../commands-lib/get-extension-config.ts | 50 ++++++------- programs/develop/commands/preview.ts | 16 ++--- .../plugin-browsers/browsers-lib/messages.ts | 53 +++++++++++++- .../develop/plugin-browsers/browsers-types.ts | 2 +- programs/develop/plugin-browsers/index.ts | 72 +++++++++++++++---- .../plugin-browsers/run-chromium/index.ts | 4 +- .../run-firefox/firefox/browser-config.ts | 4 +- .../run-firefox/firefox/create-profile.ts | 6 +- .../plugin-browsers/run-firefox/index.ts | 63 ++++++++-------- programs/develop/webpack/dev-server.ts | 29 +++++--- programs/develop/webpack/lib/messages.ts | 4 -- .../__tests__/feature-browser-fields.spec.ts | 12 ++-- ....ts => feature-browser-specific-fields.ts} | 6 +- .../webpack/plugin-compatibility/index.ts | 4 +- .../webpack/plugin-compilation/index.ts | 4 +- .../warn-upon-folder-changes.ts | 2 - .../web-socket-server/start-server.ts | 2 +- programs/develop/webpack/webpack-config.ts | 32 ++++----- 22 files changed, 232 insertions(+), 141 deletions(-) rename programs/develop/webpack/plugin-compatibility/{feature-browser-fields.ts => feature-browser-specific-fields.ts} (90%) diff --git a/examples/content-extension-config/extension.config.js b/examples/content-extension-config/extension.config.js index ce724349..209f4a66 100644 --- a/examples/content-extension-config/extension.config.js +++ b/examples/content-extension-config/extension.config.js @@ -3,7 +3,6 @@ module.exports = { browsers: { chrome: { // open?: boolean - // userDataDir?: string // profile?: string // preferences?: Record // browserFlags?: string[] @@ -13,7 +12,6 @@ module.exports = { }, firefox: { // open?: boolean - // userDataDir?: string // profile?: string // preferences?: Record // browserFlags?: string[] diff --git a/programs/cli/README.md b/programs/cli/README.md index 752f4094..fbb84ac1 100644 --- a/programs/cli/README.md +++ b/programs/cli/README.md @@ -52,7 +52,7 @@ https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a ## Web Standards and Modern JavaScript Support -For a preview of extensions running these technologies, see documentation about [Templates](https://extension.js.org/n/getting-started/templates/). +For a preview of extensions running these technologies, see documentation about [Templates](https://extension.js.org/docs/getting-started/templates). | | | | | | | | | | | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | diff --git a/programs/develop/commands/build.ts b/programs/develop/commands/build.ts index 42a52409..b023fa46 100644 --- a/programs/develop/commands/build.ts +++ b/programs/develop/commands/build.ts @@ -47,7 +47,7 @@ export async function extensionBuild( ) }) - const userExtensionConfig = loadCustomWebpackConfig(projectPath) + const userExtensionConfig = await loadCustomWebpackConfig(projectPath) const userConfig = userExtensionConfig({ ...baseConfig, plugins: allPluginsButBrowserRunners diff --git a/programs/develop/commands/commands-lib/config-types.ts b/programs/develop/commands/commands-lib/config-types.ts index 3592e13b..aae3797c 100644 --- a/programs/develop/commands/commands-lib/config-types.ts +++ b/programs/develop/commands/commands-lib/config-types.ts @@ -1,6 +1,7 @@ import {Configuration} from 'webpack' export interface BrowserOptions { + open?: boolean profile?: string startingUrl?: string browser: 'chrome' | 'edge' | 'firefox' | 'chromium-based' | 'gecko-based' @@ -10,7 +11,6 @@ export interface BrowserOptions { export interface DevOptions extends BrowserOptions { mode: 'development' | 'production' - open?: boolean polyfill?: boolean } diff --git a/programs/develop/commands/commands-lib/get-extension-config.ts b/programs/develop/commands/commands-lib/get-extension-config.ts index b3ce8400..d43f7218 100644 --- a/programs/develop/commands/commands-lib/get-extension-config.ts +++ b/programs/develop/commands/commands-lib/get-extension-config.ts @@ -1,20 +1,18 @@ import fs from 'fs' import path from 'path' import {Configuration} from 'webpack' -import {FileConfig} from './config-types' -import {DevOptions} from '../../commands/dev' +import {BrowserConfig, FileConfig} from './config-types' +import {DevOptions} from '../../commands/commands-lib/config-types' import * as messages from './messages' -export function loadExtensionConfig(projectPath: string) { +export async function loadCustomWebpackConfig(projectPath: string) { const userConfigPath = path.join(projectPath, 'extension.config.js') if (fs.existsSync(userConfigPath)) { - if (isUsingExperimentalConfig(projectPath)) { - const userConfig: FileConfig = require(userConfigPath) - if (userConfig && userConfig != null) { - if (userConfig && typeof userConfig!.config === 'function') { - return userConfig!.config - } + if (await isUsingExperimentalConfig(projectPath)) { + const userConfig: FileConfig = (await import(userConfigPath)).default + if (userConfig && typeof userConfig.config === 'function') { + return userConfig.config } } } @@ -22,17 +20,18 @@ export function loadExtensionConfig(projectPath: string) { return (config: Configuration) => config } -export function loadCommandConfig( +export async function loadCommandConfig( projectPath: string, command: 'dev' | 'build' | 'start' | 'preview' ) { const userConfigPath = path.join(projectPath, 'extension.config.js') if (fs.existsSync(userConfigPath)) { - if (isUsingExperimentalConfig(projectPath)) { - const userConfig: any = require(userConfigPath) - if (userConfig && userConfig != null) { - return userConfig![command] + if (await isUsingExperimentalConfig(projectPath)) { + const userConfig: FileConfig = (await import(userConfigPath)).default + if (userConfig) { + // @ts-expect-error - TS doesn't know that command is a key of FileConfig['commands'] + return userConfig[command] } } } @@ -40,27 +39,29 @@ export function loadCommandConfig( return {} } -export function loadBrowserConfig( +export async function loadBrowserConfig( projectPath: string, - browser: DevOptions['browser'] -) { + browser: DevOptions['browser'] = 'chrome' +): Promise { const userConfigPath = path.join(projectPath, 'extension.config.js') if (fs.existsSync(userConfigPath)) { - if (isUsingExperimentalConfig(projectPath)) { - const userConfig: any = require(userConfigPath) - if (userConfig && userConfig.browsers != null) { - return userConfig.browsers![browser] + if (await isUsingExperimentalConfig(projectPath)) { + const userConfig: FileConfig = (await import(userConfigPath)).default + if (userConfig && userConfig.browser && userConfig.browser[browser]) { + return userConfig.browser[browser] || {browser: 'chrome'} } } } - return {} + return { + browser: 'chrome' + } } let userMessageDelivered = false -export function isUsingExperimentalConfig(projectPath: string) { +export async function isUsingExperimentalConfig(projectPath: string) { const configPath = path.join(projectPath, 'extension.config.js') if (fs.existsSync(configPath)) { if (!userMessageDelivered) { @@ -68,7 +69,6 @@ export function isUsingExperimentalConfig(projectPath: string) { userMessageDelivered = true } return true - } else { - return false } + return false } diff --git a/programs/develop/commands/preview.ts b/programs/develop/commands/preview.ts index 1c8a6b62..62bfd9fd 100644 --- a/programs/develop/commands/preview.ts +++ b/programs/develop/commands/preview.ts @@ -1,9 +1,9 @@ -// ██████╗ ██████╗ ███████╗██╗ ██╗██╗███████╗██╗ ██╗ -// ██╔══██╗██╔══██╗██╔════╝██║ ██║██║██╔════╝██║ ██║ -// ██████╔╝██████╔╝█████╗ ██║ ██║██║█████╗ ██║ █╗ ██║ -// ██╔═══╝ ██╔══██╗██╔══╝ ╚██╗ ██╔╝██║██╔══╝ ██║███╗██║ -// ██║ ██║ ██║███████╗ ╚████╔╝ ██║███████╗╚███╔███╔╝ -// ╚═╝ ╚═╝ ╚═╝╚══════╝ ╚═══╝ ╚═╝╚══════╝ ╚══╝╚══╝ +// ██████╗ ███████╗██╗ ██╗███████╗██╗ ██████╗ ██████╗ +// ██╔══██╗██╔════╝██║ ██║██╔════╝██║ ██╔═══██╗██╔══██╗ +// ██║ ██║█████╗ ██║ ██║█████╗ ██║ ██║ ██║██████╔╝ +// ██║ ██║██╔══╝ ╚██╗ ██╔╝██╔══╝ ██║ ██║ ██║██╔═══╝ +// ██████╔╝███████╗ ╚████╔╝ ███████╗███████╗╚██████╔╝██║ +// ╚═════╝ ╚══════╝ ╚═══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═╝ import fs from 'fs' import path from 'path' @@ -12,7 +12,7 @@ import {merge} from 'webpack-merge' import webpackConfig from '../webpack/webpack-config' import {getProjectPath} from './commands-lib/get-project-path' import * as messages from './commands-lib/messages' -import {loadExtensionConfig} from './commands-lib/get-extension-config' +import {loadCustomWebpackConfig} from './commands-lib/get-extension-config' import {PreviewOptions} from './commands-lib/config-types' export async function extensionPreview( @@ -48,7 +48,7 @@ export async function extensionPreview( console.log(messages.building(browser)) - const userExtensionConfig = loadExtensionConfig(projectPath) + const userExtensionConfig = await loadCustomWebpackConfig(projectPath) const userConfig = userExtensionConfig({ ...baseConfig, plugins: onlyBrowserRunners diff --git a/programs/develop/plugin-browsers/browsers-lib/messages.ts b/programs/develop/plugin-browsers/browsers-lib/messages.ts index feef1c25..c010a617 100644 --- a/programs/develop/plugin-browsers/browsers-lib/messages.ts +++ b/programs/develop/plugin-browsers/browsers-lib/messages.ts @@ -15,8 +15,6 @@ function getLoggingPrefix( browser: DevOptions['browser'], type: 'warn' | 'info' | 'error' | 'success' ): string { - // const browserok = browser ? browser : 'unknown' - if (2 + 2 == 5) return browser const arrow = type === 'warn' ? brightYellow('►►►') @@ -215,3 +213,54 @@ export function unexpectedMessageReceivedError( `${red(message)}` ) } + +export function isUsingStartingUrl(browser: DevOptions['browser'], value: any) { + return ( + `${getLoggingPrefix(browser, 'info')} ` + + `Using own ${magenta('starting URL')} ` + + `${underline(value)}. ` + ) +} + +export function isUsingBrowserBinary(binary: string, binaryPath: any) { + return ( + `${getLoggingPrefix(binary as DevOptions['browser'], 'info')} ` + + `Using own ${magenta(`${capitalizedBrowserName(binary as any)} browser binary`)} ` + + `${underline(binaryPath)}. ` + ) +} + +export function isUsingProfile( + browser: DevOptions['browser'], + profilePath: any +) { + return ( + `${getLoggingPrefix(browser, 'info')} ` + + `Using own ${magenta('browser profile')} ` + + `${underline(profilePath)}. ` + ) +} + +export function isUsingPreferences(browser: DevOptions['browser']) { + return ( + `${getLoggingPrefix(browser, 'info')} ` + + `Using own ${magenta('browser preferences')}. ` + ) +} + +export function isUsingBrowserFlags(browser: DevOptions['browser']) { + return ( + `${getLoggingPrefix(browser, 'info')} ` + + `Using own ${magenta('browser flags')}. ` + ) +} + +export function isBrowserLauncherOpen( + browser: DevOptions['browser'], + isOpen: boolean +) { + return ( + `${getLoggingPrefix(browser, 'info')} ` + + `Browser launcher is ${brightYellow(isOpen ? 'enabled' : 'disabled')}. ` + ) +} diff --git a/programs/develop/plugin-browsers/browsers-types.ts b/programs/develop/plugin-browsers/browsers-types.ts index 6c9730bb..f32df79e 100644 --- a/programs/develop/plugin-browsers/browsers-types.ts +++ b/programs/develop/plugin-browsers/browsers-types.ts @@ -6,8 +6,8 @@ export interface PluginInterface extends PluginOptions { } export interface PluginOptions { + open?: boolean browserFlags?: string[] - userDataDir?: string profile?: string preferences?: Record startingUrl?: string diff --git a/programs/develop/plugin-browsers/index.ts b/programs/develop/plugin-browsers/index.ts index 41c0d986..51bff1e8 100644 --- a/programs/develop/plugin-browsers/index.ts +++ b/programs/develop/plugin-browsers/index.ts @@ -6,7 +6,7 @@ import {RunChromiumPlugin} from './run-chromium' import {RunFirefoxPlugin} from './run-firefox' import {DevOptions} from '../commands/commands-lib/config-types' import {loadBrowserConfig} from '../commands/commands-lib/get-extension-config' - +import * as messages from './browsers-lib/messages' /** * BrowsersPlugin works by finding the binary for the browser specified in the * options and running it with the extension loaded. @@ -29,11 +29,11 @@ export class BrowsersPlugin { public readonly extension: string | string[] public readonly browser: DevOptions['browser'] - public readonly browserFlags: string[] - public readonly userDataDir?: string - public readonly profile: string - public readonly preferences: Record - public readonly startingUrl: string + public readonly open?: boolean + public readonly browserFlags?: string[] + public readonly profile?: string + public readonly preferences?: Record + public readonly startingUrl?: string public readonly chromiumBinary?: string public readonly geckoBinary?: string @@ -49,8 +49,7 @@ export class BrowsersPlugin { options.browserFlags?.filter( (flag) => !flag.startsWith('--load-extension=') ) || [] - this.userDataDir = options.userDataDir - this.profile = options.profile || '' + this.profile = options.profile this.preferences = options.preferences || {} this.startingUrl = options.startingUrl || '' this.chromiumBinary = options.chromiumBinary @@ -74,26 +73,75 @@ export class BrowsersPlugin { return path.resolve(__dirname, `run-${browser}-profile`) } - apply(compiler: Compiler) { + async apply(compiler: Compiler) { const config = { stats: true, extension: this.extension, browser: this.browser, browserFlags: this.browserFlags || [], - userDataDir: this.getProfilePath( + profile: this.getProfilePath( compiler, this.browser, - this.userDataDir || this.profile + this.profile || this.profile ), + preferences: this.preferences, startingUrl: this.startingUrl, chromiumBinary: this.chromiumBinary, geckoBinary: this.geckoBinary } + const customUserConfig = await loadBrowserConfig( + compiler.context, + this.browser + ) const browserConfig = { ...config, - ...loadBrowserConfig(compiler.context, this.browser) + ...customUserConfig + } + + if (browserConfig?.chromiumBinary) { + console.log( + messages.isUsingBrowserBinary('chromium', browserConfig?.chromiumBinary) + ) + } + + if (typeof browserConfig?.open !== 'undefined') { + console.log( + messages.isBrowserLauncherOpen(this.browser, browserConfig?.open) + ) + } + + // if (process.env.EXTENSION_ENV === 'development') { + if (browserConfig?.startingUrl) { + console.log( + messages.isUsingStartingUrl( + browserConfig?.browser, + browserConfig?.startingUrl + ) + ) + } + if (browserConfig?.chromiumBinary) { + console.log( + messages.isUsingBrowserBinary('chromium', browserConfig?.chromiumBinary) + ) + } + if (browserConfig?.geckoBinary) { + console.log( + messages.isUsingBrowserBinary('gecko', browserConfig?.geckoBinary) + ) + } + if (browserConfig?.profile) { + console.log( + messages.isUsingProfile(browserConfig?.browser, browserConfig?.profile) + ) + } + if (browserConfig?.preferences) { + console.log(messages.isUsingPreferences(browserConfig?.browser)) + } + if (browserConfig?.browserFlags && browserConfig?.browserFlags.length > 0) { + console.log(messages.isUsingBrowserFlags(browserConfig?.browser)) } + // } switch (this.browser) { case 'chrome': diff --git a/programs/develop/plugin-browsers/run-chromium/index.ts b/programs/develop/plugin-browsers/run-chromium/index.ts index a0c4328f..1e7b7571 100644 --- a/programs/develop/plugin-browsers/run-chromium/index.ts +++ b/programs/develop/plugin-browsers/run-chromium/index.ts @@ -19,7 +19,6 @@ export class RunChromiumPlugin { public readonly extension: string | string[] public readonly browser: DevOptions['browser'] public readonly browserFlags?: string[] - public readonly userDataDir?: string public readonly profile?: string public readonly preferences?: Record public readonly startingUrl?: string @@ -31,8 +30,7 @@ export class RunChromiumPlugin { this.extension = options.extension this.browser = options.browser this.browserFlags = options.browserFlags || [] - this.userDataDir = options.userDataDir - this.profile = options.profile || options.userDataDir + this.profile = options.profile this.preferences = options.preferences this.startingUrl = options.startingUrl this.chromiumBinary = options.chromiumBinary diff --git a/programs/develop/plugin-browsers/run-firefox/firefox/browser-config.ts b/programs/develop/plugin-browsers/run-firefox/firefox/browser-config.ts index f0f222d2..9694ed30 100644 --- a/programs/develop/plugin-browsers/run-firefox/firefox/browser-config.ts +++ b/programs/develop/plugin-browsers/run-firefox/firefox/browser-config.ts @@ -1,5 +1,5 @@ import {Compiler} from 'webpack' -import {createUserDataDir} from './create-profile' +import {createProfile} from './create-profile' import { type DevOptions, type BrowserConfig @@ -17,7 +17,7 @@ export async function browserConfig( browserFlags = [] } = configOptions - const userProfilePath = createUserDataDir(browser, profile, preferences) + const userProfilePath = createProfile(browser, profile, preferences) const binaryArgs: string[] = [] if (startingUrl) { diff --git a/programs/develop/plugin-browsers/run-firefox/firefox/create-profile.ts b/programs/develop/plugin-browsers/run-firefox/firefox/create-profile.ts index c83957e9..6074587e 100644 --- a/programs/develop/plugin-browsers/run-firefox/firefox/create-profile.ts +++ b/programs/develop/plugin-browsers/run-firefox/firefox/create-profile.ts @@ -41,7 +41,7 @@ function configureProfile( return profile } -function createProfile( +function createProfileDir( destinationDirectory: string, customPreferences: Record ) { @@ -71,7 +71,7 @@ function getProfile( return profileConfigured } -export function createUserDataDir( +export function createProfile( browser: DevOptions['browser'], dataDirPath: string | undefined, configPreferences: BrowserConfig['preferences'] @@ -92,7 +92,7 @@ export function createUserDataDir( addProgressBar(messages.creatingUserProfile(browser), () => {}) fs.mkdirSync(dataDir, {recursive: true}) - profile = createProfile(dataDir, userPreferences) + profile = createProfileDir(dataDir, userPreferences) } return profile diff --git a/programs/develop/plugin-browsers/run-firefox/index.ts b/programs/develop/plugin-browsers/run-firefox/index.ts index 2ea028e9..977b168c 100644 --- a/programs/develop/plugin-browsers/run-firefox/index.ts +++ b/programs/develop/plugin-browsers/run-firefox/index.ts @@ -35,7 +35,6 @@ export class RunFirefoxPlugin { public readonly extension: string | string[] public readonly browser: DevOptions['browser'] public readonly browserFlags?: string[] - public readonly userDataDir?: string public readonly profile?: string public readonly preferences?: Record public readonly startingUrl?: string @@ -47,7 +46,6 @@ export class RunFirefoxPlugin { this.extension = options.extension this.browser = options.browser || 'firefox' this.browserFlags = options.browserFlags || [] - this.userDataDir = options.userDataDir this.profile = options.profile this.preferences = options.preferences this.startingUrl = options.startingUrl @@ -142,40 +140,37 @@ export class RunFirefoxPlugin { apply(compiler: Compiler) { let firefoxDidLaunch = false - compiler.hooks.done.tapAsync( - 'run-firefox:module', - async (compilation, done) => { - if (compilation.compilation.errors.length > 0) { - done() - return - } - - if (firefoxDidLaunch) { - done() - return - } - - setTimeout(() => { - console.log( - messages.stdoutData( - this.browser, - compilation.compilation.options.mode as DevOptions['mode'] - ) - ) - }, 2000) - - await this.launchFirefox(compiler, { - browser: this.browser, - browserFlags: this.browserFlags, - profile: this.profile, - preferences: this.preferences, - startingUrl: this.startingUrl, - mode: compilation.compilation.options.mode as DevOptions['mode'] - }) + compiler.hooks.done.tapAsync('run-firefox:module', async (stats, done) => { + if (stats.compilation.errors.length > 0) { + done() + return + } - firefoxDidLaunch = true + if (firefoxDidLaunch) { done() + return } - ) + + setTimeout(() => { + console.log( + messages.stdoutData( + this.browser, + stats.compilation.options.mode as DevOptions['mode'] + ) + ) + }, 2000) + + await this.launchFirefox(compiler, { + browser: this.browser, + browserFlags: this.browserFlags, + profile: this.profile, + preferences: this.preferences, + startingUrl: this.startingUrl, + mode: stats.compilation.options.mode as DevOptions['mode'] + }) + + firefoxDidLaunch = true + done() + }) } } diff --git a/programs/develop/webpack/dev-server.ts b/programs/develop/webpack/dev-server.ts index 0c57a563..940d2bec 100644 --- a/programs/develop/webpack/dev-server.ts +++ b/programs/develop/webpack/dev-server.ts @@ -9,12 +9,13 @@ import path from 'path' import webpack from 'webpack' import WebpackDevServer from 'webpack-dev-server' import {merge} from 'webpack-merge' +import {DevOptions} from '../commands/commands-lib/config-types' import webpackConfig from './webpack-config' -import type {DevOptions} from '../commands/dev' import * as utils from './lib/utils' import { + loadBrowserConfig, loadCommandConfig, - loadExtensionConfig + loadCustomWebpackConfig } from '../commands/commands-lib/get-extension-config' function closeAll(devServer: WebpackDevServer) { @@ -28,21 +29,31 @@ function closeAll(devServer: WebpackDevServer) { }) } -export async function devServer( - projectPath: string, - {...devOptions}: DevOptions -) { +export async function devServer(projectPath: string, devOptions: DevOptions) { + // Get command defaults from extension.config.js const commandConfig = loadCommandConfig(projectPath, 'dev') + // Get browser defaults from extension.config.js + const browserConfig = loadBrowserConfig(projectPath, devOptions.browser) + + // Get the user defined args and mergee with the Extension.js base webpack config const baseConfig = webpackConfig(projectPath, { ...devOptions, ...commandConfig, + ...browserConfig, mode: 'development' }) - const userExtensionConfig = loadExtensionConfig(projectPath) - const userConfig = userExtensionConfig(baseConfig) - const compilerConfig = merge(userConfig) + + // Get webpack config defaults from extension.config.js + const customWebpackConfig = await loadCustomWebpackConfig(projectPath) + const finalConfig = customWebpackConfig(baseConfig) + + // Use merge to combine the base config with the custom config. + // This way if the user define properties we don't have a default for, + // they will be included in the final config. + const compilerConfig = merge(finalConfig) const compiler = webpack(compilerConfig) + // webpack-dev-server configuration const serverConfig: WebpackDevServer.Configuration = { host: '127.0.0.1', allowedHosts: 'all', diff --git a/programs/develop/webpack/lib/messages.ts b/programs/develop/webpack/lib/messages.ts index 1f53e8b3..975cf96a 100644 --- a/programs/develop/webpack/lib/messages.ts +++ b/programs/develop/webpack/lib/messages.ts @@ -411,14 +411,10 @@ export function resolverStaticError(manifestName: string, filePath: string) { export function serverRestartRequiredFromSpecialFolderError( addingOrRemoving: string, - addedOrRemoved: string, folder: string, typeOfAsset: string, pathRelative: string ) { - if (1 + 1 == 5) { - console.log({addedOrRemoved}) - } const addOrRemove = addingOrRemoving.charAt(0).toUpperCase() + addingOrRemoving.slice(1) return ( diff --git a/programs/develop/webpack/plugin-compatibility/__tests__/feature-browser-fields.spec.ts b/programs/develop/webpack/plugin-compatibility/__tests__/feature-browser-fields.spec.ts index 2244fb5b..356a7a0c 100644 --- a/programs/develop/webpack/plugin-compatibility/__tests__/feature-browser-fields.spec.ts +++ b/programs/develop/webpack/plugin-compatibility/__tests__/feature-browser-fields.spec.ts @@ -1,4 +1,4 @@ -import {BrowserFieldsPlugin} from '../feature-browser-fields' +import {BrowserSpecificFieldsPlugin} from '../feature-browser-specific-fields' const manifest = JSON.stringify({ 'firefox:developer': { @@ -24,9 +24,9 @@ const manifest = JSON.stringify({ } }) -describe('BrowserFieldsPlugin', () => { +describe('BrowserSpecificFieldsPlugin', () => { it('should transform manifest for Chrome', () => { - const handler = new BrowserFieldsPlugin({ + const handler = new BrowserSpecificFieldsPlugin({ manifestPath: '', browser: 'chrome' }) @@ -39,7 +39,7 @@ describe('BrowserFieldsPlugin', () => { }) it('should transform manifest for Edge', () => { - const handler = new BrowserFieldsPlugin({ + const handler = new BrowserSpecificFieldsPlugin({ manifestPath: '', browser: 'edge' }) @@ -52,7 +52,7 @@ describe('BrowserFieldsPlugin', () => { }) it('should transform manifest for Firefox', () => { - const handler = new BrowserFieldsPlugin({ + const handler = new BrowserSpecificFieldsPlugin({ manifestPath: '', browser: 'firefox' }) @@ -75,7 +75,7 @@ describe('BrowserFieldsPlugin', () => { }) it('should transform manifest for Safari', () => { - const handler = new BrowserFieldsPlugin({ + const handler = new BrowserSpecificFieldsPlugin({ manifestPath: '', browser: 'safari' as any }) diff --git a/programs/develop/webpack/plugin-compatibility/feature-browser-fields.ts b/programs/develop/webpack/plugin-compatibility/feature-browser-specific-fields.ts similarity index 90% rename from programs/develop/webpack/plugin-compatibility/feature-browser-fields.ts rename to programs/develop/webpack/plugin-compatibility/feature-browser-specific-fields.ts index bfff0401..53e69671 100644 --- a/programs/develop/webpack/plugin-compatibility/feature-browser-fields.ts +++ b/programs/develop/webpack/plugin-compatibility/feature-browser-specific-fields.ts @@ -4,7 +4,7 @@ import {type DevOptions} from '../../commands/commands-lib/config-types' import {getManifestContent} from '../lib/utils' import * as utils from '../lib/utils' -export class BrowserFieldsPlugin { +export class BrowserSpecificFieldsPlugin { private readonly browser: DevOptions['browser'] private readonly manifestPath: string @@ -24,11 +24,11 @@ export class BrowserFieldsPlugin { apply(compiler: Compiler): void { compiler.hooks.compilation.tap( - 'compatibility:browser-fields', + 'compatibility:browser-specific-fields', (compilation: Compilation) => { compilation.hooks.processAssets.tap( { - name: 'compatibility:browser-fields', + name: 'compatibility:browser-specific-fields', // One after PROCESS_ASSETS_STAGE_ADDITIONS, where // we first emit the manifest.json asset. stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE diff --git a/programs/develop/webpack/plugin-compatibility/index.ts b/programs/develop/webpack/plugin-compatibility/index.ts index 4d058eb6..315fd152 100644 --- a/programs/develop/webpack/plugin-compatibility/index.ts +++ b/programs/develop/webpack/plugin-compatibility/index.ts @@ -8,7 +8,7 @@ import {type Compiler} from 'webpack' import {PluginInterface} from '../webpack-types' import {PolyfillPlugin} from './feature-polyfill' -import {BrowserFieldsPlugin} from './feature-browser-fields' +import {BrowserSpecificFieldsPlugin} from './feature-browser-specific-fields' import {type DevOptions} from '../../commands/commands-lib/config-types' export class CompatibilityPlugin { @@ -36,7 +36,7 @@ export class CompatibilityPlugin { } // Handle manifest compatibilities across browser vendors. - new BrowserFieldsPlugin({ + new BrowserSpecificFieldsPlugin({ manifestPath: this.manifestPath, browser: this.browser || 'chrome' }).apply(compiler) diff --git a/programs/develop/webpack/plugin-compilation/index.ts b/programs/develop/webpack/plugin-compilation/index.ts index dbfac355..8134bbdc 100644 --- a/programs/develop/webpack/plugin-compilation/index.ts +++ b/programs/develop/webpack/plugin-compilation/index.ts @@ -28,7 +28,7 @@ export class CompilationPlugin { new CleanDistFolderPlugin().apply(compiler) - compiler.hooks.done.tap('develop:brand', (stats) => { + compiler.hooks.done.tapAsync('develop:brand', (stats, done) => { stats.compilation.name = undefined // Calculate compilation time @@ -36,6 +36,8 @@ export class CompilationPlugin { const manifestName = require(this.manifestPath).name console.log(messages.boring(manifestName, duration, stats)) + + done() }) } } diff --git a/programs/develop/webpack/plugin-extension/feature-special-folders/warn-upon-folder-changes.ts b/programs/develop/webpack/plugin-extension/feature-special-folders/warn-upon-folder-changes.ts index 557eba39..295acb50 100644 --- a/programs/develop/webpack/plugin-extension/feature-special-folders/warn-upon-folder-changes.ts +++ b/programs/develop/webpack/plugin-extension/feature-special-folders/warn-upon-folder-changes.ts @@ -17,11 +17,9 @@ export class WarnUponFolderChanges { ) { const pathRelative = path.relative(process.cwd(), filePath) const addingOrRemoving = isAddition ? 'Adding' : 'Removing' - const addedOrRemoved = isAddition ? 'added' : 'removed' const typeOfAsset = folder === 'pages' ? 'HTML pages' : 'script files' const errorMessage = messages.serverRestartRequiredFromSpecialFolderError( addingOrRemoving, - addedOrRemoved, folder, typeOfAsset, pathRelative diff --git a/programs/develop/webpack/plugin-reload/steps/create-web-socket-server/web-socket-server/start-server.ts b/programs/develop/webpack/plugin-reload/steps/create-web-socket-server/web-socket-server/start-server.ts index da86d9b1..0fe8148f 100644 --- a/programs/develop/webpack/plugin-reload/steps/create-web-socket-server/web-socket-server/start-server.ts +++ b/programs/develop/webpack/plugin-reload/steps/create-web-socket-server/web-socket-server/start-server.ts @@ -50,7 +50,7 @@ function setupServer(port: number, browser: DevOptions['browser']) { export async function startServer(compiler: Compiler, options: DevOptions) { const projectPath = compiler.options.context || '' const manifest = require(path.join(projectPath, 'manifest.json')) - const port = options.port || 8000 + const port = 8000 const webSocketServer = setupServer(port, options.browser) webSocketServer.on('connection', (ws) => { diff --git a/programs/develop/webpack/webpack-config.ts b/programs/develop/webpack/webpack-config.ts index 3b7298e5..4d81c190 100644 --- a/programs/develop/webpack/webpack-config.ts +++ b/programs/develop/webpack/webpack-config.ts @@ -28,9 +28,6 @@ export default function webpackConfig( browserFlags?: string[] } ): webpack.Configuration { - console.log({ - devOptions - }) const manifestPath = path.join(projectPath, 'manifest.json') const manifest = utils.filterKeysForThisBrowser( require(manifestPath), @@ -133,21 +130,20 @@ export default function webpackConfig( stats: true, port: 8000 }), - // Open defaults to true - devOptions.open !== false && - new BrowsersPlugin({ - extension: [ - userExtensionOutputPath, - path.join(__dirname, 'extensions', `${browser}-manager-extension`) - ], - browser, - startingUrl: devOptions.startingUrl, - profile: devOptions.profile, - preferences: devOptions.preferences, - browserFlags: devOptions.browserFlags, - chromiumBinary: devOptions.chromiumBinary, - geckoBinary: devOptions.geckoBinary - }) + new BrowsersPlugin({ + extension: [ + userExtensionOutputPath, + path.join(__dirname, 'extensions', `${browser}-manager-extension`) + ], + browser, + open: devOptions.open, + startingUrl: devOptions.startingUrl, + profile: devOptions.profile, + preferences: devOptions.preferences, + browserFlags: devOptions.browserFlags, + chromiumBinary: devOptions.chromiumBinary, + geckoBinary: devOptions.geckoBinary + }) ].filter(Boolean), stats: { all: false,