chore: rework component onboarding in launchpad

cli/types/cypress.d.ts

@@ -3244,6 +3244,162 @@ declare namespace Cypress {
 
   type PickConfigOpt<T> = T extends keyof DefineDevServerConfig ? DefineDevServerConfig[T] : any
 
+  interface DependencyToInstall {
+    dependency: CypressComponentDependency
+    satisfied: boolean
+    loc: string | null
+    detectedVersion: string | null
+  }
+
+  interface CypressComponentDependency {
+    /**
+     * Unique idenitifer.
+     * @example 'reactscripts'
+     */
+    type: string
+
+    /**
+     * Name to display in the user interface.
+     * @example "React Scripts"
+     */
+    name: string
+
+    /**
+     * Package name on npm.
+     * @example react-scripts
+     */
+    package: string
+
+    /**
+     * Code to run when installing. Version is optional.
+     *
+     * Should be <package_name>@<version>.
+     *
+     * @example `react`
+     * @example `react@18`
+     * @example `react-scripts`
+     */
+    installer: string
+
+    /**
+     * Description shown in UI. It is recommended to use the same one the package uses on npm.
+     * @example  'Create React apps with no build configuration'
+     */
+    description: string
+
+    /**
+     * Minimum version supported. Should conform to Semantic Versioning as used in `package.json`.
+     * @see https://docs.npmjs.com/cli/v9/configuring-npm/package-json#dependencies
+     * @example '^=4.0.0 || ^=5.0.0'
+     * @example '^2.0.0'
+     */
+    minVersion: string
+  }
+
+  interface ResolvedComponentFrameworkDefinition {
+    /**
+     * A semantic, unique identifier. Must begin with `cypress-ct-` for third party implementations.
+     * @example: 'reactscripts', 'nextjs', 'cypress-ct-solid-js'
+     */
+    type: string
+
+    /**
+     * Used as the flag for `getPreset` for meta framworks, such as finding the webpack config for CRA, Angular, etc.
+     *
+     * configFramwork: () => {
+     *   return getSolidJsMetaFrameworkBundlerConfig()
+     * }
+     * It is also the name of the string added to `cypress.config`
+     *
+     * @example
+     *
+     * export default {
+     *   component: {
+     *     devServer: {
+     *       framework: 'create-react-app' // can be 'next', 'create-react-app', etc etc.
+     *     }
+     *   }
+     * }
+     */
+    configFramework: string
+
+    /**
+     * Library (React, Vue) or template (aka "meta framework") (CRA, Next.js, Angular)
+     */
+    category: 'library' | 'template'
+
+    /**
+     * Name displayed in Launchpad when doing initial setup.
+     * @example 'Solid.js', 'Create React App'
+     */
+    name: string
+
+    /**
+     * Supported bundlers.
+     */
+    supportedBundlers: Array<'webpack' | 'vite'>
+
+    /**
+     * Used to attempt to automatically select the correct framework/bundler from the dropdown.
+     * @example
+     *
+     * const SOLID_DETECTOR: Dependency = {
+     *   type: 'solid',
+     *   name: 'Solid.js',
+     *   package: 'solid-js',
+     *   installer: 'solid-js',
+     *   description: 'Solid is a declarative JavaScript library for creating user interfaces',
+     *   minVersion: '^1.0.0',
+     * }
+     */
+    detectors: CypressComponentDependency[]
+
+    /**
+     * Array of required dependencies. This could be the bundler and JavaScript library.
+     * It's the same type as `detectors`.
+     */
+    dependencies: (bundler: 'webpack' | 'vite', projectPath: string) => Promise<DependencyToInstall[]>
+
+    /**
+     * @internal
+     * This is used interally by Cypress for the "Create From Component" feature.
+     */
+    codeGenFramework?: 'react' | 'vue' | 'svelte' | 'angular'
+
+    /**
+     * @internal
+     * This is used interally by Cypress for the "Create From Component" feature.
+     * @example '*.{js,jsx,tsx}'
+     */
+    glob?: string
+
+    /**
+     * This is the path to get mount, eg `import { mount } from <mount_module>,
+     * @example: `cypress-ct-solidjs/src/mount`
+     */
+    mountModule: (projectPath: string) => Promise<string>
+
+    /**
+     * Support status. Internally alpha | beta | full.
+     * Community integrations are "community".
+     * @internal
+     */
+    supportStatus: 'alpha' | 'beta' | 'full' | 'community'
+
+    /**
+     * Function returning string for used for the component-index.html file.
+     * Cypress provides a default if one isn't specified for third party integrations.
+     */
+    componentIndexHtml?: () => string
+
+    /**
+     * Used for the Create From Comopnent feature.
+     * This is currently not supported for third party frameworks.
+     * @internal
+     */
+    specPattern?: '**/*.cy.ts'
+  }
+
   interface AngularDevServerProjectConfig {
     root: string
     sourceRoot: string

npm/webpack-dev-server/src/devServer.ts

@@ -115,6 +115,13 @@ export type PresetHandlerResult = { frameworkConfig: Configuration, sourceWebpac
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
 async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Optional<PresetHandlerResult, 'frameworkConfig'>> {
+  const defaultWebpackModules = () => ({ sourceWebpackModulesResult: sourceDefaultWebpackDependencies(devServerConfig) })
+
+  // Third party library (eg solid-js, lit, etc)
+  if (devServerConfig.framework?.startsWith('cypress-ct-')) {
+    return defaultWebpackModules()
+  }
+
   switch (devServerConfig.framework) {
     case 'create-react-app':
       return createReactAppHandler(devServerConfig)
@@ -134,7 +141,7 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
     case 'vue':
     case 'svelte':
     case undefined:
-      return { sourceWebpackModulesResult: sourceDefaultWebpackDependencies(devServerConfig) }
+      return defaultWebpackModules()
 
     default:
       throw new Error(`Unexpected framework ${(devServerConfig as any).framework}, please visit https://on.cypress.io/component-framework-configuration to see a list of supported frameworks`)

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

@@ -5,7 +5,6 @@ import type { DataContext } from '..'
 import { SpecOptions, codeGenerator } from '../codegen'
 import templates from '../codegen/templates'
 import type { CodeGenType } from '../gen/graphcache-config.gen'
-import { WizardFrontendFramework, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
 import { parse as parseReactComponent, resolver as reactDocgenResolvers } from 'react-docgen'
 import { visit } from 'ast-types'
 
@@ -152,7 +151,7 @@ export class CodegenActions {
     })
   }
 
-  getWizardFrameworkFromConfig (): WizardFrontendFramework | undefined {
+  getWizardFrameworkFromConfig (): Cypress.ResolvedComponentFrameworkDefinition | undefined {
     const config = this.ctx.lifecycleManager.loadedConfigFile
 
     // If devServer is a function, they are using a custom dev server.
@@ -161,7 +160,7 @@ export class CodegenActions {
     }
 
     // @ts-ignore - because of the conditional above, we know that devServer isn't a function
-    return WIZARD_FRAMEWORKS.find((framework) => framework.configFramework === config?.component?.devServer.framework)
+    return this.ctx.coreData.wizard.frameworks.find((framework) => framework.configFramework === config?.component?.devServer.framework)
   }
 }
 

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

@@ -1,5 +1,5 @@
 import type { NexusGenObjects } from '@packages/graphql/src/gen/nxs.gen'
-import { detectFramework, WIZARD_FRAMEWORKS, commandsFileBody, supportFileComponent, supportFileE2E, WizardBundler, WizardFrontendFramework } from '@packages/scaffold-config'
+import { detectFramework, commandsFileBody, supportFileComponent, supportFileE2E, getBundler } from '@packages/scaffold-config'
 import assert from 'assert'
 import path from 'path'
 import Debug from 'debug'
@@ -9,6 +9,7 @@ const debug = Debug('cypress:data-context:wizard-actions')
 
 import type { DataContext } from '..'
 import { addTestingTypeToCypressConfig, AddTestingTypeToCypressConfigOptions } from '@packages/config'
+import componentIndexHtmlGenerator from '@packages/scaffold-config/src/component-index-template'
 
 export class WizardActions {
   constructor (private ctx: DataContext) {}
@@ -23,14 +24,14 @@ export class WizardActions {
     return this.ctx.wizardData
   }
 
-  setFramework (framework: WizardFrontendFramework | null): void {
-    const next = WIZARD_FRAMEWORKS.find((x) => x.type === framework?.type)
+  setFramework (framework: Cypress.ResolvedComponentFrameworkDefinition | null): void {
+    const next = this.ctx.coreData.wizard.frameworks.find((x) => x.type === framework?.type)
 
     this.ctx.update((coreData) => {
       coreData.wizard.chosenFramework = framework
     })
 
-    if (next?.supportedBundlers?.length === 1) {
+    if (next?.supportedBundlers?.[0] && next.supportedBundlers.length === 1) {
       this.setBundler(next?.supportedBundlers?.[0])
 
       return
@@ -41,7 +42,7 @@ export class WizardActions {
     // if the previous bundler was incompatible with the
     // new framework that was selected, we need to reset it
     const doesNotSupportChosenBundler = (chosenBundler && !new Set(
-      this.ctx.coreData.wizard.chosenFramework?.supportedBundlers.map((x) => x.type) || [],
+      this.ctx.coreData.wizard.chosenFramework?.supportedBundlers ?? [],
     ).has(chosenBundler.type)) ?? false
 
     const prevFramework = this.ctx.coreData.wizard.chosenFramework?.type ?? null
@@ -51,9 +52,21 @@ export class WizardActions {
     }
   }
 
-  setBundler (bundler: WizardBundler | null) {
+  getNullableBundler (bundler: 'vite' | 'webpack' | null) {
+    if (!bundler) {
+      return null
+    }
+
+    try {
+      return getBundler(bundler)
+    } catch (e) {
+      return null
+    }
+  }
+
+  setBundler (bundler: 'vite' | 'webpack' | null) {
     this.ctx.update((coreData) => {
-      coreData.wizard.chosenBundler = bundler
+      coreData.wizard.chosenBundler = this.getNullableBundler(bundler)
     })
 
     return this.ctx.coreData.wizard
@@ -87,7 +100,7 @@ export class WizardActions {
 
     this.resetWizard()
 
-    const detected = await detectFramework(this.ctx.currentProject)
+    const detected = await detectFramework(this.ctx.currentProject, this.ctx.coreData.wizard.frameworks)
 
     debug('detected %o', detected)
 
@@ -100,8 +113,8 @@ export class WizardActions {
           return
         }
 
-        coreData.wizard.detectedBundler = detected.bundler || detected.framework.supportedBundlers[0]
-        coreData.wizard.chosenBundler = detected.bundler || detected.framework.supportedBundlers[0]
+        coreData.wizard.detectedBundler = this.getNullableBundler(detected.bundler || detected.framework.supportedBundlers[0])
+        coreData.wizard.chosenBundler = this.getNullableBundler(detected.bundler || detected.framework.supportedBundlers[0])
       })
     }
   }
@@ -295,14 +308,16 @@ export class WizardActions {
     }
   }
 
-  private async scaffoldComponentIndexHtml (chosenFramework: WizardFrontendFramework): Promise<NexusGenObjects['ScaffoldedFile']> {
+  private async scaffoldComponentIndexHtml (chosenFramework: Cypress.ResolvedComponentFrameworkDefinition): Promise<NexusGenObjects['ScaffoldedFile']> {
     const componentIndexHtmlPath = path.join(this.projectRoot, 'cypress', 'support', 'component-index.html')
 
     await this.ensureDir('support')
 
+    const defaultComponentIndex = componentIndexHtmlGenerator('')
+
     return this.scaffoldFile(
       componentIndexHtmlPath,
-      chosenFramework.componentIndexHtml(),
+      chosenFramework.componentIndexHtml?.() ?? defaultComponentIndex(),
       'The HTML wrapper that each component is served with. Used for global fonts, CSS, JS, HTML, etc.',
     )
   }

packages/data-context/src/codegen/spec-options.ts

@@ -1,6 +1,5 @@
 import type { ParsedPath } from 'path'
 import type { CodeGenType } from '@packages/graphql/src/gen/nxs.gen'
-import type { WizardFrontendFramework } from '@packages/scaffold-config'
 import fs from 'fs-extra'
 import { uniq, upperFirst } from 'lodash'
 import path from 'path'
@@ -14,7 +13,7 @@ interface CodeGenOptions {
   isDefaultSpecPattern: boolean
   specPattern: string[]
   currentProject: string | null
-  framework?: WizardFrontendFramework
+  framework?: Cypress.ResolvedComponentFrameworkDefinition
   specs?: FoundSpec[]
   componentName?: string
   isDefault?: boolean

packages/data-context/src/data/ProjectConfigManager.ts

@@ -18,7 +18,7 @@ import { CypressEnv } from './CypressEnv'
 import { autoBindDebug } from '../util/autoBindDebug'
 import type { EventRegistrar } from './EventRegistrar'
 import type { DataContext } from '../DataContext'
-import { DependencyToInstall, isDependencyInstalled, WIZARD_BUNDLERS, WIZARD_DEPENDENCIES, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
+import { isDependencyInstalled, WIZARD_BUNDLERS } from '@packages/scaffold-config'
 
 const debug = debugLib(`cypress:lifecycle:ProjectConfigManager`)
 
@@ -191,14 +191,19 @@ export class ProjectConfigManager {
 
     // Use a map since sometimes the same dependency can appear in `bundler` and `framework`,
     // for example webpack appears in both `bundler: 'webpack', framework: 'react-scripts'`
-    const unsupportedDeps = new Map<DependencyToInstall['dependency']['type'], DependencyToInstall>()
+    const unsupportedDeps = new Map<Cypress.DependencyToInstall['dependency']['type'], Cypress.DependencyToInstall>()
 
     if (!bundler) {
       return
     }
 
-    const isFrameworkSatisfied = async (bundler: typeof WIZARD_BUNDLERS[number], framework: typeof WIZARD_FRAMEWORKS[number]) => {
-      for (const dep of await (framework.dependencies(bundler.type, this.options.projectRoot))) {
+    const isFrameworkSatisfied = async (bundler: typeof WIZARD_BUNDLERS[number], framework: Cypress.ResolvedComponentFrameworkDefinition) => {
+      const deps = await (framework.dependencies(bundler.type, this.options.projectRoot))
+
+      debug('deps are %o', deps)
+
+      for (const dep of deps) {
+        debug('detecting %s in %s', dep.dependency.name, this.options.projectRoot)
         const res = await isDependencyInstalled(dep.dependency, this.options.projectRoot)
 
         if (!res.satisfied) {
@@ -209,9 +214,9 @@ export class ProjectConfigManager {
       return true
     }
 
-    const frameworks = WIZARD_FRAMEWORKS.filter((x) => x.configFramework === devServerOptions.framework)
+    const frameworks = this.options.ctx.coreData.wizard.frameworks.filter((x) => x.configFramework === devServerOptions.framework)
 
-    const mismatchedFrameworkDeps = new Map<typeof WIZARD_DEPENDENCIES[number]['type'], DependencyToInstall>()
+    const mismatchedFrameworkDeps = new Map<string, Cypress.DependencyToInstall>()
 
     let isSatisfied = false