mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 00:20:04 +01:00
da6ba53b10
In React 19 React will finally stop publishing UMD builds. This is motivated primarily by the lack of use of UMD format and the added complexity of maintaining build infra for these releases. Additionally with ESM becoming more prevalent in browsers and services like esm.sh which can host React as an ESM module there are other options for doing script tag based react loading. This PR removes all the UMD build configs and forks. There are some fixtures that still have references to UMD builds however many of them already do not work (for instance they are using legacy features like ReactDOM.render) and rather than block the removal on these fixtures being brought up to date we'll just move forward and fix or removes fixtures as necessary in the future.
64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html style="width: 100%; height: 100%; overflow: hidden">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Fizz Example</title>
|
|
</head>
|
|
<body>
|
|
<h1>Fizz Example</h1>
|
|
<div id="container">
|
|
<p>
|
|
To install React, follow the instructions on
|
|
<a href="https://github.com/facebook/react/">GitHub</a>.
|
|
</p>
|
|
<p>
|
|
If you can see this, React is <strong>not</strong> working right.
|
|
If you checked out the source from GitHub make sure to run <code>npm run build</code>.
|
|
</p>
|
|
</div>
|
|
<script type="module">
|
|
import React from "https://esm.sh/react@canary?dev";
|
|
import ReactDOM from "https://esm.sh/react-dom@canary?dev";
|
|
import ReactDOMServer from "https://esm.sh/react-dom@canary/server.browser?dev";
|
|
|
|
window.React = React;
|
|
window.ReactDOM = ReactDOM;
|
|
window.ReactDOMServer = ReactDOMServer;
|
|
</script>
|
|
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
|
|
<script type="text/babel">
|
|
async function render() {
|
|
let controller = new AbortController();
|
|
let response;
|
|
try {
|
|
let stream = await ReactDOMServer.renderToReadableStream(
|
|
<html>
|
|
<body>Success</body>
|
|
</html>,
|
|
{
|
|
signal: controller.signal,
|
|
}
|
|
);
|
|
response = new Response(stream, {
|
|
headers: {'Content-Type': 'text/html'},
|
|
});
|
|
} catch (x) {
|
|
response = new Response('<!doctype><p>Error</p>', {
|
|
status: 500,
|
|
headers: {'Content-Type': 'text/html'},
|
|
});
|
|
}
|
|
|
|
let blob = await response.blob();
|
|
let url = URL.createObjectURL(blob);
|
|
let iframe = document.createElement('iframe');
|
|
iframe.src = url;
|
|
let container = document.getElementById('container');
|
|
container.innerHTML = '';
|
|
container.appendChild(iframe);
|
|
}
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|