Commit Graph
17 Commits
Author SHA1 Message Date
Josh Story 4ea063b56f refactor isHostResourceType to not receive the context from reconciler and not leak types (#25610)
type validateDOMNesting
move `isHostResourceType` to ReactDOMHostConfig
type `AncestorInfo`
refactor `resourceFormOnly` into `ancestorInfo.containerTagInScope`
provide hostContext from reconciler
2022-11-01 17:14:46 -07:00
Josh Story 5f7ef8c4cb [Float] handle resource Resource creation inside svg context (#25599)
`title` is a valid element descendent of `svg`. this PR adds a
prohibition on turning titles in svg into Resources.

This PR also adds additional warnings if you render something that is
almost a Resource inside an svg.
2022-11-01 14:57:45 -07:00
Josh Story 17204056d5 [Float] fix coordination of resource identity and hydration (#25569)
there are a few bugs where dom representations from SSR aren't
identified as Resources when they should be.

There are 3 semantics

Resource -> hoist to head, deduping, etc...
hydratable Component -> SSR'd and hydrated in place
non-hydratable Component -> never SSR'd, never hydrated, always inserted
on the client

this last category is small
(non stylesheet) links with onLoad and/or onError
async scripts with onLoad and/or onError

The reason we have this distinction for now is we need every SSR'd async
script to be assumable to be a Resource. we don't currently encode
onLoad on the server and so we couldn't otherwise tell if an async
script is a Resource or is an async script with an onLoad which would
not be a resource. To avoid this ambiguity we never emit the scripts in
SSR and assume they need to be inserted on the client.

We can explore changes to these semantics in the future or possibly
encode some identifier when we want to opt out of resource semantics but
still SSR the link or script.
2022-10-26 19:53:29 -07:00
Josh Story 61f9b5e97b [Float] support <base> as Resource (#25546)
keys off `target` and `href`.
prepends on insertion similar to title.
only flushes on the server in the shell (should probably add a warning
if there are any to flush in a boundary)
2022-10-23 15:03:52 -07:00
Josh Story 0c11baa6ab add warnings for non-resources rendered outside body or head (#25532)
Adds some clarifying warnings when you render a component that is almost
a resource but isn't and the element was rendered outside the main
document tree (outside of `<body>` or `<head>`
2022-10-22 15:19:42 -07:00
Josh Story d1ced9fd58 [Float] support all links as Resources (#25515)
stacked on https://github.com/facebook/react/pull/25514

This PR adds support for any type of Link as long as it has a string rel
and href and does not include an onLoad or onError property.

The semantics for generic link resources matches other head resources,
they will be inserted and removed as their ref counts go positive and
back to zero.

Keys are based on rel, href, sizes, and media.

on the server preconnect and prefetch-dns are privileged and will emit
near the start of the stream.
2022-10-21 22:38:24 -07:00
Josh Story 973b90bdf6 [Float] support meta tags as Resources (#25514)
Stacked on #25508

This PR adds meta tags as a resource type.

metas are classified in the following priority

1. charset
2. http-equiv
3. property
4. name
5. itemprop

when using property, there is special logic for og type properties where
a `property="og:image:height"` following a `property="og:image"` will
inherit the key of the previous tag. this relies on timing effects to
stay consistent so when mounting new metas it is important that if
structured properties are being used all members of a structure mount
together. This is similarly true for arrays where the implicit
sequential order defines the array structure. if you need an array you
need to mount all array members in the same pass.
2022-10-21 15:21:29 -07:00
Josh Story 1f7a2f577b [Float] support title tags as Resources (#25508)
Adds a category of Resources of type `head` which will be used to track
the tags that go into the <head>

Currently only implements for `<title>`.

titles are keyed off their textContent so each time the title changes a
new resource will be created. Currently insertion is done by prepending
in the <head>. The argument here is that the newest title should "win"
if there are multiple rendered. This also helps when a navigation or
update causes a server rendered title to hang around but it is not the
most recent one.
2022-10-20 23:13:32 -07:00
Andrew Clark 9cdf8a99ed [Codemod] Update copyright header to Meta (#25315)
* Facebook -> Meta in copyright

rg --files | xargs sed -i 's#Copyright (c) Facebook, Inc. and its affiliates.#Copyright (c) Meta Platforms, Inc. and affiliates.#g'

* Manual tweaks
2022-10-18 11:19:24 -04:00
Josh Story 4494f2a86f [Float] add support for scripts and other enhancements (#25480)
* float enhance!!!

Support preinit as script
Support resources from async scripts
Support saving the precedence place when rendering the shell

There was a significant change to the flushing order of resources which follows the general principal of...
1. stuff that blocks display
2. stuff that we know will be used
3. stuff that was explicitly preloaded

As a consequence if you preinit a style now it won't automatically flush in the shell unless you actually depend on it in your tree. To avoid races with precedence order we now emit a tag that saves the place amongst the precedence hierarchy so late insertions still end up where they were intended

There is also a novel hydration pathway for certain tags. If you render an async script with an onLoad or onError it will always treat it like an insertion rather than a hydration.

* restore preinit style flushing behavior and nits
2022-10-17 14:00:20 -07:00
Josh Story 618388bc32 [Float] Support script preloads (#25432)
* support script preloads

* gates
2022-10-05 09:47:35 -07:00
Josh Story 2872a26e14 track resources in different roots separately (#25388)
* track resources in different roots separately

* flow types

* add test demonstrating portals deep into shadowRoots

* revert hostcontext changes

* lints

* funge style cache key a la ReactDOMComponentTree

* hide hacks in componentTree
2022-10-04 16:11:15 -07:00
Jan Kassens 3b6826ed9e Flow: inference_mode=constrain_writes
This mode is going to be the new default in Flow going forward.
There was an unfortuante large number of suppressions in this update.

More on the changes can be found in this [Flow blog post](https://medium.com/flow-type/new-flow-language-rule-constrained-writes-4c70e375d190).

Added some of the required annotations using the provided codemod:

```sh
node_modules/.bin/flow codemod annotate-declarations --write .
```

ghstack-source-id: 0b168e1b23
Pull Request resolved: https://github.com/facebook/react/pull/25422
2022-10-04 15:49:48 -04:00
Jan Kassens aed33a49cc Flow upgrade to 0.185
ghstack-source-id: 8104710c96
Pull Request resolved: https://github.com/facebook/react/pull/25420
2022-10-04 13:50:59 -04:00
Jan Kassens f02a5f5c79 Flow upgrade to 0.182
ghstack-source-id: b9bb8c1560
Pull Request resolved: https://github.com/facebook/react/pull/25419
2022-10-04 13:37:58 -04:00
Jan Kassens 64fe791be8 Flow upgrade to 0.146
This upgrade made more expressions invalidate refinements. In some
places this lead to a large number of suppressions that I automatically
suppressed and should be followed up on when the code is touched.
I think most of them might require either manual annotations or moving
a value into a const to allow refinement.

ghstack-source-id: a45b40abf0
Pull Request resolved: https://github.com/facebook/react/pull/25410
2022-10-04 11:01:50 -04:00
Josh Story 7b25b961df [Fizz/Float] Float for stylesheet resources (#25243)
* [Fizz/Float] Float for stylesheet resources

This commit implements Float in Fizz and on the Client. The initial set of supported APIs is roughly

1. Convert certain stylesheets into style Resources when opting in with precedence prop
2. Emit preloads for stylesheets and explicit preload tags
3. Dedupe all Resources by href
4. Implement ReactDOM.preload() to allow for imperative preloading
5. Implement ReactDOM.preinit() to allow for imperative preinitialization

Currently supports
1. style Resources (link rel "stylesheet")
2. font Resources (preload as "font")

later updates will include support for scripts and modules
2022-09-30 16:14:04 -07:00