Iterated on Webpack configs until I got the inline and shell packages seemingly working

Brian Vaughn · Brian Vaughn · commit 30b8ef375610 · 2019-08-14T09:24:35.000-07:00
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
@@ -30,11 +30,6 @@ module.exports = {
     library: 'ReactDevToolsBackend',
     libraryTarget: 'umd',
   },
-  resolve: {
-    alias: {
-      src: resolve(__dirname, '../../src'),
-    },
-  },
   plugins: [
     new DefinePlugin({
       __DEV__: true,
@@ -49,7 +44,12 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: resolve(__dirname, '../../babel.config.js'),
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
         },
       },
     ],
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
@@ -29,11 +29,6 @@ module.exports = {
     library: '[name]',
     libraryTarget: 'commonjs2',
   },
-  resolve: {
-    alias: {
-      src: resolve(__dirname, '../../src'),
-    },
-  },
   plugins: [
     new DefinePlugin({
       __DEV__: false,
@@ -49,7 +44,12 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: resolve(__dirname, '../../babel.config.js'),
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
         },
       },
       {
diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md
@@ -12,6 +12,6 @@ You can also build and install from source:
 ```sh
 yarn install
 
-yarn build:extension:chrome # builds at "packages/react-devtools-extensions/chrome/build"
-yarn build:extension:firefox # builds at "packages/react-devtools-extensions/firefox/build"
+yarn build:chrome # builds at "packages/react-devtools-extensions/chrome/build"
+yarn build:firefox # builds at "packages/react-devtools-extensions/firefox/build"
 ```
diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
@@ -97,7 +97,7 @@ const postProcess = async (tempPath, destinationPath) => {
 };
 
 const main = async buildId => {
-  const root = join(__dirname, '..', buildId);
+  const root = join(__dirname, buildId);
   const manifestPath = join(root, 'manifest.json');
   const destinationPath = join(root, 'build');
 
diff --git a/packages/react-devtools-extensions/chrome/test.js b/packages/react-devtools-extensions/chrome/test.js
@@ -5,7 +5,7 @@
 const chromeLaunch = require('chrome-launch');
 const {resolve} = require('path');
 
-const EXTENSION_PATH = resolve('shells/browser/chrome/build/unpacked');
+const EXTENSION_PATH = resolve('./chrome/build/unpacked');
 const START_URL = 'https://facebook.github.io/react/';
 
 chromeLaunch(START_URL, {
diff --git a/packages/react-devtools-extensions/firefox/test.js b/packages/react-devtools-extensions/firefox/test.js
@@ -6,7 +6,7 @@ const {exec} = require('child-process-promise');
 const {Finder} = require('firefox-profile');
 const {resolve} = require('path');
 
-const EXTENSION_PATH = resolve('shells/browser/firefox/build/unpacked');
+const EXTENSION_PATH = resolve('./firefox/build/unpacked');
 const START_URL = 'https://facebook.github.io/react/';
 
 const main = async () => {
diff --git a/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js b/packages/react-devtools-extensions/flow-typed/npm/react-test-renderer_v16.x.x.js
@@ -50,6 +50,7 @@ type TestRendererOptions = {
 };
 
 declare module 'react-test-renderer' {
+  // eslint-disable-next-line no-inner-declarations
   declare export type ReactTestRenderer = {
     toJSON(): null | ReactTestRendererJSON,
     toTree(): null | ReactTestRendererTree,
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
@@ -3,11 +3,39 @@
   "name": "react-devtools-extensions",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox",
+    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome && yarn run build:firefox",
+    "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
+    "build:chrome:crx": "cross-env NODE_ENV=production node ./chrome/build --crx",
+    "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
+    "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
+    "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
+    "test:chrome": "node ./chrome/test",
+    "test:firefox": "node ./firefox/test"
+  },
   "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "archiver": "^3.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.4",
+    "chrome-launch": "^1.1.4",
+    "child-process-promise": "^2.2.1",
     "css-loader": "^1.0.1",
+    "firefox-profile": "^1.0.2",
+    "node-libs-browser": "0.5.3",
+    "nullthrows": "^1.0.0",
     "raw-loader": "^3.1.0",
     "style-loader": "^0.23.1",
+    "web-ext": "^3.0.0",
     "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.3.1"
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
@@ -10,6 +10,8 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+
 const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
@@ -27,7 +29,9 @@ module.exports = {
   },
   resolve: {
     alias: {
-      src: resolve(__dirname, '../../../src'),
+      react: resolve(builtModulesDir, 'react'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
   plugins: [
@@ -44,7 +48,12 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: resolve(__dirname, '../../../babel.config.js'),
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
         },
       },
     ],
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
@@ -10,6 +10,8 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+
 const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
@@ -30,6 +32,13 @@ module.exports = {
     path: __dirname + '/build',
     filename: '[name].js',
   },
+  resolve: {
+    alias: {
+      react: resolve(builtModulesDir, 'react'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
+    },
+  },
   plugins: [
     new DefinePlugin({
       __DEV__: false,
@@ -45,7 +54,12 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: resolve(__dirname, '../babel.config.js'),
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
         },
       },
       {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
@@ -20,6 +20,23 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "cross-env": "^3.1.4"
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^24.7.1",
+    "babel-loader": "^8.0.4",
+    "cross-env": "^3.1.4",
+    "css-loader": "^1.0.1",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.26.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.3.1"
   }
 }
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
@@ -29,11 +29,6 @@ module.exports = {
     library: '[name]',
     libraryTarget: 'commonjs2',
   },
-  resolve: {
-    alias: {
-      src: resolve(__dirname, '../../src'),
-    },
-  },
   externals: {
     react: 'react',
     'react-dom': 'react-dom',
@@ -54,7 +49,12 @@ module.exports = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: resolve(__dirname, '../../babel.config.js'),
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
         },
       },
       {
diff --git a/packages/react-devtools-shared/babel.config.js b/packages/react-devtools-shared/babel.config.js
@@ -1,5 +1,5 @@
-const chromeManifest = require('./chrome/manifest.json');
-const firefoxManifest = require('./firefox/manifest.json');
+const chromeManifest = require('../react-devtools-extensions/chrome/manifest.json');
+const firefoxManifest = require('../react-devtools-extensions/firefox/manifest.json');
 
 const minChromeVersion = parseInt(chromeManifest.minimum_chrome_version, 10);
 const minFirefoxVersion = parseInt(
@@ -26,7 +26,7 @@ module.exports = api => {
     targets.firefox = minFirefoxVersion.toString();
 
     // This targets RN/Hermes.
-    targets.IE = '11';
+    targets.ie = '11';
   }
   const plugins = [
     ['@babel/plugin-transform-flow-strip-types'],
diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
@@ -3,6 +3,7 @@
   "name": "react-devtools-shared",
   "version": "0.0.0",
   "dependencies": {
+    "@babel/runtime": "^7.0.0",
     "@reach/menu-button": "^0.1.17",
     "@reach/tooltip": "^0.2.2",
     "clipboard-js": "^0.3.6",
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -97,8 +97,8 @@ export default function DevTools({
 
   const viewElementSource = useMemo(
     () => ({
-      canViewElementSourceFunction,
-      viewElementSourceFunction,
+      canViewElementSourceFunction: canViewElementSourceFunction || null,
+      viewElementSourceFunction: viewElementSourceFunction || null,
     }),
     [canViewElementSourceFunction, viewElementSourceFunction],
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
@@ -51,7 +51,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     let bugURL = process.env.GITHUB_URL;
     if (bugURL) {
       const title = `Error: "${errorMessage || ''}"`;
-      const label = '😭 bug';
+      const label = 'Component: Developer Tools';
 
       let body = '<!-- please provide repro information here -->\n';
       body += '\n---------------------------------------------';
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -30,7 +30,8 @@ export default function SidebarSelectedFiberInfo(_: Props) {
   });
 
   const listItems = [];
-  for (let i = 0; i < commitIndices.length; i++) {
+  let i = 0;
+  for (i = 0; i < commitIndices.length; i++) {
     const commitIndex = commitIndices[i];
 
     const {duration, timestamp} = profilerStore.getCommitData(
diff --git a/packages/react-devtools-shell/README.md b/packages/react-devtools-shell/README.md
@@ -0,0 +1 @@
+Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json
@@ -2,7 +2,32 @@
   "private": true,
   "name": "react-devtools-shell",
   "version": "0.0.0",
+  "scripts": {
+    "build": "cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js",
+    "deploy": "yarn run build && now deploy && now alias react-devtools-experimental",
+    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open"
+  },
   "dependencies": {
     "react-native-web": "^0.11.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^24.7.1",
+    "babel-loader": "^8.0.4",
+    "cross-env": "^3.1.4",
+    "css-loader": "^1.0.1",
+    "raw-loader": "^3.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.26.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.3.1"
   }
 }
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
@@ -17,9 +17,9 @@ if (!TARGET) {
   process.exit(1);
 }
 
-const __DEV__ = NODE_ENV === 'development';
+const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
 
-const root = resolve(__dirname, '../..');
+const __DEV__ = NODE_ENV === 'development';
 
 const GITHUB_URL = getGitHubURL();
 const DEVTOOLS_VERSION = getVersionString();
@@ -33,11 +33,9 @@ const config = {
   },
   resolve: {
     alias: {
-      'react-devtools-inline': resolve(
-        root,
-        'packages/react-devtools-inline/src/',
-      ),
-      src: resolve(root, 'src'),
+      react: resolve(builtModulesDir, 'react'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
   plugins: [
@@ -54,7 +52,12 @@ const config = {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
-          configFile: resolve(root, 'babel.config.js'),
+          configFile: resolve(
+            __dirname,
+            '..',
+            'react-devtools-shared',
+            'babel.config.js',
+          ),
         },
       },
       {
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
@@ -5,6 +5,7 @@
 .*/rollup/shims/facebook-www/.*
 .*/rollup/shims/react-native/.*
 
+.*/node_modules/@snyk/.*
 .*/node_modules/y18n/.*
 .*/node_modules/chrome-devtools-frontend/.*
 .*/node_modules/devtools-timeline-model/.*
diff --git a/yarn.lock b/yarn.lock
