@jay-framework/compiler-jay-html 0.16.5 → 0.17.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { JayImportedType, isObjectType as isObjectType$1, isImportedType, isRecursiveType, JayUnknown, RenderFragment, Imports, Import, WithValidations, isArrayType as isArrayType$1, isAtomicType, isPromiseType, isEnumType, hasRefs, GenerateTarget, JayTypeAlias, JayUnionType, mkRefsTree, JayComponentType, JayHTMLType, mkRef, equalJayTypes, getModeFileExtension, RuntimeMode, nestRefs, mergeRefsTrees, SourceFileFormat, JayEnumType, JayObjectType, JayArrayType, JayPromiseType, resolvePrimitiveType, JayRecursiveType, JAY_CONTRACT_EXTENSION as JAY_CONTRACT_EXTENSION$1, ImportsFor, JAY_FULLSTACK_COMPONENTS, JayErrorType, JayOptionalType, JayRecordType, isOptionalType, isRecordType, resolvePluginComponent, resolvePluginManifest } from "@jay-framework/compiler-shared";
+import { JayImportedType, isObjectType as isObjectType$1, isImportedType, isRecursiveType, JayUnknown, RenderFragment, Imports, Import, WithValidations, isArrayType as isArrayType$1, isAtomicType, isPromiseType, isEnumType, hasRefs, GenerateTarget, JayTypeAlias, JayUnionType, mkRefsTree, JayComponentType, JayHTMLType, mkRef, equalJayTypes, getModeFileExtension, isHtmlStringType, RuntimeMode, nestRefs, mergeRefsTrees, SourceFileFormat, JayEnumType, JayObjectType, JayArrayType, JayPromiseType, resolvePrimitiveType, JayRecursiveType, JAY_CONTRACT_EXTENSION as JAY_CONTRACT_EXTENSION$1, ImportsFor, JAY_FULLSTACK_COMPONENTS, JayErrorType, JayOptionalType, JayRecordType, isOptionalType, isRecordType, resolvePluginComponent, resolvePluginManifest } from "@jay-framework/compiler-shared";
 import path from "path";
 import { getLogger } from "@jay-framework/logger";
 import fs from "fs/promises";
@@ -5919,6 +5919,7 @@ function assignHeadlessInstance(element, contractName, ref, parentCoord, parentS
   );
   if (significantChildren.length > 1) {
     const wrapper = parse_2("<div></div>").querySelector("div");
+    wrapper.setAttribute("style", "display: contents");
     const children = [...element.childNodes];
     element.innerHTML = "";
     children.forEach((child) => wrapper.appendChild(child));
@@ -14366,6 +14367,23 @@ function filterContentNodes(childNodes, onlyIfMultiple = false) {
 function textEscape$1(s) {
   return s.replace(/'/g, "\\'");
 }
+function decodeHtmlEntities(s) {
+  return heExports.decode(s);
+}
+function findHtmlStringBindings(childNodes, variables) {
+  const found = [];
+  for (const child of childNodes) {
+    if (child.nodeType !== NodeType.TEXT_NODE)
+      continue;
+    const text2 = (child.innerText || "").trim();
+    for (const m of text2.matchAll(/\{([^}]+)\}/g)) {
+      const accessor = parseAccessor(m[1], variables);
+      if (isHtmlStringType(accessor.resolvedType))
+        found.push(m[1]);
+    }
+  }
+  return found;
+}
 function escapeForJsString(s) {
   return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
 }
@@ -18307,6 +18325,7 @@ function injectHeadfullFSTemplatesRecursive(fsElements, body, sourceDir, importR
     for (const jayTag of jayTags) {
       if (!jayTag.innerHTML.trim()) {
         jayTag.set_content(jayHtmlBody.innerHTML);
+        jayTag.setAttribute("style", "display: contents");
       }
     }
   }
@@ -19680,7 +19699,6 @@ ${context.indent.firstLine}    ${createBody})`,
     const forEachFragment = forEachAccessor.render().map((_) => `(${paramName}: ${paramType}) => ${_}`);
     const preAdoptRefNameGenerator = context.refNameGenerator.clone();
     const itemChildNodes = filterContentNodes(element.childNodes);
-    `${forEachVariables.currentVar}.${trackBy}`;
     const itemContext = {
       ...context,
       variables: forEachVariables,
@@ -19855,7 +19873,6 @@ ${indent.firstLine})`,
       dynamicRef: true,
       insideSlowForEach: true
     };
-    buildRenderContext(itemContext);
     const itemChildNodes = filterContentNodes(element.childNodes);
     const childFragments = itemChildNodes.map((child) => renderHydrateNode(child, itemContext));
     const nonEmptyChildren = childFragments.filter((f) => f.rendered.trim());
@@ -19964,7 +19981,7 @@ function renderHydrateHeadlessInstance(element, context, renderContext, contract
   const coordResult = extractHeadlessCoordinate(element, contractName);
   if (isValidationError(coordResult))
     return coordResult;
-  const { instanceCoord, coordSegments, coordinateSuffix, childScopeId } = coordResult;
+  const { instanceCoord, coordinateSuffix, childScopeId } = coordResult;
   const isInsideForEach = context.insideFastForEach;
   let coordinateKey2;
   if (isInsideForEach) {
@@ -20216,6 +20233,21 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
       textFragment = null;
     }
   }
+  const htmlStringBindings = findHtmlStringBindings(childNodes, variables);
+  const isHtmlStringChild = htmlStringBindings.length > 0;
+  if (isHtmlStringChild && (childNodes.length !== 1 || childNodes[0].nodeType !== NodeType.TEXT_NODE)) {
+    return new RenderFragment("", Imports.none(), [
+      `html-string binding {${htmlStringBindings[0]}} must be the sole child of its parent element, not mixed with sibling elements`
+    ]);
+  }
+  if (isHtmlStringChild) {
+    const text2 = (childNodes[0].innerText || "").trim();
+    if (text2 !== `{${htmlStringBindings[0]}}`) {
+      return new RenderFragment("", Imports.none(), [
+        `html-string binding {${htmlStringBindings[0]}} must be the sole child of its parent element, not mixed with other content`
+      ]);
+    }
+  }
   const hasInteractiveChildren = childNodes.some(
     (child) => child.nodeType === NodeType.ELEMENT_NODE && (isConditional(child) && conditionIsInteractive(
       child.getAttribute("if"),
@@ -20285,7 +20317,7 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
     let childImports = Imports.none();
     const childValidations = [];
     const childRefs = [];
-    childNodes.forEach((child, index) => {
+    childNodes.forEach((child) => {
       if (child.nodeType === NodeType.ELEMENT_NODE) {
         const frag = renderHydrateNode(child, context);
         if (frag.rendered.trim()) {
@@ -20322,6 +20354,16 @@ function renderHydrateElementContent(element, context, renderContext, coordinate
       mergeRefsTrees(...childRefs, renderedRef.refs)
     );
   }
+  if (isHtmlStringChild && textFragment && !hasDynamicAttrs) {
+    const accessor = textFragment.rendered.replace(/^dt\(/, "").replace(/\)$/, "");
+    const refSuffix2 = renderedRef.rendered ? `, ${renderedRef.rendered}` : "";
+    return new RenderFragment(
+      `${indent.firstLine}adoptElement("${coordinate}", ${attributes2.rendered}, [dh(${accessor})]${refSuffix2})`,
+      Imports.for(Import.adoptElement).plus(Import.dynamicHtml).plus(textFragment.imports.minus(Import.dynamicText)).plus(renderedRef.imports).plus(attributes2.imports),
+      [...textFragment.validations, ...renderedRef.validations, ...attributes2.validations],
+      renderedRef.refs
+    );
+  }
   if (textFragment && !hasDynamicAttrs) {
     const accessor = textFragment.rendered.replace(/^dt\(/, "").replace(/\)$/, "");
     if (refName) {
@@ -20455,7 +20497,32 @@ function renderFunctionDeclaration(preRenderType) {
   return `export declare function render(options?: RenderElementOptions): ${preRenderType}`;
 }
 function renderTextNode(variables, text2, indent) {
-  return parseTextExpression(textEscape$1(text2), variables).map((_) => indent.firstLine + _);
+  return parseTextExpression(textEscape$1(decodeHtmlEntities(text2)), variables).map(
+    (_) => indent.firstLine + _
+  );
+}
+function tryRenderHtmlStringChild(childNodes, variables, indent) {
+  const htmlStringBindings = findHtmlStringBindings(childNodes, variables);
+  if (htmlStringBindings.length === 0)
+    return null;
+  if (childNodes.length !== 1 || childNodes[0].nodeType !== NodeType.TEXT_NODE) {
+    return new RenderFragment("", Imports.none(), [
+      `html-string binding {${htmlStringBindings[0]}} must be the sole child of its parent element, not mixed with sibling elements`
+    ]);
+  }
+  const text2 = (childNodes[0].innerText || "").trim();
+  if (text2 !== `{${htmlStringBindings[0]}}`) {
+    return new RenderFragment("", Imports.none(), [
+      `html-string binding {${htmlStringBindings[0]}} must be the sole child of its parent element, not mixed with other content`
+    ]);
+  }
+  const accessor = parseAccessor(htmlStringBindings[0], variables);
+  const accessorCode = accessor.render();
+  return new RenderFragment(
+    `${indent.firstLine}dh(${variables.currentVar} => ${accessorCode.rendered})`,
+    Imports.for(Import.dynamicHtml).plus(accessorCode.imports),
+    [...accessor.validations, ...accessorCode.validations]
+  );
 }
 function renderStyleAttribute(styleString, variables) {
   const { declarations, hasDynamic } = parseStyleDeclarations(styleString, variables);
@@ -20695,7 +20762,7 @@ function renderChildCompRef$1(element, { dynamicRef, variables, refNameGenerator
   return new RenderFragment(`${constName}()`, Imports.for(), [], refs);
 }
 function renderNode(node2, context) {
-  let { variables, importedSymbols, importedSandboxedSymbols, indent, importerMode } = context;
+  let { variables, importedSandboxedSymbols, indent, importerMode } = context;
   function de2(tagName, attributes2, children, ref, currIndent = indent) {
     const refWithPrefixComma = ref.rendered.length ? `, ${ref.rendered}` : "";
     const tagFunc = tagToNamespace(tagName, true, context.namespaces);
@@ -20753,6 +20820,22 @@ function renderNode(node2, context) {
       };
     }
     let childNodes = filterContentNodes(node2.childNodes, true);
+    const htmlStringChild = tryRenderHtmlStringChild(
+      childNodes,
+      contextForChildren.variables,
+      contextForChildren.indent.child().noFirstLineBreak()
+    );
+    if (htmlStringChild) {
+      let attributes22 = renderAttributes$1(htmlElement, contextForChildren);
+      let renderedRef2 = renderElementRef$1(htmlElement, contextForChildren);
+      return e2(
+        htmlElement.rawTagName,
+        attributes22,
+        htmlStringChild,
+        renderedRef2,
+        newContext.indent
+      );
+    }
     let childIndent = contextForChildren.indent.child();
     if (childNodes.length === 1 && childNodes[0].nodeType === NodeType.TEXT_NODE)
       childIndent = childIndent.noFirstLineBreak();
@@ -21347,7 +21430,7 @@ ${Indent.forceIndent(code, 4)},
         funcRepository)`
     );
   }
-  const { renderedRefsManager, refsManagerImport } = renderReferenceManager(
+  const { renderedRefsManager } = renderReferenceManager(
     renderedRoot.refs,
     ReferenceManagerTarget.element
   );
@@ -22273,8 +22356,9 @@ ${indent.firstLine}}`,
     );
     const closeTag = w(itemIndent, `'</${element.rawTagName}>'`);
     const itemBody = mergeServerFragments([openTag, coordinateW, children, closeTag]);
+    const safeArrayExpr = arrayExpr.includes("?.") ? `(${arrayExpr} ?? [])` : arrayExpr;
     return new RenderFragment(
-      `${indent.firstLine}for (const ${forEachVariables.currentVar} of ${arrayExpr}) {
+      `${indent.firstLine}for (const ${forEachVariables.currentVar} of ${safeArrayExpr}) {
 ${itemBody.rendered}
 ${indent.firstLine}}`,
       itemBody.imports,
@@ -22284,7 +22368,7 @@ ${indent.firstLine}}`,
   if (isSlowForEach(element)) {
     const slowForEachInfo = getSlowForEachInfo(element);
     if (slowForEachInfo) {
-      const { arrayName, jayIndex, jayTrackBy } = slowForEachInfo;
+      const { arrayName, jayIndex } = slowForEachInfo;
       const slowValidated = validateSlowForEachAccessor(arrayName, variables);
       if (isValidationError(slowValidated))
         return slowValidated;
@@ -22337,7 +22421,7 @@ function renderServerHeadlessInstance(element, context, contractName) {
   const coordResult = extractHeadlessCoordinate(element, contractName);
   if (isValidationError(coordResult))
     return coordResult;
-  const { instanceCoord, coordSegments, coordinateSuffix } = coordResult;
+  const { instanceCoord, coordinateSuffix } = coordResult;
   let instanceKeyExpr;
   if (context.insideForEach) {
     const trackByKeys = Object.keys(context.varMappings);
@@ -22555,8 +22639,9 @@ function renderServerForEachAsString(element, context) {
     variables: forEachVariables
   };
   const itemContent = renderServerElementAsString(element, itemContext);
+  const safeArrayExpr = arrayExpr.includes("?.") ? `(${arrayExpr} ?? [])` : arrayExpr;
   return new RenderFragment(
-    `${arrayExpr}.map((${forEachVariables.currentVar}) => ${itemContent.rendered}).join('')`,
+    `${safeArrayExpr}.map((${forEachVariables.currentVar}) => ${itemContent.rendered}).join('')`,
     itemContent.imports,
     itemContent.validations
   );
@@ -22776,14 +22861,24 @@ function renderServerElementContent(element, context, options) {
   }
   if (isVoid)
     return mergeServerFragments(parts);
+  const htmlStringBindings = findHtmlStringBindings(childNodes, variables);
+  if (htmlStringBindings.length > 0 && !dynamicTextFragment) {
+    return new RenderFragment("", Imports.none(), [
+      `html-string binding {${htmlStringBindings[0]}} must be the sole child of its parent element, not mixed with sibling elements`
+    ]);
+  }
   if (dynamicTextFragment) {
-    parts.push(
-      w(
-        indent,
-        `escapeHtml(String(${dynamicTextFragment.rendered}))`,
-        Imports.for(Import.escapeHtml)
-      )
-    );
+    if (htmlStringBindings.length > 0) {
+      parts.push(w(indent, `String(${dynamicTextFragment.rendered})`));
+    } else {
+      parts.push(
+        w(
+          indent,
+          `escapeHtml(String(${dynamicTextFragment.rendered}))`,
+          Imports.for(Import.escapeHtml)
+        )
+      );
+    }
   } else {
     const childContext = {
       ...context,

package/docs/contract-file-format.md

@@ -396,11 +396,12 @@ tags:
 
 ### Basic Types
 
-| Type      | Example             | Description       |
-| --------- | ------------------- | ----------------- |
-| `string`  | `dataType: string`  | Text values       |
-| `number`  | `dataType: number`  | Numeric values    |
-| `boolean` | `dataType: boolean` | True/false values |
+| Type          | Example                 | Description                                                   |
+| ------------- | ----------------------- | ------------------------------------------------------------- |
+| `string`      | `dataType: string`      | Text values                                                   |
+| `html-string` | `dataType: html-string` | HTML content (rich text, CMS output) — rendered via innerHTML |
+| `number`      | `dataType: number`      | Numeric values                                                |
+| `boolean`     | `dataType: boolean`     | True/false values                                             |
 
 ### Enum Types
 

package/docs/jay-html-docs.md

@@ -15,6 +15,7 @@ Each property in the YAML becomes a property of the component's view state, supp
 | Type            | Example                                                                      | Description                          |
 | --------------- | ---------------------------------------------------------------------------- | ------------------------------------ |
 | `string`        | `text: string`                                                               | Text values                          |
+| `html-string`   | `richContent: html-string`                                                   | HTML content (rich text, CMS output) |
 | `number`        | `count: number`                                                              | Numeric values                       |
 | `boolean`       | `isVisible: boolean`                                                         | True/false values                    |
 | `object`        | <code>user: </br>&nbsp;&nbsp;name: string</br>&nbsp;&nbsp;age: number</code> | Nested object structures             |

package/package.json

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