Feedback: no space before method parens, no TS, else-if, ColorSelect …

…works now
marko-js · Jan 18, 2023 · 8e17907 · 8e17907
1 parent a245195
commit 8e17907
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ How do we solve this ? Developers love having framework overview by examples. It
 <summary>
 <img width="18" height="18" src="public/framework/svelte.svg" />
 <b>Svelte</b>
-<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+<img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -52,7 +52,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/react.svg" />
             <b>React</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -89,7 +89,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 3</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -126,7 +126,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/solid.svg" />
             <b>SolidJS</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -163,7 +163,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/qwik.svg" />
             <b>Qwik</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -200,7 +200,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/angular.svg" />
             <b>Angular</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -237,7 +237,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/lit.svg" />
             <b>Lit</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -274,7 +274,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/vue.svg" />
             <b>Vue 2</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -311,7 +311,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/ember.svg" />
             <b>Ember</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -348,7 +348,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/alpine.svg" />
             <b>Alpine</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -385,7 +385,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/aurelia.svg" />
             <b>Aurelia 1</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
 
 - [x] Reactivity
   - [x] Declare state
@@ -422,7 +422,7 @@ How do we solve this ? Developers love having framework overview by examples. It
         <summary>
             <img width="18" height="18" src="public/framework/marko.svg">
             <b>Marko</b>
-            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92"></summary>
+            <img alt="93% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/93"></summary>
 
 - [x] Reactivity
   - [x] Declare state

diff --git a/content/2-templating/6-conditional/marko/TrafficLight.marko b/content/2-templating/6-conditional/marko/TrafficLight.marko
@@ -2,13 +2,13 @@ static const TRAFFIC_LIGHTS = ["red", "orange", "green"];
 <let/lightIndex = 0/>
 <const/light = TRAFFIC_LIGHTS[lightIndex]/>
 
-<button onClick () {
-    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length;
-  }>Next light</button>
+<button onClick() { lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length }>
+  Next light
+</button>
 <p>Light is: ${light}</p>
 <p>
   You must
   <if=light === "red">STOP</if>
-  <if=light === "orange">SLOW DOWN</if>
-  <if=light === "green">GO</if>
+  <else-if=light === "orange">SLOW DOWN</if>
+  <else>GO</if>
 </p>
diff --git a/content/3-lifecycle/2-on-unmount/marko/Time.marko b/content/3-lifecycle/2-on-unmount/marko/Time.marko
@@ -1,6 +1,6 @@
 <let/time = new Date()/>
 <lifecycle
-  onMount () { this.timer = setInterval(_ => time = new Date(), 1000) }
-  onDestroy () { clearInterval(this.timer) }
+  onMount() { this.timer = setInterval(_ => time = new Date(), 1000) }
+  onDestroy() { clearInterval(this.timer) }
 />
 <p>Current time: ${time.toLocaleTimeString()}</p>
diff --git a/content/4-component-composition/1-props/marko/UserProfile.marko b/content/4-component-composition/1-props/marko/UserProfile.marko
@@ -1,10 +1,3 @@
-export interface Input {
-  name: string;
-  age: number | void;
-  favouriteColors: string[];
-  isAvailable: boolean;
-}
-
 <const/{
   name = "",
   age = null,

diff --git a/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko b/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko
@@ -1,7 +1,2 @@
-export interface Input {
-  onYes: function;
-  onNo: function;
-}
-
 <button onClick=input.onYes>YES</button>
 <button onClick=input.onNo>NO</button>
diff --git a/content/4-component-composition/2-emit-to-parent/marko/App.marko b/content/4-component-composition/2-emit-to-parent/marko/App.marko
@@ -1,7 +1,7 @@
 <let/isHappy = true/>
 <p>Are you happy?</p>
 <AnswerButton
-  onYes () { isHappy = true }
-  onNo () { isHappy = false }
+  onYes() { isHappy = true }
+  onNo() { isHappy = false }
 />
 <p style={ fontSize: 50 }>${isHappy ? "😀" : "😥"}</p>
diff --git a/content/4-component-composition/5-context/marko/UserProfile.marko b/content/4-component-composition/5-context/marko/UserProfile.marko
@@ -3,7 +3,7 @@
   <h2>My Profile</h2>
   <p>Username: ${username}</p>
   <p>Email: ${email}</p>
-  <button onClick () { updateUsername("Jane") }>
+  <button onClick() { updateUsername("Jane") }>
     Update username to Jane
   </button>
 </div>
diff --git a/content/6-form-input/4-select/marko/ColorSelect.marko b/content/6-form-input/4-select/marko/ColorSelect.marko
@@ -1,14 +1,14 @@
-<let/colors = [
+static const colors = [
   { id: 1, text: "red" },
   { id: 2, text: "blue" },
   { id: 3, text: "green" },
   { id: 4, text: "gray", isDisabled: true },
-]/>
+];
 <let/selectedColorId = 2/>
 
-<select onChange (event) { selectedColorId = event.target.value }>
+<select onChange(event) { selectedColorId = event.target.value }>
   <for|{ id, isDisabled, text }| of=colors>
-    <option value=id disabled=isDisabled checked=id === selectedColorId>
+    <option value=id disabled=isDisabled selected=id === selectedColorId>
       ${text}
     </option>
   </for>