@schalkneethling/miyagi-core 4.9.0 → 4.10.0

package/lib/cli/perf.js

@@ -59,6 +59,7 @@ export default async function perfCli(args) {
 
   const result = await runPerformance({
     cwd,
+    componentsFolder: global.config.components.folder,
     compression: args.compression,
     warnRatio: warnRatioOverride,
     render: renderPageHtml,

package/lib/default-config.js

@@ -39,6 +39,7 @@ export default {
         ".miyagi.js",
         ".miyagi.mjs",
       ],
+      hidden: [],
       lang: "en",
       textDirection: "ltr",
     },

package/lib/init/config.js

@@ -500,6 +500,12 @@ export default (userConfig = {}) => {
         sanitizePath,
       );
     }
+
+    if (config.components.hidden) {
+      config.components.hidden = arrayfy(config.components.hidden).map(
+        sanitizePath,
+      );
+    }
   }
 
   if (!config.ui) config.ui = {};

package/lib/init/router.js

@@ -68,6 +68,7 @@ export default function Router() {
   if (!global.config.isBuild) {
     attachPerformanceRoutes(global.app, {
       cwd: process.cwd(),
+      componentsFolder: global.config.components.folder,
       render: renderPageHtml,
     });
   }

package/lib/performance/component.js

@@ -55,6 +55,7 @@ function resolveImportGraph(entryPath) {
  * 50 kB util shows the real reachable size, not just the entry file.
  * @param {{
  *   cwd: string,
+ *   componentsFolder: string,
  *   componentPath: string,
  *   entry: { css?: { budget?: string }, js?: { budget?: string } },
  *   compression: "raw"|"gzip"|"brotli",
@@ -64,12 +65,13 @@ function resolveImportGraph(entryPath) {
  */
 export function measureComponent({
   cwd,
+  componentsFolder = "",
   componentPath,
   entry,
   compression,
   warnRatio,
 }) {
-  const folder = path.join(cwd, componentPath);
+  const folder = path.join(cwd, componentsFolder, componentPath);
   const componentName = path.basename(componentPath);
   const cssPath = path.join(folder, `${componentName}.css`);
   const jsPath = path.join(folder, `${componentName}.js`);

package/lib/performance/index.js

@@ -47,6 +47,7 @@ function tally(statuses) {
  * declared page variation.
  * @param {{
  *   cwd?: string,
+ *   componentsFolder?: string,
  *   compression?: "raw"|"gzip"|"brotli",
  *   warnRatio?: number,
  *   render?: (templatePath: string, variation: string) => Promise<string>,
@@ -60,6 +61,7 @@ export async function runPerformance(options = {}) {
   }
 
   const cwd = options.cwd ?? process.cwd();
+  const componentsFolder = options.componentsFolder ?? "";
   const compression = options.compression ?? config.compression;
   const warnRatio = options.warnRatio ?? config.warnRatio;
 
@@ -68,6 +70,7 @@ export async function runPerformance(options = {}) {
   for (const [componentPath, entry] of Object.entries(config.components)) {
     const measurement = measureComponent({
       cwd,
+      componentsFolder,
       componentPath,
       entry,
       compression,

package/lib/performance/routes.js

@@ -19,6 +19,7 @@ import { runPerformance } from "./index.js";
  * @param {object} app - Express app
  * @param {{
  *   cwd: string,
+ *   componentsFolder?: string,
  *   render?: (templatePath: string, variation: string) => Promise<string>,
  * }} options
  * @returns {boolean} true when the config file exists at registration time
@@ -28,6 +29,7 @@ export function attachPerformanceRoutes(app, options) {
     try {
       const result = await runPerformance({
         cwd: options.cwd,
+        componentsFolder: options.componentsFolder,
         render: options.render,
       });
       if (!result.enabled) {

package/lib/render/helpers.js

@@ -4,6 +4,7 @@
  */
 
 import path from "path";
+import anymatch from "anymatch";
 
 /**
  * @param {object} config - the user configuration object
@@ -49,3 +50,58 @@ export const getThemeMode = (cookies = {}) => {
     `miyagi_${global.config.projectName.replaceAll(" ", "-")}_theme`
   ];
 };
+
+/**
+ * @param {Array} menu
+ * @returns {Array} menu with hidden components removed
+ */
+export function getDisplayMenu(menu) {
+  const hidden = global.config.components.hidden;
+
+  if (!menu || !hidden?.length) {
+    return menu;
+  }
+
+  if (!Array.isArray(menu)) {
+    return menu;
+  }
+
+  return menu.reduce((acc, item) => {
+    if (
+      item.shortPath &&
+      anymatch(hidden, item.shortPath.replaceAll("\\", "/"))
+    ) {
+      return acc;
+    }
+
+    if (item.children) {
+      const filteredChildren = getDisplayMenu(item.children);
+
+      if (filteredChildren.length === 0) {
+        return acc;
+      }
+
+      acc.push({ ...item, children: filteredChildren });
+    } else {
+      acc.push(item);
+    }
+
+    return acc;
+  }, []);
+}
+
+/**
+ * @param {Array} components
+ * @returns {Array} components with hidden entries removed
+ */
+export function getDisplayComponents(components) {
+  const hidden = global.config.components.hidden;
+
+  if (!components || !hidden?.length) {
+    return components;
+  }
+
+  return components.filter(
+    (c) => !anymatch(hidden, c.shortPath.replaceAll("\\", "/")),
+  );
+}

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

@@ -250,7 +250,10 @@ async function renderVariations({
 
       let perfSection;
       try {
-        const perfResult = await runPerformance({ cwd: process.cwd() });
+        const perfResult = await runPerformance({
+          cwd: process.cwd(),
+          componentsFolder: global.config.components.folder,
+        });
         perfSection = buildComponentPerfSection(
           perfResult,
           component.paths.dir.short,

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

@@ -1,5 +1,10 @@
 import config from "../../../default-config.js";
-import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+import {
+  getUserUiConfig,
+  getThemeMode,
+  getDisplayMenu,
+  getDisplayComponents,
+} from "../../helpers.js";
 
 /**
  * @param {object} object - parameter object
@@ -21,8 +26,8 @@ export default async function renderMainComponentDocs({
     "main.twig.miyagi",
     {
       lang: global.config.ui.lang,
-      folders: global.state.menu,
-      components: global.state.components,
+      folders: getDisplayMenu(global.state.menu),
+      components: getDisplayComponents(global.state.components),
       flatUrlPattern: global.config.isBuild
         ? "/show-{{component}}.html"
         : "/show?file={{component}}",

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

@@ -1,6 +1,11 @@
 import config from "../../../default-config.js";
 import * as helpers from "../../../helpers.js";
-import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+import {
+  getUserUiConfig,
+  getThemeMode,
+  getDisplayMenu,
+  getDisplayComponents,
+} from "../../helpers.js";
 import { runPerformance } from "../../../performance/index.js";
 import { buildPagePerfBanner } from "../../../performance/view-data.js";
 import { renderPageHtml } from "../../../performance/render-page.js";
@@ -45,6 +50,7 @@ export default async function renderMainComponent({
     try {
       const perfResult = await runPerformance({
         cwd: process.cwd(),
+        componentsFolder: global.config.components.folder,
         render: renderPageHtml,
       });
       perfBanner = buildPagePerfBanner(
@@ -63,8 +69,8 @@ export default async function renderMainComponent({
     {
       perfBanner,
       lang: global.config.ui.lang,
-      folders: global.state.menu,
-      components: global.state.components,
+      folders: getDisplayMenu(global.state.menu),
+      components: getDisplayComponents(global.state.components),
       flatUrlPattern: global.config.isBuild
         ? "/show-{{component}}.html"
         : "/show?file={{component}}",

package/lib/render/views/main/design-tokens.js

@@ -1,5 +1,10 @@
 import config from "../../../default-config.js";
-import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+import {
+  getUserUiConfig,
+  getThemeMode,
+  getDisplayMenu,
+  getDisplayComponents,
+} from "../../helpers.js";
 
 /**
  * @param {object} object - parameter object
@@ -17,8 +22,8 @@ export default function renderMainDesignTokens({ res, cb, cookies, type }) {
     "main.twig.miyagi",
     {
       lang: global.config.ui.lang,
-      folders: global.state.menu,
-      components: global.state.components,
+      folders: getDisplayMenu(global.state.menu),
+      components: getDisplayComponents(global.state.components),
       flatUrlPattern: global.config.isBuild
         ? "/show-{{component}}.html"
         : "/show?file={{component}}",

package/lib/render/views/main/docs.js

@@ -1,5 +1,10 @@
 import config from "../../../default-config.js";
-import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+import {
+  getUserUiConfig,
+  getThemeMode,
+  getDisplayMenu,
+  getDisplayComponents,
+} from "../../helpers.js";
 
 /**
  * @param {object} object - parameter object
@@ -15,8 +20,8 @@ export default async function renderMainDocs({ res, doc, cb, cookies }) {
     "main.twig.miyagi",
     {
       lang: global.config.ui.lang,
-      folders: global.state.menu,
-      components: global.state.components,
+      folders: getDisplayMenu(global.state.menu),
+      components: getDisplayComponents(global.state.components),
       flatUrlPattern: global.config.isBuild
         ? "/show-{{component}}.html"
         : "/show?file={{component}}",

package/lib/render/views/main/index.js

@@ -1,5 +1,10 @@
 import config from "../../../default-config.js";
-import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+import {
+  getUserUiConfig,
+  getThemeMode,
+  getDisplayMenu,
+  getDisplayComponents,
+} from "../../helpers.js";
 
 /**
  * @param {object} object - parameter object
@@ -14,8 +19,8 @@ export default function renderMainIndex({ res, cb, cookies }) {
     "main.twig.miyagi",
     {
       lang: global.config.ui.lang,
-      folders: global.state.menu,
-      components: global.state.components,
+      folders: getDisplayMenu(global.state.menu),
+      components: getDisplayComponents(global.state.components),
       flatUrlPattern: global.config.isBuild
         ? "/show-{{component}}.html"
         : "/show?file={{component}}",

package/lib/validator/mocks.js

@@ -1,6 +1,7 @@
 import jsYaml from "js-yaml";
 import { existsSync } from "node:fs";
 import deepMerge from "deepmerge";
+import anymatch from "anymatch";
 import log from "../logger.js";
 import { t } from "../i18n/index.js";
 import { loadGlobalSchemas } from "./schemas.js";
@@ -116,21 +117,25 @@ export default function validateMockData(
   }
 
   if (!global.config.isBuild && !noCli) {
-    const parseError =
-      global.state.fileReadErrors?.[component.paths.schema.full];
-    const schemaExistsOnDisk = existsSync(component.paths.schema.full);
-    const warningMessage = parseError
-      ? t("validator.mocks.schemaParseFailed")
-          .replace("{{schemaFile}}", component.paths.schema.short)
-          .replace("{{format}}", "JSON or YAML")
-      : schemaExistsOnDisk
-        ? t("validator.mocks.schemaParseFailed")
-            .replace("{{schemaFile}}", component.paths.schema.short)
-            .replace("{{format}}", "JSON or YAML")
-        : t("validator.mocks.schemaMissing")
-            .replace("{{component}}", component.paths.dir.short)
-            .replace("{{schemaFile}}", component.paths.schema.short);
-    log("warn", warningMessage);
+    const isHidden = anymatch(
+      global.config.components.hidden ?? [],
+      component.paths.dir.short.replaceAll("\\", "/"),
+    );
+
+    if (!isHidden) {
+      const parseError =
+        global.state.fileReadErrors?.[component.paths.schema.full];
+      const schemaExistsOnDisk = existsSync(component.paths.schema.full);
+      const warningMessage =
+        parseError || schemaExistsOnDisk
+          ? t("validator.mocks.schemaParseFailed")
+              .replace("{{schemaFile}}", component.paths.schema.short)
+              .replace("{{format}}", "JSON or YAML")
+          : t("validator.mocks.schemaMissing")
+              .replace("{{component}}", component.paths.dir.short)
+              .replace("{{schemaFile}}", component.paths.schema.short);
+      log("warn", warningMessage);
+    }
   }
 
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schalkneethling/miyagi-core",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "description": "miyagi is a component development tool for JavaScript template engines.",
   "main": "index.js",
   "author": "Schalk Neethling <schalkneethling@duck.com>, Michael Großklaus <mail@mgrossklaus.de> (https://www.mgrossklaus.de)",