diff --git a/docs/generated/packages/cypress.json b/docs/generated/packages/cypress.json index d24a0bf7e7d60..583b38622d5ae 100644 --- a/docs/generated/packages/cypress.json +++ b/docs/generated/packages/cypress.json @@ -158,6 +158,13 @@ "description": "The name of the project to add cypress component testing to", "$default": { "$source": "projectName" }, "x-prompt": "What project should we add Cypress component testing to?" + }, + "bundler": { + "description": "The Cypress bundler to use.", + "type": "string", + "enum": ["vite", "webpack"], + "x-prompt": "Which Cypress bundler do you want to use for the dev-server?", + "default": "webpack" } }, "required": ["project"], diff --git a/e2e/react/src/react-misc.test.ts b/e2e/react/src/react-misc.test.ts index 5ff8c7a4fe65e..845c7823302ff 100644 --- a/e2e/react/src/react-misc.test.ts +++ b/e2e/react/src/react-misc.test.ts @@ -21,7 +21,6 @@ describe('React Applications: additional packages', () => { checkFilesExist( `dist/apps/${appName}/index.html`, `dist/apps/${appName}/runtime.js`, - `dist/apps/${appName}/polyfills.js`, `dist/apps/${appName}/main.js` ); }, 250_000); diff --git a/e2e/react/src/react.test.ts b/e2e/react/src/react.test.ts index bc1d2a23285cb..d0d92a78a2afe 100644 --- a/e2e/react/src/react.test.ts +++ b/e2e/react/src/react.test.ts @@ -145,7 +145,6 @@ describe('React Applications', () => { const filesToCheck = [ `dist/apps/${appName}/index.html`, `dist/apps/${appName}/runtime.js`, - `dist/apps/${appName}/polyfills.js`, `dist/apps/${appName}/main.js`, ]; diff --git a/e2e/web/src/web.test.ts b/e2e/web/src/web.test.ts index 7a90fe69da365..90784a9f4c9c2 100644 --- a/e2e/web/src/web.test.ts +++ b/e2e/web/src/web.test.ts @@ -34,7 +34,6 @@ describe('Web Components Applications', () => { checkFilesExist( `dist/apps/${appName}/index.html`, `dist/apps/${appName}/runtime.js`, - `dist/apps/${appName}/polyfills.js`, `dist/apps/${appName}/main.js`, `dist/apps/${appName}/styles.css` ); diff --git a/packages/cypress/package.json b/packages/cypress/package.json index cf54c657b89e6..c8b0a7c6d4c67 100644 --- a/packages/cypress/package.json +++ b/packages/cypress/package.json @@ -34,23 +34,13 @@ "migrations": "./migrations.json" }, "dependencies": { - "@babel/core": "^7.0.1", - "@babel/preset-env": "^7.0.0", - "@cypress/webpack-preprocessor": "^5.12.0", "@nrwl/devkit": "file:../devkit", "@nrwl/linter": "file:../linter", "@nrwl/workspace": "file:../workspace", "@phenomnomnominal/tsquery": "4.1.1", - "babel-loader": "^8.0.2", "chalk": "4.1.0", "dotenv": "~10.0.0", - "fork-ts-checker-webpack-plugin": "7.2.13", - "semver": "7.3.4", - "ts-loader": "^9.3.1", - "tsconfig-paths-webpack-plugin": "3.5.2", - "tslib": "^2.3.0", - "webpack": "^4 || ^5", - "webpack-node-externals": "^3.0.0" + "semver": "7.3.4" }, "peerDependencies": { "cypress": ">= 3 < 12" diff --git a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts b/packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts index 2293e0b7c868e..058295454bb96 100644 --- a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts +++ b/packages/cypress/src/generators/cypress-component-project/cypress-component-project.ts @@ -6,19 +6,19 @@ import { offsetFromRoot, ProjectConfiguration, readProjectConfiguration, + readWorkspaceConfiguration, Tree, updateJson, updateProjectConfiguration, - NxJsonConfiguration, - readWorkspaceConfiguration, updateWorkspaceConfiguration, } from '@nrwl/devkit'; import { installedCypressVersion } from '../../utils/cypress-version'; import { cypressVersion, + cypressViteDevServerVersion, cypressWebpackVersion, - webpackHttpPluginVersion, + htmlWebpackPluginVersion, } from '../../utils/versions'; import { CypressComponentProjectSchema } from './schema'; @@ -35,7 +35,7 @@ export async function cypressComponentProject( const projectConfig = readProjectConfiguration(tree, options.project); - const installDepsTask = updateDeps(tree); + const installDepsTask = updateDeps(tree, options); addProjectFiles(tree, projectConfig, options); addTargetToProject(tree, projectConfig, options); @@ -50,13 +50,18 @@ export async function cypressComponentProject( }; } -function updateDeps(tree: Tree) { +function updateDeps(tree: Tree, options: CypressComponentProjectSchema) { const devDeps = { - '@cypress/webpack-dev-server': cypressWebpackVersion, - 'html-webpack-plugin': webpackHttpPluginVersion, cypress: cypressVersion, }; + if (options.bundler === 'vite') { + devDeps['@cypress/vite-dev-server'] = cypressViteDevServerVersion; + } else { + devDeps['@cypress/webpack-dev-server'] = cypressWebpackVersion; + devDeps['html-webpack-plugin'] = htmlWebpackPluginVersion; + } + return addDependenciesToPackageJson(tree, {}, devDeps); } diff --git a/packages/cypress/src/generators/cypress-component-project/schema.d.ts b/packages/cypress/src/generators/cypress-component-project/schema.d.ts index c990759238bec..1b59ad0441d46 100644 --- a/packages/cypress/src/generators/cypress-component-project/schema.d.ts +++ b/packages/cypress/src/generators/cypress-component-project/schema.d.ts @@ -1,4 +1,5 @@ export interface CypressComponentProjectSchema { project: string; skipFormat: boolean; + bundler?: 'webpack' | 'vite'; } diff --git a/packages/cypress/src/generators/cypress-component-project/schema.json b/packages/cypress/src/generators/cypress-component-project/schema.json index 57145bed44540..48f2b0182ceba 100644 --- a/packages/cypress/src/generators/cypress-component-project/schema.json +++ b/packages/cypress/src/generators/cypress-component-project/schema.json @@ -19,6 +19,13 @@ "$source": "projectName" }, "x-prompt": "What project should we add Cypress component testing to?" + }, + "bundler": { + "description": "The Cypress bundler to use.", + "type": "string", + "enum": ["vite", "webpack"], + "x-prompt": "Which Cypress bundler do you want to use for the dev-server?", + "default": "webpack" } }, "required": ["project"], diff --git a/packages/cypress/src/plugins/preprocessor.spec.ts b/packages/cypress/src/plugins/preprocessor.spec.ts deleted file mode 100644 index e26d38e1fda41..0000000000000 --- a/packages/cypress/src/plugins/preprocessor.spec.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { mocked } from 'jest-mock'; -import { getWebpackConfig, preprocessTypescript } from './preprocessor'; -jest.mock('@cypress/webpack-preprocessor', () => { - return jest.fn( - () => - (...args) => - Promise.resolve() - ); -}); -jest.mock('tsconfig-paths-webpack-plugin'); -import * as wp from '@cypress/webpack-preprocessor'; -import TsConfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; - -const mockWp = mocked(wp); - -describe('getWebpackConfig', () => { - beforeEach(() => { - (TsConfigPathsPlugin).mockImplementation( - function MockPathsPlugin() {} - ); - }); - it('should load typescript', () => { - const config = getWebpackConfig({ - env: { - tsConfig: './tsconfig.json', - }, - }); - expect(config.module.rules).toContainEqual({ - test: /\.([jt])sx?$/, - loader: require.resolve('ts-loader'), - exclude: [/node_modules/], - options: { - configFile: './tsconfig.json', - // https://github.com/TypeStrong/ts-loader/pull/685 - experimentalWatchApi: true, - transpileOnly: true, - }, - }); - }); - - it('should resolve tsconfig paths', () => { - const config = getWebpackConfig({ - env: { - tsConfig: './tsconfig.json', - }, - }); - expect( - config.resolve.plugins.some( - (plugin) => plugin instanceof TsConfigPathsPlugin - ) - ).toEqual(true); - }); - - it('should resolve relevant extensions', () => { - const config = getWebpackConfig({ - env: { - tsConfig: './tsconfig.json', - }, - }); - expect(config.resolve.extensions).toEqual([ - '.ts', - '.tsx', - '.mjs', - '.js', - '.jsx', - ]); - }); - - it('should keep node_modules external', () => { - const config = getWebpackConfig({ - env: { - tsConfig: './tsconfig.json', - }, - }); - const callback = jest.fn(); - config.externals[0](null, '@nestjs/core', callback); - expect(callback).toHaveBeenCalledWith(null, 'commonjs @nestjs/core'); - }); -}); - -describe('preprocessTypescript', () => { - it('should work if no customizer is passed', async () => { - const preprocessor = preprocessTypescript({ - env: { - tsConfig: './tsconfig.json', - }, - }); - await preprocessor('arg0'); - expect(wp).toBeCalled(); - expect( - mockWp.mock.calls[mockWp.mock.calls.length - 1][0].webpackOptions.resolve - .extensions - ).toEqual(['.ts', '.tsx', '.mjs', '.js', '.jsx']); - }); - - it('should support customizing the webpack config', async () => { - const preprocessor = preprocessTypescript( - { - env: { - tsConfig: './tsconfig.json', - }, - }, - (webpackConfig) => { - webpackConfig.resolve.extensions.push('.mdx'); - return webpackConfig; - } - ); - await preprocessor('arg0'); - expect(wp).toBeCalled(); - expect( - mockWp.mock.calls[mockWp.mock.calls.length - 1][0].webpackOptions.resolve - .extensions - ).toEqual(['.ts', '.tsx', '.mjs', '.js', '.jsx', '.mdx']); - }); -}); diff --git a/packages/cypress/src/plugins/preprocessor.ts b/packages/cypress/src/plugins/preprocessor.ts index b343f9102d433..39e3e3a2e8d19 100644 --- a/packages/cypress/src/plugins/preprocessor.ts +++ b/packages/cypress/src/plugins/preprocessor.ts @@ -1,71 +1,18 @@ -import * as wp from '@cypress/webpack-preprocessor'; -import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'; -import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); import { stripIndents } from '@nrwl/devkit'; -import { installedCypressVersion } from '@nrwl/cypress/src/utils/cypress-version'; -import nodeExternals = require('webpack-node-externals'); -/** - * @deprecated This function is no longer necessary and will be removed in Nx 14 +/* + * Keeping this file here, so users who still use the old preprocessor will + * continue to have instructions for how to update their workspace. + * + * We deprecated this back in Nx 12, so it's time to force users to stop using it. + * + * TODO: Remove this file in Nx 16 */ export function preprocessTypescript( config: any, customizeWebpackConfig?: (webpackConfig: any) => any ) { - if (installedCypressVersion() >= 7) { - console.log(stripIndents` + throw new Error(stripIndents` preprocessTypescript is now deprecated since Cypress has added typescript support. If you would still like preprocess files with webpack, use the "@cypress/webpack-preprocessor" package.`); - } - - if (!config.env.tsConfig) { - throw new Error( - 'Please provide an absolute path to a tsconfig.json as cypressConfig.env.tsConfig' - ); - } - - return async (file) => { - const webpackOptions = customizeWebpackConfig - ? customizeWebpackConfig(getWebpackConfig(config)) - : getWebpackConfig(config); - return wp({ webpackOptions })(file); - }; -} - -export function getWebpackConfig(config: any) { - const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx']; - return { - resolve: { - extensions, - plugins: [ - new TsconfigPathsPlugin({ - configFile: config.env.tsConfig, - extensions, - }), - ], - }, - module: { - rules: [ - { - test: /\.([jt])sx?$/, - loader: require.resolve('ts-loader'), - exclude: [/node_modules/], - options: { - configFile: config.env.tsConfig, - // https://github.com/TypeStrong/ts-loader/pull/685 - experimentalWatchApi: true, - transpileOnly: true, - }, - }, - ], - }, - plugins: [ - new ForkTsCheckerWebpackPlugin({ - typescript: { - configFile: config.env.tsConfig, - }, - }), - ], - externals: [nodeExternals()], - }; } diff --git a/packages/cypress/src/utils/versions.ts b/packages/cypress/src/utils/versions.ts index 5cf5807512991..2e583bd757c39 100644 --- a/packages/cypress/src/utils/versions.ts +++ b/packages/cypress/src/utils/versions.ts @@ -2,6 +2,8 @@ export const nxVersion = require('../../package.json').version; export const eslintPluginCypressVersion = '^2.10.3'; export const typesNodeVersion = '16.11.7'; export const cypressVersion = '^11.0.0'; +export const cypressViteDevServerVersion = '^2.2.1'; export const cypressWebpackVersion = '^2.0.0'; export const webpackHttpPluginVersion = '^5.5.0'; export const viteVersion = '^4.0.1'; +export const htmlWebpackPluginVersion = '^5.5.0';