From 886fdcd1d349beaa3fcff7483b9ed17ed17967fe Mon Sep 17 00:00:00 2001
From: Luke LaValva <lukelavalva@gmail.com>
Date: Sat, 13 Sep 2025 04:50:14 -0700
Subject: [PATCH] feat(marko): udpate examples for v6 (#299)

---
 build/lib/playgroundUrlByFramework.js         | 40 ++++++++++++++++---
 .../1-declare-state/marko/Name.marko          |  2 +-
 .../2-update-state/marko/Name.marko           |  4 +-
 .../3-computed-state/marko/DoubleCount.marko  |  4 +-
 .../2-styling/marko/CssStyle.marko            |  2 +-
 .../4-event-click/marko/Counter.marko         |  2 +-
 .../5-dom-ref/marko/InputFocused.marko        |  4 +-
 .../6-conditional/marko/TrafficLight.marko    |  6 +--
 .../1-on-mount/marko/PageTitle.marko          |  4 +-
 .../3-lifecycle/2-on-unmount/marko/Time.marko | 10 ++---
 .../1-props/marko/UserProfile.marko           |  2 +-
 .../2-emit-to-parent/marko/App.marko          |  4 +-
 .../3-slot/marko/FunnyButton.marko            |  6 +--
 .../4-slot-fallback/marko/FunnyButton.marko   |  6 +--
 .../5-context/marko/App.marko                 | 10 ++---
 .../5-context/marko/UserProfile.marko         |  2 +-
 .../1-input-text/marko/InputHello.marko       |  4 +-
 .../2-checkbox/marko/IsAvailable.marko        |  2 +-
 .../6-form-input/3-radio/marko/PickPill.marko | 15 +++----
 .../4-select/marko/ColorSelect.marko          |  6 +--
 .../1-render-app/marko/app.js                 |  3 ++
 .../1-render-app/marko/index.html             |  7 ++++
 .../1-render-app/marko/index.marko            |  4 --
 .../2-fetch-data/marko/App.marko              | 20 +++++-----
 frameworks.mjs                                |  2 +-
 25 files changed, 101 insertions(+), 70 deletions(-)
 create mode 100644 content/7-webapp-features/1-render-app/marko/app.js
 create mode 100644 content/7-webapp-features/1-render-app/marko/index.html
 delete mode 100644 content/7-webapp-features/1-render-app/marko/index.marko

diff --git a/build/lib/playgroundUrlByFramework.js b/build/lib/playgroundUrlByFramework.js
index 9d4cf54..cfdd5dd 100644
--- a/build/lib/playgroundUrlByFramework.js
+++ b/build/lib/playgroundUrlByFramework.js
@@ -92,16 +92,17 @@ export default {
 
     return generateURLFromData(data);
   },
-  marko: (contentByFilename) => {
-    const BASE_URL = "https://markojs.com/playground/#";
-
+  marko: async (contentByFilename) => {
+    let firstFile = true;
     const data = Object.entries(contentByFilename).map(([path, content]) => ({
-      name: nodePath.parse(path).base,
-      path: `/components/${path}`,
+      path: firstFile ? (firstFile = false) || "index.marko" : path,
       content,
     }));
 
-    return BASE_URL + compressToURL(JSON.stringify(data));
+    return (
+      "https://markojs.com/playground#" +
+      (await markoCompress(JSON.stringify(data)))
+    );
   },
 };
 
@@ -158,3 +159,30 @@ async function compress_and_encode_text(input) {
     }
   }
 }
+
+// method `compress` from https://github.com/marko-js/website/blob/main/src/util/hasher.ts#L8-L25
+export async function markoCompress(value) {
+  const stream = new CompressionStream("gzip");
+  const writer = stream.writable.getWriter();
+  writer.write(new TextEncoder().encode(value));
+  writer.close();
+
+  let result = "v2";
+  const reader = stream.readable.getReader();
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      for (const byte of value) {
+        result += String.fromCharCode(byte);
+      }
+    }
+
+    return btoa(result)
+      .replace(/=+$/, "")
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_");
+  } finally {
+    reader.releaseLock();
+  }
+}
diff --git a/content/1-reactivity/1-declare-state/marko/Name.marko b/content/1-reactivity/1-declare-state/marko/Name.marko
index 81e0519..b5ae1f5 100644
--- a/content/1-reactivity/1-declare-state/marko/Name.marko
+++ b/content/1-reactivity/1-declare-state/marko/Name.marko
@@ -1,2 +1,2 @@
-<let/name = "John"/>
+<let/name="John">
 <h1>Hello ${name}</h1>
diff --git a/content/1-reactivity/2-update-state/marko/Name.marko b/content/1-reactivity/2-update-state/marko/Name.marko
index d2cfcb4..d56c8e0 100644
--- a/content/1-reactivity/2-update-state/marko/Name.marko
+++ b/content/1-reactivity/2-update-state/marko/Name.marko
@@ -1,3 +1,3 @@
-<let/name = "John"/>
-<effect() { name = "Jane" }/>
+<let/name="John">
+<script>name = "Jane"</script>
 <h1>Hello ${name}</h1>
diff --git a/content/1-reactivity/3-computed-state/marko/DoubleCount.marko b/content/1-reactivity/3-computed-state/marko/DoubleCount.marko
index 6cda107..920a268 100644
--- a/content/1-reactivity/3-computed-state/marko/DoubleCount.marko
+++ b/content/1-reactivity/3-computed-state/marko/DoubleCount.marko
@@ -1,3 +1,3 @@
-<let/count = 10/>
-<const/doubleCount = count * 2/>
+<let/count=10>
+<const/doubleCount=count * 2>
 <div>${doubleCount}</div>
diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko
index e186e7c..da95261 100644
--- a/content/2-templating/2-styling/marko/CssStyle.marko
+++ b/content/2-templating/2-styling/marko/CssStyle.marko
@@ -1,5 +1,5 @@
 <h1.title>I am red</h1>
-<button style={ fontSize: "10rem" }>I am a button</button>
+<button style={ "font-size": "10rem" }>I am a button</button>
 <button class=scopedButton>I am a style-scoped button</button>
 
 <style>
diff --git a/content/2-templating/4-event-click/marko/Counter.marko b/content/2-templating/4-event-click/marko/Counter.marko
index 83d71fe..bc99ae8 100644
--- a/content/2-templating/4-event-click/marko/Counter.marko
+++ b/content/2-templating/4-event-click/marko/Counter.marko
@@ -1,3 +1,3 @@
-<let/count = 0/>
+<let/count=0>
 <p>Counter: ${count}</p>
 <button onClick() { count++ }>+1</button>
diff --git a/content/2-templating/5-dom-ref/marko/InputFocused.marko b/content/2-templating/5-dom-ref/marko/InputFocused.marko
index 3bd0399..3158f79 100644
--- a/content/2-templating/5-dom-ref/marko/InputFocused.marko
+++ b/content/2-templating/5-dom-ref/marko/InputFocused.marko
@@ -1,2 +1,4 @@
 <input/inputElement>
-<effect() { inputElement().focus() }/>
+<script>
+  inputElement().focus();
+</script>
diff --git a/content/2-templating/6-conditional/marko/TrafficLight.marko b/content/2-templating/6-conditional/marko/TrafficLight.marko
index 8eb5c66..2657420 100644
--- a/content/2-templating/6-conditional/marko/TrafficLight.marko
+++ b/content/2-templating/6-conditional/marko/TrafficLight.marko
@@ -1,6 +1,6 @@
 static const TRAFFIC_LIGHTS = ["red", "orange", "green"];
-<let/lightIndex = 0/>
-<const/light = TRAFFIC_LIGHTS[lightIndex]/>
+<let/lightIndex=0>
+<const/light=TRAFFIC_LIGHTS[lightIndex]>
 
 <button onClick() { lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length }>
   Next light
@@ -9,6 +9,6 @@ static const TRAFFIC_LIGHTS = ["red", "orange", "green"];
 <p>
   You must
   <if=light === "red">STOP</if>
-  <else-if=light === "orange">SLOW DOWN</else-if>
+  <else if=light === "orange">SLOW DOWN</else>
   <else>GO</else>
 </p>
diff --git a/content/3-lifecycle/1-on-mount/marko/PageTitle.marko b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko
index e80376e..45e7a47 100644
--- a/content/3-lifecycle/1-on-mount/marko/PageTitle.marko
+++ b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko
@@ -1,3 +1,3 @@
-<let/pageTitle = ""/>
-<effect() { pageTitle = document.title }/>
+<let/pageTitle="">
+<script>pageTitle = document.title</script>
 <p>Page title: ${pageTitle}</p>
diff --git a/content/3-lifecycle/2-on-unmount/marko/Time.marko b/content/3-lifecycle/2-on-unmount/marko/Time.marko
index 5fd8e9b..adfdc3f 100644
--- 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) }
-/>
+<let/time=new Date()>
+<script>
+  const id = setInterval(() => time = new Date(), 1000);
+  $signal.onabort = () => clearInterval(id)
+</script>
 <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
index 65e14b1..4144ec0 100644
--- a/content/4-component-composition/1-props/marko/UserProfile.marko
+++ b/content/4-component-composition/1-props/marko/UserProfile.marko
@@ -3,7 +3,7 @@
   age = null,
   favouriteColors = [],
   isAvailable = false,
-} = input/>
+}=input>
 
 <p>My name is ${name}!</p>
 <p>My age is ${age}!</p>
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
index d771bd5..8821bf3 100644
--- 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/>
+<let/isHappy=true>
 <p>Are you happy?</p>
 <AnswerButton
   onYes() { isHappy = true }
   onNo() { isHappy = false }
 />
-<p style={ fontSize: 50 }>${isHappy ? "😀" : "😥"}</p>
+<p style={ "font-size": 50 }>${isHappy ? "😀" : "😥"}</p>
diff --git a/content/4-component-composition/3-slot/marko/FunnyButton.marko b/content/4-component-composition/3-slot/marko/FunnyButton.marko
index d213be2..98bb870 100644
--- a/content/4-component-composition/3-slot/marko/FunnyButton.marko
+++ b/content/4-component-composition/3-slot/marko/FunnyButton.marko
@@ -1,8 +1,8 @@
-<button.${funnyButton}>
-  <${input.renderBody}/>
+<button class=funnyButton>
+  <${input.content}/>
 </button>
 
-<style.module.css/{ funnyButton }>
+<style/{ funnyButton }>
   .funnyButton {
     background: rgba(0, 0, 0, 0.4);
     color: #fff;
diff --git a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko
index e889afd..c3df1a2 100644
--- a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko
+++ b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko
@@ -1,10 +1,10 @@
-<button.${funnyButton}>
-  <${input.renderBody}>
+<button class=funnyButton>
+  <${input.content}>
     <span>No content found</span>
   </>
 </button>
 
-<style.module.css/{ funnyButton }>
+<style/{ funnyButton }>
   .funnyButton {
     background: rgba(0, 0, 0, 0.4);
     color: #fff;
diff --git a/content/4-component-composition/5-context/marko/App.marko b/content/4-component-composition/5-context/marko/App.marko
index 75a15b8..775f616 100644
--- a/content/4-component-composition/5-context/marko/App.marko
+++ b/content/4-component-composition/5-context/marko/App.marko
@@ -1,13 +1,13 @@
-<let/user = {
+<let/user={
   id: 1,
   username: "unicorn42",
   email: "unicorn42@example.com",
-}/>
+}>
 <const/updateUsername(newUsername) {
   user = { ...user, username: newUsername };
-}/>
+}>
 
 <h1>Welcome back, ${user.username}</h1>
-<set={ ...user, updateUsername }>
+<context={ ...user, updateUsername }>
   <UserProfile />
-</set>
+</context>
diff --git a/content/4-component-composition/5-context/marko/UserProfile.marko b/content/4-component-composition/5-context/marko/UserProfile.marko
index 19d28dc..30a6b78 100644
--- a/content/4-component-composition/5-context/marko/UserProfile.marko
+++ b/content/4-component-composition/5-context/marko/UserProfile.marko
@@ -1,4 +1,4 @@
-<get/{ username, email, updateUsername } = "App"/>
+<context/{ username, email, updateUsername } from="App"/>
 <div>
   <h2>My Profile</h2>
   <p>Username: ${username}</p>
diff --git a/content/6-form-input/1-input-text/marko/InputHello.marko b/content/6-form-input/1-input-text/marko/InputHello.marko
index 308d854..d9f6a87 100644
--- a/content/6-form-input/1-input-text/marko/InputHello.marko
+++ b/content/6-form-input/1-input-text/marko/InputHello.marko
@@ -1,3 +1,3 @@
-<let/text = "Hello world"/>
+<let/text="Hello world">
 <p>${text}</p>
-<input value:=text/>
+<input value:=text>
diff --git a/content/6-form-input/2-checkbox/marko/IsAvailable.marko b/content/6-form-input/2-checkbox/marko/IsAvailable.marko
index 8d2d272..bfdf1a4 100644
--- a/content/6-form-input/2-checkbox/marko/IsAvailable.marko
+++ b/content/6-form-input/2-checkbox/marko/IsAvailable.marko
@@ -1,5 +1,5 @@
 <input#is-available
   type="checkbox"
   checked:=input.isAvailable
-/>
+>
 <label for="is-available">Is available</label>
diff --git a/content/6-form-input/3-radio/marko/PickPill.marko b/content/6-form-input/3-radio/marko/PickPill.marko
index bebf8b8..f8171a7 100644
--- a/content/6-form-input/3-radio/marko/PickPill.marko
+++ b/content/6-form-input/3-radio/marko/PickPill.marko
@@ -1,21 +1,16 @@
-<let/picked = "red"/>
-<const/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
-/>
+  checkedValue:=picked
+>
 <label for="blue-pill">Blue pill</label>
 
 <input#red-pill
   type="radio"
-  checked=picked === "red"
   value="red"
-  onChange=handleChange
-/>
+  checkedValue:=picked
+>
 <label for="red-pill">Red pill</label>
diff --git a/content/6-form-input/4-select/marko/ColorSelect.marko b/content/6-form-input/4-select/marko/ColorSelect.marko
index 6f8defc..50865f8 100644
--- a/content/6-form-input/4-select/marko/ColorSelect.marko
+++ b/content/6-form-input/4-select/marko/ColorSelect.marko
@@ -4,11 +4,11 @@ static const colors = [
   { id: 3, text: "green" },
   { id: 4, text: "gray", isDisabled: true },
 ];
-<let/selectedColorId = 2/>
+<let/selectedColorId=2>
 
-<select onChange(event) { selectedColorId = event.target.value }>
+<select value:=selectedColorId>
   <for|{ id, isDisabled, text }| of=colors>
-    <option value=id disabled=isDisabled selected=id === selectedColorId>
+    <option value=id disabled=isDisabled>
       ${text}
     </option>
   </for>
diff --git a/content/7-webapp-features/1-render-app/marko/app.js b/content/7-webapp-features/1-render-app/marko/app.js
new file mode 100644
index 0000000..6c15722
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/marko/app.js
@@ -0,0 +1,3 @@
+import App from "./App.marko";
+
+App.mount({}, document.getElementById("app"));
diff --git a/content/7-webapp-features/1-render-app/marko/index.html b/content/7-webapp-features/1-render-app/marko/index.html
new file mode 100644
index 0000000..e66268f
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/marko/index.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>
diff --git a/content/7-webapp-features/1-render-app/marko/index.marko b/content/7-webapp-features/1-render-app/marko/index.marko
deleted file mode 100644
index f3be8a0..0000000
--- a/content/7-webapp-features/1-render-app/marko/index.marko
+++ /dev/null
@@ -1,4 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <App/>
-</html>
diff --git a/content/7-webapp-features/2-fetch-data/marko/App.marko b/content/7-webapp-features/2-fetch-data/marko/App.marko
index ede70db..8b61a9c 100644
--- a/content/7-webapp-features/2-fetch-data/marko/App.marko
+++ b/content/7-webapp-features/2-fetch-data/marko/App.marko
@@ -1,11 +1,5 @@
-<await(fetch("https://randomuser.me/api/?results=3").then(res => res.json()))>
-  <@placeholder>
-    <p>Fetching users...</p>
-  </@placeholder>
-  <@catch|error|>
-    <p>An error occurred while fetching users</p>
-  </@catch>
-  <@then|{ results: users }|>
+<try>
+  <await|{ results: users }|=fetch("https://randomuser.me/api/?results=3").then(res => res.json())>
     <ul>
       <for|{ picture, name }| of=users>
         <li>
@@ -14,5 +8,11 @@
         </li>
       </for>
     </ul>
-  </@then>
-</await>
+  </await>
+  <@placeholder>
+    <p>Fetching users...</p>
+  </@placeholder>
+  <@catch|error|>
+    <p>An error occurred while fetching users</p>
+  </@catch>
+</try>
diff --git a/frameworks.mjs b/frameworks.mjs
index 205133c..d78f33b 100644
--- a/frameworks.mjs
+++ b/frameworks.mjs
@@ -436,7 +436,7 @@ const frameworks = [
     playgroundURL: "https://markojs.com/playground/",
     documentationURL: "https://markojs.com/docs/getting-started/",
     filesSorter(files) {
-      return sortAllFilenames(files, ["index.marko", "App.marko"]);
+      return sortAllFilenames(files, ["index.html", "App.marko"]);
     },
     repositoryLink: "https://github.com/marko-js/marko",
     mainPackageName: "marko",