-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: rework component onboarding in launchpad #25713
Changes from 34 commits
b920973
9af7df5
b0e6a54
8685358
7f46405
bd446d7
169fd2d
9a58381
fe5c399
04eff95
c9dc13b
57a8c33
9582e8d
aa03f22
55eeadf
2c722c3
6c73ff5
7d3535f
2ae85c0
b8ff1a0
e9257c7
681294a
08dba6b
1d959ae
3dbd6c1
54fee26
b441be4
57c2ab9
bf884c7
33feea4
c8087c1
270e4e7
5060900
6d6d718
29c8b45
08b705a
82fe744
da254fd
988142c
45bbd45
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3244,6 +3244,177 @@ 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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Mentioned this in the tech-brief but I'm curious what you think of making the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good point, I was trying to make the APIs as similar as possible but it's probably not worth it - better to opt for some internal complexity and expose a nicer public API There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We don't need Since we assume it's named export from the default entry point, we can assume |
||
|
||
/** | ||
* 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' | ||
} | ||
|
||
type ComponentFrameworkDefinition = Omit<ResolvedComponentFrameworkDefinition, 'dependencies'> & { | ||
dependencies: (bundler: 'webpack' | 'vite') => CypressComponentDependency[] | ||
} | ||
|
||
// Certain properties are not supported for third party frameworks right now, such as ones related to the "Create From" feature. | ||
type ThirdPartyComponentFrameworkDefinition = Omit<ComponentFrameworkDefinition, 'glob' | 'codeGenFramework' | 'supportStatus' | 'specPattern' | 'mountModule' | 'configFramework' | 'type' | 'category'> & { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit - might be better to make this an inclusion (
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Smart, let's do that. |
||
type: `cypress-ct-${string}` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh, cool, I didn't know you could do this kind of string pattern enforcement with TS 🆒 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not a feature supported in older versions of Typescript. Unless we drop versions of typescript that don't support template strings we'll have to go with There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm this is a good point - this feature was added in TS 4.1 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html. Released 2 years ago. The most popular pre 4.1 version is 3.9.7 We could do
Since our minimum version of TS is 3.4: https://docs.cypress.io/guides/tooling/typescript-support#Install-TypeScript |
||
|
||
/** | ||
* Only `library` is supported for third party definitions. | ||
* `template` will be supported in the future. | ||
*/ | ||
category: 'library' | ||
} | ||
|
||
interface AngularDevServerProjectConfig { | ||
root: string | ||
sourceRoot: string | ||
|
Original file line number | Diff line number | Diff line change | ||||||
---|---|---|---|---|---|---|---|---|
@@ -1,6 +1,6 @@ | ||||||||
// type tests for Cypress NPM module | ||||||||
// https://on.cypress.io/module-api | ||||||||
import cypress, { defineConfig } from 'cypress' | ||||||||
import cypress, { defineComponentFramework, defineConfig } from 'cypress' | ||||||||
|
||||||||
cypress.run // $ExpectType (options?: Partial<CypressRunOptions> | undefined) => Promise<CypressRunResult | CypressFailedRunResult> | ||||||||
cypress.open // $ExpectType (options?: Partial<CypressOpenOptions> | undefined) => Promise<void> | ||||||||
|
@@ -55,6 +55,33 @@ const config = defineConfig({ | |||||||
modifyObstructiveCode: true | ||||||||
}) | ||||||||
|
||||||||
const solid = { | ||||||||
type: 'solid-js', | ||||||||
name: 'Solid.js', | ||||||||
package: 'solid-js', | ||||||||
installer: 'solid-js', | ||||||||
description: 'Solid is a declarative JavaScript library for creating user interfaces', | ||||||||
minVersion: '^1.0.0' | ||||||||
} | ||||||||
|
||||||||
const thirdPartyFrameworkDefinition = defineComponentFramework({ | ||||||||
type: 'cypress-ct-third-party', | ||||||||
name: 'Third Party', | ||||||||
category: 'library', | ||||||||
dependencies: (bundler) => [solid], | ||||||||
detectors: [solid], | ||||||||
supportedBundlers: ['vite', 'webpack'] | ||||||||
}) | ||||||||
|
||||||||
const thirdPartyFrameworkDefinitionInvalidStrings = defineComponentFramework({ | ||||||||
type: 'cypress-not-cy-wrong-prefix', // $ExpectError | ||||||||
name: 'Third Party', | ||||||||
category: 'template', // $ExpectError - only library supported for third party definitions | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Looks like the syntax for dtslint is pretty strict, the extra comment following the assertion messes with this check |
||||||||
dependencies: (bundler) => [], | ||||||||
detectors: [{}], // $ExpectError | ||||||||
supportedBundlers: ['metro', 'webpack'] // $ExpectError | ||||||||
}) | ||||||||
|
||||||||
// component options | ||||||||
const componentConfigNextWebpack: Cypress.ConfigOptions = { | ||||||||
component: { | ||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In general I think we should move away from naming things "Wizard". 🧙 are pretty cool, but it's probably a confusing, considering these are used throughout the entire app, not just in the Launchpad wizard. We should just call them There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I agree Wizards are pretty cool |
||
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) | ||
} | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here we say the
type
must start withcypress-ct-
, but theconfigFramework
doesn't have this restriction even though inside ofwebpack-dev-server/src/devServer.ts
we expect it to also have this same restriction. Looks like they should be the same or at least both should share thecypress-ct-
prefixThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hm good point, maybe we just expose
name
in the public API and for third parties, inprocessFrameworkDefinition
, doThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So
configFramework
will be@private
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done