Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pull] canary from vercel:canary #544

Merged
merged 59 commits into from
Sep 25, 2022
Merged

[pull] canary from vercel:canary #544

merged 59 commits into from
Sep 25, 2022

Conversation

pull[bot]
Copy link

@pull pull bot commented Sep 21, 2022

See Commits and Changes for more details.


Created by pull[bot]

Can you help keep this open source service alive? 💖 Please sponsor : )

timneutkens and others added 5 commits September 20, 2022 16:55
## Changes

see commits

## Documentation / Examples

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

Currently the Next.js infer utility (`InferGetServerSidePropsType` and
`InferGetStaticPropsType`) types can lead to a wrong inferred types
(`never`). This happens if these functions return something different
than: `{props: {}}`.

**Example:** `getServerSideProps`

```typescript
export async function getServerSideProps({ query }: GetServerSidePropsContext) {
  if (query.foo) {
    return {
      notFound: true,
    }
  }

  return {
    props: { 
      foo: "bar"
    },
  }
}

type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>
// => type PageProps = never
```

**Example:** `getStaticProps`

```typescript
import type { InferGetStaticPropsType, GetStaticPropsContext } from 'next'

export async function getStaticProps(context: GetStaticPropsContext) {
  if (context.params?.bar) {
    return {
      notFound: true,
    }
  }

  return {
    props: {
      foo: 'bar',
    },
  }
}

type PageProps = InferGetStaticPropsType<typeof getStaticProps>
// => type PageProps = never
```

This is because the first infer condition of the utility type is not
satified leading to a never result.

```typescript
export type InferGetServerSidePropsType<T> = T extends GetServerSideProps<
  infer P, // <- NOT SATISFIED
  any
>
  ? P
  : T extends (
      context?: GetServerSidePropsContext<any>
    ) => Promise<GetServerSidePropsResult<infer P>>
  ? P
  : never  // <- NOT SATISFIED
```

## Solution

I have experimented with different solutions ending with a much simpler
type, that is faster to execute, easier to read and universally usable
for both prop variations.

```typescript
/**
 * Flow:
 * - Make sure getStaticProps is a function
 * - Get its return type
 * - Extract the one that contains {props: any}
 * - Return the props
 */
export type InferGetStaticPropsType<T extends (args: any) => any> = Extract<
  Awaited<ReturnType<T>>,
  { props: any }
>['props']
```

## Bug

- [x] Related issues: fixes #36615, #15913,
https://twitter.com/leeerob/status/1563540593003106306
- [x] Type tests added

## Future thoughts

Since `InferGetStaticPropsType` and `InferGetServerSidePropsType` are
now the same, it's api could be merged into one utility type (e.g:
InferNextProps). I recommend doing this in a different PR.

## Additional info

I have tested this approach using the following [external
package](https://www.npmjs.com/package/infer-next-props-type)
(@timneutkens sorry for the late PR). Since about 12 Month I haven't
received any negative feedback (issues) regarding this approach.

Co-authored-by: JJ Kasper <[email protected]>
Added support for search params and NEXT_LOCALE cookie if set

<!--
Thanks for opening a PR! Your contribution is much appreciated.
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 a 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 a 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/examples/adding-examples.md)

Co-authored-by: JJ Kasper <[email protected]>
Leverages `AsyncLocalStorage` when available for handling static generation context and falls back to requiring render to be isolated when `AsyncLocalStorage` is not available. 

Note: most changes are spacing so toggling to ignore spacing may make reviewing easier
@pull pull bot requested a review from timneutkens as a code owner September 21, 2022 00:17
@pull pull bot added the ⤵️ pull label Sep 21, 2022
timneutkens and others added 23 commits September 21, 2022 10:50
I have next-swc compiled locally inside the folder so there're a lot of files there (totally unexpected). And then the `fs.copy` takes 28433 ms... by filtering it out it's only 1s.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
- Updates supertokens-node and supertokens-auth-react dependencies.
- Uses separate Email verification recipe instead of using it inside the
ThirdPartyEmailPassword recipe (as per the update)
- Uses <SessionAuth> guard instead of <ThirdPartyEmailPassword> guard
(as per the lib update)
## Changes

see commits

## Documentation / Examples

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

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
This adds a test case verifying client transitions to `/404` or
`/_error` are working properly.

Test deployment with patched reproduction can be seen here
https://router-bug-repro-4bozmev4p-ijjk-testing.vercel.app/blocked

Closes: #40667
This PR changes the external module resolution to eagerly bundle
node_modules, and some specific Next.js internal modules, if on the
`WEBPACK_LAYERS.server` layer. While resolving corresponding packages,
we use the `react-server` export condition (fallbacks to default).

A follow-up PR will be adding a Next.js option to opt-out specific
packages from being bundled on the server layer.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a 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/examples/adding-examples.md)
`config.experimental.serverComponents` is currently required to be
enabled or disabled together with `config.experimental.appDir` (which
means `serverComponents === appDir` otherwise it will throw) so there is
no reason to keep both of them. This PR removes `serverComponents` from
Next.js and only rely on `appDir` instead.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
For some context:
https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509

Transforms call expressions of imported functions, only affects imports
specified in SWC options. Each argument is turned into JSON and appended
to the import as a query. The query can be read in a webpack loader,
i.e. the call expression is only evaluated at build time

### Transform
From
```tsx
import { Fn } from "package"
const res = Fn(1, "2", { three: true })
```
To
```tsx
import res from 'package?Fn;1;"2";{"three":true}'
```

### Visitors
#### NextFontLoaders (mod.rs)
Creates several visitors that updates the state and reports errors. This
is where the AST is mutated. After all other visitors are done the call
expressions and original imports are removed. The newly generated
imports are added instead.

#### FontFunctionsCollector
Finds imports from the specified packages. Function calls of these
imports should be transformed.

#### FontImportsGenerator
Creates import declarations, call expression arguments are turned into
JSON and added to the import as a query.

#### FindFunctionsOutsideModuleScope
Makes sure that there's no reference of the functions anywhere else but
the module scope.

Co-authored-by: JJ Kasper <[email protected]>
For some context:
https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509

Adds `@next/font` package.

`scripts/update-google-fonts.js` generates functions and metadata for
all available google fonts. The metadata is used in `loader.ts` to
validate font options (from #40221). It then fetches the CSS from google
fonts, downloads the font files and emits them as static assets.

The actual integration with `packages/next` and integration tests
depends on #40221, will follow up with new PR.

Co-authored-by: JJ Kasper <[email protected]>
Closes #40775

<!--
Thanks for opening a PR! Your contribution is much appreciated.
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 a 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 a 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/examples/adding-examples.md)
New scoped packages need to be initialized as public so this adds the
`publishConfig` for this.

Fixes:
https://github.com/vercel/next.js/actions/runs/3101494786/jobs/5023375720
## Changes

- Updated dependencies
- Migrated to Typescript
- Added additional router use cases

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
For app edge SSR, we don't need any internal pages for it since it's
handled by app-renderer. This results around reducing 20KB from app edge
SSR

# Changes
* Strip those internal pages modules when it's in app edge SSR
* Minimize edge SSR chunk to see the tree-shake result
* Add bundle analyzer with switcher in stats-app for testing. Using
`TEST_ANAYLYSE=1` to build stats-app for testing
## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
For some context:
[https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509](https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509)

Continuation of #40221 and #40227

Adds `experimental.fontLoaders`.

SWC next-font-loaders (#40221) transforms font loader (e.g. #40227) call
expressions into an import with the function call arguments as a query.

The imports will be matched by `next-font-loader`. It runs the
configured font loaders - emits font files and returns CSS. Exports are
added, and the font-family is made locally scoped. The returned CSS is
turned into a CSS module with `css-loader` which lets you consume the
font-family.

`FontLoaderManifestPlugin` creates a manifest of the preloaded font
files for each entrypoint. Preload/preconnect are then added in
`_document.tsx` if any font files were found for that path.

Co-authored-by: JJ Kasper <[email protected]>
…r` is true (#40702)

Fixes #40463

Could use some help figuring out where to add a test! I looked around
and found
[`jest-next-swc.test.ts`](https://github.com/vercel/next.js/blob/canary/test/unit/jest-next-swc.test.ts),
but I don't think I can use that to test this fix. Anyways, from my
local testing this PR seems to fix the issue.

Co-authored-by: JJ Kasper <[email protected]>
philippbosch and others added 29 commits September 22, 2022 09:04
…cs (#40785)

It looks like the code snippet was copied over from
https://github.com/bvaughn/react-error-boundary but the `ErrorBoundary`
component on this docs page does not have a `FallbackComponent` prop but
renders the error message content itself.


## Documentation / Examples

- [X] Make sure the linting passes by running `pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
The manifest currently gets added without file extensions.
Let's open the deploy link in a new window so the link isn't blocked
when running an an iframe, such as Stackblitz.

Previously, this would print the following error:

> Refused to display 'https://vercel.com/' in a frame because it set
'X-Frame-Options' to 'deny'
Moves font related types to `next/font` so they can be reused in font
loaders.

Adds an argument to font loaders, the relative path from the app root to
the module consuming the loader. Needed for resolving local files
relative to the module calling it. Also used to improve error message.

Adds `@next/font/local` font loader. Similar to `@next/font/google` but
used to host locally downloaded font files.
This fixes anchor link in `static-html-export.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
This updates our `publish-native` script to tolerate the already
published npm error so that we can retry publishing on an `npm` [service
error like noticed
here](https://github.com/vercel/next.js/actions/runs/3108335849/jobs/5037966318#step:10:2076).
We probably want to migrate away from using `lerna` for publishing the
non-swc packages as well so that we can retry there as well but will
investigate that in a follow-up.

x-ref:
https://github.com/vercel/next.js/actions/runs/3108335849/jobs/5038069555
This updates our `publish-release` script to bypass lerna so that we can
retry publishing automatically when there is an npm error and tolerate
non-fatal publish errors like already existing published versions.
Currently this will only allow publishing a canary release to ensure it
is working as expected and in a follow-up we can enable the stable
publish handling.

Separately we can investigate moving canaries away from `npm` to reduce
the number of versions being created there.

x-ref: #40812
x-ref:
https://github.com/vercel/next.js/actions/runs/3108735543/jobs/5038717354#step:10:2332
x-ref:
https://github.com/vercel/next.js/actions/runs/3108335849/jobs/5038069555
Follow-up to #40815 ensures we
skip attempting to publish private packages like `next-swc`

x-ref:
https://github.com/vercel/next.js/actions/runs/3109438515/jobs/5039954716
…40645)

Next.js-hydration now triggered after gtag is initialized. Fixed by adding _document.js and appropriate script elements.
---
## Documentation / Examples

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

Next.js-hydration now triggered after gtag is initialized.
I had the same issue, so the fix that worked for me was pulled from this
thread https://stackoverflow.com/a/71870995

I have been experiencing the same problem lately with NextJS and i am
not sure if my observations are applicable to other libraries. I had
been wrapping my components with an improper tag that is, NextJS is not
comfortable having a p tag wrapping your divs, sections etc so it will
yell "Hydration failed because the initial UI does not match what was
rendered on the server". So I solved this problem by examining how my
elements were wrapping each other. With material UI you would need to be
cautious for example if you use a Typography component as a wrapper, the
default value of the component prop is "p" so you will experience the
error if you don't change the component value to something semantic. So
in my own opinion based on my personal experience the problem is caused
by improper arrangement of html elements and to solve the problem in the
context of NextJS one will have to reevaluate how they are arranging
their html element

<!--
Thanks for opening a PR! Your contribution is much appreciated.
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:
-->


## Documentation / Examples

- [x] 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/examples/adding-examples.md)

Co-authored-by: JJ Kasper <[email protected]>
This updates to ensure we properly error during static generation when a
non-dynamic SSR error is thrown so that unexpected errors are not
tolerated. This also fixes the static generation async storage not being
shared correctly due to different instances being created during
bundling.
Allow `export const font = Font()` syntax

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
The latest version of Cypress no longer supports `cypress.json`, use `cypress.config.js` instead. See details in the Cypress [docs](https://docs.cypress.io/guides/references/configuration).
We use the variable "SANITY_REVALIDATE_SECRET" on the index page, but
the .env.local.example does not have this variable.

<!--
Thanks for opening a PR! Your contribution is much appreciated.
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 a 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 a 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/examples/adding-examples.md)
## Changes

- Updated dependencies
- Migrated to typescript
- Removed `div` in favour of Fragment
- Replaces `var` with `let` since we don't need global hoisting here

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
This PR update swc crates to
swc-project/swc@8a5ed1e


Noticeable changes include

 - TS 4.9 support.
 - Huge performance improvement (of every api).
When navigating from app to pages, we do a flight render on the server
to generate the redirected path. However due to our new bundling
strategy we can't use the bundled `ComponentMod.renderToReadableStream`
because the component is now a regular component, not a RSC. In that
case we have to import the unbundled flight server.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
…on (#40874)

As per @sebmarkbage's recommendation.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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 a 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/examples/adding-examples.md)
Follow-up for #40739 to add an option to opt-out specific packages from being bundled.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a 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`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a 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/examples/adding-examples.md)
@pull pull bot merged commit f6e37fd into MLH-Fellowship:canary Sep 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.