feat: improve vite DX (#18937)

Author: tgriesser

cli/lib/util.js

@@ -252,13 +252,17 @@ const getApplicationDataFolder = (...paths) => {
   const { env } = process
 
   // allow overriding the app_data folder
-  const folder = env.CYPRESS_KONFIG_ENV || env.CYPRESS_INTERNAL_ENV || 'development'
+  let folder = env.CYPRESS_KONFIG_ENV || env.CYPRESS_INTERNAL_ENV || 'development'
 
   const PRODUCT_NAME = pkg.productName || pkg.name
   const OS_DATA_PATH = ospath.data()
 
   const ELECTRON_APP_DATA_PATH = path.join(OS_DATA_PATH, PRODUCT_NAME)
 
+  if (process.env.CYPRESS_INTERNAL_E2E_TESTING_SELF) {
+    folder = `${folder}-e2e-test`
+  }
+
   const p = path.join(ELECTRON_APP_DATA_PATH, 'cy', folder, ...paths)
 
   return p

packages/data-context/src/actions/DevActions.ts

@@ -32,8 +32,18 @@ export class DevActions {
     }
   }
 
+  // In a setTimeout so that we flush the triggering response to the client before sending
   triggerRelaunch () {
-    return this.ctx.fs.writeFile(DevActions.CY_TRIGGER_UPDATE, JSON.stringify(new Date()))
+    setTimeout(async () => {
+      try {
+        await this.ctx.destroy()
+      } catch (e) {
+        this.ctx.logError(e)
+      } finally {
+        process.exitCode = 0
+        await this.ctx.fs.writeFile(DevActions.CY_TRIGGER_UPDATE, JSON.stringify(new Date()))
+      }
+    }, 10)
   }
 
   dismissRelaunch () {

packages/data-context/src/sources/EnvDataSource.ts

@@ -2,11 +2,8 @@ import type { DataContext } from '../DataContext'
 
 /**
  * Centralizes all of the "env"
+ * TODO: see if/how we might want to use this?
  */
 export class EnvDataSource {
   constructor (private ctx: DataContext) {}
-
-  get CYPRESS_INTERNAL_VITE_APP_PORT () {
-    return process.env.CYPRESS_INTERNAL_VITE_APP_PORT
-  }
 }

packages/data-context/src/sources/HtmlDataSource.ts

@@ -9,27 +9,32 @@ import { getPathToDist } from '@packages/resolve-dist'
 export class HtmlDataSource {
   constructor (private ctx: DataContext) {}
 
-  async fetchAppInitialData () {
+  async fetchLaunchpadInitialData () {
     const graphql = this.ctx.graphqlClient()
 
     await Promise.all([
+      graphql.executeQuery('HeaderBar_HeaderBarQueryDocument', {}),
       graphql.executeQuery('AppQueryDocument', {}),
+      graphql.executeQuery('MainLaunchpadQueryDocument', {}),
+    ])
+
+    return graphql.getSSRData()
+  }
+
+  async fetchAppInitialData () {
+    const graphql = this.ctx.graphqlClient()
+
+    await Promise.all([
       graphql.executeQuery('SettingsDocument', {}),
       graphql.executeQuery('SpecsPageContainerDocument', {}),
       graphql.executeQuery('HeaderBar_HeaderBarQueryDocument', {}),
+      graphql.executeQuery('SideBarNavigationDocument', {}),
     ])
 
     return graphql.getSSRData()
   }
 
   async fetchAppHtml () {
-    if (this.ctx.env.CYPRESS_INTERNAL_VITE_APP_PORT) {
-      const response = await this.ctx.util.fetch(`http://localhost:${process.env.CYPRESS_INTERNAL_VITE_APP_PORT}/`, { method: 'GET' })
-      const html = await response.text()
-
-      return html
-    }
-
     return this.ctx.fs.readFile(getPathToDist('app', 'index.html'), 'utf8')
   }
 

packages/data-context/src/sources/VersionsDataSource.ts

@@ -12,6 +12,8 @@ interface VersionData {
 }
 
 export class VersionsDataSource {
+  static result: undefined | Promise<string>
+
   /**
    * Returns most recent and current version of Cypress
    * {
@@ -27,9 +29,12 @@ export class VersionsDataSource {
    */
   async versions (): Promise<VersionData> {
     const currentCypressVersion = require('@packages/root')
-    const result = await execa(`npm`, [`view`, `cypress`, `time`, `--json`])
 
-    const json = JSON.parse(result.stdout)
+    VersionsDataSource.result ??= execa(`npm`, [`view`, `cypress`, `time`, `--json`]).then((result) => result.stdout)
+
+    const result = await VersionsDataSource.result
+
+    const json = JSON.parse(result)
 
     delete json['modified']
     delete json['created']
@@ -50,7 +55,7 @@ export class VersionsDataSource {
       latest: latestVersion,
       current: {
         version: currentCypressVersion.version,
-        released: currentCypressVersion.version === '0.0.0-development' ? new Date().toISOString() : json[currentCypressVersion.version],
+        released: json[currentCypressVersion.version] ?? new Date().toISOString(),
         id: currentCypressVersion.version,
       },
     }

packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts

@@ -30,6 +30,10 @@ chai.use(sinonChai)
 
 export async function e2ePluginSetup (projectRoot: string, on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
   process.env.CYPRESS_INTERNAL_E2E_TESTING_SELF = 'true'
+  delete process.env.CYPRESS_INTERNAL_GRAPHQL_PORT
+  delete process.env.CYPRESS_INTERNAL_VITE_DEV
+  delete process.env.CYPRESS_INTERNAL_VITE_APP_PORT
+  delete process.env.CYPRESS_INTERNAL_VITE_LAUNCHPAD_PORT
   // require'd so we don't import the types from @packages/server which would
   // pollute strict type checking
   const { runInternalServer } = require('@packages/server/lib/modes/internal-server')

packages/frontend-shared/cypress/fixtures/config.json

@@ -47,8 +47,6 @@
   {
     "value": {
       "INTERNAL_CLOUD_ENV": "staging",
-      "INTERNAL_VITE_APP_PORT": 3333,
-      "INTERNAL_VITE_LAUNCHPAD_PORT": 3001,
       "KONFIG_ENV": "staging"
     },
     "field": "env",

packages/frontend-shared/src/gql-components/topnav/TopNav.vue

@@ -292,6 +292,10 @@ const promptsEl: Ref<HTMLElement | null> = ref(null)
 // so it doesn't reopen on the one of the prompts
 
 const versions = computed(() => {
+  if (!props.gql.versions) {
+    return null
+  }
+
   return {
     current: {
       released: useTimeAgo(new Date(props.gql.versions.current.released)).value,
@@ -305,7 +309,7 @@ const versions = computed(() => {
 })
 
 const runningOldVersion = computed(() => {
-  return props.gql.versions.current.released < props.gql.versions.latest.released
+  return props.gql.versions ? props.gql.versions.current.released < props.gql.versions.latest.released : false
 })
 
 onClickOutside(promptsEl, () => {

packages/frontend-shared/src/graphql/urqlClient.ts

@@ -35,23 +35,37 @@ declare global {
   }
 }
 
-export function makeUrqlClient (target: 'launchpad' | 'app'): Client {
-  let gqlPort: string
-
+function gqlPort () {
   if (GQL_PORT_MATCH) {
-    gqlPort = GQL_PORT_MATCH[1]
-  } else if (window.__CYPRESS_GRAPHQL_PORT__) {
-    gqlPort = window.__CYPRESS_GRAPHQL_PORT__
-  } else {
-    throw new Error(`${window.location.href} cannot be visited without a gqlPort`)
+    return GQL_PORT_MATCH[1]
+  }
+
+  if (window.__CYPRESS_GRAPHQL_PORT__) {
+    return window.__CYPRESS_GRAPHQL_PORT__
   }
 
-  const GRAPHQL_URL = `http://localhost:${gqlPort}/graphql`
+  throw new Error(`${window.location.href} cannot be visited without a gqlPort`)
+}
+
+export async function preloadLaunchpadData () {
+  try {
+    const resp = await fetch(`http://localhost:${gqlPort()}/__cypress/launchpad-preload`)
+
+    window.__CYPRESS_INITIAL_DATA__ = await resp.json()
+  } catch {
+    //
+  }
+}
+
+export function makeUrqlClient (target: 'launchpad' | 'app'): Client {
+  const port = gqlPort()
+
+  const GRAPHQL_URL = `http://localhost:${port}/graphql`
 
   // If we're in the launchpad, we connect to the known GraphQL Socket port,
   // otherwise we connect to the /__socket.io of the current domain, unless we've explicitly
   //
-  const io = getPubSubSource({ target, gqlPort, serverPort: SERVER_PORT_MATCH?.[1] })
+  const io = getPubSubSource({ target, gqlPort: port, serverPort: SERVER_PORT_MATCH?.[1] })
 
   const exchanges: Exchange[] = [
     dedupExchange,
@@ -67,32 +81,29 @@ export function makeUrqlClient (target: 'launchpad' | 'app'): Client {
         ${error.stack ?? ''}
       `
 
-        toast.error(message, {
-          timeout: false,
-        })
+        if (process.env.NODE_ENV !== 'production') {
+          toast.error(message, {
+            timeout: false,
+          })
+        }
+
         // eslint-disable-next-line
         console.error(error)
       },
     }),
     // https://formidable.com/open-source/urql/docs/graphcache/errors/
     makeCacheExchange(),
+    ssrExchange({
+      isClient: true,
+      initialState: window.__CYPRESS_INITIAL_DATA__ ?? {},
+    }),
     namedRouteExchange,
     // TODO(tim): add this when we want to use the socket as the GraphQL
     // transport layer for all operations
     // target === 'launchpad' ? fetchExchange : socketExchange(io),
     fetchExchange,
   ]
 
-  // If we're in the launched app, we want to use the SSR exchange
-  if (target === 'app') {
-    exchanges.push(ssrExchange({
-      isClient: true,
-      initialState: window.__CYPRESS_INITIAL_DATA__ ?? {},
-    }))
-  }
-
-  exchanges.push(fetchExchange)
-
   if (import.meta.env.DEV) {
     exchanges.unshift(devtoolsExchange)
   }

packages/frontend-shared/src/graphql/urqlExchangeNamedRoute.ts

@@ -6,6 +6,10 @@ export const namedRouteExchange: Exchange = ({ client, forward }) => {
     return forward(pipe(
       ops$,
       map((o) => {
+        if (o.context.requestPolicy === 'cache-first' || o.context.requestPolicy === 'cache-only') {
+          return o
+        }
+
         if (!o.context.url.endsWith('/graphql')) {
           throw new Error(`Infinite loop detected? Ping @tgriesser to help debug`)
         }