mod-build 4.0.0-beta.3b → 4.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-build",
-  "version": "4.0.0-beta.3b",
+  "version": "4.0.0-beta.4",
   "description": "Share components for S3 sites.",
   "type": "module",
   "scripts": {
@@ -14,6 +14,7 @@
     "axios": "^1.6.2",
     "del": "^7.1.0",
     "eslint": "^8.55.0",
+    "glob": "^10.3.10",
     "gulp": "^4.0.2",
     "gulp-handlebars-file-include": "^1.0.0",
     "gulp-hash": "^4.2.2",

package/src/scripts/utils.js

@@ -173,30 +173,31 @@ export const handlebarsHelpers = [
 
 export const updateConfig = async (config) => {
 	const { isLocal, nodeEnv, buildPath } = defaultSettings;
-	const tempConfigExists = fs.existsSync(`src/.tmp/config.json`);
-	const localTCPAExists = fs.existsSync('src/resources/data/tcpa.json', 'utf8');
-	let parsedTCPA = {};
-	
-	if (localTCPAExists) {
-		parsedTCPA = JSON.parse(fs.readFileSync('src/resources/data/tcpa.json', 'utf8'));
-	}
+	let tempConfigExists;
 
 	let mergedConfig = { 
 		...config,
 		...footer(config),
-		...{ isLocal, nodeEnv, buildPath },
-		...parsedTCPA
+		...{ isLocal, nodeEnv, buildPath }
 	};
 
-	if (tempConfigExists) {
-		const configData = fs.readFileSync('src/.tmp/config.json', 'utf8');
-		const parsedConfig = JSON.parse(configData);
-		mergedConfig = merge(parsedConfig, mergedConfig);
-	}
+	const checkForTempConfig = () => {
+		return new Promise((resolve) => {
+			tempConfigExists = fs.existsSync(`src/.tmp/config.json`);
+	
+			const configData = fs.readFileSync('src/.tmp/config.json', 'utf8');
+			const parsedConfig = JSON.parse(configData);
+			mergedConfig = merge(parsedConfig, mergedConfig);
+
+			resolve();
+		});
+	};
 
 	return {
 		name: 'update-config',
-		configResolved({ configFileDependencies }) {
+		async configResolved({ configFileDependencies }) {
+			await checkForTempConfig();
+
 			configFileDependencies.forEach((file) => {
 				if (file.endsWith('siteconfig.js') || file.endsWith('template.js')) {
 					console.log('siteconfig or template changed');

package/src/styles/home.scss

@@ -1,5 +1 @@
-// an example SCSS file to import
-body {
-  background-color: red;
-  color: #fff;
-}
+// an example SCSS file to import

package/tasks/grab-cdn.js

@@ -29,15 +29,15 @@ function streamToDestination(inputPath, destPath, fileName) {
 	const url = `https://${defaultSettings.nodeEnv}${inputPath}`;
 
 	return new Promise(resolve => {
-		if (!fs.existsSync(`src/${destPath}`)) {
-			fs.mkdirSync(`src/${destPath}`, { recursive: true });
+		if (!fs.existsSync(`src${destPath}`)) {
+			fs.mkdirSync(`src${destPath}`, { recursive: true });
 		}
 
 		// if file exists, do not create it again
-		if (fs.existsSync(`src/${destPath}${fileName}`)) {
+		if (fs.existsSync(`src${destPath}${fileName}`)) {
 			resolve();
 		} else {
-			const writer = createWriteStream(`src/${destPath}${fileName}`);
+			const writer = createWriteStream(`src${destPath}${fileName}`);
 			const options = {
 				url,
 				method: 'get',
@@ -49,7 +49,7 @@ function streamToDestination(inputPath, destPath, fileName) {
 					throw new Error(`${resp.status}: Error while fetching ${url}`);
 				}
 				resp.data.pipe(writer);
-				console.log(`src/${destPath}${fileName} created...`);
+				console.log(`src${destPath}${fileName} created...`);
 				return finished(writer);
 			}).then(() => {
 				resolve();

package/tasks/grab-shared-scripts.js

@@ -20,38 +20,39 @@ let fileNames = {
 	homeownerFormFileName: ''
 };
 
-let isQuotePageOrUseRelativePath = false;
 let pathSubdirectory = '';
 let componentFolderPath = '';
 
 function replaceModalyticsSrc(gulp, defaultSettings) {
-	const resourcePath = isQuotePageOrUseRelativePath ? `${pathSubdirectory}{{#if this.src}}{{this.src}}{{/if}}resources/scripts/mod-alytics/` : '/resources/scripts/mod-alytics/';
+	const resourcePath = '/resources/scripts/mod-alytics/';
 	return gulp.src(`${defaultSettings.srcFolder}/${componentFolderPath}/head/head.html`)
 		.pipe(replace(/".*(modalytics).*"/, `"${resourcePath}${fileNames.modAlyticsFileName}"`))
 		.pipe(gulp.dest(`${defaultSettings.srcFolder}/${componentFolderPath}/head`));
 }
 
 function replaceFootAssetScripts(gulp, defaultSettings) {
-	const resourcePath = isQuotePageOrUseRelativePath ? `${pathSubdirectory}{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{/if}}resources/scripts` : '/resources/scripts';
+	const resourcePath = '/resources/scripts';
 	return gulp.src(`${defaultSettings.srcFolder}/${componentFolderPath}/foot-assets/foot-assets.html`)
-	.pipe(replace(/"(?:(?!"|js")[\s\S])+(modutils|mod-utils.*?)js"|"(?:(?!"|")[\s\S])+(footer\/footer-component.*?)js"|"(?:(?!"|")[\s\S])+(mod-form\/form.*?)js"/g, function(match) {
-			if (match.includes('mod-form/form')) {
-				return `"${resourcePath}/mod-form/form/${fileNames.homeownerFormFileName}"`;
-			} else if (match.includes('modutils') || match.includes('mod-utils')) {
-				return `"${resourcePath}/mod-utils/${fileNames.modUtilsFileName}"`;
-			} else if (match.includes('footer-component')) {
-				return `"${resourcePath}/footer/${fileNames.footerComponentJsFileName}"`;
-			}
-		}))
-		.pipe(gulp.dest(`${defaultSettings.srcFolder}/${componentFolderPath}/foot-assets`))
-		.on('end', function() {
-			console.log('>> FINISHED replacing foot asset scripts');
-		});
+	.pipe(replace(/"(?:(?!"|js")[\s\S])+(modutils|mod-utils.*?)js"|"(?:(?!"|")[\s\S])+(callrail.*?)js"|"(?:(?!"|")[\s\S])+(footer\/footer-component.*?)js"|"(?:(?!"|")[\s\S])+(mod-form\/form.*?)js"/g, function(match) {
+				if (match.includes('mod-form/form')) {
+					return `"${resourcePath}/mod-form/form/${fileNames.homeownerFormFileName}"`;
+				} else if (match.includes('callrail')) {
+					return `"${resourcePath}/callrail/${fileNames.callrailFileName}"`;
+				} else if (match.includes('modutils') || match.includes('mod-utils')) {
+					return `"${resourcePath}/mod-utils/${fileNames.modUtilsFileName}"`;
+				} else if (match.includes('footer-component')) {
+					return `"${resourcePath}/footer/${fileNames.footerComponentJsFileName}"`;
+				}
+			}))
+			.pipe(gulp.dest(`${defaultSettings.srcFolder}/${componentFolderPath}/foot-assets`))
+			.on('end', function() {
+				console.log('>> FINISHED replacing foot asset scripts');
+			});
 }
 
 function replaceAbandonmentJsCssSrc(gulp, defaultSettings) {
-	const jsResourcePath = isQuotePageOrUseRelativePath ? `${pathSubdirectory}resources/scripts/abandonment/` : '/resources/scripts/abandonment/';
-	const cssResourcePath = isQuotePageOrUseRelativePath ? `${pathSubdirectory}resources/styles/components/abandonment/` : '/resources/styles/components/abandonment/';
+	const jsResourcePath = '/resources/scripts/abandonment/';
+	const cssResourcePath = '/resources/styles/components/abandonment/';
 	return gulp.src(defaultSettings.srcFolder + '/templates/abandonment/*.html')
 		.pipe(replace(/"(?:(?!"|")[\s\S])+(abandonment\/abandonment.*?)js"/, `"${jsResourcePath}${fileNames.abandonmentJsFileName}"`))
 		.pipe(replace(/"(?:(?!"|")[\s\S])+(components\/abandonment\/abandonment.*?)css"/, `"${cssResourcePath}${fileNames.abandonmentStylesFileName}"`))
@@ -72,100 +73,78 @@ function replaceFooterStylesReference(gulp, defaultSettings, siteData) {
 	}
 }
 
-function replaceFooterStylesReferenceInMap(gulp, defaultSettings, siteData) {
-	if (siteData.siteData && siteData.siteData.useRelativePathForResources === true) {
-		return gulp.src(defaultSettings.srcFolder + '/resources/scripts/footer/footer-component.min.js.map')
-			.pipe(replace(/`(?:(?!`|`)[\s\S])+(components\/footer\/mod.*?)`/, '`' + pathSubdirectory + 'resources/styles/components/footer/' + fileNames.modFooterStylesFileName + '`'))
-			.pipe(replace(/`(?:(?!`|`)[\s\S])+(components\/footer\/mod.*?)`/, '`' + pathSubdirectory + 'resources/styles/components/footer/' + fileNames.qsFooterStylesFileName + '`'))
-			.pipe(gulp.dest(defaultSettings.srcFolder + '/resources/scripts/footer'));
-	} else if (!siteData.siteData || siteData.siteData && !siteData.siteData.isQuotePage) {
-		return gulp.src(defaultSettings.srcFolder + '/resources/scripts/footer/footer-component.min.js.map')
-			.pipe(replace(/`(?:(?!`|`)[\s\S])+(components\/footer\/mod.*?)`/, '`/resources/styles/components/footer/' + fileNames.modFooterStylesFileName + '`'))
-			.pipe(replace(/`(?:(?!`|`)[\s\S])+(components\/footer\/mod.*?)`/, '`/resources/styles/components/footer/' + fileNames.qsFooterStylesFileName + '`'))
-			.pipe(gulp.dest(defaultSettings.srcFolder + '/resources/scripts/footer'));
-	}
-}
-
 const TASKS = {
 	copyModutils: {
+		url: 'shared-resources/scripts/callrail/callrail.min.js',
+		config: {
+			fileName: 'callrailFileName',
+			dest: 'scripts/callrail',
+		},
+		srcReplaceFn: null,
+	},
+	copyCallrail: {
 		url: 'mod-utils/modutils.min.js',
 		config: {
 			fileName: 'modUtilsFileName',
 			dest: 'scripts/mod-utils',
-			mapUrl: 'mod-utils/modutils.min.js.map'
 		},
 		srcReplaceFn: null,
-		additionalSrcReplaceFns: []
 	},
 	copyFooterComponentJs: {
 		url: 'shared-resources/scripts/footer/footer-component.min.js',
 		config: {
 			fileName: 'footerComponentJsFileName',
 			dest: 'scripts/footer',
-			mapUrl: 'shared-resources/scripts/footer/footer-component.min.js.map'
 		},
 		srcReplaceFn: null,
-		additionalSrcReplaceFns: []
 	},
 	copyHomeownerForm: {
 		url: 'mod-form/form/homeowner.min.js',
 		config: {
 			fileName: 'homeownerFormFileName',
 			dest: 'scripts/mod-form/form',
-			mapUrl: 'mod-form/form/homeowner.min.js.map'
 		},
 		srcReplaceFn: replaceFootAssetScripts,
-		additionalSrcReplaceFns: []
 	},
 	copyModalytics: {
 		url: 'mod-alytics/modalytics.min.js',
 		config: {
 			fileName: 'modAlyticsFileName',
 			dest: 'scripts/mod-alytics',
-			mapUrl: 'mod-alytics/modalytics.min.js.map'
 		},
 		srcReplaceFn: replaceModalyticsSrc,
-		additionalSrcReplaceFns: []
 	},
 	copyAbandonmentComponentStyles: {
 		url: 'shared-resources/styles/components/abandonment/abandonment.min.css',
 		config: {
 			fileName: 'abandonmentStylesFileName',
 			dest: 'styles/components/abandonment',
-			mapUrl: null
 		},
 		srcReplaceFn: null,
-		additionalSrcReplaceFns: []
 	},
 	copyAbandonmentJs: {
 		url: 'shared-resources/scripts/abandonment/abandonment.min.js',
 		config: {
 			fileName: 'abandonmentJsFileName',
 			dest: 'scripts/abandonment',
-			mapUrl: 'shared-resources/scripts/abandonment/abandonment.min.js.map'
 		},
 		srcReplaceFn: replaceAbandonmentJsCssSrc,
-		additionalSrcReplaceFns: []
 	},
 	copyModFooterComponentStyles: {
 		url: 'shared-resources/styles/components/footer/mod-footer.min.css',
 		config: {
 			fileName: 'modFooterStylesFileName',
 			dest: 'styles/components/footer',
-			mapUrl: null
 		},
 		srcReplaceFn: null,
-		additionalSrcReplaceFns: []
 	},
 	copyQsFooterComponentStyles: {
 		url: 'shared-resources/styles/components/footer/qs-footer.min.css',
 		config: {
 			fileName: 'qsFooterStylesFileName',
 			dest: 'styles/components/footer',
-			mapUrl: null
 		},
-		srcReplaceFn: null,
-		additionalSrcReplaceFns: [replaceFooterStylesReference, replaceFooterStylesReferenceInMap]
+		srcReplaceFn: replaceFooterStylesReference,
 	}
 };
 
@@ -177,7 +156,7 @@ function getResource(task, fileNames, resourcePath = 'quote/resources') {
 	}
 
 	const finished = promisify(stream.finished);
-	
+
 	return new Promise(resolve => {
 		const file = getFileFromURL(url);
 
@@ -186,7 +165,7 @@ function getResource(task, fileNames, resourcePath = 'quote/resources') {
 		}
 
 		// if file exists, do not create it again
-		if (fs.existsSync(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}/${file}`)) {	
+		if (fs.existsSync(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}/${file}`)) {
 			resolve();
 		} else {
 			const options = {
@@ -198,41 +177,51 @@ function getResource(task, fileNames, resourcePath = 'quote/resources') {
 				if (resp.status !== 200) {
 					throw new Error(`${resp.status}: Error while fetching ${url}`);
 				}
-	
+
 				const writer = createWriteStream(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}/${file}`);
 				resp.data.pipe(writer);
 				console.log(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}/${file} created...`);
 				return finished(writer);
 			})
 			.then(() => {
-				gulp.src(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}/${file}`)
-				.pipe(hash({
-					hashLength: 20,
-					algorithm: 'md5',
-					template: file.replace(/^([^.]*)\.(.*)$/, '$1-<%= hash %>.$2')
-				}))
-				.pipe(tap(function(file) {
-					file = JSON.stringify(file);
-					file = JSON.parse(file).history[1];
-					fileNames[task.config.fileName] = file.split('/').pop();
-				}))
-				.pipe(gulp.dest(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}`));
-				resolve();
+				return new Promise((resolve) => {
+					gulp.src(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}/${file}`)
+					.pipe(hash({
+						hashLength: 20,
+						algorithm: 'md5',
+						template: file.replace(/^([^.]*)\.(.*)$/, '$1-<%= hash %>.$2')
+					}))
+					.pipe(tap(function(file) {
+						file = JSON.stringify(file);
+						file = JSON.parse(file).history[1];
+						file = file.split('/').pop();
+						fileNames[task.config.fileName] = file;
+
+						console.log(file);
+					}))
+					.pipe(gulp.dest(`${task.config.defaultSettings.srcFolder}/resources/${config.dest}`))
+					.on('finish', function(){
+						console.log('DONE HASHING');
+						resolve();
+					})
+				});
 			})
 			.then(() => {
-				if (!config.mapUrl) {
+				if (!srcReplaceFn) {
 					return false;
 				}
-				// do we really need to separately get sourcemaps??
-				resolve();
+
+				if (typeof srcReplaceFn === 'function') {
+					srcReplaceFn(gulp, task.config.defaultSettings, task.config.config);
+				}
+				return true
 			})
 			.then(() => {
-				if (!srcReplaceFn) {
-					return false;
-				}
-				// we should update the mod/qs footer components to inject their own CSS instead of hardcoding the file path & then renaming it here!
 				resolve();
 			})
+			.catch((error) => {
+				console.error('Error:', error);
+			});
 		}
 	})
 }
@@ -252,7 +241,6 @@ export default async function(config) {
 		const getAllResources = tasks.map(async function(task) {
 			if (useAccessibleComponents && task.url.includes('abandonment.min.js')) {
 				task.url = 'shared-resources/scripts/abandonment/accessible/abandonment.min.js';
-				task.config.mapUrl = 'shared-resources/scripts/abandonment/accessible/abandonment.min.js.map';
 			}
 			Object.assign(task.config, { defaultSettings, config });
 			await getResource(task, fileNames);
@@ -260,4 +248,4 @@ export default async function(config) {
 
 		await Promise.all(getAllResources);
 	}
-}
+}

package/tasks/serve.js

@@ -9,9 +9,10 @@ export async function startModBuild(config) {
 	await grabCdn(config);
 	await Promise.all([
 		grabSharedComponents(config),
-		grabSharedScripts(config),
 		grabFormHelpers(config),
 		templates(config)
-	]);
+	]).then(async () => {
+		await grabSharedScripts(config);
+	});
 	await updateConfig(config);
-}
+}

package/tasks/templates.js

@@ -104,17 +104,9 @@ const fetchTcpaFromSitegenie = async (config, tempConfig) => {
 				console.log('Response error...using default TCPA language');
 			}
 			
-			reject(error);
-		});
-	}).then(async (finalTCPA) => {
-		if (!finalTCPA) {
-			return Promise.resolve();
-		}
-
-		// write the TCPA to src/resources/data/tcpa.json
-		await new Promise((resolve) => {
-			fs.writeFileSync('src/resources/data/tcpa.json', JSON.stringify({ tcpaText: `${finalTCPA}` }, null, 2));
-			resolve();
+			defaultTcpa = JSON.parse(fs.readFileSync('src/resources/data/tcpa.json', 'utf8'));
+			tempConfig.tcpaText = defaultTcpa.tcpaText;
+			resolve(error);
 		});
 	});
 };

package/vite.config.js

@@ -56,7 +56,7 @@ export default defineConfig((config) => ({
 			...eslint(),
 			apply: 'build',
 		},
-		{ 
+		{
 			...eslint({
 				failOnWarning: false,
 				failOnError: false,
@@ -67,7 +67,14 @@ export default defineConfig((config) => ({
 		{
 			name: 'replace-src-paths',
 			transformIndexHtml: (html) => {
-				return html.replace(/(src|data-load)="\/?src\//g, '$1="/');
+				if (config.pathSubdirectory && config.pathSubdirectory.length > 0) {
+					return html
+						.replace(/(src|data-load)="\/?src\//g, `$1="${config.pathSubdirectory}`)
+						.replace(/(src|data-load|href)="\/?assets\//g, `$1="${config.pathSubdirectory}assets/`)
+						.replace(/(src|data-load|href)="\/?resources\//g, `$1="${config.pathSubdirectory}resources/`)
+				} else {
+					return html.replace(/(src|data-load)="\/?src\//g, '$1="/');
+				}
 			},
 			apply: 'build',
 		}