diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 38ecb82dc824e..0000000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,217 +0,0 @@ -version: 2.1 - -######################### -# Aliases -######################### - -aliases: - - &store_test_results - store_test_results: - path: ~/repo/test - - &persist_to_workspace - persist_to_workspace: - root: ~/repo - paths: ['.'] - - &attach_workspace - attach_workspace: - at: . - -######################### -# Executors -######################### - -orbs: - win: circleci/windows@2.2.0 - -executors: - node: - docker: - - image: circleci/node:10-browsers - working_directory: ~/repo - -######################### -# Commands -######################### - -commands: - yarn_install: - steps: - - run: - name: Installing Dependencies - command: yarn install --frozen-lockfile --check-files - yarn_lint: - steps: - - run: - name: Linting - command: yarn lint - yarn_react_integration: - steps: - - run: - name: Upgrade to most recent release in React's Next channel - command: yarn upgrade react@next react-dom@next -W --dev # upgrade (vs add) will skip re-building Next.js, which doesn't bundle React internals (so this is OK!) - yarn_info: - steps: - - run: - name: React Versions - command: yarn why react && yarn why react-dom - test_all: - steps: - - run: google-chrome --version - - run: chromedriver --version - - run: - name: Run All Tests - command: | - node run-tests.js --timings -c 3 $( - circleci tests glob "test/**/*.test.*" | \ - circleci tests split --split-by=timings - ) - environment: - NEXT_TELEMETRY_DISABLED: '1' - test_safari: - steps: - - run: - name: Test Safari - command: | - yarn testsafari --forceExit test/integration/production/ - environment: - NEXT_TELEMETRY_DISABLED: '1' - BROWSERSTACK: 'true' - test_firefox: - steps: - - run: - name: Test Firefox - command: | - yarn testfirefox --forceExit test/integration/production/ - environment: - NEXT_TELEMETRY_DISABLED: '1' - save_npm_token: - steps: - - run: - name: Potentially save npm token - command: | - ([[ ! -z $NPM_TOKEN ]] && echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc) || echo "Did not write npm token" - publish_canary: - steps: - - run: - name: Potentially publish canary release - command: | - if \ - ls ~/.npmrc >/dev/null 2>&1 && \ - [[ $(git describe --exact-match 2> /dev/null || :) =~ -canary ]]; \ - then - yarn run lerna publish from-git --npm-tag canary --yes - else - echo "Did not publish" - fi - publish_stable: - steps: - - run: - name: Potentially publish stable release - command: | - if \ - ls ~/.npmrc >/dev/null 2>&1 && \ - [[ ! $(git describe --exact-match 2> /dev/null || :) =~ -canary ]]; \ - then - yarn run lerna publish from-git --yes - else - echo "Did not publish" - fi - -######################### -# Jobs -######################### - -jobs: - build: - executor: node - steps: - - checkout - - yarn_install - - *persist_to_workspace - build-react-canary: - executor: node - steps: - - *attach_workspace - - yarn_react_integration - - *persist_to_workspace - lint: - executor: node - steps: - - *attach_workspace - - yarn_lint - test: - parallelism: 6 - executor: node - steps: - - *attach_workspace - - yarn_info - - test_all - - *store_test_results - test-safari: - executor: node - steps: - - *attach_workspace - - test_safari - test-firefox: - executor: node - steps: - - *attach_workspace - - test_firefox - deploy: - executor: node - steps: - - *attach_workspace - - save_npm_token - - publish_canary - - publish_stable - -######################### -# Workflows -######################### - -workflows: - version: 2 - build-test-and-deploy: - jobs: - - build - - test-firefox: - requires: - - build - - test: - requires: - - build - - test-safari: - requires: - - build - filters: - branches: - only: - - master - - canary - - lint: - requires: - - build - - deploy: - requires: - - test - filters: - branches: - only: - - master - - canary - q12h-react-canary: - triggers: - - schedule: - cron: '0 0,12 * * *' - filters: - branches: - only: - - canary - jobs: - - build - - build-react-canary: - requires: - - build - - test: - requires: - - build-react-canary diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml new file mode 100644 index 0000000000000..f314bd51a19cb --- /dev/null +++ b/.github/workflows/build_test_deploy.yml @@ -0,0 +1,111 @@ +on: + push: + branches: [canary] + pull_request: + types: [opened, synchronize] + +name: Build, test, and deploy + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - run: yarn install --frozen-lockfile --check-files + env: + NEXT_TELEMETRY_DISABLED: 1 + + - uses: actions/cache@v1 + id: cache-build + with: + path: '.' + key: ${{ github.sha }} + + lint: + runs-on: ubuntu-latest + needs: build + steps: + - uses: actions/cache@v1 + id: restore-build + with: + path: '.' + key: ${{ github.sha }} + + - run: yarn lint + + testAll: + name: Test All + runs-on: ubuntu-latest + needs: build + strategy: + fail-fast: false + matrix: + group: [1, 2, 3, 4, 5, 6] + steps: + - uses: actions/cache@v1 + id: restore-build + with: + path: '.' + key: ${{ github.sha }} + + - run: node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3 + env: + NEXT_TELEMETRY_DISABLED: 1 + HEADLESS: true + + testsPass: + name: thank you, next + runs-on: ubuntu-latest + needs: [lint, testAll] + steps: + - run: exit 0 + + testFirefox: + name: Test Firefox (production) + runs-on: ubuntu-latest + needs: build + steps: + - uses: actions/cache@v1 + id: restore-build + with: + path: '.' + key: ${{ github.sha }} + + - run: yarn testfirefox --forceExit test/integration/production/ + env: + NEXT_TELEMETRY_DISABLED: 1 + HEADLESS: true + + testSafari: + name: Test Safari (production) + runs-on: ubuntu-latest + needs: build + if: github.ref == 'canary' + steps: + - uses: actions/cache@v1 + id: restore-build + with: + path: '.' + key: ${{ github.sha }} + + - run: yarn testsafari --forceExit test/integration/production/ + env: + NEXT_TELEMETRY_DISABLED: 1 + BROWSERSTACK: true + BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }} + BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }} + + saveNpmToken: + name: Potentially save npm token + runs-on: ubuntu-latest + if: github.ref == 'canary' + needs: [build, testAll] + steps: + - run: ([[ ! -z $NPM_TOKEN ]] && echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc) || echo "Did not write npm token" + + publishRelease: + name: Potentially publish release + runs-on: ubuntu-latest + needs: saveNpmToken + steps: + - run: ./publish-release.sh diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request_stats.yml similarity index 50% rename from .github/workflows/pull_request.yml rename to .github/workflows/pull_request_stats.yml index 159caa0f50260..722494b6a5e57 100644 --- a/.github/workflows/pull_request.yml +++ b/.github/workflows/pull_request_stats.yml @@ -1,11 +1,14 @@ -on: pull_request -name: Generate pull request stats +on: + pull_request: + types: [opened, synchronize] + +name: Generate Pull Request Stats + jobs: - prStats: + stats: name: PR Stats runs-on: ubuntu-latest steps: - - name: PR Stats - uses: zeit/next-stats-action@master + - uses: zeit/next-stats-action@master env: COMMENT_ENDPOINT: https://next-stats.jjsweb.site/api/comment diff --git a/.github/workflows/release.yml b/.github/workflows/release_stats.yml similarity index 88% rename from .github/workflows/release.yml rename to .github/workflows/release_stats.yml index f4cb69babe2a3..96cce51f0616f 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release_stats.yml @@ -1,5 +1,7 @@ on: release -name: Generate release stats + +name: Generate Release Stats + jobs: prStats: name: PR Stats diff --git a/.github/workflows/test_react_next.yml b/.github/workflows/test_react_next.yml new file mode 100644 index 0000000000000..0cdcb04221d85 --- /dev/null +++ b/.github/workflows/test_react_next.yml @@ -0,0 +1,44 @@ +on: + schedule: + # * is a special character in YAML so you have to quote this string + - cron: '0 0,12 * * *' + +name: Test react@next + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + + - run: cd repo && yarn install --frozen-lockfile --check-files + env: + NEXT_TELEMETRY_DISABLED: 1 + + - run: cd repo && yarn upgrade react@next react-dom@next -W --dev + + - uses: actions/cache@v1 + id: cache-build + with: + path: '.' + key: ${{ github.sha }} + + testAll: + name: Test All + runs-on: ubuntu-latest + needs: build + strategy: + fail-fast: false + matrix: + group: [1, 2, 3, 4, 5, 6] + steps: + - uses: actions/cache@v1 + id: restore-build + with: + path: '.' + key: ${{ github.sha }} + + - run: cd repo && node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3 + env: + NEXT_TELEMETRY_DISABLED: 1 + HEADLESS: true diff --git a/packages/next/build/webpack/plugins/build-manifest-plugin.ts b/packages/next/build/webpack/plugins/build-manifest-plugin.ts index be640cbed31f6..75a3b2500d027 100644 --- a/packages/next/build/webpack/plugins/build-manifest-plugin.ts +++ b/packages/next/build/webpack/plugins/build-manifest-plugin.ts @@ -33,7 +33,9 @@ const generateClientManifest = ( // Filter out dependencies in the _app entry, because those will have already // been loaded by the client prior to a navigation event const filteredDeps = dependencies.filter( - dep => !appDependencies.has(dep) && /\.module\.js$/.test(dep) === isModern + dep => + !appDependencies.has(dep) && + (!dep.endsWith('.js') || dep.endsWith('.module.js') === isModern) ) // The manifest can omit the page if it has no requirements diff --git a/publish-release.sh b/publish-release.sh new file mode 100755 index 0000000000000..e5f944b8dfb81 --- /dev/null +++ b/publish-release.sh @@ -0,0 +1,21 @@ +#!/bin/sh + +if + ls ~/.npmrc >/dev/null 2>&1 && + [[ $(git describe --exact-match 2> /dev/null || :) =~ -canary ]]; +then + # yarn run lerna publish from-git --npm-tag canary --yes + echo "publishing canary" +else + echo "Did not publish canary" +fi + +if + ls ~/.npmrc >/dev/null 2>&1 && + [[ ! $(git describe --exact-match 2> /dev/null || :) =~ -canary ]]; +then + # yarn run lerna publish from-git --yes + echo "publishing stable" +else + echo "Did not publish stable" +fi diff --git a/run-tests.js b/run-tests.js index e527dda4764fa..2ed62b0fb1b52 100644 --- a/run-tests.js +++ b/run-tests.js @@ -1,6 +1,5 @@ const path = require('path') const _glob = require('glob') -const fs = require('fs-extra') const fetch = require('node-fetch') const { promisify } = require('util') const { Sema } = require('async-sema') @@ -12,6 +11,7 @@ const exec = promisify(execOrig) const NUM_RETRIES = 2 const DEFAULT_CONCURRENCY = 2 const timings = [] +const TIMINGS_API = `https://next-timings.jjsweb.site/api/timings` ;(async () => { let concurrencyIdx = process.argv.indexOf('-c') @@ -32,52 +32,18 @@ const timings = [] cwd: path.join(__dirname, 'test'), }) - if (outputTimings) { + if (outputTimings && groupArg) { console.log('Fetching previous timings data') - const metaRes = await fetch( - `https://circleci.com/api/v1.1/project/github/zeit/next.js/` - ) - - if (metaRes.ok) { - const buildsMeta = await metaRes.json() - let buildNumber - - for (const build of buildsMeta) { - if ( - build.status === 'success' && - build.build_parameters && - build.build_parameters.CIRCLE_JOB === 'test' - ) { - buildNumber = build.build_num - break - } - } - - const timesRes = await fetch( - `https://circleci.com/api/v1.1/project/github/zeit/next.js/${buildNumber}/tests` - ) - - if (timesRes.ok) { - const { tests } = await timesRes.json() - prevTimings = {} - - for (const test of tests) { - prevTimings[test.file] = test.run_time - } + try { + const timingsRes = await fetch(TIMINGS_API) - if (Object.keys(prevTimings).length > 0) { - console.log('Fetched previous timings data') - } else { - prevTimings = null - } - } else { - console.log( - 'Failed to fetch previous timings status:', - timesRes.status - ) + if (!timingsRes.ok) { + throw new Error(`request status: ${timingsRes.status}`) } - } else { - console.log('Failed to fetch timings meta status:', metaRes.status) + prevTimings = await timingsRes.json() + console.log('Fetched previous timings data successfully') + } catch (err) { + console.log(`Failed to fetch timings data`, err) } } } @@ -210,7 +176,8 @@ const timings = [] ) if (outputTimings) { - let junitData = `` + const curTimings = {} + // let junitData = `` /* @@ -220,20 +187,41 @@ const timings = [] for (const timing of timings) { const timeInSeconds = timing.time / 1000 - - junitData += ` - - - - ` + curTimings[timing.file] = timeInSeconds + + // junitData += ` + // + // + // + // ` } + // junitData += `` + // console.log('output timing data to junit.xml') + + if (prevTimings) { + try { + const timingsRes = await fetch(TIMINGS_API, { + method: 'POST', + headers: { + 'content-type': 'application/json', + }, + body: JSON.stringify({ timings: curTimings }), + }) - junitData += `` - await fs.writeFile('test/junit.xml', junitData, 'utf8') - console.log('output timing data to junit.xml') + if (!timingsRes.ok) { + throw new Error(`request status: ${timingsRes.status}`) + } + console.log( + 'Sent updated timings successfully', + await timingsRes.json() + ) + } catch (err) { + console.log('Failed to update timings data', err) + } + } } })() diff --git a/test/integration/api-support/test/index.test.js b/test/integration/api-support/test/index.test.js index a803bbdaceb26..c66556733b2db 100644 --- a/test/integration/api-support/test/index.test.js +++ b/test/integration/api-support/test/index.test.js @@ -118,16 +118,32 @@ function runTests(dev = false) { }) it('should return error exceeded body limit', async () => { - const data = await fetchViaHTTP(appPort, '/api/parse', null, { - method: 'POST', - headers: { - 'Content-Type': 'application/json; charset=utf-8', - }, - body: JSON.stringify(json), - }) + let res + let error + + try { + res = await fetchViaHTTP(appPort, '/api/parse', null, { + method: 'POST', + headers: { + 'Content-Type': 'application/json; charset=utf-8', + }, + body: JSON.stringify(json), + }) + } catch (err) { + error = err + } - expect(data.status).toEqual(413) - expect(data.statusText).toEqual('Body exceeded 1mb limit') + if (error) { + // This is a temporary workaround for testing since node doesn't handle + // closed connections when POSTing data to an endpoint correctly + // https://github.com/nodejs/node/issues/12339 + // TODO: investigate re-enabling this after above issue has been + // addressed in node or `node-fetch` + expect(error.code).toBe('EPIPE') + } else { + expect(res.status).toEqual(413) + expect(res.statusText).toEqual('Body exceeded 1mb limit') + } }) it('should parse bigger body then 1mb', async () => { diff --git a/test/integration/css-client-nav/test/index.test.js b/test/integration/css-client-nav/test/index.test.js index d5dfc8cba184a..4f35823bc276c 100644 --- a/test/integration/css-client-nav/test/index.test.js +++ b/test/integration/css-client-nav/test/index.test.js @@ -171,3 +171,159 @@ describe('CSS Module client-side navigation in Production', () => { } }) }) + +describe('CSS Module client-side navigation in Production (Modern)', () => { + const appDir = join(fixturesDir, 'multi-module-modern') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + let appPort + let app + beforeAll(async () => { + await nextBuild(appDir) + appPort = await findPort() + app = await nextStart(appDir, appPort) + }) + afterAll(async () => { + await killApp(app) + }) + + it('should be able to client-side navigate from red to blue', async () => { + let browser + try { + browser = await webdriver(appPort, '/red') + + await browser.eval(`window.__did_not_ssr = 'make sure this is set'`) + + const redColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#verify-red')).color` + ) + expect(redColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`) + + await browser.elementByCss('#link-blue').click() + + await browser.waitForElementByCss('#verify-blue') + + const blueColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#verify-blue')).color` + ) + expect(blueColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`) + + expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot( + `"make sure this is set"` + ) + } finally { + if (browser) { + await browser.close() + } + } + }) + + it('should be able to client-side navigate from blue to red', async () => { + const content = await renderViaHTTP(appPort, '/blue') + const $ = cheerio.load(content) + + // Ensure only `/blue` page's CSS is preloaded + const serverCssPreloads = $('link[rel="preload"][as="style"]') + expect(serverCssPreloads.length).toBe(1) + + const serverCssPrefetches = $('link[rel="prefetch"][as="style"]') + expect(serverCssPrefetches.length).toBe(0) + + let browser + try { + browser = await webdriver(appPort, '/blue') + await browser.eval(`window.__did_not_ssr = 'make sure this is set'`) + + const redColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#verify-blue')).color` + ) + expect(redColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`) + + // Check that Red was preloaded + const result = await browser.eval( + `[].slice.call(document.querySelectorAll('link[rel="prefetch"][as="style"]')).map(e=>({href:e.href})).sort()` + ) + expect(result.length).toBe(1) + + // Check that CSS was not loaded as script + const cssPreloads = await browser.eval( + `[].slice.call(document.querySelectorAll('link[rel=preload][href*=".css"]')).map(e=>e.as)` + ) + expect(cssPreloads.every(e => e === 'style')).toBe(true) + const cssPreloads2 = await browser.eval( + `[].slice.call(document.querySelectorAll('link[rel=prefetch][href*=".css"]')).map(e=>e.as)` + ) + expect(cssPreloads2.every(e => e === 'style')).toBe(true) + + await browser.elementByCss('#link-red').click() + + await browser.waitForElementByCss('#verify-red') + + const blueColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#verify-red')).color` + ) + expect(blueColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`) + + expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot( + `"make sure this is set"` + ) + } finally { + if (browser) { + await browser.close() + } + } + }) + + it('should be able to client-side navigate from none to red', async () => { + let browser + try { + browser = await webdriver(appPort, '/none') + + await browser.eval(`window.__did_not_ssr = 'make sure this is set'`) + + await browser.elementByCss('#link-red').click() + await browser.waitForElementByCss('#verify-red') + + const blueColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#verify-red')).color` + ) + expect(blueColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`) + + expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot( + `"make sure this is set"` + ) + } finally { + if (browser) { + await browser.close() + } + } + }) + + it('should be able to client-side navigate from none to blue', async () => { + let browser + try { + browser = await webdriver(appPort, '/none') + + await browser.eval(`window.__did_not_ssr = 'make sure this is set'`) + + await browser.elementByCss('#link-blue').click() + await browser.waitForElementByCss('#verify-blue') + + const blueColor = await browser.eval( + `window.getComputedStyle(document.querySelector('#verify-blue')).color` + ) + expect(blueColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`) + + expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot( + `"make sure this is set"` + ) + } finally { + if (browser) { + await browser.close() + } + } + }) +}) diff --git a/test/integration/css-fixtures/multi-module-modern/next.config.js b/test/integration/css-fixtures/multi-module-modern/next.config.js new file mode 100644 index 0000000000000..a6e26e2467154 --- /dev/null +++ b/test/integration/css-fixtures/multi-module-modern/next.config.js @@ -0,0 +1,9 @@ +const parent = require('../next.config') + +module.exports = { + ...parent, + experimental: { + ...parent.experimental, + modern: true, + }, +} diff --git a/test/integration/css-fixtures/multi-module-modern/pages/blue.js b/test/integration/css-fixtures/multi-module-modern/pages/blue.js new file mode 100644 index 0000000000000..49dff85067fa3 --- /dev/null +++ b/test/integration/css-fixtures/multi-module-modern/pages/blue.js @@ -0,0 +1,20 @@ +import Link from 'next/link' +import { blueText } from './blue.module.css' + +export default function Blue() { + return ( + <> +
+ This text should be blue. +
+
+ + Red + +
+ + None + + + ) +} diff --git a/test/integration/css-fixtures/multi-module-modern/pages/blue.module.css b/test/integration/css-fixtures/multi-module-modern/pages/blue.module.css new file mode 100644 index 0000000000000..4c5ac28ce4ef8 --- /dev/null +++ b/test/integration/css-fixtures/multi-module-modern/pages/blue.module.css @@ -0,0 +1,3 @@ +.blueText { + color: blue; +} diff --git a/test/integration/css-fixtures/multi-module-modern/pages/none.js b/test/integration/css-fixtures/multi-module-modern/pages/none.js new file mode 100644 index 0000000000000..f26c2d80b3ae0 --- /dev/null +++ b/test/integration/css-fixtures/multi-module-modern/pages/none.js @@ -0,0 +1,19 @@ +import Link from 'next/link' + +export default function None() { + return ( + <> +
+ This text should be black. +
+
+ + Red + +
+ + Blue + + + ) +} diff --git a/test/integration/css-fixtures/multi-module-modern/pages/red.js b/test/integration/css-fixtures/multi-module-modern/pages/red.js new file mode 100644 index 0000000000000..d67276dda2d76 --- /dev/null +++ b/test/integration/css-fixtures/multi-module-modern/pages/red.js @@ -0,0 +1,20 @@ +import Link from 'next/link' +import { redText } from './red.module.css' + +export default function Red() { + return ( + <> +
+ This text should be red. +
+
+ + Blue + +
+ + None + + + ) +} diff --git a/test/integration/css-fixtures/multi-module-modern/pages/red.module.css b/test/integration/css-fixtures/multi-module-modern/pages/red.module.css new file mode 100644 index 0000000000000..08a38e09ef8ea --- /dev/null +++ b/test/integration/css-fixtures/multi-module-modern/pages/red.module.css @@ -0,0 +1,3 @@ +.redText { + color: red; +} diff --git a/test/integration/css-fixtures/multi-module/next.config.js b/test/integration/css-fixtures/multi-module/next.config.js new file mode 100644 index 0000000000000..b0f299cd75640 --- /dev/null +++ b/test/integration/css-fixtures/multi-module/next.config.js @@ -0,0 +1,9 @@ +const parent = require('../next.config') + +module.exports = { + ...parent, + experimental: { + ...parent.experimental, + modern: false, + }, +}