aberdeen 1.7.0 → 1.7.2

package/README.md

@@ -1,23 +1,29 @@
 # [Aberdeen](https://aberdeenjs.org/) [![](https://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/vanviegen/aberdeen/blob/master/LICENSE.txt) [![](https://badge.fury.io/js/aberdeen.svg)](https://badge.fury.io/js/aberdeen) ![](https://img.shields.io/bundlejs/size/aberdeen) [![](https://img.shields.io/github/last-commit/vanviegen/aberdeen)](https://github.com/vanviegen/aberdeen)
 
-Build fast reactive UIs in pure TypeScript/JavaScript without a virtual DOM.
+Reactive UIs in plain TypeScript. Simple to learn, fast to ship.
 
-Aberdeen's approach is refreshingly simple:
-
-> Use many small anonymous functions for emitting DOM elements, and automatically rerun them when their underlying data changes. JavaScript `Proxy` is used to track reads and updates to this data, which can consist of anything, from simple values to complex, typed, and deeply nested data structures. 
+Aberdeen wraps your state in ES6 `Proxy` objects for fine-grained property access tracking, then automatically re-executes only the DOM-building closures that depend on changed data. So we get precise DOM updates with neither virtual DOM diffing nor compiler magic.
 
 ## Why use Aberdeen?
 
-- 🎩 **Simple:** Express UIs naturally in JavaScript/TypeScript, without build steps or JSX, and with a minimal amount of concepts you need to learn.
-- ⏩ **Fast:** No virtual DOM. Aberdeen intelligently updates only the minimal, necessary parts of your UI when proxied data changes.
-- 👥 **Awesome lists**: It's very easy and performant to reactively display data sorted by whatever you like.
-- 🔬 **Tiny:** Around 6KB (minimized and gzipped) for the core system. Zero runtime dependencies.
-- 🔋 **Batteries included**: Comes with browser history management, routing, revertible patches for optimistic user-interface updates, component-local CSS, SVG support, helper functions for transforming reactive data (mapping, partitioning, filtering, etc) and hide/unhide transition effects. No bikeshedding required!
+- **Simple:** Express UIs naturally in JavaScript/TypeScript, without requiring build steps or JSX, and with a minimal amount of concepts you need to learn.
+- **Type-safe:** Your reactive state can be regular TypeScript objects and arrays, with full type safety and autocompletion.
+- **Fast:** No virtual DOM. Aberdeen intelligently updates only the minimal, necessary parts of your UI when proxied data changes.
+- **Awesome lists**: It's very easy and performant to reactively display data sorted by whatever you like.
+- **Tiny:** Around 7KB (minimized and gzipped) for the core system. Zero runtime dependencies.
+- **Batteries included**: Comes with...
+  - Browser history management
+  - Routing
+  - Revertible patches for optimistic user-interface updates
+  - Component-local CSS with Tailwind-like shorthands
+  - SVG support
+  - Helper functions for transforming reactive data (mapping, partitioning, filtering, etc)
+  - Hide/unhide transition effects
 
 ## Why *not* use Aberdeen?
 
-- 🤷 **Lack of community:** There are not many of us -Aberdeen developers- yet, so don't expect terribly helpful Stack Overflow/AI answers.
-- 📚 **Lack of ecosystem:** You'd have to code things yourself, instead of duct-taping together a gazillion React ecosystem libraries.
+- **Lack of community:** There are not many of us -Aberdeen developers- yet, so don't expect terribly helpful Stack Overflow/AI answers.
+- **Lack of ecosystem:** You'd have to code things yourself, instead of duct-taping together a gazillion React ecosystem libraries.
 
 ## Examples
 

package/dist/aberdeen.js

@@ -1107,7 +1107,7 @@ function setSpacingCssVars(base = 1, unit = "rem") {
     cssVars[i] = 2 ** (i - 3) * base + unit;
   }
 }
-var CSS_VAR_PATTERN = /(\([^)]*\))|("[^"]*")|(^| )\$(\w+)/g;
+var CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^| )\$(\w+)/g;
 var DIGIT_FIRST = /^\d/;
 function cssVarRef(value) {
   if (value.indexOf("$") < 0)
@@ -1119,27 +1119,6 @@ function cssVarRef(value) {
     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) {
@@ -1362,10 +1341,24 @@ var cssCount = 0;
 function insertCss(style) {
   const prefix = `.AbdStl${++cssCount}`;
   const css = typeof style === "string" ? styleStringToCss(style, prefix) : objectToCss(style, prefix);
-  if (css)
-    $(`style#${css}`);
+  if (css) {
+    let cnt = cssSnippetCount++;
+    cssSnippets[cnt] = css;
+    clean(() => delete cssSnippets[cnt]);
+  }
   return prefix;
 }
+var cssSnippets = proxy({});
+var cssSnippetCount = 0;
+function combinePrefixSelector(prefix, key) {
+  const sel = [];
+  for (const p of prefix.split(",")) {
+    for (const k of key.split(",")) {
+      sel.push(k.includes("&") ? k.trim().replace(/&/g, p) : `${p} ${k.trim()}`.trim());
+    }
+  }
+  return sel.join(",");
+}
 function objectToCss(style, prefix) {
   let css = "";
   for (const [key, val] of Object.entries(style)) {
@@ -1375,8 +1368,7 @@ function objectToCss(style, prefix) {
 ${objectToCss(val, prefix)}}
 `;
       } else {
-        const sel = key === "&" ? prefix : key.includes("&") ? key.replace(/&/g, prefix) : `${prefix} ${key}`.trim();
-        css += objectToCss(val, sel);
+        css += objectToCss(val, combinePrefixSelector(prefix, key));
       }
     } else if (typeof val === "string") {
       if (key.startsWith("@")) {
@@ -1384,8 +1376,7 @@ ${objectToCss(val, prefix)}}
 ${styleStringToCss(val, prefix)}}
 `;
       } else {
-        const sel = key.includes("&") ? key.replace(/&/g, prefix) : `${prefix} ${key}`.trim();
-        css += styleStringToCss(val, sel);
+        css += styleStringToCss(val, combinePrefixSelector(prefix, key));
       }
     }
   }
@@ -1427,8 +1418,11 @@ function styleStringToCss(styleStr, selector) {
 }
 function insertGlobalCss(style) {
   const css = objectToCss(style, "");
-  if (css)
-    $(`style#${css}`);
+  if (css) {
+    let cnt = cssSnippetCount++;
+    cssSnippets[cnt] = css;
+    clean(() => delete cssSnippets[cnt]);
+  }
 }
 var CSS_SHORT = {
   m: "margin",
@@ -1632,6 +1626,33 @@ function withEmitHandler(handler, func) {
     emit = oldEmitHandler;
   }
 }
+if (typeof document !== "undefined") {
+  leakScope(() => {
+    $(() => {
+      if (isEmpty(cssSnippets) && isEmpty(cssVars))
+        return;
+      mount(document.head, () => {
+        $("style.abd", () => {
+          onEach(cssSnippets, (value) => {
+            $("#", value);
+          });
+          $(() => {
+            if (isEmpty(cssVars))
+              return;
+            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,
@@ -1666,5 +1687,5 @@ export {
   $
 };
 
-//# debugId=77770EA398EEA24264756E2164756E21
+//# debugId=35DE752A41396D7264756E2164756E21
 //# sourceMappingURL=aberdeen.js.map