Add renderToMarkup for Client Components (#30121)

Follow up to #30105.

This supports `renderToMarkup` in a non-RSC environment (not the
`react-server` condition).

This is just a Fizz renderer but it errors at runtime when you use
state, effects or event handlers that would require hydration - like the
RSC version would. (Except RSC can give early errors too.)

To do this I have to move the `react-html` builds to a new `markup`
dimension out of the `dom-legacy` dimension so that we can configure
this differently from `renderToString`/`renderToStaticMarkup`.
Eventually that dimension can go away though if deprecated. That also
helps us avoid dynamic configuration and we can just compile in the
right configuration so the split helps anyway.

One consideration is that if a compiler strips out useEffects or inlines
initial state from useState, then it would not get called an the error
wouldn't happen. Therefore to preserve semantics, a compiler would need
to inject some call that can check the current renderer and whether it
should throw.

There is an argument that it could be useful to not error for these
because it's possible to write components that works with SSR but are
just optionally hydrated. However, there's also an argument that doing
that silently is too easy to lead to mistakes and it's better to error -
especially for the e-mail use case where you can't take it back but you
can replay a queue that had failures. There are other ways to
conditionally branch components intentionally. Besides if you want it to
be silent you can still use renderToString (or better yet
renderToReadableStream).

The primary mechanism is the RSC environment and the client-environment
is really the secondary one that's only there to support legacy
environments. So this also ensures parity with the primary environment.

Author: sebmarkbage

packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js

@@ -7,82 +7,20 @@
  * @flow
  */
 
-import type {Thenable} from 'shared/ReactTypes';
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactClientConsoleConfigBrowser';
 
-export * from 'react-html/src/ReactHTMLLegacyClientStreamConfig.js';
-export * from 'react-client/src/ReactClientConsoleConfigPlain';
-
-export type ModuleLoading = null;
-export type SSRModuleMap = null;
-export opaque type ServerManifest = null;
+export type Response = any;
+export opaque type ModuleLoading = mixed;
+export opaque type SSRModuleMap = mixed;
+export opaque type ServerManifest = mixed;
 export opaque type ServerReferenceId = string;
-export opaque type ClientReferenceMetadata = null;
-export opaque type ClientReference<T> = null; // eslint-disable-line no-unused-vars
-
-export function prepareDestinationForModule(
-  moduleLoading: ModuleLoading,
-  nonce: ?string,
-  metadata: ClientReferenceMetadata,
-) {
-  throw new Error(
-    'renderToMarkup should not have emitted Client References. This is a bug in React.',
-  );
-}
-
-export function resolveClientReference<T>(
-  bundlerConfig: SSRModuleMap,
-  metadata: ClientReferenceMetadata,
-): ClientReference<T> {
-  throw new Error(
-    'renderToMarkup should not have emitted Client References. This is a bug in React.',
-  );
-}
-
-export function resolveServerReference<T>(
-  config: ServerManifest,
-  id: ServerReferenceId,
-): ClientReference<T> {
-  throw new Error(
-    'renderToMarkup should not have emitted Server References. This is a bug in React.',
-  );
-}
-
-export function preloadModule<T>(
-  metadata: ClientReference<T>,
-): null | Thenable<T> {
-  return null;
-}
-
-export function requireModule<T>(metadata: ClientReference<T>): T {
-  throw new Error(
-    'renderToMarkup should not have emitted Client References. This is a bug in React.',
-  );
-}
-
+export opaque type ClientReferenceMetadata = mixed;
+export opaque type ClientReference<T> = mixed; // eslint-disable-line no-unused-vars
+export const resolveClientReference: any = null;
+export const resolveServerReference: any = null;
+export const preloadModule: any = null;
+export const requireModule: any = null;
+export const dispatchHint: any = null;
+export const prepareDestinationForModule: any = null;
 export const usedWithSSR = true;
-
-type HintCode = string;
-type HintModel<T: HintCode> = null; // eslint-disable-line no-unused-vars
-
-export function dispatchHint<Code: HintCode>(
-  code: Code,
-  model: HintModel<Code>,
-): void {
-  // Should never happen.
-}
-
-export function preinitModuleForSSR(
-  href: string,
-  nonce: ?string,
-  crossOrigin: ?string,
-) {
-  // Should never happen.
-}
-
-export function preinitScriptForSSR(
-  href: string,
-  nonce: ?string,
-  crossOrigin: ?string,
-) {
-  // Should never happen.
-}

packages/react-client/src/forks/ReactFlightClientConfig.markup.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Thenable} from 'shared/ReactTypes';
+
+export * from 'react-html/src/ReactHTMLLegacyClientStreamConfig.js';
+export * from 'react-client/src/ReactClientConsoleConfigPlain';
+
+export type ModuleLoading = null;
+export type SSRModuleMap = null;
+export opaque type ServerManifest = null;
+export opaque type ServerReferenceId = string;
+export opaque type ClientReferenceMetadata = null;
+export opaque type ClientReference<T> = null; // eslint-disable-line no-unused-vars
+
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  throw new Error(
+    'renderToMarkup should not have emitted Client References. This is a bug in React.',
+  );
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: SSRModuleMap,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  throw new Error(
+    'renderToMarkup should not have emitted Client References. This is a bug in React.',
+  );
+}
+
+export function resolveServerReference<T>(
+  config: ServerManifest,
+  id: ServerReferenceId,
+): ClientReference<T> {
+  throw new Error(
+    'renderToMarkup should not have emitted Server References. This is a bug in React.',
+  );
+}
+
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<T> {
+  return null;
+}
+
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  throw new Error(
+    'renderToMarkup should not have emitted Client References. This is a bug in React.',
+  );
+}
+
+export const usedWithSSR = true;
+
+type HintCode = string;
+type HintModel<T: HintCode> = null; // eslint-disable-line no-unused-vars
+
+export function dispatchHint<Code: HintCode>(
+  code: Code,
+  model: HintModel<Code>,
+): void {
+  // Should never happen.
+}
+
+export function preinitModuleForSSR(
+  href: string,
+  nonce: ?string,
+  crossOrigin: ?string,
+) {
+  // Should never happen.
+}
+
+export function preinitScriptForSSR(
+  href: string,
+  nonce: ?string,
+  crossOrigin: ?string,
+) {
+  // Should never happen.
+}

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -108,6 +108,8 @@ export type HeadersDescriptor = {
 // E.g. this can be used to distinguish legacy renderers from this modern one.
 export const isPrimaryRenderer = true;
 
+export const supportsClientAPIs = true;
+
 export type StreamingFormat = 0 | 1;
 const ScriptStreamingFormat: StreamingFormat = 0;
 const DataStreamingFormat: StreamingFormat = 1;

packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js

@@ -166,6 +166,7 @@ export {
   resetResumableState,
   completeResumableState,
   emitEarlyPreloads,
+  supportsClientAPIs,
 } from './ReactFizzConfigDOM';
 
 import escapeTextForBrowser from './escapeTextForBrowser';

packages/react-html/index.js

@@ -1,5 +1,10 @@
-'use strict';
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
 
-throw new Error(
-  'react-html is not supported outside a React Server Components environment.',
-);
+export * from './src/ReactHTMLClient';

packages/react-html/npm/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
-throw new Error(
-  'react-html is not supported outside a React Server Components environment.'
-);
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-html.production.js');
+} else {
+  module.exports = require('./cjs/react-html.development.js');
+}