@schalkneethling/miyagi-core 4.0.2 → 4.1.1

package/lib/build/index.js

@@ -380,6 +380,19 @@ export default () => {
 			});
 		}
 
+		const sharedCss = (assetsConfig.shared?.css || []).map((file) =>
+			path.join(
+				assetsConfig.root,
+				typeof file === "string" ? file : file.src,
+			),
+		);
+		const sharedJs = (assetsConfig.shared?.js || []).map((file) =>
+			path.join(
+				assetsConfig.root,
+				typeof file === "string" ? file : file.src,
+			),
+		);
+
 		const cssJsFiles = [
 			...new Set([
 				...assetsConfig.css.map((file) =>
@@ -394,6 +407,8 @@ export default () => {
 						typeof file === "string" ? file : file.src,
 					),
 				),
+				...sharedCss,
+				...sharedJs,
 				...assetsConfig.customProperties.files.map((file) =>
 					path.join(assetsConfig.root, file),
 				),
@@ -655,6 +670,7 @@ export default () => {
 						res: global.app,
 						component,
 						componentData: data.resolved,
+						componentDeclaredAssets: data.$assets || null,
 						cb: async (err, response) => {
 							if (err) {
 								if (typeof err === "string") {

package/lib/cli/drupal-assets.js

@@ -0,0 +1,159 @@
+// @ts-check
+
+import { readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import yaml from "js-yaml";
+import log from "../logger.js";
+import { loadAssetsConfig } from "../drupal/load-assets-config.js";
+import {
+	parseLibrariesYaml,
+	resolveComponentAssets,
+	mapLibraryToComponent,
+} from "../drupal/resolve-library-assets.js";
+
+/**
+ * @typedef {{src: string, type?: string}} JsEntry
+ * @typedef {{css: string[], js: JsEntry[]}} ComponentAssets
+ */
+
+/**
+ * @param {object} args - CLI arguments from yargs
+ */
+export default async function drupalAssets(args) {
+	let config;
+	try {
+		config = await loadAssetsConfig(args);
+	} catch (err) {
+		log("error", /** @type {Error} */ (err).message);
+		process.exit(1);
+	}
+
+	if (!config.libraries) {
+		log("error", "No libraries file specified. Use --libraries or configure it in .miyagi-assets.js.");
+		process.exit(1);
+	}
+
+	let yamlContent;
+	try {
+		yamlContent = await readFile(config.libraries, "utf8");
+	} catch {
+		log("error", `Could not read libraries file: ${config.libraries}`);
+		process.exit(1);
+	}
+
+	const librariesMap = parseLibrariesYaml(yamlContent);
+	const targetLibraries = config.components || Object.keys(librariesMap);
+	const componentsFolder = global.config?.components?.folder || "src";
+
+	let updatedCount = 0;
+
+	for (const libraryName of targetLibraries) {
+		if (!librariesMap[libraryName]) {
+			log("warn", `Library "${libraryName}" not found in ${config.libraries} — skipping.`);
+			continue;
+		}
+
+		const componentPath = mapLibraryToComponent(
+			libraryName,
+			config.mapping,
+			componentsFolder,
+			config.autoDiscoveryPrefixes ?? undefined,
+		);
+
+		if (!componentPath) {
+			log("warn", `Could not map library "${libraryName}" to a component folder — skipping.`);
+			continue;
+		}
+
+		const assets = resolveComponentAssets(
+			libraryName,
+			librariesMap,
+			config.ignorePrefixes,
+		);
+
+		if (config.dryRun) {
+			log("info", `[dry-run] ${libraryName} → ${componentPath}`);
+			console.log(JSON.stringify({ $assets: assets }, null, "\t"));
+			continue;
+		}
+
+		const updated = await updateMockFile(
+			path.join(componentsFolder, componentPath),
+			assets,
+		);
+
+		if (updated) {
+			updatedCount++;
+			log("info", `Updated $assets in ${componentPath}`);
+		}
+	}
+
+	if (!config.dryRun) {
+		log("success", `Done. Updated ${updatedCount} component(s).`);
+	}
+}
+
+/**
+ * Reads a component's mock file, injects/replaces $assets, writes back.
+ * @param {string} componentDir - absolute or relative path to component folder
+ * @param {ComponentAssets} assets
+ * @returns {Promise<boolean>} true if file was updated
+ */
+async function updateMockFile(componentDir, assets) {
+	const mocksConfig = global.config?.files?.mocks || {
+		name: "mocks",
+		extension: ["yaml", "yml", "json", "js"],
+	};
+	const extensions = Array.isArray(mocksConfig.extension)
+		? mocksConfig.extension
+		: [mocksConfig.extension];
+
+	for (const ext of extensions) {
+		const filePath = path.join(componentDir, `${mocksConfig.name}.${ext}`);
+
+		let content;
+		try {
+			content = await readFile(filePath, "utf8");
+		} catch {
+			continue;
+		}
+
+		if (["yaml", "yml"].includes(ext)) {
+			/** @type {Record<string, unknown>} */
+			const data = /** @type {Record<string, unknown>} */ (
+				yaml.load(content) || {}
+			);
+			data.$assets = cleanAssets(assets);
+			await writeFile(filePath, yaml.dump(data, { indent: 2 }));
+			return true;
+		}
+
+		if (ext === "json") {
+			/** @type {Record<string, unknown>} */
+			const data = JSON.parse(content);
+			data.$assets = cleanAssets(assets);
+			await writeFile(filePath, JSON.stringify(data, null, 2) + "\n");
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * Strips empty arrays from assets to keep mock files clean.
+ * @param {ComponentAssets} assets
+ * @returns {Partial<ComponentAssets>}
+ */
+function cleanAssets(assets) {
+	/** @type {Partial<ComponentAssets>} */
+	const result = {};
+	if (assets.css?.length > 0) {
+		result.css = assets.css;
+	}
+
+	if (assets.js?.length > 0) {
+		result.js = assets.js;
+	}
+	return result;
+}

package/lib/cli/index.js

@@ -1,5 +1,7 @@
 import lintImport from "./lint.js";
 import componentImport from "./component.js";
+import drupalAssetsImport from "./drupal-assets.js";
 
 export const lint = lintImport;
 export const component = componentImport;
+export const drupalAssets = drupalAssetsImport;

package/lib/default-config.js

@@ -5,6 +5,11 @@ export default {
 		assets: {
 			root: "",
 			css: [],
+			shared: {
+				css: [],
+				js: [],
+			},
+			isolateComponents: false,
 			customProperties: {
 				files: [],
 				prefixes: {

package/lib/drupal/load-assets-config.js

@@ -0,0 +1,94 @@
+import path from "node:path";
+import * as v from "valibot";
+
+const DrupalBlockSchema = v.object({
+	libraries: v.string(),
+	ignorePrefixes: v.optional(v.array(v.string())),
+	mapping: v.optional(v.record(v.string(), v.string())),
+	autoDiscoveryPrefixes: v.optional(v.nullable(v.array(v.string()))),
+	components: v.optional(v.nullable(v.array(v.string()))),
+});
+
+const ConfigSchema = v.object({
+	engine: v.picklist(["drupal"]),
+	drupal: DrupalBlockSchema,
+});
+
+export const NormalizedConfigSchema = v.object({
+	engine: v.string(),
+	libraries: v.optional(v.string()),
+	ignorePrefixes: v.array(v.string()),
+	mapping: v.record(v.string(), v.string()),
+	autoDiscoveryPrefixes: v.nullable(v.array(v.string())),
+	components: v.nullable(v.array(v.string())),
+	dryRun: v.boolean(),
+});
+
+/** @typedef {v.InferOutput<typeof NormalizedConfigSchema>} NormalizedConfig */
+
+/**
+ * Loads the .miyagi-assets.js config and merges CLI overrides.
+ * @param {object} cliArgs
+ * @param {string} [cliArgs.engine] - engine to use (default: "drupal")
+ * @param {string} [cliArgs.config] - path to config file
+ * @param {string} [cliArgs.libraries] - CLI override for libraries path
+ * @param {string[]} [cliArgs.components] - CLI override for components list
+ * @param {string[]} [cliArgs.ignorePrefixes] - CLI override for ignore prefixes
+ * @param {boolean} [cliArgs.dryRun] - dry-run mode
+ * @returns {Promise<NormalizedConfig>} normalized config
+ */
+export async function loadAssetsConfig(cliArgs) {
+	let fileConfig = null;
+
+	const configPath = cliArgs.config || ".miyagi-assets.js";
+
+	try {
+		const resolved = path.resolve(configPath);
+		const mod = await import(resolved);
+		fileConfig = mod.default || mod;
+	} catch {
+		if (!cliArgs.libraries) {
+			throw new Error(
+				`Could not load config file "${configPath}" and no --libraries flag provided.`,
+			);
+		}
+	}
+
+	if (fileConfig) {
+		const result = v.safeParse(ConfigSchema, fileConfig);
+
+		if (!result.success) {
+			const messages = result.issues.map((issue) => {
+				const issuePath =
+					issue.path?.map((path) => path.key).join(".") || "root";
+				return `${issuePath}: ${issue.message}`;
+			});
+			throw new Error(`Invalid config: ${messages.join("; ")}`);
+		}
+
+		const { engine } = result.output;
+		const engineBlock = result.output[engine];
+
+		return {
+			engine,
+			libraries: cliArgs.libraries || engineBlock.libraries,
+			ignorePrefixes:
+				cliArgs.ignorePrefixes || engineBlock.ignorePrefixes || [],
+			mapping: engineBlock.mapping || {},
+			autoDiscoveryPrefixes: engineBlock.autoDiscoveryPrefixes ?? null,
+			components:
+				cliArgs.components || engineBlock.components || null,
+			dryRun: cliArgs.dryRun || false,
+		};
+	}
+
+	return {
+		engine: cliArgs.engine || "drupal",
+		libraries: cliArgs.libraries,
+		ignorePrefixes: cliArgs.ignorePrefixes || [],
+		mapping: {},
+		autoDiscoveryPrefixes: null,
+		components: cliArgs.components || null,
+		dryRun: cliArgs.dryRun || false,
+	};
+}

package/lib/drupal/resolve-library-assets.js

@@ -0,0 +1,189 @@
+// @ts-check
+
+import fs from "node:fs";
+import path from "node:path";
+import yaml from "js-yaml";
+
+/**
+ * @typedef {{src: string, type?: string}} JsEntry
+ * @typedef {{prefix: string, name: string}} DepEntry
+ * @typedef {{css: string[], js: JsEntry[], dependencies: DepEntry[]}} LibraryEntry
+ */
+
+/**
+ * Parses a Drupal *.libraries.yml string into a normalized map.
+ * @param {string} yamlContent - raw YAML string (not a file path)
+ * @returns {Record<string, LibraryEntry>}
+ */
+export function parseLibrariesYaml(yamlContent) {
+	/**
+	 * @type {Record<string, {
+	 *   css?: Record<string, Record<string, object>>,
+	 *   js?: Record<string, {attributes?: {type?: string}}>,
+	 *   dependencies?: string[]
+	 * }>}
+	 */
+	const raw = /** @type {never} */ (yaml.load(yamlContent));
+	/** @type {Record<string, LibraryEntry>} */
+	const map = {};
+
+	for (const [name, entry] of Object.entries(raw)) {
+		const css = entry.css
+			? Object.values(entry.css).flatMap(Object.keys)
+			: [];
+
+		const js = entry.js
+			? Object.entries(entry.js).map(([src, opts]) =>
+				opts?.attributes?.type
+					? { src, type: opts.attributes.type }
+					: { src },
+			)
+			: [];
+
+		const dependencies = (entry.dependencies || [])
+			.filter((dep) => dep.includes("/"))
+			.map((dep) => ({
+				prefix: dep.slice(0, dep.indexOf("/")),
+				name: dep.slice(dep.indexOf("/") + 1),
+			}));
+
+		map[name] = { css, js, dependencies };
+	}
+
+	return map;
+}
+
+/**
+ * Recursively resolves all CSS and JS assets for a library, depth-first.
+ * Dependencies are collected before the component's own assets to preserve
+ * the CSS cascade (base styles before component styles) and ensure JS
+ * dependencies are available before scripts that rely on them.
+ * @param {string} libraryName
+ * @param {Record<string, LibraryEntry>} librariesMap - output of parseLibrariesYaml
+ * @param {string[]} ignorePrefixes - dependency prefixes to skip
+ * @returns {{css: string[], js: JsEntry[]}}
+ */
+export function resolveComponentAssets(
+	libraryName,
+	librariesMap,
+	ignorePrefixes,
+) {
+	const cssSet = [];
+	const jsSet = [];
+	const resolved = new Set();
+
+	/**
+	 * @param {string} name
+	 * @param {Set<string>} ancestors
+	 */
+	function walk(name, ancestors) {
+		if (ancestors.has(name)) {
+			console.warn(
+				`Circular dependency detected: "${name}" already in chain.`,
+			);
+			return;
+		}
+
+		if (resolved.has(name)) {
+			return;
+		}
+
+		const lib = librariesMap[name];
+		if (!lib) {
+			console.warn(
+				`Dependency "${name}" not found in libraries — skipping.`,
+			);
+			return;
+		}
+
+		const chain = new Set(ancestors);
+		chain.add(name);
+
+		for (const dep of lib.dependencies) {
+			if (ignorePrefixes.includes(dep.prefix)) {
+				continue;
+			}
+			walk(dep.name, chain);
+		}
+
+		for (const cssFile of lib.css) {
+			if (!cssSet.includes(cssFile)) {
+				cssSet.push(cssFile);
+			}
+		}
+
+		for (const jsEntry of lib.js) {
+			if (!jsSet.some((entry) => entry.src === jsEntry.src)) {
+				jsSet.push(jsEntry);
+			}
+		}
+
+		resolved.add(name);
+	}
+
+	walk(libraryName, new Set());
+	return { css: cssSet, js: jsSet };
+}
+
+const DEFAULT_PREFIXES = ["element-", "pattern-", "template-", "component-"];
+
+/**
+ * Maps a Drupal library name to a miyagi component folder path.
+ * Uses explicit mapping first, falls back to auto-discovery.
+ * @param {string} libraryName
+ * @param {Record<string, string>} mapping - explicit library-to-folder mapping
+ * @param {string} componentsFolder - root components folder path
+ * @param {string[]} [autoDiscoveryPrefixes] - prefixes to strip when matching folder names
+ * @returns {string|null} component folder relative path, or null if not found
+ */
+export function mapLibraryToComponent(
+	libraryName,
+	mapping,
+	componentsFolder,
+	autoDiscoveryPrefixes = DEFAULT_PREFIXES,
+) {
+	if (mapping[libraryName]) {
+		return mapping[libraryName];
+	}
+
+	const candidates = [libraryName];
+
+	for (const prefix of autoDiscoveryPrefixes) {
+		if (libraryName.startsWith(prefix)) {
+			candidates.push(libraryName.slice(prefix.length));
+		}
+	}
+
+	try {
+		/** @type {string[]} */
+		const searchDirs = [componentsFolder];
+		while (searchDirs.length > 0) {
+			const dir = /** @type {string} */ (searchDirs.pop());
+
+			if (!fs.existsSync(dir)) {
+				continue;
+			}
+
+			const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+			for (const entry of entries) {
+				if (!entry.isDirectory()) {
+					continue;
+				}
+
+				if (candidates.includes(entry.name)) {
+					return path.relative(
+						componentsFolder,
+						path.join(dir, entry.name),
+					);
+				}
+				searchDirs.push(path.join(dir, entry.name));
+			}
+		}
+	} catch {
+		// Swallow filesystem errors (missing/unreadable dirs) intentionally.
+		// Caller handles null return with a user-facing warning.
+	}
+
+	return null;
+}

package/lib/index.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /**
  * The miyagi module
  * @module index
@@ -9,7 +11,11 @@ import log from "./logger.js";
 import yargs from "./init/args.js";
 import mockGenerator from "./generator/mocks.js";
 import getConfig from "./config.js";
-import { lint, component as createComponentViaCli } from "./cli/index.js";
+import {
+	lint,
+	component as createComponentViaCli,
+	drupalAssets,
+} from "./cli/index.js";
 import apiApp from "../api/app.js";
 
 /**
@@ -57,6 +63,14 @@ function argsIncludeLint(args) {
 	return args._.includes("lint");
 }
 
+/**
+ * @param {object} args
+ * @returns {boolean}
+ */
+function argsIncludeDrupalAssets(args) {
+	return args._.includes("drupal-assets");
+}
+
 /**
  * Runs the mock generator
  * @param {object} config - the user configuration object
@@ -97,26 +111,35 @@ export default async function Miyagi(cmd, { isBuild: isApiBuild } = {}) {
 	let isComponentGenerator;
 	let isMockGenerator;
 	let isLinter;
+	let isDrupalAssets;
 
 	if (cmd) {
 		isBuild = cmd === "build";
 	} else {
-		args = yargs.argv;
+		args = await yargs.argv;
 		isServer = argsIncludeServer(args);
 		isBuild = argsIncludeBuild(args);
 		isComponentGenerator = argsIncludeComponentGenerator(args);
 		isMockGenerator = argsIncludeMockGenerator(args);
 		isLinter = argsIncludeLint(args);
+		isDrupalAssets = argsIncludeDrupalAssets(args);
 	}
 
-	if (args.verbose) {
-		process.env.VERBOSE = args.verbose;
+	if (args && args.verbose) {
+		process.env.VERBOSE = String(args.verbose);
 	}
 
 	if (isLinter) {
 		return lint(args);
 	}
 
+	if (isDrupalAssets) {
+		process.env.NODE_ENV = "development";
+		global.config = await getConfig(args);
+		await drupalAssets(args);
+		process.exit();
+	}
+
 	if (isBuild || isComponentGenerator || isServer || isMockGenerator) {
 		if (isBuild) {
 			process.env.NODE_ENV = "production";

package/lib/init/args.js

@@ -45,6 +45,44 @@ export default yargs(hideBin(process.argv))
 		"lint",
 		"Validates if the component's mock data matches its JSON schema",
 	)
+	.command(
+		"drupal-assets",
+		"Resolves Drupal *.libraries.yml dependencies and updates component $assets in mock files",
+		{
+			engine: {
+				alias: "e",
+				description: "Engine to use for asset resolution",
+				type: "string",
+				choices: ["drupal"],
+				default: "drupal",
+			},
+			config: {
+				description: "Path to .miyagi-assets.js config file",
+				type: "string",
+				default: ".miyagi-assets.js",
+			},
+			libraries: {
+				alias: "l",
+				description: "Path to *.libraries.yml (overrides config)",
+				type: "string",
+			},
+			components: {
+				alias: "c",
+				description: "Library names to process (space-separated)",
+				type: "array",
+			},
+			"ignore-prefixes": {
+				description:
+					'Dependency prefixes to skip (e.g. "core" to ignore core/jquery)',
+				type: "array",
+			},
+			"dry-run": {
+				description: "Print resolved $assets without writing files",
+				type: "boolean",
+				default: false,
+			},
+		},
+	)
 	.help()
 	.version(pkgJson.version)
 	.alias("help", "h")

package/lib/init/config.js

@@ -216,6 +216,23 @@ export default (userConfig = {}) => {
 			);
 		}
 
+		if (config.assets.shared) {
+			if (config.assets.shared.css) {
+				config.assets.shared.css = getCssFilesArray(
+					config.assets.shared.css,
+					manifest,
+					config.assets.root,
+				);
+			}
+			if (config.assets.shared.js) {
+				config.assets.shared.js = getJsFilesArray(
+					config.assets.shared.js,
+					manifest,
+					config.assets.root,
+				);
+			}
+		}
+
 		if (!config.assets.customProperties) {
 			config.assets.customProperties = {};
 		}

package/lib/init/router.js

@@ -222,6 +222,7 @@ export default function Router() {
 					res,
 					component: routesEntry,
 					componentData: data?.resolved ?? {},
+					componentDeclaredAssets: data?.$assets || null,
 					cookies: req.cookies,
 				});
 			}

package/lib/init/static.js

@@ -75,6 +75,35 @@ function registerUserFiles(files) {
 	}
 }
 
+/**
+ * Registers static routes for assets.shared CSS and JS files.
+ * @returns {void}
+ */
+function registerSharedFiles() {
+	const { assets } = global.config;
+
+	if (!assets?.shared) return;
+
+	for (const file of assets.shared.css || []) {
+		if (file.startsWith("https://")) continue;
+
+		global.app.use(
+			path.join("/", path.dirname(file)),
+			express.static(path.join(assets.root, path.dirname(file))),
+		);
+	}
+
+	for (const file of assets.shared.js || []) {
+		const src = file.src || file;
+		if (src.startsWith("https://")) continue;
+
+		global.app.use(
+			path.join("/", path.dirname(src)),
+			express.static(path.join(assets.root, path.dirname(src))),
+		);
+	}
+}
+
 /**
  * @returns {void}
  */
@@ -128,6 +157,7 @@ export default function initStatic() {
 	registerUserComponentAssets();
 	registerUserFiles("css");
 	registerUserFiles("js");
+	registerSharedFiles();
 	registerCustomPropertyFiles();
 	registerAssetFolder();
 }

package/lib/init/watcher.js

@@ -292,6 +292,25 @@ export default function Watcher(server) {
 
 	const { components, docs, assets, extensions } = global.config;
 
+	const sharedCssToWatch = (assets.shared?.css || [])
+		.filter(
+			(f) =>
+				!f.startsWith("http://") &&
+				!f.startsWith("https://") &&
+				!f.startsWith("://"),
+		)
+		.map((f) => path.join(global.config.assets.root, f));
+
+	const sharedJsToWatch = (assets.shared?.js || [])
+		.map((file) => file.src || file)
+		.filter(
+			(f) =>
+				!f.startsWith("http://") &&
+				!f.startsWith("https://") &&
+				!f.startsWith("://"),
+		)
+		.map((f) => path.join(global.config.assets.root, f));
+
 	const foldersToWatch = [
 		...assets.folder.map((f) => path.join(global.config.assets.root, f)),
 		...assets.css
@@ -311,6 +330,8 @@ export default function Watcher(server) {
 					!f.startsWith("://"),
 			)
 			.map((f) => path.join(global.config.assets.root, f)),
+		...sharedCssToWatch,
+		...sharedJsToWatch,
 	];
 
 	if (components.folder) {

package/lib/mocks/get.js

@@ -22,6 +22,7 @@ export const getComponentData = async function getComponentData(component) {
 
 	if (componentJson) {
 		context = [];
+		const componentDeclaredAssets = componentJson.$assets || null;
 		let componentData = helpers.removeInternalKeys(componentJson);
 		const rootData = helpers.cloneDeep(componentData);
 		const componentVariations = componentJson.$variants;
@@ -55,6 +56,7 @@ export const getComponentData = async function getComponentData(component) {
 						resolved: resolved,
 						raw: merged,
 						name: variationJson.$name,
+						$assets: componentDeclaredAssets,
 					};
 				}
 			}
@@ -67,6 +69,7 @@ export const getComponentData = async function getComponentData(component) {
 						resolved: data.resolved,
 						raw: data.merged,
 						name: componentJson.$name || config.defaultVariationName,
+						$assets: componentDeclaredAssets,
 					});
 				}
 			}
@@ -85,6 +88,7 @@ export const getComponentData = async function getComponentData(component) {
 					resolved: componentJson.$hidden ? {} : resolved,
 					raw: componentJson.$hidden ? {} : merged,
 					name: componentJson.$name || config.defaultVariationName,
+					$assets: componentDeclaredAssets,
 				});
 			}
 

package/lib/render/helpers/resolve-assets.js

@@ -0,0 +1,58 @@
+/**
+ * Resolves the final CSS and JS asset lists for a component render.
+ *
+ * Resolution logic:
+ * - If componentAssets ($assets from mocks) is provided:
+ *     shared + componentAssets
+ * - Else if isolateComponents is true:
+ *     shared only
+ * - Else (legacy fallback):
+ *     global.config.assets.css / .js
+ * @param {object|null|undefined} componentAssets - the $assets declaration from mocks, or null/undefined
+ * @returns {{ cssFiles: string[], jsFilesHead: object[], jsFilesBody: object[] }}
+ */
+export default function resolveAssets(componentAssets) {
+	const { shared, isolateComponents, css, js } = global.config.assets;
+
+	if (componentAssets) {
+		const mergedCss = [
+			...shared.css,
+			...(componentAssets.css || []),
+		];
+		const mergedJs = [
+			...shared.js,
+			...(componentAssets.js || []),
+		];
+
+		return {
+			cssFiles: mergedCss,
+			jsFilesHead: mergedJs.filter(
+				(entry) => entry.position === "head" || !entry.position,
+			),
+			jsFilesBody: mergedJs.filter(
+				(entry) => entry.position === "body",
+			),
+		};
+	}
+
+	if (isolateComponents) {
+		return {
+			cssFiles: [...shared.css],
+			jsFilesHead: shared.js.filter(
+				(entry) => entry.position === "head" || !entry.position,
+			),
+			jsFilesBody: shared.js.filter(
+				(entry) => entry.position === "body",
+			),
+		};
+	}
+
+	// Legacy fallback: return all global assets
+	return {
+		cssFiles: css,
+		jsFilesHead: js.filter(
+			(entry) => entry.position === "head" || !entry.position,
+		),
+		jsFilesBody: js.filter((entry) => entry.position === "body"),
+	};
+}

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

@@ -6,6 +6,7 @@ import * as helpers from "../../../helpers.js";
 import validateMocks from "../../../validator/mocks.js";
 import { getComponentData } from "../../../mocks/index.js";
 import { getUserUiConfig, getThemeMode } from "../../helpers.js";
+import resolveAssets from "../../helpers/resolve-assets.js";
 import log from "../../../logger.js";
 
 /**
@@ -216,18 +217,19 @@ async function renderVariations({
 				({ shortPath }) => shortPath === component.paths.dir.short,
 			);
 
+			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: global.config.assets.css,
-					jsFilesHead: global.config.assets.js.filter(
-						(entry) => entry.position === "head" || !entry.position,
-					),
-					jsFilesBody: global.config.assets.js.filter(
-						(entry) => entry.position === "body",
-					),
+					cssFiles,
+					jsFilesHead,
+					jsFilesBody,
 					assets: {
 						css: componentsEntry
 							? componentsEntry.assets.css

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

@@ -1,12 +1,14 @@
 import path from "path";
 import config from "../../../default-config.js";
 import { getUserUiConfig } from "../../helpers.js";
+import resolveAssets from "../../helpers/resolve-assets.js";
 
 /**
  * @param {object} object - parameter object
  * @param {object} [object.res] - the express response object
  * @param {object} object.component
  * @param {object} object.componentData
+ * @param {object|null} [object.componentDeclaredAssets] - $assets from mocks
  * @param {Function} [object.cb] - callback function
  * @param {object} [object.cookies]
  * @returns {Promise} gets resolved when the variation has been rendered
@@ -15,6 +17,7 @@ export default async function renderIframeVariationStandalone({
 	res,
 	component,
 	componentData,
+	componentDeclaredAssets = null,
 	cb,
 	cookies,
 }) {
@@ -38,17 +41,16 @@ export default async function renderIframeVariationStandalone({
 						({ shortPath }) => shortPath === directoryPath,
 					);
 
+					const { cssFiles, jsFilesHead, jsFilesBody } =
+						resolveAssets(componentDeclaredAssets);
+
 					await res.render(
 						"component_variation.twig.miyagi",
 						{
 							html: result,
-							cssFiles: global.config.assets.css,
-							jsFilesHead: global.config.assets.js.filter(
-								(entry) => entry.position === "head" || !entry.position,
-							),
-							jsFilesBody: global.config.assets.js.filter(
-								(entry) => entry.position === "body",
-							),
+							cssFiles,
+							jsFilesHead,
+							jsFilesBody,
 							assets: {
 								css: componentsEntry
 									? componentsEntry.assets.css

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@schalkneethling/miyagi-core",
-	"version": "4.0.2",
+	"version": "4.1.1",
 	"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)",
@@ -9,7 +9,7 @@
 	"bugs": "https://github.com/miyagi-dev/miyagi/issues",
 	"repository": {
 		"type": "git",
-		"url": "git@github.com:miyagi-dev/miyagi.git"
+		"url": "https://github.com/schalkneethling/miyagi.git"
 	},
 	"type": "module",
 	"keywords": [
@@ -20,7 +20,7 @@
 		"frontend"
 	],
 	"engines": {
-		"node": ">=20.11.0"
+		"node": ">=24"
 	},
 	"files": [
 		"api",
@@ -43,9 +43,10 @@
 		"directory-tree": "^3.5.2",
 		"express": "^5.1.0",
 		"js-yaml": "^4.1.0",
-		"marked": "^16.4.1",
+		"marked": "^17.0.2",
 		"node-watch": "^0.7.4",
-		"twing": "7.2.2",
+		"twing": "7.3.1",
+		"valibot": "^1.2.0",
 		"ws": "^8.18.3",
 		"yargs": "^18.0.0"
 	},
@@ -53,11 +54,13 @@
 		"@eslint/js": "^9.39.2",
 		"@rollup/plugin-node-resolve": "^16.0.3",
 		"@rollup/plugin-terser": "^0.4.4",
+		"@types/js-yaml": "^4.0.9",
 		"@types/node": "^24.10.0",
+		"@types/yargs": "^17.0.35",
 		"@vitest/coverage-v8": "^4.0.6",
 		"cssnano": "^7.1.2",
 		"eslint": "^9.39.0",
-		"eslint-plugin-jsdoc": "^61.1.11",
+		"eslint-plugin-jsdoc": "^62.5.4",
 		"globals": "^15.15.0",
 		"gulp": "^5.0.1",
 		"gulp-postcss": "^10.0.0",
@@ -75,8 +78,7 @@
 		"build": "gulp build",
 		"test": "vitest run --coverage --coverage.include=api --coverage.include=lib",
 		"lint": "stylelint frontend/assets/css/ && eslint lib/ && eslint frontend/assets/js/",
-		"fix": "eslint lib/ --fix && eslint frontend/assets/js/ --fix",
-		"release": "standard-version"
+		"fix": "eslint lib/ --fix && eslint frontend/assets/js/ --fix"
 	},
 	"browserslist": [
 		"last 2 versions",