@schalkneethling/miyagi-core 4.0.2

package/lib/mocks/resolve.js

@@ -0,0 +1,205 @@
+import deepMerge from "deepmerge";
+import * as helpers from "../helpers.js";
+import { resolveRefs } from "./resolve/ref.js";
+import { resolveTpls } from "./resolve/tpl.js";
+import { extendTemplateData } from "../render/helpers.js";
+
+/**
+ * @param {string} method
+ * @returns {Function}
+ */
+function getMergeMethod(method) {
+	const methods = {
+		combine: (target, source, options) => {
+			const destination = target.slice();
+
+			source.forEach((item, index) => {
+				if (options.isMergeableObject(item)) {
+					if (typeof destination[index] === "undefined") {
+						destination[index] = options.cloneUnlessOtherwiseSpecified(
+							item,
+							options,
+						);
+					} else {
+						destination[index] = deepMerge(target[index], item, options);
+					}
+				} else {
+					destination[index] = options.cloneUnlessOtherwiseSpecified(
+						item,
+						options,
+					);
+				}
+			});
+
+			return destination;
+		},
+
+		overwrite: (destinationArray, sourceArray) => sourceArray,
+	};
+
+	return methods[method];
+}
+
+/**
+ * @param {object} data - the mock data object that will be passed into the component
+ * @param {object} component
+ * @param {object} [rootData] - the root mock data object
+ * @returns {Promise<{ merged, resolved, messages }>} the resolved data object
+ */
+export const resolveData = async function (data, component, rootData) {
+	const mergedWithGlobalData = mergeWithGlobalData(
+		rootData ? mergeRootDataWithVariationData(rootData, data) : data,
+	);
+	const { data: refsResolved, messages: refMessages } = await resolveRefs(
+		{ ...mergedWithGlobalData },
+		component,
+	);
+	const extended = await extendTemplateData(
+		global.config,
+		refsResolved,
+		component,
+	);
+	const { data: tplsResolved, messages: tplMessages } =
+		await resolveTpls(extended);
+	const resolved = overwriteRenderKey(tplsResolved);
+
+	return {
+		merged: mergedWithGlobalData,
+		resolved,
+		messages: [...refMessages, ...tplMessages],
+	};
+};
+
+/**
+ * @param {object} data - the mock data object that will be passed into the component
+ * @returns {object} the resolved data object
+ */
+export const overwriteRenderKey = function (data) {
+	let o;
+
+	if (
+		["string", "number", "boolean"].includes(typeof data) ||
+		data instanceof Map
+	) {
+		return data;
+	}
+
+	if (Array.isArray(data)) {
+		for (let item of data) {
+			item = overwriteRenderKey(item);
+		}
+
+		return data;
+	}
+
+	if (data) {
+		o = { ...data };
+		const entries = Object.entries(o);
+
+		for (const [key, val] of entries) {
+			if (key === "$render") {
+				let str = "";
+
+				if (val) {
+					for (const html of val) {
+						str += html;
+					}
+				}
+
+				o = str;
+			} else {
+				if (
+					typeof val == "string" ||
+					typeof val === "number" ||
+					typeof val === "boolean" ||
+					val instanceof Map ||
+					val === null
+				) {
+					o[key] = val;
+				} else if (Array.isArray(val)) {
+					val.forEach((v, i) => {
+						if (
+							typeof v == "string" ||
+							typeof v === "number" ||
+							typeof v === "boolean" ||
+							v instanceof Map ||
+							v === null
+						) {
+							o[key][i] = v;
+						} else {
+							o[key][i] = overwriteRenderKey(v);
+						}
+					});
+				} else {
+					o[key] = overwriteRenderKey(val);
+				}
+			}
+		}
+	}
+
+	return o;
+};
+
+/**
+ * @param {object} rootData - the root mock data of a component
+ * @param {object} variationData - a variation mock data of a component
+ * @returns {object} the merged data
+ */
+export const mergeRootDataWithVariationData = function (
+	rootData,
+	variationData,
+) {
+	if (!rootData) {
+		return variationData;
+	}
+
+	if (!variationData) {
+		return rootData;
+	}
+
+	const merged = deepMerge(rootData, variationData, {
+		customMerge: (key) => {
+			const options = variationData.$opts || rootData.$opts;
+
+			if (options) {
+				const option = options[key];
+
+				if (option) {
+					return getMergeMethod(option);
+				}
+			}
+
+			return undefined;
+		},
+	});
+
+	if (merged.$opts) {
+		delete merged.$opts;
+	}
+
+	return merged;
+};
+
+/**
+ * @param {object} data - the mock data object that will be passed into the component
+ * @returns {object} the merged data object
+ */
+function mergeWithGlobalData(data) {
+	const defaultFile = helpers.getFullPathFromShortPath(
+		`${global.config.files.mocks.name}.${global.config.files.mocks.extension[0]}`,
+	);
+	const jsFile = helpers.getFullPathFromShortPath(
+		`${global.config.files.mocks.name}.${global.config.files.mocks.extension[1]}`,
+	);
+	const globalData = {
+		...(global.state.fileContents[defaultFile] ||
+			global.state.fileContents[jsFile]),
+	};
+
+	delete globalData.$defs;
+
+	return {
+		...globalData,
+		...data,
+	};
+}

package/lib/render/helpers.js

@@ -0,0 +1,51 @@
+/**
+ * Helper functions for the render module
+ * @module renderHelpers
+ */
+
+import path from "path";
+
+/**
+ * @param {object} config - the user configuration object
+ * @param {object} data - the mock data object that will be passed into the component
+ * @param {object} component
+ * @returns {Promise<object>} the extended data object
+ */
+export const extendTemplateData = async (config, data, component) => {
+	for (const extension of config.extensions) {
+		if (extension) {
+			const ext = Array.isArray(extension) ? extension[0] : extension;
+
+			if (ext.extendTemplateData) {
+				data = await ext.extendTemplateData(
+					path.join(config.components.folder, component.paths.tpl.short),
+					{},
+					data,
+				);
+			}
+		}
+	}
+
+	return data;
+};
+
+export const getUserUiConfig = (cookies = {}) => {
+	const projectName = global.config.projectName.replaceAll(" ", "-");
+	const mode = cookies[`miyagi_${projectName}_mode`];
+	const theme = cookies[`miyagi_${projectName}_theme`];
+	const componentTextDirection =
+		cookies[`miyagi_${projectName}_text_direction`];
+
+	return {
+		mode: global.config.isBuild ? "presentation" : mode || "dev",
+		theme: theme || global.config.ui.mode,
+		componentTextDirection:
+			componentTextDirection || global.config.components.textDirection,
+	};
+};
+
+export const getThemeMode = (cookies = {}) => {
+	return cookies[
+		`miyagi_${global.config.projectName.replaceAll(" ", "-")}_theme`
+	];
+};

package/lib/render/index.js

@@ -0,0 +1,38 @@
+/**
+ * Rendering module
+ * @module render
+ */
+
+import renderIframeComponent from "./views/iframe/component.js";
+import renderIframeComponentDocs from "./views/iframe/component.docs.js";
+import renderIframeDocs from "./views/iframe/docs.js";
+import renderIframeIndex from "./views/iframe/index.js";
+import renderIframeVariation from "./views/iframe/variation.js";
+import renderIframeVariationStandalone from "./views/iframe/variation.standalone.js";
+import renderMainComponent from "./views/main/component.js";
+import renderMainComponentDocs from "./views/main/component.docs.js";
+import renderMainDocs from "./views/main/docs.js";
+import renderMainIndex from "./views/main/index.js";
+import iframeDesignTokens from "./views/iframe/design-tokens/index.js";
+import renderMainDesignTokens from "./views/main/design-tokens.js";
+
+export default {
+	renderMainIndex,
+	renderMainComponent,
+	renderMainComponentDocs,
+	renderMainDocs,
+	renderIframeVariation,
+	renderIframeVariationStandalone,
+	renderIframeComponent,
+	renderIframeComponentDocs,
+	renderIframeDocs,
+	renderIframeIndex,
+	renderMainDesignTokens,
+	iframe: {
+		designTokens: {
+			colors: iframeDesignTokens.colors,
+			sizes: iframeDesignTokens.sizes,
+			typography: iframeDesignTokens.typography,
+		},
+	},
+};

package/lib/render/views/iframe/component.docs.js

@@ -0,0 +1,77 @@
+import path from "path";
+import config from "../../../default-config.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {object} object.component
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ */
+export default async function renderIframeComponentDocs({
+	res,
+	component,
+	cb,
+	cookies,
+}) {
+	const componentDocumentation =
+		global.state.fileContents[component.paths.docs.full];
+	const componentName = getHeadlineFromFileName(
+		path.basename(
+			component.paths.docs.full,
+			path.extname(component.paths.docs.full),
+		),
+	);
+	const themeMode = getThemeMode(cookies);
+
+	await res.render(
+		"iframe_component.twig.miyagi",
+		{
+			lang: global.config.ui.lang,
+			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+			prod: process.env.NODE_ENV === "production",
+			projectName: config.projectName,
+			userProjectName: global.config.projectName,
+			isBuild: global.config.isBuild,
+			userUiConfig: getUserUiConfig(cookies),
+			theme: themeMode
+				? Object.assign(global.config.ui.theme, { mode: themeMode })
+				: global.config.ui.theme,
+			documentation: componentDocumentation,
+			name: componentDocumentation?.includes("<h1") ? null : componentName,
+			uiTextDirection: global.config.ui.textDirection,
+		},
+		(html) => {
+			if (res.send) {
+				res.send(html);
+			}
+
+			if (cb) {
+				cb(null, html);
+			}
+		},
+	);
+}
+
+/**
+ * @param {string} file
+ * @returns {string}
+ */
+function getHeadlineFromFileName(file) {
+	if (typeof file !== "string") return "";
+
+	let fileName = file;
+
+	if (fileName.startsWith("/")) {
+		fileName = fileName.slice(1);
+	}
+
+	if (file.endsWith("README.md") || file.endsWith("index.md")) {
+		fileName = path.dirname(fileName);
+	} else {
+		fileName = path.basename(fileName, ".md");
+	}
+
+	return fileName.replaceAll("-", " ");
+}

package/lib/render/views/iframe/component.js

@@ -0,0 +1,338 @@
+import path from "path";
+import jsonToYaml from "js-yaml";
+import config from "../../../default-config.js";
+import { t } from "../../../i18n/index.js";
+import * as helpers from "../../../helpers.js";
+import validateMocks from "../../../validator/mocks.js";
+import { getComponentData } from "../../../mocks/index.js";
+import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+import log from "../../../logger.js";
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {object} object.component
+ * @param {Function} [object.cb] - callback function
+ * @param {object} [object.cookies]
+ * @param {boolean} [object.noCli]
+ */
+export default async function renderIframeComponent({
+	res,
+	component,
+	cb,
+	cookies,
+	noCli,
+}) {
+	const hasTemplate =
+		component.paths.tpl &&
+		Object.values(global.state.partials).includes(component.paths.tpl.full);
+	const componentJson = (await getComponentData(component)) || [];
+	const componentDocumentation =
+		global.state.fileContents[path.join(component.paths.dir.full, "README.md")];
+	const componentSchema =
+		global.state.fileContents[component.paths.schema.full];
+	const componentTemplate = hasTemplate
+		? global.state.fileContents[component.paths.tpl.full]
+		: null;
+
+	let mockFilePath;
+
+	const defaultMockDataPath = component.paths.mocks.full(
+		global.config.files.mocks.extension[0],
+	);
+	const jsMockDataPath = component.paths.mocks.full(
+		global.config.files.mocks.extension[1],
+	);
+	const jsMockData = global.state.fileContents[jsMockDataPath];
+
+	if (jsMockData) {
+		mockFilePath = jsMockDataPath;
+	} else {
+		mockFilePath = defaultMockDataPath;
+	}
+
+	const componentMocks = global.state.fileContents[mockFilePath];
+
+	let componentSchemaString;
+	if (componentSchema) {
+		if (["yaml", "yml"].includes(global.config.files.schema.extension)) {
+			componentSchemaString = jsonToYaml.dump(componentSchema);
+		} else {
+			componentSchemaString = JSON.stringify(componentSchema, null, 2);
+		}
+	}
+
+	let componentMocksString;
+	if (componentMocks) {
+		if (["yaml", "yml"].includes(global.config.files.mocks.extension[0])) {
+			componentMocksString = jsonToYaml.dump(componentMocks);
+		} else {
+			componentMocksString = JSON.stringify(componentMocks, null, 2);
+		}
+	}
+
+	const fileContents = {
+		schema: componentSchema
+			? {
+					string: componentSchemaString,
+					type: global.config.files.schema.extension,
+					file: path.join(
+						global.config.components.folder,
+						component.paths.schema.short,
+					),
+				}
+			: null,
+		mocks: componentMocks
+			? {
+					string: componentMocksString,
+					type: global.config.files.mocks.extension[0],
+					file: path.join(
+						global.config.components.folder,
+						helpers.getShortPathFromFullPath(mockFilePath),
+					),
+				}
+			: null,
+		template: componentTemplate
+			? {
+					string: componentTemplate,
+					type: global.config.files.templates.extension,
+					file: path.join(
+						global.config.components.folder,
+						helpers.getShortPathFromFullPath(component.paths.tpl.full),
+					),
+				}
+			: null,
+	};
+
+	await renderVariations({
+		res,
+		component,
+		context: componentJson.filter((entry) => entry !== null),
+		componentDocumentation,
+		fileContents,
+		name: component.name,
+		cb,
+		templateFilePath: hasTemplate ? component.paths.tpl.full : null,
+		cookies,
+		noCli,
+	});
+}
+
+/**
+ * @typedef {object} FileContents
+ * @property {object} schema - schema object
+ * @property {string} schema.string - string with schema
+ * @property {("yaml"|"yml"|"json")} schema.type - the file type of the schema file
+ * @property {boolean} [schema.selected] - true if the schema tab should initially be visible
+ * @property {string} schema.file - the schema file path
+ * @property {object} mocks - mocks object
+ * @property {string} mocks.string - string with mocks
+ * @property {("yaml"|"yml"|"js"|"json")} mocks.type - the file type of the mocks file
+ * @property {boolean} [mocks.selected] - true if the mocks tab should initially be visible
+ * @property {string} mocks.file - the mock file path
+ * @property {object} template - template object
+ * @property {string} template.string - string with template
+ * @property {string} template.type - the file type of the template file
+ * @property {boolean} [template.selected] - true if the template tab should initially be visible
+ * @property {string} template.file - the template file path
+ */
+
+/**
+ * @param {object} object - parameter object
+ * @param {object} object.res - the express response object
+ * @param {object} object.component
+ * @param {Array} object.context - mock data for each variation
+ * @param {string} object.componentDocumentation - html string with documentation
+ * @param {FileContents} object.fileContents - file contents object
+ * @param {string} object.name - component name
+ * @param {Function} object.cb - callback function
+ * @param {string} object.templateFilePath - the absolute component file path
+ * @param {object} [object.cookies]
+ * @param {boolean} object.noCli
+ * @returns {Promise}
+ */
+async function renderVariations({
+	res,
+	component,
+	context,
+	componentDocumentation,
+	fileContents,
+	name,
+	cb,
+	templateFilePath,
+	cookies,
+	noCli,
+}) {
+	const variations = [];
+	const promises = [];
+	const validatedMocks = validateMocks(component, context, noCli);
+
+	if (templateFilePath) {
+		if (context.length > 0) {
+			for (let i = 0, len = context.length; i < len; i += 1) {
+				const entry = context[i];
+
+				variations[i] = getData(
+					context[i].name,
+					component.paths.dir.short,
+					entry,
+					validatedMocks,
+				);
+			}
+		}
+	} else {
+		promises.push(Promise.resolve());
+	}
+
+	let schemaJson;
+
+	if (fileContents?.schema?.string) {
+		try {
+			schemaJson = JSON.stringify(jsonToYaml.load(fileContents.schema.string));
+		} catch (err) {
+			log("error", null, err);
+		}
+	}
+
+	let mocksJson;
+
+	if (fileContents?.mocks?.string) {
+		try {
+			mocksJson = JSON.stringify(jsonToYaml.load(fileContents.mocks.string));
+		} catch (err) {
+			log("error", null, err);
+		}
+	}
+
+	return Promise.all(promises)
+		.then(async () => {
+			const themeMode = getThemeMode(cookies);
+			const renderFileTabs = !!(
+				fileContents.schema ||
+				fileContents.mocks ||
+				fileContents.template
+			);
+			const componentsEntry = global.state.components.find(
+				({ shortPath }) => shortPath === component.paths.dir.short,
+			);
+
+			await res.render(
+				"iframe_component.twig.miyagi",
+				{
+					lang: global.config.ui.lang,
+					variations,
+					cssFiles: global.config.assets.css,
+					jsFilesHead: global.config.assets.js.filter(
+						(entry) => entry.position === "head" || !entry.position,
+					),
+					jsFilesBody: global.config.assets.js.filter(
+						(entry) => entry.position === "body",
+					),
+					assets: {
+						css: componentsEntry
+							? componentsEntry.assets.css
+								? path.join("/", componentsEntry.assets.css)
+								: false
+							: false,
+						js: componentsEntry
+							? componentsEntry.assets.js
+								? path.join("/", componentsEntry.assets.js)
+								: false
+							: false,
+					},
+					miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+					prod: process.env.NODE_ENV === "production",
+					projectName: config.projectName,
+					userProjectName: global.config.projectName,
+					isBuild: global.config.isBuild,
+					userUiConfig: getUserUiConfig(cookies),
+					theme: themeMode
+						? Object.assign(global.config.ui.theme, { mode: themeMode })
+						: global.config.ui.theme,
+					documentation: componentDocumentation,
+					schema: schemaJson,
+					schemaError:
+						validatedMocks?.length > 0 && validatedMocks[0].type === "schema"
+							? validatedMocks[0].data.map((error) => error.message).join("\n")
+							: null,
+					mocks: mocksJson,
+					template: fileContents.template,
+					renderInformation: renderFileTabs || variations.length > 0,
+					renderFileTabs,
+					folder: path.join(
+						global.config.components.folder,
+						component.paths.dir.short,
+					),
+					name: componentDocumentation?.includes("<h1>") ? null : name,
+					uiTextDirection: global.config.ui.textDirection,
+					componentLanguage: global.config.components.lang,
+				},
+				(html) => {
+					if (res.send) {
+						res.send(html);
+					}
+
+					if (cb) {
+						cb(null, html);
+					}
+				},
+			);
+		})
+		.catch(() => {
+			if (cb) {
+				cb(true);
+			}
+		});
+}
+
+/**
+ * @param {string} variation
+ * @param {string} shortPath
+ * @param {object} entry
+ * @param {Array} validatedMocks
+ * @returns {object}
+ */
+function getData(variation, shortPath, entry, validatedMocks) {
+	let standaloneUrl;
+
+	if (global.config.isBuild) {
+		standaloneUrl = `component-${helpers.normalizeString(
+			shortPath,
+		)}-variation-${helpers.normalizeString(variation)}.html`;
+	} else {
+		standaloneUrl = `/component?file=${shortPath}&variation=${encodeURIComponent(
+			variation,
+		)}`;
+	}
+
+	const data = {
+		url: global.config.isBuild
+			? `component-${helpers.normalizeString(
+					shortPath,
+				)}-variation-${helpers.normalizeString(variation)}-embedded.html`
+			: `/component?file=${shortPath}&variation=${variation}&embedded=true`,
+		file: shortPath,
+		variation,
+		normalizedVariation: helpers.normalizeString(variation),
+		standaloneUrl,
+		mockData: JSON.stringify(entry.raw),
+		mockDataResolved: JSON.stringify(entry.resolved),
+	};
+
+	const validationEntry = validatedMocks?.find(
+		(item) => item.variant === entry.name,
+	);
+
+	if (validationEntry) {
+		data.mockValidation = {
+			valid: false,
+			copy: t("validator.mocks.invalid"),
+		};
+	} else {
+		data.mockValidation = {
+			valid: true,
+		};
+	}
+
+	return data;
+}