feat(plugin): Add support for Stanford Diagrams

- Implement plugin interface
- Implement Stanford Diagram plugin

Fix #829

.babelrc

@@ -17,6 +17,7 @@
     ],
     "plugins": [
         "@babel/plugin-transform-runtime",
+        "@babel/plugin-proposal-class-properties",
         "add-module-exports",
         "transform-inline-consecutive-adds",
         "transform-merge-sibling-variables",

.eslintrc

@@ -1,10 +1,10 @@
 {
+    "parser": "babel-eslint",
     "env": {
         "browser": true,
         "node": true,
         "mocha": true
     },
-    // Naver https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md
     "extends": "naver",
     "rules": {
         "linebreak-style": 0,

AUTHORS.txt

@@ -26,3 +26,4 @@ Jinwoo Oh <[email protected]>
 Nirmal Guna <[email protected]>
 Michael Yungerman <[email protected]>
 Malte Batram <[email protected]>
+Daniel Oliveira <[email protected]>

config/webpack.config.development.js

@@ -1,5 +1,6 @@
 const merge = require("webpack-merge");
 const WriteFilePlugin = require("write-file-webpack-plugin");
+const plugin = require("./webpack.config.plugin")();
 
 const config = {
 	devtool: "inline-source-map",
@@ -25,7 +26,20 @@ const config = {
 			}
 		]
 	},
-	plugins: [new WriteFilePlugin()],
+	plugins: [new WriteFilePlugin()]
 };
 
-module.exports = common => merge.smart(common, config);
+module.exports = (common, env) => {
+	if (env.plugin) {
+		config.entry = plugin.entry;
+		config.output = plugin.output;
+		config.externals = plugin.externals;
+
+		console.log(config.entry, config.output)
+	}
+
+	return env.plugin ? merge.strategy({
+		entry: "replace",
+		output: "replace"
+	})(common, config) : merge.smart(common, config);
+};

config/webpack.config.plugin.js

@@ -0,0 +1,63 @@
+const merge = require("webpack-merge");
+const webpack = require("webpack");
+const fs = require("fs");
+const path = require("path");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
+const uglifyConfig = require("./uglify");
+const banner = require("./banner");
+
+const srcPath = "./src/plugin/";
+const distPath = path.resolve(__dirname, "../dist/plugin/");
+
+// construct entry point
+const entry = {};
+
+fs.readdirSync(path.resolve(__dirname, `.${srcPath}`), {
+	withFileTypes: true
+}).forEach(dirent => {
+	if (dirent.isDirectory()) {
+		const name = dirent.name;
+
+		entry[name] = `${srcPath}${name}/index.js`;
+	}
+});
+
+const config = {
+	entry: entry,
+	output: {
+		path: distPath,
+		filename: `billboardjs-plugin-[name].js`,
+		library: ["bb", "plugin", "[name]"],
+		libraryExport: "default",
+		libraryTarget: "umd",
+		umdNamedDefine: true
+	},
+	devtool: false,
+	plugins: [
+		new webpack.BannerPlugin({
+			banner: banner.production,
+			entryOnly: true
+		})
+	]
+};
+
+module.exports = (common, env) => {
+	if (env && env.MIN) {
+		config.output.filename = config.output.filename.replace(".js", ".min.js");
+		config.plugins.push(new UglifyJSPlugin(uglifyConfig));
+	} else {
+		config.plugins.push(new CleanWebpackPlugin({
+			cleanOnceBeforeBuildPatterns: [distPath],
+			verbose: true,
+			dry: false,
+			beforeEmit: true
+		}));
+	}
+
+	return merge.smartStrategy({
+		entry: "replace",
+		output: "replace",
+		module: "replace"
+	})(common, config);
+};

config/webpack.config.theme.js

@@ -46,12 +46,15 @@ const config = {
 	},
 	devtool: false,
 	plugins: [
+		// clean before build
 		new CleanWebpackPlugin({
 			cleanOnceBeforeBuildPatterns: [distPath],
 			verbose: true,
 			dry: false,
 			beforeEmit: true
 		}),
+
+		// clean after build
 		new WebpackCleanPlugin(Object.keys(entry).map(v => `${v}.${tmpExt}`), {
 			basePath: distPath
 		}),

demo/chart.js

@@ -1,5 +1,8 @@
 /* eslint-disable */
 var billboardDemo = {
+	replacer: {
+		plugin: "__PLUGIN__"
+	},
 	/**
 	 * Initializer
 	 */
@@ -43,8 +46,7 @@ var billboardDemo = {
 			if (window.innerWidth > WIDTH) {
 				$wrapper && ($wrapper.className = "");
 			}
-
-		})
+		});
 	},
 
 	/**
@@ -140,6 +142,8 @@ var billboardDemo = {
 			data: []
 		};
 
+		key = type +"."+ key;
+
 		// generate chart
 		isArray ? typeData.forEach(function(t, i) {
 			self._addChartInstance(t, key, i + 1, code);
@@ -162,15 +166,78 @@ var billboardDemo = {
 			str : str.charAt(0).toLowerCase() + str.slice(1);
 	},
 
-	_addChartInstance: function(type, key, index, code) {
-		key = this.getLowerFirstCase(key);
+	getPluginsCodeStr(val) {
+		var key = this.replacer.plugin;
+		var plugins = key;
+
+		val.forEach(function(p) {
+			Object.keys(p).forEach(function(key) {
+				plugins += "new bb.plugin."+ key +"(";
+				plugins += JSON.stringify(p[key], null, 5).replace(/}$/, "    }");
+				plugins += "),";
+			})
+		});
+
+		return plugins + key;
+	},
+
+	getCodeStr(options, key, index) {
+		var self = this;
+
+		var codeStr = "var chart"+ (index > 1 ? index : "") +" = bb.generate(" +
+			JSON.stringify(options, function(k, v) {
+				if (typeof v === "function") {
+					return v.toString().replace(/\t+}$/, Array(/(format|data)/.test(k) ? 8 : 4).join(" ") + "}");
+				} else if (/(columns|rows|json)/.test(k)) {
+					var str = JSON.stringify(v)
+						.replace(/\[\[/g, "[\r\n\t[")
+						.replace(/\]\]/g, "]\r\n    ]")
+						.replace(/(],)/g, "$1\r\n\t")
+						.replace(/(\"|\d),/g, "$1, ");
+
+					return k === "json" ?
+						str.replace(/{/, "{\r\n\t").replace(/}/, "\r\n    }") : str;
+				} else if (k === "_plugins") {
+					return [self.getPluginsCodeStr(v)];
+				}
+
+				return v;
+			}, 2)
+			.replace(/\"?(function|})\"?/g, "$1")
+			.replace(/\\"/g, "\"")
+			.replace(/</g, "&lt;")
+			.replace(/\\t/g, "\t")
+			.replace(/\t{5}/g, "")
+			.replace(/\\r/g, "\r")
+			.replace(/"(\w+)":/g, "$1:")
+			.replace("_plugins", "plugins")
+			.replace(new RegExp('"?'+ this.replacer.plugin +'"?', "g"), "");
+
+			if (/multiline/i.test(key)) {
+				codeStr = codeStr.replace(/\\n(?=(\t|\s+))/g, "")
+					.replace(/\\\\n(?=[a-zA-Z0-9])/g, "\\n");
+			} else {
+				codeStr = codeStr.replace(/\\n(?!T)/g, "\n")
+					.replace(/\\(u)/g, "\$1");
+			}
+
+			codeStr += ");";
+
+		return codeStr;
+	},
+
+	_addChartInstance: function(type, typeKey, index, code) {
+		typeKey = typeKey.split(".");
+
+		var key = this.getLowerFirstCase(typeKey[1]);
 
 		if (index) {
 			key += "_"+ index;
 		}
 
 		var $el = document.getElementById(key);
 		var template;
+		var plugins;
 
 		if (!$el) {
 			$el = document.createElement("div");
@@ -185,11 +252,16 @@ var billboardDemo = {
 			if (/^(legend|tooltip)Template/.test(key)) {
 				template = document.createElement("div");
 				template.id = this.getLowerFirstCase(RegExp.$1);
-				console.log(template.id)
 				template.style.textAlign = "center";
 
 				this.$chartArea.appendChild(template);
 				template = "&lt;div id=\""+ template.id +"\">&lt;/div>";
+			} else if (typeKey[0] === "Plugins") {
+				type.options._plugins.forEach(function(v) {
+					plugins = Object.keys(v).map(function(p) {
+						return new bb.plugin[p](v[p]);
+					});
+				});
 			}
 		}
 
@@ -199,44 +271,16 @@ var billboardDemo = {
 
 		options.bindto = "#" + key;
 
-		var inst = bb.generate(options);
-
-		inst.timer = [];
-
-		var codeStr = "var chart"+ (index > 1 ? index : "") +" = bb.generate(" +
-			JSON.stringify(options, function (k, v) {
-				if (typeof v === "function") {
-					return v.toString().replace(/\t+}$/, Array(/(format|data)/.test(k) ? 8 : 4).join(" ") + "}");
-				} else if (/(columns|rows|json)/.test(k)) {
-					var str = JSON.stringify(v)
-						.replace(/\[\[/g, "[\r\n\t[")
-						.replace(/\]\]/g, "]\r\n    ]")
-						.replace(/(],)/g, "$1\r\n\t")
-						.replace(/(\"|\d),/g, "$1, ");
-
-					return k === "json" ?
-						str.replace(/{/, "{\r\n\t").replace(/}/, "\r\n    }") : str;
-				}
+		if (plugins) {
+			options.plugins = plugins;
+		}
 
-				return v;
-			}, 2)
-			.replace(/\"?(function|})\"?/g, "$1")
-			.replace(/\\"/g, "\"")
-			.replace(/</g, "&lt;")
-			.replace(/\\t/g, "\t")
-			.replace(/\t{5}/g, "")
-			.replace(/\\r/g, "\r")
-			.replace(/"(\w+)":/g, "$1:");
+		var inst = bb.generate(options, key, index);
 
-			if (/multiline/i.test(key)) {
-				codeStr = codeStr.replace(/\\n(?=(\t|\s+))/g, "")
-					.replace(/\\\\n(?=[a-zA-Z0-9])/g, "\\n");
-			} else {
-				codeStr = codeStr.replace(/\\n(?!T)/g, "\n")
-					.replace(/\\(u)/g, "\$1");
-			}
+		delete options.plugins;
+		inst.timer = [];
 
-			codeStr += ");";
+		var codeStr = this.getCodeStr(options);
 
 		// markup
 		if ((index && index === 1) || !index) {