mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
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.
74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
require('ignore-styles');
|
|
const babelRegister = require('@babel/register');
|
|
const proxy = require('http-proxy-middleware');
|
|
|
|
babelRegister({
|
|
ignore: [/\/(build|node_modules)\//],
|
|
presets: ['react-app'],
|
|
});
|
|
|
|
const express = require('express');
|
|
const path = require('path');
|
|
|
|
const app = express();
|
|
|
|
// Application
|
|
if (process.env.NODE_ENV === 'development') {
|
|
app.get('/', function (req, res) {
|
|
// In development mode we clear the module cache between each request to
|
|
// get automatic hot reloading.
|
|
for (var key in require.cache) {
|
|
delete require.cache[key];
|
|
}
|
|
import('./render.js').then(({default: render}) => {
|
|
render(req.url, res);
|
|
});
|
|
});
|
|
} else {
|
|
import('./render.js').then(({default: render}) => {
|
|
app.get('/', function (req, res) {
|
|
render(req.url, res);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Static resources
|
|
app.use(express.static(path.resolve(__dirname, '..', 'build')));
|
|
|
|
// Proxy everything else to create-react-app's webpack development server
|
|
if (process.env.NODE_ENV === 'development') {
|
|
app.use(
|
|
'/',
|
|
proxy.createProxyMiddleware({
|
|
ws: true,
|
|
changeOrigin: true,
|
|
target: 'http://127.0.0.1:3001',
|
|
})
|
|
);
|
|
}
|
|
|
|
app.listen(3000, () => {
|
|
console.log('Listening on port 3000...');
|
|
});
|
|
|
|
app.on('error', function (error) {
|
|
if (error.syscall !== 'listen') {
|
|
throw error;
|
|
}
|
|
|
|
var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
|
|
|
|
switch (error.code) {
|
|
case 'EACCES':
|
|
console.error(bind + ' requires elevated privileges');
|
|
process.exit(1);
|
|
break;
|
|
case 'EADDRINUSE':
|
|
console.error(bind + ' is already in use');
|
|
process.exit(1);
|
|
break;
|
|
default:
|
|
throw error;
|
|
}
|
|
});
|