Provide regl-based traces in the strict bundle

CONTRIBUTING.md

@@ -162,6 +162,23 @@ npm run schema
 
 **IMPORTANT:** please do not change and commit any files in the "dist" folder
 
+#### Step 9: REGL - Review & commit potential changes to precompiled regl shaders
+
+If you are implementing a new feature that involves regl shaders, or if you are
+making changes that affect the usage of regl shaders, you would need to run
+
+```bash
+npm run regl-codegen
+```
+
+to regenerate the regl code. This opens a browser window, runs through all
+traces with 'regl' in the tags, and stores the captured code into 
+[src/generated/regl-codegen](https://github.com/plotly/plotly.js/blob/master/src/generated/regl-codegen). If no updates are necessary, it would be a no-op, but
+if there are changes, you would need to commit them.
+
+This is needed because regl performs codegen in runtime which breaks CSP
+compliance, and so for strict builds we pre-generate regl shader code here.
+
 #### Other npm scripts that may be of interest in development
 
 - `npm run preprocess`: pre-processes the css and svg source file in js. This

devtools/regl_codegen/devtools.js

@@ -0,0 +1,154 @@
+'use strict';
+
+/* global Plotly:false */
+
+var mocks = require('../../build/test_dashboard_mocks.json');
+var reglTraces = require('../../build/regl_traces.json');
+var Lib = require('@src/lib');
+const { fillGroupStyle } = require('../../src/components/drawing');
+
+// Our gracious testing object
+var Tabs = {
+
+    // Return the specified plot container (or default one)
+    getGraph: function(id) {
+        id = id || 'graph';
+        return document.getElementById(id);
+    },
+
+    // Create a new plot container
+    fresh: function(id) {
+        id = id || 'graph';
+
+        var graphDiv = Tabs.getGraph(id);
+
+        if(graphDiv) {
+            graphDiv.parentNode.removeChild(graphDiv);
+        }
+
+        graphDiv = document.createElement('div');
+        graphDiv.className = 'dashboard-plot';
+        graphDiv.id = id;
+
+        var plotArea = document.getElementById('plots');
+        plotArea.appendChild(graphDiv);
+
+        return graphDiv;
+    },
+
+    // Plot a mock by name (without .json) to the default or specified container
+    plotMock: function(mockName, id) {
+        return new Promise(function (res, rej) {
+
+            var mockURL = '/test/image/mocks/' + mockName + '.json';
+
+            console.warn('Plotting:', mockURL);
+
+            var request = new XMLHttpRequest();
+            request.open('GET', mockURL, true);
+            request.responseType = '';
+            request.send();
+
+            request.onreadystatechange = function() {
+                if(this.readyState === 4) {
+                    if(this.status === 200) {
+                        var fig = JSON.parse(this.responseText);
+                        var graphDiv = Tabs.fresh(id);
+
+                        Plotly.newPlot(graphDiv, fig);
+
+                        graphDiv.on('plotly_afterplot', function() {
+                            res(graphDiv);
+                        });
+
+                    } else {
+                        console.error(this.statusText);
+                    }
+                }
+            };
+        })
+    },
+};
+
+
+// Bind things to the window
+window.Tabs = Tabs;
+window.Lib = Lib;
+window.onload = handleOnLoad;
+setInterval(function() {
+    window.gd = Tabs.getGraph() || Tabs.fresh();
+    window.fullLayout = window.gd._fullLayout;
+    window.fullData = window.gd._fullData;
+}, 1000);
+
+var mocksList = document.getElementById('mocks-list');
+
+async function handleOnLoad() {
+    var mocksByReglTrace = {};
+
+    for (var trace of reglTraces) {
+        mocksByReglTrace[trace] = [];
+        for (var mock of mocks) {
+            if (mock.keywords.indexOf(trace) !== -1) {
+                mocksByReglTrace[trace].push(mock);
+            }
+        }
+    }
+
+    for (var trace of Object.keys(mocksByReglTrace)) {
+        var thisMocks = mocksByReglTrace[trace];
+        var div = document.createElement('div');
+        div.className = 'mock-group';
+        div.innerHTML = '<h3>' + trace + '</h3>';
+        mocksList.appendChild(div);
+        for (var mock of thisMocks) {
+            var a = document.createElement('a');
+            a.className = 'mock-link';
+            a.innerHTML = mock.name;
+            a.href = '#' + mock.name;
+            a.onclick = function() {
+                Tabs.plotMock(this.innerHTML)
+            };
+            div.appendChild(a);
+            div.appendChild(document.createElement('br'));
+        }
+    }
+
+    // visit the mocks one by one.
+    for (var trace of Object.keys(mocksByReglTrace)) {
+        var thisMocks = mocksByReglTrace[trace];
+        var generated = {}
+        for (var mock of thisMocks) {
+            var gd = await Tabs.plotMock(mock.name);
+            var fullLayout = gd._fullLayout;
+            fullLayout._glcanvas.each(function (d) {
+                if (d.regl) {
+                    console.log("found regl", d.regl);
+                    var cachedCode = d.regl.getCachedCode();
+                    Object.entries(cachedCode).forEach(([hash, code]) => {
+                        generated[hash] = code.toString();
+                    });
+                    console.log("merging entries", Object.keys(cachedCode));
+                }
+            })
+        }
+
+        console.log(window.__regl_codegen_cache);
+        var body = JSON.stringify({
+            generated,
+            trace: trace
+        });
+        window.__regl_codegen_cache = {};
+        await fetch("/api/submit-code", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body
+        });
+    }
+
+    // close
+    await fetch("/api/codegen-done");
+    window.close();
+}

devtools/regl_codegen/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>REGL Codegen</title>
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"/>
+  <link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+<body>
+  <section id="mocks-list"></section>
+  <div id="plots">
+    <div id="graph"></div>
+  </div>
+  <div id="snapshot"></div>
+
+  <script src="../../node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
+  <script charset="utf-8" id="source"  type="module">import "../../build/plotly.js"</script>
+  <script charset="utf-8" src="../../build/regl_codegen-bundle.js"></script>
+</body>
+</html>