fix!: do not use a custom resolve function that auto imports from esm.sh

Although initially this worked well, we do not know if we want to load
from a module, or from esm.sh. Instead, we can have the default
import map make MUI and confetti-canvas work.

README.md

@@ -223,14 +223,15 @@ Apart from `react`, the default we provide is:
 
 ```python
 define_import_map({
-    "@mui/material": "https://esm.sh/@mui/[email protected]",
-    "@mui/material/": "https://esm.sh/@mui/[email protected]/",
-    "@mui/icons-material/": "https://esm.sh/@mui/icons-material/",
-    "canvas-confetti": "https://esm.sh/[email protected]",
+    "@mui/material": "https://esm.sh/@mui/[email protected]?external=react,react-dom",
+    "@mui/material/": "https://esm.sh/@mui/[email protected]&external=react,react-dom/",
+    "@mui/icons-material/": "https://esm.sh/@mui/icons-material/?external=react,react-dom",
+    "canvas-confetti": "https://esm.sh/[email protected]?external=react,react-dom",
 })
-
 ```
 
+_Note that it is important to add `external=react,react-dom`, otherwise [esm.sh](https://esm.sh/#using-import-maps) would import ReactJS again_.
+
 Which means we can now write our ConfettiButton as:
 
 ```python

examples/full_tutorial.ipynb

@@ -773,10 +773,10 @@
     "\n",
     "```python\n",
     "define_import_map({\n",
-    "    \"@mui/material\": \"https://esm.sh/@mui/[email protected]\",\n",
-    "    \"@mui/material/\": \"https://esm.sh/@mui/[email protected]/\",\n",
-    "    \"@mui/icons-material/\": \"https://esm.sh/@mui/icons-material/\",\n",
-    "    \"canvas-confetti\": \"https://esm.sh/[email protected]\",\n",
+    "    \"@mui/material\": \"https://esm.sh/@mui/[email protected]?external=react,react-dom\",\n",
+    "    \"@mui/material/\": \"https://esm.sh/@mui/[email protected]&external=react,react-dom/\",\n",
+    "    \"@mui/icons-material/\": \"https://esm.sh/@mui/icons-material/?external=react,react-dom\",\n",
+    "    \"canvas-confetti\": \"https://esm.sh/[email protected]?external=react,react-dom\",\n",
     "})\n",
     "\n",
     "```\n",

ipyreact/importmap.py

@@ -69,9 +69,9 @@ def _update_import_map():
 # still for backwards compatibility
 define_import_map(
     {
-        "@mui/material": "https://esm.sh/@mui/[email protected]",
-        "@mui/material/": "https://esm.sh/@mui/[email protected]/",
-        "@mui/icons-material/": "https://esm.sh/@mui/icons-material/",
-        "canvas-confetti": "https://esm.sh/[email protected]",
+        "@mui/material": "https://esm.sh/@mui/[email protected]?external=react,react-dom",
+        "@mui/material/": "https://esm.sh/@mui/[email protected]&external=react,react-dom/",
+        "@mui/icons-material/": "https://esm.sh/@mui/icons-material/?external=react,react-dom",
+        "canvas-confetti": "https://esm.sh/[email protected]?external=react,react-dom",
     }
 )

src/widget.tsx

@@ -97,39 +97,39 @@ async function ensureImportShimLoaded() {
   return await importShimLoaded;
 }
 
-function autoExternalReactResolve(
-  id: string,
-  parentUrl: string,
-  resolve: (arg0: any, arg1: any) => any,
-) {
-  const shipsWith =
-    id == "react" ||
-    id == "react-dom" ||
-    id == "react/jsx-runtime" ||
-    id == "react-dom/client" ||
-    id == "react-reconciler" ||
-    id == "react-reconciler/constants";
-  const alreadyPatched = parentUrl.includes("?external=react,react-dom");
-  const parentIsEsmSh = parentUrl.startsWith("https://esm.sh/");
-  const isBlob = id.startsWith("blob:");
-  if (!shipsWith && !id.includes("://") && !parentIsEsmSh) {
-    id = "https://esm.sh/" + id;
-  }
-  if (!shipsWith && !alreadyPatched && !isBlob) {
-    id = id + "?external=react,react-dom";
-  }
-  return resolve(id, parentUrl);
-}
+// function autoExternalReactResolve(
+//   id: string,
+//   parentUrl: string,
+//   resolve: (arg0: any, arg1: any) => any,
+// ) {
+//   const shipsWith =
+//     id == "react" ||
+//     id == "react-dom" ||
+//     id == "react/jsx-runtime" ||
+//     id == "react-dom/client" ||
+//     id == "react-reconciler" ||
+//     id == "react-reconciler/constants";
+//   const alreadyPatched = parentUrl.includes("?external=react,react-dom");
+//   const parentIsEsmSh = parentUrl.startsWith("https://esm.sh/");
+//   const isBlob = id.startsWith("blob:");
+//   if (!shipsWith && !id.includes("://") && !parentIsEsmSh) {
+//     id = "https://esm.sh/" + id;
+//   }
+//   if (!shipsWith && !alreadyPatched && !isBlob) {
+//     id = id + "?external=react,react-dom";
+//   }
+//   return resolve(id, parentUrl);
+// }
 
 // @ts-ignore
 window.esmsInitOptions = {
   shimMode: true,
   mapOverrides: true,
-  resolve: (
-    id: string,
-    parentUrl: string,
-    resolve: (id: string, parentUrl: string) => any,
-  ) => autoExternalReactResolve(id, parentUrl, resolve),
+  // resolve: (
+  //   id: string,
+  //   parentUrl: string,
+  //   resolve: (id: string, parentUrl: string) => any,
+  // ) => autoExternalReactResolve(id, parentUrl, resolve),
 };
 
 let react18ESMUrls: any = null;