Build in
sunlight.

1import { $component } from "@soljs/sol";23export const CounterExample = $component(function CounterExample() {4  let count = 0;5  const doubled = count * 2;67  return (8    <section aria-label="Reactive counter">9      <h4>Reactive output</h4>10      <output aria-live="polite">{count}</output>11      <p>doubled / {doubled}</p>12      <footer>13        <button type="button" disabled={count === 0} onClick={() => count--}>14          −15        </button>16        <button type="button" onClick={() => count++}>17          Add one18        </button>19      </footer>20    </section>21  );22});23

1import { $component } from "@soljs/sol";23export const ListExample = $component(function ListExample() {4  let items = [5    { id: 1, label: "Static template", ready: true },6    { id: 2, label: "Dependency graph", ready: false },7  ];89  return (10    <section aria-label="Compiler assembly list">11      <ul>12        {items.map((item) => (13          <li key={item.id}>14            <button15              type="button"16              aria-pressed={item.ready}17              onClick={() => (item.ready = !item.ready)}18            >19              <strong>{item.label}</strong>20              <small>{item.ready ? "Ready" : "Draft"}</small>21            </button>22          </li>23        ))}24      </ul>25      <button26        type="button"27        onClick={() =>28          items.push({29            id: items.length + 1,30            label: `DOM operation ${items.length + 1}`,31            ready: false,32          })33        }34      >35        Add block36      </button>37    </section>38  );39});40

1import { $component, $form } from "@soljs/sol";2import * as v from "valibot";34const emailSchema = v.object({5  email: v.pipe(v.string(), v.trim(), v.email("Enter a valid email address.")),6});78export const FormExample = $component(function FormExample() {9  let submitted = "";10  const form = $form(11    {12      schema: v.parser(emailSchema),13      defaultValues: { email: "" },14      validationStrategy: "onSubmit",15    },16    (values) => {17      submitted = values.email;18    },19  );2021  return (22    <form $form={form}>23      <label for="landing-email">Email address</label>24      <input25        id="landing-email"26        name="email"27        type="email"28        $bind={form.values.email}29        aria-invalid={Boolean(form.errors.email)}30        aria-describedby="landing-email-error"31        placeholder="you@example.com"32      />33      <p id="landing-email-error" role="alert">34        {form.errors.email?.[0] ?? ""}35      </p>36      <button type="submit" disabled={form.isSubmitting}>37        Validate38      </button>39      <p role="status" aria-live="polite">40        {submitted ? `Accepted: ${submitted}` : "Only parsed output reaches submit."}41      </p>42    </form>43  );44});45