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

[Float] add support for scripts and other enhancements #25480

Merged
merged 2 commits into from
Oct 17, 2022

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Oct 14, 2022

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.

@sizebot
Copy link

sizebot commented Oct 14, 2022

Comparing: 54f297a...843f7c4

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 = 135.64 kB 135.64 kB = 43.46 kB 43.46 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.77% 149.95 kB 151.11 kB +0.44% 47.92 kB 48.13 kB
facebook-www/ReactDOM-prod.classic.js = 492.46 kB 492.46 kB = 87.65 kB 87.65 kB
facebook-www/ReactDOM-prod.modern.js = 477.72 kB 477.72 kB = 85.45 kB 85.45 kB
facebook-www/ReactDOMForked-prod.classic.js = 492.46 kB 492.46 kB = 87.66 kB 87.66 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js +4.26% 45.52 kB 47.46 kB +2.74% 14.63 kB 15.03 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +4.26% 45.42 kB 47.36 kB +2.64% 14.42 kB 14.80 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js +4.24% 46.14 kB 48.10 kB +2.67% 15.15 kB 15.56 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +4.23% 46.26 kB 48.22 kB +2.65% 15.20 kB 15.60 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +4.22% 46.34 kB 48.29 kB +2.77% 15.37 kB 15.80 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js +4.03% 50.05 kB 52.06 kB +2.46% 16.31 kB 16.72 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js +4.02% 50.09 kB 52.10 kB +2.39% 16.33 kB 16.72 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js +4.02% 49.60 kB 51.60 kB +2.49% 15.69 kB 16.08 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js +3.22% 309.44 kB 319.40 kB +1.27% 70.52 kB 71.42 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js +3.21% 310.49 kB 320.45 kB +1.26% 70.44 kB 71.32 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.development.js +3.20% 294.42 kB 303.84 kB +1.29% 69.58 kB 70.48 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +3.19% 295.11 kB 304.54 kB +1.28% 69.78 kB 70.67 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +3.18% 296.14 kB 305.57 kB +1.28% 69.68 kB 70.57 kB
oss-experimental/react-dom/cjs/react-dom-static.node.development.js +3.18% 296.34 kB 305.76 kB +1.30% 69.83 kB 70.73 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +3.18% 296.38 kB 305.80 kB +1.29% 69.73 kB 70.64 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +3.17% 297.85 kB 307.27 kB +1.27% 70.14 kB 71.03 kB
facebook-www/ReactDOMServer-prod.modern.js +2.92% 89.63 kB 92.25 kB +1.54% 18.49 kB 18.77 kB
facebook-www/ReactDOMServer-prod.classic.js +2.83% 92.72 kB 95.34 kB +1.56% 19.13 kB 19.43 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +2.79% 93.66 kB 96.27 kB +1.61% 19.46 kB 19.78 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +2.78% 279.92 kB 287.71 kB +0.98% 65.46 kB 66.11 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js +2.76% 286.11 kB 294.01 kB +0.99% 66.03 kB 66.69 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js +2.76% 286.14 kB 294.03 kB +0.99% 66.06 kB 66.71 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js +2.75% 285.74 kB 293.60 kB +0.98% 65.43 kB 66.07 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js +2.75% 285.77 kB 293.63 kB +0.97% 65.45 kB 66.09 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +2.75% 272.96 kB 280.46 kB +0.93% 65.37 kB 65.98 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +2.75% 272.99 kB 280.48 kB +0.93% 65.40 kB 66.00 kB
facebook-www/ReactDOMServer-dev.modern.js +2.74% 284.42 kB 292.21 kB +0.97% 66.47 kB 67.12 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +2.74% 272.60 kB 280.05 kB +0.97% 64.75 kB 65.38 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +2.73% 272.62 kB 280.08 kB +0.96% 64.77 kB 65.40 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +2.73% 274.23 kB 281.72 kB +0.94% 65.33 kB 65.95 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +2.73% 274.25 kB 281.75 kB +0.94% 65.35 kB 65.97 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +2.72% 274.30 kB 281.76 kB +0.96% 65.22 kB 65.84 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +2.72% 274.33 kB 281.78 kB +0.96% 65.24 kB 65.86 kB
facebook-www/ReactDOMServer-dev.classic.js +2.68% 291.11 kB 298.91 kB +0.95% 67.94 kB 68.59 kB
oss-experimental/react-dom/unstable_server-external-runtime.js +2.57% 1.48 kB 1.52 kB +1.10% 0.72 kB 0.73 kB
oss-stable-semver/react-dom/unstable_server-external-runtime.js +2.57% 1.48 kB 1.52 kB +1.10% 0.72 kB 0.73 kB
oss-stable/react-dom/unstable_server-external-runtime.js +2.57% 1.48 kB 1.52 kB +1.10% 0.72 kB 0.73 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js +2.46% 40.47 kB 41.47 kB +1.51% 13.58 kB 13.78 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js +2.46% 40.50 kB 41.49 kB +1.50% 13.60 kB 13.80 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js +2.45% 40.58 kB 41.57 kB +1.44% 13.72 kB 13.92 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js +2.45% 40.60 kB 41.60 kB +1.43% 13.74 kB 13.94 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +2.32% 37.61 kB 38.49 kB +1.48% 12.47 kB 12.66 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +2.32% 37.64 kB 38.51 kB +1.48% 12.49 kB 12.68 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js +2.32% 37.72 kB 38.59 kB +1.55% 12.65 kB 12.85 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js +2.32% 37.74 kB 38.62 kB +1.52% 12.67 kB 12.87 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js +2.26% 44.01 kB 45.00 kB +1.39% 14.66 kB 14.86 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js +2.26% 44.03 kB 45.03 kB +1.39% 14.68 kB 14.88 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js +2.11% 41.48 kB 42.35 kB +1.39% 13.65 kB 13.84 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js +2.11% 41.50 kB 42.38 kB +1.37% 13.68 kB 13.86 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-dom/umd/react-dom-server-legacy.browser.production.min.js +4.26% 45.52 kB 47.46 kB +2.74% 14.63 kB 15.03 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +4.26% 45.42 kB 47.36 kB +2.64% 14.42 kB 14.80 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js +4.24% 46.14 kB 48.10 kB +2.67% 15.15 kB 15.56 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +4.23% 46.26 kB 48.22 kB +2.65% 15.20 kB 15.60 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +4.22% 46.34 kB 48.29 kB +2.77% 15.37 kB 15.80 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js +4.03% 50.05 kB 52.06 kB +2.46% 16.31 kB 16.72 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js +4.02% 50.09 kB 52.10 kB +2.39% 16.33 kB 16.72 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js +4.02% 49.60 kB 51.60 kB +2.49% 15.69 kB 16.08 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js +3.22% 309.44 kB 319.40 kB +1.27% 70.52 kB 71.42 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js +3.21% 310.49 kB 320.45 kB +1.26% 70.44 kB 71.32 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.development.js +3.20% 294.42 kB 303.84 kB +1.29% 69.58 kB 70.48 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +3.19% 295.11 kB 304.54 kB +1.28% 69.78 kB 70.67 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +3.18% 296.14 kB 305.57 kB +1.28% 69.68 kB 70.57 kB
oss-experimental/react-dom/cjs/react-dom-static.node.development.js +3.18% 296.34 kB 305.76 kB +1.30% 69.83 kB 70.73 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +3.18% 296.38 kB 305.80 kB +1.29% 69.73 kB 70.64 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +3.17% 297.85 kB 307.27 kB +1.27% 70.14 kB 71.03 kB
facebook-www/ReactDOMServer-prod.modern.js +2.92% 89.63 kB 92.25 kB +1.54% 18.49 kB 18.77 kB
facebook-www/ReactDOMServer-prod.classic.js +2.83% 92.72 kB 95.34 kB +1.56% 19.13 kB 19.43 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +2.79% 93.66 kB 96.27 kB +1.61% 19.46 kB 19.78 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +2.78% 279.92 kB 287.71 kB +0.98% 65.46 kB 66.11 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js +2.76% 286.11 kB 294.01 kB +0.99% 66.03 kB 66.69 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js +2.76% 286.14 kB 294.03 kB +0.99% 66.06 kB 66.71 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js +2.75% 285.74 kB 293.60 kB +0.98% 65.43 kB 66.07 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js +2.75% 285.77 kB 293.63 kB +0.97% 65.45 kB 66.09 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +2.75% 272.96 kB 280.46 kB +0.93% 65.37 kB 65.98 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +2.75% 272.99 kB 280.48 kB +0.93% 65.40 kB 66.00 kB
facebook-www/ReactDOMServer-dev.modern.js +2.74% 284.42 kB 292.21 kB +0.97% 66.47 kB 67.12 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +2.74% 272.60 kB 280.05 kB +0.97% 64.75 kB 65.38 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +2.73% 272.62 kB 280.08 kB +0.96% 64.77 kB 65.40 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +2.73% 274.23 kB 281.72 kB +0.94% 65.33 kB 65.95 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +2.73% 274.25 kB 281.75 kB +0.94% 65.35 kB 65.97 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +2.72% 274.30 kB 281.76 kB +0.96% 65.22 kB 65.84 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +2.72% 274.33 kB 281.78 kB +0.96% 65.24 kB 65.86 kB
facebook-www/ReactDOMServer-dev.classic.js +2.68% 291.11 kB 298.91 kB +0.95% 67.94 kB 68.59 kB
oss-experimental/react-dom/unstable_server-external-runtime.js +2.57% 1.48 kB 1.52 kB +1.10% 0.72 kB 0.73 kB
oss-stable-semver/react-dom/unstable_server-external-runtime.js +2.57% 1.48 kB 1.52 kB +1.10% 0.72 kB 0.73 kB
oss-stable/react-dom/unstable_server-external-runtime.js +2.57% 1.48 kB 1.52 kB +1.10% 0.72 kB 0.73 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js +2.46% 40.47 kB 41.47 kB +1.51% 13.58 kB 13.78 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js +2.46% 40.50 kB 41.49 kB +1.50% 13.60 kB 13.80 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js +2.45% 40.58 kB 41.57 kB +1.44% 13.72 kB 13.92 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js +2.45% 40.60 kB 41.60 kB +1.43% 13.74 kB 13.94 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +2.32% 37.61 kB 38.49 kB +1.48% 12.47 kB 12.66 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +2.32% 37.64 kB 38.51 kB +1.48% 12.49 kB 12.68 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js +2.32% 37.72 kB 38.59 kB +1.55% 12.65 kB 12.85 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js +2.32% 37.74 kB 38.62 kB +1.52% 12.67 kB 12.87 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js +2.26% 44.01 kB 45.00 kB +1.39% 14.66 kB 14.86 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js +2.26% 44.03 kB 45.03 kB +1.39% 14.68 kB 14.88 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js +2.11% 41.48 kB 42.35 kB +1.39% 13.65 kB 13.84 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js +2.11% 41.50 kB 42.38 kB +1.37% 13.68 kB 13.86 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.77% 149.95 kB 151.11 kB +0.44% 47.92 kB 48.13 kB
oss-experimental/react-dom/umd/react-dom.production.min.js +0.77% 149.98 kB 151.13 kB +0.50% 48.55 kB 48.80 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js +0.73% 158.80 kB 159.95 kB +0.53% 50.85 kB 51.12 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js +0.72% 159.44 kB 160.59 kB +0.48% 50.39 kB 50.63 kB
oss-experimental/react-dom/umd/react-dom.development.js +0.63% 1,222.00 kB 1,229.67 kB +0.40% 261.58 kB 262.62 kB
oss-experimental/react-dom/cjs/react-dom.development.js +0.62% 1,165.11 kB 1,172.38 kB +0.38% 258.82 kB 259.80 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js +0.59% 20.76 kB 20.88 kB +0.28% 7.39 kB 7.41 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js +0.59% 20.76 kB 20.88 kB +0.28% 7.39 kB 7.41 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.production.min.server.js +0.58% 20.97 kB 21.09 kB +0.28% 7.45 kB 7.47 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.production.min.server.js +0.58% 20.97 kB 21.09 kB +0.28% 7.45 kB 7.47 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.node.production.min.server.js +0.58% 21.18 kB 21.30 kB +0.27% 7.48 kB 7.50 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.node.production.min.server.js +0.58% 21.18 kB 21.30 kB +0.27% 7.48 kB 7.50 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js +0.57% 21.36 kB 21.48 kB +0.30% 7.56 kB 7.58 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.production.min.server.js +0.57% 21.56 kB 21.68 kB +0.14% 7.63 kB 7.64 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.node.production.min.server.js +0.56% 21.78 kB 21.90 kB +0.29% 7.64 kB 7.66 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js +0.26% 76.40 kB 76.60 kB +0.20% 19.19 kB 19.23 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js +0.26% 76.40 kB 76.60 kB +0.20% 19.19 kB 19.23 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.node.development.server.js +0.25% 77.83 kB 78.03 kB +0.20% 19.30 kB 19.34 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.node.development.server.js +0.25% 77.83 kB 78.03 kB +0.20% 19.30 kB 19.34 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.development.server.js +0.25% 80.28 kB 80.48 kB +0.20% 19.46 kB 19.50 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.development.server.js +0.25% 80.28 kB 80.48 kB +0.20% 19.46 kB 19.50 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js +0.25% 80.36 kB 80.56 kB +0.16% 20.20 kB 20.23 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.node.development.server.js +0.24% 81.79 kB 81.99 kB +0.19% 20.31 kB 20.35 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.development.server.js +0.24% 84.44 kB 84.64 kB +0.21% 20.44 kB 20.49 kB

Generated by 🚫 dangerJS against 843f7c4

const children = [];
let node = element.firstChild;
while (node) {
if (node.nodeType === 1) {
if (
node.tagName !== 'SCRIPT' &&
// Only include scripts with src elements, this will hide instruction scripts
!(node.tagName === 'SCRIPT' && !node.hasAttribute('src')) &&
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We plan on running all tests for both the external runtime and inline runtime. So this distinction might not make sense.

Also, we should probably have a few intentional inline scripts tests too.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose I could look at async too but distinguishing between component provided inline scripts and instruction scripts (non-external) seems tricky

// Only include style tags with actual content if they have a data-rprec attribute
// We use this to hide the placeholders which are used to emit insertion points when
// a style is not used in the shell but the precedence is encoded there
!(
Copy link
Collaborator

@sebmarkbage sebmarkbage Oct 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need this after we go back to the old semantics of preinit?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed back

@@ -137,13 +137,22 @@ describe('ReactDOMFloat', () => {
buffer = '';
}

function getVisibleChildren(element) {
function getVisibleChildrenAndResources(element) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kind of annoyingly long. getVisibleChildren or something like getMeaningfulChildren is fine.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed it b/c it is such a prevalent function used elsewhere and it returns different results in this test file. I wonder though if we ought to standardize the implementation. For tests that are not concerned with float I could imagine they actually might want to exclude resources though. Knowing that a preload got inserted at some particular point is probably a distraction for many tests whereas it is critical here. For now I'll just make the name shorter and different

@@ -794,6 +794,20 @@ export function bindInstance(

export const supportsHydration = true;

// With Resources, some HostComponent types will never be server rendered and need to be
// inserted without breaking hydration
export function isHydratable(type: string, props: Props): boolean {
Copy link
Collaborator

@sebmarkbage sebmarkbage Oct 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like an odd special case. I'm not we'll even be able to do Placements in the middle of a hydrating tree in a future architecture since nothing else does it. Seems like not worth it. I wonder if we should just insert an empty script or something although that probably gets treated as an inline script. Maybe empty src attribute?

It's similar to setting the src on <img> during hydration which would retrigger the event. Which we should maybe fix too.

Maybe it's not worth it and we should just leave this to importAsyncScript. This doesn't work today.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think setting src works. Once the script loads changing the src does not cause the script to load. We could get more extreme and construct a new script src and inject it in place of the hydrated one but this is super messy.

I'm leaning towards importAsyncScripts is the way to dedupe but still get your onloads and then just emit these scripts in line with a marker attribute so we can exclude them as resources

@@ -895,6 +909,20 @@ function getNextHydratable(node) {
}
break;
}
case 'STYLE': {
const styleEl: HTMLStyleElement = (element: any);
if (styleEl.hasAttribute('data-rprec')) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated but I can't help but think that this should just be data-precedence to aid debugging. It's not short enough to warrant obfuscation. It might conflict but so could many thing.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I think this makes sense. One way to maybe make this takeover less frustrating is to make the opt-in use data-precedence rather than precedence as a prop. At least it will signal to the writer why we claim that data attribute

@@ -18,7 +18,7 @@
// let lastResource, node;

// // Seed the precedence list with existing resources
// let nodes = thisDocument.querySelectorAll('link[data-rprec]');
// let nodes = thisDocument.querySelectorAll('[data-rprec]');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this might be a bit too broad.

'style[data-rprec],link[data-rprec]'

@@ -827,6 +1018,13 @@ export function isHostResourceType(type: string, props: Props): boolean {
);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need an isResourceAsType or can all as be resources?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose it isn't needed

explicitScriptPreloads,
} = resources;

fontPreloads.forEach(r => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These closures aren't too bad but you do have the same exact one declared multiple times so could make it just one reused one.

});
usedStylePreloads.clear();

scripts.forEach(r => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The preamble notes didn't have anything about scripts in it.

I think we said that we don't want to emit scripts in the preamble, except the external fizz runtime. Because they can end up flooding the network ahead of the styles that are going to come soon.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They're not needed for display. The exception is the fizz runtime which will be needed to display boundaries.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep in mind there is not preamble flush yet because we haven't solved the issue of returning the stream before onReady. So we effectively don't have a preamble flush yet and the first flush is following shell priority

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like we should prep the code for it though. Otherwise, what's the difference between Immediate and Initial?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't flush styles in immediate

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.
Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can follow up later.

@gnoff gnoff merged commit 4494f2a into facebook:main Oct 17, 2022
@gnoff gnoff deleted the float-part-deux branch October 17, 2022 21:00
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Nov 1, 2022
Summary:
This sync includes the following changes:
- **[ab075a232](facebook/react@ab075a232 )**: Do not unmount layout effects on initial Offscreen mount ([#25592](facebook/react#25592)) //<Samuel Susla>//
- **[765805bf8](facebook/react@765805bf8 )**: Fix type check for null ([#25595](facebook/react#25595)) //<Sebastian Markbåge>//
- **[2ac77aab9](facebook/react@2ac77aab9 )**: Clean up vestige of useOpaqueIdentifier ([#25587](facebook/react#25587)) //<Andrew Clark>//
- **[bdd3d0807](facebook/react@bdd3d0807 )**: Extract logic for detecting bad fallback to helper //<Andrew Clark>//
- **[952dfff3f](facebook/react@952dfff3f )**: Split suspended work loop logic into separate functions //<Andrew Clark>//
- **[d2c0ab10d](facebook/react@d2c0ab10d )**: In work loop, add enum of reasons for suspending //<Andrew Clark>//
- **[5450dd409](facebook/react@5450dd409 )**: Strict Mode: Reuse memoized result from first pass ([#25583](facebook/react#25583)) //<Andrew Clark>//
- **[d2a0176a1](facebook/react@d2a0176a1 )**: Detect and warn if use(promise) is wrapped with try/catch block ([#25543](facebook/react#25543)) //<Andrew Clark>//
- **[cf3932be5](facebook/react@cf3932be5 )**: Remove old react-fetch, react-fs and react-pg libraries ([#25577](facebook/react#25577)) //<Sebastian Markbåge>//
- **[28a574ea8](facebook/react@28a574ea8 )**: Try assigning fetch to globalThis if global assignment fails ([#25571](facebook/react#25571)) //<Sebastian Markbåge>//
- **[09def5990](facebook/react@09def5990 )**: [Float] handle noscript context for Resources ([#25559](facebook/react#25559)) //<Josh Story>//
- **[17204056d](facebook/react@17204056d )**: [Float] fix coordination of resource identity and hydration ([#25569](facebook/react#25569)) //<Josh Story>//
- **[d925a8d0b](facebook/react@d925a8d0b )**: Flight client error stack ([#25560](facebook/react#25560)) //<Josh Story>//
- **[996b00b78](facebook/react@996b00b78 )**: [Tiny] Fixed incorrect import in `react-server-dom-webpack` ([#25554](facebook/react#25554)) //<Leo Lamprecht>//
- **[e7c5af45c](facebook/react@e7c5af45c )**: Update cache() and use() to the canary aka next channel ([#25502](facebook/react#25502)) //<Sebastian Markbåge>//
- **[fa77f52e7](facebook/react@fa77f52e7 )**: Unify promise switch statements //<Andrew Clark>//
- **[7572e4931](facebook/react@7572e4931 )**: Track thenable state in work loop //<Andrew Clark>//
- **[7fc3eefd8](facebook/react@7fc3eefd8 )**: Revert yieldy behavior for non-use Suspense (in Flight, too) //<Andrew Clark>//
- **[61f9b5e97](facebook/react@61f9b5e97 )**: [Float] support <base> as Resource ([#25546](facebook/react#25546)) //<Josh Story>//
- **[1d3fc9c9c](facebook/react@1d3fc9c9c )**: Bug fix when resolving cache ([#25545](facebook/react#25545)) //<Sebastian Markbåge>//
- **[cce18e350](facebook/react@cce18e350 )**: [Flight] Use AsyncLocalStorage to extend the scope of the cache to micro tasks ([#25542](facebook/react#25542)) //<Sebastian Markbåge>//
- **[caa84c8da](facebook/react@caa84c8da )**: Revert fetch instrumentation to only RSC ([#25540](facebook/react#25540)) //<Sebastian Markbåge>//
- **[0c11baa6a](facebook/react@0c11baa6a )**: add warnings for non-resources rendered outside body or head ([#25532](facebook/react#25532)) //<Josh Story>//
- **[9236abdb5](facebook/react@9236abdb5 )**: when float is enabled only push title and script as a single unit ([#25536](facebook/react#25536)) //<Josh Story>//
- **[dd5c20825](facebook/react@dd5c20825 )**: Revert yieldy behavior for non-use Suspense ([#25537](facebook/react#25537)) //<Andrew Clark>//
- **[934177598](facebook/react@934177598 )**: fix transposed escape functions ([#25534](facebook/react#25534)) //<Josh Story>//
- **[d1ced9fd5](facebook/react@d1ced9fd5 )**: [Float] support all links as Resources ([#25515](facebook/react#25515)) //<Josh Story>//
- **[973b90bdf](facebook/react@973b90bdf )**: [Float] support meta tags as Resources ([#25514](facebook/react#25514)) //<Josh Story>//
- **[79c582981](facebook/react@79c582981 )**: Let ReactDOM initialize in RSC ([#25503](facebook/react#25503)) //<Sebastian Markbåge>//
- **[1f7a2f577](facebook/react@1f7a2f577 )**: [Float] support title tags as Resources ([#25508](facebook/react#25508)) //<Josh Story>//
- **[c63580787](facebook/react@c63580787 )**: Support `use` in `act` testing API ([#25523](facebook/react#25523)) //<Andrew Clark>//
- **[65e32e58b](facebook/react@65e32e58b )**: Add fetch Instrumentation to Dedupe Fetches ([#25516](facebook/react#25516)) //<Sebastian Markbåge>//
- **[9336e29d9](facebook/react@9336e29d9 )**: [useEvent] Lint for presence of useEvent functions in dependency lists ([#25512](facebook/react#25512)) //<lauren>//
- **[3cc792bfb](facebook/react@3cc792bfb )**: [useEvent] Non-stable function identity ([#25473](facebook/react#25473)) //<lauren>//
- **[987292815](facebook/react@987292815 )**: Remove feature flag enableStrictEffects ([#25387](facebook/react#25387)) //<Samuel Susla>//
- **[8e2bde6f2](facebook/react@8e2bde6f2 )**: Add cache() API ([#25506](facebook/react#25506)) //<Sebastian Markbåge>//
- **[9cdf8a99e](facebook/react@9cdf8a99e )**: [Codemod] Update copyright header to Meta ([#25315](facebook/react#25315)) //<Andrew Clark>//
- **[e54015e26](facebook/react@e54015e26 )**: Refactor: fill in the flow missing type ([#25496](facebook/react#25496)) //<c0dedance>//
- **[3b1fd5767](facebook/react@3b1fd5767 )**: refactor: Flow: typing of Scheduler ([#25485](facebook/react#25485)) //<bubucuo>//
- **[14072ce64](facebook/react@14072ce64 )**: Add detach to Offscreen component ([#25265](facebook/react#25265)) //<Samuel Susla>//
- **[3bb71dfd4](facebook/react@3bb71dfd4 )**: Rename react-server-dom-webpack entry points to /client and /server ([#25504](facebook/react#25504)) //<Sebastian Markbåge>//
- **[71f2c8cf1](facebook/react@71f2c8cf1 )**: move resource acquisition to mutation phase ([#25500](facebook/react#25500)) //<Josh Story>//
- **[500bea532](facebook/react@500bea532 )**: Add option to load Fizz runtime from external file ([#25499](facebook/react#25499)) //<Andrew Clark>//
- **[4494f2a86](facebook/react@4494f2a86 )**: [Float] add support for scripts and other enhancements ([#25480](facebook/react#25480)) //<Josh Story>//
- **[9ecf84ed7](facebook/react@9ecf84ed7 )**: Bugfix: Suspending in shell during discrete update ([#25495](facebook/react#25495)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 54f297a...ab075a2

jest_e2e[run_all_tests]

Reviewed By: kassens

Differential Revision: D40897093

fbshipit-source-id: 6a040315834dea5c0ab994ea94d91f5605b9d6b0
rickhanlonii pushed a commit that referenced this pull request Dec 3, 2022
* 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
mofeiZ pushed a commit to mofeiZ/react that referenced this pull request Dec 5, 2022
* 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
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
This sync includes the following changes:
- **[ab075a232](facebook/react@ab075a232 )**: Do not unmount layout effects on initial Offscreen mount ([facebook#25592](facebook/react#25592)) //<Samuel Susla>//
- **[765805bf8](facebook/react@765805bf8 )**: Fix type check for null ([facebook#25595](facebook/react#25595)) //<Sebastian Markbåge>//
- **[2ac77aab9](facebook/react@2ac77aab9 )**: Clean up vestige of useOpaqueIdentifier ([facebook#25587](facebook/react#25587)) //<Andrew Clark>//
- **[bdd3d0807](facebook/react@bdd3d0807 )**: Extract logic for detecting bad fallback to helper //<Andrew Clark>//
- **[952dfff3f](facebook/react@952dfff3f )**: Split suspended work loop logic into separate functions //<Andrew Clark>//
- **[d2c0ab10d](facebook/react@d2c0ab10d )**: In work loop, add enum of reasons for suspending //<Andrew Clark>//
- **[5450dd409](facebook/react@5450dd409 )**: Strict Mode: Reuse memoized result from first pass ([facebook#25583](facebook/react#25583)) //<Andrew Clark>//
- **[d2a0176a1](facebook/react@d2a0176a1 )**: Detect and warn if use(promise) is wrapped with try/catch block ([facebook#25543](facebook/react#25543)) //<Andrew Clark>//
- **[cf3932be5](facebook/react@cf3932be5 )**: Remove old react-fetch, react-fs and react-pg libraries ([facebook#25577](facebook/react#25577)) //<Sebastian Markbåge>//
- **[28a574ea8](facebook/react@28a574ea8 )**: Try assigning fetch to globalThis if global assignment fails ([facebook#25571](facebook/react#25571)) //<Sebastian Markbåge>//
- **[09def5990](facebook/react@09def5990 )**: [Float] handle noscript context for Resources ([facebook#25559](facebook/react#25559)) //<Josh Story>//
- **[17204056d](facebook/react@17204056d )**: [Float] fix coordination of resource identity and hydration ([facebook#25569](facebook/react#25569)) //<Josh Story>//
- **[d925a8d0b](facebook/react@d925a8d0b )**: Flight client error stack ([facebook#25560](facebook/react#25560)) //<Josh Story>//
- **[996b00b78](facebook/react@996b00b78 )**: [Tiny] Fixed incorrect import in `react-server-dom-webpack` ([facebook#25554](facebook/react#25554)) //<Leo Lamprecht>//
- **[e7c5af45c](facebook/react@e7c5af45c )**: Update cache() and use() to the canary aka next channel ([facebook#25502](facebook/react#25502)) //<Sebastian Markbåge>//
- **[fa77f52e7](facebook/react@fa77f52e7 )**: Unify promise switch statements //<Andrew Clark>//
- **[7572e4931](facebook/react@7572e4931 )**: Track thenable state in work loop //<Andrew Clark>//
- **[7fc3eefd8](facebook/react@7fc3eefd8 )**: Revert yieldy behavior for non-use Suspense (in Flight, too) //<Andrew Clark>//
- **[61f9b5e97](facebook/react@61f9b5e97 )**: [Float] support <base> as Resource ([facebook#25546](facebook/react#25546)) //<Josh Story>//
- **[1d3fc9c9c](facebook/react@1d3fc9c9c )**: Bug fix when resolving cache ([facebook#25545](facebook/react#25545)) //<Sebastian Markbåge>//
- **[cce18e350](facebook/react@cce18e350 )**: [Flight] Use AsyncLocalStorage to extend the scope of the cache to micro tasks ([facebook#25542](facebook/react#25542)) //<Sebastian Markbåge>//
- **[caa84c8da](facebook/react@caa84c8da )**: Revert fetch instrumentation to only RSC ([facebook#25540](facebook/react#25540)) //<Sebastian Markbåge>//
- **[0c11baa6a](facebook/react@0c11baa6a )**: add warnings for non-resources rendered outside body or head ([facebook#25532](facebook/react#25532)) //<Josh Story>//
- **[9236abdb5](facebook/react@9236abdb5 )**: when float is enabled only push title and script as a single unit ([facebook#25536](facebook/react#25536)) //<Josh Story>//
- **[dd5c20825](facebook/react@dd5c20825 )**: Revert yieldy behavior for non-use Suspense ([facebook#25537](facebook/react#25537)) //<Andrew Clark>//
- **[934177598](facebook/react@934177598 )**: fix transposed escape functions ([facebook#25534](facebook/react#25534)) //<Josh Story>//
- **[d1ced9fd5](facebook/react@d1ced9fd5 )**: [Float] support all links as Resources ([facebook#25515](facebook/react#25515)) //<Josh Story>//
- **[973b90bdf](facebook/react@973b90bdf )**: [Float] support meta tags as Resources ([facebook#25514](facebook/react#25514)) //<Josh Story>//
- **[79c582981](facebook/react@79c582981 )**: Let ReactDOM initialize in RSC ([facebook#25503](facebook/react#25503)) //<Sebastian Markbåge>//
- **[1f7a2f577](facebook/react@1f7a2f577 )**: [Float] support title tags as Resources ([facebook#25508](facebook/react#25508)) //<Josh Story>//
- **[c63580787](facebook/react@c63580787 )**: Support `use` in `act` testing API ([facebook#25523](facebook/react#25523)) //<Andrew Clark>//
- **[65e32e58b](facebook/react@65e32e58b )**: Add fetch Instrumentation to Dedupe Fetches ([facebook#25516](facebook/react#25516)) //<Sebastian Markbåge>//
- **[9336e29d9](facebook/react@9336e29d9 )**: [useEvent] Lint for presence of useEvent functions in dependency lists ([facebook#25512](facebook/react#25512)) //<lauren>//
- **[3cc792bfb](facebook/react@3cc792bfb )**: [useEvent] Non-stable function identity ([facebook#25473](facebook/react#25473)) //<lauren>//
- **[987292815](facebook/react@987292815 )**: Remove feature flag enableStrictEffects ([facebook#25387](facebook/react#25387)) //<Samuel Susla>//
- **[8e2bde6f2](facebook/react@8e2bde6f2 )**: Add cache() API ([facebook#25506](facebook/react#25506)) //<Sebastian Markbåge>//
- **[9cdf8a99e](facebook/react@9cdf8a99e )**: [Codemod] Update copyright header to Meta ([facebook#25315](facebook/react#25315)) //<Andrew Clark>//
- **[e54015e26](facebook/react@e54015e26 )**: Refactor: fill in the flow missing type ([facebook#25496](facebook/react#25496)) //<c0dedance>//
- **[3b1fd5767](facebook/react@3b1fd5767 )**: refactor: Flow: typing of Scheduler ([facebook#25485](facebook/react#25485)) //<bubucuo>//
- **[14072ce64](facebook/react@14072ce64 )**: Add detach to Offscreen component ([facebook#25265](facebook/react#25265)) //<Samuel Susla>//
- **[3bb71dfd4](facebook/react@3bb71dfd4 )**: Rename react-server-dom-webpack entry points to /client and /server ([facebook#25504](facebook/react#25504)) //<Sebastian Markbåge>//
- **[71f2c8cf1](facebook/react@71f2c8cf1 )**: move resource acquisition to mutation phase ([facebook#25500](facebook/react#25500)) //<Josh Story>//
- **[500bea532](facebook/react@500bea532 )**: Add option to load Fizz runtime from external file ([facebook#25499](facebook/react#25499)) //<Andrew Clark>//
- **[4494f2a86](facebook/react@4494f2a86 )**: [Float] add support for scripts and other enhancements ([facebook#25480](facebook/react#25480)) //<Josh Story>//
- **[9ecf84ed7](facebook/react@9ecf84ed7 )**: Bugfix: Suspending in shell during discrete update ([facebook#25495](facebook/react#25495)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 54f297a...ab075a2

jest_e2e[run_all_tests]

Reviewed By: kassens

Differential Revision: D40897093

fbshipit-source-id: 6a040315834dea5c0ab994ea94d91f5605b9d6b0
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.

4 participants