From f393f55678173fcfbc2c2d05f4c5c3bfc123b56f Mon Sep 17 00:00:00 2001 From: OJ Kwon <1210596+kwonoj@users.noreply.github.com> Date: Mon, 18 Sep 2023 10:30:27 -0700 Subject: [PATCH 1/2] fix(next-core): enable image extensions (#55460) ### What? Enables the image extensions supported by turbopack. Also fixes test fixture to assert error overlay header. Closes WEB-1587 --- .github/workflows/build_and_deploy.yml | 8 ++--- packages/next-swc/crates/napi/Cargo.toml | 7 +++++ packages/next-swc/crates/next-core/Cargo.toml | 1 + .../src/next_shared/transforms/mod.rs | 9 ++++-- packages/next-swc/package.json | 4 +-- test/lib/next-test-utils.ts | 31 ++++++------------- 6 files changed, 30 insertions(+), 30 deletions(-) diff --git a/.github/workflows/build_and_deploy.yml b/.github/workflows/build_and_deploy.yml index 7e19ef97fb0dc..9a8ca5dd185a5 100644 --- a/.github/workflows/build_and_deploy.yml +++ b/.github/workflows/build_and_deploy.yml @@ -156,7 +156,7 @@ jobs: build: >- set -e && apt update && - apt install -y pkg-config xz-utils && + apt install -y pkg-config xz-utils dav1d libdav1d-dev && rustup toolchain install "${RUST_TOOLCHAIN}" && rustup default "${RUST_TOOLCHAIN}" && rustup target add x86_64-unknown-linux-gnu && @@ -177,7 +177,7 @@ jobs: build: >- set -e && apk update && - apk add --no-cache libc6-compat pkgconfig && + apk add --no-cache libc6-compat pkgconfig dav1d libdav1d dav1d-dev && rustup toolchain install "${RUST_TOOLCHAIN}" && rustup default "${RUST_TOOLCHAIN}" && rustup target add x86_64-unknown-linux-musl && @@ -196,7 +196,7 @@ jobs: build: >- set -e && apt update && - apt install -y pkg-config xz-utils && + apt install -y pkg-config xz-utils dav1d libdav1d-dev && export JEMALLOC_SYS_WITH_LG_PAGE=16 && rustup toolchain install "${RUST_TOOLCHAIN}" && rustup default "${RUST_TOOLCHAIN}" && @@ -218,7 +218,7 @@ jobs: build: >- set -e && apk update && - apk add --no-cache libc6-compat pkgconfig && + apk add --no-cache libc6-compat pkgconfig dav1d libdav1d dav1d-dev && export JEMALLOC_SYS_WITH_LG_PAGE=16 && npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" && rustup toolchain install "${RUST_TOOLCHAIN}" && diff --git a/packages/next-swc/crates/napi/Cargo.toml b/packages/next-swc/crates/napi/Cargo.toml index 91501c781c8b3..8bf6bac4f4f00 100644 --- a/packages/next-swc/crates/napi/Cargo.toml +++ b/packages/next-swc/crates/napi/Cargo.toml @@ -21,6 +21,13 @@ native-tls = ["next-dev/native-tls"] rustls-tls = ["next-dev/rustls-tls"] serializable = ["next-dev/serializable"] image-webp = ["next-core/image-webp"] +image-avif = ["next-core/image-avif"] +# Enable all the available image codec support. +# Currently this is identical to `image-webp`, as we are not able to build +# other codecs easily yet. +image-extended = [ + "image-webp", +] # Enable dhat profiling allocator for heap profiling. __internal_dhat-heap = ["dhat"] diff --git a/packages/next-swc/crates/next-core/Cargo.toml b/packages/next-swc/crates/next-core/Cargo.toml index 1347b942a12fc..70783de4edcf2 100644 --- a/packages/next-swc/crates/next-core/Cargo.toml +++ b/packages/next-swc/crates/next-core/Cargo.toml @@ -73,6 +73,7 @@ native-tls = ["turbopack-binding/__turbo_tasks_fetch_native-tls"] rustls-tls = ["turbopack-binding/__turbo_tasks_fetch_rustls-tls"] plugin = ["turbopack-binding/__swc_core_binding_napi_plugin"] image-webp = ["turbopack-binding/__turbopack_image_webp"] +image-avif = ["turbopack-binding/__turbopack_image_avif"] # enable "HMR" for embedded assets dynamic_embed_contents = [ diff --git a/packages/next-swc/crates/next-core/src/next_shared/transforms/mod.rs b/packages/next-swc/crates/next-core/src/next_shared/transforms/mod.rs index 2dd5d06db9533..68cc185939b9d 100644 --- a/packages/next-swc/crates/next-core/src/next_shared/transforms/mod.rs +++ b/packages/next-swc/crates/next-core/src/next_shared/transforms/mod.rs @@ -28,11 +28,16 @@ pub fn get_next_image_rule() -> ModuleRule { ModuleRuleCondition::ResourcePathEndsWith(".jpg".to_string()), ModuleRuleCondition::ResourcePathEndsWith(".jpeg".to_string()), ModuleRuleCondition::ResourcePathEndsWith(".png".to_string()), - ModuleRuleCondition::ResourcePathEndsWith(".webp".to_string()), - ModuleRuleCondition::ResourcePathEndsWith(".avif".to_string()), ModuleRuleCondition::ResourcePathEndsWith(".apng".to_string()), ModuleRuleCondition::ResourcePathEndsWith(".gif".to_string()), ModuleRuleCondition::ResourcePathEndsWith(".svg".to_string()), + ModuleRuleCondition::ResourcePathEndsWith(".bmp".to_string()), + ModuleRuleCondition::ResourcePathEndsWith(".ico".to_string()), + // These images may not be encoded by turbopack depends on the feature availability + // As turbopack-image returns raw bytes if compile time codec support is not enabled: + // ref:https://github.com/vercel/turbo/pull/5967 + ModuleRuleCondition::ResourcePathEndsWith(".webp".to_string()), + ModuleRuleCondition::ResourcePathEndsWith(".avif".to_string()), ]), vec![ModuleRuleEffect::ModuleType(ModuleType::Custom( Vc::upcast(StructuredImageModuleType::new(Value::new( diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json index 1a65c9a00fe32..406314be8a9ae 100644 --- a/packages/next-swc/package.json +++ b/packages/next-swc/package.json @@ -4,8 +4,8 @@ "private": true, "scripts": { "clean": "node ../../scripts/rm.mjs native", - "build-native": "napi build --platform -p next-swc-napi --cargo-cwd ../../ --cargo-name next_swc_napi --features plugin,rustls-tls,image-webp --js false native", - "build-native-release": "napi build --platform -p next-swc-napi --cargo-cwd ../../ --cargo-name next_swc_napi --release --features plugin,rustls-tls,image-webp,tracing/release_max_level_info --js false native", + "build-native": "napi build --platform -p next-swc-napi --cargo-cwd ../../ --cargo-name next_swc_napi --features plugin,rustls-tls,image-extended --js false native", + "build-native-release": "napi build --platform -p next-swc-napi --cargo-cwd ../../ --cargo-name next_swc_napi --release --features plugin,rustls-tls,image-extended,tracing/release_max_level_info --js false native", "build-native-no-plugin": "napi build --platform -p next-swc-napi --cargo-cwd ../../ --cargo-name next_swc_napi --features image-webp --js false native", "build-native-no-plugin-woa": "napi build --platform -p next-swc-napi --cargo-cwd ../../ --cargo-name next_swc_napi --cargo-flags=--no-default-features --features native-tls,image-webp --js false native", "build-native-no-plugin-woa-release": "napi build --platform -p next-swc-napi --cargo-cwd ../../ --cargo-name next_swc_napi --release --cargo-flags=--no-default-features --features native-tls,image-webp,tracing/release_max_level_info --js false native", diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts index b55e97a125ea2..8e11e6e417e60 100644 --- a/test/lib/next-test-utils.ts +++ b/test/lib/next-test-utils.ts @@ -781,28 +781,15 @@ export async function hasRedbox(browser: BrowserInterface, expected = true) { export async function getRedboxHeader(browser: BrowserInterface) { return retry( () => { - if (shouldRunTurboDevTest()) { - return evaluate(browser, () => { - const portal = [].slice - .call(document.querySelectorAll('nextjs-portal')) - .find((p) => - p.shadowRoot.querySelector('[data-nextjs-turbo-dialog-body]') - ) - const root = portal?.shadowRoot - return root?.querySelector('[data-nextjs-turbo-dialog-body]') - ?.innerText - }) - } else { - return evaluate(browser, () => { - const portal = [].slice - .call(document.querySelectorAll('nextjs-portal')) - .find((p) => - p.shadowRoot.querySelector('[data-nextjs-dialog-header]') - ) - const root = portal?.shadowRoot - return root?.querySelector('[data-nextjs-dialog-header]')?.innerText - }) - } + return evaluate(browser, () => { + const portal = [].slice + .call(document.querySelectorAll('nextjs-portal')) + .find((p) => + p.shadowRoot.querySelector('[data-nextjs-dialog-header]') + ) + const root = portal?.shadowRoot + return root?.querySelector('[data-nextjs-dialog-header]')?.innerText + }) }, 10000, 500, From 1105501287d8120f954061a655554e2b75dc617d Mon Sep 17 00:00:00 2001 From: OJ Kwon <1210596+kwonoj@users.noreply.github.com> Date: Mon, 18 Sep 2023 10:46:07 -0700 Subject: [PATCH 2/2] test(integration): fix --turbo tests fixture setup (#55293) ### What? Update few test fixture setup doesn't invoke --turbo based on the conditions. Closes WEB-1543 --- test/development/basic/barrel-optimization.test.ts | 5 ++++- .../https-server.generated-key.test.ts | 6 ++++-- .../https-server.provided-key.test.ts | 7 ++++--- .../development/typescript-auto-install/index.test.ts | 10 ++++++---- test/e2e/app-dir/app-external/app-external.test.ts | 5 ++++- .../index.test.ts | 6 ++++-- ...s-edge-light-import-specifier-for-packages.test.ts | 5 ++++- test/e2e/middleware-general/test/index.test.ts | 11 +++++++++-- test/e2e/transpile-packages/index.test.ts | 5 ++++- test/production/pnpm-support/index.test.ts | 3 ++- 10 files changed, 45 insertions(+), 18 deletions(-) diff --git a/test/development/basic/barrel-optimization.test.ts b/test/development/basic/barrel-optimization.test.ts index 85f8086c22562..7673773f13705 100644 --- a/test/development/basic/barrel-optimization.test.ts +++ b/test/development/basic/barrel-optimization.test.ts @@ -1,6 +1,7 @@ import { join } from 'path' import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' +import { shouldRunTurboDevTest } from '../../lib/next-test-utils' describe('optimizePackageImports', () => { let next: NextInstance @@ -27,7 +28,9 @@ describe('optimizePackageImports', () => { scripts: { setup: `cp -r ./node_modules_bak/* ./node_modules`, build: `yarn setup && next build`, - dev: `yarn setup && next dev`, + dev: `yarn setup && next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + }`, start: 'next start', }, }, diff --git a/test/development/experimental-https-server/https-server.generated-key.test.ts b/test/development/experimental-https-server/https-server.generated-key.test.ts index 0dc713da155c3..d4e6d94c23069 100644 --- a/test/development/experimental-https-server/https-server.generated-key.test.ts +++ b/test/development/experimental-https-server/https-server.generated-key.test.ts @@ -1,12 +1,14 @@ import { createNextDescribe } from 'e2e-utils' import https from 'https' -import { renderViaHTTP } from 'next-test-utils' +import { renderViaHTTP, shouldRunTurboDevTest } from 'next-test-utils' createNextDescribe( 'experimental-https-server (generated certificate)', { files: __dirname, - startCommand: 'yarn next dev --experimental-https', + startCommand: `yarn next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + } --experimental-https`, skipStart: !process.env.CI, }, ({ next }) => { diff --git a/test/development/experimental-https-server/https-server.provided-key.test.ts b/test/development/experimental-https-server/https-server.provided-key.test.ts index 5f2d878e0ae36..aeca7dc3ae9ca 100644 --- a/test/development/experimental-https-server/https-server.provided-key.test.ts +++ b/test/development/experimental-https-server/https-server.provided-key.test.ts @@ -1,13 +1,14 @@ import { createNextDescribe } from 'e2e-utils' import https from 'https' -import { renderViaHTTP } from 'next-test-utils' +import { renderViaHTTP, shouldRunTurboDevTest } from 'next-test-utils' createNextDescribe( 'experimental-https-server (provided certificate)', { files: __dirname, - startCommand: - 'yarn next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem', + startCommand: `yarn next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + } --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem`, }, ({ next }) => { const agent = new https.Agent({ diff --git a/test/development/typescript-auto-install/index.test.ts b/test/development/typescript-auto-install/index.test.ts index acfed68a05f33..adf98cb036225 100644 --- a/test/development/typescript-auto-install/index.test.ts +++ b/test/development/typescript-auto-install/index.test.ts @@ -1,6 +1,6 @@ import { createNext } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' -import { check, renderViaHTTP } from 'next-test-utils' +import { check, renderViaHTTP, shouldRunTurboDevTest } from 'next-test-utils' import webdriver from 'next-webdriver' import stripAnsi from 'strip-ansi' @@ -11,9 +11,9 @@ describe('typescript-auto-install', () => { next = await createNext({ files: { 'pages/index.js': ` - export default function Page() { + export default function Page() { return

hello world

- } + } `, }, env: { @@ -26,7 +26,9 @@ describe('typescript-auto-install', () => { RUN_ID: '', BUILD_NUMBER: '', }, - startCommand: 'yarn next dev', + startCommand: `yarn next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + }`, installCommand: 'yarn', dependencies: {}, }) diff --git a/test/e2e/app-dir/app-external/app-external.test.ts b/test/e2e/app-dir/app-external/app-external.test.ts index 5f7de4b9fe15b..38592f5ba1b47 100644 --- a/test/e2e/app-dir/app-external/app-external.test.ts +++ b/test/e2e/app-dir/app-external/app-external.test.ts @@ -1,4 +1,5 @@ import { createNextDescribe } from 'e2e-utils' +import { shouldRunTurboDevTest } from '../../../lib/next-test-utils' async function resolveStreamResponse(response: any, onData?: any) { let result = '' @@ -27,7 +28,9 @@ createNextDescribe( scripts: { setup: `cp -r ./node_modules_bak/* ./node_modules`, build: 'yarn setup && next build', - dev: 'yarn setup && next dev', + dev: `yarn setup && next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + }`, start: 'next start', }, }, diff --git a/test/e2e/edge-compiler-module-exports-preference/index.test.ts b/test/e2e/edge-compiler-module-exports-preference/index.test.ts index b7d2b6abd30bd..da3e22e83bdb8 100644 --- a/test/e2e/edge-compiler-module-exports-preference/index.test.ts +++ b/test/e2e/edge-compiler-module-exports-preference/index.test.ts @@ -1,6 +1,6 @@ import { createNext } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' -import { fetchViaHTTP } from 'next-test-utils' +import { fetchViaHTTP, shouldRunTurboDevTest } from 'next-test-utils' describe('Edge compiler module exports preference', () => { let next: NextInstance @@ -38,7 +38,9 @@ describe('Edge compiler module exports preference', () => { scripts: { setup: `cp -r ./my-lib ./node_modules`, build: 'yarn setup && next build', - dev: 'yarn setup && next dev', + dev: `yarn setup && next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + }`, start: 'next start', }, }, diff --git a/test/e2e/edge-runtime-uses-edge-light-import-specifier-for-packages/edge-runtime-uses-edge-light-import-specifier-for-packages.test.ts b/test/e2e/edge-runtime-uses-edge-light-import-specifier-for-packages/edge-runtime-uses-edge-light-import-specifier-for-packages.test.ts index b611fcc722147..145d235ae4eaf 100644 --- a/test/e2e/edge-runtime-uses-edge-light-import-specifier-for-packages/edge-runtime-uses-edge-light-import-specifier-for-packages.test.ts +++ b/test/e2e/edge-runtime-uses-edge-light-import-specifier-for-packages/edge-runtime-uses-edge-light-import-specifier-for-packages.test.ts @@ -1,4 +1,5 @@ import { createNextDescribe } from 'e2e-utils' +import { shouldRunTurboDevTest } from '../../lib/next-test-utils' createNextDescribe( 'edge-runtime uses edge-light import specifier for packages', @@ -8,7 +9,9 @@ createNextDescribe( scripts: { setup: 'cp -r ./node_modules_bak/* ./node_modules', build: 'yarn setup && next build', - dev: 'yarn setup && next dev', + dev: `yarn setup && next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + }`, start: 'next start', }, }, diff --git a/test/e2e/middleware-general/test/index.test.ts b/test/e2e/middleware-general/test/index.test.ts index 60c70c2d36edd..05ab14c7d3f9d 100644 --- a/test/e2e/middleware-general/test/index.test.ts +++ b/test/e2e/middleware-general/test/index.test.ts @@ -4,7 +4,12 @@ import fs from 'fs-extra' import { join } from 'path' import webdriver from 'next-webdriver' import { NextInstance } from 'test/lib/next-modes/base' -import { check, fetchViaHTTP, waitFor } from 'next-test-utils' +import { + check, + fetchViaHTTP, + shouldRunTurboDevTest, + waitFor, +} from 'next-test-utils' import { createNext, FileRef } from 'e2e-utils' const urlsError = 'Please use only absolute URLs' @@ -46,7 +51,9 @@ describe('Middleware Runtime', () => { scripts: { setup: `cp -r ./shared-package ./node_modules`, build: 'yarn setup && next build', - dev: 'yarn setup && next dev', + dev: `yarn setup && next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + }`, start: 'next start', }, }, diff --git a/test/e2e/transpile-packages/index.test.ts b/test/e2e/transpile-packages/index.test.ts index f15ebadcf377c..841d3ba01bb9f 100644 --- a/test/e2e/transpile-packages/index.test.ts +++ b/test/e2e/transpile-packages/index.test.ts @@ -2,6 +2,7 @@ import path from 'path' import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' import webdriver from 'next-webdriver' +import { shouldRunTurboDevTest } from '../../lib/next-test-utils' describe('transpile packages', () => { let next: NextInstance @@ -23,7 +24,9 @@ describe('transpile packages', () => { scripts: { setup: `cp -r ./node_modules_bak/* ./node_modules`, build: 'yarn setup && next build', - dev: 'yarn setup && next dev', + dev: `yarn setup && next ${ + shouldRunTurboDevTest() ? 'dev --turbo' : 'dev' + }`, start: 'next start', }, }, diff --git a/test/production/pnpm-support/index.test.ts b/test/production/pnpm-support/index.test.ts index bc7b4eee6793f..358bcdee93cd8 100644 --- a/test/production/pnpm-support/index.test.ts +++ b/test/production/pnpm-support/index.test.ts @@ -9,6 +9,7 @@ import { initNextServerScript, killApp, renderViaHTTP, + shouldRunTurboDevTest, } from 'next-test-utils' describe('pnpm support', () => { @@ -72,7 +73,7 @@ describe('pnpm support', () => { }, packageJson: { scripts: { - dev: 'next dev', + dev: `next ${shouldRunTurboDevTest() ? 'dev --turbo' : 'dev'}`, build: 'next build', start: 'next start', },