@geajs/vite-plugin 1.2.0 → 1.2.2

package/dist/index.mjs

@@ -3,7 +3,7 @@ import _generate from "@babel/generator";
 import * as t from "@babel/types";
 import { parse } from "@babel/parser";
 import { appendToBody, id, js, jsAll, jsBlockBody, jsClassProp, jsExpr, jsImport, jsMethod, jsObjectExpr, jsPrivateProp, num, str, tpl } from "eszter";
-import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { existsSync, readFileSync, statSync, writeFileSync } from "node:fs";
 import { dirname, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 //#region src/utils/babel-interop.ts
@@ -1126,6 +1126,7 @@ function buildComponentPropsExpression(jsxElement, imports, componentInstances,
 		else if (t.isJSXExpressionContainer(attr.value) && !t.isJSXEmptyExpression(attr.value.expression)) {
 			const expr = attr.value.expression;
 			propValue = transformExpression(expr);
+			if (propValue && t.isTemplateLiteral(propValue) && propValue.quasis.length === 2 && propValue.quasis[0].value.raw === "" && propValue.quasis[1].value.raw === "" && propValue.expressions.length === 1) propValue = propValue.expressions[0];
 			if (propValue && (/^on[A-Z]/.test(propName) || DOM_EVENT_RE.test(propName)) && t.isMemberExpression(propValue)) {
 				const argsId = t.identifier("args");
 				propValue = t.arrowFunctionExpression([t.restElement(argsId)], t.callExpression(t.cloneNode(propValue, true), [t.spreadElement(argsId)]));
@@ -1734,6 +1735,12 @@ function collectComponentTags(node, imports, instanceTags, inMapCallback = false
 		if (tag && isComponentTag(tag) && imports.has(tag)) {
 			if (!inMapCallback) instanceTags.push(tag);
 		}
+		for (const attr of node.openingElement.attributes) {
+			if (!t.isJSXAttribute(attr) || !attr.value || !t.isJSXExpressionContainer(attr.value)) continue;
+			if (t.isJSXEmptyExpression(attr.value.expression)) continue;
+			const attrExpr = attr.value.expression;
+			visitExpr(attrExpr, inMapCallback);
+		}
 		node.children.forEach((c) => {
 			if (t.isJSXElement(c)) collectComponentTags(c, imports, instanceTags, inMapCallback);
 			else if (t.isJSXFragment(c)) collectComponentTags(c, imports, instanceTags, inMapCallback);
@@ -2276,7 +2283,7 @@ function processChildren(children, parts, ctx, elementPath, dcCursor, directChil
 					pushString(parts, "");
 				}
 				if (expressionMayBeFalsy(rawExpr)) expr = t.logicalExpression("||", expr, t.stringLiteral(""));
-				const safeExpr = childCallInfo || isChildrenPropAccess(rawExpr) || expressionContainsJSX(rawExpr) || ctx.inMapCallback || callsJSXReturningProperty(rawExpr, ctx.classBody) ? expr : jsExpr`geaEscapeHtml(String(${expr}))`;
+				const safeExpr = childCallInfo || isChildrenPropAccess(rawExpr) || expressionContainsJSX(rawExpr) || ctx.inMapCallback || callsJSXReturningProperty(rawExpr, ctx.classBody) ? expr : jsExpr`geaEscapeHtml(${expr})`;
 				parts.push({
 					type: "expression",
 					value: safeExpr
@@ -9687,7 +9694,9 @@ function transformRemainingJSX(ast, imports) {
 			const classMethod = path.findParent((p) => t.isClassMethod(p.node));
 			if (classMethod && t.isClassMethod(classMethod.node) && t.isIdentifier(classMethod.node.key) && classMethod.node.key.name === "template") return;
 			try {
-				path.replaceWith(transformJSXToTemplate(path.node, { imports }));
+				let result = transformJSXToTemplate(path.node, { imports });
+				if (t.isTemplateLiteral(result) && result.quasis.length === 2 && result.quasis[0].value.raw === "" && result.quasis[1].value.raw === "" && result.expressions.length === 1 && path.parent && t.isArrowFunctionExpression(path.parent) && path.parent.body === path.node) result = result.expressions[0];
+				path.replaceWith(result);
 			} catch (err) {
 				console.warn("[gea] Failed to transform JSX element:", err instanceof Error ? err.message : err);
 			}
@@ -9717,39 +9726,41 @@ const legacyShouldProxyDep = (p) => /\.(js|ts)$/.test(p) && !p.match(/(store|sta
 * Returns `true` when HMR code was added, `false` otherwise (no component
 * class, or the file contains a `gea-auto-register plugin` comment).
 */
-function injectHMR(ast, componentClassName, componentImports, componentImportsUsedAsTags, isDefaultExport, hmrImportSource = "virtual:gea-hmr", shouldProxyDep) {
+function injectHMR(ast, componentClassNames, defaultExportClassName, componentImports, componentImportsUsedAsTags, hmrImportSource = "virtual:gea-hmr", shouldProxyDep, shouldSkipDepAccept) {
 	if (hasAutoRegisterComment(ast)) return false;
+	if (componentClassNames.length === 0) return false;
 	const hmrStmts = [];
-	if (componentClassName) {
-		ensureImport(ast, hmrImportSource, "handleComponentUpdate");
-		ensureImport(ast, hmrImportSource, "registerHotModule");
-		ensureImport(ast, hmrImportSource, "registerComponentInstance");
-		ensureImport(ast, hmrImportSource, "unregisterComponentInstance");
-		const proxyDep = shouldProxyDep ?? legacyShouldProxyDep;
-		if (rewriteComponentDeps(ast, componentImports, proxyDep).length > 0) ensureImport(ast, hmrImportSource, "createHotComponentProxy");
-		const modExports = isDefaultExport ? t.objectExpression([t.objectProperty(t.identifier("default"), t.identifier(componentClassName))]) : t.objectExpression([t.objectProperty(t.identifier(componentClassName), t.identifier(componentClassName), false, true)]);
-		hmrStmts.push(js`const __moduleExports = ${modExports};`);
-		hmrStmts.push(js`registerHotModule(${jsExpr`${importMeta()}.url`}, __moduleExports);`);
-		hmrStmts.push(js`
-      ${hot()}.accept((newModule) => {
-        const __updatedModule = newModule || __moduleExports;
-        registerHotModule(${jsExpr`${importMeta()}.url`}, __updatedModule);
-        handleComponentUpdate(${jsExpr`${importMeta()}.url`}, __updatedModule);
-      });
-    `);
-		hmrStmts.push(...createAccepts(componentImports, proxyDep));
-		hmrStmts.push(js`const __origCreated = ${id(componentClassName)}.prototype.created;`);
-		hmrStmts.push(js`${id(componentClassName)}.prototype.created = function(__geaProps) {
+	ensureImport(ast, hmrImportSource, "handleComponentUpdate");
+	ensureImport(ast, hmrImportSource, "registerHotModule");
+	ensureImport(ast, hmrImportSource, "registerComponentInstance");
+	ensureImport(ast, hmrImportSource, "unregisterComponentInstance");
+	const proxyDep = shouldProxyDep ?? legacyShouldProxyDep;
+	if (rewriteComponentDeps(ast, componentImports, proxyDep).length > 0) ensureImport(ast, hmrImportSource, "createHotComponentProxy");
+	const exportProperties = [];
+	for (const cn of componentClassNames) if (cn === defaultExportClassName) exportProperties.push(t.objectProperty(t.identifier("default"), t.identifier(cn)));
+	else exportProperties.push(t.objectProperty(t.identifier(cn), t.identifier(cn), false, true));
+	hmrStmts.push(js`const __moduleExports = ${t.objectExpression(exportProperties)};`);
+	hmrStmts.push(js`registerHotModule(${jsExpr`${importMeta()}.url`}, __moduleExports);`);
+	const acceptBody = [t.variableDeclaration("const", [t.variableDeclarator(t.identifier("__updatedModule"), t.logicalExpression("||", t.identifier("newModule"), t.identifier("__moduleExports")))]), t.expressionStatement(t.callExpression(t.identifier("registerHotModule"), [t.memberExpression(importMeta(), t.identifier("url")), t.identifier("__updatedModule")]))];
+	for (const cn of componentClassNames) {
+		const key = cn === defaultExportClassName ? "default" : cn;
+		acceptBody.push(t.expressionStatement(t.callExpression(t.identifier("handleComponentUpdate"), [t.memberExpression(importMeta(), t.identifier("url")), t.objectExpression([t.objectProperty(t.identifier("default"), t.memberExpression(t.identifier("__updatedModule"), t.identifier(key)))])])));
+	}
+	hmrStmts.push(t.expressionStatement(t.callExpression(t.memberExpression(hot(), t.identifier("accept")), [t.arrowFunctionExpression([t.identifier("newModule")], t.blockStatement(acceptBody))])));
+	hmrStmts.push(...createAccepts(componentImports, proxyDep, shouldSkipDepAccept));
+	for (const cn of componentClassNames) {
+		const suffix = componentClassNames.length > 1 ? `_${cn}` : "";
+		hmrStmts.push(js`const ${id("__origCreated" + suffix)} = ${id(cn)}.prototype.created;`);
+		hmrStmts.push(js`${id(cn)}.prototype.created = function(__geaProps) {
         registerComponentInstance(this.constructor.name, this);
-        return __origCreated.call(this, __geaProps);
+        return ${id("__origCreated" + suffix)}.call(this, __geaProps);
       };`);
-		hmrStmts.push(js`const __origDispose = ${id(componentClassName)}.prototype.dispose;`);
-		hmrStmts.push(js`${id(componentClassName)}.prototype.dispose = function() {
+		hmrStmts.push(js`const ${id("__origDispose" + suffix)} = ${id(cn)}.prototype.dispose;`);
+		hmrStmts.push(js`${id(cn)}.prototype.dispose = function() {
         unregisterComponentInstance(this.constructor.name, this);
-        return __origDispose.call(this);
+        return ${id("__origDispose" + suffix)}.call(this);
       };`);
 	}
-	if (hmrStmts.length === 0) return false;
 	ast.program.body.push(t.ifStatement(hot(), t.blockStatement(hmrStmts)));
 	return true;
 }
@@ -9791,10 +9802,11 @@ function rewriteComponentDeps(ast, imports, proxyDep) {
 * add `hot.accept(dep, () => hot.invalidate())` so the page reloads when
 * stores/utils change.
 */
-function createAccepts(imports, proxyDep) {
+function createAccepts(imports, proxyDep, shouldSkip) {
 	const stmts = [];
 	for (const p of imports) {
 		if (!isRelative(p)) continue;
+		if (shouldSkip?.(p)) continue;
 		if (!proxyDep(p)) stmts.push(js`${hot()}.accept(${p}, ${invalidateCb()});`);
 	}
 	return stmts;
@@ -9855,6 +9867,14 @@ function isComponentImportSource(source) {
 	if (source.startsWith("node:")) return false;
 	return true;
 }
+/**
+* In dev mode, convert relative store imports (e.g. `import { router } from '../router'`)
+* to `const { router } = await import('../router')` placed after all class declarations.
+*
+* This breaks circular-dependency TDZ during HMR: classes are fully initialized
+* before the store module is loaded, so the store can safely import the component
+* classes back without hitting the temporal dead zone.
+*/
 function transform(ctx) {
 	const { sourceFile, code, isServe, isSSR, hmrImportSource } = ctx;
 	if (!(code.includes("<") && code.includes(">"))) return null;
@@ -9880,7 +9900,6 @@ function transform(ctx) {
 		let transformed = false;
 		const componentImportSet = /* @__PURE__ */ new Set();
 		const componentImportsUsedAsTags = /* @__PURE__ */ new Set();
-		let isDefaultExport = false;
 		imports.forEach((source) => {
 			if (!isComponentImportSource(source)) return;
 			componentImportSet.add(source);
@@ -9890,9 +9909,6 @@ function transform(ctx) {
 		const knownComponentImports = /* @__PURE__ */ new Set();
 		const namedImportSources = /* @__PURE__ */ new Map();
 		traverse(ast, {
-			ExportDefaultDeclaration() {
-				isDefaultExport = true;
-			},
 			ImportDeclaration(path) {
 				const source = path.node.source.value;
 				if (!isComponentImportSource(source)) return;
@@ -9941,7 +9957,9 @@ function transform(ctx) {
 				}
 			} else transformed = transformNonComponentJSX(ast, imports);
 		}
-		if (isServe && componentClassName) {
+		if (isServe && componentClassNames.length > 0) {
+			let defaultExportClassName = null;
+			for (const node of ast.program.body) if (t.isExportDefaultDeclaration(node) && t.isClassDeclaration(node.declaration) && node.declaration.id) defaultExportClassName = node.declaration.id.name;
 			const shouldProxyDep = (source) => {
 				if (!source.startsWith(".")) return false;
 				const resolved = ctx.resolveImportPath(sourceFile, source);
@@ -9950,7 +9968,13 @@ function transform(ctx) {
 				if (ctx.isComponentModule(resolved)) return true;
 				return false;
 			};
-			if (injectHMR(ast, componentClassName, componentImports, componentImportsUsedAsTags, isDefaultExport, hmrImportSource, shouldProxyDep)) transformed = true;
+			const shouldSkipDepAccept = (source) => {
+				if (!source.startsWith(".")) return false;
+				const resolved = ctx.resolveImportPath(sourceFile, source);
+				if (!resolved) return false;
+				return ctx.isStoreModule(resolved);
+			};
+			if (injectHMR(ast, componentClassNames, defaultExportClassName, componentImports, componentImportsUsedAsTags, hmrImportSource, shouldProxyDep, shouldSkipDepAccept)) transformed = true;
 		}
 		if (!transformed) return null;
 		ensureGeaCompilerSymbolImports(ast);
@@ -10029,6 +10053,13 @@ export function reconcile(oldC, newC) {
 }
 `;
 const HMR_RUNTIME_SOURCE = `
+var GEA_ELEMENT = Symbol.for('gea.element');
+var GEA_RENDERED = Symbol.for('gea.rendered');
+var GEA_CLEANUP_BINDINGS = Symbol.for('gea.component.cleanupBindings');
+var GEA_TEARDOWN_SELF_LISTENERS = Symbol.for('gea.component.teardownSelfListeners');
+var GEA_CHILD_COMPONENTS = Symbol.for('gea.childComponents');
+var GEA_BINDINGS = Symbol.for('gea.bindings');
+var GEA_SELF_LISTENERS = Symbol.for('gea.selfListeners');
 var hot = import.meta.hot;
 var componentInstances = hot && hot.data && hot.data.componentInstances || new Map();
 if (hot) hot.data.componentInstances = componentInstances;
@@ -10340,7 +10371,7 @@ function geaPlugin() {
 				}
 			}
 			if (/\bclass\s+Component\s+extends\s+Store\b/.test(code)) return null;
-			return transform({
+			const result = transform({
 				sourceFile: cleanId,
 				code,
 				isServe: isServeCommand,
@@ -10352,8 +10383,50 @@ function geaPlugin() {
 				registerStoreModule: (fp) => storeModules.add(fp),
 				registerComponentModule: (fp) => componentModules.add(fp)
 			});
+			if (result) return result;
+			if (isServeCommand && !isSSR) {
+				const componentDeps = findComponentDeps(code, cleanId);
+				if (componentDeps.length > 0) return {
+					code: code + `\nif (import.meta.hot) {\n${componentDeps.map((dep) => `  import.meta.hot.accept('${dep}', () => {});`).join("\n")}\n}\n`,
+					map: null
+				};
+			}
+			return null;
 		}
 	};
 }
+function resolveToFile(base) {
+	const exts = [
+		".ts",
+		".tsx",
+		".js",
+		".jsx"
+	];
+	const indexFiles = exts.map((ext) => resolve(base, "index" + ext));
+	const candidates = [
+		base,
+		...exts.map((ext) => base + ext),
+		...indexFiles
+	];
+	for (const c of candidates) try {
+		if (existsSync(c) && statSync(c).isFile()) return c;
+	} catch {}
+	return null;
+}
+function findComponentDeps(code, filePath) {
+	const deps = [];
+	const importRegex = /import\s+(?:[\w{},\s*]+)\s+from\s+['"](\.[^'"]+)['"]/g;
+	let match;
+	while ((match = importRegex.exec(code)) !== null) {
+		const source = match[1];
+		const resolved = resolveToFile(resolve(dirname(filePath), source));
+		if (!resolved) continue;
+		try {
+			const depCode = readFileSync(resolved, "utf8");
+			if (/class\s+\w+\s+extends\s+Component\b/.test(depCode) && depCode.includes("<") && depCode.includes(">")) deps.push(source);
+		} catch {}
+	}
+	return deps;
+}
 //#endregion
 export { geaPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geajs/vite-plugin",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Vite plugin for Gea framework - JSX/TSX transform, reactivity, HMR",
   "type": "module",
   "main": "./dist/index.mjs",