@jxsuite/runtime 4.0.0 → 4.0.2

package/dist/runtime.js

@@ -700,7 +700,11 @@ function reactiveReadArray(array) {
   if (raw === array)
     return raw;
   track(raw, "iterate", ARRAY_ITERATE_KEY);
-  return isShallow(array) ? raw : raw.map(toReactive);
+  if (isShallow(array))
+    return raw;
+  if (!isReadonly(array))
+    return raw.map(toReactive);
+  return isReactive(array) ? raw.map((item) => toReadonly(toReactive(item))) : raw.map(toReadonly);
 }
 function shallowReadArray(arr) {
   track(arr = toRaw(arr), "iterate", ARRAY_ITERATE_KEY);
@@ -3461,16 +3465,10 @@ function sheetStateFor(doc) {
 var elementStyles = new WeakMap;
 var SCOPE_TOKEN = "\x01jx-scope\x01";
 function rewriteScratch(state) {
-  if (!state.scratch) {
-    return;
-  }
   state.scratch.replaceAll([...state.scratchOwners.values()].flat());
 }
 function releaseInterned(state, table, key) {
   const entry = table.get(key);
-  if (!entry) {
-    return;
-  }
   entry.refs -= 1;
   if (entry.refs <= 0) {
     table.delete(key);
@@ -3675,6 +3673,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 +3761,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     }
     pauseTracking();
     try {
-      reconcile(list, keys);
+      underInstancePath(reexpand(instancePath), () => reconcile(list, keys));
     } finally {
       resetTracking();
     }
@@ -3826,6 +3825,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 +3873,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();
     }
@@ -4130,9 +4130,6 @@ async function importAndInstantiate(def, src, exportName, base) {
 }
 async function resolveClassJson(def, state, key, base) {
   const src = def.$src;
-  if (!src) {
-    throw new Error(`Jx: class entry '${key}' has no $src`);
-  }
   let classDef;
   const isBareSpecifier = !src.startsWith(".") && !src.startsWith("/") && !src.startsWith("http") && !src.startsWith("file:");
   if (isBareSpecifier) {
@@ -4583,6 +4580,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 +4681,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 +4690,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 +4703,7 @@ async function defineElement(source, baseUrl) {
             }
             if (key in (def.state ?? {})) {
               state[key] = val;
+              supplied[key] = val;
             }
           }
         } catch {}
@@ -4658,6 +4718,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,7 +4728,25 @@ 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)) {
@@ -4698,9 +4777,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 +4882,7 @@ export {
   COLOR_SCHEME_ATTR,
   COLOR_SCHEME_STORAGE_KEY,
   Jx,
+  MAX_COMPONENT_NESTING,
   RESERVED_KEYS,
   SUPPORTED_SCHEMA_VERSION,
   _resetPrivatePropWarnings,
@@ -4859,5 +4941,5 @@ export {
   transposeCanvasUnits
 };
 
-//# debugId=A89AF23A7F8742C664756E2164756E21
+//# debugId=AA34AE79F7363B3164756E2164756E21
 //# sourceMappingURL=runtime.js.map