Commit Graph

44 Commits

Author SHA1 Message Date
Sebastian Markbåge
a511dc7090 Error for deferred value and transition in Server Components (#20657) 2021-01-25 13:58:47 -08:00
Sebastian Markbåge
fb3f63f1ab Remove lazy invokation of segments (#20656)
This is a remainder from Blocks when these were separate query functions.
2021-01-25 13:04:36 -08:00
Andrew Clark
efc57e5cbb Add built-in Suspense cache with support for invalidation (refreshing) (#20456) 2020-12-18 10:57:24 -08:00
Dan Abramov
daf38ecdfc [Flight] Use lazy reference for existing modules (#20445) 2020-12-11 22:45:18 +00:00
Dan Abramov
1b5ca99063 Fix module ID deduplication (#20406) 2020-12-08 13:19:59 +00:00
Sebastian Markbåge
5fd9db732d [Flight] Rename react-transport-... packages to react-server-... (#20403)
* Move files

* Update paths

* Rename import variables

* Rename /server to /writer

This is mainly because "React Server Server" is weird so we need another
dimension.

* Use "react-server" convention to enforce that writer is only loaded in a server
2020-12-08 08:08:57 -05:00
Dan Abramov
e23673b511 [Flight] Add getCacheForType() to the dispatcher (#20315)
* Remove react/unstable_cache

We're probably going to make it available via the dispatcher. Let's remove this for now.

* Add readContext() to the dispatcher

On the server, it will be per-request.

On the client, there will be some way to shadow it.

For now, I provide it on the server, and throw on the client.

* Use readContext() from react-fetch

This makes it work on the server (but not on the client until we implement it there.)

Updated the test to use Server Components. Now it passes.

* Fixture: Add fetch from a Server Component

* readCache -> getCacheForType<T>

* Add React.unstable_getCacheForType

* Add a feature flag

* Fix Flow

* Add react-suspense-test-utils and port tests

* Remove extra Map lookup

* Unroll async/await because build system

* Add some error coverage and retry

* Add unstable_getCacheForType to Flight entry
2020-12-03 03:44:56 +00:00
Sebastian Markbåge
163199d8cc Dedupe module id generation (#20172) 2020-11-10 19:58:58 -08:00
Sebastian Markbåge
76a6dbcb9a [Flight] Encode Symbols as special rows that can be referenced by models … (#20171)
* Encode Symbols as special rows that can be referenced by models

If a symbol was extracted from Symbol.for(...) then we can reliably
recreate the same symbol on the client.

S123:"react.suspense"
M456:{mySymbol: '$123'}

This doesn't suffer from the XSS problem because you have to write actual
code to create one of these symbols. That problem is only a problem because
values pass through common other usages of JSON which are not secure.

Since React encodes its built-ins as symbols, we can now use them as long
as its props are serializable. Like Suspense.

* Refactor resolution to avoid memo hack

Going through createElement isn't quite equivalent for ref and key in props.

* Reuse symbol ids that have already been written earlier in the stream
2020-11-10 19:56:50 -08:00
Sebastian Markbåge
16e6dadba6 Encode throwing server components as lazy throwing references (#20217)
This ensures that if this server component was the child of a client
component that has an error boundary, it doesn't trigger the error until
this gets rendered so it happens as deep as possible.
2020-11-10 16:35:27 -08:00
Sebastian Markbåge
c3e20f18fe Add Relay specific React Native build of Flight (#20149)
This adds a new dimension similar to dom-relay. It's different from
"native" which would be Flight for RN without Relay.

This has some copy-pasta that's the same between the two Relay builds but
the key difference will be Metro and we're not quite sure what other
differences there will be yet.
2020-11-02 18:49:48 -08:00
Sebastian Markbåge
56e9feead0 Remove Blocks (#20138)
* Remove Blocks

* Remove Flight Server Runtime

There's no need for this now that the JSResource is part of the bundler
protocol. Might need something for Webpack plugin specifically later.

* Devtools
2020-10-30 23:03:45 -07:00
Sebastian Markbåge
3fbd47b862 Serialize pending server components by reference (lazy component) (#20137)
This now means that if a server component suspends, its value becomes a
React.lazy object. I.e. the element that rendered the server component
gets replaced with a lazy node.

As of #19033 lazy objects can be rendered in the node position. This allows
us to suspend at the location of the server component while we're waiting
on its content.

Now server components has the same capabilities as Blocks to progressively
reveal its content.
2020-10-30 17:19:46 -07:00
Sebastian Markbåge
930ce7c15a Allow values to be encoded by "reference" to a value rather than the value itself (#20136)
These references are currently transformed into React.lazy values. We can use these in
React positions like element type or node position.

This could be expanded to a more general concept like Suspensey Promises, asset references or JSResourceReferences.

For now it's only used in React Element type position.

The purpose of these is to let you suspend deeper in the tree.
2020-10-30 13:02:03 -07:00
Sebastian Markbåge
ffd8423356 [Flight] Add support for Module References in transport protocol (#20121)
* Refactor Flight to require a module reference to be brand checked

This exposes a host environment (bundler) specific hook to check if an
object is a module reference. This will be used so that they can be passed
directly into Flight without needing additional wrapper objects.

* Emit module references as a special type of value

We already have JSON and errors as special types of "rows". This encodes
module references as a special type of row value. This was always the
intention because it allows those values to be emitted first in the stream
so that as a large models stream down, we can start preloading as early
as possible.

We preload the module when they resolve but we lazily require them as they
are referenced.

* Emit module references where ever they occur

This emits module references where ever they occur. In blocks or even
directly in elements.

* Don't special case the root row

I originally did this so that a simple stream is also just plain JSON.

However, since we might want to emit things like modules before the root
module in the stream, this gets unnecessarily complicated. We could add
this back as a special case if it's the first byte written but meh.

* Update the protocol

* Add test for using a module reference as a client component

* Relax element type check

Since Flight now accepts a module reference as returned by any bundler
system, depending on the renderer running. We need to drastically relax
the check to include all of them. We can add more as we discover them.

* Move flow annotation

Seems like our compiler is not happy with stripping this.

* Some bookkeeping bug

* Can't use the private field to check
2020-10-29 17:57:31 -07:00
Dan Abramov
f021a983aa Bump versions for 17 (#20062) 2020-10-20 21:41:18 +01:00
Sebastian Markbåge
0a4c7c5651 [Flight] Don't warn for key, but error for ref (#19986)
* Improve error message by expanding the object in question

* Don't warn for key/ref getters

* Error if refs are passed in server components or to client components
2020-10-08 17:02:23 -07:00
Sebastian Markbåge
40c52de960 [Flight] Add Runtime Errors for Non-serializable Values (#19980)
* Error on encoding non-serializable props

* Add DEV time warnings to enforce that values are plain objects
2020-10-08 11:11:15 -07:00
Joseph Savona
d38ec17b1d [Flight] Set dispatcher for duration of performWork() (#19776) 2020-09-07 19:41:22 -04:00
Dan Abramov
c1ac052158 [Flight] Support more element types and Hooks for Server and Hybrid Components (#19711)
* Shim support for more element types

* Shim commonly used Hooks that are safe

* Flow

* Oopsie
2020-08-27 20:19:13 +01:00
Brian Vaughn
a89854bc93 Fix Suspense-wrapping heuristic (and bump version numbers) (#19373)
* Fixed suspense wrapping heuristic

* Bump package numbers 16.13.1 -> 17.0.0-alpha.0 to fix DevTools Suspense heuristic
2020-07-15 12:25:27 -04:00
Sebastian Markbåge
64d4b84204 Rename Flight to Transport (#18808)
* Rename Flight to Transport

Flight is still the codename for the implementation details (like Fiber).

However, now the public package is react-transport-... which is only
intended to be used directly by integrators.

* Rename names
2020-05-03 11:33:48 -07:00
Sebastian Markbåge
e2dd30898e [Flight] Lazily parse models and allow any value to suspend (#18476)
* Lazily initialize models as they're read intead of eagerly when received

This ensures that we don't spend CPU cycles processing models that we're
not going to end up rendering.

This model will also allow us to suspend during this initialization if
data is not yet available to satisfy the model.

* Refactoring carefully to ensure bundles still compile to something optimal

* Remove generic from Response

The root model needs to be cast at one point or another same as othe
chunks. So we can parameterize the read instead of the whole Response.

* Read roots from the 0 key of the map

The special case to read the root isn't worth the field and code.

* Store response on each Chunk

Instead of storing it on the data tuple which is kind of dynamic, we store
it on each Chunk. This uses more memory. Especially compared to just making
initializeBlock a closure, but overall is simpler.

* Rename private fields to underscores

Response objects are exposed.

* Encode server components as delayed references

This allows us to stream in server components one after another over the
wire. It also allows parallelizing their fetches and resuming only the
server component instead of the whole parent block.

This doesn't yet allow us to suspend deeper while waiting on this content
because we don't have "lazy elements".
2020-04-03 14:58:02 -07:00
Sebastian Markbåge
3e94bce765 Enable prefer-const lint rules (#18451)
* Enable prefer-const rule

Stylistically I don't like this but Closure Compiler takes advantage of
this information.

* Auto-fix lints

* Manually fix the remaining callsites
2020-04-01 12:35:52 -07:00
Sebastian Markbåge
ce6fe50b01 Add server-runtime to create Server Blocks (#18392)
This is equivalent to the jsx-runtime in that this is what the compiled
output on the server is supposed to target.

It's really just the same code for all the different Flights, but they
have different types in their arguments so each one gets their own entry
point. We might use this to add runtime warnings per entry point.

Unlike the client-side React.block call this doesn't provide the factory
function that curries the load function. The compiler is expected to wrap
this call in the currying factory.
2020-03-25 19:03:31 -07:00
Sebastian Markbåge
a317bd033f Flip the arguments of Blocks and make the query optional (#18374)
* Flip the arguments of Blocks and make the query optional

* Rename Query to Load
2020-03-24 10:58:23 -07:00
Sebastian Markbåge
a56309fb88 [Flight] Integrate Blocks into Flight (#18371)
* Resolve Server-side Blocks instead of Components

React elements should no longer be used to extract arbitrary data but only
for prerendering trees.

Blocks are used to create asynchronous behavior.

* Resolve Blocks in the Client

* Tests

* Bug fix relay JSON traversal

It's supposed to pass the original object and not the new one.

* Lint

* Move Noop Module Test Helpers to top level entry points

This module has shared state. It needs to be external from builds.

This lets us test the built versions of the Noop renderer.
2020-03-23 17:53:45 -07:00
Sebastian Markbåge
c0cd1be908 [Flight] Move bundler configs to use Suspense instead of returning thenable (#18367)
* Move bundler configs to use suspense instead of returning thenable

* Fix some Flow types
2020-03-21 22:28:36 -07:00
Sebastian Markbåge
8206b4b864 Wire up bundler configs (#18334)
This allows different flight server and clients to have different configs
depending on bundler to serialize and resolve modules.
2020-03-18 12:18:34 -07:00
Sebastian Markbåge
dc7eedae3c Encode server rendered host components as array tuples (#18273)
This replaces the HTML renderer with instead resolving host elements into
arrays tagged with the react.element symbol. These turn into proper
React Elements on the client.

The symbol is encoded as the magical value "$". This has security implications
so this special value needs to remain escaped for other strings.

We could just encode the element as {$$typeof: "$", key: key props: props}
but that's a lot more bytes. So instead I encode it as:
["$", key, props] and then convert it back.

It would be nicer if React's reconciler could just accept these tuples.
2020-03-11 09:48:02 -07:00
Sebastian Markbåge
99d7371863 [Flight] Split Streaming from Relay Implemenation (#18260)
* Add ReactFlightServerConfig intermediate

This just forwards to the stream version of Flight which is itself forked
between Node and W3C streams.

The dom-relay goes directly to the Relay config though which allows it to
avoid the stream part of Flight.

* Separate streaming protocol into the Stream config

* Split streaming parts into the ReactFlightServerConfigStream

This decouples it so that the Relay implementation doesn't have to encode
the JSON to strings. Instead it can be fed the values as JSON objects and
do its own encoding.

* Split FlightClient into a basic part and a stream part

Same split as the server.

* Expose lower level async hooks to Relay

This requires an external helper file that we'll wire up internally.
2020-03-10 14:55:04 -07:00
Sebastian Markbåge
bdc5cc4635 Add Relay Flight Build (#18242)
* Rename to clarify that it's client-only

* Rename FizzStreamer to FizzServer for consistency

* Rename react-flight to react-client/flight

For consistency with react-server. Currently this just includes flight
but it could be expanded to include the whole reconciler.

* Add Relay Flight Build

* Rename ReactServerHostConfig to ReactServerStreamConfig

This will be the config specifically for streaming purposes.
There will be other configs for other purposes.
2020-03-07 11:23:30 -08:00
Sebastian Markbåge
7a1691cdff Refactor Host Config Infra (getting rid of .inline*.js) (#18240)
* Require deep for reconcilers

* Delete inline* files

* Delete react-reconciler/persistent

This no longer makes any sense because it react-reconciler takes
supportsMutation or supportsPersistence as options. It's no longer based
on feature flags.

* Fix jest mocking

* Fix Flow strategy

We now explicitly list which paths we want to be checked by a renderer.
For every other renderer config we ignore those paths.

Nothing is "any" typed. So if some transitive dependency isn't reachable
it won't be accidentally "any" that leaks.
2020-03-06 16:20:42 -08:00
Dan Abramov
d72700ff5a Remove runtime dependency on prop-types (#18127)
* Remove runtime dep on prop-types

* Fix test
2020-02-28 01:21:54 +00:00
Sebastian Markbåge
549e418830 Move remaining things to named exports (#18165)
* Move remaining things to named exports

The interesting case here is the noop renderers. The wrappers around the
reconciler now changed to use a local export that gets mutated.

ReactNoop and ReactNoopPersistent now have to destructure the object to
list out the names it's going to export. We should probably refactor
ReactNoop away from createReactNoop. Especially since it's also not Flow
typed.

* Switch interactions to star exports

This will have esModule compatibility flag on them. They should ideally
export default instead.
2020-02-27 17:18:55 -08:00
Sebastian Markbåge
f9c0a45441 Convert the rest of react-dom and react-test-renderer to Named Exports (#18145)
Nothing interesting here except that ReactShallowRenderer currently exports
a class with a static method instead of an object.

I think the public API is probably just meant to be createRenderer but
currently the whole class is exposed. So this means that we have to keep
it as default export. We could potentially also expose a named export for
createRenderer but that's going to cause compatibility issues.

So I'm just going to make that export default.

Unfortunately Rollup and Babel (which powers Jest) disagree on how to
import this. So to make it work I had to move the jest tests to imports.

This doesn't work with module resetting. Some tests weren't doing that
anyway and the rest is just testing ReactShallowRenderer so meh.
2020-02-26 18:04:32 -08:00
Dan Abramov
e706721490 Update Flow to 0.84 (#17805)
* Update Flow to 0.84

* Fix violations

* Use inexact object syntax in files from fbsource

* Fix warning extraction to use a modern parser

* Codemod inexact objects to new syntax

* Tighten types that can be exact

* Revert unintentional formatting changes from codemod
2020-01-09 14:50:44 +00:00
Laura buns
9ac42dd074 Remove the condition argument from warning() (#17568)
* prep for codemod

* prep warnings

* rename lint rules

* codemod for ifs

* shim www functions

* Handle more cases in the transform

* Thanks De Morgan

* Run the codemod

* Delete the transform

* Fix up confusing conditions manually

* Fix up www shims to match expected API

* Also check for low-pri warning in the lint rule
2019-12-11 03:28:14 +00:00
Sebastian Markbåge
39dbb14da3 [Flight] Move Flight DOM to a Webpack Specific Package (#17372)
* Move Flight DOM to Webpack Specific Packagee

We'll have Webpack specific coupling so we need to ensure that it can be
versioned separately from various Webpack versions. We'll also have builds
for other bundlers in the future.

* Move to peerDep

* Move DOM Flight Tests

* Merge ReactFlightIntegration into ReactFlightDOM

This was an integration test. We can add to it.

* Fix fixture paths
2019-11-15 11:46:07 -08:00
Sebastian Markbåge
dee03049f5 [Flight] Basic Streaming Suspense Support (#17285)
* Return whether to keep flowing in Host config

* Emit basic chunk based streaming in the Flight server

When something suspends a new chunk is created.

* Add reentrancy check

The WHATWG API is designed to be pulled recursively.

We should refactor to favor that approach.

* Basic streaming Suspense support on the client

* Add basic suspense in example

* Add comment describing the protocol that the server generates
2019-11-06 09:48:34 -08:00
Dan Abramov
f50f39b55f [Flight] Better compat with http.createServer (#17289) 2019-11-06 17:10:26 +00:00
Sebastian Markbåge
f4148b2561 [Flight] Move around the Server side a bit (#17251)
* Rename ReactFlightStreamer -> ReactFlightServer

* Unify Browser/Node stream tests into one file and use the client reader

* Defer to the actual ReactDOM for HTML rendering for now

This will need to use a variant of Fizz to do inline SSR in Flight.
However, I don't want to build the whole impl right now but also don't
want to exclude the use case yet. So I outsource it to the existing
renderer. Ofc, this doesn't work with Suspense atm.
2019-11-01 17:39:24 -07:00
Sebastian Markbåge
fadc97167f [Flight] Add Client Infrastructure (#17234)
* Change demo to server

* Expose client in package.json

* Reorganize tests

We don't want unit tests but instead test how both server and clients work
together. So this merges server/client test files.

* Fill in the client implementation a bit

* Use new client in fixture

* Add Promise/Uint8Array to lint rule

I'll probably end up deleting these deps later but they're here for now.
2019-11-01 16:05:07 -07:00
Sebastian Markbåge
f4e974d26e Add Experimental Flight Infrastructure (#16398)
* Add Flight Build and Unify HostFormat Config between Flight and Fizz

* Add basic resolution of models

* Add basic Flight fixture

Demonstrates the streaming protocol.

* Rename to flight-server to distinguish from the client parts

* Add Flight Client package and entry point

* Fix fixture
2019-10-29 14:45:47 -07:00