Dynamically load javascript and css links (#181)

* First version that works

Horribly mutilated code. Still needs to be cleaned up.

* WIP tests fixed

There is also code included to ensure we can run without
any js links, which is a should not happen scenario.

Need to test this later and see if it can be removed again.

Also, Dual Map tests do not work, but this is because
the dual map feature is also broken.

* Fix DualMap

* Black

* Dummy change to trigger build rerun

README.md

@@ -30,3 +30,6 @@ Currently, there are two functions defined:
 ## Example
 
 ![streamlit_folium example](https://raw.githubusercontent.com/randyzwitch/streamlit-folium/master/tests/visual_baseline/test_basic/first_test/baseline.png)
+
+
+

streamlit_folium/__init__.py

@@ -366,6 +366,23 @@ def bounds_to_dict(bounds_list: list[list[float]]) -> dict[str, dict[str, float]
                 st.info("Layer control js:")
                 st.code(layer_control_string)
 
+    def walk(fig):
+        if isinstance(fig, folium.plugins.DualMap):
+            yield from walk(fig.m1)
+            yield from walk(fig.m2)
+        if isinstance(fig, folium.elements.JSCSSMixin):
+            yield fig
+        if hasattr(fig, "_children"):
+            for child in fig._children.values():
+                yield from walk(child)
+
+    css_links = []
+    js_links = []
+
+    for elem in walk(folium_map):
+        css_links.extend([href for _, href in elem.default_css])
+        js_links.extend([src for _, src in elem.default_js])
+
     component_value = _component_func(
         script=leaflet,
         html=html,
@@ -381,6 +398,8 @@ def bounds_to_dict(bounds_list: list[list[float]]) -> dict[str, dict[str, float]
         return_on_hover=return_on_hover,
         layer_control=layer_control_string,
         pixelated=pixelated,
+        css_links=css_links,
+        js_links=js_links,
     )
 
     return component_value

streamlit_folium/frontend/public/index.html

@@ -6,153 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Streamlit-folium component" />
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"
-    />
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-    <script src="https://d3js.org/d3.v4.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.0/leaflet-dvf.markers.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/python-visualization/folium@master/folium/templates/leaflet_heat.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/jieter/Leaflet.Sync/L.Map.Sync.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.featuregroup.subgroup.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/leaflet.markercluster.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/iso8601.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/leaflet.boatmarker/leaflet.boatmarker.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/jieter/Leaflet.Sync/L.Map.Sync.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/ljagis/[email protected]/dist/leaflet-measure.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Control.Geocoder.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/marslan390/BeautifyMarker/leaflet-beautify-marker-icon.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-search.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/pa7_hm.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/pa7_leaflet_hm.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-ant-path.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/leaflet.textpath.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/leaflet.polylineoffset.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/Semicircle.min.js"></script>
-    <script src="https://teastman.github.io/Leaflet.pattern/leaflet.pattern.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.66.2/L.Control.Locate.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Leaflet.VectorGrid.bundled.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-realtime/2.2.0/leaflet-realtime.js"></script>
-
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/marslan390/BeautifyMarker/leaflet-beautify-marker-icon.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.Default.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.control.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.66.2/L.Control.Locate.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.Default.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/ljagis/[email protected]/dist/leaflet-measure.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet-search.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.control.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.control.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.css"
-    />
     <style>
       .single > :nth-child(1) {
         width: 100%;