@schalkneethling/miyagi-core 4.0.2

package/lib/init/watcher.js

@@ -0,0 +1,402 @@
+/**
+ * Module for watching user file changes
+ * @module initWatcher
+ */
+
+import anymatch from "anymatch";
+import fs from "fs";
+import path from "path";
+import watch from "node-watch";
+import { WebSocketServer } from "ws";
+import getConfig from "../config.js";
+import yargs from "./args.js";
+import setState from "../state/index.js";
+import { readFile } from "../state/file-contents.js";
+import * as helpers from "../helpers.js";
+import log from "../logger.js";
+import { t } from "../i18n/index.js";
+import setEngines from "./engines.js";
+import setStatic from "./static.js";
+import setViews from "./views.js";
+
+let triggeredEvents = [];
+let timeout;
+
+/**
+ * @param {boolean} [reload] - is true if the page should be reloaded
+ * @param {boolean} [reloadParent] - is true if the parent window should be reloaded
+ */
+function changeFileCallback(reload, reloadParent) {
+	if (reload && global.config.ui.reload) {
+		// ioInstance.emit("fileChanged", reloadParent);
+		sockets.forEach((ws) => {
+			ws.send(reloadParent ? "reloadParent" : "");
+		});
+	}
+
+	triggeredEvents = [];
+	log("success", `${t("updatingDone")}\n`);
+}
+
+/**
+ * @param {Array} triggered - the triggered events
+ * @param {Array} events - array of events to check against
+ * @returns {boolean} is true if the triggered events include the events to check against
+ */
+function triggeredEventsIncludes(triggered, events) {
+	const flattened = triggered.map((event) => event.event);
+
+	for (let i = 0; i < flattened.length; i += 1) {
+		if (events.includes(flattened[i])) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {object[]} events - array of event objects
+ * @returns {Promise<object>} the updated state.fileContents object
+ */
+async function updateFileContents(events) {
+	const data = helpers.cloneDeep(global.state.fileContents);
+
+	try {
+		await Promise.all(
+			events.map(async ({ changedPath }) => {
+				const fullPath = path.join(process.cwd(), changedPath);
+
+				if (
+					fs.existsSync(changedPath) &&
+					fs.lstatSync(changedPath).isFile() &&
+					(helpers.fileIsTemplateFile(changedPath) ||
+						helpers.fileIsDataFile(changedPath) ||
+						helpers.fileIsDocumentationFile(changedPath) ||
+						helpers.fileIsSchemaFile(changedPath))
+				) {
+					try {
+						const result = await readFile(changedPath);
+						data[fullPath] = result;
+						return Promise.resolve();
+					} catch (err) {
+						return Promise.reject(err.message);
+					}
+				} else {
+					delete data[fullPath];
+					return Promise.resolve();
+				}
+			}),
+		);
+
+		return data;
+	} catch (err) {
+		log("error", err);
+	}
+}
+
+/**
+ *
+ */
+async function handleFileChange() {
+	for (const extension of global.config.extensions) {
+		const ext = Array.isArray(extension) ? extension[0] : extension;
+		const opts =
+			Array.isArray(extension) && extension[1] ? extension[1] : { locales: {} };
+
+		if (ext.callbacks?.fileChanged) {
+			await ext.callbacks.fileChanged(opts);
+		}
+	}
+
+	// a directory has been changed
+	if (
+		triggeredEvents.some(
+			({ changedPath }) =>
+				fs.existsSync(changedPath) && fs.lstatSync(changedPath).isDirectory(),
+		)
+	) {
+		await setState({
+			sourceTree: true,
+			fileContents: true,
+			menu: true,
+			partials: true,
+		});
+
+		changeFileCallback(true, true);
+	}
+
+	// removed a directory or file
+	else if (triggeredEventsIncludes(triggeredEvents, ["remove"])) {
+		await setState({
+			sourceTree: true,
+			fileContents: await updateFileContents(triggeredEvents),
+			menu: true,
+			partials: true,
+		});
+
+		changeFileCallback(true, true);
+		// updated file is a template file
+	} else if (
+		triggeredEvents.filter((event) =>
+			helpers.fileIsTemplateFile(event.changedPath),
+		).length > 0
+	) {
+		if (
+			Object.keys(global.state.partials).includes(
+				triggeredEvents[0].changedPath.replace(
+					path.join(global.config.components.folder, "/"),
+					"",
+				),
+			)
+		) {
+			// updated
+			await setState({
+				fileContents: await updateFileContents(triggeredEvents),
+			});
+
+			changeFileCallback(true, false);
+		} else {
+			// added
+			await setState({
+				fileContents: await updateFileContents(triggeredEvents),
+				sourceTree: true,
+				menu: true,
+				partials: true,
+			});
+
+			changeFileCallback(true, true);
+		}
+		// updated file is a mock file
+	} else if (
+		triggeredEvents.some(({ changedPath }) =>
+			helpers.fileIsDataFile(changedPath),
+		)
+	) {
+		const hasBeenAdded = !Object.keys(global.state.fileContents).includes(
+			path.join(process.cwd(), triggeredEvents[0].changedPath),
+		);
+
+		await setState({
+			fileContents: await updateFileContents(triggeredEvents),
+			sourceTree: hasBeenAdded,
+			menu: true,
+		});
+
+		changeFileCallback(true, true);
+		// updated file is a doc file
+	} else if (
+		triggeredEvents.some(({ changedPath }) =>
+			helpers.fileIsDocumentationFile(changedPath),
+		)
+	) {
+		const hasBeenAdded = !Object.keys(global.state.fileContents).includes(
+			path.join(process.cwd(), triggeredEvents[0].changedPath),
+		);
+
+		await setState({
+			fileContents: await updateFileContents(triggeredEvents),
+			sourceTree: hasBeenAdded,
+			menu: hasBeenAdded,
+		});
+
+		changeFileCallback(true, hasBeenAdded);
+		// updated file is a schema file
+	} else if (
+		triggeredEvents.some(({ changedPath }) =>
+			helpers.fileIsSchemaFile(changedPath),
+		)
+	) {
+		await setState({
+			fileContents: await updateFileContents(triggeredEvents),
+		});
+
+		changeFileCallback(true, false);
+		// updated file is an asset file
+	} else if (
+		triggeredEvents.some(({ changedPath }) =>
+			helpers.fileIsAssetFile(changedPath),
+		)
+	) {
+		if (global.config.ui.reloadAfterChanges.componentAssets) {
+			changeFileCallback(true, false);
+		}
+		// updated file is a css file
+	} else if (
+		triggeredEvents.find(({ changedPath }) => {
+			return changedPath.endsWith(".css");
+		})
+	) {
+		// updated file contains custom properties for the styleguide
+		if (
+			triggeredEvents.find(({ changedPath }) => {
+				return global.config.assets.customProperties.files.includes(
+					changedPath,
+				);
+			})
+		) {
+			await setState({
+				css: true,
+			});
+		} else {
+			await setState({
+				menu: true,
+			});
+		}
+
+		if (global.config.ui.reloadAfterChanges.componentAssets) {
+			changeFileCallback(true, false);
+		}
+		// updated file is a js file
+	} else if (
+		triggeredEvents.find(({ changedPath }) => {
+			return changedPath.endsWith(".js");
+		})
+	) {
+		await setState({
+			menu: true,
+		});
+
+		if (global.config.ui.reloadAfterChanges.componentAssets) {
+			changeFileCallback(true, false);
+		}
+	} else {
+		await setState({
+			sourceTree: true,
+			fileContents: true,
+			menu: true,
+			partials: true,
+		});
+
+		changeFileCallback(true, true);
+	}
+}
+
+const sockets = [];
+
+/**
+ * @param {object} server
+ */
+export default function Watcher(server) {
+	const wss = new WebSocketServer({ noServer: true });
+
+	wss.on("connection", function open(ws) {
+		sockets.push(ws);
+	});
+
+	server.on("upgrade", (request, socket, head) => {
+		wss.handleUpgrade(request, socket, head, (ws) => {
+			wss.emit("connection", ws, request);
+		});
+	});
+
+	const { components, docs, assets, extensions } = global.config;
+
+	const foldersToWatch = [
+		...assets.folder.map((f) => path.join(global.config.assets.root, f)),
+		...assets.css
+			.filter(
+				(f) =>
+					!f.startsWith("http://") &&
+					!f.startsWith("https://") &&
+					!f.startsWith("://"),
+			)
+			.map((f) => path.join(global.config.assets.root, f)),
+		...assets.js
+			.map((file) => file.src)
+			.filter(
+				(f) =>
+					!f.startsWith("http://") &&
+					!f.startsWith("https://") &&
+					!f.startsWith("://"),
+			)
+			.map((f) => path.join(global.config.assets.root, f)),
+	];
+
+	if (components.folder) {
+		foldersToWatch.push(components.folder);
+	}
+
+	if (docs?.folder && fs.existsSync(docs.folder)) {
+		foldersToWatch.push(docs.folder);
+	}
+
+	for (const extension of extensions) {
+		const ext = Array.isArray(extension) ? extension[0] : extension;
+		const opts =
+			Array.isArray(extension) && extension[1] ? extension[1] : { locales: {} };
+
+		if (ext.extendWatcher) {
+			const watch = ext.extendWatcher(opts);
+			foldersToWatch.push(path.join(watch.folder, watch.lang));
+		}
+	}
+
+	if (global.config.userFileName && global.config.ui.watchConfigFile) {
+		fs.watch(global.config.userFileName, async (eventType) => {
+			if (eventType === "change") {
+				configurationFileUpdated();
+			}
+		});
+	}
+
+	let watcher;
+
+	try {
+		watcher = watch(
+			foldersToWatch.filter((folder) => fs.existsSync(folder)),
+			{
+				recursive: true,
+				filter(f, skip) {
+					if (anymatch(components.ignores, f)) return skip;
+					return true;
+				},
+			},
+		);
+	} catch (e) {
+		log("error", e);
+	}
+
+	if (watcher) {
+		watcher.on("change", (event, changedPath) => {
+			triggeredEvents.push({ event, changedPath });
+
+			if (!timeout) {
+				console.clear();
+				log("info", t("updatingStarted"));
+				timeout = setTimeout(() => {
+					timeout = null;
+					handleFileChange();
+				}, 10);
+			}
+		});
+	} else {
+		log("error", t("watchingFilesFailed"));
+	}
+}
+
+/**
+ * @returns {Promise<void>}
+ */
+async function configurationFileUpdated() {
+	log("info", t("updatingConfiguration"));
+
+	const config = await getConfig(yargs.argv);
+
+	if (config) {
+		global.config = config;
+		await setEngines();
+		await setState({
+			sourceTree: true,
+			menu: true,
+			partials: true,
+			fileContents: true,
+			css: true,
+		});
+		setStatic();
+		setViews();
+
+		log("success", `${t("updatingConfigurationDone")}\n`);
+		changeFileCallback(true, true);
+	}
+}

package/lib/logger.js

@@ -0,0 +1,94 @@
+const COLORS = {
+	grey: "\x1b[90m",
+	red: "\x1b[31m",
+	yellow: "\x1b[33m",
+	green: "\x1b[32m",
+	cyan: "\x1b[36m",
+	white: "\x1b[37m",
+	reset: "\x1b[0m",
+};
+
+const TYPES = {
+	error: { console: "error", label: "Error", color: "red" },
+	warn: { console: "warn", label: "Warning", color: "yellow" },
+	success: { console: "log", label: "Success", color: "green" },
+	info: { console: "info", label: "Info", color: "cyan" },
+};
+
+/**
+ * @param {string} type
+ * @param {string|null} message
+ * @param {string|Error} [verboseMessage]
+ */
+export default function log(type, message, verboseMessage) {
+	if (process.env.MIYAGI_JS_API) return;
+	if (!(type in TYPES)) return;
+
+	const date = new Date();
+	const year = date.getFullYear();
+	const month = pad(date.getMonth() + 1);
+	const day = pad(date.getDate());
+	const hours = pad(date.getHours());
+	const minutes = pad(date.getMinutes());
+	const seconds = pad(date.getSeconds());
+	const dateStr = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+	const params = {
+		type: TYPES[type].console,
+		dateStr,
+		color: TYPES[type].color,
+		label: TYPES[type].label,
+	};
+
+	if (message) {
+		printMessage({
+			...params,
+			message,
+		});
+	}
+
+	if (process.env.VERBOSE && verboseMessage) {
+		if (type === "error") {
+			console.error(verboseMessage);
+			return;
+		}
+
+		printMessage({
+			...params,
+			message: verboseMessage,
+		});
+	}
+}
+
+/**
+ * @param {string} color
+ * @param {string} str
+ * @returns {string}
+ */
+function colorize(color, str) {
+	return `${COLORS[color]}${str}`;
+}
+
+/**
+ * @param {number} value
+ * @returns {string}
+ */
+function pad(value) {
+	return value.toString().padStart(2, "0");
+}
+
+/**
+ * @param {object} o
+ * @param {string} o.type
+ * @param {string} o.dateStr
+ * @param {string} o.color
+ * @param {string} o.label
+ * @param {string|Error} o.message
+ */
+function printMessage({ type, dateStr, color, label, message }) {
+	console[type](
+		`${colorize("grey", dateStr)} ${colorize(
+			color,
+			`${label}:`,
+		)} ${COLORS.reset}${message}`,
+	);
+}

package/lib/mocks/get.js

@@ -0,0 +1,111 @@
+import { resolveData } from "./resolve.js";
+import config from "../default-config.js";
+import * as helpers from "../helpers.js";
+
+/**
+ * @param {object} component
+ * @returns {Promise<[]>}
+ */
+export const getComponentData = async function getComponentData(component) {
+	if (!component) return null;
+
+	const componentJson = helpers.cloneDeep(
+		global.state.fileContents[
+			component.paths.mocks.full(global.config.files.mocks.extension[0])
+		] ||
+			global.state.fileContents[
+				component.paths.mocks.full(global.config.files.mocks.extension[1])
+			],
+	);
+
+	let context = null;
+
+	if (componentJson) {
+		context = [];
+		let componentData = helpers.removeInternalKeys(componentJson);
+		const rootData = helpers.cloneDeep(componentData);
+		const componentVariations = componentJson.$variants;
+		let data;
+
+		if (Object.keys(componentData).length > 0) {
+			data = await resolveData(componentData, component);
+		} else {
+			data = {
+				messages: [],
+				merged: componentData,
+				resolved: componentData,
+			};
+		}
+
+		if (componentVariations) {
+			let startIndex = context.length;
+			for (const [index, variationJson] of componentVariations.entries()) {
+				if (variationJson.$name) {
+					const variationData = helpers.removeInternalKeys(variationJson);
+
+					const { messages, merged, resolved } = await resolveData(
+						variationData,
+						component,
+						rootData,
+					);
+
+					context[startIndex + index] = {
+						messages,
+						component: component.paths.dir.short,
+						resolved: resolved,
+						raw: merged,
+						name: variationJson.$name,
+					};
+				}
+			}
+
+			if (Object.keys(data.resolved).length > 0) {
+				if (!componentJson.$hidden) {
+					context.unshift({
+						messages: data.messages,
+						component: component.paths.dir.short,
+						resolved: data.resolved,
+						raw: data.merged,
+						name: componentJson.$name || config.defaultVariationName,
+					});
+				}
+			}
+
+			return context.filter((entry) => entry !== null);
+		} else {
+			if (Object.keys(componentData).length > 0) {
+				const { messages, merged, resolved } = await resolveData(
+					componentData,
+					component,
+				);
+
+				context.unshift({
+					messages,
+					component: component.paths.dir.short,
+					resolved: componentJson.$hidden ? {} : resolved,
+					raw: componentJson.$hidden ? {} : merged,
+					name: componentJson.$name || config.defaultVariationName,
+				});
+			}
+
+			return context;
+		}
+	}
+
+	return context;
+};
+
+export const getVariationData = async function getVariationData(
+	component,
+	variation,
+) {
+	const data = await getComponentData(component);
+
+	return (
+		data?.filter(
+			(entry) =>
+				entry.name.toLowerCase().replaceAll(" ", "-") ===
+				variation.toLowerCase().replaceAll(" ", "-"),
+		)[0] ?? null
+	);
+};

package/lib/mocks/index.js

@@ -0,0 +1,9 @@
+import {
+	getComponentData as getComponentDataImport,
+	getVariationData as getVariationDataImport,
+} from "./get.js";
+import { resolveData as resolveDataImport } from "./resolve.js";
+
+export const getComponentData = getComponentDataImport;
+export const getVariationData = getVariationDataImport;
+export const resolveData = resolveDataImport;