Upgrade to React 18.2 and add thin cljs hooks layer

[mk]

This upgrades React to 18.2 and adds a thin layer over react hooks for more ergonomic cljs usage:

• the fn passed to useEffect returns js/undefined for any non-function value
• hooks that can take a deps array default to an empty array, and convert vectors/sequences to arrays
• useState and useRef return values that behave like atoms

• Use new createRoot api
• Fix plotly & vega, see https://reactjs.org/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks and error below
• Fix console errors

Warning: useEffect must not return anything besides a function, which is used for clean-up.

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

[mk]

@borkdude sci doesn't support async functions, right? Maybe I need to take a similar approach as in https://github.com/nextjournal/nextjournal/blob/2f667c5c71eb50dfeaccd3334e109f30207912a6/journal/src/com/nextjournal/editor/eval/observablehq.cljs#L19-L28.

[borkdude]

@mk Async function in JS just means:

• returns promise
• you can use async/await syntax

You can achieve the same in SCI using promesa.

[mk]

@borkdude did you see the error above? Not sure what the differences are, we are currently returning a promise but it suggests It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately.

[borkdude]

@mk Can you show me where that error is? I'll be able to take a deeper look in an hour or so

[mk]

@borkdude you get it locally on the console when showing the vega or plotly sample notebook.

[borkdude]

@mk Right, I don't know if there is a flag to "toggle" a function's asyncness, but wrapping it inside an async function which awaits the inner promise might work then.

[borkdude]

This hack may also work:

cljs.user=> (def sci-fn (sci/eval-string "(fn [] (js/Promise.resolve 10))" {:classes {'js js/globalThis :allow :all}}))
#'cljs.user/sci-fn
cljs.user=> (def async-constructor (js/eval "(async function () {}).constructor"))
#'cljs.user/async-constructor
cljs.user=> (set! (.-constructor sci-fn) async-constructor)
#object[AsyncFunction]
cljs.user=> (sci-fn)
#object[Promise [object Promise]]

[mhuebert]

@mk I believe you're seeing that error because useEffect should either return a function or js/undefined. In the React doc examples, they are calling their async function at the end of their useEffect function but since it's JS there is no implicit return so the function returns undefined.

[mhuebert]

In 95b0db1 I added a thin layer over react hooks for more ergonomic cljs usage:

• the fn passed to useEffect returns js/undefined for any non-function value
• hooks that can take a deps array default to an empty array, and convert vectors/sequences to arrays
• useState and useRef return values that behave like atoms

[mk]

@mhuebert looks fantastic, thank you!