Update package-set to 0.15.4-20220808 and react dependency

[andys8]

Description of the change

Update to the latest package-set. Necessary to allow the latest react version v18 can be used cookbook examples

---

Checklist:

• Added the change to the changelog's "Unreleased" section with a reference to this PR (e.g. "- Made a change (#0 by @)")
• Linked any existing issues or proposals that this pull request should close
• Updated or added relevant documentation
• Added a test for the contribution (if applicable)

[andys8]

A bit of additional context: The first migrated react v18 example isn't working, and my assumption is it will start doing that after updating the package set.

It can be tested before and after with this link:

https://try.purescript.org/?github=JordanMartinez%2Fpurescript-cookbook%2Fmaster%2Frecipes%2FHelloReactHooks%2Fsrc%2FMain.purs&session=00809ee9-fae3-855c-7d22-570a92cbb7c2

Current State

[JordanMartinez]

I think the real culprit is the import map. See https://github.com/purescript/trypurescript/blob/master/client/public/frame.html#L28-L30

[andys8]

Oha, I didn't know this is the way JS dependencies are provided. Pushed 257c1bf

I think the real culprit

I assume both are valid issues. JS needs to be updated (otherwise JS error at runtime) and PureScript bindings available (the latter currently fails at compile time).

[JordanMartinez]

I still need to try this out locally to verify it works, but I don't see why it wouldn't.

[JordanMartinez]

When I build this locally, I get an error of Unknown module React.Basic.DOM.Client when I try to run the cookbook repo's HelloReactHooks example:

module HelloReactHooks.Main where

import Prelude

import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Exception (throw)
import React.Basic.DOM as R
import React.Basic.DOM.Client (createRoot, renderRoot)
import React.Basic.Hooks (Component, component)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toNonElementParentNode)
import Web.HTML.Window (document)

main :: Effect Unit
main = do
  doc <- document =<< window
  root <- getElementById "root" $ toNonElementParentNode doc
  case root of
    Nothing -> throw "Could not find root."
    Just container -> do
      reactRoot <- createRoot container
      app <- mkApp
      renderRoot reactRoot (app {})

mkApp :: Component {}
mkApp = do
  component "App" \_ -> React.do
    pure (R.text "Hello!")

I'm not sure why. I won't be able to look into this further today.

[andys8]

Hi there, I tried it out locally, too. It took some time to install both the whole Haskell and PureScript world before being able to run it, but it was worth it.

It looks like another export for the subdirectory was missing to be able to execute the new react examples: react-dom/client. It's now added to the importmap: 823e716

Here is a screenshot of trypurescript working with the example in Chrome and Firefox.

@JordanMartinez However, I do not think this is the error you mentioned. "Unknown module React.Basic.DOM.Client" is the PureScript error that this PR should fix by updating the package set. I did not encounter it myself locally - even before the importmap fix. Instead - if I had to guess - I would double check the branch is correct, the build is done and spago's cache was updated. Let me know if you still encounter it.

[JordanMartinez]

I think the issue was caused by me running the wrong npm commands. I was running npm run production:build && npm run serve. Notice how there's now npm run bundle in that, so I believe it was always bundling the old client.js code and never what I was working on. I should have been using npm run serve:production.

[JordanMartinez]

I did not encounter it myself locally - even before the importmap fix. Instead - if I had to guess - I would double check the branch is correct, the build is done and spago's cache was updated. Let me know if you still encounter it.

This tells me it's likely something on my end. I'm nuking things and will see how things go from there.

[andys8]

I should have been using npm run serve:production.

I think it has to be the dev version of commands to use the local setup. The production deployment wouldn't know of the new package set, right?

Use build:dev and base:dev if you are using a local Try PureScript server,
e.g. you followed the instructions in step 1.

Use build:production and base:production if you would like
to test the client against the production Try PureScript server.
npm run build:(dev|production)

[JordanMartinez]

I should have been using npm run serve:production.

I think it has to be the dev version of commands to use the local setup. The production deployment wouldn't know of the new package set, right?

Yup!
Ok, got it working, and yes we do need the react-dom/client import mapping.

[JordanMartinez]

I think there's a bug with jspm right now. This URL doesn't actually open anything for me. However, if I navigate to the above URL and then navigate to https://generator.jspm.io, then it shows what the URL should have displayed. 🤷‍♂️

[andys8]

Seems to work for me. 😅 Tested the link on mobile, different device.

[JordanMartinez]

Thanks for all your work!

[JordanMartinez]

Try PS was redeployed, but I'm getting this error when I run the HelloReactHooks example:

Uncaught TypeError: Error resolving module specifier “react-dom”. Relative module specifiers must start with “./”, “../” or “/”.

[JordanMartinez]

Undoing #295 locally fixes the issue. Ugh...

[JordanMartinez]

@andys8 Since I seem to have bad luck with my environment, can you confirm the above? Both that HelloReactHooks fails and that undoing shimMode: true makes it work again?