[Flight] Serialize Date

This is kind of annoying because Date implements toJSON so JSON.stringify turns it into a string before calling our replacer function.

Author: sophiebits

packages/react-client/src/ReactFlightClient.js

@@ -564,6 +564,10 @@ export function parseModelString(
         // Special encoding for `undefined` which can't be serialized as JSON otherwise.
         return undefined;
       }
+      case 'D': {
+        // Date
+        return new Date(Date.parse(value.substring(2)));
+      }
       case 'n': {
         // BigInt
         return BigInt(value.substring(2));

packages/react-client/src/ReactFlightReplyClient.js

@@ -75,6 +75,12 @@ function serializeUndefined(): string {
   return '$undefined';
 }
 
+function serializeDateFromDateJSON(dateJSON: string): string {
+  // JSON.stringify automatically calls Date.prototype.toJSON which calls toISOString.
+  // We need only tack on a $D prefix.
+  return '$D' + dateJSON;
+}
+
 function serializeBigInt(n: bigint): string {
   return '$n' + n.toString(10);
 }
@@ -106,9 +112,20 @@ export function processReply(
     value: ReactServerValue,
   ): ReactJSONValue {
     const parent = this;
+
+    if (typeof value === 'string' && value[value.length - 1] === 'Z') {
+      // Possibly a Date, whose toJSON automatically calls toISOString
+      // $FlowFixMe[incompatible-use]
+      const originalValue = parent[key];
+      // $FlowFixMe[method-unbinding]
+      if (Object.prototype.toString.call(originalValue) === '[object Date]') {
+        return serializeDateFromDateJSON(value);
+      }
+    }
+
     if (__DEV__) {
       // $FlowFixMe[incompatible-use]
-      const originalValue = this[key];
+      const originalValue = parent[key];
       if (typeof originalValue === 'object' && originalValue !== value) {
         if (objectName(originalValue) !== 'Object') {
           console.error(

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -282,6 +282,23 @@ describe('ReactFlight', () => {
     );
   });
 
+  it('can transport Date', async () => {
+    function ComponentClient({prop}) {
+      return `prop: ${prop.toISOString()}`;
+    }
+    const Component = clientReference(ComponentClient);
+
+    const model = <Component prop={new Date(1234567890123)} />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput('prop: 2009-02-13T23:31:30.123Z');
+  });
+
   it('can render a lazy component as a shared component on the server', async () => {
     function SharedComponent({text}) {
       return (
@@ -651,28 +668,39 @@ describe('ReactFlight', () => {
   });
 
   it('should warn in DEV if a toJSON instance is passed to a host component', () => {
+    const obj = {
+      toJSON() {
+        return 123;
+      },
+    };
     expect(() => {
-      const transport = ReactNoopFlightServer.render(
-        <input value={new Date()} />,
-      );
+      const transport = ReactNoopFlightServer.render(<input value={obj} />);
       ReactNoopFlightClient.read(transport);
     }).toErrorDev(
       'Only plain objects can be passed to Client Components from Server Components. ' +
-        'Date objects are not supported.',
+        'Objects with toJSON methods are not supported. ' +
+        'Convert it manually to a simple value before passing it to props.\n' +
+        '  <input value={{toJSON: function}}>\n' +
+        '               ^^^^^^^^^^^^^^^^^^^^',
       {withoutStack: true},
     );
   });
 
   it('should warn in DEV if a toJSON instance is passed to a host component child', () => {
+    class MyError extends Error {
+      toJSON() {
+        return 123;
+      }
+    }
     expect(() => {
       const transport = ReactNoopFlightServer.render(
-        <div>Current date: {new Date()}</div>,
+        <div>Womp womp: {new MyError('spaghetti')}</div>,
       );
       ReactNoopFlightClient.read(transport);
     }).toErrorDev(
-      'Date objects cannot be rendered as text children. Try formatting it using toString().\n' +
-        '  <div>Current date: {Date}</div>\n' +
-        '                     ^^^^^^',
+      'Error objects cannot be rendered as text children. Try formatting it using toString().\n' +
+        '  <div>Womp womp: {Error}</div>\n' +
+        '                  ^^^^^^^',
       {withoutStack: true},
     );
   });
@@ -704,37 +732,46 @@ describe('ReactFlight', () => {
   });
 
   it('should warn in DEV if a toJSON instance is passed to a Client Component', () => {
+    const obj = {
+      toJSON() {
+        return 123;
+      },
+    };
     function ClientImpl({value}) {
       return <div>{value}</div>;
     }
     const Client = clientReference(ClientImpl);
     expect(() => {
-      const transport = ReactNoopFlightServer.render(
-        <Client value={new Date()} />,
-      );
+      const transport = ReactNoopFlightServer.render(<Client value={obj} />);
       ReactNoopFlightClient.read(transport);
     }).toErrorDev(
       'Only plain objects can be passed to Client Components from Server Components. ' +
-        'Date objects are not supported.',
+        'Objects with toJSON methods are not supported.',
       {withoutStack: true},
     );
   });
 
   it('should warn in DEV if a toJSON instance is passed to a Client Component child', () => {
+    const obj = {
+      toJSON() {
+        return 123;
+      },
+    };
     function ClientImpl({children}) {
       return <div>{children}</div>;
     }
     const Client = clientReference(ClientImpl);
     expect(() => {
       const transport = ReactNoopFlightServer.render(
-        <Client>Current date: {new Date()}</Client>,
+        <Client>Current date: {obj}</Client>,
       );
       ReactNoopFlightClient.read(transport);
     }).toErrorDev(
       'Only plain objects can be passed to Client Components from Server Components. ' +
-        'Date objects are not supported.\n' +
-        '  <>Current date: {Date}</>\n' +
-        '                  ^^^^^^',
+        'Objects with toJSON methods are not supported. ' +
+        'Convert it manually to a simple value before passing it to props.\n' +
+        '  <>Current date: {{toJSON: function}}</>\n' +
+        '                  ^^^^^^^^^^^^^^^^^^^^',
       {withoutStack: true},
     );
   });

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js

@@ -82,4 +82,13 @@ describe('ReactFlightDOMReply', () => {
 
     expect(n).toEqual(90071992547409910000n);
   });
+
+  it('can pass a Date as a reply', async () => {
+    const d = new Date(1234567890123);
+    const body = await ReactServerDOMClient.encodeReply(d);
+    const d2 = await ReactServerDOMServer.decodeReply(body, webpackServerMap);
+
+    expect(d).toEqual(d2);
+    expect(d % 1000).toEqual(123); // double-check the milliseconds made it through
+  });
 });

packages/react-server/src/ReactFlightReplyServer.js

@@ -402,6 +402,10 @@ function parseModelString(
         // Special encoding for `undefined` which can't be serialized as JSON otherwise.
         return undefined;
       }
+      case 'D': {
+        // Date
+        return new Date(Date.parse(value.substring(2)));
+      }
       case 'n': {
         // BigInt
         return BigInt(value.substring(2));

packages/react-server/src/ReactFlightServer.js

@@ -553,6 +553,12 @@ function serializeUndefined(): string {
   return '$undefined';
 }
 
+function serializeDateFromDateJSON(dateJSON: string): string {
+  // JSON.stringify automatically calls Date.prototype.toJSON which calls toISOString.
+  // We need only tack on a $D prefix.
+  return '$D' + dateJSON;
+}
+
 function serializeBigInt(n: bigint): string {
   return '$n' + n.toString(10);
 }
@@ -669,6 +675,16 @@ export function resolveModelToJSON(
   key: string,
   value: ReactClientValue,
 ): ReactJSONValue {
+  if (typeof value === 'string' && value[value.length - 1] === 'Z') {
+    // Possibly a Date, whose toJSON automatically calls toISOString
+    // $FlowFixMe[incompatible-use]
+    const originalValue = parent[key];
+    // $FlowFixMe[method-unbinding]
+    if (Object.prototype.toString.call(originalValue) === '[object Date]') {
+      return serializeDateFromDateJSON(value);
+    }
+  }
+
   if (__DEV__) {
     // $FlowFixMe[incompatible-use]
     const originalValue = parent[key];
@@ -831,8 +847,7 @@ export function resolveModelToJSON(
         isInsideContextValue = false;
       }
       return (undefined: any);
-    }
-    if (!isArray(value)) {
+    } else if (!isArray(value)) {
       const iteratorFn = getIteratorFn(value);
       if (iteratorFn) {
         return Array.from((value: any));