@schalkneethling/miyagi-core 4.0.2

package/lib/init/router.js

@@ -0,0 +1,249 @@
+/**
+ * Module for accepting and routing requests
+ * @module initRouter
+ */
+
+import path from "path";
+import config from "../default-config.js";
+import render from "../render/index.js";
+import { getVariationData } from "../mocks/index.js";
+import log from "../logger.js";
+
+/**
+ * @param {object} component
+ * @returns {object} the mock data of the given component
+ */
+function getDataForComponent(component) {
+	const { fileContents } = global.state;
+	const { name, extension } = global.config.files.mocks;
+
+	const defaultPath = path.join(
+		component.paths.dir.full,
+		`${name}.${extension[0]}`,
+	);
+
+	const jsPath = path.join(component.paths.dir.full, `${name}.${extension[1]}`);
+
+	return fileContents[defaultPath] || fileContents[jsPath];
+}
+
+/**
+ * @param {object} data - mock data object
+ * @param {string} variation - requested variation name
+ * @returns {boolean} is true of the requested variation is in the given mock data
+ */
+function checkIfDataIncludesVariation(data, variation) {
+	return data?.$variants?.find((variant) => variant.$name === variation);
+}
+
+/**
+ * @param {object} component
+ * @param {string} variation - the requested variation name
+ * @returns {boolean} is true if the requested variation exists in the mock data of the given component
+ */
+function checkIfRequestedVariationIsValid(component, variation) {
+	const data = getDataForComponent(component);
+
+	if (
+		data &&
+		(variation === data.$name || variation === config.defaultVariationName) &&
+		!data.$hidden
+	) {
+		return true;
+	}
+
+	if (!data && variation === config.defaultVariationName) {
+		return true;
+	}
+
+	return checkIfDataIncludesVariation(data, variation);
+}
+
+/**
+ * @returns {void}
+ */
+export default function Router() {
+	global.app.get("/design-tokens/colors", async (req, res) => {
+		return render.renderMainDesignTokens({
+			res,
+			cookies: req.cookies,
+			type: "colors",
+		});
+	});
+
+	global.app.get("/iframe/design-tokens/colors", async (req, res) => {
+		return render.iframe.designTokens.colors({ res, cookies: req.cookies });
+	});
+
+	global.app.get("/design-tokens/sizes", async (req, res) => {
+		return render.renderMainDesignTokens({
+			res,
+			cookies: req.cookies,
+			type: "sizes",
+		});
+	});
+
+	global.app.get("/iframe/design-tokens/sizes", async (req, res) => {
+		return render.iframe.designTokens.sizes({ res, cookies: req.cookies });
+	});
+
+	global.app.get("/design-tokens/typography", async (req, res) => {
+		return render.renderMainDesignTokens({
+			res,
+			cookies: req.cookies,
+			type: "typography",
+		});
+	});
+
+	global.app.get("/iframe/design-tokens/typography", async (req, res) => {
+		return render.iframe.designTokens.typography({
+			res,
+			cookies: req.cookies,
+		});
+	});
+
+	global.app.get("/show", async (req, res) => {
+		const { file, variation } = req.query;
+
+		if (!file) {
+			return res.redirect(302, "/");
+		}
+
+		if (file === "all") {
+			return await render.renderMainIndex({ res, cookies: req.cookies });
+		}
+
+		const routesEntry = global.state.routes.find(
+			(route) => route.paths.dir.short === file,
+		);
+
+		if (!routesEntry) {
+			return res.redirect(302, "/");
+		}
+
+		switch (routesEntry.type) {
+			case "components": {
+				if (!routesEntry.paths.tpl) {
+					return await render.renderMainComponentDocs({
+						res,
+						component: routesEntry,
+						cookies: req.cookies,
+					});
+				}
+
+				return await render.renderMainComponent(
+					checkIfRequestedVariationIsValid(routesEntry, variation)
+						? {
+								res,
+								component: routesEntry,
+								cookies: req.cookies,
+								variation,
+							}
+						: {
+								res,
+								component: routesEntry,
+								cookies: req.cookies,
+							},
+				);
+			}
+
+			case "docs": {
+				return await render.renderMainDocs({
+					res,
+					doc: routesEntry,
+					cookies: req.cookies,
+				});
+			}
+
+			default:
+				return res.redirect(302, "/");
+		}
+	});
+
+	global.app.get("/component", async (req, res) => {
+		const { file, variation, embedded } = req.query;
+
+		if (!file) {
+			return res.redirect(302, global.config.indexPath.default);
+		}
+
+		if (file === "all") {
+			return await render.renderIframeIndex({ res, cookies: req.cookies });
+		}
+
+		const routesEntry = global.state.routes.find(
+			(route) => route.paths.dir.short === file,
+		);
+
+		if (!routesEntry) {
+			res.redirect(302, global.config.indexPath.default);
+		}
+
+		switch (routesEntry.type) {
+			case "components": {
+				if (!routesEntry.paths.tpl) {
+					return await render.renderIframeComponentDocs({
+						res,
+						component: routesEntry,
+						cookies: req.cookies,
+					});
+				}
+
+				if (
+					!variation ||
+					!checkIfRequestedVariationIsValid(routesEntry, variation)
+				) {
+					return await render.renderIframeComponent({
+						res,
+						component: routesEntry,
+						cookies: req.cookies,
+					});
+				}
+
+				const data = await getVariationData(routesEntry, decodeURI(variation));
+
+				if (embedded) {
+					return await render.renderIframeVariation({
+						res,
+						component: routesEntry,
+						variation,
+						cookies: req.cookies,
+						data,
+					});
+				}
+
+				if (data?.messages?.length) {
+					for (const { type, text, verbose } of data.messages) {
+						log(type, text, verbose);
+					}
+				}
+
+				return await render.renderIframeVariationStandalone({
+					res,
+					component: routesEntry,
+					componentData: data?.resolved ?? {},
+					cookies: req.cookies,
+				});
+			}
+
+			case "docs": {
+				return await render.renderIframeDocs({
+					res,
+					doc: routesEntry,
+					cookies: req.cookies,
+				});
+			}
+
+			default:
+				res.redirect(302, global.config.indexPath.default);
+		}
+	});
+
+	global.app.get("/", async (req, res) => {
+		await render.renderMainIndex({ res, cookies: req.cookies });
+	});
+
+	global.app.all("*splat", async (req, res) => {
+		res.sendStatus(404);
+	});
+}

package/lib/init/static.js

@@ -0,0 +1,133 @@
+/**
+ * Module for registering static files
+ * @module initStatic
+ */
+
+import path from "path";
+import express from "express";
+import config from "../default-config.js";
+
+/**
+ * @returns {void}
+ */
+function registerUserAssetFolder() {
+	const { assets } = global.config;
+
+	if (assets && assets.folder) {
+		for (const folder of assets.folder) {
+			global.app.use(
+				path.join("/", folder),
+				express.static(path.join(assets.root, folder)),
+			);
+		}
+	}
+}
+
+/**
+ * @returns {void}
+ */
+function registerThemeFavicon() {
+	if (global.config.ui && global.config.ui.theme) {
+		const file = global.config.ui.theme.favicon;
+
+		if (file) {
+			global.app.use(`/favicon.ico`, express.static(path.resolve(file)));
+		}
+	}
+}
+
+/**
+ * @returns {void}
+ */
+function registerThemeLogo() {
+	const files = [
+		global.config.ui.theme.logo.light,
+		global.config.ui.theme.logo.dark,
+	];
+
+	files.forEach((file) => {
+		if (file) {
+			global.app.use(
+				path.join("/", path.dirname(file)),
+				express.static(path.resolve(path.dirname(file))),
+			);
+		}
+	});
+}
+
+/**
+ * @param {("css"|"js")} files - the type of user assets that should be registered
+ */
+function registerUserFiles(files) {
+	const { assets } = global.config;
+
+	if (assets) {
+		for (const file of assets[files]) {
+			const asset = files === "js" ? file.src : file;
+
+			if (asset.startsWith("https://")) continue;
+
+			global.app.use(
+				path.join("/", path.dirname(asset)),
+				express.static(path.join(assets.root, path.dirname(asset))),
+			);
+		}
+	}
+}
+
+/**
+ * @returns {void}
+ */
+function registerCustomPropertyFiles() {
+	const { assets } = global.config;
+
+	if (assets?.customProperties?.files) {
+		for (const file of assets.customProperties.files) {
+			global.app.use(
+				path.join("/", path.dirname(file)),
+				express.static(path.dirname(file)),
+			);
+		}
+	}
+}
+
+/**
+ * @returns {void}
+ */
+function registerAssetFolder() {
+	const assetFolder =
+		config.folders.assets[
+			process.env.MIYAGI_DEVELOPMENT ? "development" : "production"
+		];
+
+	global.app.use(
+		`/${config.projectName}`,
+		express.static(path.join(import.meta.dirname, `../../${assetFolder}`)),
+	);
+}
+
+/**
+ * @returns {void}
+ */
+function registerUserComponentAssets() {
+	if (!global.config.components.folder) return;
+
+	global.app.use(
+		path.join("/", global.config.components.folder),
+		express.static(global.config.components.folder),
+	);
+}
+
+/**
+ * @returns {void}
+ */
+export default function initStatic() {
+	registerThemeFavicon();
+	registerThemeLogo();
+	registerUserAssetFolder();
+	registerUserComponentAssets();
+	registerUserFiles("css");
+	registerUserFiles("js");
+	registerCustomPropertyFiles();
+	registerAssetFolder();
+}

package/lib/init/twing/cache.js

@@ -0,0 +1,34 @@
+export default class TwingCache {
+	#cache = new Map();
+
+	/**
+	 * @param {string} key
+	 * @returns {object|null}
+	 */
+	load(key) {
+		if (this.#cache.get(key)?.content) {
+			return this.#cache.get(key)?.content;
+		}
+
+		return null;
+	}
+
+	/**
+	 * @param {string} key
+	 * @param {object} content
+	 */
+	write(key, content) {
+		const timestamp = new Date().getTime();
+		const value = { content, timestamp };
+
+		this.#cache.set(key, value);
+	}
+
+	/**
+	 * @param {string} key
+	 * @returns {number|null}
+	 */
+	getTimestamp(key) {
+		return this.#cache.get(key)?.timestamp ?? null;
+	}
+}

package/lib/init/twing/functions.js

@@ -0,0 +1,51 @@
+import { createSynchronousFunction } from "twing";
+
+export const isExpanded = createSynchronousFunction(
+	"is_expanded",
+	(_context, item, requestedComponent) => {
+		if (item.topLevel) return true;
+		if (!requestedComponent) return false;
+
+		return !!(
+			item.children?.find(
+				({ shortPath }) => shortPath === requestedComponent,
+			) ||
+			(item.shortPath && item.shortPath === requestedComponent) ||
+			requestedComponent.startsWith(item.shortPath)
+		);
+	},
+	[{ name: "item" }, { name: "requestedComponent" }],
+);
+
+export const isActiveComponent = createSynchronousFunction(
+	"is_active_component",
+	(_context, item, requestedComponent, requestedVariation) => {
+		if (!requestedComponent) return false;
+
+		if (requestedComponent === "design-tokens") {
+			return (
+				item.section === "design-tokens" && item.name == requestedVariation
+			);
+		}
+
+		return (
+			item.shortPath &&
+			item.shortPath === requestedComponent &&
+			!requestedVariation
+		);
+	},
+	["item", "requestedComponent", "requestedVariation"],
+);
+
+export const isActiveVariant = createSynchronousFunction(
+	"is_active_variant",
+	(_context, item, requestedComponent, requestedVariation) => {
+		if (!item || !requestedComponent || !requestedVariation) return false;
+
+		return (
+			requestedComponent == item.parentShortPath &&
+			requestedVariation == item.name
+		);
+	},
+	["item", "requestedComponent", "requestedVariation"],
+);

package/lib/init/views.js

@@ -0,0 +1,19 @@
+/**
+ * Module for registering the views in express
+ * @module initViews
+ */
+
+import path from "path";
+
+/**
+ * @returns {void}
+ */
+export default function initViews() {
+	const views = [path.join(import.meta.dirname, "../../frontend/views")];
+
+	if (global.config.components.folder) {
+		views.push(path.resolve(global.config.components.folder));
+	}
+
+	global.app.set("views", views);
+}