Align viewer with altair repo

altair_viewer/_viewer.py

@@ -69,22 +69,32 @@
 INLINE_HTML = r"""
 <div id="{output_div}"></div>
 <script type="text/javascript">
-  (function(spec, embedOpt) {{
-    const outputDiv = document.getElementById("{output_div}");
-    const urls = {{
+  var VEGA_DEBUG = (typeof VEGA_DEBUG == "undefined") ? {{}} : VEGA_DEBUG;
+  (function(spec, embedOpt){{
+    let outputDiv = document.currentScript.previousElementSibling;
+    if (outputDiv.id !== "{output_div}") {{
+      outputDiv = document.getElementById("{output_div}");
+    }}
+    const paths = {{
       "vega": "{vega_url}",
       "vega-lite": "{vegalite_url}",
       "vega-embed": "{vegaembed_url}",
     }};
-    function loadScript(lib) {{
-      return new Promise(function(resolve, reject) {{
-        var s = document.createElement('script');
-        s.src = urls[lib];
-        s.async = true;
-        s.onload = () => resolve(urls[lib]);
-        s.onerror = () => reject(`Error loading script: ${{urls[lib]}}`);
-        document.getElementsByTagName("head")[0].appendChild(s);
-      }});
+    function maybeLoadScript(lib, version) {{
+      var key = `${{lib.replace("-", "")}}_version`;
+      return (VEGA_DEBUG[key] == version) ?
+        Promise.resolve(paths[lib]) :
+        new Promise(function(resolve, reject) {{
+          var s = document.createElement('script');
+          document.getElementsByTagName("head")[0].appendChild(s);
+          s.async = true;
+          s.onload = () => {{
+            VEGA_DEBUG[key] = version;
+            return resolve(paths[lib]);
+          }};
+          s.onerror = () => reject(`Error loading script: ${{paths[lib]}}`);
+          s.src = paths[lib];
+        }});
     }}
     function showError(err) {{
       outputDiv.innerHTML = `<div class="error" style="color:red;">${{err}}</div>`;
@@ -94,23 +104,15 @@
       vegaEmbed(outputDiv, spec, embedOpt)
         .catch(err => showError(`Javascript Error: ${{err.message}}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));
     }}
-
     if(typeof define === "function" && define.amd) {{
-        // requirejs paths need '.js' extension stripped.
-        const paths = Object.keys(urls).reduce(function(paths, package) {{
-            paths[package] = urls[package].replace(/\.js$/, "");
-            return paths
-        }}, {{}})
-        requirejs.config({{paths}});
-        require(["vega-embed"], displayChart, err => showError(`Error loading script: ${{err.message}}`));
-    }} else if (typeof vegaEmbed === "function") {{
-        displayChart(vegaEmbed);
+      requirejs.config({{paths}});
+      require(["vega-embed"], displayChart, err => showError(`Error loading script: ${{err.message}}`));
     }} else {{
-        loadScript("vega")
-            .then(() => loadScript("vega-lite"))
-            .then(() => loadScript("vega-embed"))
-            .catch(showError)
-            .then(() => displayChart(vegaEmbed));
+      maybeLoadScript("vega", "{{vega_version}}")
+        .then(() => maybeLoadScript("vega-lite", "{{vegalite_version}}"))
+        .then(() => maybeLoadScript("vega-embed", "{{vegaembed_version}}"))
+        .catch(showError)
+        .then(() => displayChart(vegaEmbed));
     }}
   }})({spec}, {embedOpt});
 </script>