react-dom/server-rendering-stub: restore experimental prefix for useFormState and useFormStatus (facebook#27470)

in facebook#27461 the experimental prefix was added back for `useFormState` and
`useFormStatus` in react-dom. However these functions are also exported
from the server rendering stub too and when using the stub with
experimental prefixes their absence causes unexpected errors.

This change adds back the experimental prefix for these two hooks to
match the experimental build of react-dom.

Author: gnoff

fixtures/concurrent/time-slicing/.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

fixtures/concurrent/time-slicing/package.json

@@ -1,20 +1,30 @@
 {
   "name": "cpu-demo",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "glamor": "^2.20.40",
     "react": "0.0.0-experimental-269dd6ec5",
     "react-dom": "0.0.0-experimental-269dd6ec5",
-    "react-markdown": "^3.2.0",
-    "react-scripts": "^1.1.4",
-    "victory": "^0.25.6"
+    "react-scripts": "^5.0.1",
+    "victory": "^36.0.0"
   },
   "scripts": {
     "copy-source": "cp -r ../../../build/oss-experimental/* ./node_modules/",
     "dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

fixtures/concurrent/time-slicing/public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <meta name="description" content="Shows use of sync, debounce, async computation in react">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

fixtures/concurrent/time-slicing/src/App.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState, useTransition } from "react";
+
+import _map from "lodash/map";
+import _debounce from "lodash/debounce";
+
+import { Charts, Clock, Options } from "./components";
+
+import { getStreamData } from "./utils";
+import { OPTIONS, INITIAL_STATE, STRATEGY, QUESTION_MARK } from "./constants";
+
+import "./index.css";
+
+let _ignoreClick = null;
+
+const App = () => {
+  const [showDemo, setShowDemo] = useState(INITIAL_STATE.showDemo);
+  const [strategy, setStrategy] = useState(INITIAL_STATE.strategy);
+  const [value, setValue] = useState(INITIAL_STATE.value);
+  const [showClock, setShowClock] = useState(INITIAL_STATE.showClock);
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    window.addEventListener("keydown", showClockEventHandler);
+    return () => {
+      window.removeEventListener("keydown", showClockEventHandler);
+    };
+  }, []);
+
+  const showClockEventHandler = (e) => {
+    if (e.key.toLowerCase() === QUESTION_MARK) {
+      e.preventDefault();
+      setShowClock((prev) => !prev);
+    }
+  };
+
+  const handleChartClick = (e) => {
+    if (showDemo) {
+      if (e.shiftKey) {
+        setShowDemo(false);
+      }
+      return;
+    }
+    if (strategy !== STRATEGY.ASYNC) {
+      setShowDemo((prev) => !prev);
+      return;
+    }
+    if (_ignoreClick) {
+      return;
+    }
+    _ignoreClick = true;
+
+    startTransition(() => {
+      setShowDemo(true);
+      _ignoreClick = false;
+    });
+  };
+
+  const handleChange = (e) => {
+    const val = e.target.value;
+    switch (strategy) {
+      case STRATEGY.SYNC:
+        setValue(val);
+        break;
+      case STRATEGY.DEBOUNCED:
+        debouncedHandleChange(val);
+        break;
+      case STRATEGY.ASYNC:
+        startTransition(() => {
+          setValue(val);
+        });
+        break;
+      default:
+        break;
+    }
+  };
+
+  const debouncedHandleChange = _debounce((val) => {
+    if (strategy === STRATEGY.DEBOUNCED) {
+      setValue(val);
+    }
+  }, 1000);
+
+  return (
+    <div className="container">
+      <div className="rendering">
+        {_map(OPTIONS, (option) => (
+          <Options
+            {...option}
+            key={option.strategy}
+            setStrategy={setStrategy}
+            currentStrategy={strategy}
+          />
+        ))}
+      </div>
+      <input
+        className={"input " + strategy}
+        id="input"
+        placeholder="longer input → more components and DOM nodes"
+        defaultValue={value}
+        onChange={handleChange}
+      />
+      <div className="demo" onClick={handleChartClick}>
+        {showDemo && (
+          <Charts data={getStreamData(value)} isPending={isPending} />
+        )}
+        {showClock && <Clock />}
+      </div>
+    </div>
+  );
+};
+
+export default App;