From ae4079726e299f66ead63ff06acb1b63739dc100 Mon Sep 17 00:00:00 2001 From: atcastle Date: Mon, 19 Oct 2020 17:39:32 -0700 Subject: [PATCH] Remove logic for multiple hosts --- packages/next/build/webpack-config.ts | 22 ++----- packages/next/client/image.tsx | 62 +++---------------- .../image-component/basic/next.config.js | 12 +--- .../image-component/basic/test/index.test.js | 12 ---- 4 files changed, 17 insertions(+), 91 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 0df798ee80343..25e892125d000 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -229,25 +229,13 @@ export default async function getBaseWebpackConfig( } } - if (config.images?.hosts) { - if (!config.images.hosts.default) { - // If the image component is being used, a default host must be provided - throw new Error( - 'If the image configuration property is present in next.config.js, it must have a host named "default"' - ) + // Normalize defined image host to end in slash + if (config.images?.path) { + if (config.images.path[config.images.path.length - 1] !== '/') { + config.images.path += '/' } - Object.values(config.images.hosts).forEach((host: any) => { - if (!host.path) { - throw new Error( - 'All hosts defined in the image configuration property of next.config.js must define a path' - ) - } - // Normalize hosts so all paths have trailing slash - if (host.path[host.path.length - 1] !== '/') { - host.path += '/' - } - }) } + const reactVersion = await getPackageVersion({ cwd: dir, name: 'react' }) const hasReactRefresh: boolean = dev && !isServer const hasJsxRuntime: boolean = diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 28e5f13579a70..95c84652faa28 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -9,12 +9,6 @@ const loaders: { [key: string]: (props: LoaderProps) => string } = { type ImageData = { sizes?: number[] - hosts: { - [key: string]: { - path: string - loader: string - } - } } type ImageProps = Omit< @@ -22,7 +16,6 @@ type ImageProps = Omit< 'src' | 'srcSet' | 'ref' > & { src: string - host?: string priority?: boolean lazy?: boolean unoptimized?: boolean @@ -66,49 +59,33 @@ function getObserver(): IntersectionObserver | undefined { )) } -function computeSrc(src: string, host: string, unoptimized: boolean): string { +function computeSrc(src: string, unoptimized: boolean): string { if (unoptimized) { return src } - if (!host) { - // No host provided, use default - return callLoader(src, 'default') - } else { - let selectedHost = imageData.hosts[host] - if (!selectedHost) { - if (process.env.NODE_ENV !== 'production') { - console.error( - `Image tag is used specifying host ${host}, but that host is not defined in next.config` - ) - } - return src - } - return callLoader(src, host) - } + return callLoader(src) } -function callLoader(src: string, host: string, width?: number): string { - let loader = loaders[imageData.hosts[host].loader || 'default'] - return loader({ root: imageData.hosts[host].path, src, width }) +function callLoader(src: string, width?: number): string { + let loader = loaders[imageData.loader || 'default'] + return loader({ root: imageData.path, src, width }) } type SrcSetData = { src: string - host: string widths: number[] } -function generateSrcSet({ src, host, widths }: SrcSetData): string { +function generateSrcSet({ src, widths }: SrcSetData): string { // At each breakpoint, generate an image url using the loader, such as: // ' www.example.com/foo.jpg?w=480 480w, ' return widths - .map((width: number) => `${callLoader(src, host, width)} ${width}w`) + .map((width: number) => `${callLoader(src, width)} ${width}w`) .join(', ') } type PreloadData = { src: string - host: string widths: number[] sizes?: string unoptimized?: boolean @@ -116,7 +93,6 @@ type PreloadData = { function generatePreload({ src, - host, widths, unoptimized = false, sizes, @@ -130,9 +106,9 @@ function generatePreload({ @@ -141,7 +117,6 @@ function generatePreload({ export default function Image({ src, - host, sizes, unoptimized = false, priority = false, @@ -152,19 +127,6 @@ export default function Image({ const thisEl = useRef(null) // Sanity Checks: - if (process.env.NODE_ENV !== 'production') { - if (unoptimized && host) { - console.error(`Image tag used specifying both a host and the unoptimized attribute--these are mutually exclusive. - With the unoptimized attribute, no host will be used, so specify an absolute URL.`) - } - } - if (host && !imageData.hosts[host]) { - // If unregistered host is selected, log an error and use the default instead - if (process.env.NODE_ENV !== 'production') { - console.error(`Image host identifier ${host} could not be resolved.`) - } - host = 'default' - } // If priority and lazy are present, log an error and use priority only. if (priority && lazy) { if (process.env.NODE_ENV !== 'production') { @@ -175,8 +137,6 @@ export default function Image({ lazy = false } - host = host || 'default' - // Normalize provided src if (src[0] === '/') { src = src.slice(1) @@ -199,11 +159,10 @@ export default function Image({ }, [thisEl, lazy]) // Generate attribute values - const imgSrc = computeSrc(src, host, unoptimized) + const imgSrc = computeSrc(src, unoptimized) const imgSrcSet = !unoptimized ? generateSrcSet({ src, - host: host, widths: breakpoints, }) : undefined @@ -243,7 +202,6 @@ export default function Image({ {shouldPreload ? generatePreload({ src, - host, widths: breakpoints, unoptimized, sizes, diff --git a/test/integration/image-component/basic/next.config.js b/test/integration/image-component/basic/next.config.js index 8ada091227bd4..8f260dea043fd 100644 --- a/test/integration/image-component/basic/next.config.js +++ b/test/integration/image-component/basic/next.config.js @@ -1,15 +1,7 @@ module.exports = { images: { sizes: [480, 1024, 1600], - hosts: { - default: { - path: 'https://example.com/myaccount/', - loader: 'imgix', - }, - secondary: { - path: 'https://examplesecondary.com/images/', - loader: 'cloudinary', - }, - }, + path: 'https://example.com/myaccount/', + loader: 'imgix', }, } diff --git a/test/integration/image-component/basic/test/index.test.js b/test/integration/image-component/basic/test/index.test.js index ffa87e0c6b58f..a1aadbdc39f2c 100644 --- a/test/integration/image-component/basic/test/index.test.js +++ b/test/integration/image-component/basic/test/index.test.js @@ -40,11 +40,6 @@ function runTests() { await browser.elementById('preceding-slash-image').getAttribute('src') ).toBe('https://example.com/myaccount/fooslash.jpg') }) - it('should support manually selecting a different host', async () => { - expect( - await browser.elementById('secondary-image').getAttribute('src') - ).toBe('https://examplesecondary.com/images/foo2.jpg') - }) it('should add a srcset based on the loader', async () => { expect( await browser.elementById('basic-image').getAttribute('srcset') @@ -180,13 +175,6 @@ describe('Image Component Tests', () => { ) ).toBe(true) }) - it('should add a preload tag for a priority image, with secondary host', async () => { - expect( - await hasPreloadLinkMatchingUrl( - 'https://examplesecondary.com/images/withpriority2.png' - ) - ).toBe(true) - }) it('should add a preload tag for a priority image, with arbitrary host', async () => { expect( await hasPreloadLinkMatchingUrl(