@jay-framework/compiler-jay-html 0.14.0 → 0.15.1

package/dist/index.d.cts

@@ -31,9 +31,11 @@ interface ContractProp {
     description?: Array<string>;
     default?: string;
 }
-/** URL/load params for a page (e.g. [slug]). Always string in generated type (UrlParams = Record<string, string>). Design Log #85. */
+type ContractParamKind = 'required' | 'optional' | 'catch-all';
+/** URL/load params for a page (e.g. [slug]). Design Log #85, #113. */
 interface ContractParam {
     name: string;
+    kind: ContractParamKind;
 }
 interface Contract {
     name: string;
@@ -90,6 +92,13 @@ interface JayImportResolver {
         metadata?: Record<string, unknown>;
     }>;
     resolvePluginManifest(pluginName: string, projectRoot: string): WithValidations<PluginManifest>;
+    /**
+     * Read a jay-html file adjacent to a component module.
+     * Given a module src path (e.g., "./header/header"), resolves to the absolute path
+     * and reads the corresponding .jay-html file (same base name + .jay-html extension).
+     * Returns the file content string, or null if not found.
+     */
+    readJayHtml(importingModuleDir: string, src: string): string | null;
 }
 declare const JAY_IMPORT_RESOLVER: JayImportResolver;
 
@@ -243,6 +252,21 @@ declare function assignCoordinatesToJayHtml(jayHtml: string, headlessContractNam
  */
 declare function assignCoordinates(body: HTMLElement, options: AssignCoordinatesOptions): AssignCoordinatesResult;
 
+/**
+ * Inject headfull full-stack component templates into jay-html.
+ * Finds <script type="application/jay-headfull" contract="..."> tags,
+ * reads each component's jay-html file, and injects the body content
+ * into matching <jay:Name> tags that are empty/self-closing.
+ *
+ * This must be called on the raw HTML string BEFORE the slow render pipeline,
+ * so that instance bindings can be resolved during pre-rendering.
+ *
+ * @param html - The raw jay-html content
+ * @param sourceDir - Absolute path to the directory containing the jay-html file
+ * @param importResolver - Resolver for reading component jay-html files
+ * @returns The HTML with headfull FS templates injected (or unchanged if none found)
+ */
+declare function injectHeadfullFSTemplates(html: string, sourceDir: string, importResolver: JayImportResolver): string;
 declare function parseJayFile(html: string, filename: string, filePath: string, options: ResolveTsConfigOptions, linkedContractResolver: JayImportResolver, projectRoot: string): Promise<WithValidations<JayHtmlSourceFile>>;
 declare function getJayHtmlImports(html: string): string[];
 
@@ -429,4 +453,4 @@ declare function resolveHeadlessInstances(preRenderedJayHtml: string, instanceDa
  */
 declare function hasSlowPhaseProperties(contract: Contract | undefined): boolean;
 
-export { type ActionDefinition, type AssignCoordinatesOptions, type AssignCoordinatesResult, type Contract, type ContractImportInfo, type ContractParam, type ContractProp, type ContractResolver, type ContractTag, ContractTagType, type DiscoveredHeadlessInstance, type EnumToImport, type ForEachHeadlessInstance, type HeadlessContractInfo, type HeadlessInstanceDiscoveryResult, type HeadlessInstanceResolvedData, JAY_IMPORT_RESOLVER, type JayContractImportLink, type JayHtmlSourceFile, type JayImportResolver, type PhaseViewStates, type RenderingPhase, type ServerElementOptions, type SlowRenderInput, type SlowRenderOutput, assignCoordinates, assignCoordinatesToJayHtml, buildInstanceCoordinateKey, compileAction, compileContract, contractToAllPhaseViewStates, contractToImportsViewStateAndRefs, contractToPhaseViewState, createPhaseContract, defaultContractResolver, discoverHeadlessInstances, filterTagsByPhase, generateElementBridgeFile, generateElementDefinitionFile, generateElementFile, generateElementFileReactTarget, generateElementHydrateFile, generateSandboxRootFile, generateServerElementFile, generateTypes, getEffectivePhase, getJayHtmlImports, getLinkedContractDir, hasSlowPhaseProperties, isTagInPhase, loadLinkedContract, parseAction, parseContract, parseEnumValues, parseIsEnum, parseJayFile, renderRefsType, resolveHeadlessInstances, slowRenderTransform, validateContractPhases };
+export { type ActionDefinition, type AssignCoordinatesOptions, type AssignCoordinatesResult, type Contract, type ContractImportInfo, type ContractParam, type ContractParamKind, type ContractProp, type ContractResolver, type ContractTag, ContractTagType, type DiscoveredHeadlessInstance, type EnumToImport, type ForEachHeadlessInstance, type HeadlessContractInfo, type HeadlessInstanceDiscoveryResult, type HeadlessInstanceResolvedData, JAY_IMPORT_RESOLVER, type JayContractImportLink, type JayHtmlSourceFile, type JayImportResolver, type PhaseViewStates, type RenderingPhase, type ServerElementOptions, type SlowRenderInput, type SlowRenderOutput, assignCoordinates, assignCoordinatesToJayHtml, buildInstanceCoordinateKey, compileAction, compileContract, contractToAllPhaseViewStates, contractToImportsViewStateAndRefs, contractToPhaseViewState, createPhaseContract, defaultContractResolver, discoverHeadlessInstances, filterTagsByPhase, generateElementBridgeFile, generateElementDefinitionFile, generateElementFile, generateElementFileReactTarget, generateElementHydrateFile, generateSandboxRootFile, generateServerElementFile, generateTypes, getEffectivePhase, getJayHtmlImports, getLinkedContractDir, hasSlowPhaseProperties, injectHeadfullFSTemplates, isTagInPhase, loadLinkedContract, parseAction, parseContract, parseEnumValues, parseIsEnum, parseJayFile, renderRefsType, resolveHeadlessInstances, slowRenderTransform, validateContractPhases };

package/dist/index.js

@@ -5845,7 +5845,7 @@ function assignCoordinates(body, options) {
   walkChildren(rootElement, "0", options, newScope());
   return { debugHtml: body.toString() };
 }
-function walkChildren(parent, parentCoord, options, scope) {
+function walkChildren(parent, parentCoord, options, scope, slowForEachPrefix = "") {
   for (const child of parent.childNodes) {
     if (child.nodeType !== NodeType.ELEMENT_NODE)
       continue;
@@ -5861,7 +5861,14 @@ function walkChildren(parent, parentCoord, options, scope) {
           ref = `AR${idx}`;
           element.setAttribute("ref", ref);
         }
-        assignHeadlessInstance(element, contractName, ref, parentCoord, options);
+        assignHeadlessInstance(
+          element,
+          contractName,
+          ref,
+          parentCoord,
+          options,
+          slowForEachPrefix
+        );
         continue;
       }
     }
@@ -5872,7 +5879,7 @@ function walkChildren(parent, parentCoord, options, scope) {
         const coord2 = `${parentCoord}/${scope.childCounter}`;
         element.setAttribute(COORD_ATTR$1, coord2);
         scope.childCounter++;
-        walkForEachChildren(element, `$${trackBy}`, options);
+        walkForEachChildren(element, `$${trackBy}`, options, slowForEachPrefix);
         continue;
       }
     }
@@ -5880,18 +5887,19 @@ function walkChildren(parent, parentCoord, options, scope) {
     if (slowForEachAttr) {
       const jayTrackBy = element.getAttribute("jayTrackBy");
       if (jayTrackBy) {
-        element.setAttribute(COORD_ATTR$1, jayTrackBy);
-        walkChildren(element, jayTrackBy, options, newScope());
+        const coord2 = slowForEachPrefix ? `${slowForEachPrefix}/${jayTrackBy}` : jayTrackBy;
+        element.setAttribute(COORD_ATTR$1, coord2);
+        walkChildren(element, coord2, options, newScope(), coord2);
         continue;
       }
     }
     const coord = `${parentCoord}/${scope.childCounter}`;
     element.setAttribute(COORD_ATTR$1, coord);
     scope.childCounter++;
-    walkChildren(element, coord, options, newScope());
+    walkChildren(element, coord, options, newScope(), slowForEachPrefix);
   }
 }
-function assignHeadlessInstance(element, contractName, ref, parentCoord, options) {
+function assignHeadlessInstance(element, contractName, ref, parentCoord, options, slowForEachPrefix = "") {
   const instanceCoord = `${parentCoord}/${contractName}:${ref}`;
   element.setAttribute(COORD_ATTR$1, instanceCoord);
   const significantChildren = element.childNodes.filter(
@@ -5904,9 +5912,9 @@ function assignHeadlessInstance(element, contractName, ref, parentCoord, options
     children.forEach((child) => wrapper.appendChild(child));
     element.appendChild(wrapper);
   }
-  walkChildren(element, instanceCoord, options, newScope());
+  walkChildren(element, instanceCoord, options, newScope(), slowForEachPrefix);
 }
-function walkForEachChildren(parent, itemPrefix, options) {
+function walkForEachChildren(parent, itemPrefix, options, slowForEachPrefix = "") {
   const scope = newScope();
   for (const child of parent.childNodes) {
     if (child.nodeType !== NodeType.ELEMENT_NODE)
@@ -5924,16 +5932,27 @@ function walkForEachChildren(parent, itemPrefix, options) {
           ref = `AR${idx}`;
           element.setAttribute("ref", ref);
         }
-        const instanceCoord = `${itemPrefix}/${contractName}:${ref}`;
+        const instanceCoord = itemPrefix ? `${itemPrefix}/${contractName}:${ref}` : `${contractName}:${ref}`;
         element.setAttribute(COORD_ATTR$1, instanceCoord);
-        walkChildren(element, instanceCoord, options, newScope());
+        walkChildren(element, instanceCoord, options, newScope(), slowForEachPrefix);
+        continue;
+      }
+    }
+    const forEachAttr = element.getAttribute("forEach");
+    if (forEachAttr) {
+      const trackBy = element.getAttribute("trackBy");
+      if (trackBy) {
+        const coord2 = itemPrefix ? `${itemPrefix}/${scope.childCounter}` : `${scope.childCounter}`;
+        element.setAttribute(COORD_ATTR$1, coord2);
+        scope.childCounter++;
+        walkForEachChildren(element, null, options, slowForEachPrefix);
         continue;
       }
     }
-    const coord = `${itemPrefix}/${scope.childCounter}`;
+    const coord = itemPrefix ? `${itemPrefix}/${scope.childCounter}` : `${scope.childCounter}`;
     element.setAttribute(COORD_ATTR$1, coord);
     scope.childCounter++;
-    walkChildren(element, coord, options, newScope());
+    walkChildren(element, coord, options, newScope(), slowForEachPrefix);
   }
 }
 var ContractTagType = /* @__PURE__ */ ((ContractTagType2) => {
@@ -16870,6 +16889,231 @@ async function parseHeadlessImports(elements, validations, filePath, importResol
   }
   return result;
 }
+function injectHeadfullFSTemplates(html2, sourceDir, importResolver) {
+  const root = parse_2(html2);
+  const allHeadfullElements = root.querySelectorAll('script[type="application/jay-headfull"]');
+  const fsElements = allHeadfullElements.filter((el) => el.getAttribute("contract"));
+  if (fsElements.length === 0)
+    return html2;
+  const body = root.querySelector("body");
+  if (!body)
+    return html2;
+  for (const element of fsElements) {
+    const src = element.getAttribute("src");
+    const rawNames = element.getAttribute("names");
+    if (!src || !rawNames)
+      continue;
+    const names = parseImportNames(rawNames);
+    if (names.length === 0)
+      continue;
+    const contractName = (names[0].as || names[0].name).toLowerCase();
+    const jayHtmlContent = importResolver.readJayHtml(sourceDir, src);
+    if (!jayHtmlContent)
+      continue;
+    const jayHtmlRoot = parse_2(jayHtmlContent);
+    const jayHtmlBody = jayHtmlRoot.querySelector("body");
+    if (!jayHtmlBody)
+      continue;
+    const jayTags = body.querySelectorAll("*").filter((el) => el.tagName?.toLowerCase() === `jay:${contractName}`);
+    for (const jayTag of jayTags) {
+      if (!jayTag.innerHTML.trim()) {
+        jayTag.set_content(jayHtmlBody.innerHTML);
+      }
+    }
+  }
+  return root.toString();
+}
+async function parseHeadfullFSImports(elements, validations, filePath, importResolver, body, projectRoot) {
+  const headlessImports = [];
+  const cssParts = [];
+  const linkedCssFiles = [];
+  for (const element of elements) {
+    const src = element.getAttribute("src");
+    const contractAttr = element.getAttribute("contract");
+    const rawNames = element.getAttribute("names");
+    if (!src) {
+      validations.push("headfull FS import must specify src attribute");
+      continue;
+    }
+    if (!contractAttr) {
+      continue;
+    }
+    if (!rawNames) {
+      validations.push(`headfull FS import for module ${src} must specify names attribute`);
+      continue;
+    }
+    const names = parseImportNames(rawNames);
+    if (names.length === 0) {
+      validations.push(
+        `headfull FS import for module ${src} does not specify what to import`
+      );
+      continue;
+    }
+    const componentExportName = names[0].name;
+    const contractName = (names[0].as || componentExportName).toLowerCase();
+    let contractPath = path.resolve(filePath, contractAttr);
+    let loadedContract;
+    try {
+      const contractResult = importResolver.loadContract(contractPath);
+      validations.push(...contractResult.validations);
+      if (!contractResult.val) {
+        continue;
+      }
+      loadedContract = contractResult.val;
+    } catch (e2) {
+      if (projectRoot && projectRoot !== filePath) {
+        try {
+          contractPath = path.resolve(projectRoot, contractAttr);
+          const fallbackResult = importResolver.loadContract(contractPath);
+          validations.push(...fallbackResult.validations);
+          if (!fallbackResult.val) {
+            continue;
+          }
+          loadedContract = fallbackResult.val;
+        } catch (e22) {
+          validations.push(
+            `Failed to load contract for headfull FS component ${src}: ${e22.message}`
+          );
+          continue;
+        }
+      } else {
+        validations.push(
+          `Failed to load contract for headfull FS component ${src}: ${e2.message}`
+        );
+        continue;
+      }
+    }
+    let jayHtmlContent = importResolver.readJayHtml(filePath, src);
+    if (jayHtmlContent === null && projectRoot && projectRoot !== filePath) {
+      jayHtmlContent = importResolver.readJayHtml(projectRoot, src);
+    }
+    if (jayHtmlContent === null) {
+      validations.push(
+        `jay-html file not found for headfull FS component ${src} (expected ${src}.jay-html)`
+      );
+      continue;
+    }
+    const jayHtmlRoot = parse_2(jayHtmlContent);
+    const jayHtmlBody = jayHtmlRoot.querySelector("body");
+    if (!jayHtmlBody) {
+      validations.push(`headfull FS component ${src} jay-html must have a body tag`);
+      continue;
+    }
+    const componentDir = path.dirname(path.resolve(filePath, src));
+    const componentCssResult = await extractCss(jayHtmlRoot, componentDir);
+    validations.push(...componentCssResult.validations);
+    if (componentCssResult.val?.css) {
+      cssParts.push(componentCssResult.val.css);
+    }
+    if (componentCssResult.val?.linkedCssFiles) {
+      linkedCssFiles.push(...componentCssResult.val.linkedCssFiles);
+    }
+    const jayTags = body.querySelectorAll("*").filter((el) => el.tagName?.toLowerCase() === `jay:${contractName}`);
+    for (const jayTag of jayTags) {
+      const existingContent = jayTag.innerHTML.trim();
+      if (existingContent) {
+        continue;
+      }
+      jayTag.set_content(jayHtmlBody.innerHTML);
+    }
+    try {
+      const contractTypes = await contractToImportsViewStateAndRefs(
+        loadedContract,
+        contractPath,
+        importResolver
+      );
+      contractTypes.map(({ type: type2, refs: subContractRefsTree, enumsToImport }) => {
+        const contractInternalName = loadedContract.name;
+        const refsTypeName = `${pascalCase(contractInternalName)}Refs`;
+        const repeatedRefsTypeName = `${pascalCase(contractInternalName)}RepeatedRefs`;
+        const refs = mkRefsTree(
+          subContractRefsTree.refs,
+          subContractRefsTree.children,
+          subContractRefsTree.repeated,
+          refsTypeName,
+          repeatedRefsTypeName
+        );
+        const relativeContractPath = path.relative(filePath, contractPath);
+        const enumsToImportRelativeToJayHtml = enumsToImport.map(
+          (enumToImport) => ({
+            type: enumToImport.type,
+            declaringModule: path.relative(filePath, enumToImport.declaringModule)
+          })
+        );
+        const enumsFromContract = enumsToImportRelativeToJayHtml.filter((_) => _.declaringModule === relativeContractPath).map((_) => _.type);
+        const nestedTypeNames = collectNestedTypeNames(type2);
+        const nestedTypeImports = nestedTypeNames.filter((name) => name !== type2.name).map((name) => ({ name, type: JayUnknown }));
+        const contractLink = {
+          module: relativeContractPath,
+          names: [
+            { name: type2.name, type: type2 },
+            { name: refsTypeName, type: JayUnknown },
+            ...nestedTypeImports,
+            ...enumsFromContract.map((_) => ({ name: _.name, type: _ }))
+          ]
+        };
+        const enumsFromOtherContracts = enumsToImportRelativeToJayHtml.filter(
+          (_) => _.declaringModule !== relativeContractPath
+        );
+        const enumImportLinks = Object.entries(
+          enumsFromOtherContracts.reduce(
+            (acc, enumToImport) => {
+              const module = enumToImport.declaringModule;
+              if (!acc[module]) {
+                acc[module] = [];
+              }
+              acc[module].push(enumToImport);
+              return acc;
+            },
+            {}
+          )
+        ).map(([module, enums]) => ({
+          module,
+          names: enums.map((enumToImport) => ({
+            name: enumToImport.type.name,
+            type: enumToImport.type
+          }))
+        }));
+        const contractLinks = [contractLink, ...enumImportLinks];
+        const moduleResolveDir = projectRoot && projectRoot !== filePath ? projectRoot : filePath;
+        let relativeModule = path.relative(
+          filePath,
+          importResolver.resolveLink(moduleResolveDir, src)
+        );
+        if (!relativeModule.startsWith(".")) {
+          relativeModule = "./" + relativeModule;
+        }
+        const codeLink = {
+          module: relativeModule,
+          names: [
+            {
+              name: componentExportName,
+              type: new JayComponentType(componentExportName, [])
+            }
+          ]
+        };
+        headlessImports.push({
+          contractName,
+          refs,
+          rootType: type2,
+          contractLinks,
+          codeLink,
+          contract: loadedContract,
+          contractPath
+        });
+      });
+    } catch (e2) {
+      validations.push(
+        `failed to parse contract for headfull FS component ${src} - ${e2.message}${e2.stack}`
+      );
+    }
+  }
+  return {
+    headlessImports,
+    css: cssParts.length > 0 ? cssParts.join("\n\n") : void 0,
+    linkedCssFiles
+  };
+}
 function normalizeFilename(filename) {
   return filename.replace(".jay-html", "");
 }
@@ -16967,13 +17211,31 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
   const { val: jayYaml, validations } = parseYaml(root);
   if (validations.length > 0)
     return new WithValidations(void 0, validations);
+  const allHeadfullElements = root.querySelectorAll('script[type="application/jay-headfull"]');
+  const regularHeadfullElements = allHeadfullElements.filter(
+    (el) => !el.getAttribute("contract")
+  );
+  const fsHeadfullElements = allHeadfullElements.filter((el) => el.getAttribute("contract"));
   const headfullImports = parseHeadfullImports(
-    root.querySelectorAll('script[type="application/jay-headfull"]'),
+    regularHeadfullElements,
     validations,
     filePath,
     options,
     linkedContractResolver
   );
+  let body = root.querySelector("body");
+  if (body === null) {
+    validations.push(`jay file must have exactly a body tag`);
+    return new WithValidations(void 0, validations);
+  }
+  const headfullFSResult = await parseHeadfullFSImports(
+    fsHeadfullElements,
+    validations,
+    filePath,
+    linkedContractResolver,
+    body,
+    projectRoot
+  );
   const headlessImports = await parseHeadlessImports(
     root.querySelectorAll('script[type="application/jay-headless"]'),
     validations,
@@ -16981,13 +17243,14 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
     linkedContractResolver,
     projectRoot
   );
+  const allHeadlessImports = [...headlessImports, ...headfullFSResult.headlessImports];
   const importNames = headfullImports.flatMap((_) => _.names);
   const types2 = await parseTypes(
     jayYaml,
     validations,
     baseElementName,
     importNames,
-    headlessImports,
+    allHeadlessImports,
     filePath,
     linkedContractResolver
   );
@@ -16996,7 +17259,7 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
   );
   const imports = [
     ...headfullImports,
-    ...headlessImports.flatMap((_) => [
+    ...allHeadlessImports.flatMap((_) => [
       ..._.contractLinks,
       ...usedAsInstance.has(_.contractName) ? [_.codeLink] : []
     ])
@@ -17007,14 +17270,17 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
   validations.push(...cssResult.validations);
   if (validations.length > 0)
     return new WithValidations(void 0, validations);
-  let body = root.querySelector("body");
-  if (body === null) {
-    validations.push(`jay file must have exactly a body tag`);
-    return new WithValidations(void 0, validations);
+  let css = cssResult.val?.css;
+  if (headfullFSResult.css) {
+    css = css ? css + "\n\n" + headfullFSResult.css : headfullFSResult.css;
+  }
+  let allLinkedCssFiles = cssResult.val?.linkedCssFiles || [];
+  if (headfullFSResult.linkedCssFiles.length > 0) {
+    allLinkedCssFiles = [...allLinkedCssFiles, ...headfullFSResult.linkedCssFiles];
   }
   const { serverTrackByMap, clientTrackByMap } = extractTrackByMaps(
     jayYaml.parsedContract,
-    headlessImports
+    allHeadlessImports
   );
   return new WithValidations(
     {
@@ -17024,10 +17290,10 @@ async function parseJayFile(html2, filename, filePath, options, linkedContractRe
       body,
       baseElementName,
       namespaces,
-      headlessImports,
+      headlessImports: allHeadlessImports,
       headLinks,
-      css: cssResult.val?.css,
-      linkedCssFiles: cssResult.val?.linkedCssFiles.length > 0 ? cssResult.val.linkedCssFiles : void 0,
+      css,
+      linkedCssFiles: allLinkedCssFiles.length > 0 ? allLinkedCssFiles : void 0,
       filename: normalizedFileName,
       contract: jayYaml.parsedContract,
       contractRef: jayYaml.contractRef,
@@ -17368,7 +17634,14 @@ ${propLines.join("\n")}
 }
 function generateParamsInterface(contractName, params) {
   const paramsTypeName = `${contractName}Params`;
-  const paramLines = params.map((param) => `  ${camelCase$1(param.name)}: string;`);
+  const paramLines = params.map((param) => {
+    const name = camelCase$1(param.name);
+    if (param.kind === "optional")
+      return `  ${name}?: string;`;
+    if (param.kind === "catch-all")
+      return `  ${name}: string[];`;
+    return `  ${name}: string;`;
+  });
   const paramsImport = `import { UrlParams } from '${JAY_FULLSTACK_COMPONENTS}';`;
   const paramsInterface = `export interface ${paramsTypeName} extends UrlParams {
 ${paramLines.join("\n")}
@@ -17721,7 +17994,10 @@ function parseContract(contractYaml, fileName) {
     }
     let parsedParams;
     if (parsedYaml.params && typeof parsedYaml.params === "object" && !Array.isArray(parsedYaml.params)) {
-      parsedParams = Object.keys(parsedYaml.params).map((name) => ({ name }));
+      parsedParams = Object.entries(parsedYaml.params).map(([name, value]) => ({
+        name,
+        kind: typeof value === "string" && value.endsWith("?") ? "optional" : typeof value === "string" && value.endsWith("[]") ? "catch-all" : "required"
+      }));
       if (parsedParams.length === 0)
         parsedParams = void 0;
     }
@@ -19178,9 +19454,12 @@ ${indent.curr}return ${childElement.rendered}}, '${trackBy}')`,
         }
       };
       collectContractRefs(headlessImport.refs);
+      const childImportedSymbols = new Set(newContext.importedSymbols);
+      childImportedSymbols.delete(pluginComponentName);
       const childContext = {
         ...newContext,
         variables: componentVariables,
+        importedSymbols: childImportedSymbols,
         indent: childIndent,
         importedRefNameToRef: instanceRefMap,
         recursiveRegions: [],
@@ -20347,30 +20626,81 @@ ${indent.firstLine})`,
     const itemTypeName = slowForEachVariables.currentType.name;
     const paramName = arrayAccessor.rootVar;
     const getItemsFragment = arrayAccessor.render().map((_) => `(${paramName}: ${parentTypeName}) => ${_}`);
+    const accumulatedJayTrackBy = context.slowForEachJayTrackBy ? `${context.slowForEachJayTrackBy}/${jayTrackBy}` : jayTrackBy;
     const itemContext = {
       ...context,
       variables: slowForEachVariables,
       indent: indent.child().child(),
       dynamicRef: true,
-      insideSlowForEach: true
+      insideSlowForEach: true,
+      slowForEachJayTrackBy: accumulatedJayTrackBy
     };
-    const renderContext2 = buildRenderContext(itemContext);
-    const childContent = renderHydrateElementContent(
-      element,
-      itemContext,
-      renderContext2,
-      null
+    buildRenderContext(itemContext);
+    const itemChildNodes = element.childNodes.filter(
+      (_) => _.nodeType !== NodeType.TEXT_NODE || (_.innerText || "").trim() !== ""
     );
-    if (childContent.rendered.trim().length === 0) {
+    const childFragments = itemChildNodes.map((child) => renderHydrateNode(child, itemContext));
+    const nonEmptyChildren = childFragments.filter((f) => f.rendered.trim());
+    if (nonEmptyChildren.length === 0) {
       return RenderFragment.empty();
     }
+    let callbackBody;
+    let callbackImports = Imports.none();
+    let callbackValidations = [];
+    let callbackRefs;
+    if (nonEmptyChildren.length === 1) {
+      callbackBody = nonEmptyChildren[0].rendered.trim();
+      callbackImports = nonEmptyChildren[0].imports;
+      callbackValidations = [...nonEmptyChildren[0].validations];
+      callbackRefs = nonEmptyChildren[0].refs;
+    } else {
+      const hasDynamicGroups = itemChildNodes.some(
+        (child) => child.nodeType === NodeType.ELEMENT_NODE && (isConditional(child) && conditionIsInteractive(
+          child.getAttribute("if"),
+          itemContext.interactivePaths
+        ) || isForEach(child) || isSlowForEach(child))
+      );
+      if (hasDynamicGroups) {
+        const childParts = [];
+        for (let i = 0; i < childFragments.length; i++) {
+          const frag = childFragments[i];
+          if (frag.rendered.trim()) {
+            childParts.push(frag.rendered);
+            callbackImports = callbackImports.plus(frag.imports);
+            callbackValidations.push(...frag.validations);
+            if (frag.refs)
+              callbackRefs = callbackRefs ? mergeRefsTrees(callbackRefs, frag.refs) : frag.refs;
+          } else if (itemChildNodes[i].nodeType === NodeType.ELEMENT_NODE) {
+            childParts.push(`${indent.firstLine}        STATIC`);
+            callbackImports = callbackImports.plus(Import.STATIC);
+          }
+        }
+        const childrenArr = childParts.join(",\n");
+        callbackBody = `adoptDynamicElement('', {}, [
+${childrenArr},
+${indent.firstLine}    ])`;
+        callbackImports = callbackImports.plus(Import.adoptDynamicElement);
+      } else {
+        const childrenArr = nonEmptyChildren.map((f) => f.rendered).join(",\n");
+        callbackBody = `adoptElement('', {}, [
+${childrenArr},
+${indent.firstLine}    ])`;
+        for (const f of nonEmptyChildren) {
+          callbackImports = callbackImports.plus(f.imports);
+          callbackValidations.push(...f.validations);
+          if (f.refs)
+            callbackRefs = callbackRefs ? mergeRefsTrees(callbackRefs, f.refs) : f.refs;
+        }
+        callbackImports = callbackImports.plus(Import.adoptElement);
+      }
+    }
     const slowForEachFragment = new RenderFragment(
       `${indent.firstLine}slowForEachItem<${parentTypeName}, ${itemTypeName}>(${getItemsFragment.rendered}, ${jayIndex}, '${jayTrackBy}',
-${indent.firstLine}() => ${childContent.rendered.trim()}
+${indent.firstLine}() => ${callbackBody}
 ${indent.firstLine})`,
-      Imports.for(Import.slowForEachItem).plus(getItemsFragment.imports).plus(childContent.imports),
-      [...getItemsFragment.validations, ...childContent.validations],
-      childContent.refs
+      Imports.for(Import.slowForEachItem).plus(getItemsFragment.imports).plus(callbackImports),
+      [...getItemsFragment.validations, ...callbackValidations],
+      callbackRefs
     );
     return nestRefs(arrayName.split("."), slowForEachFragment);
   }
@@ -20716,6 +21046,13 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
     const slashIndex = coordinate.indexOf("/");
     coordinate = slashIndex >= 0 ? coordinate.slice(slashIndex + 1) : "0";
   }
+  if (context.slowForEachJayTrackBy && coordTemplate) {
+    if (coordinate === context.slowForEachJayTrackBy) {
+      coordinate = "";
+    } else if (coordinate.startsWith(context.slowForEachJayTrackBy + "/")) {
+      coordinate = coordinate.slice(context.slowForEachJayTrackBy.length + 1);
+    }
+  }
   const renderedRef = renderElementRef$1(element, renderContext);
   if (hasInteractiveChildren) {
     const childParts = [];
@@ -20817,6 +21154,7 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
     let childrenRendered = "[]";
     let childImports = Imports.none();
     let childValidations = [];
+    let childRefs;
     if (textFragment) {
       const accessor = textFragment.rendered.replace(/^dt\(/, "").replace(/\)$/, "");
       childrenRendered = `[adoptText("${coordinate}", ${accessor})]`;
@@ -20824,13 +21162,24 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
         textFragment.imports.minus(Import.dynamicText)
       );
       childValidations = textFragment.validations;
+    } else {
+      const children = mergeHydrateFragments(
+        childNodes.map((child) => renderHydrateNode(child, context)),
+        ",\n"
+      );
+      if (children.rendered.trim()) {
+        childrenRendered = `[${children.rendered}]`;
+        childImports = children.imports;
+        childValidations = children.validations;
+        childRefs = children.refs;
+      }
     }
     const refSuffix2 = renderedRef.rendered ? `, ${renderedRef.rendered}` : "";
     return new RenderFragment(
       `${indent.firstLine}adoptElement("${coordinate}", ${attributes2.rendered}, ${childrenRendered}${refSuffix2})`,
       Imports.for(Import.adoptElement).plus(attributes2.imports).plus(childImports).plus(renderedRef.imports),
       [...attributes2.validations, ...childValidations, ...renderedRef.validations],
-      renderedRef.refs
+      mergeRefsTrees(...[childRefs, renderedRef.refs].filter(Boolean))
     );
   }
   const childFragments = mergeHydrateFragments(
@@ -21043,15 +21392,23 @@ ${indent.firstLine}}`,
     const arrayExpr = forEachAccessor.render().rendered;
     const itemIndent = new Indent(indent.curr + "    ");
     const trackByExpr = `${forEachVariables.currentVar}.${trackBy}`;
+    const slowPrefix = context.slowForEachCoordPrefix ? `'${context.slowForEachCoordPrefix}'` : void 0;
+    const ancestorPrefix = context.forEachAccumulatedPrefix ?? slowPrefix;
+    const currentTrackByPrefix = `escapeAttr(String(${trackByExpr}))`;
+    const accumulatedPrefix = ancestorPrefix ? `${ancestorPrefix} + '/' + ${currentTrackByPrefix}` : currentTrackByPrefix;
     const itemContext = {
       ...context,
       variables: forEachVariables,
       indent: itemIndent,
       varMappings: { ...context.varMappings, [trackBy]: trackByExpr },
-      insideForEach: true
+      insideForEach: true,
+      forEachAccumulatedPrefix: accumulatedPrefix,
+      forEachAncestorPrefix: ancestorPrefix,
+      slowForEachCoordPrefix: void 0
+      // consumed by ancestorPrefix computation
     };
     const openTag = renderServerOpenTag(element, itemContext, null);
-    const itemRootCoordExpr = `escapeAttr(String(${trackByExpr}))`;
+    const itemRootCoordExpr = accumulatedPrefix;
     const coordinateW = w(
       itemIndent,
       `' jay-coordinate="' + ${itemRootCoordExpr} + '">'`,
@@ -21076,16 +21433,44 @@ ${indent.firstLine}}`,
   if (isSlowForEach(element)) {
     const slowForEachInfo = getSlowForEachInfo(element);
     if (slowForEachInfo) {
-      const slowForEachVariables = variables.childVariableFor(
-        parseAccessor(slowForEachInfo.arrayName, variables)
-      );
+      const { arrayName, jayIndex, jayTrackBy } = slowForEachInfo;
+      const arrayAccessor = parseAccessor(arrayName, variables);
+      const slowForEachVariables = variables.childVariableFor(arrayAccessor);
+      const arrayExpr = arrayAccessor.render().rendered;
+      const itemVar = slowForEachVariables.currentVar;
+      const slowCoordPrefix = context.slowForEachCoordPrefix ? `${context.slowForEachCoordPrefix}/${jayTrackBy}` : jayTrackBy;
       const itemContext = {
         ...context,
         variables: slowForEachVariables,
         indent,
-        insideSlowForEach: true
+        insideSlowForEach: true,
+        slowForEachCoordPrefix: slowCoordPrefix
       };
-      return renderServerElementContent(element, itemContext);
+      const childContent = renderServerElementContent(element, itemContext, {
+        isRoot: true
+      });
+      const needsItemVar = childContent.rendered.includes(itemVar + ".");
+      if (needsItemVar) {
+        const itemIndent = new Indent(indent.curr + "    ");
+        const indentedContext = {
+          ...context,
+          variables: slowForEachVariables,
+          indent: itemIndent,
+          insideSlowForEach: true,
+          slowForEachCoordPrefix: slowCoordPrefix
+        };
+        const indentedContent = renderServerElementContent(element, indentedContext, {
+          isRoot: true
+        });
+        return new RenderFragment(
+          `${indent.firstLine}{ const ${itemVar} = ${arrayExpr}?.[${jayIndex}]; if (${itemVar}) {
+${indentedContent.rendered}
+${indent.firstLine}}}`,
+          indentedContent.imports,
+          [...arrayAccessor.validations, ...indentedContent.validations]
+        );
+      }
+      return childContent;
     }
   }
   return renderServerElementContent(element, context);
@@ -21525,16 +21910,36 @@ function renderServerElementContent(element, context, options) {
   }
   if (coordTemplate !== null) {
     if (isStaticCoordinate(coordTemplate)) {
-      parts.push(w(indent, `' jay-coordinate="${coordTemplate}">'`));
+      if (context.forEachAccumulatedPrefix) {
+        parts.push(
+          w(
+            indent,
+            `' jay-coordinate="' + ${context.forEachAccumulatedPrefix} + '/${coordTemplate}">'`,
+            Imports.for(Import.escapeAttr)
+          )
+        );
+      } else {
+        parts.push(w(indent, `' jay-coordinate="${coordTemplate}">'`));
+      }
     } else {
       const coordExpr = compileCoordinateExpr(coordTemplate, context.varMappings);
-      parts.push(
-        w(
-          indent,
-          `' jay-coordinate="' + ${coordExpr} + '">'`,
-          Imports.for(Import.escapeAttr)
-        )
-      );
+      if (context.forEachAncestorPrefix) {
+        parts.push(
+          w(
+            indent,
+            `' jay-coordinate="' + ${context.forEachAncestorPrefix} + '/' + ${coordExpr} + '">'`,
+            Imports.for(Import.escapeAttr)
+          )
+        );
+      } else {
+        parts.push(
+          w(
+            indent,
+            `' jay-coordinate="' + ${coordExpr} + '">'`,
+            Imports.for(Import.escapeAttr)
+          )
+        );
+      }
     }
   } else {
     parts.push(w(indent, `'>'`));
@@ -29060,6 +29465,15 @@ const JAY_IMPORT_RESOLVER = {
   },
   resolvePluginManifest(pluginName, projectRoot) {
     return resolvePluginManifest(projectRoot, pluginName);
+  },
+  readJayHtml(importingModuleDir, src) {
+    const resolvedPath = src.startsWith(".") ? path.resolve(importingModuleDir, src) : src;
+    const jayHtmlPath = resolvedPath + ".jay-html";
+    try {
+      return fs$1.readFileSync(jayHtmlPath, "utf-8");
+    } catch {
+      return null;
+    }
   }
 };
 function buildPhaseMap(contract, headlessContracts, importResolver) {
@@ -29284,7 +29698,7 @@ function resolveRelativePaths(root, sourceDir) {
   const scripts = root.querySelectorAll("script[src]");
   for (const script of scripts) {
     const scriptType = script.getAttribute("type");
-    if (scriptType === "application/jay-data" || scriptType === "application/jay-headless") {
+    if (scriptType === "application/jay-data" || scriptType === "application/jay-headless" || scriptType === "application/jay-headfull") {
       continue;
     }
     const src = script.getAttribute("src");
@@ -29574,6 +29988,7 @@ export {
   getJayHtmlImports,
   getLinkedContractDir,
   hasSlowPhaseProperties,
+  injectHeadfullFSTemplates,
   isTagInPhase,
   loadLinkedContract,
   parseAction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/compiler-jay-html",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -34,12 +34,12 @@
   },
   "author": "",
   "dependencies": {
-    "@jay-framework/compiler-analyze-exported-types": "^0.14.0",
-    "@jay-framework/compiler-shared": "^0.14.0",
-    "@jay-framework/component": "^0.14.0",
-    "@jay-framework/logger": "^0.14.0",
-    "@jay-framework/runtime": "^0.14.0",
-    "@jay-framework/secure": "^0.14.0",
+    "@jay-framework/compiler-analyze-exported-types": "^0.15.1",
+    "@jay-framework/compiler-shared": "^0.15.1",
+    "@jay-framework/component": "^0.15.1",
+    "@jay-framework/logger": "^0.15.1",
+    "@jay-framework/runtime": "^0.15.1",
+    "@jay-framework/secure": "^0.15.1",
     "@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.14.0",
-    "@jay-framework/dev-environment": "^0.14.0",
+    "@jay-framework/4-react": "^0.15.1",
+    "@jay-framework/dev-environment": "^0.15.1",
     "@testing-library/jest-dom": "^6.2.0",
     "@types/js-beautify": "^1",
     "@types/node": "^20.11.5",