-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for browserslist and legacyBrowsers experimental option (#…
…36584) Implements the first part of #33227 - Applies browserslist to JS transforms when `experimental.browsersListForSwc` is enabled. - You don't have to use browserslist, there's also `legacyBrowsers: false` which will be the new default in Next.js 13. See #33227 for which browsers and why. `legacyBrowsers` requires `browsersListForSwc: true` to function until it is the default. ```js module.exports = { experimental: { legacyBrowsers: false, browsersListForSwc: true, } } ``` I only implemented the JS part of the RFC, the CSS part should be handled in a follow-up PR. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [x] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
- Loading branch information
1 parent
c947abb
commit fe3d6b7
Showing
9 changed files
with
234 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React, { useEffect } from 'react' | ||
const helloWorld = 'hello world' | ||
|
||
class MyComp extends React.Component { | ||
render() { | ||
return <h1>Hello World</h1> | ||
} | ||
} | ||
|
||
export default function Page() { | ||
useEffect(() => { | ||
;(async () => { | ||
console.log(helloWorld) | ||
})() | ||
}, []) | ||
return ( | ||
<> | ||
{helloWorld} | ||
<MyComp /> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { createNext, FileRef } from 'e2e-utils' | ||
import { NextInstance } from 'test/lib/next-modes/base' | ||
import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils' | ||
import path from 'path' | ||
import cheerio from 'cheerio' | ||
const appDir = path.join(__dirname, 'app') | ||
|
||
describe('Browserslist', () => { | ||
let next: NextInstance | ||
|
||
beforeAll(async () => { | ||
next = await createNext({ | ||
files: { | ||
pages: new FileRef(path.join(appDir, 'pages')), | ||
'.browserslistrc': 'Chrome 73', | ||
}, | ||
nextConfig: { | ||
experimental: { | ||
browsersListForSwc: true, | ||
}, | ||
}, | ||
dependencies: {}, | ||
}) | ||
}) | ||
afterAll(() => next.destroy()) | ||
|
||
it('should apply browserslist target', async () => { | ||
const html = await renderViaHTTP(next.url, '/') | ||
const $ = cheerio.load(html) | ||
|
||
let finished = false | ||
await Promise.all( | ||
$('script') | ||
.toArray() | ||
.map(async (el) => { | ||
const src = $(el).attr('src') | ||
if (!src) return | ||
if (src.includes('/index')) { | ||
const code = await fetchViaHTTP(next.url, src).then((res) => | ||
res.text() | ||
) | ||
|
||
const isDev = (global as any).isNextDev | ||
expect( | ||
code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(') | ||
).toBe(true) | ||
finished = true | ||
} | ||
}) | ||
) | ||
expect(finished).toBe(true) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { createNext, FileRef } from 'e2e-utils' | ||
import { NextInstance } from 'test/lib/next-modes/base' | ||
import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils' | ||
import path from 'path' | ||
import cheerio from 'cheerio' | ||
const appDir = path.join(__dirname, 'app') | ||
|
||
describe('legacyBrowsers: false', () => { | ||
let next: NextInstance | ||
|
||
beforeAll(async () => { | ||
next = await createNext({ | ||
files: { | ||
pages: new FileRef(path.join(appDir, 'pages')), | ||
}, | ||
nextConfig: { | ||
experimental: { | ||
legacyBrowsers: false, | ||
browsersListForSwc: true, | ||
}, | ||
}, | ||
dependencies: {}, | ||
}) | ||
}) | ||
afterAll(() => next.destroy()) | ||
|
||
it('should apply with legacyBrowsers: false correctly', async () => { | ||
const html = await renderViaHTTP(next.url, '/') | ||
const $ = cheerio.load(html) | ||
|
||
let finished = false | ||
await Promise.all( | ||
$('script') | ||
.toArray() | ||
.map(async (el) => { | ||
const src = $(el).attr('src') | ||
if (!src) return | ||
if (src.includes('/index')) { | ||
const code = await fetchViaHTTP(next.url, src).then((res) => | ||
res.text() | ||
) | ||
|
||
const isDev = (global as any).isNextDev | ||
expect( | ||
code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(') | ||
).toBe(true) | ||
finished = true | ||
} | ||
}) | ||
) | ||
expect(finished).toBe(true) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { createNext, FileRef } from 'e2e-utils' | ||
import { NextInstance } from 'test/lib/next-modes/base' | ||
import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils' | ||
import path from 'path' | ||
import cheerio from 'cheerio' | ||
const appDir = path.join(__dirname, 'app') | ||
|
||
describe('legacyBrowsers: true', () => { | ||
let next: NextInstance | ||
|
||
beforeAll(async () => { | ||
next = await createNext({ | ||
files: { | ||
pages: new FileRef(path.join(appDir, 'pages')), | ||
}, | ||
nextConfig: { | ||
experimental: { | ||
browsersListForSwc: true, | ||
}, | ||
}, | ||
dependencies: {}, | ||
}) | ||
}) | ||
afterAll(() => next.destroy()) | ||
|
||
it('should apply legacyBrowsers: true by default', async () => { | ||
const html = await renderViaHTTP(next.url, '/') | ||
const $ = cheerio.load(html) | ||
|
||
let finished = false | ||
await Promise.all( | ||
$('script') | ||
.toArray() | ||
.map(async (el) => { | ||
const src = $(el).attr('src') | ||
if (!src) return | ||
if (src.includes('/index')) { | ||
const code = await fetchViaHTTP(next.url, src).then((res) => | ||
res.text() | ||
) | ||
|
||
const isDev = (global as any).isNextDev | ||
expect( | ||
code.includes(isDev ? 'async ()=>{' : 'async()=>{console.log(') | ||
).toBe(false) | ||
finished = true | ||
} | ||
}) | ||
) | ||
expect(finished).toBe(true) | ||
}) | ||
}) |