Create a devtools-components bundle

Author: nchevobbe

packages/devtools-components/RELEASE.md

@@ -0,0 +1,53 @@
+### How to create a new devtools-components release for mozilla-central.
+
+Before you get started, you will need clones of devtools-components and mozilla-central, as well as
+a Bugzilla account.
+
+```
+1. Prepare devtools-components release
+  a. create a release branch on github
+  b. update minor version in package.json, reset build version:
+    v0.N.X -> v0.N+1.0
+  c. commit `release: bump devtools-components version to v0.N+1.0`
+  d. create a PR on Github for this release
+  e. make sure you have a configs/local.json file, with `firefox.mcPath` pointing to your mozilla-central clone
+
+2. Copy to mozilla central
+  a. update your mozilla-central clone to the latest
+  b. in reps, run yarn copy-assets (or node bin/copy-assets.js)`
+  c. create a new bug in Developer Tools: Shared Components [1]
+  d. commit 'Bug XXXXXXX - devtools-components v0.N+1.0: update devtools-components bundle from GitHub;r=reviewer'
+
+3. Validate & cleanup
+  a. push to try, test locally, submit for review etc ...
+  b. while try fails or some problem is detected, go back to devtools-components, fix the issue,
+     create a new bundle and go back to 2.a
+  c. when everything is fine and the patch is r+, land on autoland/inbound
+  d. merge the PR on github
+  e. create a tag for devtools-components-v0.N+1.0 on github
+```
+
+After that any issue with the bundle should be addressed with a new build version.
+Ideally, if the bundle has to be updated in mozilla-central for a bugfix, a corresponding
+tag should be created on GitHub.
+
+[1] https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Shared%20Components
+
+
+### How to publish a new devtools-components release to npm.
+
+Steps to publish to npm :
+```
+1. Checkout the latest release tag
+  a. git fetch --tags # get new tags from remote
+  b. git checkout tags/devtools-components-v0.N+1.0 # checkout the tag created for the release
+2. npm login # Might ask your npm username and password
+3. npm publish
+```
+
+To publish a new version of the package on npm, you need to :
+
+1. have an npm account and
+2. be a collaborator on the package.
+
+If you want to become a collaborator on the devtools-components package, please ask the other collaborators, either through IRC or Slack, or by filing an issue in this repo.

packages/devtools-components/bin/copy-assets.js

@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const {
+  tools: { makeBundle }
+} = require("devtools-launchpad/index");
+const fs = require("fs-extra");
+const path = require("path");
+const minimist = require("minimist");
+const getConfig = require("./getConfig");
+const { getValue, setConfig } = require("devtools-config");
+
+const args = minimist(process.argv.slice(2), {
+  boolean: ["watch", "symlink"]
+});
+
+async function start() {
+  try {
+    console.log("start: copy assets");
+    const projectPath = path.resolve(__dirname, "..");
+    const mcModulePath = "devtools/client/shared/components";
+
+    const envConfig = getConfig();
+    setConfig(envConfig);
+
+    const mcPath = getValue("firefox.mcPath");
+
+    console.log("  output path is:", mcPath);
+
+    console.log("  creating devtools-components.js bundle...");
+    await makeBundle({
+      outputPath: path.join(mcPath, mcModulePath),
+      projectPath,
+      watch: args.watch
+    });
+    console.log("  remove build artifacts...");
+    fs.removeSync(path.join(mcPath, mcModulePath, "devtools-components.js.map"));
+    console.log("done: copy assets");
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+start();

packages/devtools-components/bin/getConfig.js

@@ -0,0 +1,20 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const merge = require("lodash").merge;
+const fs = require("fs");
+const path = require("path");
+
+function getConfig() {
+  const developmentConfig = require("../configs/development.json");
+
+  let localConfig = {};
+  if (fs.existsSync(path.resolve(__dirname, "../configs/local.json"))) {
+    localConfig = require("../configs/local.json");
+  }
+
+  return merge({}, developmentConfig, localConfig);
+}
+
+module.exports = getConfig;

packages/devtools-components/configs/development.json

@@ -0,0 +1,21 @@
+{
+  "title": "devtools-components",
+  "environment": "development",
+  "logging": {
+    "client": false,
+    "firefoxProxy": false,
+    "actions": false
+  },
+  "theme": "light",
+  "firefox": {
+    "webSocketConnection": false,
+    "host": "localhost",
+    "webSocketPort": 9000,
+    "tcpPort": 6080,
+    "mcPath": "./firefox"
+  },
+  "development": {
+    "serverPort": 8000
+  },
+  "features": {}
+}

packages/devtools-components/index.js

@@ -4,6 +4,6 @@
 
 import Tree from "./src/tree";
 
-export default {
+module.exports = {
   Tree
 };

packages/devtools-components/package.json

@@ -4,6 +4,7 @@
   "description": "DevTools HTML Components",
   "main": "index.js",
   "scripts": {
+    "copy-assets": "node bin/copy-assets",
     "license-check": "devtools-license-check",
     "storybook": "start-storybook -p 9002 -c .storybook",
     "test": "jest"
@@ -22,13 +23,15 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-preset-react": "^6.24.1",
     "devtools-license-check": "^0.5.1",
+    "devtools-launchpad": "^0.0.100",
     "enzyme": "^2.8.2",
     "eslint": "^3.12.0",
     "eslint-plugin-mozilla": "0.2.3",
     "fs-extra": "^2.0.0",
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",
-    "jest-flow-transform": "^1.0.1"
+    "jest-flow-transform": "^1.0.1",
+    "lodash": "^4.17.2"
   },
   "jest": {
     "rootDir": "src",

packages/devtools-components/webpack.config.js

@@ -2,20 +2,47 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: [
-          { loader: "style-loader" },
-          { loader: "css-loader", options: { importLoaders: 1 } }
-        ]
-      },
-      {
-        test: /\.svg$/,
-        loader: "svg-inline-loader"
-      }
-    ]
+const { toolboxConfig } = require("devtools-launchpad/index");
+const getConfig = require("./bin/getConfig");
+const {isDevelopment} = require("devtools-config");
+
+const path = require("path");
+const projectPath = path.join(__dirname);
+
+const webpackConfig = {
+  entry: {
+    "devtools-components": path.join(projectPath, "index.js"),
+  },
+
+  output: {
+    path: path.join(__dirname, "assets/build"),
+    filename: "[name].js",
+    publicPath: "/assets/build",
+    libraryTarget: "umd",
+  },
+  resolve: {
+    alias: {
+      "devtools/client/shared/vendor/react": "react",
+      "devtools/client/shared/vendor/react-dom": "react-dom",
+      "devtools/client/shared/vendor/react-dom-factories": "react-dom-factories",
+      "devtools/client/shared/vendor/react-prop-types": "prop-types",
+      "Services": path.join(__dirname,
+        "node_modules/devtools-modules/client/shared/shim/Services"),
+    }
   }
 };
+
+const extra = {};
+webpackConfig.plugins = [];
+if (!isDevelopment()) {
+  extra.excludeMap = {
+    react: "devtools/client/shared/vendor/react",
+    "react-dom": "devtools/client/shared/vendor/react-dom",
+    "react-dom-factories": "devtools/client/shared/vendor/react-dom-factories",
+    "prop-types": "devtools/client/shared/vendor/react-prop-types",
+    lodash: "devtools/client/shared/vendor/lodash",
+  };
+}
+
+const envConfig = getConfig();
+module.exports = toolboxConfig(webpackConfig, envConfig, extra);