@jxsuite/studio 5.0.0 → 5.2.0

package/dist/iframe-entry.js

@@ -28,7 +28,7 @@ var __chunks = (base, ids, nodes, entry) => {
   __chunkSeen ||= {};
   __preload(ids[entry], 1);
 };
-__chunks(import.meta.url,["f4ktqr2q","a73p0pqm","eptb614w","abk6qyee","780pvfbv","3sqv46sn","xgg3kfw7","yy10wk9r","5cndyft8","sp6tna8v","47z3ytva","2r16ez41","g7nm1rgb","t0n6h2rn","wbp1cdws","xbh5bhtr","v17df7b8","anwybnkn","44ez96fc","5e7jev23","s890b918","6v2ac08j","q99sy9rf","nbyxee1y","15g3n6xv","b27vq81n"],[["./iframe-entry.js"],["./chunks/tree-a73p0pqm.js"],["./chunks/tooltip-eptb614w.js",23],["./chunks/textfield-abk6qyee.js"],["./chunks/toast-780pvfbv.js",24],["./chunks/toast-host-3sqv46sn.js",24],["./chunks/color-xgg3kfw7.js",25],["./chunks/icons-yy10wk9r.js"],["./chunks/number-field-5cndyft8.js"],["./chunks/action-group-sp6tna8v.js"],["./chunks/popover-47z3ytva.js",23],["./chunks/select-2r16ez41.js"],["./chunks/split-g7nm1rgb.js"],["./chunks/swatch-group-t0n6h2rn.js"],["./chunks/tabs-wbp1cdws.js"],["./chunks/toolbar-xbh5bhtr.js"],["./chunks/color-area-v17df7b8.js",25],["./chunks/color-field-anwybnkn.js",25,23],["./chunks/color-slider-44ez96fc.js",25],["./chunks/combobox-5e7jev23.js",23],["./chunks/dialog-s890b918.js"],["./chunks/listbox-6v2ac08j.js"],["./chunks/menu-q99sy9rf.js",23],["./chunks/iframe-entry-nbyxee1y.js"],["./chunks/iframe-entry-15g3n6xv.js"],["./chunks/iframe-entry-b27vq81n.js"]],0);
+__chunks(import.meta.url,["e088w1ns","a73p0pqm","eptb614w","abk6qyee","780pvfbv","3sqv46sn","xgg3kfw7","yy10wk9r","5cndyft8","sp6tna8v","47z3ytva","2r16ez41","g7nm1rgb","t0n6h2rn","wbp1cdws","xbh5bhtr","v17df7b8","anwybnkn","44ez96fc","5e7jev23","s890b918","6v2ac08j","q99sy9rf","nbyxee1y","15g3n6xv","b27vq81n"],[["./iframe-entry.js"],["./chunks/tree-a73p0pqm.js"],["./chunks/tooltip-eptb614w.js",23],["./chunks/textfield-abk6qyee.js"],["./chunks/toast-780pvfbv.js",24],["./chunks/toast-host-3sqv46sn.js",24],["./chunks/color-xgg3kfw7.js",25],["./chunks/icons-yy10wk9r.js"],["./chunks/number-field-5cndyft8.js"],["./chunks/action-group-sp6tna8v.js"],["./chunks/popover-47z3ytva.js",23],["./chunks/select-2r16ez41.js"],["./chunks/split-g7nm1rgb.js"],["./chunks/swatch-group-t0n6h2rn.js"],["./chunks/tabs-wbp1cdws.js"],["./chunks/toolbar-xbh5bhtr.js"],["./chunks/color-area-v17df7b8.js",25],["./chunks/color-field-anwybnkn.js",25,23],["./chunks/color-slider-44ez96fc.js",25],["./chunks/combobox-5e7jev23.js",23],["./chunks/dialog-s890b918.js"],["./chunks/listbox-6v2ac08j.js"],["./chunks/menu-q99sy9rf.js",23],["./chunks/iframe-entry-nbyxee1y.js"],["./chunks/iframe-entry-15g3n6xv.js"],["./chunks/iframe-entry-b27vq81n.js"]],0);
 
 // src/canvas/iframe-channel.ts
 var ENVELOPE = "jx:canvas";
@@ -868,7 +868,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);
@@ -3795,6 +3799,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) {
@@ -3882,7 +3887,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     }
     pauseTracking();
     try {
-      reconcile(list, keys);
+      underInstancePath(reexpand(instancePath), () => reconcile(list, keys));
     } finally {
       resetTracking();
     }
@@ -3946,6 +3951,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);
   }
@@ -3993,13 +3999,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();
     }
@@ -4659,6 +4665,65 @@ async function registerElements(elements, base, ctx) {
     await defineElement(doc, href);
   }
 }
+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;
@@ -4701,6 +4766,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;
@@ -4708,6 +4775,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;
@@ -4720,6 +4788,7 @@ async function defineElement(source, baseUrl) {
             }
             if (key in (def.state ?? {})) {
               state[key] = val;
+              supplied[key] = val;
             }
           }
         } catch {}
@@ -4734,6 +4803,7 @@ async function defineElement(source, baseUrl) {
         }
         if (key in (def.state ?? {})) {
           state[key] = this.getAttribute(name);
+          supplied[key] = this.getAttribute(name);
           this.removeAttribute(name);
         }
       }
@@ -4743,8 +4813,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;
@@ -4774,9 +4862,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;
       }
@@ -5074,13 +5164,14 @@ function adjacentBlock(container, path, direction, isEditable) {
 
 // ../site/src/site-style.ts
 var SITE_STYLE_ID = "jx-site-style";
-function buildSiteStyleCSS(siteStyle, mediaQueries, transpose) {
+function buildSiteStyleCSS(siteStyle, mediaQueries, transpose, resolveValue) {
   const rules = [];
   const push = (style, selector) => {
     for (const rule of buildStyleRules(style, {
       mediaQueries,
       scope: selector,
-      transposeValue: transpose
+      transposeValue: transpose,
+      ...resolveValue ? { resolveValue: (property, value) => resolveValue(property, value, selector) } : {}
     })) {
       rules.push(rule.text);
     }
@@ -9778,5 +9869,5 @@ export {
   startCanvasIframe
 };
 
-//# debugId=54293E8C2DCDA4AF64756E2164756E21
+//# debugId=79BB51FCC1FC2ADA64756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map

package/dist/studio.css

@@ -7366,7 +7366,6 @@
 
 .tabulator .tabulator-header .tabulator-frozen-rows-holder {
   display: inline-block;
-  padding-top: 1em;
 }
 
 .tabulator .tabulator-header .tabulator-frozen-rows-holder:empty {
@@ -7433,7 +7432,7 @@
 .tabulator .tabulator-tableholder .tabulator-range-overlay {
   pointer-events: none;
   position: absolute;
-  z-index: 10;
+  z-index: 11;
   inset: 0;
 }