Fallback for dynamic-importmap

Author: keller-mark

src/vitessce/widget.py

@@ -155,7 +155,14 @@ def get_uid_str(uid):
 
 # lang: js
 ESM = """
-import { importWithMap } from 'https://unpkg.com/[email protected]';
+let importWithMap;
+try {
+    importWithMap = (await import('https://unpkg.com/[email protected]')).importWithMap;
+} catch(e) {
+    console.warn("Import of dynamic-importmap failed, trying fallback.");
+    importWithMap = (await import('https://cdn.vitessce.io/[email protected]/dist/index.js')).importWithMap;
+}
+
 const successfulImportMap = {
     imports: {
 
@@ -170,11 +177,10 @@ def get_uid_str(uid):
 };
 const fallbackImportMap = {
     imports: {
-        //"react": "https://cdn.vitessce.io/[email protected]/index.js",
-        //"react-dom": "https://cdn.vitessce.io/[email protected]/index.js",
-        //"react-dom/client": "https://cdn.vitessce.io/[email protected]/es2022/client.mjs",
-
-        // Replace with version-specific URL below.
+        "react": "https://cdn.vitessce.io/[email protected]/index.js",
+        "react-dom": "https://cdn.vitessce.io/[email protected]/index.js",
+        "react-dom/client": "https://cdn.vitessce.io/[email protected]/es2022/client.mjs",
+        // Replaced with version-specific URL below.
         "vitessce": "https://cdn.vitessce.io/[email protected]/dist/index.min.js",
     },
 };
@@ -184,15 +190,13 @@ def get_uid_str(uid):
         "react": "https://cdn.vitessce.io/[email protected]/index_dev.js",
         "react-dom": "https://cdn.vitessce.io/[email protected]/index_dev.js",
         "react-dom/client": "https://cdn.vitessce.io/[email protected]/es2022/client.development.mjs",
-        // Replace with version-specific URL below.
+        // Replaced with version-specific URL below.
         "vitessce": "https://cdn.vitessce.io/@vitessce/[email protected]/dist/index.js",
     },
 };
 */
 
 async function importWithMapAndFallback(moduleName, importMap, fallbackMap) {
-    console.log(`Importing ${moduleName} with import map`, importMap, fallbackMap);
-
     let result = null;
     if (!fallbackMap) {
         // fallbackMap is null, user may have provided custom JS URL.
@@ -213,7 +217,7 @@ def get_uid_str(uid):
             });
             successfulImportMap.imports[moduleName] = importMap.imports[moduleName];
         } catch (e) {
-            console.warn(`Importing ${moduleName} failed with import map`, importMap, e);
+            console.warn(`Importing ${moduleName} failed with importMap`, importMap, "trying fallback", fallbackMap, successfulImportMap);
             result = await importWithMap(moduleName, {
                 imports: {
                     ...fallbackMap.imports,
@@ -315,7 +319,6 @@ def get_uid_str(uid):
 }
 
 async function render(view) {
-    console.log("Rendering Vitessce widget...");
     const cssUid = view.model.get('uid');
     const jsDevMode = view.model.get('js_dev_mode');
     const jsPackageVersion = view.model.get('js_package_version');