feat(marko): udpate examples for v6 (#299)

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();
+  }
+}

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

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

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>

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>

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>

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>

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

@@ -1,2 +1,4 @@
 <input/inputElement>
-<effect() { inputElement().focus() }/>
+<script>
+  inputElement().focus();
+</script>

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>

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>

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>

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>

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>

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;

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;

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>

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>

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>

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>

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>

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>

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

@@ -0,0 +1,3 @@
+import App from "./App.marko";
+
+App.mount({}, document.getElementById("app"));

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>

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

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

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>

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",