@jxsuite/runtime 4.0.0 → 4.0.1

package/dist/runtime.js

@@ -3675,6 +3675,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   parentEl.append(anchor);
   const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef, key: keyRef } = arrayDef;
   const keyPointer = isRefObj(keyRef) ? keyRef.$ref : null;
+  const instancePath = _instancePath;
   let warned = false;
   const warnOnce = (message) => {
     if (!warned) {
@@ -3762,7 +3763,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     }
     pauseTracking();
     try {
-      reconcile(list, keys);
+      underInstancePath(reexpand(instancePath), () => reconcile(list, keys));
     } finally {
       resetTracking();
     }
@@ -3826,6 +3827,7 @@ function resolveTagName(tagName, scope) {
 function renderSwitch(def, state, options) {
   const path = options?._path ?? [];
   const container = document.createElement(resolveTagName(def.tagName, state));
+  const instancePath = _instancePath;
   if (options?.onNodeCreated) {
     options.onNodeCreated(container, path, def, state);
   }
@@ -3873,13 +3875,13 @@ function renderSwitch(def, state, options) {
           return;
         }
         container.replaceChildren();
-        scope.run(() => container.append(renderNode(doc, childScope, childOpts)));
+        underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(doc, childScope, childOpts))));
       }).catch((error) => console.error("Jx $switch: failed to load external case", caseDef.$ref, error));
       return;
     }
     pauseTracking();
     try {
-      scope.run(() => container.append(renderNode(caseDef, state, childOpts)));
+      underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(caseDef, state, childOpts))));
     } finally {
       resetTracking();
     }
@@ -4583,6 +4585,65 @@ function injectHead(entries, _base) {
     document.head.append(el);
   }
 }
+var MAX_COMPONENT_NESTING = 32;
+var ROOT_INSTANCE_PATH = { expansion: 0, frames: [] };
+var _instancePath = ROOT_INSTANCE_PATH;
+function underInstancePath(path, fn) {
+  const was = _instancePath;
+  _instancePath = path;
+  try {
+    return fn();
+  } finally {
+    _instancePath = was;
+  }
+}
+function reexpand(path) {
+  return { expansion: path.frames.length, frames: path.frames };
+}
+function samePropValue(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (!isPlainData(a) || !isPlainData(b)) {
+    return false;
+  }
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+function isPlainData(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const raw = toRaw(value);
+  if (Array.isArray(raw)) {
+    return true;
+  }
+  const proto = Object.getPrototypeOf(raw);
+  return proto === Object.prototype || proto === null;
+}
+function sameFrame(a, b) {
+  if (a.tag !== b.tag) {
+    return false;
+  }
+  const keys = Object.keys(a.props);
+  if (keys.length !== Object.keys(b.props).length) {
+    return false;
+  }
+  return keys.every((key) => Object.hasOwn(b.props, key) && samePropValue(a.props[key], b.props[key]));
+}
+function extendInstancePath(path, frame) {
+  const chain = [...path.frames.map((f) => f.tag), frame.tag].join(" → ");
+  if (path.frames.slice(path.expansion).some((f) => sameFrame(f, frame))) {
+    throw new Error(`Component <${frame.tag}> renders itself: ${chain}. A component cannot appear inside its own ` + `definition with the same props — the expansion would never end.`);
+  }
+  if (path.frames.length >= MAX_COMPONENT_NESTING) {
+    throw new Error(`Component nesting exceeds ${MAX_COMPONENT_NESTING} levels: ${chain}. A component that renders itself with changing props needs a case that stops.`);
+  }
+  return { expansion: path.expansion, frames: [...path.frames, frame] };
+}
 var _definedSources = new Set;
 async function defineElement(source, baseUrl) {
   let base = baseUrl;
@@ -4625,6 +4686,8 @@ async function defineElement(source, baseUrl) {
         return;
       }
       this._jxInitialized = true;
+      const enclosingPath = _instancePath;
+      const supplied = {};
       const live = _elementDefs.get(tagName) ?? { base: initialBase, doc: initialDef };
       const def = live.doc;
       const defBase = live.base;
@@ -4632,6 +4695,7 @@ async function defineElement(source, baseUrl) {
       for (const attr of observedAttrs) {
         if (this.hasAttribute(attr)) {
           absorbAttribute(state, attr, this.getAttribute(attr));
+          supplied[attr] = this.getAttribute(attr);
         }
       }
       const propsAttr = this.dataset.jxProps;
@@ -4644,6 +4708,7 @@ async function defineElement(source, baseUrl) {
             }
             if (key in (def.state ?? {})) {
               state[key] = val;
+              supplied[key] = val;
             }
           }
         } catch {}
@@ -4658,6 +4723,7 @@ async function defineElement(source, baseUrl) {
         }
         if (key in (def.state ?? {})) {
           state[key] = this.getAttribute(name);
+          supplied[key] = this.getAttribute(name);
           this.removeAttribute(name);
         }
       }
@@ -4667,8 +4733,26 @@ async function defineElement(source, baseUrl) {
         }
         if (key in this && this[key] !== undefined && instanceSupplies(this, key)) {
           state[key] = this[key];
+          supplied[key] = this[key];
         }
       }
+      let ownPath;
+      try {
+        ownPath = extendInstancePath(enclosingPath, { props: supplied, tag: tagName });
+      } catch (error) {
+        this.replaceChildren();
+        if (!this.isConnected) {
+          return;
+        }
+        console.error(`Jx: <${tagName}> was not rendered:`, error);
+        this.dispatchEvent(new ErrorEvent("jx-error", {
+          bubbles: true,
+          composed: true,
+          error,
+          message: error instanceof Error ? error.message : String(error)
+        }));
+        return;
+      }
       for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
@@ -4698,9 +4782,11 @@ async function defineElement(source, baseUrl) {
       const wasInside = _canvasInsideStampedHost;
       _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
       try {
-        for (const childDef of children) {
-          this.append(renderNode(childDef, state));
-        }
+        underInstancePath(ownPath, () => {
+          for (const childDef of children) {
+            this.append(renderNode(childDef, state));
+          }
+        });
       } finally {
         _canvasInsideStampedHost = wasInside;
       }
@@ -4801,6 +4887,7 @@ export {
   COLOR_SCHEME_ATTR,
   COLOR_SCHEME_STORAGE_KEY,
   Jx,
+  MAX_COMPONENT_NESTING,
   RESERVED_KEYS,
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
@@ -4859,5 +4946,5 @@ export {
   transposeCanvasUnits
 };
 
-//# debugId=A89AF23A7F8742C664756E2164756E21
+//# debugId=52C255A4DA099CA964756E2164756E21
 //# sourceMappingURL=runtime.js.map