build: added build & consolidated structure a bit

.gitignore

@@ -7,3 +7,4 @@ dist
 # when working with contributors
 package-lock.json
 yarn.lock
+chrome/build

build.js

@@ -0,0 +1,118 @@
+#!/usr/bin/env node
+
+// shamelessly copied from react devtools as it's doing exactly what i need.
+
+const { execSync } = require("child_process");
+const { readFileSync, writeFileSync, createWriteStream } = require("fs");
+const { join } = require("path");
+const { copy, ensureDir, move, remove } = require("fs-extra");
+const archiver = require("archiver");
+const { getGitCommit } = require("./git");
+
+// These files are copied along with Webpack-bundled files
+// to produce the final web extension
+const STATIC_FILES = ["icons", "pages", "lib"];
+
+const preProcess = async (destinationPath, tempPath) => {
+  await remove(destinationPath); // Clean up from previously completed builds
+  await remove(tempPath); // Clean up from any previously failed builds
+  await ensureDir(tempPath); // Create temp dir for this new build
+};
+
+const build = async (tempPath, manifestPath) => {
+  const binPath = join(tempPath, "bin");
+  const zipPath = join(tempPath, "zip");
+
+  const webpackPath = join(__dirname, "node_modules", ".bin", "webpack");
+  execSync(
+    `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
+    {
+      cwd: __dirname,
+      env: process.env,
+      stdio: "inherit",
+    }
+  );
+  // execSync(
+  //   `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
+  //   {
+  //     cwd: __dirname,
+  //     env: process.env,
+  //     stdio: 'inherit',
+  //   },
+  // );
+
+  // Make temp dir
+  await ensureDir(zipPath);
+
+  const copiedManifestPath = join(zipPath, "manifest.json");
+
+  // Copy unbuilt source files to zip dir to be packaged:
+  await copy(binPath, join(zipPath, "dist"));
+  await copy(manifestPath, copiedManifestPath);
+  await Promise.all(
+    STATIC_FILES.map((file) => copy(join(__dirname, file), join(zipPath, file)))
+  );
+
+  const commit = getGitCommit();
+  const dateString = new Date().toLocaleDateString();
+  const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
+  const versionDateString = `${manifest.version} (${dateString})`;
+  if (manifest.version_name) {
+    // eslint-disable-next-line babel/camelcase
+    manifest.version_name = versionDateString;
+  }
+  manifest.description += `\n\nCreated from revision ${commit} on ${dateString}.`;
+
+  writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
+
+  // Pack the extension
+  const archive = archiver("zip", { zlib: { level: 9 } });
+  const zipStream = createWriteStream(
+    join(tempPath, "TestingLibraryDevTools.zip")
+  );
+  await new Promise((resolve, reject) => {
+    archive
+      .directory(zipPath, false)
+      .on("error", (err) => reject(err))
+      .pipe(zipStream);
+    archive.finalize();
+    zipStream.on("close", () => resolve());
+  });
+};
+
+const postProcess = async (tempPath, destinationPath) => {
+  const unpackedSourcePath = join(tempPath, "zip");
+  const packedSourcePath = join(tempPath, "TestingLibraryDevTools.zip");
+  const packedDestPath = join(destinationPath, "TestingLibraryDevTools.zip");
+  const unpackedDestPath = join(destinationPath, "unpacked");
+
+  await move(unpackedSourcePath, unpackedDestPath); // Copy built files to destination
+  await move(packedSourcePath, packedDestPath); // Copy built files to destination
+  await remove(tempPath); // Clean up temp directory and files
+};
+
+const main = async (buildId) => {
+  const root = join(__dirname, buildId);
+  const manifestPath = join(root, "manifest.json");
+  const destinationPath = join(root, "build");
+
+  try {
+    const tempPath = join(__dirname, "build", buildId);
+    await preProcess(destinationPath, tempPath);
+    await build(tempPath, manifestPath);
+
+    const builtUnpackedPath = join(destinationPath, "unpacked");
+    await postProcess(tempPath, destinationPath);
+
+    return builtUnpackedPath;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    // eslint-disable-next-line no-process-exit
+    process.exit(1);
+  }
+
+  return null;
+};
+
+module.exports = main;

chrome/build.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-process-exit */
+/* eslint-disable no-console */
+const { execSync } = require("child_process");
+const { existsSync } = require("fs");
+const { isAbsolute, join, relative } = require("path");
+const chalk = require("chalk");
+const { argv } = require("yargs");
+const build = require("../build");
+
+const main = async () => {
+  const { crx, keyPath } = argv;
+
+  if (crx) {
+    if (!keyPath || !existsSync(keyPath)) {
+      console.error("Must specify a key file (.pem) to build CRX");
+      process.exit(1);
+    }
+  }
+
+  await build("chrome");
+
+  if (crx) {
+    const cwd = join(__dirname, "build");
+
+    let safeKeyPath = keyPath;
+    if (!isAbsolute(keyPath)) {
+      safeKeyPath = join(relative(cwd, process.cwd()), keyPath);
+    }
+
+    const crxPath = join(
+      __dirname,
+      "..",
+      "..",
+      "..",
+      "node_modules",
+      ".bin",
+      "crx"
+    );
+
+    execSync(
+      `${crxPath} pack ./unpacked -o TestingLibraryDevTools.crx -p ${safeKeyPath}`,
+      {
+        cwd,
+      }
+    );
+  }
+
+  console.log(chalk.green("\nThe Chrome extension has been built!"));
+  console.log(chalk.green("You can test this build by running:"));
+  console.log(chalk.gray("\n# From the root directory:"));
+  console.log("yarn run test:chrome");
+};
+
+main();

manifest.json → chrome/manifest.json

@@ -3,40 +3,27 @@
   "version": "0.0.1",
   "manifest_version": 2,
   "description": "Find the suggested query to use in your tests",
-  "homepage_url": "https://testing-library.com/docs/guide-which-query",
+  "homepage_url": "https://github.com/testing-library/which-query",
   "icons": {
     "16": "icons/icon16.png",
     "48": "icons/icon48.png",
     "128": "icons/icon128.png"
   },
-  "default_locale": "en",
   "background": {
     "scripts": ["dist/background.js"],
     "persistent": false
   },
-  "web_accessible_resources": [
-    "node_modules/@testing-library/dom/dist/@testing-library/dom.umd.min.js",
-    "src/globals.js"
-  ],
+  "web_accessible_resources": ["dist/globals.js"],
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": [
-        "node_modules/@testing-library/dom/dist/@testing-library/dom.umd.min.js",
-        "dist/contentScript.js"
-      ]
+      "js": ["dist/contentScript.js"]
     }
   ],
   "browser_action": {
     "default_icon": "icons/icon48.png"
   },
   "content_security_policy": "script-src 'self' 'sha256-nP0EI9B9ad8IoFUti2q7EQBabcE5MS5v0nkvRfUbYnM='; object-src 'self'",
   "devtools_page": "pages/devtools.html",
-  "permissions": [
-    "activeTab",
-    "contextMenus",
-    "clipboardWrite",
-    "clipboardRead",
-    "notifications"
-  ]
+  "permissions": ["activeTab", "contextMenus", "clipboardWrite"]
 }

git.js

@@ -0,0 +1,33 @@
+const { execSync } = require("child_process");
+const { readFileSync } = require("fs");
+const { resolve } = require("path");
+
+const GITHUB_URL = "https://github.com/facebook/react";
+
+function getGitCommit() {
+  try {
+    return execSync("git show -s --format=%h").toString().trim();
+  } catch (error) {
+    // Mozilla runs this command from a git archive.
+    // In that context, there is no Git revision.
+    return null;
+  }
+}
+
+function getVersionString() {
+  const packageVersion = JSON.parse(
+    readFileSync(
+      resolve(__dirname, "..", "react-devtools-core", "./package.json")
+    )
+  ).version;
+
+  const commit = getGitCommit();
+
+  return `${packageVersion}-${commit}`;
+}
+
+module.exports = {
+  GITHUB_URL,
+  getGitCommit,
+  getVersionString,
+};

package.json

@@ -23,6 +23,8 @@
   ],
   "scripts": {
     "build": "webpack",
+    "build:chrome:crx": "cross-env NODE_ENV=production node ./chrome/build --crx",
+    "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
     "lint": "kcd-scripts lint",
     "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",
@@ -38,14 +40,19 @@
   },
   "devDependencies": {
     "all-contributors-cli": "^6.14.2",
+    "archiver": "^4.0.1",
+    "chalk": "^4.1.0",
+    "fs-extra": "^9.0.1",
     "kcd-scripts": "^6.0.0",
     "rollup": "^2.12.0",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "yargs": "^15.3.1"
   },
   "eslintIgnore": [
     "node_modules",
     "coverage",
-    "dist"
+    "dist",
+    "lib"
   ]
 }

src/contentScript.js

@@ -107,8 +107,4 @@ function injectScript(scriptPath) {
   });
 }
 
-injectScript(
-  "node_modules/@testing-library/dom/dist/@testing-library/dom.umd.min.js"
-).then(() => {
-  injectScript("src/globals.js");
-});
+injectScript("dist/globals.js");

src/elementsPanel.js

@@ -2,6 +2,7 @@ const Bridge = require("crx-bridge").default;
 const prettier = require("prettier/standalone");
 const babelParser = require("prettier/parser-babel");
 const hljs = require("../lib/highlight.pack");
+
 Bridge.onMessage(
   "show-suggestion",
   ({ data: { suggestedQuery, exactIndex, length } }) => {

src/globals.js

@@ -1,7 +1,8 @@
+const { screen, fireEvent } = require("@testing-library/dom");
 const Screen = Object.getPrototypeOf(window.screen);
 
-for (const func of Object.keys(window.TestingLibraryDom.screen)) {
-  Screen[func] = window.TestingLibraryDom.screen[func];
+for (const func of Object.keys(screen)) {
+  Screen[func] = screen[func];
 }
 
-window.fireEvent = window.TestingLibraryDom.fireEvent;
+window.fireEvent = fireEvent;

webpack.config.js

@@ -6,11 +6,12 @@ module.exports = {
     contentScript: "./src/contentScript.js",
     devtools: "./src/devtools.js",
     elementsPanel: "./src/elementsPanel.js",
+    globals: "./src/globals.js",
   },
   output: {
     path: path.resolve(__dirname, "dist"),
     filename: "[name].js",
   },
-  mode: "development",
+  mode: process.env.NODE_ENV === "development" ? "development" : "production",
   devtool: "cheap-module-source-map",
 };