mod-build 4.0.1-beta.6 → 4.0.1-beta.7a

package/CHANGELOG.md

@@ -1,8 +1,3 @@
-## 4.0.1
-
-- Clean up some plugins into separate files
-- Add footAssetsConfig to additionalAssets
-
 ## 4.0.0-beta.5
 
 - Updated the `transformIndexHtml` hook to use the `writeBundle` hook in the ViteConfig.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-build",
-  "version": "4.0.1-beta.6",
+  "version": "4.0.1-beta.7a",
   "description": "Share components for S3 sites.",
   "type": "module",
   "scripts": {
@@ -22,6 +22,7 @@
     "gulp-tap": "^2.0.0",
     "husky": "^8.0.3",
     "lodash.merge": "^4.6.2",
+    "lodash.mergewith": "^4.6.2",
     "sass": "^1.69.5",
     "vite": "^5.0.0",
     "vite-plugin-eslint": "^1.8.1",

package/src/scripts/default/additional-assets.js

@@ -1,9 +1,27 @@
+function createScript(asset, location = 'head', env = 'qa.modernize.com') {
+	const { src, isLocal, localSrc, useModCdn, defer, async } = asset;
+	const script = document.createElement('script');
+	script.src = (isLocal ? localSrc : (useModCdn ? `https://${env}/${src}` : src));
+	script.async = async;
+	script.defer = defer;
+	location === 'head' ? document.head.appendChild(script) : document.body.appendChild(script);
+}
+
+function createStyle(asset, location = 'head', env = 'qa.modernize.com') {
+	const { src, isLocal, localSrc, useModCdn } = asset;
+	const link = document.createElement('link');
+	link.rel = 'stylesheet';
+	link.href = (isLocal ? localSrc : (useModCdn ? `https://${env}/${src}` : src));
+	location === 'head' ? document.head.appendChild(link) : document.body.appendChild(link);
+}
+
 export const loadAdditionalAssets = (config) => {
-	const { page } = config;
-	const { additionalAssets } = page.headConfig;
+	const { page, nodeEnv } = config;
+	const { additionalAssets: headAdditionalAssets } = page.headConfig;
+	const { additionalAssets: footAdditionalAssets } = page.footAssetsConfig
 
-	if (additionalAssets) {
-		const { afterBegin, beforeEnd } = additionalAssets;
+	if (headAdditionalAssets) {
+		const { afterBegin, beforeEnd } = headAdditionalAssets;
 
 		if (afterBegin || beforeEnd) {
 			let additionalHeadAssets = [];
@@ -15,22 +33,28 @@ export const loadAdditionalAssets = (config) => {
 			}
 		
 			additionalHeadAssets.forEach((asset) => {
-				const { type, src, isLocal, localSrc, useModCdn, defer, async } = asset;
+				const { type } = asset;
 				if (type === 'script') {
-					const script = document.createElement(type);
-					script.src = (isLocal ? localSrc : (useModCdn ? `https://${config.nodeEnv}/${src}` : src));
-					script.async = async;
-					script.defer = defer;
-					document.head.appendChild(script);
+					createScript(asset, 'head', nodeEnv);
 				}
 			
 				if (type === 'style') {
-					const link = document.createElement('link');
-					link.rel = 'stylesheet';
-					link.href = (isLocal ? localSrc : (useModCdn ? `https://${config.nodeEnv}/${src}` : src));
-					document.head.appendChild(link);
+					createStyle(asset, 'head', nodeEnv);
 				}
 			});
 		}	
 	}
+
+	if (footAdditionalAssets) {
+		footAdditionalAssets.forEach((asset) => {
+			const { type } = asset;
+			if (type === 'script') {
+				createScript(asset, 'body', nodeEnv);
+			}
+		
+			if (type === 'style') {
+				createStyle(asset, 'body', nodeEnv);
+			}
+		});
+	}
 }

package/src/scripts/plugins.js

@@ -1,7 +1,7 @@
 import fs from "node:fs";
+import mergeWith from "lodash.mergewith";
 import merge from "lodash.merge";
 import gulpHandlebarsFileInclude from "gulp-handlebars-file-include";
-import { glob } from 'glob'
 import { defaultSettings } from "../data/config.js";
 import footer from '../data/footer.js';
 import { handlebarsHelpers } from "./utils.js";
@@ -44,13 +44,23 @@ export const updateConfig = async (config) => {
 		...{ isLocal, nodeEnv, buildPath }
 	};
 
+	const customizer = (objValue, srcValue) => {
+		// If the key exists in parsedConfig but not in mergedConfig, drop it from the merged result
+		if (srcValue === undefined) {
+			return undefined;
+		}
+
+		// Otherwise, use the default merging behavior
+		return merge(objValue, srcValue); // or you can return merge(objValue, srcValue) to merge nested objects
+	};
+
 	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);
+			mergedConfig = mergeWith(parsedConfig, mergedConfig, customizer);
 
 			resolve();
 		});
@@ -80,29 +90,4 @@ export const updateConfig = async (config) => {
 			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
 		}
 	}
-}
-
-export const replaceSrcPaths = (config) => {
-	return {
-		name: 'replace-src-paths',
-		writeBundle: async () => {
-			const files = glob.sync(defaultSettings.distFolder + '/**/index.html');
-			for (const file of files) {
-				let html = await fs.promises.readFile(file, 'utf-8');
-				let updatedHtml = '';
-
-				if (config.pathSubdirectory && config.pathSubdirectory.length > 0) {
-					updatedHtml = html
-						.replace(/(src|data-load)="\/?src\//g, `$1="${config.pathSubdirectory}`)
-						.replace(/(src|srcset|data-load|href)="\/?assets\//g, `$1="${config.pathSubdirectory}assets/`)
-						.replace(/(src|data-load|href)="\/?resources\//g, `$1="${config.pathSubdirectory}resources/`)
-				} else {
-					updatedHtml = html.replace(/(src|data-load)="\/?src\//g, '$1="/');
-				}
-
-				await fs.promises.writeFile(file, updatedHtml);
-			}
-		},
-		apply: 'build',
-	}
 }

package/tasks/grab-cdn.js

@@ -13,8 +13,8 @@ async function duplicateHtmlFilestoHbs(externalResources) {
 
 		if (fileExtension === '.html') {
 			const newFileName = fileName.replace('.html', '.hbs');
-			const sourceFilePath = path.join('src', destPath, fileName);
-			const destinationFilePath = path.join('src', destPath, newFileName);
+			const sourceFilePath = path.join(destPath, fileName);
+			const destinationFilePath = path.join(destPath, newFileName);
 
 			if (fs.existsSync(sourceFilePath) && !fs.existsSync(destinationFilePath)) {
 				fs.copyFileSync(sourceFilePath, destinationFilePath);
@@ -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(`${destPath}`)) {
+			fs.mkdirSync(`${destPath}`, { recursive: true });
 		}
 
 		// if file exists, do not create it again
-		if (fs.existsSync(`src${destPath}${fileName}`)) {
+		if (fs.existsSync(`${destPath}${fileName}`)) {
 			resolve();
 		} else {
-			const writer = createWriteStream(`src${destPath}${fileName}`);
+			const writer = createWriteStream(`${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(`${destPath}${fileName} created...`);
 				return finished(writer);
 			}).then(() => {
 				resolve();
@@ -58,58 +58,53 @@ function streamToDestination(inputPath, destPath, fileName) {
 				resolve();
 			});
 		}
-	}); 
-} 
+	});
+}
 
 export default async function(config) {
-	const { nodeEnv, isLocal } = defaultSettings;
+	const { nodeEnv, srcFolder, publicFolder } = defaultSettings;
 	const { isQSPage, isWhiteLabel, page } = config;
 	const themeFile = page?.themeFile;
 	const cssThemes = page?.cssThemes;
 	const isModWhiteLabel = isWhiteLabel && !isQSPage
-	const domainHasModernize = config?.domain?.indexOf('modernize') > -1;
+	const domainHasModernize = config?.domain?.indexOf('modernize') > -1 && !(config?.domain?.includes('bestcompany'));
 
 	let externalResources;
 	// listing of Static Resources sub-path and site destination paths
 	// key: inputPath, value: destPath
 
 	externalResources = {
-		'/quote/resources/mod-site/templates/scripts/trusted-form.html': ['/templates/scripts/', 'trusted-form.html'],
-		'/quote/resources/data/tcpa.json': ['/resources/data/', 'tcpa.json'],
+		'/quote/resources/mod-site/templates/scripts/trusted-form.html': [`${publicFolder}/resources/scripts/`, 'trusted-form.html'],
+		'/quote/resources/data/tcpa.json': [`${srcFolder}/resources/data/`, 'tcpa.json'],
 	};
 
 	// grab footer modals and place under the resources
 	Object.assign(externalResources, {
-		'/quote/resources/shared-resources/templates/modals/about/': ['/resources/templates/modals/about/', 'index.html'],
-		'/quote/resources/shared-resources/templates/modals/privacy/': ['/resources/templates/modals/privacy/', 'index.html'],
-		'/quote/resources/shared-resources/templates/modals/terms/': ['/resources/templates/modals/terms/', 'index.html'],
-		'/quote/resources/shared-resources/templates/modals/contact-us/': ['/resources/templates/modals/contact-us/', 'index.html'],
-		'/quote/resources/shared-resources/templates/modals/faq/': ['/resources/templates/modals/faq/', 'index.html']
+		'/quote/resources/shared-resources/templates/modals/about/': [`${srcFolder}/resources/templates/modals/about/`, 'index.html'],
+		'/quote/resources/shared-resources/templates/modals/privacy/': [`${srcFolder}/resources/templates/modals/privacy/`, 'index.html'],
+		'/quote/resources/shared-resources/templates/modals/terms/': [`${srcFolder}/resources/templates/modals/terms/`, 'index.html'],
+		'/quote/resources/shared-resources/templates/modals/contact-us/': [`${srcFolder}/resources/templates/modals/contact-us/`, 'index.html'],
+		'/quote/resources/shared-resources/templates/modals/faq/': [`${srcFolder}/resources/templates/modals/faq/`, 'index.html']
 	})
 
-	Object.assign(externalResources, {'/quote/resources/mod-site/templates/scripts/jornaya.html': ['/templates/scripts/', 'jornaya.html']});
+	Object.assign(externalResources, {'/quote/resources/mod-site/templates/scripts/jornaya.html': [`${publicFolder}/resources/scripts/`, 'jornaya.html']});
 
 	if (isModWhiteLabel || domainHasModernize) {
-		Object.assign(externalResources, {'/quote/resources/mod-site/templates/scripts/recaptcha.html': ['/templates/scripts/', 'recaptcha.html']});
+		Object.assign(externalResources, {'/quote/resources/mod-site/templates/scripts/recaptcha.html': [`${publicFolder}/resources/scripts/`, 'recaptcha.html']});
 	}
 
 	if (cssThemes && cssThemes.length > 0) {
 		cssThemes.forEach(theme => {
 			const themeFileName = `_${theme}.scss`;
 			const themePath = `/quote/resources/shared-resources/styles/themes/${themeFileName}`;
-			Object.assign(externalResources, {[themePath]: ['/resources/styles/themes/', themeFileName]});
+			Object.assign(externalResources, {[themePath]: [`${srcFolder}/resources/styles/themes/`, themeFileName]});
 		});
 	}
 
-	// local dev files
-	const remoteFilesForLocalDev = {
-		'/quote/resources/mod-site/scripts/vendor/maxmind-geoip2.js': ['/temp/scripts/', 'maxmind-geoip2.js']
-	};
-
 	// theme JSON
 	if (isQSPage && themeFile) {
 		Object.assign(externalResources, {
-			[`/quote/resources/data/themes/${themeFile}.json`]: ['/data/', 'theme.json']
+			[`/quote/resources/data/themes/${themeFile}.json`]: [`${srcFolder}/data/`, 'theme.json']
 		});
 	}
 
@@ -117,11 +112,6 @@ export default async function(config) {
 		throw new Error('Missing environment variables. Did you start with gulp instead of npm run...?');
 	}
 
-	// only save modform/utils if its local development
-	if (isLocal) {
-		externalResources = { ...externalResources, ...remoteFilesForLocalDev };
-	}
-
 	const filesPromiseMap = Object.keys(externalResources).map(async key => {
 		const destinationPath = externalResources[key][0];
 		const fileName = externalResources[key][1];

package/vite.config.js

@@ -4,8 +4,10 @@ import eslint from 'vite-plugin-eslint'
 import { defaultSettings } from './src/data/config.js'
 import { defineConfig } from 'vite'
 import { startModBuild } from './tasks/serve.js'
-import { updateConfig, replaceSrcPaths, STATIC_COPY_TARGETS } from './src/scripts/plugins.js'
+import { updateConfig, STATIC_COPY_TARGETS } from './src/scripts/plugins.js'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { glob } from 'glob'
+import fs from "node:fs";
 
 export default defineConfig((config) => ({
 	build: {
@@ -39,7 +41,28 @@ export default defineConfig((config) => ({
 			apply: 'serve',
 			enforce: 'post'
 		},
-		replaceSrcPaths(config)
+		{
+			name: 'replace-src-paths',
+			writeBundle: async () => {
+				const files = glob.sync(defaultSettings.distFolder + '/**/index.html');
+				for (const file of files) {
+					let html = await fs.promises.readFile(file, 'utf-8');
+					let updatedHtml = '';
+
+					if (config.pathSubdirectory && config.pathSubdirectory.length > 0) {
+						updatedHtml = html
+							.replace(/(src|data-load)="\/?src\//g, `$1="${config.pathSubdirectory}`)
+							.replace(/(src|srcset|data-load|href)="\/?assets\//g, `$1="${config.pathSubdirectory}assets/`)
+							.replace(/(src|data-load|href)="\/?resources\//g, `$1="${config.pathSubdirectory}resources/`)
+					} else {
+						updatedHtml = html.replace(/(src|data-load)="\/?src\//g, '$1="/');
+					}
+
+					await fs.promises.writeFile(file, updatedHtml);
+				}
+			},
+			apply: 'build',
+		}
 	],
 	define: {
 		'process.env': process.env