fix(clayui.com): Moves autogenerated files task to gatsby-plugin-svg-…

…compile-sprite
matuzalemsteles · Aug 20, 2020 · f0a3608 · f0a3608
1 parent 8a0fd4b
commit f0a3608
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 85 deletions.
diff --git a/clayui.com/gatsby-config.js b/clayui.com/gatsby-config.js
@@ -16,9 +16,8 @@ module.exports = {
 		'gatsby-plugin-meta-redirect',
 		{
 			options: {
-				outputDir: path.join(__dirname, 'static', 'images', 'icons'),
-				outputFile: 'icons.svg',
 				srcDir: path.join(clay.srcDir, 'images', 'icons'),
+				staticDir: path.join(__dirname, 'static'),
 			},
 			resolve: 'gatsby-plugin-svg-compile-sprite',
 		},

diff --git a/clayui.com/package.json b/clayui.com/package.json
@@ -4,8 +4,7 @@
 	"version": "3.3.4",
 	"license": "MIT",
 	"scripts": {
-		"copy:clay-css": "yarn copy:clay-css-icons && yarn copy:clay-css-js && yarn copy:clay-css-site-images && yarn copy:clay-css-images",
-		"copy:clay-css-icons": "node svg-icons.js",
+		"copy:clay-css": "yarn copy:clay-css-js && yarn copy:clay-css-site-images && yarn copy:clay-css-images",
 		"copy:clay-css-js": "cpx '../@clayui/css/lib/js/*.{js,js.map}' static/js",
 		"copy:clay-css-images": "cpx '../@clayui/css/src/images/images/*.{gif}' static/images",
 		"copy:clay-css-site-images": "cpx '../@clayui/css/src/content/site-images/*.svg' static/images",

diff --git a/clayui.com/svg-icons.js → ...n-svg-compile-sprite/clay-icon-aliases.js b/clayui.com/svg-icons.js → ...n-svg-compile-sprite/clay-icon-aliases.js
@@ -1,10 +1,6 @@
-/**
- * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-const fs = require('fs');
-const path = require('path');
+// Aliases for Clay CSS Language Flag SVG Icons. Only a subset of these flags
+// are in Clay CSS. These are the aliases used in
+// `https://clayui.com/docs/components/icon.html`.
 
 /* eslint-disable */
 // prettier-ignore
@@ -482,6 +478,9 @@ const flagsData = {
 	"zu-za":						'"zu-za", "Zulu", "South Africa"'
 };
 
+// Aliases for Clay CSS SVG Icons. These are the aliases used in
+// `https://clayui.com/docs/components/icon.html`.
+
 // prettier-ignore
 const iconsData = {
 	"add-cell":					'"center", "excel", "grid", "squares", "table"',
@@ -758,65 +757,4 @@ const iconsData = {
 };
 /* eslint-enable */
 
-const iconsPath = path.join('static', 'images', 'icons', 'icons.svg');
-
-const iconsFile = fs.readFileSync(iconsPath, 'utf8');
-const symbolsArr = iconsFile.toString().match(/<symbol id="(.*?)"\s/g);
-
-function getId(str) {
-	str = str.replace('<symbol id="', '');
-	str = str.replace('" ', '');
-
-	return str;
-}
-
-function buildJson(arr, aliasesMap) {
-	let json = '[\n';
-
-	for (let i = 0; i < arr.length; i++) {
-		let aliases = aliasesMap[arr[i]];
-
-		json += '    {\n';
-		json += `        "name": "${arr[i]}",\n`;
-		json += '        "aliases": [';
-
-		if (!aliases) {
-			aliases = '""';
-		}
-
-		json += `${aliases}]\n`;
-
-		if (i === arr.length - 1) {
-			json += '    }\n';
-		} else {
-			json += '    },\n';
-		}
-	}
-
-	json += ']';
-
-	return json;
-}
-
-const flagsArr = [];
-const newIconsArr = [];
-
-for (let i = 0; i < symbolsArr.length; i++) {
-	const symbol = getId(symbolsArr[i]);
-
-	if (flagsData[symbol]) {
-		flagsArr.push(symbol);
-	} else {
-		newIconsArr.push(symbol);
-	}
-}
-
-fs.writeFileSync(
-	path.join(__dirname, 'static', 'js', 'flags-autogenerated.json'),
-	buildJson(flagsArr, flagsData)
-);
-
-fs.writeFileSync(
-	path.join(__dirname, 'static', 'js', 'icons-autogenerated.json'),
-	buildJson(newIconsArr, iconsData)
-);
+module.exports = {flagsData, iconsData};
diff --git a/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/gatsby-node.js b/clayui.com/plugins/gatsby-plugin-svg-compile-sprite/gatsby-node.js
@@ -3,19 +3,55 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-// Compiles SVG icons in directory `clay-css/src/images/icons` into a spritemap
+// Compiles SVG icons in directory `clay-css/src/images/icons` into
+// `static/images/icons/icons.svg` spritemap. This also autogenerates
+// `static/js/flags-autogenerated.json` and `static/js/icons-autogenerated.json`
+// used for search in `icons.html`.
 
 const fs = require('fs');
 const path = require('path');
 
-const generateSvgSprite = (pluginOptions) => {
+const aliases = require('./clay-icon-aliases');
+
+const buildJson = (arr, aliasesMap) => {
+	let json = '[\n';
+
+	for (let i = 0; i < arr.length; i++) {
+		let aliases = aliasesMap[arr[i]];
+
+		json += '    {\n';
+		json += `        "name": "${arr[i]}",\n`;
+		json += '        "aliases": [';
+
+		if (!aliases) {
+			aliases = '""';
+		}
+
+		json += `${aliases}]\n`;
+
+		if (i === arr.length - 1) {
+			json += '    }\n';
+		} else {
+			json += '    },\n';
+		}
+	}
+
+	json += ']';
+
+	return json;
+};
+
+const generateFiles = (pluginOptions) => {
 	const REGEX_FILE_EXT_SVG = /(?:flags-|\.svg$)/g;
 	const REGEX_HTML_COMMENTS = /<!--(?:.+?)-->\n?/gs;
-	const REGEX_SVG_VIEWBOX = /\bviewBox="[^"]+"/g;
 	const REGEX_SVG_TAG = /(?:<\/svg|<svg[^>]+)>(?:\n|)/g;
+	const REGEX_SVG_VIEWBOX = /\bviewBox="[^"]+"/g;
 
 	const filesArr = fs.readdirSync(pluginOptions.srcDir);
 
+	const flagIconsArr = [];
+	const svgIconsArr = [];
+
 	let strSprite = `<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
 
 	filesArr.forEach((file) => {
@@ -41,28 +77,61 @@ const generateSvgSprite = (pluginOptions) => {
 		icon = icon.replace(REGEX_SVG_TAG, '');
 
 		strSprite += `${symbol}${icon}</symbol>`;
+
+		// For autogenerate files
+
+		if (aliases.flagsData[id]) {
+			flagIconsArr.push(id);
+		} else {
+			svgIconsArr.push(id);
+		}
 	});
 
 	strSprite += '</svg>';
 
 	fs.writeFileSync(
-		path.join(pluginOptions.outputDir, pluginOptions.outputFile),
+		path.join(pluginOptions.staticDir, 'images', 'icons', 'icons.svg'),
 		strSprite
 	);
+
+	fs.writeFileSync(
+		path.join(pluginOptions.staticDir, 'js', 'flags-autogenerated.json'),
+		buildJson(flagIconsArr, aliases.flagsData)
+	);
+
+	fs.writeFileSync(
+		path.join(pluginOptions.staticDir, 'js', 'icons-autogenerated.json'),
+		buildJson(svgIconsArr, aliases.iconsData)
+	);
 };
 
 exports.onPostBootstrap = ({reporter}, pluginOptions) => {
-	generateSvgSprite(pluginOptions);
+	generateFiles(pluginOptions);
 
 	reporter.info(`Compiling icons.svg finished`);
+};
 
-	if (process.env.NODE_ENV === 'development') {
-		const watcher = require('chokidar').watch(pluginOptions.srcDir);
+exports.onCreateDevServer = ({reporter}, pluginOptions) => {
+	const MESSAGE = `Compiling icons.svg finished: Refresh the page!`;
 
-		watcher.on(`change`, () => {
-			generateSvgSprite(pluginOptions);
+	const watcher = require('chokidar').watch(pluginOptions.srcDir);
 
-			reporter.info(`Compiling icons.svg finished: Refresh the page!`);
-		});
-	}
+	watcher.on(`ready`, () => {
+		watcher
+			.on(`add`, () => {
+				generateFiles(pluginOptions);
+
+				reporter.info(MESSAGE);
+			})
+			.on(`change`, () => {
+				generateFiles(pluginOptions);
+
+				reporter.info(MESSAGE);
+			})
+			.on(`unlink`, () => {
+				generateFiles(pluginOptions);
+
+				reporter.info(MESSAGE);
+			});
+	});
 };