[flags] make enableTrustedTypesIntegration dynamic (#35646)

Co-authored-by: Rick Hanlon <rickhanlonii@meta.com>

Author: hybrist

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -171,7 +171,13 @@ describe('ReactDOM unknown attribute', () => {
 consttest=()=>
 testUnknownAttributeAssignment(newTemporalLike(),null);
 
-awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+if(gate('enableTrustedTypesIntegration')&&!__DEV__){
+// TODO: this still throws in DEV even though it's not toString'd in prod.
+awaitexpect(test).rejects.toThrowError('2020-01-01');
+}else{
+awaitexpect(test).rejects.toThrowError(newTypeError('prod message'));
+}
+
 assertConsoleErrorDev([
 'The provided `unknown` attribute is an unsupported type TemporalLike.'+
 ' This value must be coerced to a string before using it here.\n'+

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -602,6 +602,14 @@ describe('ReactDOMFloat', () => {
 '> <script href="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 
 root.render(
@@ -2745,6 +2753,14 @@ body {
 '> <script itemProp="foo">\n'+
 '\n'+
 ' in script (at **)',
+ ...(gate('enableTrustedTypesIntegration')
+ ? [
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]
+ : []),
 ]);
 });
 

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -2277,15 +2277,21 @@ describe('ReactDOMForm', () => {
 awaitsubmit(formRef.current);
 assertLog([actionFn]);
 
-// Everything else is toString-ed
+// Everything else is toString-ed, unless trusted types are enabled.
 classMyAction{
 toString(){
 return'stringified action';
 }
 }
-awaitact(()=>root.render(<Formaction={newMyAction()}/>));
+constinstance=newMyAction();
+
+awaitact(()=>root.render(<Formaction={instance}/>));
 awaitsubmit(formRef.current);
-assertLog(['stringified action']);
+assertLog(
+gate('enableTrustedTypesIntegration')
+ ? [instance]
+ : ['stringified action'],
+);
 });
 
 it('form actions should retain status when nested state changes',async()=>{

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -212,6 +212,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 expectedToStringCalls*=2;
 }
 
+if(gate('enableTrustedTypesIntegration')&&render===clientCleanRender){
+// Trusted types does another toString.
+expectedToStringCalls+=1;
+}
+
 lettoStringCalls=0;
 constfirstIsSafe={
 toString(){

packages/react-dom/src/__tests__/ReactEmptyComponent-test.js

@@ -17,6 +17,7 @@ let TogglingComponent;
 letact;
 letScheduler;
 letassertLog;
+letassertConsoleErrorDev;
 
 letcontainer;
 
@@ -34,6 +35,7 @@ describe('ReactEmptyComponent', () => {
 constInternalTestUtils=require('internal-test-utils');
 act=InternalTestUtils.act;
 assertLog=InternalTestUtils.assertLog;
+assertConsoleErrorDev=InternalTestUtils.assertConsoleErrorDev;
 
 container=document.createElement('div');
 
@@ -175,6 +177,17 @@ describe('ReactEmptyComponent', () => {
 });
 }).not.toThrow();
 
+expect(container.innerHTML).toBe('<script></script>');
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering on the client. '+
+'Consider using template tag instead (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)\n'+
+' in TogglingComponent (at **)',
+]);
+}
+
 constcontainer2=document.createElement('div');
 constroot2=ReactDOMClient.createRoot(container2);
 expect(()=>{
@@ -189,6 +202,7 @@ describe('ReactEmptyComponent', () => {
 'mount SCRIPT',
 'update undefined',
 ]);
+expect(container2.innerHTML).toBe('');
 });
 
 it(

packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js

@@ -12,7 +12,6 @@
 describe('when Trusted Types are available in global object',()=>{
 letReact;
 letReactDOMClient;
-letReactFeatureFlags;
 letact;
 letassertConsoleErrorDev;
 letcontainer;
@@ -33,8 +32,6 @@ describe('when Trusted Types are available in global object', () => {
 isScript: ()=>false,
 isScriptURL: ()=>false,
 };
-ReactFeatureFlags=require('shared/ReactFeatureFlags');
-ReactFeatureFlags.enableTrustedTypesIntegration=true;
 React=require('react');
 ReactDOMClient=require('react-dom/client');
 ({act, assertConsoleErrorDev}=require('internal-test-utils'));
@@ -118,7 +115,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -129,7 +130,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('data-foo');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -153,7 +158,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject1);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Hi</b>');
+}
 
 setAttributeCalls.length=0;
 awaitact(()=>{
@@ -164,7 +173,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeCalls[0][0]).toBe(container.firstChild);
 expect(setAttributeCalls[0][1]).toBe('class');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeCalls[0][2]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeCalls[0][2]).toBe(ttObject2);
+}else{
+expect(setAttributeCalls[0][2]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttribute=setAttribute;
 }
@@ -189,7 +202,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject1);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Hi</b>');
+}
 
 setAttributeNSCalls.length=0;
 awaitact(()=>{
@@ -201,7 +218,11 @@ describe('when Trusted Types are available in global object', () => {
 expect(setAttributeNSCalls[0][1]).toBe('http://www.w3.org/1999/xlink');
 expect(setAttributeNSCalls[0][2]).toBe('xlink:href');
 // Ensure it didn't get stringified when passed to a DOM sink:
-expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+if(gate('enableTrustedTypesIntegration')){
+expect(setAttributeNSCalls[0][3]).toBe(ttObject2);
+}else{
+expect(setAttributeNSCalls[0][3]).toBe('<b>Bye</b>');
+}
 }finally{
 Element.prototype.setAttributeNS=setAttributeNS;
 }
@@ -212,13 +233,15 @@ describe('when Trusted Types are available in global object', () => {
 awaitact(()=>{
 root.render(<script>alert("I am not executed")</script>);
 });
-assertConsoleErrorDev([
-'Encountered a script tag while rendering React component. '+
-'Scripts inside React components are never executed when rendering '+
-'on the client. Consider using template tag instead '+
-'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
-' in script (at **)',
-]);
+if(gate('enableTrustedTypesIntegration')){
+assertConsoleErrorDev([
+'Encountered a script tag while rendering React component. '+
+'Scripts inside React components are never executed when rendering '+
+'on the client. Consider using template tag instead '+
+'(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n'+
+' in script (at **)',
+]);
+}
 
 // check that the warning is printed only once
 awaitact(()=>{

packages/shared/CheckStringCoercion.js

@@ -76,6 +76,8 @@ export function checkAttributeStringCoercion(
 attributeName: string,
 ): void|string{
 if(__DEV__){
+// TODO: for enableTrustedTypesIntegration we don't toString this
+// so we shouldn't need the DEV warning.
 if(willCoercionThrow(value)){
 console.error(
 'The provided `%s` attribute is an unsupported type %s.'+

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -35,12 +35,11 @@ export const enableScrollEndPolyfill: boolean = __VARIANT__;
 exportconstenableFragmentRefs: boolean=__VARIANT__;
 exportconstenableFragmentRefsScrollIntoView: boolean=__VARIANT__;
 exportconstenableAsyncDebugInfo: boolean=__VARIANT__;
-
 exportconstenableInternalInstanceMap: boolean=__VARIANT__;
+exportconstenableTrustedTypesIntegration: boolean=__VARIANT__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
 // Update the tests so that they pass in either mode, then set these
 // to __VARIANT__.
-exportconstenableTrustedTypesIntegration: boolean=false;
 // You probably *don't* want to add more hardcoded ones.
 // Instead, try to add them above with the __VARIANT__ value.