Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: resolve browser via env variables based on build rather than user agent #27179

Merged
merged 1 commit into from
Aug 29, 2023
Merged

refactor: resolve browser via env variables based on build rather than user agent #27179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions packages/react-devtools-extensions/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,25 @@ const preProcess = async (destinationPath, tempPath) => {
await ensureDir(tempPath); // Create temp dir for this new build
};

const build = async (tempPath, manifestPath) => {
const build = async (tempPath, manifestPath, envExtension = {}) => {
const binPath = join(tempPath, 'bin');
const zipPath = join(tempPath, 'zip');
const mergedEnv = {...process.env, ...envExtension};

const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
execSync(
`${webpackPath} --config webpack.config.js --output-path ${binPath}`,
{
cwd: __dirname,
env: process.env,
env: mergedEnv,
stdio: 'inherit',
},
);
execSync(
`${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
{
cwd: __dirname,
env: process.env,
env: mergedEnv,
stdio: 'inherit',
},
);
Expand Down Expand Up @@ -132,16 +133,32 @@ const postProcess = async (tempPath, destinationPath) => {
await remove(tempPath); // Clean up temp directory and files
};

const SUPPORTED_BUILDS = ['chrome', 'firefox', 'edge'];

const main = async buildId => {
if (!SUPPORTED_BUILDS.includes(buildId)) {
throw new Error(
`Unexpected build id - "${buildId}". Use one of ${JSON.stringify(
SUPPORTED_BUILDS,
)}.`,
);
}

const root = join(__dirname, buildId);
const manifestPath = join(root, 'manifest.json');
const destinationPath = join(root, 'build');

const envExtension = {
IS_CHROME: buildId === 'chrome',
IS_FIREFOX: buildId === 'firefox',
IS_EDGE: buildId === 'edge',
};

try {
const tempPath = join(__dirname, 'build', buildId);
await ensureLocalBuild();
await preProcess(destinationPath, tempPath);
await build(tempPath, manifestPath);
await build(tempPath, manifestPath, envExtension);

const builtUnpackedPath = join(destinationPath, 'unpacked');
await postProcess(tempPath, destinationPath);
Expand Down
11 changes: 2 additions & 9 deletions packages/react-devtools-extensions/edge/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const chalk = require('chalk');
const {execSync} = require('child_process');
const {join} = require('path');
const {argv} = require('yargs');

const build = require('../build');

const main = async () => {
Expand All @@ -15,15 +16,7 @@ const main = async () => {

const cwd = join(__dirname, 'build');
if (crx) {
const crxPath = join(
__dirname,
'..',
'..',
'..',
'node_modules',
'.bin',
'crx'
);
const crxPath = join(__dirname, '..', 'node_modules', '.bin', 'crx');

execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
cwd,
Expand Down
23 changes: 3 additions & 20 deletions packages/react-devtools-extensions/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,9 @@

import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';

export const IS_EDGE = navigator.userAgent.indexOf('Edg') >= 0;
export const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
export const IS_CHROME = IS_EDGE === false && IS_FIREFOX === false;

export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';

export function getBrowserName(): BrowserName {
if (IS_EDGE) {
return 'Edge';
}
if (IS_FIREFOX) {
return 'Firefox';
}
if (IS_CHROME) {
return 'Chrome';
}
throw new Error(
'Expected browser name to be one of Chrome, Edge or Firefox.',
);
}
export const IS_EDGE: boolean = process.env.IS_EDGE;
export const IS_FIREFOX: boolean = process.env.IS_FIREFOX;
export const IS_CHROME: boolean = process.env.IS_CHROME;

export function getBrowserTheme(): BrowserTheme {
if (IS_CHROME) {
Expand Down
7 changes: 7 additions & 0 deletions packages/react-devtools-extensions/webpack.backend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ const __DEV__ = NODE_ENV === 'development';

const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);

const IS_CHROME = process.env.IS_CHROME === 'true';
const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
const IS_EDGE = process.env.IS_EDGE === 'true';

const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';

module.exports = {
Expand Down Expand Up @@ -79,6 +83,9 @@ module.exports = {
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
'process.env.IS_CHROME': IS_CHROME,
'process.env.IS_FIREFOX': IS_FIREFOX,
'process.env.IS_EDGE': IS_EDGE,
}),
new DevToolsIgnorePlugin({
shouldIgnorePath: function (path) {
Expand Down
7 changes: 7 additions & 0 deletions packages/react-devtools-extensions/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
const EDITOR_URL = process.env.EDITOR_URL || null;
const LOGGING_URL = process.env.LOGGING_URL || null;

const IS_CHROME = process.env.IS_CHROME === 'true';
const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
const IS_EDGE = process.env.IS_EDGE === 'true';

const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';

const babelOptions = {
Expand Down Expand Up @@ -105,6 +109,9 @@ module.exports = {
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
'process.env.IS_CHROME': IS_CHROME,
'process.env.IS_FIREFOX': IS_FIREFOX,
'process.env.IS_EDGE': IS_EDGE,
}),
],
module: {
Expand Down