Feat: add cli that uses a list of users to run a preview swarm (#336)

* add cli that uses a list of users to run a preview swarm
* add cli visualization

Author: TylerBarnes

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 public
 dist
 .cache
+build

.github/workflows/ci.yml

@@ -15,6 +15,15 @@ jobs:
       - uses: actions/checkout@v2
       - uses: bahmutov/npm-install@v1
       - run: yarn build && yarn ci-test 'yarn test-plugin'
+  # @todo revisit this and make it work
+  # it works locally but has networking issues on CI
+  # test-preview:
+  #   name: E2E Tests - Preview
+  #   runs-on: ubuntu-16.04
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #     - uses: bahmutov/npm-install@v1
+  #     - run: yarn build && yarn build-cli && yarn ci-test 'yarn test-preview'
   test-schema:
     name: Integration Tests - Schema
     runs-on: ubuntu-16.04

.prettierignore

@@ -1,4 +1,5 @@
 dist
+build
 node_modules
 public
 .cache

cli/.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+node_modules
+npm-debug.log
+coverage
+.nyc_output
+dist
+build
+.vscode
+wp-e2e-utils

cli/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

cli/__tests__/cli-integration.test.ts

@@ -0,0 +1,30 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { system, filesystem } = require(`gluegun`)
+
+const src = filesystem.path(__dirname, `..`)
+
+const cli = async (cmd): Promise<void> =>
+  system.run(`node ` + filesystem.path(src, `bin`, `wpgatsby`) + ` ${cmd}`)
+
+test(`outputs version`, async () => {
+  const output = await cli(`--version`)
+  expect(output).toContain(`0.0.1`)
+})
+
+test(`outputs help`, async () => {
+  const output = await cli(`--help`)
+  expect(output).toContain(`0.0.1`)
+})
+
+test(`generates file`, async () => {
+  const output = await cli(`generate foo`)
+
+  expect(output).toContain(`Generated file at models/foo-model.ts`)
+  const foomodel = filesystem.read(`models/foo-model.ts`)
+
+  expect(foomodel).toContain(`module.exports = {`)
+  expect(foomodel).toContain(`name: 'foo'`)
+
+  // cleanup artifact
+  filesystem.remove(`models`)
+})

cli/bin/wpgatsby

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+
+
+/* tslint:disable */
+// check if we're running in dev mode
+var devMode = require('fs').existsSync(`${__dirname}/../src`)
+// or want to "force" running the compiled version with --compiled-build
+var wantsCompiled = process.argv.indexOf('--compiled-build') >= 0
+
+if (wantsCompiled || !devMode) {
+  // this runs from the compiled javascript source
+  require(`${__dirname}/../build/cli`).run(process.argv)
+} else {
+  // this runs from the typescript source (for dev only)
+  // hook into ts-node so we can run typescript on the fly
+  require('ts-node').register({ project: `${__dirname}/../tsconfig.json` })
+  // run the CLI with the current process arguments
+  require(`${__dirname}/../src/cli`).run(process.argv)
+}
+
+

cli/docs/commands.md

@@ -0,0 +1,3 @@
+# Command Reference for wpgatsby
+
+TODO: Add your command reference here

cli/docs/plugins.md

@@ -0,0 +1,49 @@
+# Plugin guide for wpgatsby
+
+Plugins allow you to add features to wpgatsby, such as commands and
+extensions to the `toolbox` object that provides the majority of the functionality
+used by wpgatsby.
+
+Creating a wpgatsby plugin is easy. Just create a repo with two folders:
+
+```
+commands/
+extensions/
+```
+
+A command is a file that looks something like this:
+
+```js
+// commands/foo.js
+
+module.exports = {
+  run: (toolbox) => {
+    const { print, filesystem } = toolbox
+
+    const desktopDirectories = filesystem.subdirectories(`~/Desktop`)
+    print.info(desktopDirectories)
+  },
+}
+```
+
+An extension lets you add additional features to the `toolbox`.
+
+```js
+// extensions/bar-extension.js
+
+module.exports = (toolbox) => {
+  const { print } = toolbox
+
+  toolbox.bar = () => {
+    print.info("Bar!")
+  }
+}
+```
+
+This is then accessible in your plugin's commands as `toolbox.bar`.
+
+# Loading a plugin
+
+To load a particular plugin (which has to start with `wpgatsby-*`),
+install it to your project using `npm install --save-dev wpgatsby-PLUGINNAME`,
+and wpgatsby will pick it up automatically.

cli/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "wpgatsby",
+  "version": "0.1.0",
+  "description": "WPGatsby test CLI",
+  "private": false,
+  "types": "build/types/types.d.ts",
+  "bin": {
+    "wpgatsby": "bin/wpgatsby"
+  },
+  "scripts": {
+    "clean-build": "rm -rf ./build",
+    "compile": "tsc -p .",
+    "copy-templates": "if [ -e ./src/templates ]; then cp -a ./src/templates ./build/; fi",
+    "build": "yarn clean-build && yarn compile && yarn copy-templates",
+    "prepublishOnly": "yarn build",
+    "test": "jest",
+    "watch": "jest --watch",
+    "snapupdate": "jest --updateSnapshot",
+    "coverage": "jest --coverage"
+  },
+  "files": [
+    "tsconfig.json",
+    "build",
+    "LICENSE",
+    "readme.md",
+    "docs",
+    "bin"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@wordpress/e2e-test-utils": "^4.15.0",
+    "@wordpress/keycodes": "^2.16.0",
+    "draftlog": "^1.0.12",
+    "fs-extra": "^9.0.1",
+    "gluegun": "latest",
+    "lodash": "^4.17.20",
+    "puppeteer": "^5.5.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.18",
+    "@types/node": "^12.7.11",
+    "@types/puppeteer": "^5.4.0",
+    "jest": "^24.1.0",
+    "ts-jest": "^24.1.0",
+    "ts-node": "^8.4.1",
+    "tslint": "^5.12.0",
+    "tslint-config-prettier": "^1.17.0",
+    "tslint-config-standard": "^8.0.1",
+    "typescript": "^4.1.2"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node"
+  }
+}

cli/readme.md

@@ -0,0 +1,24 @@
+# wpgatsby CLI
+
+A CLI for wpgatsby.
+
+## Customizing your CLI
+
+Check out the documentation at https://github.com/infinitered/gluegun/tree/master/docs.
+
+## Publishing to NPM
+
+To package your CLI up for NPM, do this:
+
+```shell
+$ npm login
+$ npm whoami
+$ npm lint
+$ npm test
+(if typescript, run `npm run build` here)
+$ npm publish
+```
+
+# License
+
+MIT - see LICENSE

cli/src/cli.ts

@@ -0,0 +1,27 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { build } = require(`gluegun`)
+
+/**
+ * Create the cli and kick it off
+ */
+async function run(argv): Promise<void> {
+  // create a CLI runtime
+  const cli = build()
+    .brand(`wpgatsby`)
+    .src(__dirname)
+    .plugins(`./node_modules`, { matching: `wpgatsby-*`, hidden: true })
+    .help() // provides default for help, h, --help, -h
+    .version() // provides default for version, v, --version, -v
+    .defaultCommand()
+    .create()
+  // enable the following method if you'd like to skip loading one of these core extensions
+  // this can improve performance if they're not necessary for your project:
+  // .exclude(['meta', 'strings', 'print', 'filesystem', 'semver', 'system', 'prompt', 'http', 'template', 'patching', 'package-manager'])
+  // and run it
+  const toolbox = await cli.run(argv)
+
+  // send it back (for testing, mostly)
+  return toolbox
+}
+
+module.exports = { run }

cli/src/commands/generate.ts

@@ -0,0 +1,23 @@
+import { GluegunToolbox } from "gluegun"
+
+module.exports = {
+  name: `generate`,
+  alias: [`g`],
+  run: async (toolbox: GluegunToolbox): Promise<void> => {
+    const {
+      parameters,
+      template: { generate },
+      print: { info },
+    } = toolbox
+
+    const name = parameters.first
+
+    await generate({
+      template: `model.ts.ejs`,
+      target: `models/${name}-model.ts`,
+      props: { name },
+    })
+
+    info(`Generated file at models/${name}-model.ts`)
+  },
+}

cli/src/commands/preview/swarm.ts

@@ -0,0 +1,77 @@
+import { GluegunCommand, GluegunToolbox } from "gluegun"
+
+import * as fs from "fs-extra"
+
+import { runPreviewSwarm } from "../../utils/wordpress-puppeteer/run-preview-swarm"
+
+const command: GluegunCommand = {
+  name: `swarm`,
+  commandPath: [`preview`, `swarm`],
+  dashed: true,
+  description: `Swarm a Gatsby Preview instance with bot WP users`,
+  run: async (toolbox: GluegunToolbox) => {
+    const { print, prompt, parameters } = toolbox
+
+    const {
+      wpUrl: optionWpUrl,
+      users: optionUsersJsonPath,
+      previewRefreshUrl,
+      previewFrontendUrl,
+      timeout,
+      previewsEach,
+      debugMode,
+    } = parameters.options
+
+    print.info(
+      `We're going to toast your WP and Gatsby and then smatter them with delicious jam`
+    )
+
+    let { wpUrl, wpUsersJsonPath } = await prompt.ask([
+      !optionWpUrl && {
+        type: `input`,
+        name: `wpUrl`,
+        message: `What's the full URL for your WordPress instance?`,
+      },
+      !optionUsersJsonPath && {
+        type: `input`,
+        name: `wpUsersJsonPath`,
+        message: `What's the path to your users.json file?`,
+      },
+    ])
+
+    if (optionWpUrl) {
+      wpUrl = optionWpUrl
+    }
+
+    if (optionUsersJsonPath) {
+      wpUsersJsonPath = optionUsersJsonPath
+    }
+
+    if (!wpUsersJsonPath) {
+      print.error(`You must provide a path to your users.json file.`)
+    }
+
+    if (!wpUrl) {
+      print.error(`You must provide the home url for your WordPress instance.`)
+    }
+
+    if (!wpUsersJsonPath || !wpUrl) {
+      return
+    }
+
+    const users = await fs.readJson(wpUsersJsonPath)
+
+    await runPreviewSwarm({
+      headless: false,
+      maxPreviewsEach: previewsEach || 10,
+      previewTimeout: timeout,
+      users,
+      wpUrl,
+      gatsbyPreviewFrontendUrl: previewFrontendUrl,
+      gatsbyPreviewRefreshEndpoint: previewRefreshUrl,
+      debugMode,
+    })
+  },
+}
+
+module.exports = command

cli/src/extensions/cli-extension.ts

@@ -0,0 +1,17 @@
+import { GluegunToolbox } from "gluegun"
+
+// add your CLI-specific functionality here, which will then be accessible
+// to your commands
+module.exports = (toolbox: GluegunToolbox): void => {
+  toolbox.foo = (): void => {
+    toolbox.print.info(`called foo extension`)
+  }
+
+  // enable this if you want to read configuration in from
+  // the current folder's package.json (in a "wpgatsby" property),
+  // wpgatsby.config.json, etc.
+  // toolbox.config = {
+  //   ...toolbox.config,
+  //   ...toolbox.config.loadConfig("wpgatsby", process.cwd())
+  // }
+}