diff --git a/npm/react/cypress/component/advanced/lazy-loaded-suspense/LazyComponent.tsx b/npm/react/cypress/component/advanced/lazy-loaded-suspense/LazyComponent.tsx index c5675f25b0..05410fe818 100644 --- a/npm/react/cypress/component/advanced/lazy-loaded-suspense/LazyComponent.tsx +++ b/npm/react/cypress/component/advanced/lazy-loaded-suspense/LazyComponent.tsx @@ -1,6 +1,9 @@ import * as React from 'react' -const LazyDog = React.lazy(() => import(/* webpackChunkName: "Dog" */ './Dog')) +const LazyDog = React.lazy(() => { + return import(/* webpackChunkName: "Dog" */ './Dog') + .then((comp) => new Promise((resolve) => setTimeout(() => resolve(comp), 10))) +}) interface LazyComponentProps {} diff --git a/npm/rollup-dev-server/src/index.ts b/npm/rollup-dev-server/src/index.ts index c86ef8a1c6..018c10e86b 100644 --- a/npm/rollup-dev-server/src/index.ts +++ b/npm/rollup-dev-server/src/index.ts @@ -9,6 +9,7 @@ interface Options { specs: Cypress.Cypress['spec'][] // Why isn't this working? It works for webpack-dev-server config: Record devServerEvents: EventEmitter + devServerPublicPathRoute: string [key: string]: unknown } diff --git a/npm/rollup-dev-server/src/makeHtmlPlugin.ts b/npm/rollup-dev-server/src/makeHtmlPlugin.ts index 06a43e1660..ce7f55cc42 100644 --- a/npm/rollup-dev-server/src/makeHtmlPlugin.ts +++ b/npm/rollup-dev-server/src/makeHtmlPlugin.ts @@ -15,16 +15,16 @@ const readIndexHtml = () => readFileSync(indexHtmlPath).toString() * Example usage: * formatSpecName('/cypress/component/foo.spec.tsx') //=> 'foo.spec.js' */ -function formatSpecName (filename: string) { +function formatSpecName (publicPath: string, filename: string) { const split = filename.split('/') const name = split[split.length - 1] const pos = name.lastIndexOf('.') const newName = `${name.substr(0, pos < 0 ? name.length : pos)}.js` - return `/${newName}` + return `${publicPath}/${newName}` } -function handleIndex (indexHtml: string, projectRoot: string, supportFilePath: string, cypressSpecPath: string) { +function handleIndex (indexHtml: string, publicPath: string, supportFilePath: string, cypressSpecPath: string) { const specPath = `/${cypressSpecPath}` console.log(supportFilePath) @@ -32,7 +32,7 @@ function handleIndex (indexHtml: string, projectRoot: string, supportFilePath: s return render(indexHtml, { supportFile, - specPath: formatSpecName(specPath), + specPath: formatSpecName(publicPath, specPath), }) } @@ -40,13 +40,14 @@ export const makeHtmlPlugin = ( projectRoot: string, supportFilePath: string, server: Express, + publicPath: string, ) => { const indexHtml = readIndexHtml() - server.use('/index.html', (req, res) => { + server.use(`${publicPath}/index.html`, (req, res) => { const html = handleIndex( indexHtml, - projectRoot, + publicPath, supportFilePath, req.headers.__cypress_spec_path as string, ) diff --git a/npm/rollup-dev-server/src/startServer.ts b/npm/rollup-dev-server/src/startServer.ts index 740bbf6234..1d69683459 100644 --- a/npm/rollup-dev-server/src/startServer.ts +++ b/npm/rollup-dev-server/src/startServer.ts @@ -41,6 +41,7 @@ interface NollupDevServer { } export async function start (devServerOptions: StartDevServer): Promise { + console.log('OBject', Object.keys(devServerOptions.options)) const rollupConfigObj = typeof devServerOptions.rollupConfig === 'string' ? await loadConfigFile(devServerOptions.rollupConfig).then((configResult) => configResult.options) : devServerOptions.rollupConfig @@ -58,25 +59,28 @@ export async function start (devServerOptions: StartDevServer): Promise readFileSync(indexHtmlPath).toString() -function handleIndex (indexHtml, projectRoot, supportFilePath, req, res) { - const specPath = `/${req.headers.__cypress_spec_path}` +function handleIndex (indexHtml, projectRoot, publicPath, supportFilePath, req, res) { + const specPath = `${publicPath}/${req.headers.__cypress_spec_path}` const supportPath = supportFilePath ? `/${relative(projectRoot, supportFilePath)}` : null res.end(render(indexHtml, { supportPath, specPath })) @@ -18,6 +18,7 @@ function handleIndex (indexHtml, projectRoot, supportFilePath, req, res) { export const makeCypressPlugin = ( projectRoot: string, supportFilePath: string, + publicPath: string, devServerEvents: EventEmitter, ): Plugin => { return { @@ -26,7 +27,7 @@ export const makeCypressPlugin = ( configureServer: (server: ViteDevServer) => { const indexHtml = readIndexHtml() - server.middlewares.use('/index.html', (req, res) => handleIndex(indexHtml, projectRoot, supportFilePath, req, res)) + server.middlewares.use(`${publicPath}/index.html`, (req, res) => handleIndex(indexHtml, projectRoot, publicPath, supportFilePath, req, res)) }, handleHotUpdate: () => { devServerEvents.emit('dev-server:compile:success') diff --git a/npm/vite-dev-server/src/makeHtmlPlugin.ts b/npm/vite-dev-server/src/makeHtmlPlugin.ts deleted file mode 100644 index 2370a53c09..0000000000 --- a/npm/vite-dev-server/src/makeHtmlPlugin.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { relative, resolve } from 'path' -import { readFileSync } from 'fs' -import { Plugin, ViteDevServer } from 'vite' -import { render } from 'mustache' - -const pluginName = 'cypress-transform-html' -const indexHtmlPath = resolve(__dirname, '../index-template.html') -const readIndexHtml = () => readFileSync(indexHtmlPath).toString() - -function handleIndex (indexHtml, projectRoot, supportFilePath, req, res) { - const specPath = `/${req.headers.__cypress_spec_path}` - const supportPath = supportFilePath ? `/${relative(projectRoot, supportFilePath)}` : null - - res.end(render(indexHtml, { supportPath, specPath })) -} - -export const makeHtmlPlugin = (projectRoot: string, supportFilePath: string): Plugin => { - return { - name: pluginName, - enforce: 'pre', - configureServer: (server: ViteDevServer) => { - const indexHtml = readIndexHtml() - - server.middlewares.use('/index.html', (req, res) => handleIndex(indexHtml, projectRoot, supportFilePath, req, res)) - }, - } -} diff --git a/npm/vite-dev-server/src/startServer.ts b/npm/vite-dev-server/src/startServer.ts index 08737ff834..71a04287da 100644 --- a/npm/vite-dev-server/src/startServer.ts +++ b/npm/vite-dev-server/src/startServer.ts @@ -8,11 +8,11 @@ import { EventEmitter } from 'events' const debug = Debug('cypress:vite-dev-server:start') // TODO: Pull in types for Options so we can infer these -const serverConfig = (projectRoot: string, supportFilePath: string, devServerEvents: EventEmitter): InlineConfig => { +const serverConfig = (projectRoot: string, supportFilePath: string, publicPath: string, devServerEvents: EventEmitter): InlineConfig => { return { root: resolve(__dirname, projectRoot), base: '/__cypress/src/', - plugins: [makeCypressPlugin(projectRoot, supportFilePath, devServerEvents)], + plugins: [makeCypressPlugin(projectRoot, supportFilePath, publicPath, devServerEvents)], server: { port: 0, }, @@ -23,6 +23,7 @@ const resolveServerConfig = ({ viteConfig, options }: StartDevServer) => { const defaultServerConfig = serverConfig( options.config.projectRoot, options.config.supportFile, + options.config.devServerPublicPathRoute, options.devServerEvents, ) diff --git a/npm/webpack-dev-server/src/makeWebpackConfig.ts b/npm/webpack-dev-server/src/makeWebpackConfig.ts index 06efdfa3dd..0468bef20a 100644 --- a/npm/webpack-dev-server/src/makeWebpackConfig.ts +++ b/npm/webpack-dev-server/src/makeWebpackConfig.ts @@ -18,7 +18,7 @@ export interface UserWebpackDevServerOptions { } interface MakeWebpackConfigOptions extends CypressCTOptionsPluginOptions, UserWebpackDevServerOptions { - webpackDevServerPublicPathRoute: string + devServerPublicPathRoute: string isOpenMode: boolean } @@ -42,7 +42,7 @@ function getLazyCompilationWebpackConfig (options: MakeWebpackConfigOptions): we } export async function makeWebpackConfig (userWebpackConfig: webpack.Configuration, options: MakeWebpackConfigOptions): Promise { - const { projectRoot, webpackDevServerPublicPathRoute, files, supportFile, devServerEvents } = options + const { projectRoot, devServerPublicPathRoute, files, supportFile, devServerEvents } = options debug(`User passed in webpack config with values %o`, userWebpackConfig) @@ -52,7 +52,7 @@ export async function makeWebpackConfig (userWebpackConfig: webpack.Configuratio const entry = path.resolve(__dirname, './browser.js') - const publicPath = mergePublicPath(webpackDevServerPublicPathRoute, userWebpackConfig?.output?.publicPath) + const publicPath = mergePublicPath(devServerPublicPathRoute, userWebpackConfig?.output?.publicPath) const dynamicWebpackConfig = { output: { diff --git a/npm/webpack-dev-server/src/startServer.ts b/npm/webpack-dev-server/src/startServer.ts index 5058aa2e0e..b2a563c23e 100644 --- a/npm/webpack-dev-server/src/startServer.ts +++ b/npm/webpack-dev-server/src/startServer.ts @@ -11,13 +11,13 @@ export async function start ({ webpackConfig: userWebpackConfig, options, ...use debug('User did not pass in any webpack configuration') } - // @ts-expect-error ?? webpackDevServerPublicPathRoute is not a valid option of Cypress.Config - const { projectRoot, webpackDevServerPublicPathRoute, isTextTerminal } = options.config + // @ts-expect-error ?? devServerPublicPathRoute is not a valid option of Cypress.Config + const { projectRoot, devServerPublicPathRoute, isTextTerminal } = options.config const webpackConfig = await makeWebpackConfig(userWebpackConfig || {}, { files: options.specs, projectRoot, - webpackDevServerPublicPathRoute, + devServerPublicPathRoute, devServerEvents: options.devServerEvents, supportFile: options.config.supportFile as string, isOpenMode: !isTextTerminal, @@ -57,6 +57,7 @@ export async function start ({ webpackConfig: userWebpackConfig, options, ...use ...userWebpackConfig.devServer, hot: false, inline: false, + publicPath: devServerPublicPathRoute, } return new WebpackDevServer(compiler, webpackDevServerConfig) diff --git a/npm/webpack-dev-server/test/e2e.spec.ts b/npm/webpack-dev-server/test/e2e.spec.ts index da5cdebf46..b0671390b3 100644 --- a/npm/webpack-dev-server/test/e2e.spec.ts +++ b/npm/webpack-dev-server/test/e2e.spec.ts @@ -53,7 +53,7 @@ const config = { projectRoot: root, supportFile: '', isTextTerminal: true, - webpackDevServerPublicPathRoute: root, + devServerPublicPathRoute: root, } as any as Cypress.ResolvedConfigOptions & Cypress.RuntimeConfigOptions describe('#startDevServer', () => { diff --git a/packages/server-ct/src/routes-ct.ts b/packages/server-ct/src/routes-ct.ts index 0e4e4c8073..b259691a3f 100644 --- a/packages/server-ct/src/routes-ct.ts +++ b/packages/server-ct/src/routes-ct.ts @@ -44,7 +44,7 @@ export const createRoutes = ({ // to properly intercept and serve assets from the correct src root // TODO: define a contract for dev-server plugins to configure this behavior req.headers.__cypress_spec_path = req.params[0] - req.url = '/index.html' + req.url = `${config.devServerPublicPathRoute}/index.html` // user the node proxy here instead of the network proxy // to avoid the user accidentally intercepting and modifying @@ -60,11 +60,7 @@ export const createRoutes = ({ // user app code + spec code // default mounted to /__cypress/src/* - app.get(`${config.webpackDevServerPublicPathRoute}*`, (req, res) => { - // strip out the webpackDevServerPublicPath from the URL - // and forward the remaining params - req.url = `/${req.params[0]}` - + app.get(`${config.devServerPublicPathRoute}*`, (req, res) => { // user the node proxy here instead of the network proxy // to avoid the user accidentally intercepting and modifying // their own app.js files + spec.js files diff --git a/packages/server/lib/config_options.ts b/packages/server/lib/config_options.ts index 677c25690b..41faebf785 100644 --- a/packages/server/lib/config_options.ts +++ b/packages/server/lib/config_options.ts @@ -220,7 +220,7 @@ export const options = [ defaultValue: '/__socket.io', isInternal: true, }, { - name: 'webpackDevServerPublicPathRoute', + name: 'devServerPublicPathRoute', defaultValue: '/__cypress/src', isInternal: true, }, {