@schalkneethling/miyagi-core 4.1.1 → 4.3.0

package/api/index.js

@@ -7,6 +7,11 @@ import build from "../lib/build/index.js";
 import generateMockData from "../lib/generator/mocks.js";
 import generateComponent from "../lib/generator/component.js";
 import validateMockData from "../lib/validator/mocks.js";
+import {
+	getSchemaValidationMode,
+	toSchemaValidationResult,
+	validateSchemas,
+} from "../lib/validator/schemas.js";
 
 /**
  * @param {object} obj
@@ -172,14 +177,44 @@ export const createComponent = async ({ component, only = [], skip = [] }) => {
 
 export const lintComponents = async () => {
 	global.app = await init("api");
-	const promises = [];
+	const mode = getSchemaValidationMode();
+	const components = global.state.routes.filter((route) => route.paths.tpl);
+	const schemaValidation = validateSchemas({
+		components,
+	});
+	const schemaErrorsByComponent = new Map();
+
+	schemaValidation.errors.forEach((entry) => {
+		if (!schemaErrorsByComponent.has(entry.component)) {
+			schemaErrorsByComponent.set(entry.component, []);
+		}
+		schemaErrorsByComponent
+			.get(entry.component)
+			.push(toSchemaValidationResult(entry));
+	});
 
-	global.state.routes.forEach((route) => {
-		if (route.paths.tpl) {
-			promises.push(
+	if (mode === "fail-fast" && schemaValidation.errors.length > 0) {
+		return {
+			success: false,
+			data: getLintComponentErrorsInRouteOrder({
+				components,
+				errorMap: schemaErrorsByComponent,
+			}),
+		};
+	}
+
+	const promises = components
+		.filter((route) => !schemaErrorsByComponent.has(route.paths.dir.short))
+		.map(
+			(route) =>
 				new Promise((resolve) => {
 					getComponentData(route).then((data) => {
-						const validation = validateMockData(route, data || [], true);
+						const validation = validateMockData(
+							route,
+							data || [],
+							true,
+							schemaValidation.validSchemas,
+						);
 
 						resolve({
 							component: route.alias,
@@ -187,13 +222,25 @@ export const lintComponents = async () => {
 						});
 					});
 				}),
-			);
-		}
-	});
+		);
 
 	return await Promise.all(promises)
 		.then((res) => {
-			const errors = res.filter((result) => result?.errors?.length > 0);
+			res.forEach((result) => {
+				if (!result?.errors?.length) {
+					return;
+				}
+				const componentErrors = schemaErrorsByComponent.get(result.component) || [];
+				schemaErrorsByComponent.set(result.component, [
+					...componentErrors,
+					...result.errors,
+				]);
+			});
+
+			const errors = getLintComponentErrorsInRouteOrder({
+				components,
+				errorMap: schemaErrorsByComponent,
+			});
 
 			return {
 				success: errors.length === 0,
@@ -216,8 +263,26 @@ export const lintComponent = async ({ component }) => {
 			message: `The component ${component} does not seem to exist.`,
 		};
 
+	const allSchemaValidation = validateSchemas({
+		components: [componentObject],
+	});
+
+	if (allSchemaValidation.errors.length > 0) {
+		return {
+			success: false,
+			data: allSchemaValidation.errors.map((entry) =>
+				toSchemaValidationResult(entry),
+			),
+		};
+	}
+
 	const data = await getComponentData(componentObject);
-	const errors = validateMockData(componentObject, data, true);
+	const errors = validateMockData(
+		componentObject,
+		data || [],
+		true,
+		allSchemaValidation.validSchemas,
+	);
 
 	return {
 		success: errors === null || errors?.length === 0,
@@ -234,3 +299,26 @@ function getComponentsObject(component) {
 		(route) => route.paths.dir.short === component,
 	);
 }
+
+/**
+ * @param {object} params
+ * @param {Array<object>} params.components
+ * @param {Map<string, Array<object>>} params.errorMap
+ * @returns {Array<object>}
+ */
+function getLintComponentErrorsInRouteOrder({ components, errorMap }) {
+	return components
+		.map((route) => {
+			const componentErrors = errorMap.get(route.alias) || [];
+
+			if (componentErrors.length === 0) {
+				return null;
+			}
+
+			return {
+				component: route.alias,
+				errors: componentErrors,
+			};
+		})
+		.filter(Boolean);
+}

package/dist/js/iframe.js

@@ -1 +1 @@
-customElements.define("accordion-tabs",class extends HTMLElement{#e;#t;#s;#i;#n;static get observedAttributes(){return["breakpoint","current"]}constructor(){super()}connectedCallback(){if(!this.closest("code")){if(this.content=[],this.hasAttribute("breakpoint")){const e=this.getAttribute("breakpoint"),t=parseInt(e,10);let s;s=e.endsWith("rem")?t*parseInt(window.getComputedStyle(document.documentElement).fontSize,10):e.endsWith("em")?t*parseInt(window.getComputedStyle(this).fontSize,10):t,this.#t=s}window.requestAnimationFrame(()=>{this.details=Array.from(this.children),this.details.forEach((e,t)=>{const s=e.querySelector("summary");e.open&&(this.index=t),this.content.push({title:s.textContent,content:[...s.parentElement.children].filter(e=>1===e.nodeType&&e!==s)})});let e=!1;this.#i=new ResizeObserver(t=>{if(e)for(const e of t)this.#r(e.borderBoxSize[0].inlineSize);e=!0}),this.#r(this.clientWidth,()=>{this.#i.observe(this)})})}}attributeChangedCallback(e,t,s){"current"===e&&(this.index=parseInt(s,10),this.#r(this.clientWidth))}disconnectedCallback(){this.#i&&this.#i.disconnect()}async#r(e,t){!this.#t||e<this.#t?(await this.#o(),this.#s="accordion"):(await this.#a(),this.#s="tabs"),t&&t()}#o(){return this.#e||(this.#e=new e(this)),"tabs"===this.#s?(this.#c(),this.#e.setElements(),this.#e.elements.forEach(e=>this.appendChild(e))):this.#e.render(),!0}async#a(){this.#c(),this.#n?(this.#n.index="number"==typeof this.index?this.index:0,this.#n.setElements()):this.#n=new t(this);const[e,s]=this.#n.elements;return this.appendChild(e),s.forEach(e=>{this.appendChild(e)}),await this.#n.render(!1)}#c(){Array.from(this.children).forEach(e=>this.removeChild(e))}});class e{constructor(e){this.AccordionTabs=e,this.elements=this.AccordionTabs.details,this.elements.forEach((e,t)=>{e.querySelector("summary").addEventListener("click",({target:e})=>{requestAnimationFrame(()=>{this.#d(e.closest("details"),t)})})}),this.render()}setElements(){this.elements.forEach((e,t)=>{this.AccordionTabs.content[t].content.forEach(t=>e.appendChild(t)),e.open=t===this.AccordionTabs.index})}render(){this.elements.forEach((e,t)=>{e.open=t===this.AccordionTabs.index})}#d(e,t){e.open?(this.elements.forEach(t=>{e!==t&&(t.open=!1)}),this.AccordionTabs.index=t):this.AccordionTabs.index=null}}class t{#h;#l=[];#b=[];#u;constructor(e){this.#h=e,this.elements=this.getElements(),this.index="number"==typeof this.#h.index?this.#h.index:0,this.#u=new s(this)}getElements(){const e=document.createElement("ol"),t=[];return this.#h.content.forEach(({title:s,content:i},n)=>{const r=document.createElement("button"),o=document.createElement("li"),a=document.createElement("div"),c=crypto.randomUUID(),d=`tab-${c}`,h=`panel-${c}`;e.setAttribute("role","tablist"),o.setAttribute("role","presentation"),r.textContent=s,r.type="button",r.id=d,r.setAttribute("aria-selected",n===this.index?"true":"false"),r.setAttribute("tabindex",n===this.index?0:-1),r.setAttribute("aria-controls",h),r.setAttribute("role","tab"),this.#l.push(r),o.appendChild(r),e.appendChild(o),i.forEach(e=>{a.appendChild(e)}),a.id=h,a.hidden=this.index!==n,a.setAttribute("role","tabpanel"),a.setAttribute("tabindex","0"),a.setAttribute("aria-labelledby",d),t.push(a),this.#b.push(a)}),[e,t]}setElements(){this.elements[1].forEach((e,t)=>{this.#h.content[t].content.forEach(t=>e.appendChild(t))})}setActiveTab(e){this.#h.index=this.index=e,this.render()}async render(e=!0){return this.elements[1].forEach((e,t)=>{e.hidden=t!==this.index}),await this.#u.render(e)}}class s{#m;#p;constructor(e){this.#m=e,this.#p=Array.from(this.#m.elements[0].querySelectorAll("button")),this.#p.forEach(e=>{e.addEventListener("click",this.#T.bind(this)),e.addEventListener("keydown",this.#A.bind(this))})}#T({currentTarget:e}){this.#m.setActiveTab(this.#p.indexOf(e))}#A(e){const{dir:t}=e.target.closest("[dir]")||document.documentElement;let s=!1;switch(e.key){case"ArrowLeft":"rtl"===t?this.#f():this.#w(),s=!0;break;case"ArrowRight":"rtl"===t?this.#w():this.#f(),s=!0;break;case"Home":this.#m.setActiveTab(0),s=!0;break;case"End":this.#m.setActiveTab(this.#p.length-1),s=!0}s&&(e.stopPropagation(),e.preventDefault())}#f(){this.#m.setActiveTab(this.#m.index===this.#p.length-1?0:this.#m.index+1)}#w(){this.#m.setActiveTab(0===this.#m.index?this.#p.length-1:this.#m.index-1)}render(e=!0){return this.#p.forEach((t,s)=>{s===this.#m.index?(t.setAttribute("aria-selected","true"),t.removeAttribute("tabindex"),e&&t.focus()):(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex",-1))}),new Promise(e=>setTimeout(e,1e3))}}new WebSocket(`ws://${document.location.host}`).onmessage=async e=>{"reloadParent"===e.data?parent.window.location.reload():window.location.reload()};function i(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}window.location.pathname.startsWith("/component?")&&window.location.href.indexOf("&embedded=true")>=0&&window.self===window.top&&(window.location=new URL(window.location).replace("&embedded=true","")),document.addEventListener("DOMContentLoaded",function(){const e=Array.from(document.querySelectorAll(".Component-file")),t=document.querySelector(".Styleguide");e.length>0&&import("./_iframe-links-DdifIr4P.js").then(t=>{t.default(e)}).catch(e=>console.error(e)),document.querySelector(".Code")&&import("./_prism-By3NMwUd.js"),t&&import("./index-BKDKaBC6.js").then(e=>new e.default(t)).catch(e=>console.error(e)),document.querySelector(".js-openMockData")&&import("./_mock-data-Dypo4Bl_.js")}),document.addEventListener("keyup",e=>{const{path:t,originalTarget:s,target:n,key:r}=e,o=t?t[0]:s||n;((e,t)=>!i(e.tagName)&&"f"===t)(o,r)?parent.window.dispatchEvent(new CustomEvent("searchTriggered")):((e,t)=>!i(e.tagName)&&"g"===t)(o,r)&&parent.window.dispatchEvent(new CustomEvent("gotoTriggered"))});
+customElements.define("accordion-tabs",class extends HTMLElement{#e;#t;#n;#i;#s;static get observedAttributes(){return["breakpoint","current"]}constructor(){super()}connectedCallback(){if(!this.closest("code")){if(this.content=[],this.hasAttribute("breakpoint")){const e=this.getAttribute("breakpoint"),t=parseInt(e,10);let n;n=e.endsWith("rem")?t*parseInt(window.getComputedStyle(document.documentElement).fontSize,10):e.endsWith("em")?t*parseInt(window.getComputedStyle(this).fontSize,10):t,this.#t=n}window.requestAnimationFrame(()=>{this.details=Array.from(this.children),this.details.forEach((e,t)=>{const n=e.querySelector("summary");e.open&&(this.index=t),this.content.push({title:n.textContent,content:[...n.parentElement.children].filter(e=>1===e.nodeType&&e!==n)})});let e=!1;this.#i=new ResizeObserver(t=>{if(e)for(const e of t)this.#r(e.borderBoxSize[0].inlineSize);e=!0}),this.#r(this.clientWidth,()=>{this.#i.observe(this)})})}}attributeChangedCallback(e,t,n){"current"===e&&(this.index=parseInt(n,10),this.#r(this.clientWidth))}disconnectedCallback(){this.#i&&this.#i.disconnect()}async#r(e,t){!this.#t||e<this.#t?(await this.#o(),this.#n="accordion"):(await this.#a(),this.#n="tabs"),t&&t()}#o(){return this.#e||(this.#e=new e(this)),"tabs"===this.#n?(this.#c(),this.#e.setElements(),this.#e.elements.forEach(e=>this.appendChild(e))):this.#e.render(),!0}async#a(){this.#c(),this.#s?(this.#s.index="number"==typeof this.index?this.index:0,this.#s.setElements()):this.#s=new t(this);const[e,n]=this.#s.elements;return this.appendChild(e),n.forEach(e=>{this.appendChild(e)}),await this.#s.render(!1)}#c(){Array.from(this.children).forEach(e=>this.removeChild(e))}});class e{constructor(e){this.AccordionTabs=e,this.elements=this.AccordionTabs.details,this.elements.forEach((e,t)=>{e.querySelector("summary").addEventListener("click",({target:e})=>{requestAnimationFrame(()=>{this.#d(e.closest("details"),t)})})}),this.render()}setElements(){this.elements.forEach((e,t)=>{this.AccordionTabs.content[t].content.forEach(t=>e.appendChild(t)),e.open=t===this.AccordionTabs.index})}render(){this.elements.forEach((e,t)=>{e.open=t===this.AccordionTabs.index})}#d(e,t){e.open?(this.elements.forEach(t=>{e!==t&&(t.open=!1)}),this.AccordionTabs.index=t):this.AccordionTabs.index=null}}class t{#h;#l=[];#b=[];#u;constructor(e){this.#h=e,this.elements=this.getElements(),this.index="number"==typeof this.#h.index?this.#h.index:0,this.#u=new n(this)}getElements(){const e=document.createElement("ol"),t=[];return this.#h.content.forEach(({title:n,content:i},s)=>{const r=document.createElement("button"),o=document.createElement("li"),a=document.createElement("div"),c=crypto.randomUUID(),d=`tab-${c}`,h=`panel-${c}`;e.setAttribute("role","tablist"),o.setAttribute("role","presentation"),r.textContent=n,r.type="button",r.id=d,r.setAttribute("aria-selected",s===this.index?"true":"false"),r.setAttribute("tabindex",s===this.index?0:-1),r.setAttribute("aria-controls",h),r.setAttribute("role","tab"),this.#l.push(r),o.appendChild(r),e.appendChild(o),i.forEach(e=>{a.appendChild(e)}),a.id=h,a.hidden=this.index!==s,a.setAttribute("role","tabpanel"),a.setAttribute("tabindex","0"),a.setAttribute("aria-labelledby",d),t.push(a),this.#b.push(a)}),[e,t]}setElements(){this.elements[1].forEach((e,t)=>{this.#h.content[t].content.forEach(t=>e.appendChild(t))})}setActiveTab(e){this.#h.index=this.index=e,this.render()}async render(e=!0){return this.elements[1].forEach((e,t)=>{e.hidden=t!==this.index}),await this.#u.render(e)}}class n{#m;#p;constructor(e){this.#m=e,this.#p=Array.from(this.#m.elements[0].querySelectorAll("button")),this.#p.forEach(e=>{e.addEventListener("click",this.#T.bind(this)),e.addEventListener("keydown",this.#f.bind(this))})}#T({currentTarget:e}){this.#m.setActiveTab(this.#p.indexOf(e))}#f(e){const{dir:t}=e.target.closest("[dir]")||document.documentElement;let n=!1;switch(e.key){case"ArrowLeft":"rtl"===t?this.#w():this.#A(),n=!0;break;case"ArrowRight":"rtl"===t?this.#A():this.#w(),n=!0;break;case"Home":this.#m.setActiveTab(0),n=!0;break;case"End":this.#m.setActiveTab(this.#p.length-1),n=!0}n&&(e.stopPropagation(),e.preventDefault())}#w(){this.#m.setActiveTab(this.#m.index===this.#p.length-1?0:this.#m.index+1)}#A(){this.#m.setActiveTab(0===this.#m.index?this.#p.length-1:this.#m.index-1)}render(e=!0){return this.#p.forEach((t,n)=>{n===this.#m.index?(t.setAttribute("aria-selected","true"),t.removeAttribute("tabindex"),e&&t.focus()):(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex",-1))}),new Promise(e=>setTimeout(e,1e3))}}let i,s=250;function r(e){const t=function(e){return"reloadParent"===e?"parent":"string"==typeof e&&0===e.length?"iframe":null}(e);return t||function(e){try{return JSON.parse(e).scope||"iframe"}catch{return"iframe"}}(e)}function o(){i=new WebSocket(`${"https:"===window.location.protocol?"wss":"ws"}://${window.location.host}/__miyagi_ws`),i.onopen=()=>{s=250},i.onmessage=e=>{"parent"!==r(e.data)?window.location.reload():parent.window.location.reload()},i.onerror=()=>{i.close()},i.onclose=()=>{!function(){const e=Math.floor(100*Math.random()),t=Math.min(s+e,5e3);s=Math.min(2*s,5e3),window.setTimeout(()=>{o()},t)}()}}o();function a(e){return["INPUT","SELECT","TEXTAREA"].includes(e)}window.location.pathname.startsWith("/component?")&&window.location.href.indexOf("&embedded=true")>=0&&window.self===window.top&&(window.location=new URL(window.location).replace("&embedded=true","")),document.addEventListener("DOMContentLoaded",function(){const e=Array.from(document.querySelectorAll(".Component-file")),t=document.querySelector(".Styleguide");e.length>0&&import("./_iframe-links-DdifIr4P.js").then(t=>{t.default(e)}).catch(e=>console.error(e)),document.querySelector(".Code")&&import("./_prism-By3NMwUd.js"),t&&import("./index-BKDKaBC6.js").then(e=>new e.default(t)).catch(e=>console.error(e)),document.querySelector(".js-openMockData")&&import("./_mock-data-Dypo4Bl_.js")}),document.addEventListener("keyup",e=>{const{path:t,originalTarget:n,target:i,key:s}=e,r=t?t[0]:n||i;((e,t)=>!a(e.tagName)&&"f"===t)(r,s)?parent.window.dispatchEvent(new CustomEvent("searchTriggered")):((e,t)=>!a(e.tagName)&&"g"===t)(r,s)&&parent.window.dispatchEvent(new CustomEvent("gotoTriggered"))});

package/frontend/assets/js/_socket.js

@@ -1,9 +1,82 @@
-const ws = new WebSocket(`ws://${document.location.host}`);
+const SOCKET_PATH = "/__miyagi_ws";
+const INITIAL_RETRY_DELAY_MS = 250;
+const MAX_RETRY_DELAY_MS = 5000;
 
-ws.onmessage = async (message) => {
-	if (message.data === "reloadParent") {
+let retryDelay = INITIAL_RETRY_DELAY_MS;
+let websocket;
+
+function getWebSocketUrl() {
+	const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+	return `${protocol}://${window.location.host}${SOCKET_PATH}`;
+}
+
+function triggerReload(scope) {
+	if (scope === "parent") {
 		parent.window.location.reload();
-	} else {
-		window.location.reload();
+		return;
+	}
+
+	window.location.reload();
+}
+
+function parseLegacyScope(messageData) {
+	if (messageData === "reloadParent") {
+		return "parent";
 	}
-};
+
+	if (typeof messageData === "string" && messageData.length === 0) {
+		return "iframe";
+	}
+
+	return null;
+}
+
+function parseJsonScope(messageData) {
+	try {
+		const parsed = JSON.parse(messageData);
+		return parsed.scope || "iframe";
+	} catch {
+		return "iframe";
+	}
+}
+
+function parseScope(messageData) {
+	const legacyScope = parseLegacyScope(messageData);
+	if (legacyScope) {
+		return legacyScope;
+	}
+
+	return parseJsonScope(messageData);
+}
+
+function scheduleReconnect() {
+	const jitter = Math.floor(Math.random() * 100);
+	const delay = Math.min(retryDelay + jitter, MAX_RETRY_DELAY_MS);
+	retryDelay = Math.min(retryDelay * 2, MAX_RETRY_DELAY_MS);
+
+	window.setTimeout(() => {
+		connect();
+	}, delay);
+}
+
+function connect() {
+	websocket = new WebSocket(getWebSocketUrl());
+
+	websocket.onopen = () => {
+		retryDelay = INITIAL_RETRY_DELAY_MS;
+	};
+
+	websocket.onmessage = (message) => {
+		triggerReload(parseScope(message.data));
+	};
+
+	websocket.onerror = () => {
+		websocket.close();
+	};
+
+	websocket.onclose = () => {
+		scheduleReconnect();
+	};
+}
+
+connect();

package/lib/cli/lint.js

@@ -4,6 +4,11 @@ import getConfig from "../config.js";
 import log from "../logger.js";
 import { getComponentData } from "../mocks/index.js";
 import validateMockData from "../validator/mocks.js";
+import {
+	getSchemaValidationMode,
+	toSchemaValidationResult,
+	validateSchemas,
+} from "../validator/schemas.js";
 import { t } from "../i18n/index.js";
 
 /**
@@ -14,6 +19,8 @@ export default async function lint(args) {
 
 	const componentArg = args._.slice(1)[0];
 	const config = await getConfig(args);
+	process.env.MIYAGI_LOG_CONTEXT = "lint";
+	process.env.MIYAGI_LOG_LEVEL = config.lint?.logLevel || "error";
 	global.app = await init(config);
 
 	if (componentArg) {
@@ -23,8 +30,20 @@ export default async function lint(args) {
 		);
 
 		if (component) {
+			const schemaValidation = validateSchemas({
+				components: [component],
+			});
+
+			if (schemaValidation.errors.length > 0) {
+				reportSchemaErrors(schemaValidation.errors);
+				process.exit(1);
+			}
+
+			log("success", "All schemas valid.");
+
 			await validateComponentMockData({
 				component,
+				validSchemas: schemaValidation.validSchemas,
 			});
 		} else {
 			log("error", `The component ${componentArg} does not seem to exist.`);
@@ -40,81 +59,90 @@ export default async function lint(args) {
  */
 async function validateAllMockData(exitProcess = true) {
 	log("info", t("linter.all.start"));
+	const mode = getSchemaValidationMode();
+	const components = global.state.routes.filter(
+		(route) => route.type === "components" && route.paths.tpl,
+	);
+	const schemaValidation = validateSchemas({
+		components,
+	});
+	const invalidSchemaComponents = new Set(
+		schemaValidation.errors.map((entry) => entry.component),
+	);
 
-	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();
-						});
-				}),
-			);
+	if (schemaValidation.errors.length === 0) {
+		log("success", "All schemas valid.");
+	}
+
+	if (schemaValidation.errors.length > 0 && mode === "fail-fast") {
+		reportSchemaErrors(schemaValidation.errors);
+		log(
+			"error",
+			schemaValidation.errors.length === 1
+				? t("linter.all.schema.invalid.one")
+				: t("linter.all.schema.invalid.other").replace(
+						"{{amount}}",
+						schemaValidation.errors.length,
+					),
+		);
+		if (exitProcess) {
+			process.exit(1);
 		}
-	});
+		return;
+	}
 
-	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",
-			);
+	const results = await Promise.all(
+		components
+			.filter((route) => !invalidSchemaComponents.has(route.paths.dir.short))
+			.map((component) =>
+				validateComponentMockData({
+					component,
+					silent: true,
+					exitProcess: false,
+					validSchemas: schemaValidation.validSchemas,
+				}),
+			),
+	);
+	const mockInvalidResults = results.filter(
+		(result) => result?.valid === false && result.type === "mocks",
+	);
 
-			if (
-				mockInvalidResults.length === 0 &&
-				schemaInvalidResults.length === 0
-			) {
-				log("success", t("linter.all.valid"));
-				if (exitProcess) {
-					process.exit(0);
-				}
-			}
+	if (mode === "collect-all" && schemaValidation.errors.length > 0) {
+		reportSchemaErrors(schemaValidation.errors);
+		log(
+			"error",
+			schemaValidation.errors.length === 1
+				? t("linter.all.schema.invalid.one")
+				: t("linter.all.schema.invalid.other").replace(
+						"{{amount}}",
+						schemaValidation.errors.length,
+					),
+		);
+	}
 
-			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 (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 (mockInvalidResults.length === 0 && schemaValidation.errors.length === 0) {
+		log("success", t("linter.all.valid"));
+		if (exitProcess) {
+			process.exit(0);
+		}
+		return;
+	}
 
-			if (exitProcess) {
-				process.exit(1);
-			}
-		})
-		.catch((err) => {
-			console.error(err);
-			if (exitProcess) {
-				process.exit(1);
-			}
-		});
+	if (exitProcess) {
+		process.exit(1);
+	}
 }
 
 /**
@@ -122,12 +150,14 @@ async function validateAllMockData(exitProcess = true) {
  * @param {object} obj.component
  * @param {boolean} [obj.silent]
  * @param {boolean} [obj.exitProcess]
+ * @param {Array<object>} [obj.validSchemas]
  * @returns {Promise<object|null>}
  */
 async function validateComponentMockData({
 	component,
 	silent,
 	exitProcess = true,
+	validSchemas = [],
 }) {
 	if (!silent) {
 		log(
@@ -139,42 +169,60 @@ async function validateComponentMockData({
 		);
 	}
 
-	const data = await getComponentData(component);
+	const data = (await getComponentData(component)) || [];
 
-	if (data) {
-		for (const { messages } of data) {
+	if (data.length > 0) {
+		for (const { messages = [] } of data) {
 			for (const { type, text, verbose } of messages) {
 				log(type, text, verbose);
 			}
 		}
+	}
 
-		const results = validateMockData(component, data);
+	const results = validateMockData(component, data, false, validSchemas);
 
-		if (!results) return null;
+	if (!results) return null;
 
-		if (results.length === 0) {
-			if (!silent) {
-				log("success", t("linter.component.valid"));
-			}
+	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,
-				};
-			}
+		if (exitProcess) {
+			process.exit(0);
 		}
+
+		return {
+			valid: true,
+		};
 	}
 
-	return null;
+	if (exitProcess) {
+		process.exit(1);
+	}
+
+	return {
+		valid: false,
+		type: results[0].type,
+	};
+}
+
+/**
+ * @param {Array<object>} schemaErrors
+ */
+function reportSchemaErrors(schemaErrors) {
+	schemaErrors.forEach((entry) => {
+		const result = toSchemaValidationResult(entry);
+		log("error", `${entry.component}:\n${result.data[0].message}`);
+		log("error", `schema: ${entry.schemaFile}`);
+		if (entry.schemaPath || entry.instancePath) {
+			log(
+				"error",
+				`schemaPath: ${entry.schemaPath || "-"} | instancePath: ${entry.instancePath || "-"}`,
+			);
+		}
+		if (entry.hint) {
+			log("warn", entry.hint);
+		}
+	});
 }

package/lib/config.js

@@ -70,5 +70,29 @@ function getCliArgs(args) {
 
 	cliArgs.build = buildArgs;
 
+	if (
+		cliArgs.watchReport !== undefined ||
+		cliArgs.watchReportFormat !== undefined ||
+		cliArgs.watchReportNoColor !== undefined
+	) {
+		cliArgs.watch = cliArgs.watch || {};
+		cliArgs.watch.report = cliArgs.watch.report || {};
+
+		if (cliArgs.watchReport !== undefined) {
+			cliArgs.watch.report.enabled = cliArgs.watchReport;
+			delete cliArgs.watchReport;
+		}
+
+		if (cliArgs.watchReportFormat !== undefined) {
+			cliArgs.watch.report.format = cliArgs.watchReportFormat;
+			delete cliArgs.watchReportFormat;
+		}
+
+		if (cliArgs.watchReportNoColor !== undefined) {
+			cliArgs.watch.report.useColors = !cliArgs.watchReportNoColor;
+			delete cliArgs.watchReportNoColor;
+		}
+	}
+
 	return cliArgs;
 }

package/lib/constants/lint-log-levels.js

@@ -0,0 +1,11 @@
+export const LINT_LOG_LEVELS = Object.freeze({
+	ERROR: "error",
+	WARN: "warn",
+	INFO: "info",
+});
+
+export const LINT_LOG_LEVEL_ORDER = Object.freeze({
+	[LINT_LOG_LEVELS.ERROR]: 0,
+	[LINT_LOG_LEVELS.WARN]: 1,
+	[LINT_LOG_LEVELS.INFO]: 2,
+});

package/lib/default-config.js

@@ -46,6 +46,9 @@ export default {
 			render: null,
 			options: {},
 		},
+		lint: {
+			logLevel: "error",
+		},
 		extensions: [],
 		files: {
 			css: {
@@ -94,9 +97,69 @@ export default {
 			},
 			watchConfigFile: true,
 		},
+		watch: {
+			enabled: true,
+			backend: "chokidar",
+			sources: [],
+			ignore: {
+				defaults: true,
+				patterns: [],
+			},
+			behavior: {
+				debounceMs: 60,
+				coalesceWindowMs: 120,
+				awaitWriteFinish: {
+					enabled: true,
+					stabilityThresholdMs: 200,
+					pollIntervalMs: 50,
+				},
+			},
+			reload: {
+				enabled: true,
+				rules: {
+					template: "iframe",
+					data: "parent",
+					docs: "parent",
+					schema: "iframe",
+					componentAsset: "none",
+					globalCss: "none",
+					globalJs: "none",
+					unknown: "parent",
+				},
+			},
+			socket: {
+				reconnect: {
+					enabled: true,
+					initialDelayMs: 250,
+					maxDelayMs: 5000,
+					jitter: true,
+				},
+				heartbeat: {
+					enabled: true,
+					intervalMs: 30000,
+				},
+			},
+			report: {
+				enabled: true,
+				onStart: true,
+				format: "pretty",
+				destination: "stdout",
+				useColors: true,
+			},
+			configFile: {
+				enabled: true,
+			},
+			debug: {
+				logEvents: false,
+				logDecisions: false,
+				logResolvedSources: false,
+			},
+		},
 		schema: {
 			ajv: AJV,
+			verbose: false,
 		},
+		schemaValidationMode: "collect-all",
 	},
 	projectName: "miyagi",
 	defaultPort: 5000,