-
Notifications
You must be signed in to change notification settings - Fork 46.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Flight] provide property descriptors for client references (#27328)
Client reference proxy should implement getOwnPropertyDescriptor. One practical place where this shows up is when consuming CJS module.exports in ESM modules. Node creates named exports it statically infers from the underlying source but it only sets the named export if the CJS exports hasOwnProperty. This trap will allow the proxy to respond affirmatively. I did not add unit tests because contriving the ESM <-> CJS scenario in Jest is challenging. I did add new components to the flight fixture which demonstrate that the named exports are properly constructed with the client reference whereas they were not before.
- Loading branch information
Showing
6 changed files
with
213 additions
and
127 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
|
|
||
| let LazyDynamic = React.lazy(() => | ||
| import('./Dynamic.js').then(exp => ({default: exp.Dynamic})) | ||
| ); | ||
|
|
||
| export function Client() { | ||
| const [loaded, load] = React.useReducer(() => true, false); | ||
|
|
||
| return loaded ? ( | ||
| <div> | ||
| loaded dynamically: <LazyDynamic /> | ||
| </div> | ||
| ) : ( | ||
| <div> | ||
| <button onClick={load}>Load dynamic import Component</button> | ||
| </div> | ||
| ); | ||
| } |
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,12 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
|
|
||
| export function Dynamic() { | ||
| return ( | ||
| <div> | ||
| This client component should be loaded in a single chunk even when it is | ||
| used as both a client reference and as a dynamic import. | ||
| </div> | ||
| ); | ||
| } |
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,11 @@ | ||
| 'use client'; | ||
|
|
||
| var React = require('react'); | ||
|
|
||
| function Note() { | ||
| return 'This component was exported on a commonJS module and imported into ESM as a named import.'; | ||
| } | ||
|
|
||
| module.exports = { | ||
| Note, | ||
| }; |
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
Oops, something went wrong.