diff --git a/package.json b/package.json index f75ffbb28a..274c2506e7 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "2.6.0", + "@codesandbox/sandpack-react": "2.13.1", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.7.0", diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index d47fd903cf..a47fa6860c 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) { autorun, initMode: 'user-visible', initModeObserverOptions: {rootMargin: '1400px 0px'}, - bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev', + bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev', logLevel: SandpackLogLevel.None, }}> diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 705cdc8e41..36349ce931 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -182,26 +182,8 @@ import {useFormStatus} from 'react-dom'; export default function UsernameForm() { const {pending, data} = useFormStatus(); - const [showSubmitted, setShowSubmitted] = useState(false); - const submittedUsername = useRef(null); - const timeoutId = useRef(null); - - useMemo(() => { - if (pending) { - submittedUsername.current = data?.get('username'); - if (timeoutId.current != null) { - clearTimeout(timeoutId.current); - } - - timeoutId.current = setTimeout(() => { - timeoutId.current = null; - setShowSubmitted(false); - }, 2000); - setShowSubmitted(true); - } - }, [pending, data]); - return ( +<<<<<<< HEAD <>
@@ -212,6 +194,17 @@ export default function UsernameForm() {

提交请求用户名:{submittedUsername.current}

) : null} +======= +
+

Request a Username:

+ + +
+

{data ? `Requesting ${data?.get("username")}...`: ''}

+
+>>>>>>> 081d1008dd1eebffb9550a3ff623860a7d977acf ); } ``` @@ -219,10 +212,15 @@ export default function UsernameForm() { ```js src/App.js import UsernameForm from './UsernameForm'; import { submitForm } from "./actions.js"; +import {useRef} from 'react'; export default function App() { + const ref = useRef(null); return ( -
+ { + await submitForm(formData); + ref.current.reset(); + }}> ); @@ -231,8 +229,22 @@ export default function App() { ```js src/actions.js hidden export async function submitForm(query) { - await new Promise((res) => setTimeout(res, 1000)); + await new Promise((res) => setTimeout(res, 2000)); +} +``` + +```css +p { + height: 14px; + padding: 0; + margin: 2px 0 0 0 ; + font-size: 14px } + +button { + margin-left: 2px; +} + ``` ```json package.json hidden diff --git a/yarn.lock b/yarn.lock index 04b7daa59e..7ea8c35a29 100644 --- a/yarn.lock +++ b/yarn.lock @@ -611,29 +611,29 @@ style-mod "^4.0.0" w3c-keyname "^2.2.4" -"@codesandbox/nodebox@0.1.4": - version "0.1.4" - resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.4.tgz#1c9ed4caf6cda764500aec3d46b245e2e9b88ccc" - integrity sha512-+MR7JibjGjTRDmyQbL8Mliej6wakQP7q99+wGL/nOzd0Q3s+YWGQfv0QpYKbdMClKUTFJGvwzwOeqHVTkpWNCQ== +"@codesandbox/nodebox@0.1.8": + version "0.1.8" + resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d" + integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg== dependencies: - outvariant "^1.3.0" + outvariant "^1.4.0" strict-event-emitter "^0.4.3" -"@codesandbox/sandpack-client@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.6.0.tgz#a266ac49843a0c3263ac065daaba473cb9565193" - integrity sha512-JFCe+MU+5E+nXazrNK1uS/zLV5l4UNkYQx7AjF9sJ5ZmUlshz1HRDiK/Tdp6W+3ahcSERF3dcYPCf46LJF8Yvw== +"@codesandbox/sandpack-client@^2.13.0": + version "2.13.0" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.0.tgz#c4e12628a3aceb4a2c99c501bea691b4276eab27" + integrity sha512-1rOLj9wkbBd3RV6/zRq+IV52egy22RQMKDTtdR+lQzy87uj0tlbYjAwtUZSjkioHlj6U8Y82uWLf71nvFIxE0g== dependencies: - "@codesandbox/nodebox" "0.1.4" + "@codesandbox/nodebox" "0.1.8" buffer "^6.0.3" dequal "^2.0.2" - outvariant "1.3.0" + outvariant "1.4.0" static-browser-server "1.0.3" -"@codesandbox/sandpack-react@2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.6.0.tgz#2c2d98b50c9db462a32831071de7e5e710d000c2" - integrity sha512-zSeJXzaVt96aIFfkyr+bMKBjV2k3hVcX+j1+aBRIOCpHhTrbszPesUmcE3yNTzGqqQfX/JnIJNRmeqFKmSLjTQ== +"@codesandbox/sandpack-react@2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.1.tgz#ba69a227d0c5157bb48685a02fefc0baa83bdc09" + integrity sha512-R8oGO4QHHWTyA7r6NWHtBakizgX+rl/Rc6cbQunXGNm4vV/lqqU4NS+MVp2rXA+c8DifOLi1wA2wUZUN//Z9bw== dependencies: "@codemirror/autocomplete" "^6.4.0" "@codemirror/commands" "^6.1.3" @@ -643,13 +643,12 @@ "@codemirror/language" "^6.3.2" "@codemirror/state" "^6.2.0" "@codemirror/view" "^6.7.1" - "@codesandbox/sandpack-client" "^2.6.0" + "@codesandbox/sandpack-client" "^2.13.0" "@lezer/highlight" "^1.1.3" "@react-hook/intersection-observer" "^3.1.1" "@stitches/core" "^1.2.6" anser "^2.1.1" clean-set "^1.1.2" - codesandbox-import-util-types "^2.2.3" dequal "^2.0.2" escape-carriage "^1.3.1" lz-string "^1.4.4" @@ -1769,11 +1768,6 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== -codesandbox-import-util-types@^2.2.3: - version "2.2.3" - resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54" - integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ== - collapse-white-space@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" @@ -4635,16 +4629,16 @@ os-tmpdir@~1.0.2: resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -outvariant@1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.3.0.tgz#c39723b1d2cba729c930b74bf962317a81b9b1c9" - integrity sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ== - -outvariant@^1.3.0: +outvariant@1.4.0, outvariant@^1.3.0: version "1.4.0" resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e" integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw== +outvariant@^1.4.0: + version "1.4.2" + resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.2.tgz#f54f19240eeb7f15b28263d5147405752d8e2066" + integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ== + p-limit@^1.1.0: version "1.3.0" resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"