@jxsuite/runtime 0.28.4 → 0.29.0

package/dist/runtime.js

@@ -51,6 +51,128 @@ function warn(msg, ...args) {
   console.warn(`[Vue warn] ${msg}`, ...args);
 }
 var activeEffectScope;
+
+class EffectScope {
+  constructor(detached = false) {
+    this.detached = detached;
+    this._active = true;
+    this._on = 0;
+    this.effects = [];
+    this.cleanups = [];
+    this._isPaused = false;
+    this._warnOnRun = true;
+    this.__v_skip = true;
+    if (!detached && activeEffectScope) {
+      if (activeEffectScope.active) {
+        this.parent = activeEffectScope;
+        this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1;
+      } else {
+        this._active = false;
+        this._warnOnRun = false;
+      }
+    }
+  }
+  get active() {
+    return this._active;
+  }
+  pause() {
+    if (this._active) {
+      this._isPaused = true;
+      let i, l;
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length;i < l; i++) {
+          this.scopes[i].pause();
+        }
+      }
+      for (i = 0, l = this.effects.length;i < l; i++) {
+        this.effects[i].pause();
+      }
+    }
+  }
+  resume() {
+    if (this._active) {
+      if (this._isPaused) {
+        this._isPaused = false;
+        let i, l;
+        if (this.scopes) {
+          for (i = 0, l = this.scopes.length;i < l; i++) {
+            this.scopes[i].resume();
+          }
+        }
+        for (i = 0, l = this.effects.length;i < l; i++) {
+          this.effects[i].resume();
+        }
+      }
+    }
+  }
+  run(fn) {
+    if (this._active) {
+      const currentEffectScope = activeEffectScope;
+      try {
+        activeEffectScope = this;
+        return fn();
+      } finally {
+        activeEffectScope = currentEffectScope;
+      }
+    } else if (this._warnOnRun) {
+      warn(`cannot run an inactive effect scope.`);
+    }
+  }
+  on() {
+    if (++this._on === 1) {
+      this.prevScope = activeEffectScope;
+      activeEffectScope = this;
+    }
+  }
+  off() {
+    if (this._on > 0 && --this._on === 0) {
+      if (activeEffectScope === this) {
+        activeEffectScope = this.prevScope;
+      } else {
+        let current = activeEffectScope;
+        while (current) {
+          if (current.prevScope === this) {
+            current.prevScope = this.prevScope;
+            break;
+          }
+          current = current.prevScope;
+        }
+      }
+      this.prevScope = undefined;
+    }
+  }
+  stop(fromParent) {
+    if (this._active) {
+      this._active = false;
+      let i, l;
+      for (i = 0, l = this.effects.length;i < l; i++) {
+        this.effects[i].stop();
+      }
+      this.effects.length = 0;
+      for (i = 0, l = this.cleanups.length;i < l; i++) {
+        this.cleanups[i]();
+      }
+      this.cleanups.length = 0;
+      if (this.scopes) {
+        for (i = 0, l = this.scopes.length;i < l; i++) {
+          this.scopes[i].stop(true);
+        }
+        this.scopes.length = 0;
+      }
+      if (!this.detached && this.parent && !fromParent) {
+        const last = this.parent.scopes.pop();
+        if (last && last !== this) {
+          this.parent.scopes[this.index] = last;
+          last.index = this.index;
+        }
+      }
+      this.parent = undefined;
+    }
+  }
+}
+function effectScope(detached) {
+  return new EffectScope(detached);
+}
 var activeSub;
 var pausedQueueEffects = /* @__PURE__ */ new WeakSet;
 
@@ -1362,7 +1484,7 @@ function resolveExprRef(ref2, state, event, iterCtx) {
   }
   return state[ref2] ?? null;
 }
-function resolveWritableRef(ref2, state, event, iterCtx) {
+function resolveWritableRef(ref2, state, _event, iterCtx) {
   if (ref2.startsWith("$map/")) {
     const parts = ref2.split("/");
     const [, key] = parts;
@@ -1812,10 +1934,11 @@ async function resolveFunction(def2, state, key, base) {
       }
       _moduleCache.set(src, mod);
     }
-    fn = mod[exportName] ?? mod.default?.[exportName];
-    if (typeof fn !== "function") {
+    const candidate = mod[exportName] ?? mod.default?.[exportName];
+    if (typeof candidate !== "function") {
       throw new TypeError(`Jx: export "${exportName}" not found or not a function in "${src}"`);
     }
+    fn = candidate;
   }
   const hasParams = (def2.parameters ?? def2.arguments ?? []).length > 0;
   let isComputed = false;
@@ -1901,20 +2024,27 @@ function renderNode(def2, state, options) {
   if (def2.$switch) {
     return renderSwitch(def2, localState, options);
   }
-  if (isMappedArray(def2.children)) {
-    return renderMappedArray(def2, def2.children, localState, options);
-  }
   const el = document.createElement(tagName);
   if (options?.onNodeCreated) {
-    options.onNodeCreated(el, path, def2);
+    options.onNodeCreated(el, path, def2, localState);
   }
   applyProperties(el, def2, localState);
   applyStyle(el, def2.style ?? {}, localState["$media"] ?? {}, localState);
   applyAttributes(el, def2.attributes ?? {}, localState);
-  const children = Array.isArray(def2.children) ? def2.children : [];
-  for (let i = 0;i < children.length; i++) {
-    const childOpts = options ? { ...options, _path: [...path, "children", i] } : undefined;
-    el.append(renderNode(children[i], localState, childOpts));
+  const kids = def2.children;
+  if (isMappedArray(kids)) {
+    const arrOpts = options ? { ...options, _path: [...path, "children"] } : undefined;
+    renderMappedArrayInto(el, kids, localState, arrOpts);
+  } else if (Array.isArray(kids)) {
+    for (let i = 0;i < kids.length; i++) {
+      const child = kids[i];
+      const childOpts = options ? { ...options, _path: [...path, "children", i] } : undefined;
+      if (isMappedArray(child)) {
+        renderMappedArrayInto(el, child, localState, childOpts);
+      } else {
+        el.append(renderNode(child, localState, childOpts));
+      }
+    }
   }
   return el;
 }
@@ -1934,7 +2064,8 @@ function applyProperties(el, def2, state) {
         const handler = resolveRef(val.$ref, state);
         if (typeof handler === "function") {
           const scope = state;
-          el.addEventListener(key.slice(2), (e) => handler(scope, e));
+          const handlerFn = handler;
+          el.addEventListener(key.slice(2), (e) => handlerFn(scope, e));
         }
         continue;
       }
@@ -2088,7 +2219,20 @@ function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   }
   const tag = document.createElement("style");
   tag.textContent = css;
+  tag.dataset.jxOwner = uid;
   document.head.append(tag);
+  elementStyleTags.set(el, tag);
+}
+var elementStyleTags = new WeakMap;
+function reapplyStyle(el, styleDef, mediaQueries = {}, state = {}) {
+  const prev = elementStyleTags.get(el);
+  if (prev) {
+    prev.remove();
+    elementStyleTags.delete(el);
+  }
+  el.style.cssText = "";
+  delete el.dataset.jx;
+  applyStyle(el, styleDef ?? {}, mediaQueries, state);
 }
 function applyAttributes(el, attrs, state) {
   for (const [k, v] of Object.entries(attrs)) {
@@ -2101,53 +2245,55 @@ function applyAttributes(el, attrs, state) {
     }
   }
 }
-function renderMappedArray(def2, arrayDef, state, options) {
+function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   const path = options?._path ?? [];
-  const container = document.createElement(def2.tagName ?? "div");
-  if (options?.onNodeCreated) {
-    options.onNodeCreated(container, path, def2);
-  }
-  applyProperties(container, def2, state);
-  applyStyle(container, def2.style ?? {}, state["$media"] ?? {}, state);
-  applyAttributes(container, def2.attributes ?? {}, state);
+  const anchor = document.createComment("jx-array");
+  parentEl.append(anchor);
   const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef } = arrayDef;
   effect(() => {
-    container.innerHTML = "";
-    let items;
-    items = isRefObj(itemsSrc) ? resolveRef(itemsSrc.$ref, state) : itemsSrc;
-    if (!Array.isArray(items)) {
-      return;
-    }
-    if (isRefObj(filterRef)) {
+    let items = isRefObj(itemsSrc) ? resolveRef(itemsSrc.$ref, state) : itemsSrc;
+    if (Array.isArray(items) && isRefObj(filterRef)) {
       const fn = resolveRef(filterRef.$ref, state);
       if (typeof fn === "function") {
         items = items.filter(fn);
       }
     }
-    if (isRefObj(sortRef)) {
+    if (Array.isArray(items) && isRefObj(sortRef)) {
       const fn = resolveRef(sortRef.$ref, state);
       if (typeof fn === "function") {
         items = [...items].toSorted(fn);
       }
     }
-    for (const [index, item] of items.entries()) {
-      const child = Object.create(state);
-      child.$map = { index, item };
-      child["$map/item"] = item;
-      child["$map/index"] = index;
-      const childOpts = options ? { ...options, _path: [...path, "children", "map", index] } : undefined;
-      if (mapDef) {
-        container.append(renderNode(mapDef, child, childOpts));
-      }
+    if (!Array.isArray(items) || !mapDef) {
+      return;
     }
+    const scope = effectScope(true);
+    const nodes = [];
+    scope.run(() => {
+      for (const [index, item] of items.entries()) {
+        const child = Object.create(state);
+        child.$map = { index, item };
+        child["$map/item"] = item;
+        child["$map/index"] = index;
+        const childOpts = options ? { ...options, _path: [...path, "map", index] } : undefined;
+        const node = renderNode(mapDef, child, childOpts);
+        anchor.before(node);
+        nodes.push(node);
+      }
+    });
+    onEffectCleanup(() => {
+      scope.stop();
+      for (const n of nodes) {
+        n.remove();
+      }
+    });
   });
-  return container;
 }
 function renderSwitch(def2, state, options) {
   const path = options?._path ?? [];
   const container = document.createElement(def2.tagName ?? "div");
   if (options?.onNodeCreated) {
-    options.onNodeCreated(container, path, def2);
+    options.onNodeCreated(container, path, def2, state);
   }
   applyProperties(container, def2, state);
   applyStyle(container, def2.style ?? {}, state["$media"] ?? {}, state);
@@ -2422,7 +2568,8 @@ async function importAndInstantiate(def2, src, exportName, base) {
       config[k] = v;
     }
   }
-  const instance = new ExportedClass(config);
+  const Ctor = ExportedClass;
+  const instance = new Ctor(config);
   let value;
   if (typeof instance.resolve === "function") {
     value = await instance.resolve();
@@ -2627,13 +2774,14 @@ async function resolveServerFunction(def2, state, key, base) {
     }
     _moduleCache.set(src, mod);
   }
-  const fn = mod[exportName] ?? mod.default?.[exportName];
-  if (!fn) {
+  const candidate = mod[exportName] ?? mod.default?.[exportName];
+  if (!candidate) {
     throw new Error(`Jx: export "${exportName}" not found in "${src}" for "${key}"`);
   }
-  if (typeof fn !== "function") {
+  if (typeof candidate !== "function") {
     throw new TypeError(`Jx: "${exportName}" from "${src}" is not a function`);
   }
+  const fn = candidate;
   const rawArgs = def2.arguments ?? {};
   const hasReactiveArg = Object.values(rawArgs).some((v) => isRefObj(v));
   const resolveArgs = () => {
@@ -2929,7 +3077,7 @@ async function defineElement(source, baseUrl) {
 function renderCustomElementWithProps(def2, state, options, path) {
   const el = document.createElement(def2.tagName ?? "div");
   if (options?.onNodeCreated) {
-    options.onNodeCreated(el, path ?? [], def2);
+    options.onNodeCreated(el, path ?? [], def2, state);
   }
   for (const [key, val] of Object.entries(def2.$props ?? {})) {
     if (isRefObj(val)) {
@@ -2996,8 +3144,10 @@ export {
   resolvePrototype,
   resolve,
   renderNode,
+  reapplyStyle,
   isSignal,
   hasSchemaKeywords,
+  elementStyleTags,
   defineElement,
   camelToKebab,
   buildScope,
@@ -3006,5 +3156,5 @@ export {
   Jx
 };
 
-//# debugId=32F6E02650EECC3864756E2164756E21
+//# debugId=3DB97313FD2BC32064756E2164756E21
 //# sourceMappingURL=runtime.js.map