Add Marko

.vscode/settings.json

@@ -4,5 +4,8 @@
   "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"],
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "[svg]": {
+    "editor.defaultFormatter": "jock.svg"
   }
 }

README.md

@@ -418,6 +418,43 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Router link
   - [x] Routing
 
+</details><details>
+        <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>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+  - [x] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
+  - [ ] Router link
+  - [ ] Routing
+
 </details>
 
 ## 🤝 Contributing

content/1-reactivity/1-declare-state/marko/Name.marko

@@ -0,0 +1,2 @@
+<let/name = "John"/>
+<h1>Hello ${name}</h1>

content/1-reactivity/2-update-state/marko/Name.marko

@@ -0,0 +1,3 @@
+<let/name="John"/>
+<effect() { name = "Jane" }/>
+<h1>Hello ${name}</h1>

content/1-reactivity/3-computed-state/marko/DoubleCount.marko

@@ -0,0 +1,3 @@
+<let/count = 10/>
+<const/doubleCount = count * 2/>
+<div>${doubleCount}</div>

content/2-templating/1-minimal-template/marko/HelloWorld.marko

@@ -0,0 +1 @@
+<h1>Hello world</h1>

content/2-templating/2-styling/marko/CssStyle.marko

@@ -0,0 +1,8 @@
+<h1.title>I am red</h1>
+<button style={ fontSize: "10rem" }>I am a button</button>
+
+<style>
+  .title {
+    color: red;
+  }
+</style>

content/2-templating/3-loop/marko/Colors.marko

@@ -0,0 +1,5 @@
+<ul>
+  <for|color| of=["red", "green", "blue"]>
+    <li>${color}</li>
+  </for>
+</ul>

content/2-templating/4-event-click/marko/Counter.marko

@@ -0,0 +1,3 @@
+<let/count = 0/>
+<p>Counter: ${count}</p>
+<button onClick() { count++ }>+1</button>

content/2-templating/5-dom-ref/marko/InputFocused.marko

@@ -0,0 +1,2 @@
+<input/inputElement type="text">
+<effect() { inputElement().focus() }/>

content/2-templating/6-conditional/marko/TrafficLight.marko

@@ -0,0 +1,17 @@
+static const TRAFFIC_LIGHTS = ["red", "orange", "green"];
+<let/lightIndex = 0/>
+<let/light = TRAFFIC_LIGHTS[lightIndex]/>
+
+<button onClick () {
+    lightIndex++;
+    if (lightIndex >= TRAFFIC_LIGHTS.length) {
+      lightIndex = 0;
+    }
+  }>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>
+</p>

content/3-lifecycle/1-on-mount/marko/PageTitle.marko

@@ -0,0 +1,3 @@
+<let/pageTitle = ""/>
+<effect() { pageTitle = document.title }/>
+<p>Page title is: ${pageTitle}</p>

content/3-lifecycle/2-on-unmount/marko/Time.marko

@@ -0,0 +1,6 @@
+<let/time = new Date()/>
+<lifecycle() {
+  onMount () { this.timer = setInterval(_ => time = new Date()), 1000) }
+  onDestroy () { clearInterval(this.timer) }
+}/>
+<p>Current time: ${time.toLocaleTimeString()}</p>

content/4-component-composition/1-props/marko/App.marko

@@ -0,0 +1,6 @@
+<UserProfile
+  name="John"
+  age=20
+  favouriteColors=["green", "blue", "red"]
+  isAvailable
+/>

content/4-component-composition/1-props/marko/UserProfile.marko

@@ -0,0 +1,18 @@
+export interface Input {
+  name: string;
+  age: number | void;
+  favouriteColors: string[];
+  isAvailable: boolean;
+}
+
+<const/{
+  name = "",
+  age = null,
+  favouriteColors = [],
+  isAvailable = false,
+} = input/>
+
+<p>My name is ${name}!</p>
+<p>My age is ${age}!</p>
+<p>My favourite colors are ${favouriteColors.join(", ")}!</p>
+<p>I am ${isAvailable ? "available" : "not available"}</p>

content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko

@@ -0,0 +1,7 @@
+export interface Input {
+  onYes: function;
+  onNo: function;
+}
+
+<button onClick=input.onYes>YES</button>
+<button onClick=input.onNo>NO</button>

content/4-component-composition/2-emit-to-parent/marko/App.marko

@@ -0,0 +1,7 @@
+<let/isHappy = true/>
+<p>Are you happy?</p>
+<AnswerButton
+  onYes () { isHappy = true }
+  onNo () { isHappy = false }
+/>
+<p style={ fontSize: 50 }>${isHappy ? "😀" : "😥"}</p>

content/4-component-composition/3-slot/marko/App.marko

@@ -0,0 +1 @@
+<FunnyButton>Click me!</FunnyButton>

content/4-component-composition/3-slot/marko/FunnyButton.marko

@@ -0,0 +1,14 @@
+<button style={
+  background: "rgba(0, 0, 0, 0.4)",
+  color: "#fff",
+  padding: "10px 20px",
+  fontSize: "30px",
+  border: "2px solid #fff",
+  margin: "8px",
+  transform: "scale(0.9)",
+  boxShadow: "4px 4px rgba(0, 0, 0, 0.4)",
+  transition: "transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s",
+  outline: "0",
+}>
+  <${input.renderBody}/>
+</button>

content/4-component-composition/4-slot-fallback/marko/App.marko

@@ -0,0 +1,2 @@
+<FunnyButton/>
+<FunnyButton>I got content!</FunnyButton>

content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko

@@ -0,0 +1,16 @@
+<button style={
+  background: "rgba(0, 0, 0, 0.4)",
+  color: "#fff",
+  padding: "10px 20px",
+  fontSize: "30px",
+  border: "2px solid #fff",
+  margin: "8px",
+  transform: "scale(0.9)",
+  boxShadow: "4px 4px rgba(0, 0, 0, 0.4)",
+  transition: "transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s",
+  outline: "0",
+}>
+  <${input.renderBody}>
+    <span>No content found</span>
+  </>
+</button>

content/4-component-composition/5-context/marko/App.marko

@@ -0,0 +1,14 @@
+<let/user = { // In a real app, you would fetch the user data from an API
+  id: 1,
+  username: "unicorn42",
+  email: "[email protected]",
+}/>
+
+function updateUsername(newUsername) {
+  user = { ...user, username: newUsername };
+}
+
+<h1>Welcome back, ${user.username}</h1>
+<set user={ ...user, updateUsername }>
+  <UserProfile />
+</set>

content/4-component-composition/5-context/marko/UserProfile.marko

@@ -0,0 +1,9 @@
+<get/{ username, email, updateUsername } = "App"/>
+<div>
+  <h2>My Profile</h2>
+  <p>Username: ${username}</p>
+  <p>Email: ${email}</p>
+  <button onClick () { updateUsername("Jane") }>
+    Update username to Jane
+  </button>
+</div>

content/6-form-input/1-input-text/marko/InputHello.marko

@@ -0,0 +1,3 @@
+<let/text = "Hello world"/>
+<p>${text}</p>
+<input value:=text/>

content/6-form-input/2-checkbox/marko/IsAvailable.marko

@@ -0,0 +1,5 @@
+<input#is-available
+  type="checkbox"
+  checked:=isAvailable
+/>
+<label for="is-available">Is available</label>

content/6-form-input/3-radio/marko/PickPill.marko

@@ -0,0 +1,22 @@
+function handleChange (event) {
+  picked = event.target.value;
+}
+
+<let/picked = "red"/>
+
+<div>Picked: ${picked}</div>
+<input#blue-pill
+  type="radio"
+  checked=picked === "blue"
+  value="blue"
+  onChange=handleChange
+/>
+<label for="blue-pill">Blue pill</label>
+
+<input#red-pill
+  type="radio"
+  checked=picked === "red"
+  value="red"
+  onChange=handleChange
+/>
+<label for="red-pill">Red pill</label>

content/6-form-input/4-select/marko/ColorSelect.marko

@@ -0,0 +1,15 @@
+<let/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 }>
+  <for|{ id, isDisabled, text }| of=colors>
+    <option value=id disabled=isDisabled checked=id === selectedColorId>
+      ${text}
+    </option>
+  </for>
+</select>

content/7-webapp-features/1-render-app/marko/App.marko

@@ -0,0 +1 @@
+<h1>Hello world</h1>

content/7-webapp-features/1-render-app/marko/index.marko

@@ -0,0 +1,4 @@
+<!doctype html>
+<html>
+  <App/>
+</html>

content/7-webapp-features/2-fetch-data/marko/App.marko

@@ -0,0 +1,18 @@
+<await(fetch("https://randomuser.me/api/?results=3").then(res => res.json()))>
+  <@placeholder>
+    <p>Fetching users...</p>
+  </@placeholder>
+  <@catch|error|>
+    <p>An error occured while fetching users</p>
+  </@catch>
+  <@then|{ results: users }|>
+    <ul>
+      <for|{ picture, name }| of=users>
+        <li>
+          <img src=picture.thumbnail alt="user">
+          <p>${name.first} ${name.last}</p>
+        </li>
+      </for>
+    </ul>
+  </@then>
+</await>

frameworks.mjs

@@ -251,4 +251,24 @@ export default [
       return sortAllFilenames(files, ["app.html", "app.ts"]);
     },
   },
+  {
+    id: "marko",
+    title: "Marko",
+    img: "framework/marko.svg",
+    eslint: {
+      env: {
+        browser: true,
+        es2021: true,
+        node: true,
+      },
+      parser: "@typescript-eslint/parser",
+      files: ["**/marko/**"],
+      extends: ["eslint:recommended"],
+    },
+    playgroundURL: "https://markojs.com/playground/",
+    documentationURL: "https://markojs.com/docs/getting-started/",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["app.marko"]);
+    },
+  },
 ];