30:T546,render = (render, keyOrElement) => __SECRET_INTERNALS("elements", String(render), keyOrElement, { init: (state) => { // updated from original notebook. Rest of code is unchanged. const element = DOM.element("div"); return { renderer: () => state.render(state.public), id: __SECRET_CREATE_ID(), element, // updated from original notebook. Rest of code is unchanged. root: ReactDOM.createRoot(element), public: { useSetter: (setterOrValue, deps) => typeof setterOrValue === "function" ? useEffect( () => state.public.setValue( setterOrValue(state.public.getValue()) ), deps ) : useEffect(() => state.public.setValue(setterOrValue), [ setterOrValue ]), getValue: () => state.element.value, setValue: (value) => { state.element.value = value; state.element.dispatchEvent(new CustomEvent("input")); } } }; }, update: { render }, // updated from original notebook. Rest of code is unchanged. effect: (state) => state.root.render(createElement(state.renderer)), return: (state) => state.element })31:[] 2e:{"title":"React with Experimental Features","cells":[{"id":0,"value":"md`\n# React with Experimental Features\n\nMy [React notebook](https://observablehq.com/@j-f1/react), except updated to use the preview version of React. As of this writing, the only experimental feature is Concurrent Mode.\n\nFrom [the docs](https://reactjs.org/docs/concurrent-mode-reference.html):\n> **Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!**\n\n${__SECRET_SWITCHER('@j-f1/react-experimental')}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof reset = html``;\n\n let resolved = false;\n const answer = 42;\n let resolve;\n let promise = new Promise(r => (resolve = r));\n\n const view = html`

demoAnswerResource = ${loadButton}`;\n\n  loadButton.addEventListener('click', () => {\n    view.querySelector('.content').innerHTML =\n      '42';\n    resolved = true;\n    resolve(answer);\n  });\n\n  view.value = {\n    read() {\n      if (resolved) {\n        return answer;\n      } else {\n        throw promise;\n      }\n    }\n  };\n\n  return view;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"render(\n  () => jsx`\n    <${Suspense} fallback=${jsx`Waiting to compute the answer`}>\n      <${DemoAnswer} />\n    \n  `\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"DemoAnswer = component(() => jsx`${demoAnswerResource.read()}`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`Suspense-enabled \\`render\\` function, adapted from the one in the parent notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`\n## Overrides\n*See [the original React notebook](https://observablehq.com/@j-f1/react#versionRangeDoc) for more on these.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"versionRange = \"experimental\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dev = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Re-exports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof SuspenseList = __SECRET_CONCURRENT_MODE_DOC('SuspenseList')","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof useTransition = __SECRET_CONCURRENT_MODE_DOC('useTransition')","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof useDeferredValue = __SECRET_CONCURRENT_MODE_DOC('useDeferredValue')","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof startTransition = __SECRET_DOC(\n  \"https://github.com/reactwg/react-18/discussions/41\",\n  \"startTransition\",\n  React.startTransition\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"React","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {\n  // Notebook APIs\n  component,\n  memo,\n  forwardRef,\n  // Imports\n  jsx,\n  React,\n  ReactDOM,\n  // React\n  createElement,\n  Children,\n  createRef,\n  createContext,\n  lazy,\n  Fragment,\n  StrictMode,\n  Suspense,\n  cloneElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  useDebugValue,\n  // React DOM\n  createPortal,\n  // private APIs\n  __SECRET_INTERNALS,\n  __SECRET_CREATE_ID,\n  __SECRET_DOC,\n  __SECRET_SWITCHER\n} with { dev, versionRange } from '@j-f1/react'","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`## Support code\\n*Nothing to see here*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"__SECRET_CONCURRENT_MODE_DOC = (name) =>\n  __SECRET_DOC(\n    \"https://reactjs.org/docs/concurrent-mode-reference.html#\" +\n      name.toLowerCase(),\n    name,\n    React[name]\n  )","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}