@planningcenter/sweetest-alert 2.0.0 → 2.0.2

package/README.md

@@ -24,6 +24,48 @@ This package requires the following peer dependencies:
 - `@planningcenter/tapestry` >=4
 - `@planningcenter/icons` ^15.29.1
 
+### Using with React 17
+
+The peer dependency range is `react`/`react-dom` `^18.3.1 || ^19.0.0` because sweetest-alert statically imports `createRoot` from `react-dom/client`, which doesn't exist on React 17. If your app is still on React 17 (as `giving` was — see [planningcenter/giving#8757](https://github.com/planningcenter/giving/pull/8757)), you can't upgrade react-dom just for this package, but you can shim the import your bundler resolves instead of the real module.
+
+Add a shim implementing the subset of the `react-dom/client` API sweetest-alert actually uses (`createRoot(container).render()`/`.unmount()`), backed by React 17's real APIs:
+
+```js
+// app/javascript/utils/react_dom_client_shim.js
+import ReactDOM from "react-dom"
+
+// react-dom/client doesn't exist on React 17. sweetest-alert statically
+// imports createRoot from it, which fails at build time otherwise. This
+// shim implements just the subset it actually uses so the import resolves
+// and behaves the same as it would on React 18. Remove once on React 18
+// and this can be dropped in favor of the real react-dom/client.
+export function createRoot(container) {
+  return {
+    render: (element) => {
+      ReactDOM.render(element, container)
+    },
+    unmount: () => ReactDOM.unmountComponentAtNode(container),
+  }
+}
+```
+
+Then alias `react-dom/client` to it in your bundler config. For Vite:
+
+```js
+// vite.config.mjs
+resolve: {
+  alias: [
+    // ...your other aliases,
+    {
+      find: "react-dom/client",
+      replacement: resolve(__dirname, "app/javascript/utils/react_dom_client_shim.js"),
+    },
+  ],
+},
+```
+
+If you also run tests through Vitest, add the same alias to its config (or to whatever `resolve.alias` it merges from your Vite config) so component tests resolve the shim too.
+
 ## Usage
 
 ### Basic Example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/sweetest-alert",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "The sweetest alert ever",
   "type": "module",
   "packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42",