Update POS render function to use createRoot

[js-goupil]

Background

Currently all of our teardown functionality does not work. For example, the return method from a useEffect does not work in UI Extensions for POS (and I think on the other surfaces it's also broken?).

Solution

This replaces the deprecated render call with the createRoot function, which returns a root which has a render function, and an unmount function. We are passing the unmount method into the Promise.resolve, which means that it can be used on the host side to properly unmount everything when POS unmounts the UIExtensionContainer.

🎩

You can tophat this on POS with the following POS Branch: https://github.com/Shopify/pos-next-react-native/pull/42289

1. Pull this branch to your machine.
2. Run yarn build, and go to the build directory for ui-extensions-react, and find the esm/surfaces/point-of-sale/render.mjs file that gets generated. Copy the contents.
3. In a POS UI Extension running locally, paste the contents of that into the node_modules/@shopify/ui-extensions-react/build/esm/surfaces/point-of-sale/render.mjs.
4. Run your UI Extension and implement a useEffect with a tear down function.
5. Inject your UI Extension into POS on the branch I specified at the top of this tophat section.
6. Using a webview debugging console, make sure your tear down is getting called!

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[github-actions]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.

[js-goupil]

I'm not exactly sure what else would be required in this file, but this seems to work properly. Also it would be nice to know if this change is desired elsewhere. @vividviolet you mentioned we could just share this function implementation instead of having it be duplicated everywhere.

[js-goupil]

@NathanJolly Testing this on main of POS without any changes as seen in my other draft PR seems to work just fine. However, I don't feel the need to squeeze this in for 2024-10. If anything breaks on POS because of something we didn't test, well it just doesn't feel worth the risk right now. But perhaps while I'm on intermission you guys can ship this once the 2024-10 cut as been made, and then we can implement the appropriate changes on POS.

[vividviolet]

I do think we should share this fix with other surface areas to be consistent

[js-goupil]

@vividviolet Updated the PR to move the logic into a shared util function. I can update the admin UI Extension with another commit in this PR if you want, or we can wait until you guys are ready down the line?

[vividviolet]

@vividviolet Updated the PR to move the logic into a shared util function. I can update the admin UI Extension with another commit in this PR if you want, or we can wait until you guys are ready down the line?

Can you please add it for admin as well? I think we do want it for the upcoming Oct release. I'll test the PR for Admin.

[js-goupil]

Can you please add it for admin as well? I think we do want it for the upcoming Oct release. I'll test the PR for Admin.

done

@vividviolet