mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbåge
fc41c24aa6
The React API is just that we now accept this protocol as an alternative
to a native `AnimationTimeline` to be passed to
`startGestureTransition`. This is specifically the DOM version.
```js
interface CustomTimeline {
currentTime: number;
animate(animation: Animation): void | (() => void);
}
```
Instead, of passing this to the `Animation` that we start to control the
View Transition keyframes, we instead inverse the control and pass the
`Animation` to this one. It lets any custom implementation drive the
updates. It can do so by updating the time every frame or letting it run
a time based animation (such as momentum scroll).
In this case I added a basic polyfill for `ScrollTimeline` in the
example but we'll need a better one.
48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import {renderToPipeableStream} from 'react-dom/server';
|
|
|
|
import App from '../src/components/App.js';
|
|
|
|
let assets;
|
|
if (process.env.NODE_ENV === 'development') {
|
|
// Use the bundle from create-react-app's server in development mode.
|
|
assets = {
|
|
'main.js': '/static/js/bundle.js',
|
|
// 'main.css': '',
|
|
};
|
|
} else {
|
|
assets = require('../build/asset-manifest.json').files;
|
|
}
|
|
|
|
export default function render(url, res) {
|
|
res.socket.on('error', error => {
|
|
// Log fatal errors
|
|
console.error('Fatal', error);
|
|
});
|
|
let didError = false;
|
|
const {pipe, abort} = renderToPipeableStream(
|
|
<App assets={assets} initialURL={url} />,
|
|
{
|
|
bootstrapScripts: [assets['main.js']],
|
|
onShellReady() {
|
|
// If something errored before we started streaming, we set the error code appropriately.
|
|
res.statusCode = didError ? 500 : 200;
|
|
res.setHeader('Content-type', 'text/html');
|
|
pipe(res);
|
|
},
|
|
onShellError(x) {
|
|
// Something errored before we could complete the shell so we emit an alternative shell.
|
|
res.statusCode = 500;
|
|
res.send('<!doctype><p>Error</p>');
|
|
},
|
|
onError(x) {
|
|
didError = true;
|
|
console.error(x);
|
|
},
|
|
}
|
|
);
|
|
// Abandon and switch to client rendering after 5 seconds.
|
|
// Try lowering this to see the client recover.
|
|
setTimeout(abort, 5000);
|
|
}
|