@jay-framework/compiler-jay-html 0.17.4 → 0.18.0

package/dist/index.d.cts

@@ -270,7 +270,7 @@ declare function assignCoordinatesToJayHtml(jayHtml: string, headlessContractNam
 /**
  * Assign `jay-coordinate-base` and `jay-scope` attributes to elements in the DOM tree.
  *
- * Must run after slow-render (which resolves slow conditions, unrolls slowForEach,
+ * Must run after slow-render (which resolves slow conditions
  * and wraps multi-child headless inline templates).
  *
  * Mutates the DOM in place. Returns the serialized DOM for debug output.

package/dist/index.js

@@ -5891,18 +5891,6 @@ function walkChildren(parent, parentCoord, scopeId, options, counter) {
         continue;
       }
     }
-    const slowForEachAttr = element.getAttribute("slowForEach");
-    if (slowForEachAttr) {
-      const jayTrackBy = element.getAttribute("jayTrackBy");
-      if (jayTrackBy) {
-        const itemScopeId = nextScopeId(counter);
-        element.setAttribute(SCOPE_ATTR, itemScopeId);
-        const itemCoord = `${itemScopeId}/0`;
-        element.setAttribute(COORD_ATTR$1, itemCoord);
-        walkChildren(element, itemCoord, itemScopeId, options, counter);
-        continue;
-      }
-    }
     const coord = `${parentCoord}/${childCounter}`;
     element.setAttribute(COORD_ATTR$1, coord);
     childCounter++;
@@ -13446,27 +13434,6 @@ function isConditional(node2) {
 function isForEach(node2) {
   return node2.nodeType !== NodeType.TEXT_NODE && node2.hasAttribute("forEach");
 }
-function isSlowForEach(node2) {
-  return node2.nodeType !== NodeType.TEXT_NODE && node2.hasAttribute("slowForEach");
-}
-function getSlowForEachInfo(node2) {
-  if (!isSlowForEach(node2))
-    return void 0;
-  const element = node2;
-  const arrayName = element.getAttribute("slowForEach");
-  const jayIndex = element.getAttribute("jayIndex");
-  const jayTrackBy = element.getAttribute("jayTrackBy");
-  const trackBy = element.getAttribute("trackBy") || "id";
-  if (!arrayName || jayIndex === null || !jayTrackBy) {
-    return void 0;
-  }
-  return {
-    arrayName,
-    jayIndex: parseInt(jayIndex, 10),
-    jayTrackBy,
-    trackBy
-  };
-}
 function isRecurse(node2) {
   return node2.nodeType !== NodeType.TEXT_NODE && node2.rawTagName?.toLowerCase() === "recurse";
 }
@@ -14451,9 +14418,7 @@ const DIRECTIVE_ATTRIBUTES = /* @__PURE__ */ new Set([
   "foreach",
   "trackby",
   "ref",
-  "slowforeach",
-  "jayindex",
-  "jaytrackby",
+  "slow",
   "jay-coordinate-base",
   "jay-scope",
   AsyncDirectiveTypes.loading.directive,
@@ -14481,18 +14446,6 @@ function validateForEachAccessor(forEach, variables) {
     ]);
   return { accessor, childVariables: variables.childVariableFor(accessor) };
 }
-function validateSlowForEachAccessor(arrayName, variables) {
-  const accessor = parseAccessor(arrayName, variables);
-  if (accessor.resolvedType === JayUnknown)
-    return new RenderFragment("", Imports.none(), [
-      `slowForEach directive - failed to resolve array type [slowForEach=${arrayName}]`
-    ]);
-  if (!isArrayType$1(accessor.resolvedType))
-    return new RenderFragment("", Imports.none(), [
-      `slowForEach directive - resolved type is not an array [slowForEach=${arrayName}]`
-    ]);
-  return { accessor, childVariables: variables.childVariableFor(accessor) };
-}
 function validateAsyncAccessor(property, directive, variables) {
   const accessor = parseAccessor(property, variables);
   if (accessor.resolvedType === JayUnknown)
@@ -14717,7 +14670,6 @@ function renderBridge(types2, rootBodyElement, importStatements, elementType, pr
     headlessInstanceDefs: [],
     // Not used for bridge
     headlessInstanceCounter: { count: 0 },
-    coordinatePrefix: [],
     coordinateCounters: /* @__PURE__ */ new Map()
   });
   renderedBridge = optimizeRefs(renderedBridge, headlessImports);
@@ -14765,7 +14717,6 @@ function renderSandboxRoot(types2, rootBodyElement, importStatements, headlessIm
     headlessInstanceDefs: [],
     // Not used for sandbox
     headlessInstanceCounter: { count: 0 },
-    coordinatePrefix: [],
     coordinateCounters: /* @__PURE__ */ new Map()
   });
   let refsPart = renderedBridge.rendered.length > 0 ? `
@@ -19666,7 +19617,6 @@ function buildRenderContext(context) {
     headlessInstanceDefs: context.headlessInstanceDefs,
     headlessInstanceCounter: context.headlessInstanceCounter,
     // Element target still uses its own coordinate logic (DL#103: out of scope)
-    coordinatePrefix: [],
     coordinateCounters: /* @__PURE__ */ new Map()
   };
 }
@@ -19721,7 +19671,7 @@ function renderHydrateElement(element, context) {
     );
     const createAttributes = renderAttributes$1(element, createRenderContext);
     const needDynamicElement = createChildNodes.some(
-      (_) => _.nodeType === NodeType.ELEMENT_NODE && (isConditional(_) || isForEach(_) || isSlowForEach(_) || checkAsync(_).isAsync)
+      (_) => _.nodeType === NodeType.ELEMENT_NODE && (isConditional(_) || isForEach(_) || checkAsync(_).isAsync)
     );
     const createElementFunc = needDynamicElement ? "de" : "e";
     const createElementImport = needDynamicElement ? Import.dynamicElement : Import.element;
@@ -19740,6 +19690,33 @@ ${context.indent.firstLine}    ${createBody})`,
       childContent.refs
     );
   }
+  if (isConditional(element) && context.interactivePaths.size > 0) {
+    const condition = element.getAttribute("if");
+    const viewStateVars = new Variables(
+      context.variables.currentType,
+      void 0,
+      0,
+      "viewState"
+    );
+    const renderedCondition = parseServerCondition(condition, viewStateVars);
+    const coordinate = element.getAttribute(COORD_ATTR) || "0";
+    const childContent = renderHydrateElementContent(
+      element,
+      context,
+      renderContext,
+      coordinate,
+      true
+    );
+    const adoption = childContent.rendered.trim();
+    if (adoption) {
+      return new RenderFragment(
+        `${context.indent.firstLine}...(${renderedCondition.rendered} ? [${adoption}] : [])`,
+        childContent.imports.plus(Import.adoptElement),
+        [...renderedCondition.validations, ...childContent.validations],
+        childContent.refs
+      );
+    }
+  }
   if (isForEach(element)) {
     const { variables, indent } = context;
     const forEach = element.getAttribute("forEach");
@@ -19874,7 +19851,7 @@ ${indent.firstLine}    ]` : "() => []";
     );
     const createAttributes = renderAttributes$1(element, createRenderContext);
     const forEachNeedsDynamic = createChildNodes.some(
-      (_) => _.nodeType === NodeType.ELEMENT_NODE && (isConditional(_) || isForEach(_) || isSlowForEach(_) || checkAsync(_).isAsync)
+      (_) => _.nodeType === NodeType.ELEMENT_NODE && (isConditional(_) || isForEach(_) || checkAsync(_).isAsync)
     );
     const forEachElementFunc = forEachNeedsDynamic ? "de" : "e";
     const forEachElementImport = forEachNeedsDynamic ? Import.dynamicElement : Import.element;
@@ -19903,98 +19880,6 @@ ${indent.firstLine})`,
     );
     return nestRefs(forEachAccessor.terms, hydrateForEachFragment);
   }
-  if (isSlowForEach(element)) {
-    const slowForEachInfo = getSlowForEachInfo(element);
-    if (!slowForEachInfo) {
-      return new RenderFragment("", Imports.none(), [
-        `slowForEach element is missing required attributes (slowForEach, jayIndex, jayTrackBy)`
-      ]);
-    }
-    const { arrayName, jayIndex, jayTrackBy } = slowForEachInfo;
-    const { variables, indent } = context;
-    const slowValidated = validateSlowForEachAccessor(arrayName, variables);
-    if (isValidationError(slowValidated))
-      return slowValidated;
-    const { accessor: arrayAccessor, childVariables: slowForEachVariables } = slowValidated;
-    const parentTypeName = variables.currentType.name;
-    const itemTypeName = slowForEachVariables.currentType.name;
-    const paramName = arrayAccessor.rootVar;
-    const getItemsFragment = arrayAccessor.render().map((_) => `(${paramName}: ${parentTypeName}) => ${_}`);
-    const itemContext = {
-      ...context,
-      variables: slowForEachVariables,
-      indent: indent.child().child(),
-      dynamicRef: true,
-      insideSlowForEach: true
-    };
-    const itemChildNodes = filterContentNodes(element.childNodes);
-    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");
-        const itemCoord = element.getAttribute(COORD_ATTR) || "";
-        callbackBody = `adoptDynamicElement('${itemCoord}', {}, [
-${childrenArr},
-${indent.firstLine}    ])`;
-        callbackImports = callbackImports.plus(Import.adoptDynamicElement);
-      } else {
-        const itemCoord = element.getAttribute(COORD_ATTR) || "";
-        const childrenArr = nonEmptyChildren.map((f) => f.rendered).join(",\n");
-        callbackBody = `adoptElement('${itemCoord}', {}, [
-${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}() => ${callbackBody}
-${indent.firstLine})`,
-      Imports.for(Import.slowForEachItem).plus(getItemsFragment.imports).plus(callbackImports),
-      [...getItemsFragment.validations, ...callbackValidations],
-      callbackRefs
-    );
-    return nestRefs(arrayName.split("."), slowForEachFragment);
-  }
   if (checkAsync(element).isAsync) {
     return RenderFragment.empty();
   }
@@ -20154,7 +20039,6 @@ ${adoptInlineBody.rendered}
       // inside headfull FS component templates can be detected (DL#123)
       headlessContractNames: renderContext.headlessContractNames,
       headlessImports: renderContext.headlessImports,
-      coordinatePrefix: [],
       coordinateCounters: /* @__PURE__ */ new Map()
     };
     const createRenderedChildren = childNodes.map((_) => renderNode(_, createRenderContext)).reduce(
@@ -20505,7 +20389,6 @@ function renderHydrate(types2, body, importStatements, elementType, preRenderTyp
     headlessInstanceDefs: [],
     headlessInstanceCounter: { count: 0 },
     insideFastForEach: false,
-    insideSlowForEach: false,
     interactivePaths: buildInteractivePaths(contract)
   };
   const rootElement = ensureSingleChildElement(body);
@@ -20896,7 +20779,7 @@ function renderNode(node2, context) {
     if (childNodes.length === 1 && childNodes[0].nodeType === NodeType.TEXT_NODE)
       childIndent = childIndent.noFirstLineBreak();
     let needDynamicElement = childNodes.map(
-      (_) => isConditional(_) || isForEach(_) || isSlowForEach(_) || isRecurseWithData(_) || isWithData(_) || checkAsync(_).isAsync
+      (_) => isConditional(_) || isForEach(_) || isRecurseWithData(_) || isWithData(_) || checkAsync(_).isAsync
     ).reduce((prev, current) => prev || current, false);
     let childRenders = childNodes.length === 0 ? RenderFragment.empty() : childNodes.map((_) => renderNode(_, contextForChildren)).reduce(
       (prev, current) => RenderFragment.merge(prev, current, ",\n"),
@@ -21073,7 +20956,7 @@ ${renderedChildren.rendered}
     if (explicitRef) {
       coordinateRef = explicitRef;
     } else {
-      const counterKey = [...newContext.coordinatePrefix, contractName].join("/");
+      const counterKey = contractName;
       const localIndex = newContext.coordinateCounters.get(counterKey) ?? 0;
       newContext.coordinateCounters.set(counterKey, localIndex + 1);
       coordinateRef = `AR${localIndex}`;
@@ -21081,7 +20964,7 @@ ${renderedChildren.rendered}
     const isInsideForEach = newContext.insideFastForEach;
     const coordinateSuffix = `${contractName}:${coordinateRef}`;
     const instanceCoordBase = htmlElement.getAttribute("jay-coordinate-base");
-    const coordinateKey2 = isInsideForEach ? void 0 : instanceCoordBase || [...newContext.coordinatePrefix, coordinateSuffix].join("/");
+    const coordinateKey2 = isInsideForEach ? void 0 : instanceCoordBase || coordinateSuffix;
     const renderFnCode = `
 // Inline template for headless component: ${contractName} #${idx}
 type ${elementType} = JayElement<${interactiveViewStateType}, ${refsTypeName}>;
@@ -21268,43 +21151,6 @@ const ${componentSymbol} = makeHeadlessInstanceComponent(
           forEachAccessPath,
           renderForEach(forEachFragment, forEachVariables, trackBy, childElement)
         );
-      } else if (isSlowForEach(htmlElement)) {
-        const slowForEachInfo = getSlowForEachInfo(htmlElement);
-        if (!slowForEachInfo) {
-          return new RenderFragment("", Imports.none(), [
-            `slowForEach element is missing required attributes (slowForEach, jayIndex, jayTrackBy)`
-          ]);
-        }
-        const { arrayName, jayIndex, jayTrackBy } = slowForEachInfo;
-        const slowValidated = validateSlowForEachAccessor(arrayName, variables);
-        if (isValidationError(slowValidated))
-          return slowValidated;
-        const { accessor: arrayAccessor, childVariables: slowForEachVariables } = slowValidated;
-        context.usedComponentImports.add(slowForEachVariables.currentType.name);
-        let newContext = {
-          ...context,
-          variables: slowForEachVariables,
-          indent: indent.child().noFirstLineBreak().withLastLineBreak(),
-          dynamicRef: true,
-          isInsideGuard: true,
-          // Mark that we're inside a guard
-          coordinatePrefix: [...context.coordinatePrefix, jayTrackBy]
-        };
-        let childElement = renderHtmlElement(htmlElement, newContext);
-        const parentTypeName = variables.currentType.name;
-        const itemTypeName = slowForEachVariables.currentType.name;
-        const paramName = arrayAccessor.rootVar;
-        const getItemsFragment = arrayAccessor.render().map((_) => `(${paramName}: ${parentTypeName}) => ${_}`);
-        const slowForEachFragment = new RenderFragment(
-          `${indent.firstLine}slowForEachItem<${parentTypeName}, ${itemTypeName}>(${getItemsFragment.rendered}, ${jayIndex}, '${jayTrackBy}',
-${indent.firstLine}() => ${childElement.rendered}
-${indent.firstLine})`,
-          childElement.imports.plus(Import.slowForEachItem).plus(getItemsFragment.imports),
-          [...getItemsFragment.validations, ...childElement.validations],
-          childElement.refs,
-          childElement.recursiveRegions
-        );
-        return nestRefs(arrayName.split("."), slowForEachFragment);
       } else if (checkAsync(htmlElement).isAsync) {
         const asyncDirective = checkAsync(htmlElement);
         const asyncProperty = htmlElement.getAttribute(asyncDirective.directive);
@@ -21443,8 +21289,6 @@ function renderFunctionImplementation$1(types2, rootBodyElement, importStatement
       // Accumulator for inline template definitions
       headlessInstanceCounter,
       // Counter for unique naming
-      coordinatePrefix: [],
-      // Root has empty coordinate prefix
       coordinateCounters: /* @__PURE__ */ new Map()
       // Scope-level counter for unique coordinates
     });
@@ -21697,6 +21541,9 @@ function generateElementBridgeFile(jayFile) {
 }
 function generateElementHydrateFile(jayFile, importerMode) {
   const types2 = generateTypes(jayFile.types);
+  const headlessImports = jayFile.headlessImports?.filter((h) => !h.key) ?? [];
+  const headlessContractNames = new Set(headlessImports.map((h) => h.contractName));
+  assignCoordinates(jayFile.body, { headlessContractNames });
   const {
     renderedRefs,
     renderedElement,
@@ -22422,48 +22269,6 @@ ${indent.firstLine}}`,
       itemBody.validations
     );
   }
-  if (isSlowForEach(element)) {
-    const slowForEachInfo = getSlowForEachInfo(element);
-    if (slowForEachInfo) {
-      const { arrayName, jayIndex } = slowForEachInfo;
-      const slowValidated = validateSlowForEachAccessor(arrayName, variables);
-      if (isValidationError(slowValidated))
-        return slowValidated;
-      const { accessor: arrayAccessor, childVariables: slowForEachVariables } = slowValidated;
-      const arrayExpr = arrayAccessor.render().rendered;
-      const itemVar = slowForEachVariables.currentVar;
-      const itemContext = {
-        ...context,
-        variables: slowForEachVariables,
-        indent,
-        insideSlowForEach: true
-      };
-      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
-        };
-        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);
 }
 function renderServerHeadlessInstance(element, context, contractName) {
@@ -22901,7 +22706,7 @@ function renderServerElementContent(element, context, options) {
     }
   }
   const refName = element.attributes.ref ? camelCase(element.attributes.ref) : null;
-  const needsCoordinate = options?.isRoot === true || isConditional(element) && conditionIsInteractive(element.getAttribute("if"), context.interactivePaths) || dynamicTextFragment !== null || refName !== null || hasDynamicAttributeBindings(element, variables) || hasInteractiveChildElements(childNodes) || hasMixedContentDynamicTextInteractive(childNodes, context.interactivePaths);
+  const needsCoordinate = options?.isRoot === true || isConditional(element) || dynamicTextFragment !== null || refName !== null || hasDynamicAttributeBindings(element, variables) || hasInteractiveChildElements(childNodes) || hasMixedContentDynamicTextInteractive(childNodes, context.interactivePaths);
   const coordTemplate = needsCoordinate ? element.getAttribute(COORD_ATTR) : null;
   const isVoid = voidElements.has(element.rawTagName.toLowerCase());
   const closeTag = isVoid ? " />" : ">";
@@ -23090,7 +22895,6 @@ function generateServerElementFile(jayFile, _options) {
     headlessInstanceCounter: { count: 0 },
     varMappings: {},
     insideForEach: false,
-    insideSlowForEach: false,
     interactivePaths: buildInteractivePaths(jayFile.contract)
   };
   const rendered = renderServerElementContent(rootElement.val, context, {
@@ -29998,37 +29802,6 @@ function resolveTextBindings(text2, contextData, phaseMap, contextPath = "") {
   return new WithValidations(resolved, validationErrors);
 }
 function transformElement(element, phaseMap, contextPath, contextData) {
-  const forEachAttr = element.getAttribute("forEach");
-  if (forEachAttr) {
-    const fullPath = contextPath ? `${contextPath}.${forEachAttr}` : forEachAttr;
-    const phaseInfo = phaseMap.get(fullPath);
-    if (phaseInfo?.phase === "slow") {
-      const arrayValue = getValueByPath(contextData, forEachAttr);
-      if (Array.isArray(arrayValue)) {
-        const trackBy = element.getAttribute("trackBy") || "id";
-        const itemResults = arrayValue.map((item, index) => {
-          const cloned = element.clone();
-          cloned.removeAttribute("forEach");
-          cloned.removeAttribute("foreach");
-          cloned.removeAttribute("trackBy");
-          cloned.removeAttribute("trackby");
-          cloned.setAttribute("slowForEach", forEachAttr);
-          cloned.setAttribute("jayIndex", String(index));
-          const trackByValue = item && typeof item === "object" ? String(item[trackBy] || index) : String(index);
-          cloned.setAttribute("jayTrackBy", trackByValue);
-          const itemData = item;
-          return transformChildren(cloned, phaseMap, fullPath, itemData).map(
-            (children) => {
-              cloned.innerHTML = "";
-              children.forEach((child) => cloned.appendChild(child));
-              return cloned;
-            }
-          );
-        });
-        return WithValidations.all(itemResults);
-      }
-    }
-  }
   const ifAttr = element.getAttribute("if");
   if (ifAttr) {
     const slowContext = {

package/package.json

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