Rename SECRET INTERNALS to __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE (#28789)

Follow up to #28783 and #28786.

Since we've changed the implementations of these we can rename them to
something a bit more descriptive while we're at it, since anyone
depending on them will need to upgrade their code anyway.

"react" with no condition:
`__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`
"react" with "react-server" condition:
`__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`
"react-dom":
`__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`

Author: sebmarkbage

fixtures/dom/public/act-dom.html

@@ -10,7 +10,7 @@
     <script src="scheduler-unstable_mock.development.js"></script>
     <script src="react.development.js"></script>
     <script type="text/javascript">
-      window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler =
+      window.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.Scheduler =
         window.SchedulerMock;
     </script>
     <script src="react-dom.development.js"></script>

packages/react-cache/src/ReactCacheOld.js

@@ -45,7 +45,7 @@ const Resolved = 1;
 const Rejected = 2;
 
 const SharedInternals =
-  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 
 function readContext(Context: ReactContext<mixed>) {
   const dispatcher = SharedInternals.H;

packages/react-devtools-shared/src/__tests__/legacy/editing-test.js

@@ -64,11 +64,11 @@ describe('editing interface', () => {
 
       act(() =>
         ReactDOM.render(
-          <ClassComponent
-            array={[1, 2, 3]}
-            object={{nested: 'initial'}}
-            shallow="initial"
-          />,
+          React.createElement(ClassComponent, {
+            array: [1, 2, 3],
+            object: {nested: 'initial'},
+            shallow: 'initial',
+          }),
           document.createElement('div'),
         ),
       );
@@ -270,7 +270,10 @@ describe('editing interface', () => {
 
       act(() =>
         ReactDOM.render(
-          <ClassComponent object={{nested: 'initial'}} shallow="initial" />,
+          React.createElement(ClassComponent, {
+            object: {nested: 'initial'},
+            shallow: 'initial',
+          }),
           document.createElement('div'),
         ),
       );
@@ -489,9 +492,11 @@ describe('editing interface', () => {
 
       act(() =>
         ReactDOM.render(
-          <LegacyContextProvider>
-            <ClassComponent />
-          </LegacyContextProvider>,
+          React.createElement(
+            LegacyContextProvider,
+            null,
+            React.createElement(ClassComponent),
+          ),
           document.createElement('div'),
         ),
       );

packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js

@@ -62,7 +62,10 @@ describe('InspectedElementContext', () => {
     const Example = () => null;
 
     act(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, document.createElement('div')),
+      ReactDOM.render(
+        React.createElement(Example, {a: 1, b: 'abc'}),
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -91,19 +94,19 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          boolean_false={false}
-          boolean_true={true}
-          infinity={Infinity}
-          integer_zero={0}
-          integer_one={1}
-          float={1.23}
-          string="abc"
-          string_empty=""
-          nan={NaN}
-          value_null={null}
-          value_undefined={undefined}
-        />,
+        React.createElement(Example, {
+          boolean_false: false,
+          boolean_true: true,
+          infinity: Infinity,
+          integer_zero: 0,
+          integer_one: 1,
+          float: 1.23,
+          string: 'abc',
+          string_empty: '',
+          nan: NaN,
+          value_null: null,
+          value_undefined: undefined,
+        }),
         document.createElement('div'),
       ),
     );
@@ -178,28 +181,28 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          anonymous_fn={instance.anonymousFunction}
-          array_buffer={arrayBuffer}
-          array_of_arrays={arrayOfArrays}
+        React.createElement(Example, {
+          anonymous_fn: instance.anonymousFunction,
+          array_buffer: arrayBuffer,
+          array_of_arrays: arrayOfArrays,
           // eslint-disable-next-line no-undef
-          big_int={BigInt(123)}
-          bound_fn={exampleFunction.bind(this)}
-          data_view={dataView}
-          date={new Date(123)}
-          fn={exampleFunction}
-          html_element={div}
-          immutable={immutableMap}
-          map={mapShallow}
-          map_of_maps={mapOfMaps}
-          object_of_objects={objectOfObjects}
-          react_element={<span />}
-          regexp={/abc/giu}
-          set={setShallow}
-          set_of_sets={setOfSets}
-          symbol={Symbol('symbol')}
-          typed_array={typedArray}
-        />,
+          big_int: BigInt(123),
+          bound_fn: exampleFunction.bind(this),
+          data_view: dataView,
+          date: new Date(123),
+          fn: exampleFunction,
+          html_element: div,
+          immutable: immutableMap,
+          map: mapShallow,
+          map_of_maps: mapOfMaps,
+          object_of_objects: objectOfObjects,
+          react_element: React.createElement('span'),
+          regexp: /abc/giu,
+          set: setShallow,
+          set_of_sets: setOfSets,
+          symbol: Symbol('symbol'),
+          typed_array: typedArray,
+        }),
         document.createElement('div'),
       ),
     );
@@ -333,7 +336,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example object={object} />,
+        React.createElement(Example, {object}),
         document.createElement('div'),
       ),
     );
@@ -363,7 +366,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example object={object} />,
+        React.createElement(Example, {object}),
         document.createElement('div'),
       ),
     );
@@ -390,7 +393,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example iteratable={iteratable} />,
+        React.createElement(Example, {iteratable}),
         document.createElement('div'),
       ),
     );
@@ -445,7 +448,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example data={new CustomData()} />,
+        React.createElement(Example, {data: new CustomData()}),
         document.createElement('div'),
       ),
     );
@@ -537,7 +540,10 @@ describe('InspectedElementContext', () => {
     });
 
     act(() =>
-      ReactDOM.render(<Example data={object} />, document.createElement('div')),
+      ReactDOM.render(
+        React.createElement(Example, {data: object}),
+        document.createElement('div'),
+      ),
     );
 
     const id = ((store.getElementIDAtIndex(0): any): number);
@@ -605,7 +611,7 @@ describe('InspectedElementContext', () => {
     const Example = ({data}) => null;
     act(() =>
       ReactDOM.render(
-        <Example data={testData} />,
+        React.createElement(Example, {data: testData}),
         document.createElement('div'),
       ),
     );
@@ -631,8 +637,8 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          nestedObject={{
+        React.createElement(Example, {
+          nestedObject: {
             a: {
               b: {
                 c: [
@@ -644,8 +650,8 @@ describe('InspectedElementContext', () => {
                 ],
               },
             },
-          }}
-        />,
+          },
+        }),
         document.createElement('div'),
       ),
     );
@@ -746,7 +752,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example nestedObject={nestedObject} />,
+        React.createElement(Example, {nestedObject}),
         document.createElement('div'),
       ),
     );
@@ -802,7 +808,7 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example nestedObject={nestedObject} />,
+        React.createElement(Example, {nestedObject}),
         document.createElement('div'),
       ),
     );
@@ -872,17 +878,17 @@ describe('InspectedElementContext', () => {
 
     act(() =>
       ReactDOM.render(
-        <Example
-          arrayBuffer={arrayBuffer}
-          dataView={dataView}
-          map={map}
-          set={set}
-          mapOfMaps={mapOfMaps}
-          setOfSets={setOfSets}
-          typedArray={typedArray}
-          immutable={immutable}
-          bigInt={bigInt}
-        />,
+        React.createElement(Example, {
+          arrayBuffer: arrayBuffer,
+          dataView: dataView,
+          map: map,
+          set: set,
+          mapOfMaps: mapOfMaps,
+          setOfSets: setOfSets,
+          typedArray: typedArray,
+          immutable: immutable,
+          bigInt: bigInt,
+        }),
         document.createElement('div'),
       ),
     );