Reactivity

Declare state

Solid.js

import { createSignal } from "solid-js";

export default function Name() {
  const [name] = createSignal("John");

  return <h1>Hello {name()}</h1>;
}

Ripple

import { track } from "ripple";

export default function Name() {
  let &[name] = track("John");

  return <h1>"Hello "{name}</h1>;
}

Update state

Solid.js

import { createSignal } from "solid-js";

export default function Name() {
  const [name, setName] = createSignal("John");
  setName("Jane");

  return <h1>Hello {name()}</h1>;
}

Ripple

import { track } from "ripple";

export default function Name() {
  let &[name] = track("John");
  name = "Jane";

  return <h1>"Hello "{name}</h1>;
}

Computed state

Solid.js

import { createSignal } from "solid-js";

export default function DoubleCount() {
  const [count] = createSignal(10);
  const doubleCount = () => count() * 2;

  return <div>{doubleCount()}</div>;
}

Ripple

import { track } from "ripple";

export default function DoubleCount() {
  let &[count] = track(10);
  let &[doubleCount] = track(() => count * 2);

  return <div>{doubleCount}</div>;
}

Templating

Minimal template

Solid.js

export default function HelloWorld() {
  return <h1>Hello World!</h1>;
}

Ripple

export default function HelloWorld() {
  return <h1>"Hello world"</h1>;
}

Styling

Solid.js

import "./style.css";

export default function CssStyle() {
  return (
    <>
      <h1 class="title">I am red</h1>
      <button style={{ "font-size": "10rem" }}>I am a button</button>
    </>
  );
}

Ripple

export default function CssStyle() {
  return <>
    <h1 class="title">"I am red"</h1>
    <button style={{ fontSize: "10rem" }}>"I am a button"</button>

    <style>
      .title {
        color: red;
      }
    </style>
  </>;
}

Loop

Solid.js

import { For } from "solid-js";

export default function Colors() {
  const colors = ["red", "green", "blue"];

  return (
    <ul>
      <For each={colors}>{(color) => <li>{color}</li>}</For>
    </ul>
  );
}

Ripple

export default function Colors() {
  const colors = ["red", "green", "blue"];

  return <ul>
    for (const color of colors; key color) {
      <li>{color}</li>
    }
  </ul>;
}

Event click

Solid.js

import { createSignal } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);

  function incrementCount() {
    setCount(count() + 1);
  }

  return (
    <>
      <p>Counter: {count()}</p>
      <button onClick={incrementCount}>+1</button>
    </>
  );
}

Ripple

import { track } from "ripple";

export default function Counter() {
  let &[count] = track(0);

  function incrementCount() {
    count++;
  }

  return <>
    <p>"Count: "{count}</p>
    <button onClick={incrementCount}>"+1"</button>
  </>;
}

Dom ref

Solid.js

import { onMount } from "solid-js";

export default function InputFocused() {
  let inputElement;

  onMount(() => inputElement.focus());

  return <input ref={inputElement} type="text" />;
}

Ripple

export default function InputFocused() {
  function autofocus(element) {
    element.focus();
  }

  return <input ref={autofocus} />;
}

Conditional

Solid.js

import { createSignal, Switch, Match } from "solid-js";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default function TrafficLight() {
  const [lightIndex, setLightIndex] = createSignal(0);

  const light = () => TRAFFIC_LIGHTS[lightIndex()];

  function nextLight() {
    setLightIndex((lightIndex() + 1) % TRAFFIC_LIGHTS.length);
  }

  return (
    <>
      <button onClick={nextLight}>Next light</button>
      <p>Light is: {light()}</p>
      <p>
        You must
        <Switch>
          <Match when={light() === "red"}>
            <span>STOP</span>
          </Match>
          <Match when={light() === "orange"}>
            <span>SLOW DOWN</span>
          </Match>
          <Match when={light() === "green"}>
            <span>GO</span>
          </Match>
        </Switch>
      </p>
    </>
  );
}

Ripple

import { track } from "ripple";

const TRAFFIC_LIGHTS = ["red", "orange", "green"];

export default function TrafficLight() {
  let &[lightIndex] = track(0);

  let &[light] = track(() => TRAFFIC_LIGHTS[lightIndex]);

  function nextLight() {
    lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length;
  }

  return <>
    <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>
  </>;
}

Lifecycle

On mount

Solid.js

import { createSignal, onMount } from "solid-js";

export default function PageTitle() {
  const [pageTitle, setPageTitle] = createSignal("");

  onMount(() => {
    setPageTitle(document.title);
  });

  return <p>Page title: {pageTitle()}</p>;
}

Ripple

import { effect, track } from "ripple";

export default function PageTitle() {
  let &[pageTitle] = track("");

  effect(() => {
    pageTitle = document.title;
  });

  return <h1>"Page title: "{pageTitle}</h1>;
}

On unmount

Solid.js

import { createSignal, onCleanup } from "solid-js";

export default function Time() {
  const [time, setTime] = createSignal(new Date().toLocaleTimeString());

  const timer = setInterval(() => {
    setTime(new Date().toLocaleTimeString());
  }, 1000);

  onCleanup(() => clearInterval(timer));

  return <p>Current time: {time()}</p>;
}

Ripple

import { effect, track } from "ripple";

export default function Time() {
  let &[time] = track(new Date().toLocaleTimeString());

  effect(() => {
    const timer = setInterval(() => {
      time = new Date().toLocaleTimeString();
    }, 1000);

    return () => clearInterval(timer);
  });

  return <h1>"Current time: "{time}</h1>;
}

Component composition

Props

Solid.js

import UserProfile from "./UserProfile.jsx";

export default function App() {
  return (
    <UserProfile
      name="John"
      age={20}
      favouriteColors={["green", "blue", "red"]}
      isAvailable
    />
  );
}

Ripple

import { UserProfile } from "./UserProfile.tsrx";

export function App() {
  return <UserProfile
    name="John"
    age={20}
    favouriteColors={["green", "blue", "red"]}
    isAvailable
  />;
}

Emit to parent

Solid.js

import { createSignal } from "solid-js";
import AnswerButton from "./AnswerButton.jsx";

export default function App() {
  const [isHappy, setIsHappy] = createSignal(true);

  function onAnswerNo() {
    setIsHappy(false);
  }

  function onAnswerYes() {
    setIsHappy(true);
  }

  return (
    <>
      <p>Are you happy?</p>
      <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
      <p style={{ "font-size": "50px" }}>{isHappy() ? "😀" : "😥"}</p>
    </>
  );
}

Ripple

import { track } from "ripple";

import { AnswerButton } from "./AnswerButton.tsrx";

export function App() {
  let &[isHappy] = track(true);

  function onAnswerNo() {
    isHappy = false;
  }

  function onAnswerYes() {
    isHappy = true;
  }

  return <>
    <p>"Are you happy?"</p>
    <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
    <p style={{ fontSize: "50px" }}>{isHappy ? "😀" : "😥"}</p>
  </>;
}

Slot

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return <FunnyButton>Click me!</FunnyButton>;
}

Ripple

import { FunnyButton } from "./FunnyButton.tsrx";

export function App() {
  return <FunnyButton>"Click me!"</FunnyButton>;
}

Slot fallback

Solid.js

import FunnyButton from "./FunnyButton.jsx";

export default function App() {
  return (
    <>
      <FunnyButton />
      <FunnyButton>I got content!</FunnyButton>
    </>
  );
}

Ripple

import { FunnyButton } from "./FunnyButton.tsrx";

export function App() {
  return <>
    <FunnyButton />
    <FunnyButton>"I got content!"</FunnyButton>
  </>;
}

Context

Solid.js

import { createSignal } from "solid-js";

import { UserContext } from "./UserContext";
import UserProfile from "./UserProfile";

export default function App() {
  const [user, setUser] = createSignal({
    id: 1,
    username: "unicorn42",
    email: "[email protected]",
  });

  function updateUsername(newUsername) {
    setUser({ ...user(), username: newUsername });
  }

  return (
    <>
      <h1>Welcome back, {user().username}</h1>
      <UserContext.Provider value={[user, updateUsername]}>
        <UserProfile />
      </UserContext.Provider>
    </>
  );
}

Ripple

import { RippleObject } from "ripple";

import { UserContext } from "./UserContext.tsrx";
import { UserProfile } from "./UserProfile.tsrx";

export function App() {
  const user = new RippleObject({
    id: 1,
    username: "unicorn42",
    email: "[email protected]",
  });

  UserContext.set(user);

  return <>
    <h1>"Welcome back, "{user.username}</h1>
    <UserProfile />
  </>;
}

Form input

Input text

Solid.js

import { createSignal } from "solid-js";

export default function InputHello() {
  const [text, setText] = createSignal("Hello world");

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <>
      <p>{text()}</p>
      <input value={text()} onInput={handleChange} />
    </>
  );
}

Ripple

import { bindValue, track } from "ripple";

export default function InputHello() {
  let &[text, textTracked] = track("Hello world");

  return <>
    <p>{text}</p>
    <input ref={bindValue(textTracked)} />
  </>;
}

Checkbox

Solid.js

import { createSignal } from "solid-js";

export default function IsAvailable() {
  const [isAvailable, setIsAvailable] = createSignal(false);

  function handleChange() {
    setIsAvailable((previousValue) => !previousValue);
  }

  return (
    <>
      <input
        id="is-available"
        type="checkbox"
        checked={isAvailable()}
        onChange={handleChange}
      />
      <label for="is-available">Is available</label>
    </>
  );
}

Ripple

import { bindChecked, track } from "ripple";

export default function IsAvailable() {
  let &[isAvailable, isAvailableTracked] = track(false);

  return <>
    <input
      id="is-available"
      type="checkbox"
      ref={bindChecked(isAvailableTracked)}
    />
    <label for="is-available">"Is available"</label>
  </>;
}

Radio

Solid.js

import { createSignal } from "solid-js";

export default function PickPill() {
  const [picked, setPicked] = createSignal("red");

  function handleChange(event) {
    setPicked(event.target.value);
  }

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

Ripple

import { bindGroup, track } from "ripple";

export default function PickPill() {
  let &[picked, pickedTracked] = track("red");

  return <>
    <div>"Picked: "{picked}</div>

    <input
      id="blue-pill"
      type="radio"
      value="blue"
      ref={bindGroup(pickedTracked)}
    />
    <label for="blue-pill">"Blue pill"</label>

    <input
      id="red-pill"
      type="radio"
      value="red"
      ref={bindGroup(pickedTracked)}
    />
    <label for="red-pill">"Red pill"</label>
  </>;
}

Select

Solid.js

import { createSignal, For } from "solid-js";

const colors = [
  { id: 1, text: "red" },
  { id: 2, text: "blue" },
  { id: 3, text: "green" },
  { id: 4, text: "gray", isDisabled: true },
];

export default function ColorSelect() {
  const [selectedColorId, setSelectedColorId] = createSignal(2);

  function handleChange(event) {
    setSelectedColorId(event.target.value);
  }

  return (
    <select value={selectedColorId()} onChange={handleChange}>
      <For each={colors}>
        {(color) => (
          <option value={color.id} disabled={color.isDisabled}>
            {color.text}
          </option>
        )}
      </For>
    </select>
  );
}

Ripple

import { bindValue, track } from "ripple";

const colors = [
  { id: 1, text: "red" },
  { id: 2, text: "blue" },
  { id: 3, text: "green" },
  { id: 4, text: "gray", isDisabled: true },
];

export default function ColorSelect() {
  let &[selectedColorId, selectedColorIdTracked] = track(2);

  return <select ref={bindValue(selectedColorIdTracked)}>
    for (const color of colors; key color.id) {
      <option value={color.id} disabled={color.isDisabled}>
        {color.text}
      </option>
    }
  </select>;
}

Webapp features

Render app

Solid.js

<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.jsx"></script>
  </body>
</html>

Ripple

<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

Fetch data

Solid.js

import { createResource, For, Switch, Match } from "solid-js";

async function fetchUsers() {
  return (await fetch("https://randomuser.me/api/?results=3")).json();
}

export default function App() {
  const [data] = createResource(fetchUsers);
  const users = () => data()?.results;

  return (
    <Switch>
      <Match when={data.loading}>
        <p>Fetching users...</p>
      </Match>
      <Match when={data.error}>
        <p>An error occurred while fetching users</p>
      </Match>
      <Match when={users()}>
        <ul>
          <For each={users()}>
            {(user) => (
              <li>
                <img src={user.picture.thumbnail} alt="user" />
                <p>
                  {user.name.first} {user.name.last}
                </p>
              </li>
            )}
          </For>
        </ul>
      </Match>
    </Switch>
  );
}

Ripple

import { useFetchUsers } from "./useFetchUsers.tsrx";

export function App() {
  const data = useFetchUsers();

  return <>
    if (data.isLoading) {
      <p>"Fetching users..."</p>
    } else if (data.error) {
      <p>"An error occurred while fetching users"</p>
    } else if (data.users) {
      <ul>
        for (const user of data.users; key user.login.uuid) {
          <li>
            <img src={user.picture.thumbnail} alt="user" />
            <p>{user.name.first}" "{user.name.last}</p>
          </li>
        }
      </ul>
    }
  </>;
}

Reactivity #

Declare state #

Solid.js

Ripple

Update state #

Solid.js

Ripple

Computed state #

Solid.js

Ripple

Templating #

Minimal template #

Solid.js

Ripple

Styling #

Solid.js

Ripple

Loop #

Solid.js

Ripple

Event click #

Solid.js

Ripple

Dom ref #

Solid.js

Ripple

Conditional #

Solid.js

Ripple

Lifecycle #

On mount #

Solid.js

Ripple

On unmount #

Solid.js

Ripple

Component composition #

Props #

Solid.js

Ripple

Emit to parent #

Solid.js

Ripple

Slot #

Solid.js

Ripple

Slot fallback #

Solid.js

Ripple

Context #

Solid.js

Ripple

Form input #

Input text #

Solid.js

Ripple

Checkbox #

Solid.js

Ripple

Radio #

Solid.js

Ripple

Select #

Solid.js

Ripple

Webapp features #

Render app #

Solid.js

Ripple

Fetch data #

Solid.js

Ripple

Reactivity

Declare state

Update state

Computed state

Templating

Minimal template

Styling

Loop

Event click

Dom ref

Conditional

Lifecycle

On mount

On unmount

Component composition

Props

Emit to parent

Slot

Slot fallback

Context

Form input

Input text

Checkbox

Radio

Select

Webapp features

Render app

Fetch data