@schalkneethling/miyagi-core 4.6.2 → 4.7.0

package/frontend/views/component_variation.twig.miyagi

@@ -24,8 +24,8 @@
     {% if assets.js %}
       <script src="{{ assets.js }}"></script>
     {% endif %}
-    {% if mockDataResolved is defined %}
-    <script type="application/json" id="miyagi-mock-data">{{ mockDataResolved|replace({'</script>': '<\\/script>'})|raw }}</script>
+    {% if dataJson is defined and dataJson %}
+    <script type="application/json" id="{{ dataJsonId }}">{{ dataJson|replace({'</script>': '<\\/script>'})|raw }}</script>
     {% endif %}
     <script>
       {{ theme.js }}

package/frontend/views/iframe_component.twig.miyagi

@@ -34,6 +34,12 @@
 								<div id="json-tree-resolved-mocks" data-jsontree-js="jsontree.mocks"></div>
 							</details>
 						{% endif %}
+						{% if dataJson %}
+							<details class="Tabs-tab">
+								<summary>Data</summary>
+								<div id="json-tree-resolved-data" data-jsontree-js="jsontree.data"></div>
+							</details>
+						{% endif %}
 						{% if template %}
 							<details class="Tabs-tab">
 								<summary>Template</summary>
@@ -135,6 +141,9 @@
 				},
 				"mocks": {
 					"data": {{ mocks|default({})|replace({'</script>': '<\\/script>'})|raw }}
+				},
+				"data": {
+					"data": {{ dataJson|default({})|replace({'</script>': '<\\/script>'})|raw }}
 				}
 			};
 		</script>

package/lib/build/index.js

@@ -665,6 +665,7 @@ export default () => {
             component,
             componentData: data.resolved,
             componentDeclaredAssets: data.$assets || null,
+            variation,
             cb: async (err, response) => {
               if (err) {
                 if (typeof err === "string") {

package/lib/data-json/index.js

@@ -0,0 +1,69 @@
+import { getVariationData, getComponentData } from "../mocks/index.js";
+import log from "../logger.js";
+
+/**
+ * Resolves the data.json content for a component.
+ *
+ * If no data.json exists, returns null values (no JSON exposed in DOM).
+ * If data.json has useMocks: true, uses the mocks pipeline as the data source.
+ * Otherwise, uses the data.json content directly (stripping the useMocks key).
+ * @param {object} component - the component route object
+ * @param {object} options
+ * @param {string} [options.variation] - the variation name (used when useMocks is true)
+ * @returns {Promise<{ json: string|null, id: string }>}
+ */
+export async function resolveDataJson(component, { variation } = {}) {
+  const dataJsonPath = component.paths.data.full;
+  const dataJsonContent = global.state.fileContents[dataJsonPath];
+
+  if (!dataJsonContent) {
+    return { json: null, id: "miyagi-mock-data" };
+  }
+
+  if (dataJsonContent.useMocks === true) {
+    return resolveFromMocks(component, variation);
+  }
+
+  return resolveFromDataJson(dataJsonContent);
+}
+
+/**
+ * Uses the mocks pipeline to produce the JSON content.
+ * @param {object} component
+ * @param {string} [variation]
+ * @returns {Promise<{ json: string|null, id: string }>}
+ */
+async function resolveFromMocks(component, variation) {
+  try {
+    let data;
+
+    if (variation) {
+      data = await getVariationData(component, variation);
+    } else {
+      const allData = await getComponentData(component);
+      data = allData?.[0] ?? null;
+    }
+
+    const resolved = data?.resolved ?? {};
+    return { json: JSON.stringify(resolved), id: "miyagi-mock-data" };
+  } catch (err) {
+    log(
+      "error",
+      `Error resolving mock data for data.json in ${component.paths.dir.short}`,
+      err,
+    );
+    return { json: null, id: "miyagi-mock-data" };
+  }
+}
+
+/**
+ * Uses the data.json content directly, stripping internal properties.
+ * @param {object} dataJsonContent - parsed data.json object
+ * @returns {{ json: string, id: string }}
+ */
+function resolveFromDataJson(dataJsonContent) {
+  const clone = structuredClone(dataJsonContent);
+  delete clone.useMocks;
+
+  return { json: JSON.stringify(clone), id: "miyagi-mock-data" };
+}

package/lib/helpers.js

@@ -1,4 +1,3 @@
-import v8 from "v8";
 import path from "path";
 
 /**
@@ -69,7 +68,7 @@ export const getResolvedFileName = function (nameInConfig, fileName) {
  * @returns {object} clone of rhe given object
  */
 export const cloneDeep = function (obj) {
-  return v8.deserialize(v8.serialize(obj));
+  return structuredClone(obj);
 };
 
 /**
@@ -133,6 +132,15 @@ export const fileIsSchemaFile = function (filePath) {
   );
 };
 
+/**
+ * Accepts a file path and checks if it is a data.json file
+ * @param {string} filePath - path to any type of file
+ * @returns {boolean} is true if the given file is a data.json file
+ */
+export const fileIsDataJsonFile = function (filePath) {
+  return path.basename(filePath) === "data.json";
+};
+
 /**
  * Accepts a file path and checks if it is component js or css file
  * @param {string} filePath - path to any type of file

package/lib/init/router.js

@@ -279,6 +279,7 @@ export default function Router() {
           componentDeclaredAssets: data?.$assets || null,
           cookies: req.cookies,
           overrides: overrides ?? null,
+          variation,
         });
       }
 

package/lib/init/watcher.js

@@ -298,6 +298,7 @@ async function updateFileContents(events) {
           fs.lstatSync(fullPath).isFile() &&
           (helpers.fileIsTemplateFile(relativePath) ||
             helpers.fileIsDataFile(relativePath) ||
+            helpers.fileIsDataJsonFile(relativePath) ||
             helpers.fileIsDocumentationFile(relativePath) ||
             helpers.fileIsSchemaFile(relativePath))
         ) {
@@ -357,6 +358,9 @@ async function handleFileChange(events) {
   const schemaEvents = events.filter(({ relativePath }) =>
     helpers.fileIsSchemaFile(relativePath),
   );
+  const dataJsonEvents = events.filter(({ relativePath }) =>
+    helpers.fileIsDataJsonFile(relativePath),
+  );
   const componentAssetEvents = events.filter(({ relativePath }) =>
     helpers.fileIsAssetFile(relativePath),
   );
@@ -532,6 +536,19 @@ async function handleFileChange(events) {
     return;
   }
 
+  if (dataJsonEvents.length > 0) {
+    await setState({
+      fileContents: await updateFileContents(dataJsonEvents),
+    });
+
+    sendReload(watchRules.data, {
+      reason: "data-json",
+      paths: dataJsonEvents.map(({ relativePath }) => relativePath),
+    });
+    log("success", `${t("updatingDone")}\n`);
+    return;
+  }
+
   if (componentAssetEvents.length > 0) {
     sendReload(watchRules.componentAsset, {
       reason: "component-asset",

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

@@ -32,6 +32,8 @@ export default async function renderIframeComponent({
     global.state.fileContents[path.join(component.paths.dir.full, "README.md")];
   const componentSchema =
     global.state.fileContents[component.paths.schema.full];
+  const componentDataJson =
+    global.state.fileContents[component.paths.data.full] ?? null;
   const componentTemplate = hasTemplate
     ? global.state.fileContents[component.paths.tpl.full]
     : null;
@@ -103,6 +105,16 @@ export default async function renderIframeComponent({
           ),
         }
       : null,
+    data: componentDataJson
+      ? {
+          string: JSON.stringify(componentDataJson, null, 2),
+          type: "json",
+          file: path.join(
+            global.config.components.folder,
+            component.paths.data.short,
+          ),
+        }
+      : null,
   };
 
   await renderVariations({
@@ -205,13 +217,24 @@ async function renderVariations({
     }
   }
 
+  let dataJson;
+
+  if (fileContents?.data?.string) {
+    try {
+      dataJson = JSON.stringify(JSON.parse(fileContents.data.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
+        fileContents.template ||
+        fileContents.data
       );
       const componentsEntry = global.state.components.find(
         ({ shortPath }) => shortPath === component.paths.dir.short,
@@ -259,6 +282,7 @@ async function renderVariations({
               ? validatedMocks[0].data.map((error) => error.message).join("\n")
               : null,
           mocks: mocksJson,
+          dataJson,
           template: fileContents.template,
           renderInformation: renderFileTabs || variations.length > 0,
           renderFileTabs,

package/lib/render/views/iframe/variation.standalone.js

@@ -1,5 +1,6 @@
 import path from "path";
 import config from "../../../default-config.js";
+import { resolveDataJson } from "../../../data-json/index.js";
 import { getUserUiConfig } from "../../helpers.js";
 import resolveAssets from "../../helpers/resolve-assets.js";
 import applyOverrides from "../../helpers/apply-overrides.js";
@@ -13,6 +14,7 @@ import applyOverrides from "../../helpers/apply-overrides.js";
  * @param {Function} [object.cb] - callback function
  * @param {object} [object.cookies]
  * @param {object} [object.overrides] - query-param override values
+ * @param {string} [object.variation] - the variation name
  * @returns {Promise} gets resolved when the variation has been rendered
  */
 export default async function renderIframeVariationStandalone({
@@ -23,6 +25,7 @@ export default async function renderIframeVariationStandalone({
   cb,
   cookies,
   overrides,
+  variation,
 }) {
   if (overrides) {
     const schema =
@@ -31,6 +34,9 @@ export default async function renderIframeVariationStandalone({
   }
 
   const directoryPath = component.paths.dir.short;
+  const { json: dataJson, id: dataJsonId } = await resolveDataJson(component, {
+    variation,
+  });
 
   return new Promise((resolve, reject) => {
     global.app.render(
@@ -58,7 +64,8 @@ export default async function renderIframeVariationStandalone({
             "component_variation.twig.miyagi",
             {
               html: result,
-              mockDataResolved: JSON.stringify(componentData ?? {}),
+              dataJson,
+              dataJsonId,
               cssFiles,
               jsFilesHead,
               jsFilesBody,

package/lib/state/components.js

@@ -116,6 +116,10 @@ function addToRoutes({ name, shortPath, fullPath }, partials = []) {
           full: path.join(fullPath, "README.md"),
           short: path.join(shortPath, "README.md"),
         },
+        data: {
+          full: path.join(fullPath, "data.json"),
+          short: path.join(shortPath, "data.json"),
+        },
       },
       type: "components",
     };

package/lib/state/file-contents.js

@@ -69,6 +69,7 @@ async function getFilePaths(sourceTree) {
               `${files.mocks.name}.${files.mocks.extension[0]}`,
               `${files.mocks.name}.${files.mocks.extension[1]}`,
               `${files.schema.name}.${files.schema.extension}`,
+              "data.json",
             ]) ||
             helpers.fileIsDocumentationFile(entry.path)
           ) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schalkneethling/miyagi-core",
-  "version": "4.6.2",
+  "version": "4.7.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)",