feat: improved DX for unified-desktop-gui (#18099)

- Moves graphql-codegen config to the root, which will serve all packages needing it
- Adds gulpfile for coordinating scripts related to dev environment in launchpad app
- yarn dev from the root runs yarn gulp dev, which:
  Runs autobarrel for rolling up the @packages/graphql files
  Cleans the dist & cache for .vite
  Starts the a codegen watcher for Nexus
  Starts the graphql-codegen --watch & highlights output
  Starts vite servers for launchpad & app
  Starts electron watch.js

Author: tgriesser

autobarrel.json

@@ -0,0 +1,6 @@
+{
+  "prefix": "/* eslint-disable padding-line-between-statements */",
+  "paths": [
+    "packages/graphql/src/**/*"
+  ]
+}

circle.yml

@@ -389,6 +389,7 @@ commands:
         type: string
     steps:
       - restore_cached_workspace
+      - run: yarn gulp graphqlCodegen
       - run: yarn workspace @packages/launchpad cypress:run --browser <<parameters.browser>>
       - store_test_results:
           path: /tmp/cypress
@@ -1001,6 +1002,8 @@ jobs:
       - run: yarn test-scripts
       # make sure our snapshots are compared correctly
       - run: yarn test-mocha-snapshot
+      # Get the codegen output
+      - run: yarn gulp buildProd
       # make sure packages with TypeScript can be transpiled to JS
       - run: yarn lerna run build-prod --stream
       # run unit tests from each individual package

cli/lib/cli.js

@@ -397,6 +397,7 @@ module.exports = {
       debug('opening Cypress')
       require('./exec/open')
       .start(util.parseOpts(opts))
+      .then(util.exit)
       .catch(util.logErrorExit1)
     })
 

cli/lib/exec/spawn.js

@@ -102,13 +102,13 @@ module.exports = {
         const electronArgs = []
         const node11WindowsFix = isPlatform('win32')
 
+        let startScriptPath
+
         if (options.dev) {
+          executable = 'node'
           // if we're in dev then reset
           // the launch cmd to be 'npm run dev'
-          executable = 'node'
-          electronArgs.unshift(
-            path.resolve(__dirname, '..', '..', '..', 'scripts', 'start.js'),
-          )
+          startScriptPath = path.resolve(__dirname, '..', '..', '..', 'scripts', 'start.js'),
 
           debug('in dev mode the args became %o', args)
         }
@@ -141,9 +141,7 @@ module.exports = {
 
         if (stdioOptions.env.ELECTRON_RUN_AS_NODE) {
           // Since we are running electron as node, we need to add an entry point file.
-          const serverEntryPoint = path.join(state.getBinaryPkgPath(path.dirname(executable)), '..', 'index.js')
-
-          args = [serverEntryPoint, ...args]
+          startScriptPath = path.join(state.getBinaryPkgPath(path.dirname(executable)), '..', 'index.js')
         } else {
           // Start arguments with "--" so Electron knows these are OUR
           // arguments and does not try to sanitize them. Otherwise on Windows
@@ -152,9 +150,23 @@ module.exports = {
           args = [...electronArgs, '--', ...args]
         }
 
-        debug('spawning Cypress with executable: %s', executable)
         debug('spawn args %o %o', args, _.omit(stdioOptions, 'env'))
-        const child = cp.spawn(executable, args, stdioOptions)
+        let child
+
+        if (process.env.CYPRESS_INTERNAL_DEV_WATCH) {
+          debug('spawning Cypress as fork: %s', startScriptPath)
+          child = cp.fork(startScriptPath, args, stdioOptions)
+          process.on('message', (msg) => {
+            child.send(msg)
+          })
+        } else {
+          debug('spawning Cypress with executable: %s', executable)
+          if (startScriptPath) {
+            args.unshift(startScriptPath)
+          }
+
+          child = cp.spawn(executable, args, stdioOptions)
+        }
 
         function resolveOn (event) {
           return function (code, signal) {

graphql-codegen.yml

@@ -0,0 +1,38 @@
+overwrite: true
+schema: './packages/graphql/schema.graphql'
+generates:
+  './packages/app/src/generated/graphql.ts':
+    documents: './packages/app/src/**/*.vue'
+    config:
+      immutableTypes: true
+      useTypeImports: true
+      preResolveTypes: true
+      onlyOperationTypes: true
+      avoidOptionals: true
+      enumsAsTypes: true
+    plugins:
+      - add:
+          content: '/* eslint-disable */'
+      - 'typescript':
+      - 'typescript-operations'
+      - 'typed-document-node'
+  './packages/launchpad/src/generated/graphql.ts':
+    documents: './packages/launchpad/src/**/*.vue'
+    config:
+      immutableTypes: true
+      useTypeImports: true
+      preResolveTypes: true
+      onlyOperationTypes: true
+      avoidOptionals: true
+      enumsAsTypes: true
+    plugins:
+      - add:
+          content: '/* eslint-disable */'
+      - 'typescript':
+      - 'typescript-operations'
+      - 'typed-document-node'
+  './packages/graphql/src/testing/testUnionType.ts':
+    plugins:
+      - add:
+          content: '/* eslint-disable */'
+      - 'packages/graphql/script/codegen-mount.js'

gulpfile.js

@@ -0,0 +1,2 @@
+require('@packages/ts/register')
+require('./scripts/gulp/gulpfile')

package.json

@@ -4,6 +4,7 @@
   "description": "Cypress.io end to end testing tool",
   "private": true,
   "scripts": {
+    "prebinary-build": "yarn gulp buildProd",
     "binary-build": "node ./scripts/binary.js build",
     "binary-deploy": "node ./scripts/binary.js deploy",
     "binary-deploy-linux": "./scripts/build-linux-binary.sh",
@@ -13,6 +14,7 @@
     "binary-upload": "node ./scripts/binary.js upload",
     "binary-zip": "node ./scripts/binary.js zip",
     "build": "lerna run build --stream --no-bail --ignore create-cypress-tests && lerna run build --stream --scope create-cypress-tests",
+    "prebuild-prod": "yarn gulp buildProd",
     "build-prod": "lerna run build-prod --stream --ignore create-cypress-tests && lerna run build-prod --stream --scope create-cypress-tests",
     "bump": "node ./scripts/binary.js bump",
     "check-node-version": "node scripts/check-node-version.js",
@@ -29,14 +31,14 @@
     "precypress:run:debug": "yarn ensure-deps",
     "cypress:run:debug": "node ./scripts/debug.js cypress:run",
     "cypress:verify": "cypress verify --dev",
-    "dev": "node ./scripts/start.js",
-    "dev:watch": "node ./scripts/watch.js",
+    "dev": "yarn gulp dev",
+    "gulp:debug": "node --inspect-brk ./node_modules/.bin/gulp",
     "dev-debug": "node ./scripts/debug.js dev",
     "docker": "./scripts/run-docker-local.sh",
     "effective:circle:config": "circleci config process circle.yml | sed /^#/d",
     "ensure-deps": "./scripts/ensure-dependencies.sh",
     "get-next-version": "node scripts/get-next-version.js",
-    "postinstall": "yarn-deduplicate --strategy=highest && patch-package && ./scripts/run-if-not-ci.sh yarn build",
+    "postinstall": "yarn-deduplicate --strategy=highest && patch-package && yarn gulp postinstall && ./scripts/run-if-not-ci.sh yarn build",
     "jscodeshift": "jscodeshift -t ./node_modules/js-codemod/transforms/arrow-function-arguments.js",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json .",
     "lint-changed": "lint-changed",
@@ -81,6 +83,12 @@
     "@cypress/request": "2.88.6",
     "@cypress/request-promise": "4.2.6",
     "@fellow/eslint-plugin-coffee": "0.4.13",
+    "@graphql-codegen/add": "^2.0.2",
+    "@graphql-codegen/cli": "^1.21.6",
+    "@graphql-codegen/plugin-helpers": "^2.1.1",
+    "@graphql-codegen/typed-document-node": "^1.18.9",
+    "@graphql-codegen/typescript": "^1.22.4",
+    "@graphql-codegen/typescript-operations": "^1.18.3",
     "@percy/cli": "1.0.0-beta.48",
     "@percy/cypress": "^3.1.0",
     "@semantic-release/changelog": "5.0.1",
@@ -89,10 +97,13 @@
     "@types/chai-enzyme": "0.6.7",
     "@types/classnames": "2.2.9",
     "@types/debug": "4.1.5",
+    "@types/detect-port": "^1.3.1",
     "@types/enzyme-adapter-react-16": "1.0.5",
     "@types/execa": "0.9.0",
     "@types/fs-extra": "^8.0.1",
+    "@types/getenv": "^1.0.0",
     "@types/glob": "7.1.1",
+    "@types/gulp": "^4.0.9",
     "@types/lodash": "4.14.168",
     "@types/markdown-it": "0.0.9",
     "@types/mini-css-extract-plugin": "1.4.2",
@@ -104,11 +115,13 @@
     "@types/react-dom": "16.9.8",
     "@types/request-promise": "4.1.45",
     "@types/sinon-chai": "3.2.3",
+    "@types/through2": "^2.0.36",
     "@typescript-eslint/eslint-plugin": "4.18.0",
     "@typescript-eslint/parser": "4.18.0",
     "ansi-styles": "3.2.1",
     "arg": "4.1.2",
     "ascii-table": "0.0.9",
+    "autobarrel": "^1.1.0",
     "aws-sdk": "2.447.0",
     "babel-eslint": "10.1.0",
     "bluebird": "3.5.3",
@@ -123,6 +136,7 @@
     "conventional-recommended-bump": "6.1.0",
     "debug": "4.3.2",
     "del": "3.0.0",
+    "detect-port": "^1.3.0",
     "electron-builder": "22.9.1",
     "electron-notarize": "1.0.0",
     "enzyme-adapter-react-16": "1.12.1",
@@ -137,6 +151,7 @@
     "filesize": "4.1.2",
     "find-package-json": "1.2.0",
     "fs-extra": "8.1.0",
+    "getenv": "^1.0.0",
     "gift": "0.10.2",
     "glob": "7.1.6",
     "globby": "10.0.1",
@@ -170,6 +185,7 @@
     "mocha-multi-reporters": "1.1.7",
     "mock-fs": "4.9.0",
     "odiff-bin": "2.1.0",
+    "p-defer": "^3.0.0",
     "parse-github-repo-url": "1.4.1",
     "patch-package": "6.2.2",
     "plist": "3.0.1",
@@ -193,6 +209,7 @@
     "term-to-html": "1.2.0",
     "terminal-banner": "1.1.0",
     "through": "2.3.8",
+    "through2": "^4.0.2",
     "ts-node": "8.3.0",
     "typescript": "^4.2.3",
     "yarn-deduplicate": "3.1.0"

packages/app/graphql-codegen.yml

@@ -3,29 +3,21 @@
   "version": "0.0.0-development",
   "private": true,
   "scripts": {
-    "prebuild": "yarn codegen",
-    "build": "vite build",
     "types": "vue-tsc --noEmit",
-    "build-prod": "cross-env NODE_ENV=production yarn build",
+    "build-prod": "cross-env NODE_ENV=production vite build",
+    "clean": "rm -rf dist && rm -rf ./node_modules/.vite && echo 'cleaned'",
     "clean-deps": "rm -rf node_modules",
-    "test": "echo ok",
+    "test": "echo 'ok'",
     "cypress:launch": "cross-env TZ=America/New_York node ../../scripts/cypress open --project ${PWD}",
     "cypress:open": "cross-env TZ=America/New_York node ../../scripts/cypress open-ct --project ${PWD}",
     "cypress:run": "cross-env TZ=America/New_York node ../../scripts/cypress run-ct --project ${PWD}",
-    "dev": "NODE_ENV=development LAUNCHPAD=1 node ../../scripts/cypress open",
-    "postinstall": "yarn codegen && echo '@packages/launchpad needs: yarn build'",
-    "start": "vite --port 3333 --base /__vite__/",
-    "watch": "concurrently \"yarn start\" \"yarn codegen --watch\"",
-    "codegen": "graphql-codegen --config ${PWD}/graphql-codegen.yml"
+    "dev": "yarn gulp dev --project ${PWD}",
+    "start": "echo \"run 'yarn dev' from the root\" && exit 1",
+    "watch": "echo \"run 'yarn dev' from the root\" && exit 1"
   },
   "dependencies": {},
   "devDependencies": {
     "@cypress/vue": "0.0.0-development",
-    "@graphql-codegen/add": "^2.0.2",
-    "@graphql-codegen/cli": "^1.21.6",
-    "@graphql-codegen/typed-document-node": "^1.18.9",
-    "@graphql-codegen/typescript": "^1.22.4",
-    "@graphql-codegen/typescript-operations": "^1.18.3",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/json": "1.1.368",
@@ -37,9 +29,6 @@
     "@urql/vue": "0.4.3",
     "@vitejs/plugin-vue": "1.2.4",
     "@vitejs/plugin-vue-jsx": "1.1.6",
-    "@vue/compiler-core": "3.2.6",
-    "@vue/compiler-dom": "3.2.6",
-    "@vue/compiler-sfc": "3.2.6",
     "@vueuse/core": "5.2.0",
     "bluebird": "3.5.3",
     "classnames": "2.3.1",
@@ -67,8 +56,6 @@
   "files": [
     "dist",
     "lib",
-    "script",
-    "graphql-codegen.yml",
     "src"
   ]
 }

packages/app/package.json

@@ -156,7 +156,7 @@ module.exports = {
         return process.exit(code)
       })
 
-      if (process.argv.includes('--devWatch')) {
+      if (process.env.CYPRESS_INTERNAL_DEV_WATCH) {
         spawned.on('exit', () => {
           process.exit(0)
         })

packages/electron/lib/electron.js

@@ -5,9 +5,8 @@
   "main": "index.js",
   "browser": "src/index.ts",
   "scripts": {
-    "build": "node script/build-schema.js",
     "types": "tsc --noEmit",
-    "build-prod": "yarn build && tsc",
+    "build-prod": "yarn gulp nexusCodegen && tsc",
     "clean-deps": "rm -rf node_modules",
     "clean": "rm -f ./src/*.js ./src/**/*.js ./src/**/**/*.js ./test/**/*.js || echo 'cleaned'",
     "postinstall": "echo '@packages/graphql needs: yarn build'",

packages/graphql/package.json

@@ -0,0 +1,4 @@
+/* eslint-disable padding-line-between-statements */
+// created by autobarrel, do not modify directly
+
+export * from './BaseActions'

packages/graphql/script/build-schema.js

@@ -1,7 +1,7 @@
-export * from './browserConstants'
-
-export * from './wizardConstants'
+/* eslint-disable padding-line-between-statements */
+// created by autobarrel, do not modify directly
 
+export * from './browserConstants'
 export * from './projectConstants'
-
 export * from './runConstants'
+export * from './wizardConstants'

packages/app/script/codegen-mount-ts.ts packages/graphql/script/codegen-mount-ts.ts

@@ -0,0 +1,4 @@
+/* eslint-disable padding-line-between-statements */
+// created by autobarrel, do not modify directly
+
+export * from './BaseContext'

packages/app/script/codegen-mount.js packages/graphql/script/codegen-mount.js

@@ -1 +1,5 @@
+/* eslint-disable padding-line-between-statements */
+// created by autobarrel, do not modify directly
+
+export * from './BrowserContract'
 export * from './ProjectContract'