Support ESM in the fixture server

Author: sebmarkbage

fixtures/view-transition/loader/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

fixtures/view-transition/loader/server.js

@@ -0,0 +1,54 @@
+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;

fixtures/view-transition/package.json

@@ -13,7 +13,8 @@
     "express": "^4.14.0",
     "ignore-styles": "^5.0.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "animation-timelines": "^0.0.1"
   },
   "eslintConfig": {
     "extends": [
@@ -27,8 +28,8 @@
     "prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/ && rm -rf node_modules/.cache;",
     "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
     "dev:client": "BROWSER=none PORT=3001 react-scripts start",
-    "dev:server": "NODE_ENV=development node server",
-    "start": "react-scripts build && NODE_ENV=production node server",
+    "dev:server": "NODE_ENV=development node --experimental-loader ./loader/server.js server",
+    "start": "react-scripts build && NODE_ENV=production node --experimental-loader ./loader/server.js server",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

fixtures/view-transition/server/index.js

@@ -20,13 +20,15 @@ if (process.env.NODE_ENV === 'development') {
     for (var key in require.cache) {
       delete require.cache[key];
     }
-    const render = require('./render').default;
-    render(req.url, res);
+    import('./render.js').then(({default: render}) => {
+      render(req.url, res);
+    });
   });
 } else {
-  const render = require('./render').default;
-  app.get('/', function (req, res) {
-    render(req.url, res);
+  import('./render.js').then(({default: render}) => {
+    app.get('/', function (req, res) {
+      render(req.url, res);
+    });
   });
 }
 

fixtures/view-transition/server/render.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {renderToPipeableStream} from 'react-dom/server';
 
-import App from '../src/components/App';
+import App from '../src/components/App.js';
 
 let assets;
 if (process.env.NODE_ENV === 'development') {

fixtures/view-transition/src/components/App.js

@@ -7,8 +7,8 @@ import React, {
   use,
 } from 'react';
 
-import Chrome from './Chrome';
-import Page from './Page';
+import Chrome from './Chrome.js';
+import Page from './Page.js';
 
 const enableNavigationAPI = typeof navigation === 'object';
 

fixtures/view-transition/src/components/Page.js

@@ -13,12 +13,12 @@ import React, {
 
 import {createPortal} from 'react-dom';
 
-import SwipeRecognizer from './SwipeRecognizer';
+import SwipeRecognizer from './SwipeRecognizer.js';
 
 import './Page.css';
 
 import transitions from './Transitions.module.css';
-import NestedReveal from './NestedReveal';
+import NestedReveal from './NestedReveal.js';
 
 async function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));

fixtures/view-transition/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {hydrateRoot} from 'react-dom/client';
 
-import App from './components/App';
+import App from './components/App.js';
 
 hydrateRoot(
   document,