Merge pull request #4763 from plotly/remove-requirejs

archmoj · web-flow · commit ae32a704bdeb · 2024-10-21T15:05:02.000-04:00
Use modern `native ES6 import` to load plotly.js bundle instead of `requirejs` which is no longer under active development
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Fixed a bug in integer validation of arrays that threw an error when an array contained a mix of strings and integers.
 
+- Fixed a bug in JupyterLab >= 4 and Jupyter Notebook >= 7 that caused latex to not render in plotly charts. 
+
+- Use modern [native ES6 import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to load plotly.js bundle instead of requirejs which is [no longer under active development](https://github.com/requirejs/r.js/compare/2.3.6...2.3.7)
+
 ## [5.23.0] - 2024-07-23
 
 ### Updated
diff --git a/packages/python/plotly/plotly/basedatatypes.py b/packages/python/plotly/plotly/basedatatypes.py
@@ -3538,12 +3538,6 @@ def to_html(self, *args, **kwargs):
             plotly.min.js bundle that is assumed to reside in the same
             directory as the HTML file.
 
-            If 'require', Plotly.js is loaded using require.js.  This option
-            assumes that require.js is globally available and that it has been
-            globally configured to know how to find Plotly.js as 'plotly'.
-            This option is not advised when full_html=True as it will result
-            in a non-functional html file.
-
             If a string that ends in '.js', a script tag is included that
             references the specified path. This approach can be used to point
             the resulting HTML file to an alternative CDN or local bundle.
@@ -3647,12 +3641,6 @@ def write_html(self, *args, **kwargs):
             directory because the plotly.js source code will be included only
             once per output directory, rather than once per output file.
 
-            If 'require', Plotly.js is loaded using require.js.  This option
-            assumes that require.js is globally available and that it has been
-            globally configured to know how to find Plotly.js as 'plotly'.
-            This option is not advised when full_html=True as it will result
-            in a non-functional html file.
-
             If a string that ends in '.js', a script tag is included that
             references the specified path. This approach can be used to point
             the resulting HTML file to an alternative CDN or local bundle.
diff --git a/packages/python/plotly/plotly/io/_base_renderers.py b/packages/python/plotly/plotly/io/_base_renderers.py
@@ -249,7 +249,6 @@ def __init__(
         self,
         connected=False,
         full_html=False,
-        requirejs=True,
         global_init=False,
         config=None,
         auto_play=False,
@@ -261,7 +260,6 @@ def __init__(
         self.auto_play = auto_play
         self.connected = connected
         self.global_init = global_init
-        self.requirejs = requirejs
         self.full_html = full_html
         self.animation_opts = animation_opts
         self.post_script = post_script
@@ -275,27 +273,13 @@ def activate(self):
                     )
                 )
 
-            if not self.requirejs:
-                raise ValueError("global_init is only supported with requirejs=True")
-
             if self.connected:
-                # Connected so we configure requirejs with the plotly CDN
                 script = """\
         <script type="text/javascript">
         {win_config}
         {mathjax_config}
-        if (typeof require !== 'undefined') {{
-        require.undef("plotly");
-        requirejs.config({{
-            paths: {{
-                'plotly': ['{plotly_cdn}']
-            }}
-        }});
-        require(['plotly'], function(Plotly) {{
-            window._Plotly = Plotly;
-        }});
-        }}
         </script>
+        <script type="module">import \"{plotly_cdn}\"</script>
         """.format(
                     win_config=_window_plotly_config,
                     mathjax_config=_mathjax_config,
@@ -309,16 +293,8 @@ def activate(self):
         <script type="text/javascript">
         {win_config}
         {mathjax_config}
-        if (typeof require !== 'undefined') {{
-        require.undef("plotly");
-        define('plotly', function(require, exports, module) {{
-            {script}
-        }});
-        require(['plotly'], function(Plotly) {{
-            window._Plotly = Plotly;
-        }});
-        }}
         </script>
+        <script type="module">{script}</script>
         """.format(
                     script=get_plotlyjs(),
                     win_config=_window_plotly_config,
@@ -331,10 +307,7 @@ def to_mimebundle(self, fig_dict):
 
         from plotly.io import to_html
 
-        if self.requirejs:
-            include_plotlyjs = "require"
-            include_mathjax = False
-        elif self.connected:
+        if self.connected:
             include_plotlyjs = "cdn"
             include_mathjax = "cdn"
         else:
@@ -416,7 +389,6 @@ def __init__(
         super(NotebookRenderer, self).__init__(
             connected=connected,
             full_html=False,
-            requirejs=True,
             global_init=True,
             config=config,
             auto_play=auto_play,
@@ -444,7 +416,6 @@ def __init__(
         super(KaggleRenderer, self).__init__(
             connected=True,
             full_html=False,
-            requirejs=True,
             global_init=True,
             config=config,
             auto_play=auto_play,
@@ -472,7 +443,6 @@ def __init__(
         super(AzureRenderer, self).__init__(
             connected=True,
             full_html=False,
-            requirejs=True,
             global_init=True,
             config=config,
             auto_play=auto_play,
@@ -497,7 +467,6 @@ def __init__(
         super(ColabRenderer, self).__init__(
             connected=True,
             full_html=True,
-            requirejs=False,
             global_init=False,
             config=config,
             auto_play=auto_play,
@@ -832,7 +801,6 @@ def __init__(
         super(SphinxGalleryHtmlRenderer, self).__init__(
             connected=connected,
             full_html=False,
-            requirejs=False,
             global_init=False,
             config=config,
             auto_play=auto_play,
@@ -844,10 +812,7 @@ def to_mimebundle(self, fig_dict):
 
         from plotly.io import to_html
 
-        if self.requirejs:
-            include_plotlyjs = "require"
-            include_mathjax = False
-        elif self.connected:
+        if self.connected:
             include_plotlyjs = "cdn"
             include_mathjax = "cdn"
         else:
diff --git a/packages/python/plotly/plotly/io/_html.py b/packages/python/plotly/plotly/io/_html.py
@@ -67,12 +67,6 @@ def to_html(
         plotly.min.js bundle that is assumed to reside in the same
         directory as the HTML file.
 
-        If 'require', Plotly.js is loaded using require.js.  This option
-        assumes that require.js is globally available and that it has been
-        globally configured to know how to find Plotly.js as 'plotly'.
-        This option is not advised when full_html=True as it will result
-        in a non-functional html file.
-
         If a string that ends in '.js', a script tag is included that
         references the specified path. This approach can be used to point
         the resulting HTML file to an alternative CDN or local bundle.
@@ -254,20 +248,10 @@ def to_html(
     if isinstance(include_plotlyjs, str):
         include_plotlyjs = include_plotlyjs.lower()
 
-    # Start/end of requirejs block (if any)
-    require_start = ""
-    require_end = ""
-
     # Init and load
     load_plotlyjs = ""
 
-    # Init plotlyjs. This block needs to run before plotly.js is loaded in
-    # order for MathJax configuration to work properly
-    if include_plotlyjs == "require":
-        require_start = 'require(["plotly"], function(Plotly) {'
-        require_end = "});"
-
-    elif include_plotlyjs == "cdn":
+    if include_plotlyjs == "cdn":
         load_plotlyjs = """\
         {win_config}
         <script charset="utf-8" src="{cdn_url}"></script>\
@@ -343,10 +327,8 @@ def to_html(
             <div id="{id}" class="plotly-graph-div" \
 style="height:{height}; width:{width};"></div>\
             <script type="text/javascript">\
-                {require_start}\
-                    window.PLOTLYENV=window.PLOTLYENV || {{}};{base_url_line}\
-                    {script};\
-                {require_end}\
+                window.PLOTLYENV=window.PLOTLYENV || {{}};{base_url_line}\
+                {script};\
             </script>\
         </div>""".format(
         mathjax_script=mathjax_script,
@@ -355,9 +337,7 @@ def to_html(
         width=div_width,
         height=div_height,
         base_url_line=base_url_line,
-        require_start=require_start,
         script=script,
-        require_end=require_end,
     ).strip()
 
     if full_html:
@@ -433,12 +413,6 @@ def write_html(
         directory because the plotly.js source code will be included only
         once per output directory, rather than once per output file.
 
-        If 'require', Plotly.js is loaded using require.js.  This option
-        assumes that require.js is globally available and that it has been
-        globally configured to know how to find Plotly.js as 'plotly'.
-        This option is not advised when full_html=True as it will result
-        in a non-functional html file.
-
         If a string that ends in '.js', a script tag is included that
         references the specified path. This approach can be used to point
         the resulting HTML file to an alternative CDN or local bundle.
diff --git a/packages/python/plotly/plotly/tests/test_io/test_renderers.py b/packages/python/plotly/plotly/tests/test_io/test_renderers.py
@@ -145,14 +145,6 @@ def assert_offline(html):
     assert get_plotlyjs() in html
 
 
-def assert_requirejs(html):
-    assert 'require(["plotly"]' in html
-
-
-def assert_not_requirejs(html):
-    assert 'require(["plotly"]' not in html
-
-
 def test_colab_renderer_show(fig1):
     pio.renderers.default = "colab"
 
@@ -170,7 +162,6 @@ def test_colab_renderer_show(fig1):
     html = mock_arg1["text/html"]
     assert_full_html(html)
     assert_html_renderer_connected(html)
-    assert_not_requirejs(html)
 
     # check kwargs
     mock_kwargs = mock_call_args[1]
@@ -213,7 +204,6 @@ def test_notebook_connected_show(fig1, name, connected):
     # Check html display contents
     bundle_html = mock_arg1["text/html"]
     assert_not_full_html(bundle_html)
-    assert_requirejs(bundle_html)
 
     # check kwargs
     mock_kwargs = mock_call_args[1]
@@ -275,7 +265,6 @@ def open_url(url, new=0, autoraise=True):
     html = response.content.decode("utf8")
     assert_full_html(html)
     assert_offline(html)
-    assert_not_requirejs(html)
 
 
 # Validation
@@ -317,12 +306,12 @@ def test_repr_html(renderer):
         + '"></script>                '
         '<div id="cd462b94-79ce-42a2-887f-2650a761a144" class="plotly-graph-div" '
         'style="height:100%; width:100%;"></div>            <script type="text/javascript">'
-        "                                    window.PLOTLYENV=window.PLOTLYENV || {};"
-        '                                    if (document.getElementById("cd462b94-79ce-42a2-887f-2650a761a144"))'
+        "                window.PLOTLYENV=window.PLOTLYENV || {};"
+        '                                if (document.getElementById("cd462b94-79ce-42a2-887f-2650a761a144"))'
         ' {                    Plotly.newPlot(                        "cd462b94-79ce-42a2-887f-2650a761a144",'
         '                        [],                        {"template":{}},'
         '                        {"responsive": true}                    )                };'
-        "                            </script>        </div>"
+        "            </script>        </div>"
     )
     if "text/html" in bundle:
         str_bundle = bundle["text/html"]
