aberdeen 1.9.0 → 1.10.0

package/README.md

@@ -30,24 +30,24 @@ Aberdeen wraps your state in ES6 `Proxy` objects for fine-grained property acces
 First, let's start with the obligatory reactive counter example. If you're reading this on [the official website](https://aberdeenjs.org) you should see a working demo below the code, and an 'edit' button in the top-right corner of the code, to play around.
 
 ```javascript
-import {$, proxy, ref} from 'aberdeen';
+import A from 'aberdeen';
 
 // Define some state as a proxied (observable) object
-const state = proxy({question: "How many roads must a man walk down?", answer: 42});
+const state = A.proxy({question: "How many roads must a man walk down?", answer: 42});
 
-$('h3', () => {
+A('h3', () => {
     // This function reruns whenever the question or the answer changes
-    $('text=', `${state.question} ↪ ${state.answer || 'Blowing in the wind'}`)
+    A('text=', `${state.question} ↪ ${state.answer || 'Blowing in the wind'}`)
 });
 
 // Two-way bind state.question to an <input>
-$('input placeholder=Question bind=', ref(state, 'question'))
+A('input placeholder=Question bind=', A.ref(state, 'question'))
 
 // Allow state.answer to be modified using both an <input> and buttons
-$('div.row margin-top:1em', () => {
-    $('button text=- click=', () => state.answer--);
-    $('input type=number bind=', ref(state, 'answer'))
-    $('button text=+ click=', () => state.answer++);
+A('div.row margin-top:1em', () => {
+    A('button text=- click=', () => state.answer--);
+    A('input type=number bind=', A.ref(state, 'answer'))
+    A('button text=+ click=', () => state.answer++);
 });
 ```
 
@@ -63,7 +63,7 @@ Okay, next up is a somewhat more complex app - a todo-list with the following be
 Pfew.. now let's look at the code:
 
 ```typescript
-import {$, proxy, onEach, insertCss, peek, unproxy, ref} from "aberdeen";
+import A from "aberdeen";
 import {grow, shrink} from "aberdeen/transitions";
 
 // We'll use a simple class to store our data.
@@ -74,19 +74,19 @@ class TodoItem {
 
 // The top-level user interface.
 function drawMain() {
-    // Add some initial items. We'll wrap a proxy() around it!
-    let items: TodoItem[] = proxy([
+    // Add some initial items. We'll wrap a A.proxy() around it!
+    let items: TodoItem[] = A.proxy([
         new TodoItem('Make todo-list demo', true),
         new TodoItem('Learn Aberdeen', false),
     ]);
     
     // Draw the list, ordered by label.
-    onEach(items, drawItem, item => item.label);
+    A.onEach(items, drawItem, item => item.label);
 
     // Add item and delete checked buttons.
-    $('div.row', () => {
-        $('button text=+ click=', () => items.push(new TodoItem("")));
-        $('button.outline text="Delete checked" click=', () => {
+    A('div.row', () => {
+        A('button text=+ click=', () => items.push(new TodoItem("")));
+        A('button.outline text="Delete checked" click=', () => {
             for(let idx in items) {
                 if (items[idx].done) delete items[idx];
             }
@@ -97,48 +97,48 @@ function drawMain() {
 // Called for each todo list item.
 function drawItem(item) {
     // Items without a label open in editing state.
-    // Note that we're creating this proxy outside the `div.row` scope
+    // Note that we're creating this A.proxy outside the `div.row` scope
     // create below, so that it will persist when that state reruns.
-    let editing: {value: boolean} = proxy(item.label == '');
+    let editing: {value: boolean} = A.proxy(item.label == '');
 
-    $('div.row', todoItemStyle, 'create=', grow, 'destroy=', shrink, () => {
+    A('div.row', todoItemStyle, 'create=', grow, 'destroy=', shrink, () => {
         // Conditionally add a class to `div.row`, based on item.done
-        $({".done": ref(item,'done')});
+        A({".done": A.ref(item,'done')});
 
         // The checkmark is hidden using CSS
-        $('div.checkmark text=✅');
+        A('div.checkmark text=✅');
 
         if (editing.value) {
             // Proxied string to hold label while being edited.
-            const labelCopy = proxy(item.label);
+            const labelCopy = A.proxy(item.label);
             function save() {
                 editing.value = false;
                 item.label = labelCopy.value;
             }
             // Label <input>. Save using enter or button.
-            $('input placeholder=Label bind=', labelCopy, 'keydown=', e => e.key==='Enter' && save());
-            $('button.outline text=Cancel click=', () => editing.value = false);
-            $('button text=Save click=', save);
+            A('input placeholder=Label bind=', labelCopy, 'keydown=', e => e.key==='Enter' && save());
+            A('button.outline text=Cancel click=', () => editing.value = false);
+            A('button text=Save click=', save);
         } else {
             // Label as text. 
-            $('p text=', item.label);
+            A('p text=', item.label);
 
             // Edit icon, if not done.
             if (!item.done) {
-                $('a text=Edit click=', e => {
+                A('a text=Edit click=', e => {
                     editing.value = true;
                     e.stopPropagation(); // We don't want to toggle as well.
                 });
             }
             
             // Clicking a row toggles done.
-            $('cursor:pointer click=', () => item.done = !item.done);
+            A('cursor:pointer click=', () => item.done = !item.done);
         }
     });
 }
 
 // Insert some component-local CSS, specific for this demo.
-const todoItemStyle = insertCss({
+const todoItemStyle = A.insertCss({
     "&": "mb:0.5rem",
     ".checkmark": "opacity:0.2",
     "&.done": "text-decoration:line-through",