Simplify contribution process; integrate inspectpack fixtures.

Author: parkerziegler

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "formidable/configurations/es6-node",
+  "rules": {
+    "func-style": "off",
+    "arrow-parens": ["error", "as-needed"]
+  }
+}

.eslintrc.json

@@ -1,11 +1,12 @@
 # dependencies
-node_modules
+/node_modules/
 
 # misc
 .DS_Store
 npm-debug.log*
 .nyc_output
 .coverage
-.lankrc*
 yarn-error.log
 package-lock.json
+dist-*
+.vscode

.gitignore

@@ -94,6 +94,33 @@ Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like
 
 *Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. `new DashboardPlugin(dashboard.setData)`*
 
+### Local Development
+
+We've standardized our local development process for `webpack-dashboard` on using `yarn`. We recommend using `yarn 1.10.x+`, as these versions include the `integrity` checksum. The checksum helps to verify the integrity of an installed package before its code is executed. 🚀
+
+To run this repo locally against our provided examples, take the usual steps.
+
+```sh
+yarn
+yarn dev
+```
+
+We re-use a small handful of the fixtures from [`inspectpack`](https://github.com/FormidableLabs/inspectpack) so that you can work locally on the dashboard while simulating common `node_modules` dependency issues you might face in the wild. These live in `/examples`.
+
+To change the example you're working against, simply alter the `EXAMPLE` env variable in the `dev` script in `package.json` to match the scenario you want to run in `/examples`. For example, if you want to run the `tree-shaking` example, change the `dev` script from this:
+
+```sh
+cross-env EXAMPLE=duplicates-esm node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch
+```
+
+to this:
+
+```sh
+cross-env EXAMPLE=tree-shaking node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch
+```
+
+Then just run `yarn dev` to get up and running. PRs are very much appreciated!
+
 #### Credits
 
 Module output deeply inspired by: [https://github.com/robertknight/webpack-bundle-size-analyzer](https://github.com/robertknight/webpack-bundle-size-analyzer)

README.md

@@ -13,7 +13,7 @@ const program = new commander.Command("webpack-dashboard");
 const pkg = require("../package.json");
 
 // Wrap up side effects in a script.
-const main = module.exports = opts => { // eslint-disable-line max-statements
+const main = module.exports = opts => { // eslint-disable-line max-statements, complexity
   opts = opts || {};
   const argv = typeof opts.argv === "undefined" ? process.argv : opts.argv;
 

bin/webpack-dashboard.js

@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

examples/.eslintrc.json

@@ -0,0 +1,34 @@
+const { resolve } = require("path");
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const { DuplicatesPlugin } = require("inspectpack/plugin");
+const Dashboard = require("../../plugin");
+
+// Specify the directory of the example we're working with
+const cwd = `${process.cwd()}/examples/${process.env.EXAMPLE}`;
+if (!process.env.EXAMPLE) {
+  throw new Error("EXAMPLE is required");
+}
+
+module.exports = {
+  mode: "development",
+  devtool: false,
+  context: resolve(cwd),
+  entry: {
+    bundle: "./src/index.js"
+  },
+  output: {
+    path: resolve(cwd, "dist-development-4"),
+    pathinfo: true,
+    filename: "[name].js"
+  },
+  plugins: [
+    new StatsWriterPlugin({
+      fields: ["assets", "modules"]
+    }),
+    new DuplicatesPlugin({
+      verbose: true,
+      emitErrors: false
+    }),
+    new Dashboard()
+  ]
+};

examples/config/webpack.config.js

@@ -0,0 +1,10 @@
+{
+  "name": "duplicates-esm",
+  "version": "1.2.3",
+  "description": "DUMMY APP",
+  "main": "src/index.js",
+  "dependencies": {
+    "foo": "^1.0.0",
+    "uses-foo": "^1.0.9"
+  }
+}

examples/duplicates-esm/node_modules/foo/index.js

@@ -0,0 +1,6 @@
+/* eslint-disable no-console*/
+import { foo } from "foo";
+import { usesFoo } from "uses-foo";
+
+console.log("foo", foo());
+console.log("usesFoo", usesFoo());

examples/duplicates-esm/node_modules/foo/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "simple",
+  "version": "1.2.3",
+  "description": "DUMMY APP",
+  "main": "src/index.js"
+}

examples/duplicates-esm/node_modules/uses-foo/index.js

@@ -0,0 +1,6 @@
+
+/* eslint-disable no-console*/
+
+const hello = () => "hello world";
+
+console.log(hello());

examples/duplicates-esm/node_modules/uses-foo/node_modules/foo/index.js

@@ -0,0 +1,10 @@
+{
+  "name": "tree-shaking",
+  "version": "1.2.3",
+  "description": "DUMMY APP",
+  "main": "src/index.js",
+  "dependencies": {
+    "foo": "^1.0.0",
+    "uses-foo": "^1.0.9"
+  }
+}

examples/duplicates-esm/node_modules/uses-foo/node_modules/foo/package.json

@@ -0,0 +1,7 @@
+/* eslint-disable no-console*/
+
+import { red } from "foo";
+import { usesRed } from "uses-foo";
+
+console.log("red", red());
+console.log("usesRed", usesRed());

examples/duplicates-esm/node_modules/uses-foo/package.json

@@ -12,7 +12,8 @@
     "test-cov": "nyc mocha 'test/**/*.spec.js'",
     "lint": "eslint .",
     "check": "npm run lint && npm run test",
-    "check-ci": "npm run lint && npm run test-cov"
+    "check-ci": "npm run lint && npm run test-cov",
+    "dev": "cross-env EXAMPLE=duplicates-esm node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch"
   },
   "repository": {
     "type": "git",
@@ -47,6 +48,7 @@
   "devDependencies": {
     "babel-eslint": "^8.2.3",
     "chai": "^4.1.2",
+    "cross-env": "^5.2.0",
     "eslint": "^4.19.1",
     "eslint-config-formidable": "^4.0.0",
     "eslint-plugin-filenames": "^1.1.0",
@@ -57,6 +59,7 @@
     "sinon": "^5.0.7",
     "sinon-chai": "^3.0.0",
     "webpack": "^4.8.3",
-    "webpack-cli": "^2.1.3"
+    "webpack-cli": "^2.1.3",
+    "webpack-stats-plugin": "^0.2.1"
   }
 }

examples/duplicates-esm/package.json

@@ -1906,6 +1906,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
+  integrity sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==
+  dependencies:
+    cross-spawn "^6.0.5"
+    is-windows "^1.0.0"
+
 cross-spawn@^4:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -3564,7 +3572,7 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-windows@^1.0.1, is-windows@^1.0.2:
+is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
@@ -6422,6 +6430,11 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
+webpack-stats-plugin@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/webpack-stats-plugin/-/webpack-stats-plugin-0.2.1.tgz#1f5bac13fc25d62cbb5fd0ff646757dc802b8595"
+  integrity sha512-OYMZLpZrK/qLA79NE4kC4DCt85h/5ipvWJcsefKe9MMw0qU4/ck/IJg+4OmWA+5EfrZZpHXDq92IptfYDWVfkw==
+
 webpack@^4.8.3:
   version "4.8.3"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.8.3.tgz#957c8e80000f9e5cc03d775e78b472d8954f4eeb"