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.
55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import babel from '@babel/core';
|
|
|
|
const babelOptions = {
|
|
babelrc: false,
|
|
ignore: [/\/(build|node_modules)\//],
|
|
plugins: [
|
|
'@babel/plugin-syntax-import-meta',
|
|
'@babel/plugin-transform-react-jsx',
|
|
],
|
|
};
|
|
|
|
export async function load(url, context, defaultLoad) {
|
|
if (url.endsWith('.css')) {
|
|
return {source: 'export default {}', format: 'module', shortCircuit: true};
|
|
}
|
|
const {format} = context;
|
|
const result = await defaultLoad(url, context, defaultLoad);
|
|
if (result.format === 'module') {
|
|
const opt = Object.assign({filename: url}, babelOptions);
|
|
const newResult = await babel.transformAsync(result.source, opt);
|
|
if (!newResult) {
|
|
if (typeof result.source === 'string') {
|
|
return result;
|
|
}
|
|
return {
|
|
source: Buffer.from(result.source).toString('utf8'),
|
|
format: 'module',
|
|
};
|
|
}
|
|
return {source: newResult.code, format: 'module'};
|
|
}
|
|
return defaultLoad(url, context, defaultLoad);
|
|
}
|
|
|
|
async function babelTransformSource(source, context, defaultTransformSource) {
|
|
const {format} = context;
|
|
if (format === 'module') {
|
|
const opt = Object.assign({filename: context.url}, babelOptions);
|
|
const newResult = await babel.transformAsync(source, opt);
|
|
if (!newResult) {
|
|
if (typeof source === 'string') {
|
|
return {source};
|
|
}
|
|
return {
|
|
source: Buffer.from(source).toString('utf8'),
|
|
};
|
|
}
|
|
return {source: newResult.code};
|
|
}
|
|
return defaultTransformSource(source, context, defaultTransformSource);
|
|
}
|
|
|
|
export const transformSource =
|
|
process.version < 'v16' ? babelTransformSource : undefined;
|