mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Remove next/asset (#6046)
* Remove next/asset Reasoning described in #5970 * Remove next/asset tests * Bring back asset-page
This commit is contained in:
Tim Neutkens
GitHub
parent
341fb9947b
commit
02ab732096
|
|
@ -1,4 +1,3 @@
|
|||
import asset from 'next/asset'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
|
|
@ -9,6 +8,6 @@ export default () => (
|
|||
<a>Go Back</a>
|
||||
</Link>
|
||||
</div>
|
||||
<img width={200} src={asset('/zeit.png')} />
|
||||
<img width={200} src='/static/zeit.png' />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import Link from 'next/link'
|
||||
import asset from 'next/asset'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const Header = dynamic(import('../components/Header'))
|
||||
|
|
@ -18,6 +17,6 @@ export default () => (
|
|||
<a>About us</a>
|
||||
</Link>
|
||||
</div>
|
||||
<img width={200} src={asset('/nextjs.png')} />
|
||||
<img width={200} src='/static/nextjs.png' />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('./dist/lib/asset')
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
let assetPrefix = typeof window !== 'undefined' ? (window.__NEXT_DATA__.assetPrefix) : undefined
|
||||
|
||||
export default function asset (path) {
|
||||
// If the URL starts with http, we assume it's an
|
||||
if (/^https?:\/\//.test(path)) {
|
||||
return path
|
||||
}
|
||||
|
||||
const pathWithoutSlash = path.replace(/^\//, '')
|
||||
return `${assetPrefix || ''}/static/${pathWithoutSlash}`
|
||||
}
|
||||
|
||||
export function setAssetPrefix (url) {
|
||||
assetPrefix = url
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
"files": [
|
||||
"dist",
|
||||
"index.js",
|
||||
"asset.js",
|
||||
"config.js",
|
||||
"constants.js",
|
||||
"dynamic.js",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import Router, {route, Route} from './router'
|
|||
import { isInternalUrl, isBlockedPage } from './utils'
|
||||
import loadConfig from 'next-server/next-config'
|
||||
import {PHASE_PRODUCTION_SERVER, BUILD_ID_FILE, CLIENT_STATIC_FILES_PATH, CLIENT_STATIC_FILES_RUNTIME} from 'next-server/constants'
|
||||
import * as asset from '../lib/asset'
|
||||
import * as envConfig from '../lib/runtime-config'
|
||||
import {loadComponents} from './load-components'
|
||||
|
||||
|
|
@ -111,7 +110,6 @@ export default class Server {
|
|||
|
||||
public setAssetPrefix(prefix?: string) {
|
||||
this.renderOpts.assetPrefix = prefix ? prefix.replace(/\/$/, '') : ''
|
||||
asset.setAssetPrefix(this.renderOpts.assetPrefix)
|
||||
}
|
||||
|
||||
// Backwards compatibility
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
module.exports = require('next-server/asset')
|
||||
|
|
@ -7,9 +7,6 @@ export default function NextToNextServer (): PluginObj {
|
|||
visitor: {
|
||||
ImportDeclaration (path: NodePath<ImportDeclaration>) {
|
||||
const source = path.node.source.value
|
||||
if (source === 'next/asset') {
|
||||
path.node.source.value = 'next-server/asset'
|
||||
}
|
||||
if (source === 'next/dynamic') {
|
||||
path.node.source.value = 'next-server/dynamic'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { resolve, join } from 'path'
|
|||
import { existsSync, readFileSync } from 'fs'
|
||||
import loadConfig from 'next-server/next-config'
|
||||
import { PHASE_EXPORT, SERVER_DIRECTORY, PAGES_MANIFEST, CONFIG_FILE, BUILD_ID_FILE, CLIENT_STATIC_FILES_PATH } from 'next-server/constants'
|
||||
import { setAssetPrefix } from 'next-server/asset'
|
||||
import * as envConfig from 'next-server/config'
|
||||
import createProgress from 'tty-aware-progress'
|
||||
|
||||
|
|
@ -104,9 +103,6 @@ export default async function (dir, options, configuration) {
|
|||
publicRuntimeConfig
|
||||
})
|
||||
|
||||
// set the assetPrefix to use for 'next/asset'
|
||||
setAssetPrefix(renderOpts.assetPrefix)
|
||||
|
||||
// We need this for server rendering the Link component.
|
||||
global.__NEXT_DATA__ = {
|
||||
nextExport: true
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
"files": [
|
||||
"dist",
|
||||
"app.js",
|
||||
"asset.js",
|
||||
"babel.js",
|
||||
"client.js",
|
||||
"config.js",
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import asset from 'next/asset'
|
||||
|
||||
export default () => (
|
||||
<div id='asset-page'>
|
||||
<img id='img1' src={asset('/the-image')} />
|
||||
<img id='img2' src={asset('the-image')} />
|
||||
<img id='img3' src={asset('http://the-image.com/the-image')} />
|
||||
<img id='img4' src={asset('https://the-image.com/the-image')} />
|
||||
</div>
|
||||
)
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<Link href='/using-asset/asset'>
|
||||
<a id='go-asset'>Asset</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
/* eslint-env jest */
|
||||
import cheerio from 'cheerio'
|
||||
import {
|
||||
renderViaHTTP
|
||||
} from 'next-test-utils'
|
||||
import webdriver from 'next-webdriver'
|
||||
|
||||
export default (context) => {
|
||||
async function get$ (path) {
|
||||
const html = await renderViaHTTP(context.appPort, path)
|
||||
return cheerio.load(html)
|
||||
}
|
||||
|
||||
describe('With next/asset', () => {
|
||||
describe('with SSR', () => {
|
||||
it('should handle beginning slash properly', async () => {
|
||||
const $ = await get$('/using-asset/asset')
|
||||
expect($('#img1').attr('src')).toBe('/static/the-image')
|
||||
expect($('#img2').attr('src')).toBe('/static/the-image')
|
||||
})
|
||||
|
||||
it('should handle http(s) properly', async () => {
|
||||
const $ = await get$('/using-asset/asset')
|
||||
expect($('#img3').attr('src')).toBe('http://the-image.com/the-image')
|
||||
expect($('#img4').attr('src')).toBe('https://the-image.com/the-image')
|
||||
})
|
||||
})
|
||||
|
||||
describe('with client navigation', () => {
|
||||
it('should handle beginning slash properly', async () => {
|
||||
const browser = await webdriver(context.appPort, '/using-asset')
|
||||
await browser
|
||||
.elementByCss('#go-asset').click()
|
||||
.waitForElementByCss('#asset-page')
|
||||
|
||||
expect(await browser.elementByCss('#img1').getAttribute('src'))
|
||||
.toBe(`http://localhost:${context.appPort}/static/the-image`)
|
||||
expect(await browser.elementByCss('#img2').getAttribute('src'))
|
||||
.toBe(`http://localhost:${context.appPort}/static/the-image`)
|
||||
browser.close()
|
||||
})
|
||||
|
||||
it('should handle http(s) properly', async () => {
|
||||
const browser = await webdriver(context.appPort, '/using-asset')
|
||||
await browser
|
||||
.elementByCss('#go-asset').click()
|
||||
.waitForElementByCss('#asset-page')
|
||||
|
||||
expect(await browser.elementByCss('#img3').getAttribute('src'))
|
||||
.toBe('http://the-image.com/the-image')
|
||||
expect(await browser.elementByCss('#img4').getAttribute('src'))
|
||||
.toBe('https://the-image.com/the-image')
|
||||
browser.close()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -15,7 +15,6 @@ import clientNavigation from './client-navigation'
|
|||
import hmr from './hmr'
|
||||
import errorRecovery from './error-recovery'
|
||||
import dynamic from './dynamic'
|
||||
import asset from './asset'
|
||||
import processEnv from './process-env'
|
||||
|
||||
const context = {}
|
||||
|
|
@ -72,6 +71,5 @@ describe('Basic Features', () => {
|
|||
dynamic(context, (p, q) => renderViaHTTP(context.appPort, p, q))
|
||||
hmr(context, (p, q) => renderViaHTTP(context.appPort, p, q))
|
||||
errorRecovery(context, (p, q) => renderViaHTTP(context.appPort, p, q))
|
||||
asset(context)
|
||||
processEnv(context)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import asset from 'next/asset'
|
||||
|
||||
export default () => (
|
||||
<div id='asset-page'>
|
||||
<img src={asset('/myimage.png')} />
|
||||
asset page
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,14 +3,12 @@
|
|||
import { join } from 'path'
|
||||
import getPort from 'get-port'
|
||||
import clone from 'clone'
|
||||
import cheerio from 'cheerio'
|
||||
import {
|
||||
initNextServerScript,
|
||||
killApp,
|
||||
renderViaHTTP,
|
||||
fetchViaHTTP
|
||||
} from 'next-test-utils'
|
||||
import webdriver from 'next-webdriver'
|
||||
|
||||
const appDir = join(__dirname, '../')
|
||||
let appPort
|
||||
|
|
@ -50,8 +48,8 @@ describe('Custom Server', () => {
|
|||
})
|
||||
|
||||
it('should handle null assetPrefix accordingly', async () => {
|
||||
const $normal = cheerio.load(await renderViaHTTP(appPort, '/asset?setEmptyAssetPrefix=1'))
|
||||
expect($normal('img').attr('src')).toBe('/static/myimage.png')
|
||||
const normalUsage = await renderViaHTTP(appPort, '/asset?setEmptyAssetPrefix=1')
|
||||
expect(normalUsage).toMatch(/"\/_next/)
|
||||
})
|
||||
|
||||
it('should set the assetPrefix to a given request', async () => {
|
||||
|
|
@ -65,34 +63,6 @@ describe('Custom Server', () => {
|
|||
expect(dynamicUsage).toMatch(/127\.0\.0\.1/)
|
||||
}
|
||||
})
|
||||
|
||||
it('should support next/asset in server side', async () => {
|
||||
const $normal = cheerio.load(await renderViaHTTP(appPort, '/asset'))
|
||||
expect($normal('img').attr('src')).toBe('/static/myimage.png')
|
||||
|
||||
const $dynamic = cheerio.load(await renderViaHTTP(appPort, '/asset?setAssetPrefix=1'))
|
||||
expect($dynamic('img').attr('src')).toBe(`http://127.0.0.1:${context.appPort}/static/myimage.png`)
|
||||
})
|
||||
|
||||
it('should support next/asset in client side', async () => {
|
||||
const browser = await webdriver(context.appPort, '/')
|
||||
await browser
|
||||
.elementByCss('#go-asset').click()
|
||||
.waitForElementByCss('#asset-page')
|
||||
|
||||
expect(await browser.elementByCss('img').getAttribute('src'))
|
||||
.toBe(`http://localhost:${context.appPort}/static/myimage.png`)
|
||||
browser.close()
|
||||
|
||||
const browser2 = await webdriver(context.appPort, '/?setAssetPrefix=1')
|
||||
await browser2
|
||||
.elementByCss('#go-asset').click()
|
||||
.waitForElementByCss('#asset-page')
|
||||
|
||||
expect(await browser2.elementByCss('img').getAttribute('src'))
|
||||
.toBe(`http://127.0.0.1:${context.appPort}/static/myimage.png`)
|
||||
browser2.close()
|
||||
})
|
||||
})
|
||||
|
||||
describe('with generateEtags enabled', () => {
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
import asset from 'next/asset'
|
||||
|
||||
export default () => (
|
||||
<div id='asset-page'>
|
||||
<img src={asset('/myimage.png')} />
|
||||
</div>
|
||||
)
|
||||
|
|
@ -43,12 +43,6 @@ export default function (context) {
|
|||
expect(html).toMatch(/Query is: {}/)
|
||||
})
|
||||
|
||||
it('should handle next/asset properly', async () => {
|
||||
const html = await renderViaHTTP(context.port, '/asset')
|
||||
const $ = cheerio.load(html)
|
||||
expect($('img').attr('src')).toBe('/static/myimage.png')
|
||||
})
|
||||
|
||||
it('should render _error on 404', async () => {
|
||||
const html = await renderViaHTTP(context.port, '/404')
|
||||
expect(html).toMatch(/404/)
|
||||
|
|
|
|||
Loading…
Reference in a new issue