mod-build 4.0.0-beta.5 → 4.0.1-beta.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 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.
+	- This change ensures that all assets are transformed before adding the `pathSubdirectory` to the assets and local resources.
+
+- Updated the `grab-shared-scripts` task to run more sequentially.
+	- All files are now downloaded and hashed before going through the functions to replace local paths.
+
+- Changed global resources to download to the site's `/public` folder instead of inside `/src`.
+	- This prevents Vite from bundling them during the build process as they are static JS files.
+
 ## 4.0.0-beta.3
 
 - Add static default tcpa.json to list of shared resources to grab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-build",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.1-beta.1",
   "description": "Share components for S3 sites.",
   "type": "module",
   "scripts": {

package/src/scripts/default/index.js

@@ -0,0 +1,9 @@
+import { loadAdditionalAssets } from "./additional-assets.js";
+import { useDynamicGtm } from './use-dynamic-gtm.js';
+import { updateFooterLinkPaths } from "./update-link-paths.js";
+
+export const globals = (config) => {
+	useDynamicGtm(config);
+	loadAdditionalAssets(config);
+	updateFooterLinkPaths();
+}

package/src/scripts/default/update-link-paths.js

@@ -1,3 +1,5 @@
+import { observeMutations } from "../utils.js";
+
 const updateFooterModalPaths = () => {
 	const footerModalLinks = document.querySelectorAll('.footer__links a');
 	footerModalLinks.forEach((link) => {
@@ -13,19 +15,11 @@ const updateFooterModalPaths = () => {
 	});
 };
 
-export const waitForFooterLinks = () => {
-	const observer = new MutationObserver((mutationsList) => {
-		for (const mutation of mutationsList) {
-			if (mutation.type === 'childList') {
-				const footerLinks = document.querySelector('.footer__links');
-				if (footerLinks) {
-					observer.disconnect();
-					updateFooterModalPaths();
-					break;
-				}
-			}
+export const updateFooterLinkPaths = () => {
+	observeMutations(document.body, () => {
+		const updatedFooterLinks = document.querySelector('.footer__links');
+		if (updatedFooterLinks) {
+			updateFooterModalPaths();
 		}
 	});
-
-	observer.observe(document.body, { childList: true, subtree: true });
 };

package/src/scripts/default/use-dynamic-gtm.js

@@ -1,11 +1,10 @@
 
 export const useDynamicGtm = (config) => {
 	const { page } = config;
-
 	if (page.headConfig.useDynamicGtm || typeof window.isQSPage === 'undefined') {
-	import('@/scripts/has-qs-params.js').then((qs) => {
-		qs.default();
-		window.gtm_container_ID = window.isQSPage ? config.qs_gtm_container_ID : config.gtm_container_ID;
-	});
+		import('@/scripts/has-qs-params.js').then((qs) => {
+			qs.default();
+			window.gtm_container_ID = window.isQSPage ? config.qs_gtm_container_ID : config.gtm_container_ID;
+		});
 	}
 }

package/src/scripts/plugins.js

@@ -0,0 +1,109 @@
+import fs from "node:fs";
+import { defaultSettings } from "../data/config.js";
+import footer from '../data/footer.js';
+import { handlebarsHelpers } from "./utils.js";
+import gulpHandlebarsFileInclude from "gulp-handlebars-file-include";
+import merge from "lodash.merge";
+import { glob } from 'glob'
+
+export const STATIC_COPY_TARGETS = [
+	{
+		src: './src/resources/templates',
+		dest: './resources/'
+	},
+	{
+		src: './src/fonts',
+		dest: './'
+	},
+	{
+		src: './src/videos',
+		dest: './'
+	},
+	{
+		src: './src/accessible-components/carousel/carousel.min.js',
+		dest: './accessible-components/carousel'
+	},
+	{
+		src: './src/accessible-components/expand-collapse/expand-collapse.min.js',
+		dest: './accessible-components/expand-collapse'
+	},
+	{
+		src: './src/accessible-components/progress-bar/progress-bar.min.js',
+		dest: './accessible-components/progress-bar'
+	},
+];
+
+export const updateConfig = async (config) => {
+	const { isLocal, nodeEnv, buildPath } = defaultSettings;
+	// eslint-disable-next-line no-unused-vars
+	let tempConfigExists;
+
+	let mergedConfig = { 
+		...config,
+		...footer(config),
+		...{ isLocal, nodeEnv, buildPath }
+	};
+
+	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',
+		async configResolved({ configFileDependencies }) {
+			await checkForTempConfig();
+
+			configFileDependencies.forEach((file) => {
+				if (file.endsWith('siteconfig.js') || file.endsWith('template.js')) {
+					console.log('siteconfig or template changed');
+					try {
+						// overwrite the config file with new data
+						fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
+					} catch (error) {
+						console.error(`Error reading config file: ${error}`);
+					}
+				}
+			});
+		},
+		configureServer() {
+			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
+		},
+		buildStart() {
+			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
+			fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
+		}
+	}
+}
+
+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/src/scripts/utils.js

@@ -1,9 +1,5 @@
-import fs from "node:fs";
 import { seasons } from "../data/seasons.js";
-import { defaultSettings } from "../data/config.js";
-import footer from '../data/footer.js';
 import gulpHandlebarsFileInclude from "gulp-handlebars-file-include";
-import merge from "lodash.merge";
 
 export function getFileFromURL(url) {
 	return url.split('/').pop();
@@ -171,51 +167,16 @@ export const handlebarsHelpers = [
 	}		
 ]
 
-export const updateConfig = async (config) => {
-	const { isLocal, nodeEnv, buildPath } = defaultSettings;
-	let tempConfigExists;
-
-	let mergedConfig = { 
-		...config,
-		...footer(config),
-		...{ isLocal, nodeEnv, buildPath }
-	};
-
-	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',
-		async configResolved({ configFileDependencies }) {
-			await checkForTempConfig();
-
-			configFileDependencies.forEach((file) => {
-				if (file.endsWith('siteconfig.js') || file.endsWith('template.js')) {
-					console.log('siteconfig or template changed');
-					try {
-						// overwrite the config file with new data
-						fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
-					} catch (error) {
-						console.error(`Error reading config file: ${error}`);
-					}
-				}
-			});
-		},
-		configureServer() {
-			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
-		},
-		buildStart() {
-			gulpHandlebarsFileInclude(mergedConfig, { handlebarsHelpers, maxRecursion: 500 });
-			fs.writeFileSync('src/.tmp/config.json', JSON.stringify(mergedConfig, null, 2));
+export const observeMutations = (target, callback) => {
+	const observer = new MutationObserver((mutationsList) => {
+		for (const mutation of mutationsList) {
+			if (mutation.type === 'childList') {
+				callback();
+				observer.disconnect();
+				break;
+			}
 		}
-	}
-}
+	});
+
+	observer.observe(target, { childList: true, subtree: true });
+};

package/tasks/templates.js

@@ -81,7 +81,7 @@ const fetchTcpaFromSitegenie = async (config, tempConfig) => {
 	}
 
 	console.log('Starting fetch-tcpa-from-sitegenie: ', url);
-	return new Promise((resolve, reject) => {
+	return new Promise((resolve) => {
 		axios(options)
 			.then(async resp => {
 				if (resp.status !== 200) {
@@ -104,7 +104,7 @@ const fetchTcpaFromSitegenie = async (config, tempConfig) => {
 				console.log('Response error...using default TCPA language');
 			}
 			
-			defaultTcpa = JSON.parse(fs.readFileSync('src/resources/data/tcpa.json', 'utf8'));
+			let defaultTcpa = JSON.parse(fs.readFileSync('src/resources/data/tcpa.json', 'utf8'));
 			tempConfig.tcpaText = defaultTcpa.tcpaText;
 			resolve(error);
 		});

package/vite.config.js

@@ -4,10 +4,8 @@ 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 } from './src/scripts/utils.js'
+import { updateConfig, replaceSrcPaths, 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: {
@@ -27,32 +25,7 @@ export default defineConfig((config) => ({
 		}),
 		updateConfig(config),
 		viteStaticCopy({
-			targets: [
-				{
-					src: './src/resources',
-					dest: './'
-				},
-				{
-					src: './src/fonts',
-					dest: './'
-				},
-				{
-					src: './src/videos',
-					dest: './'
-				},
-				{
-					src: './src/accessible-components/carousel/carousel.min.js',
-					dest: './accessible-components/carousel'
-				},
-				{
-					src: './src/accessible-components/expand-collapse/expand-collapse.min.js',
-					dest: './accessible-components/expand-collapse'
-				},
-				{
-					src: './src/accessible-components/progress-bar/progress-bar.min.js',
-					dest: './accessible-components/progress-bar'
-				},
-			],
+			targets: STATIC_COPY_TARGETS,
 		}),
 		{
 			...eslint(),
@@ -66,28 +39,7 @@ export default defineConfig((config) => ({
 			apply: 'serve',
 			enforce: 'post'
 		},
-		{
-			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|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',
-		}
+		replaceSrcPaths(config),
 	],
 	define: {
 		'process.env': process.env