add RippleJS

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,5 @@
+export component Name() {
+  let $name = "John";
+
+  <h1>{`Hello ${$name}`}</h1>
+}

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

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

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

@@ -0,0 +1,6 @@
+export component Name() {
+  let $count = 10;
+  const $doubleCount = $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 CssStyle() {
+  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 {@use autofocus} />
+}

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

@@ -0,0 +1,24 @@
+const TRAFFIC_LIGHTS = ["red", "orange", "green"];
+
+export component TrafficLight() {
+  let $lightIndex = 0;
+
+  const $light = 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>
+}

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

@@ -0,0 +1,11 @@
+import { effect } from "ripple";
+
+export component PageTitle() {
+  let $pageTitle = "";
+
+  effect(() => {
+    $pageTitle = document.title;
+  });
+
+  <h1>{`Page title: ${$pageTitle}`}</h1>
+}

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

@@ -0,0 +1,15 @@
+import { effect } from "ripple";
+
+export component Time() {
+  let $time = new Date().toLocaleTimeString();
+
+  effect(() => {
+    const timer = setInterval(() => {
+      $time = new Date().toLocaleTimeString();
+    }, 1000);
+
+    return () => clearInterval(timer);
+  });
+
+  <h1>{`Current time: ${$time}`}</h1>
+}

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

@@ -0,0 +1,10 @@
+import { UserProfile } from "./UserProfile.ripple";
+
+export component App() {
+  <UserProfile
+    name="John"
+    age={20}
+    favouriteColors={["green", "blue", "red"]}
+    isAvailable
+  />
+}

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

@@ -0,0 +1,11 @@
+export component UserProfile({ 
+  name = "", 
+  age = null, 
+  favouriteColors = [], 
+  isAvailable = false 
+}) {
+  <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/ripple/AnswerButton.ripple

@@ -0,0 +1,5 @@
+export component AnswerButton({ onYes, onNo }) {
+  <button onClick={onYes}>{"YES"}</button>
+
+  <button onClick={onNo}>{"NO"}</button>
+}

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

@@ -0,0 +1,17 @@
+import { AnswerButton } from "./AnswerButton.ripple";
+
+export component App() {
+  let $isHappy = true;
+
+  function onAnswerNo() {
+    $isHappy = false;
+  }
+
+  function onAnswerYes() {
+    $isHappy = true;
+  }
+
+  <p>{`Are you happy?`}</p>
+  <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
+  <p style="font-size: 50px;">{$isHappy ? "😀" : "😥"}</p>
+}

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

@@ -0,0 +1,5 @@
+import { FunnyButton } from "./FunnyButton.ripple";
+
+export component App() {
+  <FunnyButton>{"Click me!"}</FunnyButton>
+}

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

@@ -0,0 +1,7 @@
+export component FunnyButton({ $children }) {
+  <button 
+    style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 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;"
+  >
+    <$children />
+  </button>
+}

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

@@ -0,0 +1,6 @@
+import { FunnyButton } from "./FunnyButton.ripple";
+
+export component App() {
+  <FunnyButton />
+  <FunnyButton>{"I got content!"}</FunnyButton>
+}

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

@@ -0,0 +1,11 @@
+export component FunnyButton({ $children }) {
+  <button 
+    style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 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;"
+  >
+    if ($children) {
+      <$children />
+    } else {
+      <span>{"No content found"}</span>
+    }
+  </button>
+}

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

@@ -0,0 +1,10 @@
+export component InputHello() {
+  let $text = "Hello world";
+
+  function handleChange(event) {
+    $text = event.target.value;
+  }
+
+  <p>{$text}</p>
+  <input value={$text} onInput={handleChange} />
+}

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

@@ -0,0 +1,15 @@
+export component IsAvailable() {
+  let $isAvailable = false;
+
+  function handleChange() {
+    $isAvailable = !$isAvailable;
+  }
+
+  <input 
+    id="is-available" 
+    type="checkbox" 
+    checked={$isAvailable} 
+    onChange={handleChange}
+  />
+  <label for="is-available">{`Is available`}</label>
+}

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

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

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

@@ -0,0 +1,22 @@
+const colors = [
+  { id: 1, text: "red" },
+  { id: 2, text: "blue" },
+  { id: 3, text: "green" },
+  { id: 4, text: "gray", isDisabled: true },
+];
+
+export component ColorSelect() {
+  let $selectedColorId = 2;
+
+  function handleChange(event) {
+    $selectedColorId = event.target.value;
+  }
+
+  <select value={$selectedColorId} onChange={handleChange}>
+    for (const color of colors) {
+      <option value={color.id} disabled={color.isDisabled}>
+        {color.text}
+      </option>
+    }
+  </select>
+}

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

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

content/7-webapp-features/1-render-app/ripple/index.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

content/7-webapp-features/1-render-app/ripple/main.js

@@ -0,0 +1,6 @@
+import { mount } from "ripple";
+import { App } from "./App.ripple";
+
+mount(App, {
+  target: document.getElementById("app"),
+});

frameworks.mjs

@@ -475,6 +475,23 @@ const frameworks = [
     repositoryLink: "https://github.com/aurelia/framework",
     mainPackageName: "aurelia-framework",
   },
+  {
+    id: "ripple",
+    title: "Ripple",
+    frameworkName: "Ripple",
+    isCurrentVersion: true,
+    img: "framework/ripple.svg",
+    eslint: {
+      files: ["!**"],
+    },
+    playgroundURL: "https://www.ripplejs.com/playground",
+    documentationURL: "https://www.ripplejs.com/",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["index.html", "main.js", "App.ripple"]);
+    },
+    repositoryLink: "https://github.com/trueadm/ripple",
+    mainPackageName: "ripple",
+  },
 ];
 
 export function matchFrameworkId(id) {