add RippleJS (#300)

Author: tijnjh

build/lib/highlighter.js

@@ -16,6 +16,9 @@ const highlighter = await createHighlighter({
     "vue",
     "marko",
   ],
+  langAlias: {
+    ripple: "jsx", // until ripple is supported by shiki
+  },
 });
 
 const md = MarkdownIt({

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

@@ -0,0 +1,7 @@
+import { track } from "ripple";
+
+export component Name() {
+  let name = track("John");
+
+  <h1>{`Hello ${@name}`}</h1>
+}

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

@@ -0,0 +1,8 @@
+import { track } from "ripple";
+
+export component Name() {
+  let name = track("John");
+  @name = "Jane";
+
+  <h1>{`Hello ${@name}`}</h1>
+}

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

@@ -0,0 +1,8 @@
+import { track } from "ripple";
+
+export component DoubleCount() {
+  let count = track(10);
+  const doubleCount = track(() => @count * 2);
+
+  <div>{@doubleCount}</div>
+}

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

@@ -0,0 +1,3 @@
+export component HelloWorld() {
+  <h1>{"Hello world"}</h1>
+}

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

@@ -0,0 +1,10 @@
+export component CssStyle() {
+  <h1 class="title">{"I am red"}</h1>
+  <button style="font-size: 10rem;">{"I am a button"}</button>
+
+  <style>
+    .title {
+      color: red;
+    }
+  </style>
+}

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

@@ -0,0 +1,9 @@
+export component Colors() {
+  const colors = ["red", "green", "blue"];
+
+  <ul>
+    for (const color of colors) {
+      <li>{color}</li>
+    }
+  </ul>
+}

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

@@ -0,0 +1,10 @@
+export component Counter() {
+  let $count = 0;
+
+  function incrementCount() {
+    $count++;
+  }
+
+  <p>{`Count: ${$count}`}</p>
+  <button onClick={incrementCount}>{"+1"}</button>
+}

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

@@ -0,0 +1,7 @@
+export component InputFocused() {
+  function autofocus(element) {
+    element.focus();
+  }
+
+  <input {ref autofocus} />
+}

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

@@ -0,0 +1,26 @@
+import { track } from "ripple";
+
+const TRAFFIC_LIGHTS = ["red", "orange", "green"];
+
+export component TrafficLight() {
+  let lightIndex = track(0);
+
+  const light = track(() => TRAFFIC_LIGHTS[@lightIndex]);
+
+  function nextLight() {
+    @lightIndex = (@lightIndex + 1) % TRAFFIC_LIGHTS.length;
+  }
+
+  <button onClick={nextLight}>{"Next light"}</button>
+  <p>{`Light is ${@light}`}</p>
+  <p>
+    {"You must "}
+    if (@light === "red") {
+      <span>{"STOP"}</span>
+    } else if (@light === "orange") {
+      <span>{"SLOW DOWN"}</span>
+    } else if (@light === "green") {
+      <span>{"GO"}</span>
+    }
+  </p>
+}