aberdeen 1.7.0 → 1.7.1

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

@@ -1366,6 +1366,15 @@ function insertCss(style) {
     $(`style#${css}`);
   return prefix;
 }
+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 +1384,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 +1392,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));
       }
     }
   }
@@ -1666,5 +1673,5 @@ export {
   $
 };
 
-//# debugId=77770EA398EEA24264756E2164756E21
+//# debugId=453EEBC759CEDD8964756E2164756E21
 //# sourceMappingURL=aberdeen.js.map