Commit graph

21 commits

Author SHA1 Message Date
JJ Kasper
ccc8d271df
Revert "edge-ssr: bundle next/dist as ESM for better tree-shaking (#40251) (#40967)
This reverts commit 11deaaa82b.

Temporarily reverts the above commit due to breaking middleware/edge
functions once deployed.

Fixes:
https://github.com/vercel/next.js/actions/runs/3133433920/jobs/5087331787

cc @shuding @feedthejim 

```sh
[GET] /blog/first
13:56:56:61
2022-09-27T20:56:56.671Z	61d43a6a-34a1-40c0-b71f-4ae5d1918431	ERROR	/var/task/node_modules/next/dist/esm/client/router.js:1
/* global window */ import React from 'react';
                    ^^^^^^
SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/var/task/node_modules/next/router.js:3:7)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
```
2022-09-27 15:05:40 -07:00
Jimmy Lai
11deaaa82b
edge-ssr: bundle next/dist as ESM for better tree-shaking (#40251)
# Context

Edge SSR'd routes cold boot performances are proportional to the
executed code size.

In order to improve it, we are trying to optimize for the bundle size of
a packed Edge SSR route.

This PR adds ESM compilation targets for all Next.js dist packages and
use them to bundle Edge SSR'd route.

This allows us to leverage the better tree shaking/DCE for ESM modules
in webpack in order to decrease the overall bundle size.

This PR also enables minifying Edge SSR routes. Since we don't control
which minifier might be used later (if any), it's best if we provide an
already optimised bundle.

<img width="903" alt="image"
src="https://user-images.githubusercontent.com/11064311/190005211-b7cb2c58-a56a-44b0-8ee4-fd3f603e41bd.png">

This is a 10ms cold boot win per my benchmarking script, which I'll put
in a subsequent PR.

Not done yet:
- ~~swap exported requires in `next/link` (and others) etc to point them
to the esm modules version~~

<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we
request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

## 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.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Shu Ding <g@shud.in>
2022-09-26 16:56:16 -07:00
Jiachi Liu
295f9da393
Client directive (#40415)
## Feature
Change server components convention from using `.server.js` / `.client.js` file extension to determine it's a server or client component to using `'client'` js literal as a directive for determine client components boundary.
React RFC: https://github.com/reactjs/rfcs/pull/189
New behavior doesn't consume `.server.js` as server components any more, if you're enabling `serverComponents` flag, every `page.js` in app dir will become server components by default. If you adding a `'client'` directive to the page, then that page will become a client component. This rule also applies to the normal js components, client components will require a `'client'` directive to indicate its identity, instead of having a `.client.js` extension.
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] 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.
- [ ] Errors have helpful link attached, see `contributing.md`

Co-authored-by: Shu Ding <3676859+shuding@users.noreply.github.com>
2022-09-18 00:00:16 +00:00
Shu Ding
d5fa555841
Implement SWC transformer for server and client graphs (#40603)
This is an initial implementation of the Server Components SWC
transformer. For the server graph, it detects client entries via the
`"client"` directive and transpile them into module reference code; for
the client graph, it removes the directives. And for both graphs, it
checks if there is any invalid imports for the given environment and
shows proper errors.

With that added, we can switch from `next-flight-client-loader` to
directly use the SWC loader in one pass. Next step is to get rid of the
`.client.` extension in other plugins.

## 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.
- [ ] 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.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-09-17 00:12:59 +02:00
Sukka
c69d7817a1
chore: enable swc externalHelpers when pre-compile (#38182) 2022-07-26 14:23:19 -05:00
JJ Kasper
081c21bc1c
Revert "Enable externalHelpers when pre compiling Next.js' code" (#37829)
Revert "Enable `externalHelpers` when pre compiling Next.js' code (#37164)"

This reverts commit 4671010169.
2022-06-19 13:19:23 -05:00
Sukka
4671010169
Enable externalHelpers when pre compiling Next.js' code (#37164)
* chore: enable `externalHelpers` for pre-compile

* chore(devDeps): update @swc/core@1.2.203
2022-06-19 10:03:50 -05:00
JJ Kasper
f3c31137e1
Fix interopDefault on jest object-proxy (#37002)
This fixes the interop default from https://github.com/vercel/next.js/pull/36877 on the jest `object-proxy` as it currently causes the below error when running tests in our `with-jest` example:

```sh
    TypeError: 'get' on proxy: property '__esModule' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected 'true' but got 'false')
```

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

x-ref: https://github.com/vercel/next.js/pull/36877
2022-05-18 09:41:13 +00:00
LongYinan
9e568dae24
Make esm default interpolation work with jest mock (#36877)
fixes https://github.com/vercel/next.js/issues/36794
2022-05-13 16:39:38 +00:00
LongYinan
da6f271d9b
Interpolate module.exports as default import (#36082)
fixes https://github.com/vercel/next.js/issues/34412

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2022-04-12 14:32:42 +00:00
LongYinan
aaa823c3fa
Interpolate default exports is now unnecessary (#36065)
## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2022-04-11 15:36:25 +00:00
LongYinan
01109734ce
Interpolate default exports (#35933)
* Add failing test for next/link next/image with "type": "module"

* Interpolate default exports

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2022-04-11 16:43:44 +08:00
Jiachi Liu
ff6b75027b
Enable import assertion syntax parsing (#33750)
## Feature

Enable import assertion syntax parsing for ecmascript/typescript. Since webpack has already supported it, enable import assertion parsing and leave them to webpack to handle

#### Upgration
* tooling: `@swc/core`, `@swc/cli`, prettier to support importAssertion related flags
* typescript related: `typescript` >= 4.5
* babel related: `@babel/plugin-syntax-import-assertions`
* lint parser: `@typescript-eslint/parser`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-03-06 20:41:22 +00:00
Tim Neutkens
ff816d4bb0
Remove noop import (#31722) 2021-11-24 15:40:58 +01:00
Tim Neutkens
7e370134fb
Use import() to load next.config.js (#29935)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Steven <steven@ceriously.com>
2021-10-16 14:22:42 +02:00
JJ Kasper
5544adc481
Update to latest babel versions (#28174) 2021-08-17 09:18:08 +02:00
Tim Neutkens
04bbea2cbe Add sourceFileName for SWC compiled core files
Fixes the vscode debugger breakpoints. Thanks @kdy1 for implementing the `sourceFileName` option in SWC.
2021-08-06 22:02:08 +02:00
JJ Kasper
26981aa54c
Undo sourcemap change (#27690)
This undoes the change from https://github.com/vercel/next.js/pull/27623 since it appears to be breaking source maps from changing the sources field in the generated source map to a relative path causing it to break jest's source map handling as can be seen in the `test-unit` CI job [here](https://github.com/vercel/next.js/runs/3214076727). 

This reverts commit f9ebc7772f.
2021-08-02 15:45:39 +00:00
Tim Neutkens
f9ebc7772f
Ensure Next.js core development sourcemaps use correct input file (#27623)
Noticed while debugging that the error output lines did not make sense and found that `sourceFileName` is not supported in SWC yet. This is a temporary fix until @kdy1 adds the option.
2021-08-01 16:08:06 +02:00
Tim Neutkens
c7e2a1df6a
Use SWC for Next.js core client files (#27196)
Replaces Babel with SWC for Next.js core client-side files.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes
2021-07-28 15:10:51 +00:00
Tim Neutkens
fdabeb7098
Use SWC to compile Next.js core server files (#27167)
- Use SWC to compile Next.js core server files
- Ensure only @babel/runtime/helpers/interopRequireDefault helper is used

Just an initial comparison to compare size difference of this change.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes
2021-07-14 18:12:04 +00:00