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

Author: LuLaValva

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>