Implement a polyfilled version of byteLengthOfChunk

packages/react-server-dom-fb/src/__tests__/ReactFlightDOMServerFB-test.internal.js

@@ -50,6 +50,7 @@ class Destination {
  if (!this.#controller) {
  throw new Error('Expected a controller.');
  }
+ console.log('flushing', this.#buffer);
  this.#controller.enqueue(this.#buffer);
  this.#buffer = '';
  }
@@ -308,6 +309,42 @@ describe('ReactFlightDOM for FB', () => {
  expect(container.innerHTML).toBe('<p>Hello World</p>');
  });
 
+ it('should render long strings', async () => {
+ // Model
+ const longString = 'Lorem Ipsum ❤️ '.repeat(100);
+
+ function RootModel() {
+ return {text: longString};
+ }
+
+ // View
+ function Message({response}) {
+ return <p>{use(response).text}</p>;
+ }
+ function App({response}) {
+ return (
+ <Suspense fallback={<h1>Loading...</h1>}>
+ <Message response={response} />
+ </Suspense>
+ );
+ }
+ const destination = new Destination();
+ ReactServerDOMServer.renderToDestination(destination, <RootModel />);
+ const response = ReactServerDOMClient.createFromReadableStream(
+ destination.stream,
+ {
+ moduleMap,
+ },
+ );
+
+ const container = document.createElement('div');
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(<App response={response} />);
+ });
+ expect(container.innerHTML).toBe('<p>' + longString + '</p>');
+ });
+
  // TODO: `registerClientComponent` need to be able to support this
  it.skip('throws when accessing a member below the client exports', () => {
  const ClientModule = clientExports({

packages/react-server/src/forks/ReactServerStreamConfig.dom-fb-experimental.js

@@ -15,6 +15,45 @@ import type {
  BinaryChunk,
 } from '../ReactServerStreamConfigFB';
 
+export function byteLengthOfChunk(chunk: Chunk | PrecomputedChunk): number {
+ if (typeof chunk !== 'string') {
+ // eslint-disable-next-line react-internal/prod-error-codes
+ throw new Error('byteLengthOfChunk: binary chunks are not supported.');
+ }
+ return byteLengthImpl(chunk);
+}
+
+// TODO: We need to replace this with native implementation, once its available on Hermes
+function byteLengthImpl(chunk: string) {
+ /**
+ From: https://datatracker.ietf.org/doc/html/rfc3629
+ Char. number range | UTF-8 octet sequence
+ (hexadecimal) | (binary)
+ --------------------+---------------------------------------------
+ 0000 0000-0000 007F | 0xxxxxxx
+ 0000 0080-0000 07FF | 110xxxxx 10xxxxxx
+ 0000 0800-0000 FFFF | 1110xxxx 10xxxxxx 10xxxxxx
+ 0001 0000-0010 FFFF | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
+ */
+ let byteLength = chunk.length;
+ for (let i = chunk.length - 1; i >= 0; i--) {
+ const code = chunk.charCodeAt(i);
+ if (code > 0x7f && code <= 0x7ff) {
+ byteLength++;
+ } else if (code > 0x7ff && code <= 0xffff) {
+ byteLength += 2;
+ }
+ if (code >= 0xdc00 && code <= 0xdfff) {
+ // It is a trail surrogate character.
+ // In this case, the code decrements the loop counter i so
+ // that the previous character (which should be a lead surrogate character)
+ // is also included in the calculation.
+ i--;
+ }
+ }
+ return byteLength;
+}
+
 export interface Destination {
  beginWriting(): void;
  write(chunk: Chunk | PrecomputedChunk | BinaryChunk): void;