Add 'plotly_noembed' cargo feature

This adds a new `plotly_noembed` feature that can be used to reduce the
sizes of binaries by not embedding `plotly.min.js`.

Since askama can not handle compile-time flags, we had to duplicate the
`plot.html` and `static_plot.html` templates, where the new
`*_noembed.html` version only contains the CDN-variant.

The `use_local_plotly` option has been feature-gated such that it is
not available when using the new feature.

I verified that this works by building an application that depends on
plotly.rs (including optimization and LTO in all cases):

    no plotly:   4.96 MiB (5,201,920 bytes)
    master:      8.96 MiB (9,400,320 bytes)
    this branch: 5.44 MiB (5,701,632 bytes)

The difference between this branch and master is 3,698,688 bytes, which
is very close to the size of `plotly.min.js` (3,686,400 bytes). Just as
expected.

Author: David Peter

CHANGELOG.md

@@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.10.0] - 2024-xx-xx
+### Added
+- [[#231](https://github.com/plotly/plotly.rs/pull/231)] Added new `plotly_noembed` feature to reduce binary sizes by not embedding `plotly.min.js`.
+
 ## [0.9.0] - 2024-06-29
 ### Added
 - [[#153](https://github.com/plotly/plotly.rs/pull/153)] Added `LayoutScene`.

README.md

@@ -201,6 +201,11 @@ Adds trait implementations so that `image::RgbImage` and `image::RgbaImage` can
 
 Adds support for creating plots directly using [ndarray](https://github.com/rust-ndarray/ndarray) types.
 
+### `plotly_noembed`
+
+This feature can be used to reduce the binary size by not embedding `plotly.min.js`. This requires the use of the CDN version,
+and disables the `use_local_plotly` method.
+
 ### `wasm`
 
 Enables compilation for the `wasm32-unknown-unknown` target and provides access to a `bindings` module containing wrappers around functions exported by the plotly.js library.

plotly/Cargo.toml

@@ -17,6 +17,7 @@ exclude = ["target/*"]
 kaleido = ["plotly_kaleido"]
 plotly_ndarray = ["ndarray"]
 plotly_image = ["image"]
+plotly_noembed = []
 wasm = ["getrandom", "js-sys", "wasm-bindgen", "wasm-bindgen-futures"]
 with-axum = ["rinja/with-axum", "rinja_axum"]
 

plotly/src/plot.rs

@@ -11,13 +11,22 @@ use serde::Serialize;
 
 use crate::{Configuration, Layout};
 
+#[cfg(not(feature = "plotly_noembed"))]
 #[derive(Template)]
 #[template(path = "plot.html", escape = "none")]
 struct PlotTemplate<'a> {
     plot: &'a Plot,
     remote_plotly_js: bool,
 }
 
+#[cfg(feature = "plotly_noembed")]
+#[derive(Template)]
+#[template(path = "plot_noembed.html", escape = "none")]
+struct PlotTemplate<'a> {
+    plot: &'a Plot,
+}
+
+#[cfg(not(feature = "plotly_noembed"))]
 #[derive(Template)]
 #[template(path = "static_plot.html", escape = "none")]
 #[cfg(not(target_family = "wasm"))]
@@ -29,6 +38,17 @@ struct StaticPlotTemplate<'a> {
     height: usize,
 }
 
+#[cfg(feature = "plotly_noembed")]
+#[derive(Template)]
+#[template(path = "static_plot_noembed.html", escape = "none")]
+#[cfg(not(target_family = "wasm"))]
+struct StaticPlotTemplate<'a> {
+    plot: &'a Plot,
+    format: ImageFormat,
+    width: usize,
+    height: usize,
+}
+
 #[derive(Template)]
 #[template(path = "inline_plot.html", escape = "none")]
 struct InlinePlotTemplate<'a> {
@@ -182,6 +202,7 @@ pub struct Plot {
     #[serde(rename = "config")]
     configuration: Configuration,
     #[serde(skip)]
+    #[cfg(not(feature = "plotly_noembed"))]
     remote_plotly_js: bool,
 }
 
@@ -190,6 +211,7 @@ impl Plot {
     pub fn new() -> Plot {
         Plot {
             traces: Traces::new(),
+            #[cfg(not(feature = "plotly_noembed"))]
             remote_plotly_js: true,
             ..Default::default()
         }
@@ -203,6 +225,7 @@ impl Plot {
     /// Note that when using `Plot::to_inline_html()`, it is assumed that the
     /// `plotly.js` library is already in scope, so setting this attribute
     /// will have no effect.
+    #[cfg(not(feature = "plotly_noembed"))]
     pub fn use_local_plotly(&mut self) {
         self.remote_plotly_js = false;
     }
@@ -422,6 +445,7 @@ impl Plot {
     fn render(&self) -> String {
         let tmpl = PlotTemplate {
             plot: self,
+            #[cfg(not(feature = "plotly_noembed"))]
             remote_plotly_js: self.remote_plotly_js,
         };
         tmpl.render().unwrap()
@@ -432,6 +456,7 @@ impl Plot {
         let tmpl = StaticPlotTemplate {
             plot: self,
             format,
+            #[cfg(not(feature = "plotly_noembed"))]
             remote_plotly_js: self.remote_plotly_js,
             width,
             height,

plotly/templates/plot_noembed.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+</head>
+
+<body>
+    <div>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js"></script>
+        <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
+
+        <div id="plotly-html-element" class="plotly-graph-div" style="height:100%; width:100%;"></div>
+
+        <script type="module">
+            const graph_div = document.getElementById("plotly-html-element");
+            await Plotly.newPlot(graph_div, {{ plot| tojson | safe }});
+        </script>
+    </div>
+</body>
+
+</html>

plotly/templates/static_plot_noembed.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+    </head>
+    <body>
+        <div>
+            <script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js"></script>
+            <script src="https://cdn.plot.ly/plotly-2.12.1.min.js"></script>
+
+            <div id="plotly-html-element" hidden></div>
+            <img id="plotly-img-element"></img>
+
+            <script type="module">
+                const graph_div = document.getElementById("plotly-html-element");
+                await Plotly.newPlot(graph_div, {{ plot|tojson|safe }});
+                
+                const img_element = document.getElementById("plotly-img-element");
+                const data_url = await Plotly.toImage(
+                    graph_div,
+                    {
+                        format: "{{ format }}",
+                        width: {{ width }},
+                        height: {{ height }},
+                    }
+                );
+
+                img_element.setAttribute("src", data_url);
+            </script>
+        </div>
+    </body>
+</html>