@schalkneethling/miyagi-core 4.4.2 → 4.4.3

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

@@ -18,105 +18,105 @@ import log from "../../../logger.js";
  * @param {boolean} [object.noCli]
  */
 export default async function renderIframeComponent({
-	res,
-	component,
-	cb,
-	cookies,
-	noCli,
+  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;
+  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;
+  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];
+  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;
-	}
+  if (jsMockData) {
+    mockFilePath = jsMockDataPath;
+  } else {
+    mockFilePath = defaultMockDataPath;
+  }
 
-	const componentMocks = global.state.fileContents[mockFilePath];
+  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 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);
-		}
-	}
+  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,
-	};
+  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,
-	});
+  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,
+  });
 }
 
 /**
@@ -153,138 +153,139 @@ export default async function renderIframeComponent({
  * @returns {Promise}
  */
 async function renderVariations({
-	res,
-	component,
-	context,
-	componentDocumentation,
-	fileContents,
-	name,
-	cb,
-	templateFilePath,
-	cookies,
-	noCli,
+  res,
+  component,
+  context,
+  componentDocumentation,
+  fileContents,
+  name,
+  cb,
+  templateFilePath,
+  cookies,
+  noCli,
 }) {
-	const variations = [];
-	const promises = [];
-	const validatedMocks = validateMocks(component, context, 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];
+  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());
-	}
+        variations[i] = getData(
+          context[i].name,
+          component.paths.dir.short,
+          entry,
+          validatedMocks,
+        );
+      }
+    }
+  } else {
+    promises.push(Promise.resolve());
+  }
 
-	let schemaJson;
+  let schemaJson;
 
-	if (fileContents?.schema?.string) {
-		try {
-			schemaJson = JSON.stringify(jsonToYaml.load(fileContents.schema.string));
-		} catch (err) {
-			log("error", null, err);
-		}
-	}
+  if (fileContents?.schema?.string) {
+    try {
+      schemaJson = JSON.stringify(jsonToYaml.load(fileContents.schema.string));
+    } catch (err) {
+      log("error", null, err);
+    }
+  }
 
-	let mocksJson;
+  let mocksJson;
 
-	if (fileContents?.mocks?.string) {
-		try {
-			mocksJson = JSON.stringify(jsonToYaml.load(fileContents.mocks.string));
-		} catch (err) {
-			log("error", null, err);
-		}
-	}
+  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,
-			);
+  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,
+      );
 
-			const componentDeclaredAssets =
-				context.length > 0 ? context[0].$assets || null : null;
-			const { cssFiles, jsFilesHead, jsFilesBody } =
-				resolveAssets(componentDeclaredAssets);
+      const componentDeclaredAssets =
+        context.length > 0 ? context[0].$assets || null : null;
+      const { cssFiles, jsFilesHead, jsFilesBody } = resolveAssets(
+        componentDeclaredAssets,
+      );
 
-			await res.render(
-				"iframe_component.twig.miyagi",
-				{
-					lang: global.config.ui.lang,
-					variations,
-					cssFiles,
-					jsFilesHead,
-					jsFilesBody,
-					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);
-					}
+      await res.render(
+        "iframe_component.twig.miyagi",
+        {
+          lang: global.config.ui.lang,
+          variations,
+          cssFiles,
+          jsFilesHead,
+          jsFilesBody,
+          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);
-			}
-		});
+          if (cb) {
+            cb(null, html);
+          }
+        },
+      );
+    })
+    .catch(() => {
+      if (cb) {
+        cb(true);
+      }
+    });
 }
 
 /**
@@ -295,46 +296,46 @@ async function renderVariations({
  * @returns {object}
  */
 function getData(variation, shortPath, entry, validatedMocks) {
-	let standaloneUrl;
+  let standaloneUrl;
 
-	if (global.config.isBuild) {
-		standaloneUrl = `component-${helpers.normalizeString(
-			shortPath,
-		)}-variation-${helpers.normalizeString(variation)}.html`;
-	} else {
-		standaloneUrl = `/component?file=${shortPath}&variation=${encodeURIComponent(
-			variation,
-		)}`;
-	}
+  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 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,
-	);
+  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,
-		};
-	}
+  if (validationEntry) {
+    data.mockValidation = {
+      valid: false,
+      copy: t("validator.mocks.invalid"),
+    };
+  } else {
+    data.mockValidation = {
+      valid: true,
+    };
+  }
 
-	return data;
+  return data;
 }

package/lib/render/views/iframe/design-tokens/colors.js

@@ -9,44 +9,44 @@ import { getColors, getMediaQueries } from "../../../../styleguide/index.js";
  * @param {object} o.cookies
  */
 export default async function ({ res, cb, cookies }) {
-	const colors = global.state.css
-		? getColors(
-				global.state.css,
-				global.config.assets.customProperties.prefixes.color,
-			)
-		: [];
-	const mediaQueries = global.state.css
-		? getMediaQueries(global.state.css)
-		: [];
-	const themeMode = getThemeMode(cookies);
+  const colors = global.state.css
+    ? getColors(
+        global.state.css,
+        global.config.assets.customProperties.prefixes.color,
+      )
+    : [];
+  const mediaQueries = global.state.css
+    ? getMediaQueries(global.state.css)
+    : [];
+  const themeMode = getThemeMode(cookies);
 
-	await res.render(
-		"design-tokens/colors.twig.miyagi",
-		{
-			additionalCssFiles: global.config.assets?.customProperties?.files || [],
-			colors:
-				colors.map(({ styles }) => styles.length).reduce((a, b) => a + b, 0) > 0
-					? colors
-					: [],
-			isBuild: global.config.isBuild,
-			lang: global.config.ui.lang,
-			mediaQueries,
-			miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
-			projectName: config.projectName,
-			userUiConfig: getUserUiConfig(cookies),
-			theme: themeMode
-				? Object.assign(global.config.ui.theme, { mode: themeMode })
-				: global.config.ui.theme,
-			uiTextDirection: global.config.ui.textDirection,
-		},
-		(html) => {
-			if (res.send) {
-				res.send(html);
-			}
+  await res.render(
+    "design-tokens/colors.twig.miyagi",
+    {
+      additionalCssFiles: global.config.assets?.customProperties?.files || [],
+      colors:
+        colors.map(({ styles }) => styles.length).reduce((a, b) => a + b, 0) > 0
+          ? colors
+          : [],
+      isBuild: global.config.isBuild,
+      lang: global.config.ui.lang,
+      mediaQueries,
+      miyagiDev: !!process.env.MIYAGI_DEVELOPMENT,
+      projectName: config.projectName,
+      userUiConfig: getUserUiConfig(cookies),
+      theme: themeMode
+        ? Object.assign(global.config.ui.theme, { mode: themeMode })
+        : global.config.ui.theme,
+      uiTextDirection: global.config.ui.textDirection,
+    },
+    (html) => {
+      if (res.send) {
+        res.send(html);
+      }
 
-			if (cb) {
-				cb(null, html);
-			}
-		},
-	);
+      if (cb) {
+        cb(null, html);
+      }
+    },
+  );
 }

package/lib/render/views/iframe/design-tokens/index.js

@@ -3,7 +3,7 @@ import sizes from "./sizes.js";
 import typography from "./typography.js";
 
 export default {
-	colors,
-	sizes,
-	typography,
+  colors,
+  sizes,
+  typography,
 };