aberdeen 1.18.1 → 1.19.0

package/dist/src/aberdeen.js

@@ -101,6 +101,7 @@ class ReverseSortedSet {
 // src/aberdeen.ts
 var sortedQueue;
 var runQueueDepth = 0;
+var freezeCount = 0;
 var topRedrawScope;
 var survivingEl;
 function recordSideEffect(scope, type, key, value) {
@@ -115,7 +116,10 @@ function undoSideEffects(el, se) {
         value ? el.classList.add(key) : el.classList.remove(key);
         break;
       case 1 /* Style */:
-        el.style[key] = value == null ? "" : value;
+        if (key[0] === "-" && key[1] === "-")
+          value ? el.style.setProperty(key, value) : el.style.removeProperty(key);
+        else
+          el.style[key] = value == null ? "" : value;
         break;
       case 2 /* Prop */:
         el[key] = value;
@@ -142,6 +146,8 @@ function queue(runner) {
   sortedQueue.add(runner);
 }
 function runQueue() {
+  if (freezeCount)
+    return;
   let time = Date.now();
   while (sortedQueue) {
     const runner = sortedQueue.fetchLast();
@@ -157,6 +163,17 @@ function runQueue() {
   if (time > 9)
     console.debug(`Aberdeen queue took ${time}ms`);
 }
+function freeze() {
+  freezeCount++;
+  let released = false;
+  return () => {
+    if (released)
+      return;
+    released = true;
+    if (!--freezeCount)
+      runQueue();
+  };
+}
 function arrayToStr(parts) {
   let result = "";
   for (const part of parts) {
@@ -245,6 +262,7 @@ class ContentScope extends Scope {
     if (!this.changes) {
       this.changes = new Map;
       queue(this);
+      dev?.schedule(this, index, oldData, newData, new Error);
     }
     let targetDelta = this.changes.get(target);
     if (!targetDelta) {
@@ -302,6 +320,7 @@ class ChainedScope extends ContentScope {
     }
     if (!useParentCleaners)
       currentScope.cleaners.push(this);
+    dev?.create(this, currentScope, new Error);
   }
   getPrecedingNode() {
     return findLastNodeInPrevSiblings(this.prevSibling);
@@ -321,6 +340,7 @@ class RegularScope extends ChainedScope {
   redraw() {
     const savedScope = currentScope;
     currentScope = this;
+    dev?.render(this);
     try {
       this.renderer();
     } catch (e) {
@@ -347,6 +367,7 @@ class MountScope extends ContentScope {
     this.el = el;
     this.renderer = renderer;
     this.svg = el.namespaceURI === "http://www.w3.org/2000/svg";
+    dev?.create(this, currentScope, new Error);
     const oldTopRedrawScope = topRedrawScope;
     topRedrawScope = this;
     this.redraw();
@@ -451,6 +472,7 @@ class OnEachScope extends Scope {
     this.prevSibling = currentScope.getChildPrevSibling();
     currentScope.lastChild = this;
     currentScope.cleaners.push(this);
+    dev?.create(this, currentScope, new Error);
     if (target instanceof Array) {
       for (let i = 0;i < target.length; i++) {
         new OnEachItemScope(this, i, false);
@@ -481,8 +503,10 @@ class OnEachScope extends Scope {
     this.changedIndexes = new Map;
     for (const index of indexes.keys()) {
       const oldScope = this.byIndex.get(index);
-      if (oldScope)
+      if (oldScope) {
         oldScope.remove();
+        dev?.delete(oldScope);
+      }
       if (this.target instanceof Set || this.target instanceof Map ? this.target.has(index) : (index in this.target)) {
         new OnEachItemScope(this, index, true);
       } else {
@@ -524,6 +548,7 @@ class OnEachItemScope extends ContentScope {
     this.svg = currentScope.svg;
     this.parent.byIndex.set(this.itemIndex, this);
     this.lastChild = this;
+    dev?.create(this, this.parent, new Error);
     if (topRedraw)
       topRedrawScope = this;
     this.redraw();
@@ -582,6 +607,7 @@ class OnEachItemScope extends ContentScope {
     }
     const savedScope = currentScope;
     currentScope = this;
+    dev?.render(this);
     let sortKey;
     try {
       if (this.parent.makeSortKey) {
@@ -626,15 +652,31 @@ class OnEachItemScope extends ContentScope {
 function addNode(el, node) {
   if (el !== currentScope.el) {
     el.appendChild(node);
+    dev?.node(currentScope, node, false);
     return;
   }
   const parentEl = currentScope.el;
   const prevNode = currentScope.getInsertAfterNode();
   parentEl.insertBefore(node, prevNode ? prevNode.nextSibling : parentEl.firstChild);
   currentScope.lastChild = node;
+  dev?.node(currentScope, node, true);
 }
 var ROOT_SCOPE = new RootScope;
 var currentScope = ROOT_SCOPE;
+var dev;
+function _setDev(hooks) {
+  dev = hooks;
+  if (!hooks)
+    return;
+  const childScopes = (scope) => scope instanceof OnEachScope ? [...scope.byIndex.values()] : scope.cleaners.filter((c) => c instanceof Scope);
+  const replay = (scope, parent) => {
+    hooks.create(scope, parent, undefined);
+    for (const child of childScopes(scope))
+      replay(child, scope);
+  };
+  for (const child of childScopes(ROOT_SCOPE))
+    replay(child, ROOT_SCOPE);
+}
 function leakScope(func) {
   const savedScope = currentScope;
   currentScope = new RootScope;
@@ -652,6 +694,8 @@ var peeking = 0;
 function subscribe(target, index, observer = currentScope) {
   if (observer === ROOT_SCOPE || peeking)
     return;
+  if (observer === currentScope)
+    dev?.read(currentScope, target, index);
   let byTarget = subscribers.get(target);
   if (!byTarget)
     subscribers.set(target, byTarget = new Map);
@@ -1250,7 +1294,7 @@ function setSpacingCssVars(base = 1, unit = "rem") {
     cssVars[i] = 2 ** (i - 3) * base + unit;
   }
 }
-var CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^| )\$([\w-]+)/g;
+var CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^|[\s(,])\$([\w-]+)/g;
 var DIGIT_FIRST = /^\d/;
 function cssVarRef(value) {
   if (value.indexOf("$") < 0)
@@ -1557,12 +1601,22 @@ function insertCss(style) {
   const prefix = `.AbdStl${++cssCount}`;
   const css = typeof style === "string" ? styleStringToCss(style, prefix) : objectToCss(style, prefix);
   if (css) {
-    let cnt = cssSnippetCount++;
-    cssSnippets[cnt] = css;
-    clean(() => delete cssSnippets[cnt]);
+    const cnt = cssSnippetCount++;
+    const key = arrayToStr([currentScope.prio, cnt]);
+    cssSnippets[key] = css;
+    clean(() => delete cssSnippets[key]);
   }
   return prefix;
 }
+function insertGlobalCss(style) {
+  const css = objectToCss(style, "");
+  if (css) {
+    const cnt = cssSnippetCount++;
+    const key = arrayToStr([currentScope.prio, cnt]);
+    cssSnippets[key] = css;
+    clean(() => delete cssSnippets[key]);
+  }
+}
 var cssSnippets = proxy({});
 var cssSnippetCount = 0;
 function combinePrefixSelector(prefix, key) {
@@ -1634,14 +1688,6 @@ function styleStringToCss(styleStr, selector) {
   return props ? `${selector}{${props}}
 ` : "";
 }
-function insertGlobalCss(style) {
-  const css = objectToCss(style, "");
-  if (css) {
-    let cnt = cssSnippetCount++;
-    cssSnippets[cnt] = css;
-    clean(() => delete cssSnippets[cnt]);
-  }
-}
 var CSS_SHORT = {
   m: "margin",
   mt: "margin-top",
@@ -1687,16 +1733,27 @@ function applyArg(el, key, value) {
       list.remove(...classes);
   } else if (key[0] === "$") {
     key = key.substring(1);
+    if (key[0] === "$")
+      key = "--" + key.substring(1);
     const val = value == null || value === false ? "" : typeof value === "string" ? cssVarRef(value) : String(value);
     const expanded = CSS_SHORT[key] || key;
     const style = el.style;
     const setOwn = el === currentScope.el;
     const props = typeof expanded === "string" ? [expanded] : expanded;
     for (const prop of props) {
-      const cm = toCamel(prop);
-      if (setOwn)
-        recordSideEffect(currentScope, 1 /* Style */, cm, style[cm]);
-      style[cm] = val;
+      if (prop[0] === "-" && prop[1] === "-") {
+        if (setOwn)
+          recordSideEffect(currentScope, 1 /* Style */, prop, style.getPropertyValue(prop));
+        if (val === "")
+          style.removeProperty(prop);
+        else
+          style.setProperty(prop, val);
+      } else {
+        const cm = toCamel(prop);
+        if (setOwn)
+          recordSideEffect(currentScope, 1 /* Style */, cm, style[cm]);
+        style[cm] = val;
+      }
     }
   } else if (value == null) {} else if (key in SPECIAL_PROPS) {
     SPECIAL_PROPS[key](el, value);
@@ -1924,6 +1981,7 @@ var aberdeen_default = Object.assign(A, {
   derive,
   disableCreateDestroy,
   dump,
+  freeze,
   insertCss,
   insertGlobalCss,
   invertString,
@@ -1966,6 +2024,7 @@ export {
   invertString,
   insertGlobalCss,
   insertCss,
+  freeze,
   dump,
   disableCreateDestroy,
   derive,
@@ -1977,6 +2036,7 @@ export {
   copy,
   clone,
   clean,
+  _setDev,
   OPAQUE,
   NO_COPY,
   MAP_SIZE_SYMBOL,
@@ -1985,5 +2045,5 @@ export {
   A
 };
 
-//# debugId=FD73580ACB58CF9D64756E2164756E21
+//# debugId=BFB325AE18E8016D64756E2164756E21
 //# sourceMappingURL=aberdeen.js.map