@schalkneethling/miyagi-core 4.0.2

package/lib/cli/app.js

@@ -0,0 +1,38 @@
+/**
+ * Module for initializing miyagi
+ * @module init
+ */
+
+import express from "express";
+
+import setEngines from "../init/engines.js";
+import setRouter from "../init/router.js";
+import setState from "../state/index.js";
+import setStatic from "../init/static.js";
+import setViews from "../init/views.js";
+
+/**
+ * @param {object} mergedConfig
+ * @returns {Promise<object>}
+ */
+export default async function init(mergedConfig) {
+	global.app = express();
+	global.config = mergedConfig;
+	global.app.set("view cache", false);
+	global.app.set("cache", false);
+
+	await setEngines();
+	await setState({
+		sourceTree: true,
+		menu: true,
+		partials: true,
+		fileContents: true,
+		css: true,
+	});
+
+	setStatic();
+	setRouter();
+	setViews();
+
+	return global.app;
+}

package/lib/cli/component.js

@@ -0,0 +1,56 @@
+import generateComponent from "../generator/component.js";
+import log from "../logger.js";
+import appConfig from "../default-config.js";
+import { t } from "../i18n/index.js";
+
+/**
+ * @param {object} cliParams
+ * @returns {Promise<void>}
+ */
+export default async function createComponentViaCli(cliParams) {
+	const commands = cliParams._.slice(1);
+
+	if (commands.length === 0) {
+		log("error", t("generator.noComponentNameDefined"));
+
+		return;
+	}
+
+	const [component] = commands;
+	const fileTypes = getFileTypesFromCliArgs(
+		cliParams,
+		Object.values(appConfig.defaultUserConfig.files).map((file) => file.abbr),
+	);
+
+	try {
+		const result = await generateComponent({ component, fileTypes });
+		log("success", result);
+	} catch (message) {
+		log("error", message);
+	}
+}
+
+/**
+ * Returns an array with file names, if necessary filtered based on args
+ * @param {object} args - the cli args
+ * @param {Array} fileTypes
+ * @returns {Array} all file paths that should be created
+ */
+function getFileTypesFromCliArgs(args, fileTypes) {
+	if (args) {
+		if (args.skip) {
+			const files = [];
+			for (const fileType of fileTypes) {
+				if (!args.skip.includes(fileType)) {
+					files.push(fileType);
+				}
+			}
+			return files;
+		}
+		if (args.only) {
+			return args.only;
+		}
+		return fileTypes;
+	}
+	return fileTypes;
+}

package/lib/cli/index.js

@@ -0,0 +1,5 @@
+import lintImport from "./lint.js";
+import componentImport from "./component.js";
+
+export const lint = lintImport;
+export const component = componentImport;

package/lib/cli/lint.js

@@ -0,0 +1,180 @@
+import path from "path";
+import init from "./app.js";
+import getConfig from "../config.js";
+import log from "../logger.js";
+import { getComponentData } from "../mocks/index.js";
+import validateMockData from "../validator/mocks.js";
+import { t } from "../i18n/index.js";
+
+/**
+ * @param {object} args
+ */
+export default async function lint(args) {
+	process.env.NODE_ENV = "development";
+
+	const componentArg = args._.slice(1)[0];
+	const config = await getConfig(args);
+	global.app = await init(config);
+
+	if (componentArg) {
+		const component = global.state.routes.find(
+			({ alias }) =>
+				alias === path.relative(config.components.folder, componentArg),
+		);
+
+		if (component) {
+			await validateComponentMockData({
+				component,
+			});
+		} else {
+			log("error", `The component ${componentArg} does not seem to exist.`);
+			process.exit(1);
+		}
+	} else {
+		await validateAllMockData();
+	}
+}
+
+/**
+ * @param {boolean} exitProcess
+ */
+async function validateAllMockData(exitProcess = true) {
+	log("info", t("linter.all.start"));
+
+	const promises = [];
+
+	global.state.routes.forEach((route) => {
+		if (route.type === "components") {
+			promises.push(
+				new Promise((resolve, reject) => {
+					validateComponentMockData({
+						component: route,
+						silent: true,
+						exitProcess: false,
+					})
+						.then((result) => resolve(result))
+						.catch((err) => {
+							console.error(err);
+							reject();
+						});
+				}),
+			);
+		}
+	});
+
+	Promise.all(promises)
+		.then((results) => {
+			const mockInvalidResults = results.filter(
+				(result) => result?.valid === false && result.type === "mocks",
+			);
+			const schemaInvalidResults = results.filter(
+				(result) => result?.valid === false && result.type === "schema",
+			);
+
+			if (
+				mockInvalidResults.length === 0 &&
+				schemaInvalidResults.length === 0
+			) {
+				log("success", t("linter.all.valid"));
+				if (exitProcess) {
+					process.exit(0);
+				}
+			}
+
+			if (schemaInvalidResults.length > 0) {
+				log(
+					"error",
+					schemaInvalidResults.length === 1
+						? t("linter.all.schema.invalid.one")
+						: t("linter.all.schema.invalid.other").replace(
+								"{{amount}}",
+								schemaInvalidResults.length,
+							),
+				);
+			}
+
+			if (mockInvalidResults.length > 0) {
+				log(
+					"error",
+					mockInvalidResults.length === 1
+						? t("linter.all.mocks.invalid.one")
+						: t("linter.all.mocks.invalid.other").replace(
+								"{{amount}}",
+								mockInvalidResults.length,
+							),
+				);
+			}
+
+			if (exitProcess) {
+				process.exit(1);
+			}
+		})
+		.catch((err) => {
+			console.error(err);
+			if (exitProcess) {
+				process.exit(1);
+			}
+		});
+}
+
+/**
+ * @param {object} obj
+ * @param {object} obj.component
+ * @param {boolean} [obj.silent]
+ * @param {boolean} [obj.exitProcess]
+ * @returns {Promise<object|null>}
+ */
+async function validateComponentMockData({
+	component,
+	silent,
+	exitProcess = true,
+}) {
+	if (!silent) {
+		log(
+			"info",
+			t("linter.component.start").replace(
+				"{{component}}",
+				component.paths.dir.short,
+			),
+		);
+	}
+
+	const data = await getComponentData(component);
+
+	if (data) {
+		for (const { messages } of data) {
+			for (const { type, text, verbose } of messages) {
+				log(type, text, verbose);
+			}
+		}
+
+		const results = validateMockData(component, data);
+
+		if (!results) return null;
+
+		if (results.length === 0) {
+			if (!silent) {
+				log("success", t("linter.component.valid"));
+			}
+
+			if (exitProcess) {
+				process.exit(0);
+			} else {
+				return {
+					valid: true,
+				};
+			}
+		} else {
+			if (exitProcess) {
+				process.exit(0);
+			} else {
+				return {
+					valid: false,
+					type: results[0].type,
+				};
+			}
+		}
+	}
+
+	return null;
+}

package/lib/config.js

@@ -0,0 +1,74 @@
+import path from "path";
+import deepMerge from "deepmerge";
+
+import getMergedConfig from "./init/config.js";
+import log from "./logger.js";
+
+/**
+ * @param {object} args
+ * @param {boolean} [isBuild]
+ * @param {boolean} [isComponentGenerator]
+ * @returns {Promise<object>}
+ */
+export default async function getConfig(args, isBuild, isComponentGenerator) {
+	let userFile = {};
+	let userFileName;
+
+	try {
+		userFileName = ".miyagi.js";
+		userFile = await import(
+			path.resolve(process.cwd(), `${userFileName}?time=${Date.now()}`)
+		);
+	} catch (e) {
+		log("warn", null, e);
+		try {
+			userFileName = ".miyagi.mjs";
+			userFile = await import(
+				path.resolve(process.cwd(), `${userFileName}?time=${Date.now()}`)
+			);
+		} catch (err) {
+			userFileName = null;
+			log("warn", null, err);
+		}
+	}
+
+	let userConfig =
+		(args ? deepMerge(userFile.default, getCliArgs(args)) : userFile.default) ??
+		{};
+
+	userConfig.userFileName = userFileName;
+	userConfig.isBuild = isBuild;
+	userConfig.isComponentGenerator = isComponentGenerator;
+	userConfig.indexPath = {
+		default: isBuild ? "component-all.html" : "/component?file=all",
+		embedded: isBuild
+			? "component-all-embedded.html"
+			: "/component?file=all&embedded=true",
+	};
+
+	delete userConfig._;
+
+	return getMergedConfig(userConfig);
+}
+
+/**
+ * Converts and removes unnecessary cli args
+ * @param {object} args - the cli args
+ * @returns {object} configuration object based on cli args
+ */
+function getCliArgs(args) {
+	const cliArgs = { ...args };
+	const buildArgs = {};
+
+	delete cliArgs._;
+	delete cliArgs.$0;
+
+	if (cliArgs.folder) {
+		buildArgs.folder = cliArgs.folder;
+		delete cliArgs.folder;
+	}
+
+	cliArgs.build = buildArgs;
+
+	return cliArgs;
+}

package/lib/default-config.js

@@ -0,0 +1,105 @@
+import AJV from "ajv";
+
+export default {
+	defaultUserConfig: {
+		assets: {
+			root: "",
+			css: [],
+			customProperties: {
+				files: [],
+				prefixes: {
+					typo: "typo",
+					color: "color",
+					spacing: "spacing",
+				},
+			},
+			folder: [],
+			js: [],
+			manifest: null,
+		},
+		build: {
+			basePath: "/",
+			folder: "build",
+		},
+		docs: {
+			folder: "docs",
+		},
+		components: {
+			folder: "src",
+			ignores: [
+				"node_modules",
+				".git",
+				"package.json",
+				"package-lock.json",
+				".miyagi.js",
+				".miyagi.mjs",
+			],
+			lang: "en",
+			textDirection: "ltr",
+		},
+		engine: {
+			render: null,
+			options: {},
+		},
+		extensions: [],
+		files: {
+			css: {
+				abbr: "css",
+				name: "index",
+				extension: "css",
+			},
+			js: {
+				abbr: "js",
+				name: "index",
+				extension: "js",
+			},
+			mocks: {
+				abbr: "mocks",
+				name: "mocks",
+				extension: ["json", "js"],
+			},
+			schema: {
+				abbr: "schema",
+				name: "schema",
+				extension: "json",
+			},
+			templates: {
+				abbr: "tpl",
+				name: "index",
+			},
+		},
+		namespaces: {},
+		projectName: "miyagi",
+		ui: {
+			mode: "light",
+			lang: "en",
+			reload: true,
+			reloadAfterChanges: {
+				componentAssets: false,
+			},
+			textDirection: "ltr",
+			theme: {
+				css: null,
+				favicon: null,
+				js: null,
+				logo: {
+					light: null,
+					dark: null,
+				},
+			},
+			watchConfigFile: true,
+		},
+		schema: {
+			ajv: AJV,
+		},
+	},
+	projectName: "miyagi",
+	defaultPort: 5000,
+	folders: {
+		assets: {
+			development: "frontend/assets",
+			production: "dist",
+		},
+	},
+	defaultVariationName: "default",
+};

package/lib/generator/component.js

@@ -0,0 +1,199 @@
+import { writeFile, mkdir } from "node:fs/promises";
+import path from "path";
+import jsonToYaml from "js-yaml";
+import * as helpers from "../helpers.js";
+import { t } from "../i18n/index.js";
+
+/**
+ * Module for creating component files based on the configuration cli params
+ * @param {object} root
+ * @param {object} root.component
+ * @param {Array} root.fileTypes
+ * @returns {Promise<string>}
+ */
+export default async function componentGenerator({ component, fileTypes }) {
+	try {
+		await createComponentFolder(component);
+		await createComponentFiles(
+			global.config.files,
+			component,
+			fileTypes,
+			global.config.components.folder,
+		);
+
+		return Promise.resolve(
+			t("generator.component.done").replace("{{component}}", component),
+		);
+	} catch (err) {
+		return Promise.reject(err);
+	}
+}
+
+/**
+ * Returns an array with file names
+ * @param {object} fileNames - an object with file names for the component
+ * @param {Array} fileTypes
+ * @returns {Array} all file paths that should be created
+ */
+function getFiles(fileNames, fileTypes) {
+	return fileTypes.map((fileType) => fileNames[fileType]);
+}
+
+/**
+ * Returns the dummy content for a component file
+ * @param {string} fileType - the file type that should be created
+ * @param {object} filesConfig - the files object from the user congiguration object
+ * @param {string} componentPath
+ * @returns {string} dummy file content based on the given file type
+ */
+function getDummyFileContent(fileType, filesConfig, componentPath) {
+	let str;
+
+	switch (fileType) {
+		case "mocks":
+			{
+				const data = {
+					$variants: [
+						{
+							$name: "",
+						},
+					],
+				};
+
+				if (["yaml", "yml"].includes(filesConfig.mocks.extension[0])) {
+					str = jsonToYaml.dump(data);
+				} else {
+					str = `${JSON.stringify(data, null, 2)}\n`;
+				}
+			}
+			break;
+		case "schema":
+			{
+				const id = path.join("/", componentPath);
+
+				if (["yaml", "yml"].includes(filesConfig.schema.extension)) {
+					str = `$schema: "http://json-schema.org/draft-07/schema"
+$id: "${id}"
+additionalProperties: false
+properties:
+required:
+`;
+				} else {
+					str = `${JSON.stringify(
+						{
+							$schema: "http://json-schema.org/draft-07/schema",
+							$id: id,
+							additionalProperties: false,
+							properties: {},
+							required: [],
+						},
+						null,
+						2,
+					)}\n`;
+				}
+			}
+			break;
+		default:
+			str = "";
+	}
+
+	return str;
+}
+
+/**
+ * Creates the component files
+ * @param {object} filesConfig - the files configuration from the user configuration object
+ * @param {string} componentPath - the path of the component folder
+ * @param {Array} fileTypes
+ * @param {string} componentFolder
+ * @returns {Promise} gets resolved when all files have been created
+ */
+async function createComponentFiles(
+	filesConfig,
+	componentPath,
+	fileTypes,
+	componentFolder,
+) {
+	const componentName = path.basename(componentPath);
+	const fileNames = getFileNames(filesConfig, componentName);
+	const files = getFiles(fileNames, fileTypes);
+	const entries = Object.entries(fileNames);
+
+	for (const [type, file] of entries) {
+		if (files.includes(file)) {
+			const fullFilePath = path.join(
+				process.env.INIT_CWD || process.cwd(),
+				componentPath,
+				file,
+			);
+
+			try {
+				await writeFile(
+					fullFilePath,
+					getDummyFileContent(
+						type,
+						filesConfig,
+						path.relative(componentFolder, componentPath),
+					),
+					{ flag: "wx" },
+				);
+			} catch (err) {
+				return Promise.reject(err.message);
+			}
+		}
+	}
+}
+
+/**
+ * Returns an object with the file names for a given component name
+ * @param {object} filesConfig - the files configuration from the user configuration object
+ * @param {string} componentName - the name of the component
+ * @returns {object} all file names based on the user configuration
+ */
+function getFileNames(filesConfig, componentName) {
+	return {
+		tpl: `${helpers.getResolvedFileName(
+			filesConfig.templates.name,
+			componentName,
+		)}.${filesConfig.templates.extension}`,
+		mocks: `${filesConfig.mocks.name}.${filesConfig.mocks.extension[0]}`,
+		docs: "README.md",
+		css: `${helpers.getResolvedFileName(filesConfig.css.name, componentName)}.${
+			filesConfig.css.extension
+		}`,
+		js: `${helpers.getResolvedFileName(filesConfig.js.name, componentName)}.${
+			filesConfig.js.extension
+		}`,
+		schema: `${filesConfig.schema.name}.${filesConfig.schema.extension}`,
+	};
+}
+
+/**
+ * Creates the component folder
+ * @param {string} folder - component folder path that should be created
+ * @returns {Promise} gets resolved when the folder has been created
+ */
+async function createComponentFolder(folder) {
+	try {
+		await mkdir(
+			/*
+			 * When using `pnpm/yarn/npm miyagi new …`, `process.env.INIT_CWD` equals
+			 * the current working directory, so also subdirectories of where
+			 * the package.json is located. In this case `process.cwd()` always
+			 * equals the root directory though.
+			 * When using node directly, `process.env.INIT_CWD` is not available,
+			 * but `process.cwd()` is always the current working directory, so
+			 * also subdirectories.
+			 * So, if INIT_CWD is available, we know it is the directory the user
+			 * cd'ed into, if it not available, then we use process.cwd(), which
+			 * in that case is also the directory the user cd'ed into.
+			 * It is important that we let the user create a component from their
+			 * current working directory, so they can benefit from autocompletion.
+			 */
+			path.join(process.env.INIT_CWD || process.cwd(), folder),
+			{ recursive: true },
+		);
+	} catch (err) {
+		return err;
+	}
+}