Cleaner example code

src/components/app-button/index.marko

@@ -4,23 +4,21 @@ class {
     // We will emit a custom "click" event when a DOM click event
     // is triggered
     this.emit("click", {
-      event: event // Pass along the DOM event in case it is helpful to others
+      event // Pass along the DOM event in case it is helpful to others
     });
   }
 }
 
-$ const size = input.size || "normal";
-$ const variant = input.variant || "primary";
-$ const variantClassName = variant !== "primary" && "app-button-" + variant;
-$ const sizeClassName = size !== "normal" && "app-button-" + size;
-<button
+$ const { label, size = "normal", variant = "primary" } = input;
+
+<button.app-button
   ...input["*"]
-  class=["app-button", variantClassName, sizeClassName, input["class"]]
+  class=[`app-button-${variant}`, `app-button-${size}`, input["class"]]
   onClick("handleClick")>
-  <span>
-    <if(input.label)>${input.label}</if>
-    <else>
-      <${input}/>
-    </else>
-  </span>
+  <if(label)>
+    ${label}
+  </if>
+  <else>
+    <${input}/>
+  </else>
 </button>

src/components/app-button/marko-tag.json

@@ -1,6 +1,5 @@
 {
   "@label": "string",
-  "@href": "string",
   "@variant": {
     "type": "string",
     "enum": ["primary", "secondary"]

src/components/app-button/style.less

@@ -1,38 +1,34 @@
 @import "../../global-style/variables.less";
 
 .app-button {
-  display: inline-block;
   border-radius: 8px;
   padding: 12px;
-  background-color: @button-bg;
+  margin: 0 0.5ch;
+  background: @button-bg;
   color: @button-fg;
-  transition-property: background-color;
-  transition-duration: 0.3s;
-  transition-timing-function: ease-out;
+  transition: background-color 0.3s ease-out;
 }
 
-
 .app-button:hover {
-  background-color: lighten(@button-bg, 10%);
+  background: lighten(@button-bg, 10%);
 }
 
+
 /* Variants */
 .app-button-secondary {
-  background-color: @button-secondary-bg;
+  background: @button-secondary-bg;
   color: @button-secondary-fg;
 }
 
 .app-button-secondary:hover {
-  background-color: lighten(@button-secondary-bg, 10%);
+  background: lighten(@button-secondary-bg, 10%);
 }
 
 
-
 /* Sizes */
 .app-button-small {
   font-size: 0.9em;
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding: 6px 12px;
 }
 
 .app-button-large {

src/components/app-checkbox/index.marko

@@ -1,36 +1,22 @@
 class {
-  onInput(input) {
+  onInput({ checked }) {
     this.state = {
-      checked: input.checked === true
+      checked
     };
   }
 
-  isChecked() {
-    return this.state.checked === true;
-  }
-
-  setChecked(newChecked) {
-    this.state.checked = newChecked;
-  }
-
   toggle() {
     this.state.checked = !this.state.checked;
   }
 
-  getData() {
-    return this.input.data;
-  }
-
   handleClick() {
     const newChecked = !this.state.checked;
     let defaultPrevented = false;
 
     this.emit("toggle", {
       checked: newChecked,
-      data: this.getData(),
-      preventDefault: function() {
-        defaultPrevented = true;
-      }
+      data: this.input.data,
+      preventDefault: () => defaultPrevented = true
     });
 
     if (!defaultPrevented) {
@@ -39,21 +25,16 @@ class {
   }
 }
 
-<app-button
-  key="button"
-  class=[
-    "app-checkbox",
-    input["class"],
-    {
-      checked: state.checked
-    }
-  ]
+<app-button.app-checkbox
+  class=[ input["class"], state.checked && "app-checkbox--checked" ]
+  aria-pressed=state.checked.toString()
   onClick("handleClick")>
-  <span class="app-checkbox-icon"/>
-  <span key="checkboxLabel">
-    <if(input.label)>${input.label}</if>
-    <else>
-      <${input}/>
-    </else>
-  </span>
+  <span.app-checkbox-icon/>
+
+  <if(input.label)>
+    ${input.label}
+  </if>
+  <else>
+    <${input}/>
+  </else>
 </app-button>

src/components/app-checkbox/style.less

@@ -1,27 +1,23 @@
 @import "../../global-style/variables.less";
 
-.app-button.app-checkbox {
-  background-color: @button-secondary-bg;
+.app-checkbox {
+  background: @button-secondary-bg;
   color: @button-secondary-fg;
 }
 
-.app-button.app-checkbox.checked {
-  background-color: @button-bg;
+.app-checkbox--checked {
+  background: @button-bg;
   color: @button-fg;
 }
 
 .app-checkbox-icon {
-  background-image: url(./images/unchecked.svg);
-  background-size: contain;
+  background: url(./images/unchecked.svg) no-repeat 0 0 / contain;
   width: 18px;
   height: 18px;
   display: inline-block;
-  background-repeat: no-repeat;
-  opacity: 0.2;
   margin-right: 4px;
 }
 
-.app-checkbox.checked .app-checkbox-icon {
+.app-checkbox--checked > .app-checkbox-icon {
   background-image: url(./images/checked.svg);
-  opacity: 1;
 }

src/components/app-fetch-data/index.marko

@@ -1,20 +1,19 @@
 import { getUsers } from "../../services/users"
 
 class {
-  onInput(input) {
+  onInput({ usersData }) {
     let users = [];
     let pageIndex = -1;
 
-    const usersData = input.usersData;
     if (usersData) {
       users = usersData.users;
       pageIndex = usersData.pageIndex;
     }
 
     this.state = {
       loading: false,
-      users: users,
-      pageIndex: pageIndex
+      users,
+      pageIndex
     };
   }
 
@@ -27,22 +26,18 @@ class {
   }
 
   loadMore() {
-    const state = this.state;
+    const { state } = this;
     state.loading = true;
 
     this.fetchPromise = this.fetchPromise
-      .then(function() {
-        return getUsers({
-          pageIndex: ++state.pageIndex
-        });
-      })
-      .then(function(usersData) {
+      .then(() => getUsers({ pageIndex: ++state.pageIndex }))
+      .then(usersData => {
         state.users = state.users.concat(usersData.users);
         state.loading = false;
       })
-      .catch(function(e) {
+      .catch(e => {
         state.loading = false;
-        console.log("Fetch failed:", e);
+        console.error("Fetch failed:", e);
       });
   }
 
@@ -53,40 +48,42 @@ class {
   onUpdate() {
     if (this.state.pageIndex > 0) {
       const tableContainer = this.getEl("tableContainer");
-      tableContainer.scrollTop = tableContainer.scrollHeight;
+      tableContainer.scrollTo(0, tableContainer.scrollHeight);
     }
   }
 }
 
-<div.app-fetch-data>
-  <div class="table-container" key="tableContainer">
-    <if(state.users.length)>
-      <table>
-        <thead>
+<div.table-container key="tableContainer">
+  <if(state.users.length)>
+    <table>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Avatar</th>
+          <th>Name</th>
+          <th>Email</th>
+        </tr>
+      </thead>
+      <tbody>
+        <for|user| of=state.users>
           <tr>
-            <td>ID</td>
-            <td>Avatar</td>
-            <td>Name</td>
-            <td>Email</td>
+            <th>${user.id}</th>
+            <td>
+              <img src=user.avatar width=50 height=50 alt=""/>
+            </td>
+            <td>${user.firstName} ${user.lastName}</td>
+            <td>${user.email}</td>
           </tr>
-        </thead>
-        <tbody>
-          <for|user| of=state.users>
-            <tr>
-              <td>${user.id}</td>
-              <td>
-                <img src=user.avatar width=50 height=50/>
-              </td>
-              <td>${user.firstName} ${user.lastName}</td>
-              <td>${user.email}</td>
-            </tr>
-          </for>
-        </tbody>
-      </table>
-    </if>
-  </div>
-  <app-button
-    label=(state.users.length ? "Load more users" : "Load users")
-    onClick("handleLoadMoreClick")/>
-  <span class=[state.loading ? "loading" : null]/>
+        </for>
+      </tbody>
+    </table>
+  </if>
 </div>
+
+<app-button
+  label=`Load ${state.users.length ? "more " : ""}users`
+  onClick("handleLoadMoreClick")/>
+
+<if(state.loading)>
+  <progress.app-fetch-data-loading/>
+</if>