Allow passing client exports through async code

[sophiebits]

No description provided.

[react-sizebot]

Comparing: da6c23a...91b3cc6

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	164.42 kB	164.42 kB	=	51.69 kB	51.69 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	166.86 kB	166.86 kB	=	52.34 kB	52.34 kB
facebook-www/ReactDOM-prod.classic.js	=	564.45 kB	564.45 kB	=	99.40 kB	99.40 kB
facebook-www/ReactDOM-prod.modern.js	=	548.24 kB	548.24 kB	=	96.71 kB	96.71 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js	+0.45%	4.19 kB	4.21 kB	+0.33%	1.50 kB	1.51 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js	+0.45%	4.19 kB	4.21 kB	+0.33%	1.50 kB	1.51 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js	+0.45%	4.19 kB	4.21 kB	+0.33%	1.50 kB	1.51 kB

Generated by 🚫 dangerJS against 91b3cc6

[sebmarkbage]

This is a little tricky because Promise.resolve(...) is correct since it yields another Promise but then awaiting it is not correct.

Imagine the client export is Promise<string>, if you await it before passing it along it's supposed to unwrap it.

<ClientComponent text={await ClientModule.asyncText} />

Type checking this would pass because text would accept string and await asyncText unwraps the promise before passing it. The client reference is supposed to be a reference that unwraps it on the client before passing it along which this wouldn't do. So it's a runtime error.

We only really special case unwrapping shallowly for the module object since it's used to polyfill ESM.

[sophiebits]

Well what I ran into is

import { Client, somePojo } from './client.js';

async function getThing() {
  if (cond) {
    return await fetch(...);
  } else {
    return somePojo;
  }
}

async function App() {
  const thing = await getThing();
  return <Client data={thing} />;
}

which felt like it should work. I could make a second async flag on the client reference that awaits the named export. Does that sound sensible?

[sebmarkbage]

Not really, we have to put a limit to how much we encode in this otherwise we might as well have infinite dotting into things but the further you go, the more confusing it gets and the more we have to encode. The async module thing is only applicable to CommonJS and not ESM. So it's already not a general purpose mechanism.

The semantics are really that you can just pass an identifier from the import to the client, without touching it.

Because this is syntactic, it doesn't feel like you are but because of the weird Promise resolution it does.

Maybe we need a better error message - but I feel like the error is still appropriate.

A possible workaround is wrapping it in an object like return {data: somePojo} ... (await getThing()).data.

[sophiebits]

Sad. Thanks.