aberdeen 1.5.0 → 1.7.0

package/dist/aberdeen.js

@@ -154,9 +154,6 @@ var lastPrio = 0;
 
 class Scope {
   prio = --lastPrio;
-  onChange(index) {
-    queue(this);
-  }
   remove() {
     const lastNode = this.getLastNode();
     if (lastNode)
@@ -176,6 +173,7 @@ class DelayedOneTimeRunner {
 
 class ContentScope extends Scope {
   cleaners;
+  changes;
   constructor(cleaners = []) {
     super();
     this.cleaners = cleaners;
@@ -196,7 +194,38 @@ class ContentScope extends Scope {
     sortedQueue?.remove(this);
     this.lastChild = undefined;
   }
+  onChange(target, index, newData, oldData) {
+    if (!this.changes) {
+      this.changes = new Map;
+      queue(this);
+    }
+    let targetDelta = this.changes.get(target);
+    if (!targetDelta) {
+      targetDelta = new Map;
+      this.changes.set(target, targetDelta);
+    }
+    if (targetDelta.has(index)) {
+      if (targetDelta.get(index) === newData)
+        targetDelta.delete(index);
+    } else {
+      targetDelta.set(index, oldData);
+    }
+  }
+  fetchHasChanges() {
+    if (!this.changes)
+      return false;
+    for (const targetDelta of this.changes.values()) {
+      if (targetDelta.size > 0) {
+        delete this.changes;
+        return true;
+      }
+    }
+    delete this.changes;
+    return false;
+  }
   queueRun() {
+    if (!this.fetchHasChanges())
+      return;
     this.remove();
     topRedrawScope = this;
     this.redraw();
@@ -205,9 +234,6 @@ class ContentScope extends Scope {
   getInsertAfterNode() {
     return this.getLastNode() || this.getPrecedingNode();
   }
-  onChange() {
-    queue(this);
-  }
   getChildPrevSibling() {
     return this.lastChild;
   }
@@ -362,7 +388,7 @@ class OnEachScope extends Scope {
   target;
   byIndex = new Map;
   sortedSet = new ReverseSortedSet("sortKey");
-  changedIndexes = new Set;
+  changedIndexes = new Map;
   constructor(proxy, renderer, makeSortKey) {
     super();
     this.renderer = renderer;
@@ -385,15 +411,22 @@ class OnEachScope extends Scope {
   getPrecedingNode() {
     return findLastNodeInPrevSiblings(this.prevSibling);
   }
-  onChange(index) {
-    if (!(this.target instanceof Array) || typeof index === "number")
-      this.changedIndexes.add(index);
-    queue(this);
+  onChange(target, index, newData, oldData) {
+    if (!(target instanceof Array) || typeof index === "number") {
+      if (this.changedIndexes.has(index)) {
+        if (this.changedIndexes.get(index) === newData) {
+          this.changedIndexes.delete(index);
+        }
+      } else {
+        this.changedIndexes.set(index, oldData);
+        queue(this);
+      }
+    }
   }
   queueRun() {
     const indexes = this.changedIndexes;
-    this.changedIndexes = new Set;
-    for (const index of indexes) {
+    this.changedIndexes = new Map;
+    for (const index of indexes.keys()) {
       const oldScope = this.byIndex.get(index);
       if (oldScope)
         oldScope.remove();
@@ -466,6 +499,8 @@ class OnEachItemScope extends ContentScope {
   queueRun() {
     if (currentScope !== ROOT_SCOPE)
       internalError(4);
+    if (!this.fetchHasChanges())
+      return;
     if (this.sortKey !== undefined) {
       const lastNode = this.getActualLastNode();
       if (lastNode)
@@ -593,23 +628,26 @@ function isEmpty(proxied) {
   if (target instanceof Array) {
     subscribe(target, "length", (index, newData, oldData) => {
       if (!newData !== !oldData)
-        queue(scope);
+        scope.onChange(target, EMPTY, !newData, !oldData);
     });
     return !target.length;
   }
   if (target instanceof Map) {
     subscribe(target, MAP_SIZE_SYMBOL, (index, newData, oldData) => {
       if (!newData !== !oldData)
-        queue(scope);
+        scope.onChange(target, EMPTY, !newData, !oldData);
     });
     return !target.size;
   }
-  const result = isObjEmpty(target);
+  let oldEmpty = isObjEmpty(target);
   subscribe(target, ANY_SYMBOL, (index, newData, oldData) => {
-    if (result ? oldData === EMPTY : newData === EMPTY)
-      queue(scope);
+    if (newData === EMPTY !== (oldData === EMPTY)) {
+      const newEmpty = isObjEmpty(target);
+      scope.onChange(target, EMPTY, newEmpty, oldEmpty);
+      oldEmpty = newEmpty;
+    }
   });
-  return result;
+  return oldEmpty;
 }
 function count(proxied) {
   if (proxied instanceof Array)
@@ -643,7 +681,7 @@ function defaultEmitHandler(target, index, newData, oldData) {
         if (typeof observer === "function")
           observer(index, newData, oldData);
         else
-          observer.onChange(index);
+          observer.onChange(target, index, newData, oldData);
       }
     }
   }
@@ -1017,7 +1055,7 @@ function copyRecursive(dst, src, flags) {
           const old = dst.get(k);
           dst.delete(k);
           if (flags & COPY_EMIT) {
-            emit(dst, k, undefined, old);
+            emit(dst, k, EMPTY, old);
           }
           changed = true;
         }
@@ -1047,7 +1085,7 @@ function copyRecursive(dst, src, flags) {
           const old = dst[k];
           delete dst[k];
           if (flags & COPY_EMIT && old !== undefined) {
-            emit(dst, k, undefined, old);
+            emit(dst, k, EMPTY, old);
           }
           changed = true;
         }
@@ -1064,13 +1102,54 @@ var COPY_EMIT = 64;
 var NO_COPY = Symbol("NO_COPY");
 Promise.prototype[NO_COPY] = true;
 var cssVars = optProxy({});
-for (let i = 1;i <= 12; i++) {
-  cssVars[i] = 2 ** (i - 3) + "rem";
+function setSpacingCssVars(base = 1, unit = "rem") {
+  for (let i = 0;i <= 12; i++) {
+    cssVars[i] = 2 ** (i - 3) * base + unit;
+  }
 }
+var CSS_VAR_PATTERN = /(\([^)]*\))|("[^"]*")|(^| )\$(\w+)/g;
 var DIGIT_FIRST = /^\d/;
-function cssVarRef(name) {
-  const varName = DIGIT_FIRST.test(name) ? `m${name}` : name;
-  return `var(--${varName})`;
+function cssVarRef(value) {
+  if (value.indexOf("$") < 0)
+    return value;
+  return value.replace(CSS_VAR_PATTERN, (match, parens, quoted, prefix, name) => {
+    if (parens || quoted)
+      return match;
+    const varName = DIGIT_FIRST.test(name) ? `m${name}` : name;
+    return `${prefix}var(--${varName})`;
+  });
+}
+if (typeof document !== "undefined") {
+  leakScope(() => {
+    $(() => {
+      if (!isEmpty(cssVars)) {
+        mount(document.head, () => {
+          $("style", () => {
+            let css = `:root {
+`;
+            for (const [key, value] of Object.entries(cssVars)) {
+              const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
+              css += `  --${varName}: ${value};
+`;
+            }
+            css += "}";
+            $(`#${css}`);
+          });
+        });
+      }
+    });
+  });
+}
+var darkModeState;
+function darkMode() {
+  if (!darkModeState) {
+    if (typeof window === "undefined" || !window.matchMedia)
+      return false;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    darkModeState = proxy({ value: mediaQuery.matches });
+    mediaQuery.addEventListener("change", () => darkModeState.value = mediaQuery.matches);
+  }
+  return darkModeState.value;
 }
 function clone(src) {
   if (NO_COPY in src)
@@ -1182,16 +1261,32 @@ function $(...args) {
       for (let pos = 0;pos < argLen; pos = nextPos + 1) {
         nextPos = findFirst(arg, " .=:#", pos);
         const next = arg[nextPos];
-        if (next === ":" || next === "=") {
-          let key = arg.substring(pos, nextPos);
-          if (next === ":")
-            key = "$" + key;
+        if (next === ":") {
+          const key = "$" + arg.substring(pos, nextPos);
           if (nextPos + 1 >= argLen) {
             applyArg(el, key, args[++argIndex]);
             break;
           }
-          if (arg[nextPos + 1] === '"') {
-            const endIndex = findFirst(arg, '"', nextPos + 2);
+          if (arg[nextPos + 1] === " ") {
+            const endIndex = findFirst(arg, ";", nextPos + 2);
+            const value = arg.substring(nextPos + 2, endIndex).trim();
+            applyArg(el, key, value);
+            nextPos = endIndex;
+          } else {
+            const endIndex = findFirst(arg, " ", nextPos + 1);
+            const value = arg.substring(nextPos + 1, endIndex);
+            applyArg(el, key, value);
+            nextPos = endIndex;
+          }
+        } else if (next === "=") {
+          const key = arg.substring(pos, nextPos);
+          if (nextPos + 1 >= argLen) {
+            applyArg(el, key, args[++argIndex]);
+            break;
+          }
+          const afterEquals = arg[nextPos + 1];
+          if (afterEquals === '"' || afterEquals === "'" || afterEquals === "`") {
+            const endIndex = findFirst(arg, afterEquals, nextPos + 2);
             const value = arg.substring(nextPos + 2, endIndex);
             applyArg(el, key, value);
             nextPos = endIndex;
@@ -1264,65 +1359,98 @@ function findFirst(str, chars, startPos) {
   return strLen;
 }
 var cssCount = 0;
-function insertCss(style, global = false) {
-  const prefix = global ? "" : `.AbdStl${++cssCount}`;
-  const css = styleToCss(style, prefix);
+function insertCss(style) {
+  const prefix = `.AbdStl${++cssCount}`;
+  const css = typeof style === "string" ? styleStringToCss(style, prefix) : objectToCss(style, prefix);
   if (css)
     $(`style#${css}`);
   return prefix;
 }
+function objectToCss(style, prefix) {
+  let css = "";
+  for (const [key, val] of Object.entries(style)) {
+    if (val && typeof val === "object") {
+      if (key.startsWith("@")) {
+        css += `${key}{
+${objectToCss(val, prefix)}}
+`;
+      } else {
+        const sel = key === "&" ? prefix : key.includes("&") ? key.replace(/&/g, prefix) : `${prefix} ${key}`.trim();
+        css += objectToCss(val, sel);
+      }
+    } else if (typeof val === "string") {
+      if (key.startsWith("@")) {
+        css += `${key}{
+${styleStringToCss(val, prefix)}}
+`;
+      } else {
+        const sel = key.includes("&") ? key.replace(/&/g, prefix) : `${prefix} ${key}`.trim();
+        css += styleStringToCss(val, sel);
+      }
+    }
+  }
+  return css;
+}
+var KEBAB_SEGMENT = /-([a-z])/g;
+function toCamel(p) {
+  return p.replace(KEBAB_SEGMENT, (_, l) => l.toUpperCase());
+}
+function styleStringToCss(styleStr, selector) {
+  let props = "";
+  for (let pos = 0, len = styleStr.length;pos < len; ) {
+    while (styleStr[pos] === " ")
+      pos++;
+    if (pos >= len)
+      break;
+    const colon = styleStr.indexOf(":", pos);
+    if (colon === -1)
+      break;
+    const key = styleStr.substring(pos, colon);
+    pos = colon + 1;
+    let val;
+    if (styleStr[pos] === " ") {
+      pos++;
+      const semi = styleStr.indexOf(";", pos);
+      val = styleStr.substring(pos, semi === -1 ? len : semi).trim();
+      pos = semi === -1 ? len : semi + 1;
+    } else {
+      const space = styleStr.indexOf(" ", pos);
+      val = styleStr.substring(pos, space === -1 ? len : space);
+      pos = space === -1 ? len : space;
+    }
+    const v = cssVarRef(val);
+    const exp = CSS_SHORT[key] || key;
+    props += typeof exp === "string" ? `${exp}:${v};` : exp.map((p) => `${p}:${v};`).join("");
+  }
+  return props ? `${selector}{${props}}
+` : "";
+}
 function insertGlobalCss(style) {
-  return insertCss(style, true);
+  const css = objectToCss(style, "");
+  if (css)
+    $(`style#${css}`);
 }
 var CSS_SHORT = {
   m: "margin",
-  mt: "marginTop",
-  mb: "marginBottom",
-  ml: "marginLeft",
-  mr: "marginRight",
-  mh: ["marginLeft", "marginRight"],
-  mv: ["marginTop", "marginBottom"],
+  mt: "margin-top",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  mr: "margin-right",
+  mh: ["margin-left", "margin-right"],
+  mv: ["margin-top", "margin-bottom"],
   p: "padding",
-  pt: "paddingTop",
-  pb: "paddingBottom",
-  pl: "paddingLeft",
-  pr: "paddingRight",
-  ph: ["paddingLeft", "paddingRight"],
-  pv: ["paddingTop", "paddingBottom"],
+  pt: "padding-top",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  pr: "padding-right",
+  ph: ["padding-left", "padding-right"],
+  pv: ["padding-top", "padding-bottom"],
   w: "width",
   h: "height",
   bg: "background",
   fg: "color",
-  r: "borderRadius"
+  r: "border-radius"
 };
-function styleToCss(style, prefix) {
-  let props = "";
-  let rules = "";
-  for (const kOr of Object.keys(style)) {
-    const v = style[kOr];
-    for (const k of kOr.split(/, ?/g)) {
-      if (v && typeof v === "object") {
-        if (k.startsWith("@")) {
-          rules += `${k}{
-${styleToCss(v, prefix)}}
-`;
-        } else {
-          rules += styleToCss(v, k.includes("&") ? k.replace(/&/g, prefix) : `${prefix} ${k}`);
-        }
-      } else {
-        const val = v == null || v === false ? "" : typeof v === "string" ? v[0] === "@" ? cssVarRef(v.substring(1)) : v : String(v);
-        const expanded = CSS_SHORT[k] || k;
-        for (const prop of Array.isArray(expanded) ? expanded : [expanded]) {
-          props += `${prop.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}:${val};`;
-        }
-      }
-    }
-  }
-  if (props)
-    rules = `${prefix.trimStart() || "*"}{${props}}
-${rules}`;
-  return rules;
-}
 function applyArg(el, key, value) {
   if (typeof value === "object" && value !== null && value[TARGET_SYMBOL]) {
     if (key === "bind") {
@@ -1338,13 +1466,13 @@ function applyArg(el, key, value) {
       el.classList.remove(...classes);
   } else if (key[0] === "$") {
     key = key.substring(1);
-    const val = value == null || value === false ? "" : typeof value === "string" ? value[0] === "@" ? cssVarRef(value.substring(1)) : value : String(value);
+    const val = value == null || value === false ? "" : typeof value === "string" ? cssVarRef(value) : String(value);
     const expanded = CSS_SHORT[key] || key;
     if (typeof expanded === "string") {
-      el.style[expanded] = val;
+      el.style[toCamel(expanded)] = val;
     } else {
       for (const prop of expanded)
-        el.style[prop] = val;
+        el.style[toCamel(prop)] = val;
     }
   } else if (value == null) {} else if (key in SPECIAL_PROPS) {
     SPECIAL_PROPS[key](el, value);
@@ -1366,9 +1494,6 @@ var onError = defaultOnError;
 function setErrorHandler(handler) {
   onError = handler || defaultOnError;
 }
-function getParentElement() {
-  return currentScope.el;
-}
 function clean(cleaner) {
   currentScope.cleaners.push(cleaner);
 }
@@ -1507,27 +1632,11 @@ function withEmitHandler(handler, func) {
     emit = oldEmitHandler;
   }
 }
-if (typeof document !== "undefined") {
-  leakScope(() => {
-    mount(document.head, () => {
-      $("style", () => {
-        let css = `:root {
-`;
-        for (const [key, value] of Object.entries(cssVars)) {
-          const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
-          css += `  --${varName}: ${value};
-`;
-        }
-        css += "}";
-        $(`#${css}`);
-      });
-    });
-  });
-}
 export {
   withEmitHandler,
   unproxy,
   unmountAll,
+  setSpacingCssVars,
   setErrorHandler,
   runQueue,
   ref,
@@ -1544,10 +1653,10 @@ export {
   invertString,
   insertGlobalCss,
   insertCss,
-  getParentElement,
   dump,
   derive,
   defaultEmitHandler,
+  darkMode,
   cssVars,
   count,
   copy,
@@ -1557,5 +1666,5 @@ export {
   $
 };
 
-//# debugId=69BD2D56BBDAB97164756E2164756E21
+//# debugId=77770EA398EEA24264756E2164756E21
 //# sourceMappingURL=aberdeen.js.map