31:[] 2f:{"title":"React x Observable","cells":[{"id":0,"value":"md`# React x Observable\n\n~~~js\nimport { React, jsx, render } from \"@dralletje/react-x-observable\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`\n### Getting a hold of react\nYou can overwrite \\`USE_DEV\\` to determine what version you want to use.\nIt defaults to development.\n\n~~~js\nREACT_USE_DEV = false;\nimport { React, render } with { REACT_USE_DEV as USE_DEV } from \"@dralletje/react-x-observable\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"USE_DEV = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"react_require_prod = require.alias({\n react: \"react@16/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.production.min.js\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"react_require_dev = require.alias({\n react: \"react@16/umd/react.development.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.development.js\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"react_require = USE_DEV ? react_require_dev : react_require_prod","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"render = (container, element) => {\n if (element == null) {\n element = container;\n container = null;\n }\n\n // Used to check specifically for `container == null`, but turns out\n // that doesn't work nicely always with Observable.\n if (!container) {\n container = html`

`;\n Object.defineProperties(container, {\n value: {\n get: () => container.firstChild.value\n },\n addEventListener: {\n get: () =>\n container.firstChild.addEventListener.bind(container.firstChild)\n }\n });\n }\n\n element = typeof element === 'function' ? jsx`<${element} />` : element;\n ReactDOM.render(\n jsx`\n <${React.Suspense} fallback=${jsx`

`}>\n ${element}\n \n `,\n container\n );\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"React = react_require(\"react\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"ReactDOM = react_require(\"react-dom\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"jsx = (await require(\"htm@3/dist/htm.umd.js\")).bind(React.createElement)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`## Viewof integration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"useActLikeObservableView = ({ ref, value }) => {\n React.useLayoutEffect(() => {\n ref.current.value = value;\n ref.current.dispatchEvent(new CustomEvent('input'));\n }, [value]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"ObservableView = React.forwardRef(({ value, tag = 'div', ...props }, _ref) => {\n let ref = useEnsuredForwardedRef(_ref);\n useActLikeObservableView({ ref, value });\n return jsx`<${tag} ref=${ref} ...${props} />`;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"function useEnsuredForwardedRef(forwardedRef) {\n const ensuredRef = React.useRef(forwardedRef && forwardedRef.current);\n\n React.useLayoutEffect(() => {\n if (!forwardedRef) {\n return;\n }\n forwardedRef.current = ensuredRef.current;\n }, [forwardedRef]);\n\n return ensuredRef;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`# Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"md`## Can do viewof`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"viewof too_simple_example = render(jsx``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"too_simple_example","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`## Get value from component`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"login","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof login = {\n let Login = () => {\n let [username, set_username] = React.useState(\"\");\n let [password, set_password] = React.useState(\"\");\n\n return jsx`\n <${ObservableView}\n value=${{ username, password }}\n style=${{ display: 'flex', flexDirection: 'column' }}\n >\n Username:\n set_username(event.target.value)}\n />\n Password:\n set_password(event.target.value)}\n />\n \n `;\n };\n return render(jsx`<${Login} />`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`## Mutable as state`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"mutable username = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"TextArea = render(\n this,\n jsx`\n Username\n
\n {\n mutable username = event.target.value;\n }}\n />\n `\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Shadow DOM is pretty cool actually`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}