@mbler/mcx-core 0.1.3-rc.5 → 0.1.3-rc.8

package/dist/index.js

@@ -3,7 +3,7 @@ import * as Module from "node:module";
 import { createRequire } from "node:module";
 import { NodeTypes, baseParse } from "@vue/compiler-core";
 import * as path from "node:path";
-import { extname } from "node:path";
+import { dirname, extname, resolve, sep } from "node:path";
 import * as t from "@babel/types";
 import { program } from "@babel/types";
 import * as fs from "node:fs/promises";
@@ -1013,6 +1013,99 @@ function processHooks(code) {
 //#endregion
 //#region src/transforms/transform/layout.ts
 const SETUP_CTX_INDEX = 0;
+const UI_TAGS = new Set([
+	"input",
+	"textField",
+	"toggle",
+	"dropdown",
+	"slider",
+	"button",
+	"label",
+	"body",
+	"header",
+	"title",
+	"divider",
+	"spacer",
+	"close-button"
+]);
+const FORM_TAGS = new Set([
+	"input",
+	"dropdown",
+	"submit",
+	"toggle",
+	"slider",
+	"button",
+	"button-m",
+	"body",
+	"divider",
+	"title"
+]);
+const COMMON_ATTRS = new Set([
+	"id",
+	"for",
+	"if",
+	"tip",
+	"disabled",
+	"visible",
+	"description",
+	":id",
+	":for",
+	":if",
+	":tip",
+	":disabled",
+	":visible",
+	":description"
+]);
+const TAG_ATTRS = {
+	input: new Set([
+		"placeholderText",
+		"default",
+		"value",
+		":placeholderText",
+		":default",
+		":value"
+	]),
+	textField: new Set([
+		"placeholderText",
+		"default",
+		"value",
+		":placeholderText",
+		":default",
+		":value"
+	]),
+	toggle: new Set([
+		"default",
+		"value",
+		":default",
+		":value"
+	]),
+	dropdown: new Set([
+		"default",
+		"value",
+		"option",
+		":default",
+		":value",
+		":option"
+	]),
+	slider: new Set([
+		"default",
+		"value",
+		"min",
+		"max",
+		":default",
+		":value",
+		":min",
+		":max"
+	]),
+	button: new Set([
+		"click",
+		"img",
+		":click",
+		":img"
+	]),
+	submit: new Set(["click", ":click"]),
+	"button-m": new Set(["click", ":click"])
+};
 /**
 * Shared layout generation for both <Form> and <Ui>.
 * Generates layout config with (s) => expr functions for content and params.
@@ -1061,24 +1154,38 @@ function generateLayout(ctx, tagNode, tagName, mode) {
 		const cleanedArr = { ...el.arr };
 		delete cleanedArr.for;
 		delete cleanedArr.if;
-		if (mode === "form") {
-			const formType = detectFormType(name);
-			if (formType === "invalid") {
-				internalCtx.rollupContext.error(`[${tagName}]: don't support tag: ${name}`, el.loc ? {
+		if (!(mode === "ui" ? UI_TAGS : FORM_TAGS).has(name)) {
+			internalCtx.rollupContext.error(`[${tagName}]: don't support tag: ${name}`, el.loc ? {
+				line: el.loc.start.line,
+				column: el.loc.start.column
+			} : void 0);
+			continue;
+		}
+		const allowedAttrs = new Set(COMMON_ATTRS);
+		const tagSpecific = TAG_ATTRS[name];
+		if (tagSpecific) for (const attr of tagSpecific) allowedAttrs.add(attr);
+		for (const key of Object.keys(cleanedArr)) {
+			if (key === "for" || key === "if") continue;
+			if (!allowedAttrs.has(key)) {
+				internalCtx.rollupContext.error(`[${tagName}]: tag '${name}' does not support attribute '${key}'`, el.loc ? {
 					line: el.loc.start.line,
 					column: el.loc.start.column
 				} : void 0);
 				continue;
 			}
+		}
+		if (mode === "form") {
+			const formType = detectFormType(name);
 			if (formType) typeTags.push(formType);
 		}
+		const _paramCtx = t.identifier("ctx");
 		const paramsObj = t.objectExpression(Object.entries(cleanedArr).filter(([key]) => key !== "for" && key !== "if").map(([key, value]) => {
 			const isDynamic = key.startsWith(":");
 			const paramName = isDynamic ? key.slice(1) : key;
 			if (paramName === "click") return t.objectProperty(t.identifier(paramName), simpleFn(String(value)));
-			return t.objectProperty(t.identifier(paramName), isDynamic ? simpleFn(String(value)) : typeof value === "boolean" ? t.booleanLiteral(value) : t.stringLiteral(value));
+			return t.objectProperty(t.identifier(paramName), isDynamic ? simpleFn(String(value)) : t.arrowFunctionExpression([_paramCtx], typeof value === "boolean" ? t.booleanLiteral(value) : t.stringLiteral(value)));
 		}));
-		const contentExpr = parseContent(el.content);
+		const contentExpr = mode === "form" ? parseContentForm(el.content) : parseContent(el.content);
 		const props = [
 			t.objectProperty(t.identifier("type"), t.stringLiteral(name)),
 			t.objectProperty(t.identifier("params"), paramsObj),
@@ -1141,73 +1248,50 @@ function simpleFn(expr) {
 	const body = dotAccess(expr, ctx);
 	return t.arrowFunctionExpression([ctx], body);
 }
-/** Extract root identifiers from an expression for dependency tracking */
-function extractIdentifiers(expr) {
-	const reserved = new Set([
-		"true",
-		"false",
-		"null",
-		"undefined",
-		"this",
-		"new",
-		"typeof",
-		"instanceof"
-	]);
-	const ids = /* @__PURE__ */ new Set();
-	const regex = /\b([a-zA-Z_$][\w$]*)\b/g;
-	let m;
-	while ((m = regex.exec(expr)) !== null) if (!reserved.has(m[1])) ids.add(m[1]);
-	return [...ids];
-}
-/** Generate new Computation((ctx) => expr, [deps]) */
-function arrowFn(expr) {
+/** Parse content for form mode: never creates Computation, uses plain functions */
+function parseContentForm(raw) {
 	const ctx = t.identifier("ctx");
-	const body = dotAccess(expr, ctx);
-	const evalFn = t.arrowFunctionExpression([ctx], body);
-	const deps = extractIdentifiers(expr).map((id) => {
-		const c = t.identifier("ctx");
-		return t.arrowFunctionExpression([c], dotAccess(id, c));
-	});
-	return t.newExpression(t.identifier("Computation"), [evalFn, t.arrayExpression(deps)]);
+	if (!raw.includes("{{ ")) return t.arrowFunctionExpression([ctx], t.stringLiteral(raw));
+	const parts = splitInterpolation(raw);
+	if (parts.length === 1 && parts[0].type === "expr") return simpleFn(parts[0].value);
+	const quasis = [];
+	const expressions = [];
+	for (const part of parts) if (part.type === "text") quasis.push(t.templateElement({
+		raw: part.value,
+		cooked: part.value
+	}));
+	else expressions.push(dotAccess(part.value, ctx));
+	quasis.push(t.templateElement({
+		raw: "",
+		cooked: ""
+	}, true));
+	const tpl = t.templateLiteral(quasis, expressions);
+	return t.arrowFunctionExpression([ctx], tpl);
 }
 /**
-* Parse content string, returns:
-* - t.stringLiteral for pure static text
-* - t.NewExpression (Computation) for content with {{ }} interpolation
-*
-* Supports:
-* - "Hello" → "Hello"
-* - "{{ a }}" → new Computation((ctx) => ctx[0].a, [ctx => ctx[0].a])
-* - "Hi {{ a }}" → new Computation((ctx) => `Hi ${ctx[0].a}`, [ctx => ctx[0].a])
-* - "{{ a.slice(1,2) }}" → new Computation((ctx) => ctx[0].a.slice(1,2), [ctx => ctx[0].a])
+* Parse content string, returns an arrow function (ctx) => result:
+* - "Hello" → (ctx) => "Hello"
+* - "{{ a }}" → (ctx) => ctx[0].a
+* - "Hi {{ a }}" → (ctx) => `Hi ${ctx[0].a}`
 */
 function parseContent(raw) {
-	if (!raw.includes("{{ ")) return t.stringLiteral(raw);
-	const parts = splitInterpolation(raw);
-	if (parts.length === 1 && parts[0].type === "expr") return arrowFn(parts[0].value);
 	const ctx = t.identifier("ctx");
+	if (!raw.includes("{{ ")) return t.arrowFunctionExpression([ctx], t.stringLiteral(raw));
+	const parts = splitInterpolation(raw);
+	if (parts.length === 1 && parts[0].type === "expr") return simpleFn(parts[0].value);
 	const quasis = [];
 	const expressions = [];
-	const allIds = /* @__PURE__ */ new Set();
 	for (const part of parts) if (part.type === "text") quasis.push(t.templateElement({
 		raw: part.value,
 		cooked: part.value
 	}));
-	else {
-		expressions.push(dotAccess(part.value, ctx));
-		for (const id of extractIdentifiers(part.value)) allIds.add(id);
-	}
+	else expressions.push(dotAccess(part.value, ctx));
 	quasis.push(t.templateElement({
 		raw: "",
 		cooked: ""
 	}, true));
 	const tpl = t.templateLiteral(quasis, expressions);
-	const evalFn = t.arrowFunctionExpression([ctx], tpl);
-	const deps = [...allIds].map((id) => {
-		const c = t.identifier("ctx");
-		return t.arrowFunctionExpression([c], dotAccess(id, c));
-	});
-	return t.newExpression(t.identifier("Computation"), [evalFn, t.arrayExpression(deps)]);
+	return t.arrowFunctionExpression([ctx], tpl);
 }
 function splitInterpolation(raw) {
 	const result = [];
@@ -1252,7 +1336,7 @@ function buildUIConfig(ctx, tagNode, tagName, mode) {
 //#endregion
 //#region src/transforms/transform/ui.ts
 async function Comp$3(ctx) {
-	ctx.impBody.push(t.importDeclaration([t.importSpecifier(t.identifier("__mcx__ui"), t.identifier("ui"))], t.stringLiteral("@mbler/mcx")), t.importDeclaration([t.importNamespaceSpecifier(t.identifier("__minecraft__ui"))], t.stringLiteral("@minecraft/server-ui")));
+	ctx.impBody.push(t.importDeclaration([t.importSpecifier(t.identifier("__mcx__ui"), t.identifier("ui")), t.importSpecifier(t.identifier("Computation"), t.identifier("Computation"))], t.stringLiteral("@mbler/mcx")), t.importDeclaration([t.importNamespaceSpecifier(t.identifier("__minecraft__ui"))], t.stringLiteral("@minecraft/server-ui")));
 	const tagNode = ctx.ctx.compiledCode.strLoc.UI;
 	if (!tagNode || tagNode.name !== "Ui") throw new Error("[UI Component]: why did parent not verify?");
 	const configObj = buildUIConfig(ctx, tagNode, "Ui", "ui");
@@ -1447,12 +1531,14 @@ var RunScript = class {
 	_context;
 	_module;
 	_pluginContext;
-	constructor(filePath = "<repl>", module = "cjs", pluginContext) {
+	_moduleResolver;
+	constructor(filePath = "<repl>", module = "cjs", pluginContext, moduleResolver) {
 		this.filePath = filePath;
 		this.module = module;
 		this.pluginContext = pluginContext;
 		this._module = new Module.Module(this.filePath);
 		this._pluginContext = pluginContext || {};
+		this._moduleResolver = moduleResolver;
 		this._context = this.getContext(this._pluginContext);
 	}
 	/**
@@ -1504,15 +1590,21 @@ var RunScript = class {
 			id: this.filePath
 		};
 		const originalRequire = Module.createRequire ? Module.createRequire(this.filePath) : __require;
-		const restrictedRequire = new Proxy(originalRequire, { apply(target, thisArg, args) {
+		const contextRequire = new Proxy(originalRequire, { apply: (target, thisArg, args) => {
 			const id = args[0];
 			if (typeof id === "string" && BLOCKED_MODULES.has(id)) throw new Error(`[mcx component]: require('${id}') is not allowed in component scripts`);
+			if (this._moduleResolver) try {
+				return Reflect.apply(target, thisArg, args);
+			} catch {
+				const currentImporter = context.module?.filename || this.filePath;
+				return this._moduleResolver.ensureModule(id, currentImporter, context, void 0);
+			}
 			return Reflect.apply(target, thisArg, args);
 		} });
 		Object.assign(context, {
 			exports,
 			module,
-			require: restrictedRequire,
+			require: contextRequire,
 			global: context
 		});
 		return vm.createContext(context);
@@ -1733,23 +1825,7 @@ async function compileComponent(compiledCode, ctx) {
 	const src = compiledCode.strLoc.script;
 	const exportSources = collectExportSources(src);
 	checkComponentImports(exportSources, compiledCode.File);
-	const scriptRunResult = await new RunScript(compiledCode.File, "esm").run(src, 0, (data, setData) => {
-		if (setData && data.type == "CallExpression" && data.callee.type == "Identifier" && data.arguments.length == 1 && data.arguments[0]?.type == "CallExpression" && data.arguments[0].callee.type == "Identifier" && data.arguments[0].callee.name == "require") {
-			const arg = data.arguments[0].arguments[0];
-			if (arg && arg.type == "StringLiteral") {
-				if (/^.+?\.(png|svg|jpg|jpeg|gif)$/.test(arg.value)) {
-					const imageComponentRequire = t.memberExpression(t.callExpression(t.identifier("require"), [t.stringLiteral("@mbler/mcx-component")]), t.identifier({
-						png: "PNGImageComponent",
-						svg: "SVGImageComponent",
-						jpg: "JPGImageComponent",
-						jpeg: "JPGImageComponent",
-						gif: "GIFImageComponent"
-					}[path.extname(arg.value).slice(1)]));
-					setData(t.newExpression(imageComponentRequire, [t.callExpression(t.memberExpression(t.callExpression(t.identifier("require"), [t.stringLiteral("node:path")]), t.identifier("join")), [t.stringLiteral(path.dirname(compiledCode.File)), arg])]));
-				}
-			}
-		}
-	});
+	const scriptRunResult = await new RunScript(compiledCode.File, "esm", void 0, ctx.moduleResolver).run(src, 0);
 	if (!component) throw new Error("[component internal error]: compile component: mcx is not component: filePath: " + compiledCode.File);
 	if (typeof scriptRunResult !== "object") throw new Error("[component compile error]: exec code: mcx export type is not object");
 	for (const i of Object.entries(component)) {
@@ -1847,14 +1923,10 @@ async function _transform(ctx) {
 
 //#endregion
 //#region src/transforms/index.ts
-function createErrorProxy(err, id) {
-	if (err instanceof Error) return {
-		...err,
-		message: `${err.message} (At ${id})`
-	};
-	else return { message: String(err) };
+function toMcxError(err, id) {
+	return { message: err instanceof Error ? `${err.message} (At ${id})` : String(err) };
 }
-async function transform(code, cache, id, context, opt, output) {
+async function transform(code, cache, id, context, opt, output, moduleResolver) {
 	try {
 		const scriptTag = code.raw.find((node) => {
 			return node.name == "script";
@@ -1873,18 +1945,149 @@ async function transform(code, cache, id, context, opt, output) {
 				param: [],
 				body: []
 			},
-			output
+			output,
+			...moduleResolver ? { moduleResolver } : {}
 		});
 	} catch (err) {
-		context.error(createErrorProxy(err, id));
+		context.error(toMcxError(err, id));
 		return "";
 	}
 }
 
+//#endregion
+//#region src/compile-mcx/compiler/resolve.ts
+const RESOLVE_EXTS = [
+	".ts",
+	".mts",
+	".cts",
+	".js",
+	".mjs",
+	".cjs",
+	""
+];
+function resolveFileSync(filePath) {
+	for (const ext of RESOLVE_EXTS) try {
+		const fullPath = filePath + ext;
+		readFileSync(fullPath);
+		return fullPath;
+	} catch {}
+	if (filePath.endsWith(sep) || !extname(filePath)) for (const ext of RESOLVE_EXTS) try {
+		const fullPath = filePath + "/index" + ext;
+		readFileSync(fullPath);
+		return fullPath;
+	} catch {}
+	return null;
+}
+async function resolveFileAsync(filePath) {
+	for (const ext of RESOLVE_EXTS) try {
+		const fullPath = filePath + ext;
+		await readFile(fullPath, "utf-8");
+		return fullPath;
+	} catch {}
+	if (filePath.endsWith(sep) || !extname(filePath)) for (const ext of RESOLVE_EXTS) try {
+		const fullPath = filePath + "/index" + ext;
+		await readFile(fullPath, "utf-8");
+		return fullPath;
+	} catch {}
+	return null;
+}
+function resolveSync(specifier, importerPath) {
+	if (specifier.startsWith(".") || specifier.startsWith("/")) return resolveFileSync(resolve(dirname(importerPath), specifier));
+	try {
+		return __require.resolve(specifier, { paths: [dirname(importerPath)] });
+	} catch {
+		return null;
+	}
+}
+
+//#endregion
+//#region src/mcx-component/moduleResolver.ts
+var ModuleResolver = class {
+	cache;
+	loadingModules = /* @__PURE__ */ new Set();
+	transformFile;
+	constructor(cache, transformFile) {
+		this.cache = cache;
+		this.transformFile = transformFile;
+	}
+	getCache() {
+		return this.cache;
+	}
+	clear() {
+		this.cache.clear();
+		this.loadingModules.clear();
+	}
+	ensureModule(specifier, importerPath, context, nativeRequire) {
+		if (nativeRequire) try {
+			return nativeRequire(specifier);
+		} catch {}
+		const resolved = resolveSync(specifier, importerPath);
+		if (!resolved) throw new Error(`[mcx component]: cannot resolve '${specifier}' from '${importerPath}'`);
+		if (this.cache.has(resolved)) return this.executeInContext(resolved, context);
+		if (this.loadingModules.has(resolved)) return context.exports;
+		this.loadingModules.add(resolved);
+		try {
+			const code = readFileSync(resolved, "utf-8");
+			const compiled = this.transformFile(code, resolved);
+			this.cache.set(resolved, compiled);
+			return this.executeInContext(resolved, context);
+		} finally {
+			this.loadingModules.delete(resolved);
+		}
+	}
+	executeInContext(resolvedPath, context) {
+		const compiled = this.cache.get(resolvedPath);
+		const script = new vm.Script(compiled, { filename: resolvedPath });
+		const savedExports = context.exports;
+		const savedModule = context.module;
+		const childExports = {};
+		const childModule = {
+			exports: childExports,
+			filename: resolvedPath,
+			path: dirname(resolvedPath),
+			id: resolvedPath
+		};
+		context.exports = childExports;
+		context.module = childModule;
+		try {
+			script.runInContext(context);
+			return context.exports;
+		} finally {
+			context.exports = savedExports;
+			context.module = savedModule;
+		}
+	}
+};
+function createImageTransformCode(absolutePath, ext) {
+	const className = {
+		".png": "PNGImageComponent",
+		".svg": "SVGImageComponent",
+		".jpg": "JPGImageComponent",
+		".jpeg": "JPGImageComponent",
+		".gif": "GIFImageComponent"
+	}[ext.toLowerCase()];
+	if (!className) throw new Error(`[mcx component]: unsupported image extension '${ext}' for '${absolutePath}'`);
+	return [
+		`Object.defineProperty(exports, '__esModule', { value: true });`,
+		`var { ${className} } = require('@mbler/mcx-component');`,
+		`var path = require('node:path');`,
+		`exports.default = new ${className}(${JSON.stringify(absolutePath)});`
+	].join("\n");
+}
+
 //#endregion
 //#region src/compile-mcx/compiler/main.ts
+const IMAGE_EXTS = new Set([
+	".png",
+	".svg",
+	".jpg",
+	".jpeg",
+	".gif"
+]);
 function createMcxPlugin(opt, output) {
 	let cache = /* @__PURE__ */ new Map();
+	let moduleTransformCache;
+	let moduleResolver;
 	let tsconfig;
 	try {
 		const configResult = ts.readConfigFile(opt.tsconfigPath, (path) => {
@@ -1911,29 +2114,6 @@ function createMcxPlugin(opt, output) {
 			errors: []
 		};
 	}
-	const resolveExtensions = [
-		"",
-		".ts",
-		".mts",
-		".cts",
-		".js",
-		".mjs",
-		".cjs"
-	];
-	const indexExtensions = resolveExtensions.map((ext) => "/index" + ext);
-	async function tryResolvePath(filePath) {
-		for (const idxExt of indexExtensions) try {
-			const fullPath = filePath + idxExt;
-			await readFile(fullPath, "utf-8");
-			return fullPath;
-		} catch {}
-		for (const ext of resolveExtensions) try {
-			const fullPath = filePath + ext;
-			await readFile(fullPath, "utf-8");
-			return fullPath;
-		} catch {}
-		return null;
-	}
 	async function resolvePackageExports(pkgDir, subPath, pkgJson) {
 		const exports = pkgJson.exports;
 		if (exports) {
@@ -1967,7 +2147,7 @@ function createMcxPlugin(opt, output) {
 			if (i.dir.startsWith(".") || i.root) {
 				if (imp) {
 					const baseDir = path.dirname(imp);
-					const resolved = await tryResolvePath(path.join(baseDir, id));
+					const resolved = await resolveFileAsync(path.join(baseDir, id));
 					if (resolved) return resolved;
 				}
 				return null;
@@ -1992,9 +2172,9 @@ function createMcxPlugin(opt, output) {
 				if (subPath) {
 					const fromExports = await resolvePackageExports(d, subPath, pkgJson);
 					if (fromExports) return fromExports;
-					const fromDist = await tryResolvePath(path.join(d, "./dist", subPath));
+					const fromDist = await resolveFileAsync(path.join(d, "./dist", subPath));
 					if (fromDist) return fromDist;
-					const fromRoot = await tryResolvePath(path.join(d, subPath));
+					const fromRoot = await resolveFileAsync(path.join(d, subPath));
 					if (fromRoot) return fromRoot;
 					return null;
 				}
@@ -2020,31 +2200,60 @@ function createMcxPlugin(opt, output) {
 				}
 				compileData.setFilePath(id);
 				return {
-					code: await transform(compileData, cache, id, this, opt, output),
-					map: opt.sourcemap ? magic.generateMap({
+					code: await transform(compileData, cache, id, this, opt, output, moduleResolver),
+					...opt.sourcemap ? { map: magic.generateMap({
 						hires: true,
 						source: id
-					}) : void 0
+					}) } : {}
 				};
-			} else if (tsRegex.test(id)) return {
-				code: ts.transpileModule(code, {
-					compilerOptions: tsconfig.options,
-					fileName: id
-				}).outputText,
-				map: opt.sourcemap ? magic.generateMap({
+			}
+			const cached = moduleTransformCache.get(id);
+			if (cached) return {
+				code: cached,
+				...opt.sourcemap ? { map: magic.generateMap({
 					hires: true,
 					source: id
-				}) : void 0
+				}) } : {}
 			};
+			let compiledCode = null;
+			if (tsRegex.test(id)) compiledCode = ts.transpileModule(code, {
+				compilerOptions: tsconfig.options,
+				fileName: id
+			}).outputText;
+			else {
+				const fileExt = extname(id).toLowerCase();
+				if (IMAGE_EXTS.has(fileExt)) compiledCode = createImageTransformCode(id, fileExt);
+			}
+			if (compiledCode !== null) {
+				moduleTransformCache.set(id, compiledCode);
+				return {
+					code: compiledCode,
+					...opt.sourcemap ? { map: magic.generateMap({
+						hires: true,
+						source: id
+					}) } : {}
+				};
+			}
 			return null;
 		},
 		async buildEnd() {
 			cache.clear();
+			moduleResolver?.clear();
 			await generateItemTextureJson(output);
 			clearCachedOptions();
 		},
 		buildStart() {
 			cache = /* @__PURE__ */ new Map();
+			moduleTransformCache = /* @__PURE__ */ new Map();
+			moduleResolver = new ModuleResolver(moduleTransformCache, (fileCode, fileId) => {
+				const fileExt = extname(fileId).toLowerCase();
+				if (fileExt === ".ts" || fileExt === ".mts" || fileExt === ".cts") return ts.transpileModule(fileCode, {
+					compilerOptions: tsconfig.options,
+					fileName: fileId
+				}).outputText;
+				if (IMAGE_EXTS.has(fileExt)) return createImageTransformCode(fileId, fileExt);
+				return fileCode;
+			});
 		}
 	};
 }