replace strict-d3 IIFE with browserify 'require' transform

- which replaces all `require('d3')` with `require('./strict-d3')`
- so that strict-d3.js can more easily be used across all our tools
- activate when bundling plotly.js in jasmine tests,
  `npm run watch` and `npm run cibuild`
- 🔪 <script> injecting old IIFE
- require('fast-isnumeric') in strict-d3.js

Author: etpinard

devtools/test_dashboard/index.html

@@ -21,7 +21,6 @@
 
   <script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script id="source" type="text/javascript" src="../../build/plotly.js"></script>
-  <script type="text/javascript" src="../../test/image/strict-d3.js" charset="utf-8"></script>
   <script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
 </body>
 </html>

tasks/cibundle.js

@@ -16,6 +16,7 @@ var _bundle = require('./util/browserify_wrapper');
 _bundle(constants.pathToPlotlyIndex, constants.pathToPlotlyBuild, {
     standalone: 'Plotly',
     pathToMinBundle: constants.pathToPlotlyDistMin,
+    debug: true
 });
 
 // Browserify the geo assets

tasks/util/browserify_wrapper.js

@@ -7,6 +7,7 @@ var UglifyJS = require('uglify-js');
 var constants = require('./constants');
 var compressAttributes = require('./compress_attributes');
 var patchMinified = require('./patch_minified');
+var strictD3 = require('./strict_d3');
 
 /** Convenience browserify wrapper
  *
@@ -32,16 +33,20 @@ module.exports = function _bundle(pathToIndex, pathToBundle, opts) {
     opts = opts || {};
 
     // do we output a minified file?
-    var pathToMinBundle = opts.pathToMinBundle,
-        outputMinified = !!pathToMinBundle && !opts.debug;
+    var pathToMinBundle = opts.pathToMinBundle;
+    var outputMinified = !!pathToMinBundle;
 
     var browserifyOpts = {};
     browserifyOpts.standalone = opts.standalone;
     browserifyOpts.debug = opts.debug;
     browserifyOpts.transform = outputMinified ? [compressAttributes] : [];
 
-    var b = browserify(pathToIndex, browserifyOpts),
-        bundleWriteStream = fs.createWriteStream(pathToBundle);
+    if(opts.debug) {
+        browserifyOpts.transform.push(strictD3);
+    }
+
+    var b = browserify(pathToIndex, browserifyOpts);
+    var bundleWriteStream = fs.createWriteStream(pathToBundle);
 
     bundleWriteStream.on('finish', function() {
         logger(pathToBundle);

tasks/util/constants.js

@@ -58,6 +58,7 @@ module.exports = {
     pathToTestDashboardBundle: path.join(pathToBuild, 'test_dashboard-bundle.js'),
     pathToImageViewerBundle: path.join(pathToBuild, 'image_viewer-bundle.js'),
 
+    pathToImageTest: pathToImageTest,
     pathToTestImageMocks: path.join(pathToImageTest, 'mocks/'),
     pathToTestImageBaselines: path.join(pathToImageTest, 'baselines/'),
     pathToTestImages: path.join(pathToBuild, 'test_images/'),

tasks/util/strict_d3.js

@@ -0,0 +1,26 @@
+var path = require('path');
+var transformTools = require('browserify-transform-tools');
+var constants = require('./constants');
+
+var pathToStrictD3Module = path.join(
+    constants.pathToImageTest,
+    'strict-d3.js'
+);
+
+/**
+ * Transform `require('d3')` expressions to `require(/path/to/strict-d3.js)`
+ */
+
+module.exports = transformTools.makeRequireTransform('requireTransform',
+    { evaluateArguments: true, jsFilesOnly: true },
+    function(args, opts, cb) {
+        var pathIn = args[0];
+        var pathOut;
+
+        if(pathIn === 'd3' && opts.file !== pathToStrictD3Module) {
+            pathOut = 'require(\'' + pathToStrictD3Module + '\')';
+        }
+
+        if(pathOut) return cb(null, pathOut);
+        else return cb();
+    });

tasks/util/watchified_bundle.js

@@ -7,6 +7,7 @@ var prettySize = require('prettysize');
 var constants = require('./constants');
 var common = require('./common');
 var compressAttributes = require('./compress_attributes');
+var strictD3 = require('./strict_d3');
 
 /**
  * Make a plotly.js browserify bundle function watched by watchify.
@@ -22,7 +23,7 @@ module.exports = function makeWatchifiedBundle(onFirstBundleCallback) {
     var b = browserify(constants.pathToPlotlyIndex, {
         debug: true,
         standalone: 'Plotly',
-        transform: [compressAttributes],
+        transform: [strictD3, compressAttributes],
         cache: {},
         packageCache: {},
         plugin: [watchify]

test/image/index.html

@@ -5,7 +5,6 @@
 <script type="text/javascript" src="../plotly.js/dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
 <script type="text/javascript" src="../plotly.js/build/plotly.js" charset="utf-8"></script>
 <script type="text/javascript" src="../plotly.js/dist/plotly-geo-assets.js" charset="utf-8"></script>
-<script type="text/javascript" src="../plotly.js/test/image/strict-d3.js" charset="utf-8"></script>
 <script type="text/javascript" src="./main.js"></script>
 </body>
 </html>

test/image/strict-d3.js

@@ -2,77 +2,45 @@
  * strict-d3: wrap selection.style to prohibit specific incorrect style values
  * that are known to cause problems in IE (at least IE9)
  */
+'use strict';
 
-/* global Plotly:false */
-(function() {
-    'use strict';
+var d3 = require('d3');
+var isNumeric = require('fast-isnumeric');
 
-    var selProto = Plotly.d3.selection.prototype;
+var selProto = d3.selection.prototype;
+var originalSelStyle = selProto.style;
 
-    var originalSelStyle = selProto.style;
+selProto.style = function() {
+    var sel = this;
+    var obj = arguments[0];
 
-    selProto.style = function() {
-        var sel = this,
-            obj = arguments[0];
-
-        if(sel.size()) {
-            if(typeof obj === 'string') {
-                checkVal(sel, obj, arguments[1]);
-            }
-            else {
-                Object.keys(obj).forEach(function(key) { checkVal(sel, key, obj[key]); });
-            }
-        }
-
-        return originalSelStyle.apply(sel, arguments);
-    };
-
-    function checkVal(sel, key, val) {
-        if(typeof val === 'string') {
-            // in case of multipart styles (stroke-dasharray, margins, etc)
-            // test each part separately
-            val.split(/[, ]/g).forEach(function(valPart) {
-                var pxSplit = valPart.length - 2;
-                if(valPart.substr(pxSplit) === 'px' && !isNumeric(valPart.substr(0, pxSplit))) {
-                    throw new Error('d3 selection.style called with value: ' + val);
-                }
-            });
-        }
-
-        // Microsoft browsers incl. "Edge" don't support CSS transform on SVG elements
-        if(key === 'transform' && sel.node() instanceof SVGElement) {
-            throw new Error('d3 selection.style called on an SVG element with key: ' + key);
+    if(sel.size()) {
+        if(typeof obj === 'string') {
+            checkStyleVal(sel, obj, arguments[1]);
+        } else {
+            Object.keys(obj).forEach(function(key) { checkStyleVal(sel, key, obj[key]); });
         }
     }
 
-    // below ripped from fast-isnumeric so I don't need to build this file
-
-    function allBlankCharCodes(str) {
-        var l = str.length,
-            a;
-        for(var i = 0; i < l; i++) {
-            a = str.charCodeAt(i);
-            if((a < 9 || a > 13) && (a !== 32) && (a !== 133) && (a !== 160) &&
-                (a !== 5760) && (a !== 6158) && (a < 8192 || a > 8205) &&
-                (a !== 8232) && (a !== 8233) && (a !== 8239) && (a !== 8287) &&
-                (a !== 8288) && (a !== 12288) && (a !== 65279)) {
-                return false;
+    return originalSelStyle.apply(sel, arguments);
+};
+
+function checkStyleVal(sel, key, val) {
+    if(typeof val === 'string') {
+        // in case of multipart styles (stroke-dasharray, margins, etc)
+        // test each part separately
+        val.split(/[, ]/g).forEach(function(valPart) {
+            var pxSplit = valPart.length - 2;
+            if(valPart.substr(pxSplit) === 'px' && !isNumeric(valPart.substr(0, pxSplit))) {
+                throw new Error('d3 selection.style called with value: ' + val);
             }
-        }
-        return true;
+        });
     }
 
-    function isNumeric(n) {
-        var type = typeof n;
-        if(type === 'string') {
-            var original = n;
-            n = +n;
-            // whitespace strings cast to zero - filter them out
-            if(n === 0 && allBlankCharCodes(original)) return false;
-        }
-        else if(type !== 'number') return false;
-
-        return n - n < 1;
+    // Microsoft browsers incl. "Edge" don't support CSS transform on SVG elements
+    if(key === 'transform' && sel.node() instanceof SVGElement) {
+        throw new Error('d3 selection.style called on an SVG element with key: ' + key);
     }
+}
 
-})();
+module.exports = d3;

test/jasmine/karma.conf.js

@@ -95,6 +95,7 @@ if(isFullSuite) {
 }
 
 var pathToShortcutPath = path.join(__dirname, '..', '..', 'tasks', 'util', 'shortcut_paths.js');
+var pathToStrictD3 = path.join(__dirname, '..', '..', 'tasks', 'util', 'strict_d3.js');
 var pathToMain = path.join(__dirname, '..', '..', 'lib', 'index.js');
 var pathToJQuery = path.join(__dirname, 'assets', 'jquery-1.8.3.min.js');
 var pathToIE9mock = path.join(__dirname, 'assets', 'ie9_mock.js');
@@ -193,7 +194,7 @@ func.defaultConfig = {
     },
 
     browserify: {
-        transform: [pathToShortcutPath],
+        transform: [pathToStrictD3, pathToShortcutPath],
         extensions: ['.js'],
         watch: !argv.nowatch,
         debug: true