add RippleJS

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-export component FunnyButton({ $children }) {
+export component FunnyButton(props) {
   <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 />
+    <props.children />
   </button>
 }

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

@@ -1,9 +1,9 @@
-export component FunnyButton({ $children }) {
+export component FunnyButton(props) {
   <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 />
+    if (props.children) {
+      <props.children />
     } else {
       <span>{"No content found"}</span>
     }

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

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

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

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

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

@@ -1,15 +1,17 @@
+import { track } from "ripple";
+
 export component PickPill() {
-  let $picked = "red";
+  let picked = track("red");
 
   function handleChange(event) {
-    $picked = event.target.value;
+    @picked = event.target.value;
   }
 
-  <div>{`Picked: ${$picked}`}</div>
+  <div>{`Picked: ${@picked}`}</div>
 
   <input
     id="blue-pill"
-    checked={$picked === "blue"}
+    checked={@picked === "blue"}
     type="radio"
     value="blue"
     onChange={handleChange}
@@ -18,7 +20,7 @@ export component PickPill() {
 
   <input
     id="red-pill"
-    checked={$picked === "red"}
+    checked={@picked === "red"}
     type="radio"
     value="red"
     onChange={handleChange}

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

@@ -1,3 +1,5 @@
+import { track } from "ripple";
+
 const colors = [
   { id: 1, text: "red" },
   { id: 2, text: "blue" },
@@ -6,13 +8,13 @@ const colors = [
 ];
 
 export component ColorSelect() {
-  let $selectedColorId = 2;
+  let selectedColorId = track(2);
 
   function handleChange(event) {
-    $selectedColorId = event.target.value;
+    @selectedColorId = event.target.value;
   }
 
-  <select value={$selectedColorId} onChange={handleChange}>
+  <select value={@selectedColorId} onChange={handleChange}>
     for (const color of colors) {
       <option value={color.id} disabled={color.isDisabled}>
         {color.text}