build: refactor to es modules

Author: damyanpetev

.github/workflows/build-deploy.yml

@@ -39,4 +39,4 @@ jobs:
         git config user.name "igniteui-deploy"
         git add --all
         if [ -n "$(git status --porcelain)" ]; then git commit -m "Samples for ${{ github.ref_name }}"; fi
-        git push -fq
+        git push -fq

build/createFiddleFiles.js build/createFiddleFiles.mjsbuild/createFiddleFiles.js renamed to build/createFiddleFiles.mjs

@@ -1,12 +1,12 @@
-var path = require("path"),
-	cheerio = require("cheerio"),
-	through = require("through2"),
-	File = require('vinyl');
+import cheerio from 'cheerio';
+import { dirname, join, posix } from "path";
+import { obj } from "through2";
+import File from 'vinyl';
 /**
  * Extracts HTML, JS and optionally CSS into separate files in a fiddle folder
  * and generates an embed json config file
  */
-module.exports = function(options) {
+export default function(options) {
 
 	var replaceSrc = function ($) {
 		var attr = this.name === "script" ? "src" : "href",
@@ -64,25 +64,25 @@ module.exports = function(options) {
 
 	var processStream = function(file, encoding, next){
 		var contents, stream, $,
-		basePath = path.dirname(file.path),
+		basePath = dirname(file.path),
 		relativePath = basePath.split("HTMLSamples").pop().replace(/\\/g, "/"),
 		originalPath = "HTMLSamples" + file.originalPath.split("HTMLSamples").pop().replace(/\\/g, "/"),
 		htmlFile, jsFile, cssFile,
 		html = [], js = "", css = "",
 		resultStr = file.lang === "ja" ? options.strings.resultJA : options.strings.resultEN,
 		embed = {
 			//use original file path for source link
-			"srcUrlPattern" : path.posix.join("/${owner}/${repo}-src/blob/", options.version, originalPath),
+			"srcUrlPattern" : posix.join("/${owner}/${repo}-src/blob/", options.version, originalPath),
 			"embed": [{
 				"label": "JS",
-				"path": path.posix.join(options.version, relativePath, "fiddle/demo.js") 
+				"path": posix.join(options.version, relativePath, "fiddle/demo.js") 
 			},{
 				"label": "HTML",
-				"path": path.posix.join(options.version, relativePath, "fiddle/demo.html") 
+				"path": posix.join(options.version, relativePath, "fiddle/demo.html") 
 			}, {
 				"type": "htmlpage",
 				"label": resultStr,
-				"url": options.liveUrl + path.posix.join("/" + options.version, relativePath, "/index.html") 
+				"url": options.liveUrl + posix.join("/" + options.version, relativePath, "/index.html") 
 			}]
 		};
 
@@ -118,7 +118,7 @@ module.exports = function(options) {
 
 		htmlFile = new File({
 			base: file.base,
-			path: path.join(basePath, "fiddle", "demo.html"),
+			path: join(basePath, "fiddle", "demo.html"),
 			contents: Buffer.from(html.join("\r\n"))
 		});
 
@@ -138,7 +138,7 @@ module.exports = function(options) {
 		}
 		jsFile = new File({
 			base: file.base,
-			path: path.join(basePath, "fiddle", "demo.js"),
+			path: join(basePath, "fiddle", "demo.js"),
 			contents: Buffer.from(js)
 		});
 
@@ -149,13 +149,13 @@ module.exports = function(options) {
 		if (css.length) {
 			cssFile = new File({
 				base: file.base,
-				path: path.join(basePath, "fiddle", "demo.css"),
+				path: join(basePath, "fiddle", "demo.css"),
 				contents: Buffer.from(unindentTrim(css))
 			});
 			stream.push(cssFile);
 			embed.embed.splice(2, 0, {
 				"label": "CSS",
-				"path": path.posix.join(options.version, relativePath, "fiddle/demo.css")
+				"path": posix.join(options.version, relativePath, "fiddle/demo.css")
 			});
 		}
 
@@ -166,13 +166,13 @@ module.exports = function(options) {
 		stream.push(jsFile);
 		stream.push(new File({
 			base: file.base,
-			path: path.join(basePath, ".gh-embed.json"),
+			path: join(basePath, ".gh-embed.json"),
 			contents: Buffer.from(JSON.stringify(embed, null, 4))
 		}));
 
 		stream.push(file);
 		next();
 	};
 
-	return through.obj(processStream);
-};
+	return obj(processStream);
+};

build/localizeFiles.js build/localizeFiles.mjsbuild/localizeFiles.js renamed to build/localizeFiles.mjs

@@ -1,47 +1,50 @@
-var path = require("path"),
-	through = require("through2"),
-	File = require('vinyl');
+import { createRequire } from "module";
+import { basename, dirname, extname, join, sep } from "path";
+import { obj } from "through2";
+import File from 'vinyl';
+
+const require = createRequire(import.meta.url);
 
 /**
  * Localize contents of file (resources, localization strings) and push both versions back to stream
  */
-module.exports = function(options) {
+export default function(_options) {
 
 	var processStream = function(file, encoding, next){
 		var contentsEN, contentsJA, jaFile, token,
-			basePath = path.dirname(file.path),
-			fileName = path.basename(file.path, path.extname(file.path)),
+			basePath = dirname(file.path),
+			fileName = basename(file.path, extname(file.path)),
 			enStrings, jaStrings,
 			stream = this;
 		contentsEN = contentsJA = file.contents.toString(encoding);
 
-		enStrings = require(path.join(basePath, "strings-en.json"));
-		jaStrings = require(path.join(basePath, "strings-ja.json"));
+		enStrings = require(join(basePath, "strings-en.json"));
+		jaStrings = require(join(basePath, "strings-ja.json"));
 		// combine with shared strings
-		Object.assign(enStrings, require(path.join(basePath, "../strings-en.json")));
-		Object.assign(jaStrings, require(path.join(basePath, "../strings-ja.json")));
+		Object.assign(enStrings, require(join(basePath, "../strings-en.json")));
+		Object.assign(jaStrings, require(join(basePath, "../strings-ja.json")));
 
-		for (key in enStrings) {
+		for (const key in enStrings) {
 			token = new RegExp("\\$\\$\\(" + key + "\\)", "g");
 			contentsEN = contentsEN.replace(token, enStrings[key]);
 		}
 
-		for (key in jaStrings) {
+		for (const key in jaStrings) {
 			token = new RegExp("\\$\\$\\(" + key + "\\)", "g");
 			contentsJA = contentsJA.replace(token, jaStrings[key]);
 		}
 
 		// save original path, because hystory stack won't be available for the newly created JA file:
 		file.originalPath = file.history[0];
 		// change out path, HTMLSamples must remain in path to keep relative correct for dest
-		file.path = path.join(basePath.replace("HTMLSamples", "HTMLSamples" + path.sep + "EN"), fileName, "index.html");
+		file.path = join(basePath.replace("HTMLSamples", "HTMLSamples" + sep + "EN"), fileName, "index.html");
 		file.contents = Buffer.from(contentsEN, encoding);
 		file.lang = "en";
 
 		// replace JA
 		jaFile = new File({
 			base: file.base,
-			path: path.join(basePath.replace("HTMLSamples", "HTMLSamples" + path.sep + "JA"), fileName, "index.html"),
+			path: join(basePath.replace("HTMLSamples", "HTMLSamples" + sep + "JA"), fileName, "index.html"),
 			contents: Buffer.from(contentsJA)
 		});
 		jaFile.lang = "ja";
@@ -52,5 +55,5 @@ module.exports = function(options) {
 		next();
 	};
 
-	return through.obj(processStream);
-};
+	return obj(processStream);
+};

build/updateResources.js build/updateResources.mjsbuild/updateResources.js renamed to build/updateResources.mjs

@@ -1,11 +1,11 @@
-var fs = require("fs"),
-	cheerio = require("cheerio"),
-	through = require("through2");
+import cheerio from 'cheerio';
+import { existsSync } from "fs";
+import { obj } from "through2";
 
 /**
  * Replace resource strings (src, href) and igLoader sources. Adds Japanese locale script for JA files.
  */
-module.exports = function (options) {
+export default function (options) {
 
 	/**
 	 * Replaces %%resource%% links based on configuration. Swaps to Japanese data-file if available for localized files.
@@ -23,7 +23,7 @@ module.exports = function (options) {
 		if (lang === "ja" && src.indexOf("../data-files") !== -1) {
 			// check if respective japanese files is available:
 			dataFile = src.split("../data-files/").pop();
-			if (fs.existsSync("./data-files-ja/" + dataFile)) {
+			if (existsSync("./data-files-ja/" + dataFile)) {
 				src = src.replace("/data-files/", "/data-files-ja/");
 			}
 		}
@@ -88,5 +88,5 @@ module.exports = function (options) {
 		next();
 	};
 
-	return through.obj(processStream);
-};
+	return obj(processStream);
+};

gulpfile.js gulpfile.mjsgulpfile.js renamed to gulpfile.mjs

@@ -1,20 +1,23 @@
-var gulp = require("gulp"),
-	localize = require("./build/localizeFiles.js"),
-	updateResources = require("./build/updateResources.js"),
-	createFiddleFiles = require("./build/createFiddleFiles.js");
-
-var argv = require('minimist')(process.argv.slice(2));
-var version = argv["ignite-version"]; //should be passed as --ignite-version ${BRANCH}
-
-var dist = "./dist",
-	copySrc = [
-		"./css/**/*",
-		"./js/**/*",
-		"./images/**/*",
-		"./data-files/**/*",
-		"./data-files-ja/**/*"
-	],
-	config = require("./build/config.json");
+import gulp from "gulp";
+import minimist from "minimist";
+import { createRequire } from "module";
+import createFiddleFiles from "./build/createFiddleFiles.mjs";
+import localize from "./build/localizeFiles.mjs";
+import updateResources from "./build/updateResources.mjs";
+
+const require = createRequire(import.meta.url);
+const argv = minimist(process.argv.slice(2));
+let version = argv["ignite-version"]; //should be passed as --ignite-version ${BRANCH}
+
+let dist = "./dist";
+const copySrc = [
+	"./css/**/*",
+	"./js/**/*",
+	"./images/**/*",
+	"./data-files/**/*",
+	"./data-files-ja/**/*"
+];
+const config = require("./build/config.json");
 
 	// Command line overrides:
 	if (argv["ignite-ui"]) {
@@ -51,4 +54,4 @@ gulp.task("copy-static-files", () => {
 		.pipe(gulp.dest("./dist"));
 });
 
-gulp.task("build-samples", gulp.series("process-files", "copy-static-files"));
+gulp.task("build-samples", gulp.series("process-files", "copy-static-files"));