@jay-framework/compiler-jay-html 0.16.3 → 0.16.4

package/dist/index.js

@@ -13410,6 +13410,9 @@ function parseConditionForSlowRender(expr, slowContext, vars) {
     return { type: "runtime", code: fragment, simplifiedExpr: expr };
   }
 }
+function kebabToCamel(str2) {
+  return str2.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
 function isConditional(node2) {
   return node2.nodeType !== NodeType.TEXT_NODE && node2.hasAttribute("if");
 }
@@ -13506,9 +13509,13 @@ function getComponentName(tagName, importedSymbols, headlessContractNames) {
     if (headlessContractNames?.has(componentName.toLowerCase())) {
       return { name: componentName, kind: "headless-instance" };
     }
+    const camelName = kebabToCamel(componentName);
     if (importedSymbols.has(componentName)) {
       return { name: componentName, kind: "headful" };
     }
+    if (camelName !== componentName && importedSymbols.has(camelName)) {
+      return { name: camelName, kind: "headful" };
+    }
     return { name: componentName, kind: "unknown" };
   }
   if (importedSymbols.has(tagName)) {
@@ -19598,6 +19605,15 @@ function renderHydrateElement(element, context) {
     context.headlessContractNames
   );
   if (componentMatch !== null && componentMatch.kind === "headless-instance") {
+    const contractNameLower = componentMatch.name.toLowerCase();
+    const isInstanceImport = context.headlessImports.some(
+      (h) => h.contractName === contractNameLower
+    );
+    if (!isInstanceImport) {
+      return new RenderFragment("", Imports.none(), [
+        `<jay:${componentMatch.name}> cannot be used as an inline element because it was imported with a key. Keyed headless components merge their ViewState into the page — remove the key to use it as an inline instance.`
+      ]);
+    }
     return renderHydrateHeadlessInstance(element, context, renderContext, componentMatch.name);
   }
   if (isConditional(element) && conditionIsInteractive(element.getAttribute("if"), context.interactivePaths)) {
@@ -19980,7 +19996,7 @@ function renderHydrateHeadlessInstance(element, context, renderContext, contract
   };
   const adoptRenderContext = buildRenderContext(adoptItemContext);
   let adoptInlineBody;
-  if (childNodes.length === 1) {
+  if (childNodes.length === 1 && !isForEach(childNodes[0]) && !isConditional(childNodes[0])) {
     adoptInlineBody = renderHydrateElementContent(
       childNodes[0],
       adoptItemContext,
@@ -19989,6 +20005,8 @@ function renderHydrateHeadlessInstance(element, context, renderContext, contract
       true
       // forceAdopt
     );
+  } else if (childNodes.length === 1) {
+    adoptInlineBody = renderHydrateNode(childNodes[0], adoptItemContext);
   } else {
     const wrapperCoord = childScopeId ? `${childScopeId}/0` : "0";
     const adoptChildContext = {
@@ -20375,7 +20393,7 @@ function renderHydrate(types2, body, importStatements, elementType, preRenderTyp
   const importedRefNameToRef = processImportedHeadless(headlessImports);
   const { importedSymbols } = processImportedComponents(importStatements);
   const instanceHeadlessImports = headlessImports.filter((h) => !h.key);
-  const headlessContractNames = new Set(instanceHeadlessImports.map((h) => h.contractName));
+  const headlessContractNames = new Set(headlessImports.map((h) => h.contractName));
   assignCoordinates(body, { headlessContractNames });
   const context = {
     variables,
@@ -20708,6 +20726,14 @@ function renderNode(node2, context) {
     );
     if (componentMatch !== null) {
       if (componentMatch.kind === "headless-instance") {
+        const keyedImport = newContext.headlessImports.find(
+          (h) => h.key && h.contractName === componentMatch.name.toLowerCase()
+        );
+        if (keyedImport) {
+          return new RenderFragment("", Imports.none(), [
+            `<jay:${componentMatch.name}> cannot be used as an inline element because it was imported with key="${keyedImport.key}". Keyed headless components merge their ViewState into the page — use {${keyedImport.key}.fieldName} bindings instead, or remove the key to use it as an inline instance.`
+          ]);
+        }
         return renderHeadlessInstance(htmlElement, newContext, componentMatch.name);
       }
       return renderNestedComponent(htmlElement, newContext, componentMatch.name);
@@ -22341,7 +22367,11 @@ function renderServerHeadlessInstance(element, context, contractName) {
   const renderedChildren = mergeServerFragments(
     childNodes.map((child) => {
       if (child.nodeType === NodeType.ELEMENT_NODE) {
-        return renderServerElementContent(child, instanceContext, {
+        const el = child;
+        if (isForEach(el) || isConditional(el)) {
+          return renderServerElement(el, instanceContext);
+        }
+        return renderServerElementContent(el, instanceContext, {
           isRoot: true
         });
       }
@@ -30053,25 +30083,22 @@ function discoverHeadlessInstances(preRenderedJayHtml) {
         }
       }
       if (!insidePreservedForEach) {
-        const hasUnresolvedProps = Object.values(props).some((v) => hasBindings(v));
-        if (!hasUnresolvedProps) {
-          let ref = element.getAttribute("ref");
-          if (!ref) {
-            const prefix = buildCoordinatePrefix(element);
-            const counterKey = [...prefix, contractName].join("/");
-            const localIndex = coordinateCounters.get(counterKey) ?? 0;
-            coordinateCounters.set(counterKey, localIndex + 1);
-            ref = `AR${localIndex}`;
-            element.setAttribute("ref", ref);
-          }
-          const coordBase = element.getAttribute("jay-coordinate-base");
-          const coordinate = coordBase ? coordBase.split("/") : [...buildCoordinatePrefix(element), `${contractName}:${ref}`];
-          instances.push({
-            contractName,
-            props,
-            coordinate
-          });
+        let ref = element.getAttribute("ref");
+        if (!ref) {
+          const prefix = buildCoordinatePrefix(element);
+          const counterKey = [...prefix, contractName].join("/");
+          const localIndex = coordinateCounters.get(counterKey) ?? 0;
+          coordinateCounters.set(counterKey, localIndex + 1);
+          ref = `AR${localIndex}`;
+          element.setAttribute("ref", ref);
         }
+        const coordBase = element.getAttribute("jay-coordinate-base");
+        const coordinate = coordBase ? coordBase.split("/") : [...buildCoordinatePrefix(element), `${contractName}:${ref}`];
+        instances.push({
+          contractName,
+          props,
+          coordinate
+        });
       } else {
         const innerForEach = forEachContexts[forEachContexts.length - 1];
         if (innerForEach) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/compiler-jay-html",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "description": "",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -34,12 +34,12 @@
   },
   "author": "",
   "dependencies": {
-    "@jay-framework/compiler-analyze-exported-types": "^0.16.3",
-    "@jay-framework/compiler-shared": "^0.16.3",
-    "@jay-framework/component": "^0.16.3",
-    "@jay-framework/logger": "^0.16.3",
-    "@jay-framework/runtime": "^0.16.3",
-    "@jay-framework/secure": "^0.16.3",
+    "@jay-framework/compiler-analyze-exported-types": "^0.16.4",
+    "@jay-framework/compiler-shared": "^0.16.4",
+    "@jay-framework/component": "^0.16.4",
+    "@jay-framework/logger": "^0.16.4",
+    "@jay-framework/runtime": "^0.16.4",
+    "@jay-framework/secure": "^0.16.4",
     "@types/js-yaml": "^4.0.9",
     "change-case": "^4.1.2",
     "js-yaml": "^4.1.0",
@@ -51,8 +51,8 @@
   },
   "devDependencies": {
     "@caiogondim/strip-margin": "^1.0.0",
-    "@jay-framework/4-react": "^0.16.3",
-    "@jay-framework/dev-environment": "^0.16.3",
+    "@jay-framework/4-react": "^0.16.4",
+    "@jay-framework/dev-environment": "^0.16.4",
     "@testing-library/jest-dom": "^6.2.0",
     "@types/js-beautify": "^1",
     "@types/node": "^20.11.5",